/* ==========================================================================
   PHẦN 1: KHUNG LÀM VIỆC CHÍNH VÀ FORM NHẬP LIỆU BÊN TRÁI
   ========================================================================== */

.d-none {
    display: none !important;
}

/* KHUNG LÀM VIỆC CHÍNH (Cố định cột phải 340px để chống co giãn toàn trang) */
.r199k-workspace {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: auto;
    height: auto; 
    box-sizing: border-box;
}

/* KHỐI FORM BÊN TRÁI (#p-g .card) */
#p-g .card {
    background: var(--sf);
    border: 1px solid var(--b);
    border-radius: var(--r);
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1fr 1fr; 
    column-gap: 18px;
    row-gap: 8px;
    align-content: start;
    height: fit-content;
    box-sizing: border-box;
}

/* TAB ĐIỀU HƯỚNG (Chiếm hết 2 cột) */
#p-g .card .seg {
    grid-column: span 2; 
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    width: 360px;
    max-width: 100%;
    background: var(--bg);
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 2px;
}

/* ĐIỀU CHỈNH CÁC KHỐI ĐẶC BIỆT CHIẾM HẾT CHIỀU RỘNG */
#p-g .card .gr:has(#r-gid) {
    grid-column: span 2;
}

#p-g .card .gr:has(#btn-add-r199k) {
    grid-column: span 2;
    margin-top: 4px;
}

/* CẤU TRÚC Ô NHẬP LIỆU (INPUT FIELD) */
.gr {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.gr label {
    font-size: var(--f-size-xs);          
    font-weight: var(--f-weight-semibold); 
    color: var(--ts);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}

.gr input,
.gr select {
    width: 100%;
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--b);
    border-radius: 6px;
    background: var(--input-bg);
    font-size: var(--f-size-sm);          
    font-weight: var(--f-weight-medium);   
    color: var(--t);
    outline: none;
    box-sizing: border-box;
}

.gr input[readonly] {
    background: var(--bg);
    color: var(--ts);
    cursor: not-allowed;
}

/* NÚT BẤM NHẬP LIỆU */
#p-g .card .btn-sm {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f-size-sm);          
    font-weight: var(--f-weight-bold);    
    margin: 0;
    box-sizing: border-box;
}
/* ==========================================================================
   PHẦN 2: SIDEBAR PHẢI, DANH SÁCH THÀNH VIÊN VÀ BỘ LỌC
   ========================================================================== */

/* KHỐI SIDEBAR BÊN PHẢI (.r199k-sidebar) */
.r199k-sidebar {
    background: var(--sf);
    border: 1px solid var(--b);
    border-radius: var(--r);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: fit-content;
    box-sizing: border-box;
}

.cskh-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

/* THẺ CSKH DẠNG DÒNG ĐƠN */
.cskh-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--sf);
    border: 1px solid var(--b);
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
}

#display-customer-info {
    font-size: var(--f-size-sub);         
    font-weight: var(--f-weight-semibold); 
}

/* THẺ CSKH DẠNG KHỐI DỮ LIỆU */
.cskh-card-block {
    display: flex;
    flex-direction: column;
    padding: 14px;
    background: var(--sf);
    border: 1px solid var(--b);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
}

/* HIỆU ỨNG HOVER CHO THẺ CSKH */
.cskh-card:hover, 
.cskh-card-block:hover {
    border-color: var(--b);
    background-color: var(--hover-bg);   
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);         
}

/* CÁC THÀNH PHẦN TRONG THẺ KHỐI CSKH */
.cskh-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.cskh-title-text {
    font-weight: var(--f-weight-bold);    
    font-size: var(--f-size-label);       
    color: var(--t);
    letter-spacing: 0.3px;
}

.cskh-badge-copy {
    font-size: var(--f-size-xs-fine);     
    color: var(--ts);
    font-weight: var(--f-weight-semibold); 
    background: #f8fafc;
    padding: 3px 6px;
    border-radius: 6px;
    border: 1px solid var(--b);
}

.cskh-data-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cskh-data-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--f-size-sm);          
}

.cskh-label {
    color: var(--ts);
    font-weight: var(--f-weight-medium);   
}

.cskh-value {
    font-weight: var(--f-weight-semibold); 
    color: var(--t);
}

.cskh-value.mono {
    font-variant-numeric: tabular-nums;
}

/* NHÃN TRẠNG THÁI ĐẶC BIỆT */
.cskh-value.danger {
    font-weight: var(--f-weight-bold);    
    color: var(--d);
    background: var(--danger-light);
    padding: 2px 6px;
    border-radius: 4px;
}

.cskh-value.success {
    font-weight: var(--f-weight-bold);    
    color: var(--s);
}

/* DANH SÁCH THÀNH VIÊN (.member-list-card) */
.member-list-card {
    display: flex;
    flex-direction: column;
    background: var(--sf);
    border: 1px solid var(--b);
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    width: 100%;
}

.member-list-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    font-size: var(--f-size-label);       
    color: var(--ts);
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 6px;
    margin-bottom: 8px;
}

/* KHU VỰC CUỘN (Giữ cố định không gian thanh cuộn chống giật lệch lề) */
.member-container-scroll {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-gutter: stable; 
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 2px;
    width: 100%;
    box-sizing: border-box;
}

/* THANH CUỘN SIÊU MẢNH */
.member-container-scroll::-webkit-scrollbar {
    width: 4px;
}

.member-container-scroll::-webkit-scrollbar-thumb {
    background: var(--b);
    border-radius: 4px;
}

/* ITEM THÀNH VIÊN */
.member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: var(--f-size-sub);         
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
}

.member-item:hover {
    background: #f1f5f9;
    border-color: var(--b);
}

.member-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.member-item-name {
    display: block;
    font-weight: var(--f-weight-semibold); 
    color: var(--t);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-item-gid {
    font-size: var(--f-size-xs);          
    color: var(--ts);
    font-family: monospace;
}

.member-item-badge {
    font-size: var(--f-size-xs);          
    font-weight: var(--f-weight-semibold); 
    color: var(--p);
    background: var(--info-light);
    padding: 2px 6px;
    border-radius: 4px;
}

.member-empty-state {
    text-align: center;
    color: var(--ts);
    font-size: var(--f-size-sub);         
    padding: 20px 0;
}

/* Ô CHỌN BỘ LỌC */
#filterStatus {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
    box-sizing: border-box !important;

    /* Giống .stat-filter-select */
    padding: 5px 16px;
    font-size: var(--f-size-label);
    font-weight: var(--f-weight-medium);
    font-family: var(--f-family);

    color: var(--t);
    background-color: var(--input-bg);
    border: 1px solid var(--b);
    border-radius: var(--r-sm);

    cursor: pointer;
    outline: none;
    transition: var(--transition);

    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

#filterStatus:hover {
    background-color: var(--hover-bg);
    border-color: var(--border-hover);
}

#filterStatus:focus {
    border-color: var(--info);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}