.m-l-a {
    margin-left: auto !important;
}

.m-l-0 {
    margin-left: 0 !important;
}

.p-15 {
    padding: 15px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-l-0 {
    padding-left: 0 !important;
}

.p-l-5 {
    padding-left: 5px !important;
}

.p-l-10 {
    padding-left: 10px !important;
}

.p-l-15 {
    padding-left: 15px !important;
}

.p-r-0 {
    padding-right: 0 !important;
}

.p-r-5 {
    padding-right: 5px !important;
}

.p-r-10 {
    padding-right: 10px !important;
}

.p-r-15 {
    padding-right: 15px !important;
}

.p-t-0 {
    padding-top: 0px !important;
}

.p-t-5 {
    padding-top: 5px !important;
}

.p-t-10 {
    padding-top: 10px !important;
}

.p-t-15 {
    padding-top: 15px !important;
}

.p-b-0 {
    padding-bottom: 0px !important;
}

.p-b-5 {
    padding-bottom: 5px !important;
}

.p-b-10 {
    padding-bottom: 10px !important;
}

.p-b-15 {
    padding-bottom: 15px !important;
}

.cursor-resize {
    cursor: e-resize;
}

.cursor-pointer {
    cursor: pointer;
}

.d-flex {
    display: flex;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.flex-1 {
    flex: 1;
}

.jc-center {
    justify-content: center;
}

.ai-center {
    align-items: center;
}

.rounded-circle {
    border-radius: 50% !important;
}

.w100 {
    width: 100%;
}

.h100 {
    height: 100%;
}

.h100vh {
    height: 100vh;
}

small {
    font-size: 0.8rem;
}

.m-t-5 {
    margin-top: 5px !important;
}

.m-t-10 {
    margin-top: 10px !important;
}

.m-t-15 {
    margin-top: 15px !important;
}

.m-b-5 {
    margin-bottom: 5px !important;
}

.m-b-10 {
    margin-bottom: 10px !important;
}

.m-b-15 {
    margin-bottom: 15px !important;
}

.m-b-20 {
    margin-bottom: 20px !important;
}

.m-l-3 {
    margin-left: 3px !important;
}

.m-l-5 {
    margin-left: 5px !important;
}

.m-l-10 {
    margin-left: 10px !important;
}

.m-l-15 {
    margin-left: 15px !important;
}

.m-r-5 {
    margin-right: 5px !important;
}

.m-r-10 {
    margin-right: 10px !important;
}

.m-r-15 {
    margin-right: 15px !important;
}

.hidden {
    display: none !important;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently */
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.height-full {
    height: calc(100vh - 10rem);
}

@media (max-width:600px) {
    .hidden-s {
        display: none !important
    }
}

@media (min-width:601px) and (max-width:991px) {
    .hidden-m {
        display: none !important
    }
}

@media (min-width:992px) and (max-width:1199px) {
    .hidden-l {
        display: none !important
    }
}

@media (min-width:1200px) and (max-width:1668px) {
    .hidden-xl {
        display: none !important
    }
}

@media (min-width:1669px) {
    .hidden-xxl {
        display: none !important
    }
}

.b-b {
    border-bottom: var(--theme-border-solid);
}

.p-relative {
    position: relative;
}

/*AI Chat Interface Styles*/

/* Wrapper tổng, chiếm toàn vùng hiển thị */
.ai-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 100px); /* trừ header BBOS phía trên */
    background-color: #f4f7fa;
    padding: 0 30px;
}

/* Khung chính */
.ai-container {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 12px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    height: 100%;
    position: relative;
}

/* Header chat */
.ai-header {
    background: #dfe2e6;
    color: #4679cc;
    padding: 12px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: left;
}
    .ai-header h5 {
        margin: 0;
        font-weight: 600;
        font-size: 1.3rem;
    }

    .ai-header .subtext {
        font-size: 0.85rem;
        opacity: 0.9;
    }

/* Vùng hội thoại chiếm hết phần còn lại */
.ai-chatbox {
    flex: 1;
    overflow-y: auto;
    padding: 15px 25px;
    background: #f9fbfd;
    scroll-behavior: smooth;
}

/* Tin nhắn người dùng */
.user-msg {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

    .user-msg .bubble {
        background-color: #7e8da5;
        color: white;
        padding: 10px 15px;
        border-radius: 16px 16px 0 16px;
        max-width: 80%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

/* Tin nhắn AI */
.ai-msg {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

    .ai-msg .bubble {
        background-color: #e9f0fb;
        color: #1a1a1a;
        padding: 10px 15px;
        border-radius: 16px 16px 16px 0;
        max-width: 80%;
        white-space: pre-wrap;
        word-wrap: break-word;
    }

/* Hiệu ứng AI đang gõ */
.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: start;
}

    .typing-indicator span {
        width: 6px;
        height: 6px;
        background: #1976d2;
        border-radius: 50%;
        margin: 0 2px;
        animation: blink 1.4s infinite both;
    }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes blink {
    0%, 80%, 100% {
        opacity: 0.3;
    }

    40% {
        opacity: 1;
    }
}

/* --- Ô nhập liệu cố định ở đáy màn hình --- */
.ai-input {
    position: sticky; /* cố định ở đáy phần khung cha */
    bottom: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #ddd;
    border-radius: 0 0 12px 12px;
    gap: 10px;
    padding: 12px 20px;
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
    z-index: 10;
}
    /* Textarea rộng hơn */
    .ai-input textarea {
        flex: 2;
        border: 1px solid #ccc;
        border-radius: 20px;
        padding: 12px 18px;
        resize: none;
        font-size: 0.95rem;
        outline: none;
        min-height: 70px;
        background-color: #fff;
    }

        .ai-input textarea:focus {
            border-color: #1976d2;
            box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
        }

/* Nút gửi */
.btn-send {
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 50%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}


    .btn-send:hover {
        background-color: #125a9e;
    }


.error {
    color: #d32f2f;
    font-weight: 600;
}

.equal-height {
    display: flex;
    align-items: center;
    height: 100%;
}

/* ============================================================================
   TRANG CHU (Pages/Index.razor) - dung theo ban thiet ke trong docs/ui
   ----------------------------------------------------------------------------
   Muc tieu: tieu de + 4 o KPI + 4 card dashboard + bang phan he cung nhin thay
   duoc trong MOT man hinh, khong phai cuon xuong moi thay phan he. Vi vay chieu
   cao vung bieu do khong ghim cung theo px ma co gian theo chieu cao cua so (vh).

   Mau sac, khoang cach, bo goc lay tu muc "Design Tokens" cua docs/ui/README.md.
   Cac lop ".home-*" CHI dung o trang chu; dashboard phan he van giu kich thuoc cu.
   ============================================================================ */

.home-page {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 14px 16px;
    font-family: 'Lexend Deca', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* --- Khoi 1: tieu de + thanh cong cu --- */
.home-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex: none;
}

.home-head-title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-text-strong);
    letter-spacing: -0.2px;
}

.home-head-sub {
    margin: 3px 0 0;
    font-size: 11.5px;
    color: var(--ui-text-muted);
}

.home-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-segmented {
    display: flex;
    align-items: center;
    height: 32px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: var(--ui-surface);
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ui-text-soft);
}

    .home-segmented span {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 12px;
        cursor: pointer;
        transition: background .15s;
    }

        .home-segmented span + span {
            border-left: 1px solid var(--ui-border);
        }

        .home-segmented span:hover {
            background: var(--ui-surface-alt);
        }

        .home-segmented span.active {
            background: var(--ui-sel-bg);
            color: var(--ui-sel-text);
            font-weight: 600;
        }

/* Nut thao tac dung chung cho thanh cong cu va nut mo popup phan he. */
.home-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    background: var(--ui-surface);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ui-text-soft);
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, border-color .15s;
}

    .home-btn i {
        font-size: 11px;
    }

    .home-btn:hover {
        border-color: var(--theme-primary);
        color: var(--theme-primary);
    }

/* Nut hanh dong CHINH cua trang (hien la "Load du lieu"). Ten class con giu chu
   "dark" tu ban thiet ke goc (khoi than chi #434a51 tren nen sang) nhung mau nay
   nay lay theo skin qua --ui-accent-*: y do khong phai "mau toi" ma la "khoi dac
   tuong phan manh nhat voi nen", nen o skin Dark no DAO CHIEU thanh nut sang chu
   toi - toi tren nen toi thi nut chim mat, khong con la nut chinh nua. */
.home-btn-dark {
    border-color: var(--ui-accent-bg);
    background: var(--ui-accent-bg);
    color: var(--ui-accent-text);
    font-weight: 600;
}

    .home-btn-dark:hover {
        border-color: var(--ui-accent-hover-bg);
        background: var(--ui-accent-hover-bg);
        color: var(--ui-accent-text);
    }

.home-btn-link {
    height: 28px;
    color: var(--theme-primary);
    font-weight: 600;
}

    .home-btn-link:hover {
        background: var(--ui-sel-bg);
    }

/* --- Bo loc chi tiet (mac dinh bi Show_Hide_Form thu gon) --- */
.home-filter {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 4px 14px;
    box-shadow: var(--ui-shadow);
}

/* --- Khoi 2: 4 o KPI --- */
.home-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    flex: none;
}

.home-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 15px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: var(--ui-shadow);
}

.home-kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home-kpi-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.home-kpi-badge {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 5px;
    padding: 2px 6px;
    white-space: nowrap;
}

.home-kpi-value {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.6px;
    font-variant-numeric: tabular-nums;
}

.home-kpi-track {
    display: flex;
    height: 4px;
    border-radius: 3px;
    background: var(--ui-surface-sunken);
    overflow: hidden;
}

    .home-kpi-track > div {
        height: 100%;
    }

.home-kpi-note {
    font-size: 10.5px;
    color: var(--ui-text-faint);
    min-height: 14px;
}

/* --- Khoi 3: 4 card dashboard tren mot hang --- */
/* Chieu cao ca hang co gian theo cua so. Day la con so CAN CHINH LAI moi khi doi
   cach xep cot (vi du xuong 2x2 thi phai tang len), xem skill man-hinh-chinh-bbos. */
.home-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px;
    flex: none;
    height: clamp(280px, 43vh, 429px);
}

.home-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 11px 13px 9px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: var(--ui-shadow);
}

.home-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    /* Tieu de chiem het cho trong de tong tien (card tuoi no) va nut phong to dinh sat le PHAI
       canh nhau. Khong co dong nay thi space-between se day tong tien ra giua card. */
    .home-card-head .home-card-title {
        flex: 1;
        min-width: 0;
    }

/* Nut phong to card (goc phai tieu de). Mo nhat luc binh thuong, ro han khi ro chuot vao card -
   nut la chuc nang phu, khong duoc hut mat khoi con so tren card. */
.home-card-expand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    color: var(--ui-text-faint);
    font-size: 10px;
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s, background .15s, color .15s;
}

.home-card:hover .home-card-expand {
    opacity: 1;
}

.home-card-expand:hover {
    background: var(--ui-surface-alt);
    color: var(--theme-primary);
}

.home-card-title {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-text);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.home-card-total {
    flex: none;
    font-size: 9.5px;
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
}

.home-card-body {
    flex: 1;
    min-height: 0;
    padding-top: 4px;
}

/* Chu thich mau cua hai card bieu do tren TRANG CHU (card nho). Chi de xem, khong bam duoc -
   ban bam an/hien tung series nam trong modal phong to va do Chart.js ve (xem BuildBusinessConfig
   trong Index.razor). */
.home-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 11px;
    margin: 5px 0 2px;
    font-size: 10px;
    color: var(--ui-text-muted);
}

    .home-legend span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .home-legend i {
        width: 8px;
        height: 8px;
        border-radius: 2px;
    }

        .home-legend i.line {
            width: 12px;
            height: 2px;
            border-radius: 0;
        }

/* Chart.razor render <div style="height:{Height}px"> boc canvas va KHONG nhan Class,
   nen phai nham vao the div con qua card cha va dung !important de de len style inline.
   Chart.js dat responsive = true + maintainAspectRatio = false nen canvas tu ve lai
   theo o chua moi khi cua so doi kich thuoc. */
.home-chart-body > div {
    height: 100% !important;
    width: 100% !important;
}

.home-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 11.5px;
    color: var(--ui-text-faint);
}

/* --- Card 3: top khach hang theo doanh thu --- */
.home-rank-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Card cao co dinh (xem .home-chart-grid). Moi khach hang chiem 2 dong (ma + ten) nen tren man hinh
       thap nhat 8 dong co the cham day - cat bot phan thua thay vi de tran ra ngoai card. */
    overflow: hidden;
}

/* Mot khach hang = dong ma/thanh/gia tri + dong ten ben duoi. */
.home-rank-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-rank-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.home-rank-fullname {
    /* Chua 1 dong ten, tran thi cat bang dau ba cham; min-height giu nhip cho ca dong khong co ten. */
    min-height: 12px;
    padding-left: 95px; /* 88px cua .home-rank-name + 7px gap: ten thang hang voi thanh bieu do. */
    font-size: 9px;
    line-height: 12px;
    color: var(--ui-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-rank-name {
    width: 88px;
    flex: none;
    font-size: 9.5px;
    color: var(--ui-text-soft);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.home-rank-track {
    flex: 1;
    min-width: 0;
    height: 12px;
    border-radius: 3px;
    background: var(--ui-surface-sunken);
    overflow: hidden;
}

    .home-rank-track > div {
        height: 100%;
    }

.home-rank-value {
    width: 56px;
    flex: none;
    font-size: 9.5px;
    color: var(--ui-text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Card 4: cong no theo tuoi no --- */
.home-aging-bar {
    display: flex;
    height: 11px;
    margin: 8px 0;
    border-radius: 3px;
    overflow: hidden;
    background: var(--ui-surface-sunken);
}

.home-aging-list {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-top: 0;
}

.home-aging-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10.5px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--ui-border);
}

    .home-aging-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .home-aging-row > span:first-child {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--ui-text-soft);
    }

    .home-aging-row i {
        width: 8px;
        height: 8px;
        flex: none;
        border-radius: 2px;
    }

.home-aging-value {
    color: var(--ui-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Dong "tren 90 ngay" to do toan bo de nhin phat thay ngay. */
.home-aging-row.danger > span:first-child,
.home-aging-row.danger .home-aging-value {
    color: #c0022e;
    font-weight: 600;
}

/* Mau 5 nhom phan he (docs/ui-module/README.md muc "Design Tokens") - dung chung cho
   icon chip cua luoi phan he trang chu (.home-module-icon) va popup "Tat ca phan he"
   (.home-panel-icon). Gia tri hex la fallback sRGB, ban chuan la oklch (ghi trong comment
   canh moi bien, xem file HTML goc trong docs/ui-module) - du an chua dung oklch o noi khac
   nen tam thoi dung hex cho dong bo voi phan con lai cua custom.css. */
:root {
    --ico-buy: #2769b7;   /* oklch(0.52 0.14 255) */
    --tint-buy: #e1f0ff;  /* oklch(0.95 0.03 255) */
    --solid-buy: #0859ac; /* oklch(0.47 0.15 255) */
    --ico-ops: #007e80;   /* oklch(0.52 0.13 195) */
    --tint-ops: #d8f5f5;  /* oklch(0.95 0.03 195) */
    --solid-ops: #007173; /* oklch(0.47 0.14 195) */
    --ico-fin: #7652ac;   /* oklch(0.52 0.14 300) */
    --tint-fin: #f1eaff;  /* oklch(0.95 0.03 300) */
    --solid-fin: #6941a1; /* oklch(0.47 0.15 300) */
    --ico-hr: #2e7c35;    /* oklch(0.52 0.13 145) */
    --tint-hr: #e3f4e2;   /* oklch(0.95 0.03 145) */
    --solid-hr: #106e20;  /* oklch(0.47 0.14 145) */
    --ico-data: #516b8b;   /* oklch(0.52 0.06 255) */
    --tint-data: #e8eff9;  /* oklch(0.95 0.015 255) */
    --solid-data: #3a4e68; /* oklch(0.42 0.05 255) */
}

/* ============================================================================
   BANG MAU BE MAT DUNG CHUNG CHO HEADER + TRANG CHU (them 16/08/2026)
   ----------------------------------------------------------------------------
   VI SAO CO KHOI NAY: header moi va trang chu moi (docs/ui-main) duoc dung bang
   HTML/CSS thuan voi ma mau GHI CUNG mau sang (#fff, #e4e9ef, #2b3238...). Cac
   thanh phan nay KHONG di qua he thong skin cua app (skins/*.css chi to cho
   .card, .page-sidebar, .header-navbar... cua khung cu), nen o skin Dark va Cream
   chung van trang toat, doc len giua nen toi/nen kem - nguoi dung bao ngay
   16/08/2026 kem 2 anh chup.
   CACH XU LY: gom mau thanh bien o day roi ghi de theo tung skin ben duoi (tim
   "SKIN DARK" / "SKIN CREAM" / "SKIN GRAY" / "SKIN LIGHT"). Them skin moi ve sau
   chi phai khai lai 19 bien, khong phai do lai tung rule.
   GIA TRI MAC DINH O DAY LA CUA SKIN "DEFAULT" - bang xam am xanh cua docs/ui-main,
   dam va ro net nhat trong cac skin nen sang. Skin Light co bang RIENG (nhat va
   thoang hon) chu khong dung chung nua: truoc day hai skin dung chung bo mac dinh
   nen nhin gan nhu y het nhau, nguoi dung phan hoi 16/08/2026.
   QUY TAC KHI THEM MAU MOI CHO HEADER/TRANG CHU: dung bien, dung go ma hex thang
   vao rule - go hex la thanh phan do se lai tro thanh vet trang o skin toi.
   Bien mau nhan dien 5 nhom phan he (--ico/--tint/--solid ben tren) KHONG nam
   trong he nay: chung la mau thuong hieu cua tung phan he, giu nguyen moi skin.
   ============================================================================ */
:root {
    --ui-surface: #fff;          /* nen the/nut/chip noi len tren nen trang */
    --ui-surface-alt: #f7f9fb;   /* nen chim nhe: chip DataCode, o tim kiem */
    --ui-surface-sunken: #f4f6f9;/* ranh thanh do: track bieu do xep hang, tuoi no */
    --ui-border: #e4e9ef;        /* vien the lon (KPI, card bieu do, popup) */
    --ui-border-strong: #dbe2ea; /* vien vat nho ro net hon (nut, chip, o icon) */
    --ui-text: #2b3238;          /* chu chinh */
    --ui-text-strong: #222a31;   /* tieu de trang */
    --ui-text-soft: #5a646f;     /* chu tren nut */
    --ui-text-muted: #8a949e;    /* nhan phu, chu in hoa nho */
    --ui-text-faint: #98a2ad;    /* ghi chu mo nhat nhat */
    --ui-tile-bg: #dee4ed;       /* o phan he - xam hon nen the de tao "nen mong" */
    --ui-tile-border: #c7d0dc;
    --ui-tile-hover-bg: #fff;    /* hover DAO CHIEU: o bat sang hon nen cua no */
    --ui-sel-bg: #eef4fd;        /* muc dang chon (o phan he, muc menu dang mo) */
    --ui-sel-text: #1f4f96;
    --ui-shadow: 0 1px 2px rgba(16,24,40,.03);
    /* Nut hanh dong chinh ("Load du lieu"): khoi dac tuong phan MANH NHAT voi nen
       cua skin - xem ".home-btn-dark". Khong phai lúc nao cung la mau toi. */
    --ui-accent-bg: #434a51;
    --ui-accent-hover-bg: #2c3136;
    --ui-accent-text: #fff;
}

/* --- SKIN DARK -------------------------------------------------------------
   Bam theo bang mau san co cua skins/dark-mode.css de header + trang chu lien
   mach voi phan khung cu: be mat noi len = #26272b (dung mau .card va
   .header-navbar cua skin), nen chim = #37393e (dung mau body), vien = #3d3d40
   (dung mau vien muc menu).
   O phan he KHONG dung thang #26272b: no phai xam HON be mat the de giu dung y do
   "nen mong vung chac" cua ban sang, nen lay #2f3136 - dat canh card #26272b la
   phan biet duoc ma khong choi.
   Vi sao khoa bang :has(link#css_theme_mode[href*="..."]) chu khong viet trong
   skins/dark-mode.css: file skin nap qua the <link> ma JS doi href luc chay
   (B_ChangeThemeMode), duong dan mang "?ud=202401122244" ghi cung trong NuGet nen
   khong bump duoc, va vi request phat sinh SAU khi trang tai xong nen Ctrl+Shift+R
   khong pha duoc cache cua no - sua file skin xong tren may nguoi dung van y nguyen
   (da mat mot buoi vi chuyen nay ngay 15/08/2026). Cung bo bien nay VAN duoc chep
   vao skins/dark-mode.css de dung kien truc, hai ben phai sua kem nhau.
   --------------------------------------------------------------------------- */
html:has(link#css_theme_mode[href*="dark-mode"]) {
    --ui-surface: #26272b;
    --ui-surface-alt: #303237;
    --ui-surface-sunken: #37393e;
    --ui-border: #3d3d40;
    --ui-border-strong: #4a4d52;
    --ui-text: #e3e6e9;
    --ui-text-strong: #f2f4f6;
    --ui-text-soft: #c0c5c9;
    --ui-text-muted: #9aa1a8;
    --ui-text-faint: #868d94;
    --ui-tile-bg: #2f3136;
    --ui-tile-border: #45484e;
    --ui-tile-hover-bg: #3a3d43;
    --ui-sel-bg: #1f3a5f;
    --ui-sel-text: #cfe0f7;
    --ui-shadow: 0 1px 2px rgba(0,0,0,.35);
    /* DAO CHIEU o skin toi: nut chinh la khoi SANG, chu toi. De nguyen khoi than chi
       #434a51 nhu ban sang thi no gan trung nen #37393e - nut chinh bien mat. */
    --ui-accent-bg: #e6e9ec;
    --ui-accent-hover-bg: #fff;
    --ui-accent-text: #1f2023;
}

/* --- SKIN CREAM ------------------------------------------------------------
   Bam theo skins/cream-mode.css: be mat noi len = #F2D6BD (mau .card va
   .header-navbar cua skin), nen chim/vien = #D9BFA0 (mau body va duong ke bang).
   Chu KHONG de den tuyen: nen kem am nen dung nau #4a3520 cho do nghi ngoi.
   Xem ghi chu ve :has() o khoi SKIN DARK ben tren.
   --------------------------------------------------------------------------- */
html:has(link#css_theme_mode[href*="cream-mode"]) {
    --ui-surface: #F2D6BD;
    --ui-surface-alt: #EACBAD;
    --ui-surface-sunken: #E0BC98;
    --ui-border: #D9BFA0;
    --ui-border-strong: #C9AA86;
    --ui-text: #4a3520;
    --ui-text-strong: #3a2814;
    --ui-text-soft: #6b5238;
    --ui-text-muted: #8a6f52;
    --ui-text-faint: #9c8265;
    --ui-tile-bg: #E7C9A9;
    --ui-tile-border: #C9AA86;
    --ui-tile-hover-bg: #F8E6D2;
    --ui-sel-bg: #F8E6D2;
    --ui-sel-text: #8a4b12;
    --ui-shadow: 0 1px 2px rgba(90,60,30,.10);
    /* Nau dam thay vi than chi: than chi xam lanh dat giua nen kem am nhin nhu
       mieng vá tu giao dien khac. */
    --ui-accent-bg: #7A5230;
    --ui-accent-hover-bg: #5E3D21;
    --ui-accent-text: #FFF6EC;
}

/* --- SKIN LIGHT ------------------------------------------------------------
   skins/light-mode.css gan nhu trong (chi dat mau vien muc menu #e4e5e5), nen truoc
   day skin nay xai chung bang mac dinh voi Default -> hai skin nhin y het nhau,
   nguoi dung hoi lai 16/08/2026 "sao khong thay khac gi".
   HUONG PHAN BIET: Default la ban DAM va RO NET (xam am xanh, o phan he #dee4ed,
   nut chinh khoi than chi, menu trai cung xam) - hop voi ai muon khung suon ro rang.
   Light la ban TRANG THOANG: be mat trang tinh, vien nhat hon mot bac, o phan he chi
   con #f2f5f9 (dat canh #dee4ed cua Default la thay ngay), menu trai VAN TRANG (khoi
   mau sidebar chi khoa cho skin default - xem cuoi file), va nut hanh dong chinh lay
   MAU CHU DAO thay vi khoi than chi cho tuoi.
   Nut chinh dung var(--theme-primary) chu khong go ma cung: mau nay doi theo bang
   Theme Colors nguoi dung chon trong Skins, go cung la chon theme mau khac se lech.
   Xem ghi chu ve :has() o khoi SKIN DARK ben duoi.
   --------------------------------------------------------------------------- */
html:has(link#css_theme_mode[href*="light-mode"]) {
    --ui-surface: #fff;
    --ui-surface-alt: #fafbfc;
    --ui-surface-sunken: #f2f5f8;
    --ui-border: #eceff3;
    --ui-border-strong: #e2e7ee;
    --ui-text: #2b3238;
    --ui-text-strong: #222a31;
    --ui-text-soft: #616b76;
    --ui-text-muted: #939ca6;
    --ui-text-faint: #a6aeb8;
    --ui-tile-bg: #f2f5f9;
    --ui-tile-border: #e2e7ee;
    --ui-tile-hover-bg: #fff;
    --ui-sel-bg: #eef4fd;
    --ui-sel-text: #1f4f96;
    --ui-shadow: 0 1px 2px rgba(16,24,40,.03);
    --ui-accent-bg: var(--theme-primary);
    --ui-accent-hover-bg: var(--theme-primary-700);
    --ui-accent-text: #fff;
}

/* --- SKIN GRAY ------------------------------------------------------------
   Bam theo skins/gray-mode.css: be mat noi len = #F2F2F2 (mau .card,
   .header-navbar va .page-sidebar cua skin), nen chim/vien = #D9D9D9 (mau body).
   DIEM RIENG CUA SKIN NAY: gray dung xam TRUNG TINH, trong khi bang mac dinh cua
   header/trang chu la xam AM XANH (#dee4ed, #e4e9ef - lay tu docs/ui-main). De
   nguyen thi o phan he va vien card hoi xanh len giua nen xam thuan, nhin ban mau
   (nguoi dung phan hoi 16/08/2026). Vi vay ca bo bien o day deu la xam khong ám sac.
   NGOAI LE co y: --ui-sel-bg / --ui-sel-text van giu sac xanh, vi day la mau bao
   "dang chon" - bo not sac di thi muc dang chon lan vao cac muc con lai.
   Xem ghi chu ve :has() o khoi SKIN DARK ben tren.
   --------------------------------------------------------------------------- */
html:has(link#css_theme_mode[href*="gray-mode"]) {
    --ui-surface: #F2F2F2;
    --ui-surface-alt: #E8E8E8;
    --ui-surface-sunken: #DFDFDF;
    --ui-border: #D9D9D9;
    --ui-border-strong: #C4C4C4;
    --ui-text: #2E2E2F;
    --ui-text-strong: #1F1F20;
    --ui-text-soft: #55565A;
    --ui-text-muted: #7A7B7E;
    --ui-text-faint: #8E8F92;
    --ui-tile-bg: #E4E4E4;
    --ui-tile-border: #C4C4C4;
    --ui-tile-hover-bg: #FAFAFA;
    --ui-sel-bg: #E9EFF8;
    --ui-sel-text: #1f4f96;
    --ui-shadow: 0 1px 2px rgba(0,0,0,.06);
    /* Than chi TRUNG TINH, bo not chut sac xanh cua ban mac dinh (#434a51). */
    --ui-accent-bg: #3F4042;
    --ui-accent-hover-bg: #2A2B2D;
    --ui-accent-text: #fff;
}

/* Dau sidebar (khoi ten phan he) tu ve nen sang --tint-<group> de khong phu thuoc
   skin - xem comment day du o ".nav-module-head". Cach do dung cho 3 skin nen sang,
   nhung o Dark thi mang pastel do doc len giua sidebar toi, con o Cream thi lech
   tong am. Hai khoi duoi dat lai nen theo skin va giu MAU NHAN DIEN NHOM o icon:
   - Dark: icon lay --tint-<group> (ban sang cua mau nhom) de noi tren nen toi.
   - Cream: giu --solid-<group> nhu ban goc vi nen van la mau sang. */
html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head,
html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group] {
    background: var(--ui-surface-alt);
    border-bottom-color: var(--ui-border);
}

    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head .nav-module-name {
        color: var(--ui-text);
    }

    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head .nav-module-icon { color: var(--tint-data); }
    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group="buy"] .nav-module-icon { color: var(--tint-buy); }
    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group="ops"] .nav-module-icon { color: var(--tint-ops); }
    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group="fin"] .nav-module-icon { color: var(--tint-fin); }
    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group="hr"] .nav-module-icon { color: var(--tint-hr); }
    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head[data-group="data"] .nav-module-icon { color: var(--tint-data); }

    html:has(link#css_theme_mode[href*="dark-mode"]) .nav-module-head .fa-exchange-alt {
        color: rgba(255, 255, 255, .45);
    }

html:has(link#css_theme_mode[href*="cream-mode"]) .nav-module-head,
html:has(link#css_theme_mode[href*="cream-mode"]) .nav-module-head[data-group] {
    background: var(--ui-tile-bg);
    border-bottom-color: var(--ui-border);
}

    html:has(link#css_theme_mode[href*="cream-mode"]) .nav-module-head .nav-module-name {
        color: var(--ui-text);
    }

/* --- Khoi 4: bang phan he --- */
.home-modules {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
}

.home-modules-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-modules-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.home-modules-line {
    flex: 1;
    height: 1px;
    background: var(--ui-border);
}

/* So cot o day phai KHOP voi hang so MODULE_COLUMN_COUNT trong Index.razor,
   neu khong hang cuoi cua luoi se bi khuyet o. */
.home-module-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 11px;
}

/* Nen o phan he la XAM #dee4ed chu khong phai trang (nguoi dung 15/08/2026 yeu cau
   "nen mong vung chac, on dinh" roi doi xam dam them 2 lan). Y do: nen trang cua o
   trung voi nen trang cua ca trang nen o trong nhu dang troi; ha xuong xam thi day o
   lui ve sau lam "mat nen", con chu va chip icon noi len tren.
   Duong di mau: #fff -> #f4f6f9 -> #eaeef4 -> #dee4ed.
   HAI luu y cho nguoi sua sau:
   1) Nhan dung 1.3 lan do lech so voi trang moi buoc thi mat KHONG phan biet noi
      (vd tu #eaeef4 ra #e4e9f1), nen moi buoc deu lay dam khoang gap ruoi den gap doi.
   2) VUNG CAM la quanh #e4e9f1-#e8eff9: chip icon nhom "data" (3 o Import/Xu ly/Check
      Du Lieu) co nen --tint-data #e8eff9, de nen o roi vao khoang do thi chip chim
      han vao nen, nhin nhu mat icon. #dee4ed da di QUA han vung do nen chip lai sang
      hon nen va noi len binh thuong. Muon dam hon nua thi cu di tiep, dung dung lai
      giua chung; nhung phai kiem tuong phan chu #2b3238 truoc.
   Doi kem 2 thu de khong pha nhip:
   - Vien dam len #c7d0dc vi vien cu #e4e9ef qua nhat, dat tren nen xam se bien mat.
   - Hover DAO CHIEU sang trang (xem rule ".home-module-tile:hover" ben duoi): truoc
     day nen trang - hover xam nhat, gio nen xam - hover trang, o duoc ru chuot sang
     bat len. Neu chi doi nen o ma quen sua hover thi mau hover cu (#f9fbfe) gan
     trung mau nen moi, ru chuot se khong thay phan hoi gi. */
.home-module-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 8px;
    background: var(--ui-tile-bg);
    border: 1px solid var(--ui-tile-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

    .home-module-tile img {
        width: 38px;
        height: 38px;
        object-fit: contain;
    }

    /* Chip icon SVG moi (docs/ui-module muc 2) - thay cho anh PNG clipart cu, chi ap dung
       cho module NHAN DIEN duoc qua ModuleIconMap (xem Index.razor); module la, chua khai
       bao thi van ROT VE <img> nhu cu nen khong can style rieng cho truong hop do. Mau lay
       theo thuoc tinh data-group ma Index.razor gan tren the cha ".home-module-tile". */
    .home-module-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        flex: none;
    }

    .home-module-tile[data-group="buy"] .home-module-icon { background: var(--tint-buy); color: var(--ico-buy); }
    .home-module-tile[data-group="ops"] .home-module-icon { background: var(--tint-ops); color: var(--ico-ops); }
    .home-module-tile[data-group="fin"] .home-module-icon { background: var(--tint-fin); color: var(--ico-fin); }
    .home-module-tile[data-group="hr"] .home-module-icon { background: var(--tint-hr); color: var(--ico-hr); }
    .home-module-tile[data-group="data"] .home-module-icon { background: var(--tint-data); color: var(--ico-data); }

    .home-module-tile span {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--ui-text);
        text-align: center;
    }

    /* Hover lam o SANG LEN (dao chieu so voi truoc, xem comment o ".home-module-tile"):
       nen o von da xam hon nen the, nen phai bat sang moi tao duoc do tuong phan.
       O skin toi thi "--ui-tile-hover-bg" duoc dat lai thanh mot bac xam SANG HON nen
       o, van dung tinh than "sang len" chu khong phai bat trang toat. */
    .home-module-tile:hover {
        border-color: var(--theme-primary);
        background: var(--ui-tile-hover-bg);
    }

    .home-module-tile.selected {
        background: var(--ui-sel-bg);
        border-color: var(--theme-primary);
    }

        .home-module-tile.selected span {
            color: var(--ui-sel-text);
        }

/* --- Popup "Tat ca phan he" --- */
.home-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,26,32,.42);
}

.home-panel {
    display: flex;
    flex-direction: column;
    width: min(1180px, 92vw);
    max-height: 82vh;
    background: var(--ui-surface);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16,24,40,.28);
    overflow: hidden;
}

.home-panel-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ui-border);
}

    .home-panel-head > i {
        font-size: 14px;
        color: var(--theme-primary);
    }

.home-panel-title {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-strong);
}

.home-panel-sub {
    font-size: 11px;
    font-weight: 400;
    color: var(--ui-text-muted);
}

.home-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--ui-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
}

    .home-panel-close:hover {
        background: var(--ui-surface-alt);
        color: #c0022e;
    }

/* ============================================================================
   MODAL PHONG TO MOT CARD DASHBOARD (nut phong to tren 4 card cua trang chu)

   Dung lai .home-overlay cua popup "Tat ca phan he" nen nen mo va cach dong giong nhau.
   Noi dung ben trong la CUNG markup voi card nho (xem cac RenderFragment trong Index.razor),
   nen chi phong to bang cach de len cac lop .home-rank-* / .home-aging-* o day - KHONG duoc
   sua thang cac lop goc, sua o do la card nho tren trang chu cung to theo va vo bo cuc
   "4 khoi lot mot man hinh".
   ============================================================================ */
.home-expand {
    display: flex;
    flex-direction: column;
    width: min(1280px, 94vw);
    height: min(780px, 88vh);
    padding: 16px 20px 18px;
    background: var(--ui-surface);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(16,24,40,.28);
    overflow: hidden;
}

.home-expand-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ui-border);
}

.home-expand-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-strong);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.home-expand-body {
    flex: 1;
    min-height: 0;
    padding-top: 12px;
}

    /* Bang xep hang / danh sach tuoi no co the dai hon khung thi cuon. KHONG cho cuon o hai card
       bieu do: canvas cua Chart.js cao 100% khung, bat cuon se sinh thanh cuon thua. */
    .home-expand-body:not(.home-chart-body) {
        overflow-y: auto;
    }

/* ---- Card "Top khach hang": gian rong nhan, thanh day hon, chu doc duoc o kich thuoc lon ---- */
.home-expand-body.home-rank-list {
    justify-content: flex-start;
    gap: 16px;
}

.home-expand-body .home-rank-name {
    width: 130px;
    font-size: 12.5px;
}

.home-expand-body .home-rank-track {
    height: 18px;
    border-radius: 4px;
}

.home-expand-body .home-rank-value {
    width: 92px;
    font-size: 12.5px;
}

.home-expand-body .home-rank-fullname {
    /* 137px = 130px cua .home-rank-name + 7px gap cua .home-rank-row (giu ten thang hang voi thanh). */
    min-height: 16px;
    padding-left: 137px;
    font-size: 11.5px;
    line-height: 16px;
}

/* ---- Card "Cong no theo tuoi no" ---- */
.home-expand-body .home-aging-bar {
    height: 18px;
    margin: 0 0 16px;
    border-radius: 4px;
}

.home-expand-body .home-aging-list {
    justify-content: flex-start;
    gap: 14px;
}

.home-expand-body .home-aging-row {
    font-size: 13px;
    padding-bottom: 10px;
}

    .home-expand-body .home-aging-row i {
        width: 11px;
        height: 11px;
    }

/* Luoi phan he trong popup - xem ModulePanel.razor. */
/* Legend nhom mau (docs/ui-module muc 1) - dat giua tieu de va luoi card trong modal
   "Tat ca phan he". Khong dung o luoi phan he trang chu (chi popup moi co).
   Dat ten ".home-panel-legend" (khong phai ".home-legend") vi ten do DA CO SAN tu truoc
   (dung cho chu thich mau trong card bieu do - xem dong ~707: gap 4px 11px, font-size 10px,
   mau #6b7683) - dung trung ten se de 2 rule chong cheo len nhau, hien sai vi tri. */
/* CAN GIUA ca cum (khong phai canh trai) - day la sua theo phan hoi ngay 14/08/2026:
   ban thiet ke goc canh trai duoc vi tieu de "All modules" cua no cung bat dau ngay tai
   le trai cua khung. Popup cua BBOS co THEM icon luoi dung truoc tieu de (.home-panel-head > i),
   nen chu tieu de bat dau o ~46px (20 padding + 14 icon + 12 gap) trong khi legend chi o 20px
   -> nhin nhu legend tho han ra ngoai le trai. Can giua la cach xu ly khong phu thuoc vao
   BE RONG cua icon hay gap (khong go con so cung 46px, sau nay doi icon van dung). */
.home-panel-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    list-style: none;
    margin: 0 0 18px;
    padding: 0 20px;
}

    .home-panel-legend li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .02em;
        text-transform: uppercase;
        color: var(--ui-text-muted);
    }

    .home-panel-legend i {
        width: 9px;
        height: 9px;
        border-radius: 3px;
        flex: none;
    }

.home-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 20px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* The card module (docs/ui-module muc 1) - da doi tu flex-row sang grid 2 cot
   (chip 40px + noi dung), align-items:start de mo ta duoc xuong toi da 3 dong ma
   khong lam icon bi keo giua theo chieu doc. Ghi chu: ban thiet ke goc de xuat dung
   the <button> de co focus-visible qua ban phim; giu nguyen <div> o day de KHONG pha
   vo cac @onclick/@onmousedown/@onmouseup san co (giu-chuot-de-ghim) - xem README
   docs/ui-module muc "Definition of done" cho phan con thieu nay. */
/* The la <button> (DoD muc 5 docs/ui-module) nen phai go bo style mac dinh cua trinh duyet:
   font/text-align/appearance khong ke thua tu body neu khong reset. Phan con lai giu y nguyen
   nhu hoi con la <div> de giao dien khong doi. */
.home-panel-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 13px;
    align-items: start;
    padding: 13px 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
    /* Giu chuot de ghim: chan trinh duyet boi den chu / hien menu chuot phai giua chung. */
    user-select: none;
    -webkit-user-select: none;
    /* Reset cho <button> */
    width: 100%;
    margin: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
}

    /* Vien focus khi di ban phim (spec: outline 2px var(--ico-buy), offset 2px). Dung
       :focus-visible chu KHONG :focus de bam chuot khong bi hien vien. */
    .home-panel-item:focus-visible {
        outline: 2px solid var(--ico-buy);
        outline-offset: 2px;
    }

    /* BAT BUOC khi the la <button>: materialize.css dong 6029 co
       "button:focus { outline:none; background-color:#ff548e }" - nen HONG cho MOI the button
       khi focus. Do dac trung cua no la (0,1,1) - CAO HON ".home-panel-item" (0,1,0) - nen the
       module binh thuong Tab toi se doi sang nen hong neu khong chan lai o day.
       ".home-panel-item:focus" la (0,2,0) nen thang duoc rule cua materialize.
       KHONG can lam tuong tu cho trang thai .selected / .coming-soon: hai rule do cung >= (0,2,0)
       va nam SAU trong file nen van giu dung mau nen rieng cua chung. */
    .home-panel-item:focus {
        background-color: var(--ui-surface);
    }

    /* Grid item thu 2 - boc ten + mo ta. min-width:0 de ten dai khong lam gian o luoi. */
    .home-panel-item-text {
        display: block;
        min-width: 0;
    }

    .home-panel-item img {
        width: 40px;
        height: 40px;
        flex: none;
        object-fit: contain;
    }

    /* Chip icon SVG moi - xem .home-module-icon ben tren cho ghi chu chung ve fallback. */
    .home-panel-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
    }

    .home-panel-item[data-group="buy"] .home-panel-icon { background: var(--tint-buy); color: var(--ico-buy); }
    .home-panel-item[data-group="ops"] .home-panel-icon { background: var(--tint-ops); color: var(--ico-ops); }
    .home-panel-item[data-group="fin"] .home-panel-icon { background: var(--tint-fin); color: var(--ico-fin); }
    .home-panel-item[data-group="hr"] .home-panel-icon { background: var(--tint-hr); color: var(--ico-hr); }
    .home-panel-item[data-group="data"] .home-panel-icon { background: var(--tint-data); color: var(--ico-data); }

    .home-panel-item:hover {
        border-color: rgba(0, 0, 0, .22);
        box-shadow: 0 2px 6px rgba(0, 0, 0, .07);
    }

    /* Mau selected/current theo dung nhom cua module (docs/ui-module) thay vi 1 mau xanh
       co dinh nhu truoc - vd module dang mo thuoc nhom "fin" thi vien/nen se la mau fin. */
    .home-panel-item.selected {
        background: var(--ui-sel-bg);
        border-color: var(--theme-primary);
    }

    .home-panel-item.selected[data-group="buy"] { border-color: var(--ico-buy); background: var(--tint-buy); }
    .home-panel-item.selected[data-group="ops"] { border-color: var(--ico-ops); background: var(--tint-ops); }
    .home-panel-item.selected[data-group="fin"] { border-color: var(--ico-fin); background: var(--tint-fin); }
    .home-panel-item.selected[data-group="hr"] { border-color: var(--ico-hr); background: var(--tint-hr); }
    .home-panel-item.selected[data-group="data"] { border-color: var(--ico-data); background: var(--tint-data); }

    /* Phan he da GHIM len trang chu - giu chuot mot lan nua de bo ghim. */
    .home-panel-item.pinned {
        border-color: #4679cc;
    }

.home-panel-pin {
    position: absolute;
    top: 8px;
    right: 9px;
    font-size: 10px;
    color: #4679cc;
    transform: rotate(20deg);
}

.home-panel-item-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ui-text-strong);
}

.home-panel-item-desc {
    display: block;
    font-size: 11px;
    line-height: 1.45;
    color: var(--ui-text-muted);
    margin-top: 2px;
}

/* O bu cuoi luoi: khong bam duoc va nhat mau de khong tranh cho voi phan he that. */
.home-panel-item.coming-soon {
    background: var(--ui-surface-alt);
    border: 1px dashed var(--ui-border);
    cursor: default;
}

    .home-panel-item.coming-soon img {
        opacity: .6;
    }

    .home-panel-item.coming-soon .home-panel-item-name {
        color: #a2acb6;
    }

    .home-panel-item.coming-soon .home-panel-item-desc {
        color: #b3bcc5;
    }

.home-module-tile.coming-soon {
    background: #fafbfc;
    border: 1px dashed #dde3ea;
    cursor: default;
}

/* Man hinh hep: 4 card dashboard xuong 2 hang x 2, luoi phan he xuong 4 cot.
   Vung bieu do phai cao gap doi vi luc nay co hai hang. */
@media (max-width: 1600px) {
    .home-chart-grid {
        grid-template-columns: repeat(2, 1fr);
        height: clamp(460px, 76vh, 700px);
    }

    .home-module-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 992px) {
    .home-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-chart-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .home-card {
        min-height: 260px;
    }

    .home-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .home-panel-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Man hinh thap (laptop 768px, may ban 1366x768) uu tien danh cho ho bang phan he:
   bieu do va o phan he rut xuong muc toi thieu vua du doc. */
@media (max-height: 800px) {
    .home-chart-grid {
        height: clamp(230px, 36vh, 300px);
    }

    .home-module-tile {
        padding: 8px 6px;
        gap: 5px;
    }

        .home-module-tile img {
            width: 30px;
            height: 30px;
        }

        .home-module-tile span {
            font-size: 11px;
        }

    .home-kpi-value {
        font-size: 22px;
    }
}

/* ============================================================================
   O TIM NHANH MENU tren header (CLIENT/Shared/MenuSearch.razor)
   Kich thuoc / mau lay tu docs/ui/README.md muc 1.6.
   ============================================================================ */

/* BHeaderBarSection render ra <ul>; cho no gian het cho trong con lai de o tim kiem
   nam giua header thay vi dinh vao cum nut ben phai. */
.hd-search-section {
    flex: 1;
    min-width: 0;
}

/* Boc ngoai la the <li> vi BHeaderBarSection render ra <ul>. */
.hd-search-wrap {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.hd-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    height: 34px;
    padding: 0 10px;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border-strong);
    border-radius: 8px;
    transition: background .15s, border-color .15s;
}

    .hd-search:hover {
        background: var(--ui-surface);
        border-color: var(--ui-border-strong);
    }

    .hd-search.focused {
        background: var(--ui-surface);
        border-color: var(--theme-primary);
    }

/* Co 15px (ban thiet ke docs/ui-main muc 1.6 ghi 11px) - dua ve bang icon cua 2 chip
   Data/CTY va nut AI Assistant ben trai, de ca hang icon giua header cung mot co
   (yeu cau nguoi dung 15/08/2026). Khung o tim kiem cao 34px, o tren input cao 30px
   nen 15px van du cho, khong lam no khung. */
.hd-search-icon {
    font-size: 15px;
    color: var(--ui-text-faint);
    flex: none;
}

/* Materialize ke border-bottom + height 3rem + margin-bottom 20px cho MOI the
   input qua rule "input[type=text]:not(.browser-default)" (materialize.css dong
   6048) - rule do co THEM 1 element selector (input) nen specificity cao hon
   ".hd-search .hd-search-input" (2 class) du so class bang nhau, materialize vAn
   thang. Ket qua: input bi keo cao 48px + margin duoi 20px, TRAN ra khoi khung
   bo tron 34px cua ".hd-search", hien thanh vet ke ngang lo lung ben duoi o tim
   kiem. Phai !important cho toan bo cac thuoc tinh nay moi de qua duoc. */
.hd-search-input,
.hd-search .hd-search-input {
    flex: 1;
    min-width: 0;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    outline: none;
    box-shadow: none;
    background: transparent;
    font-size: 12px;
    color: var(--ui-text);
    box-sizing: border-box !important;
}

    .hd-search-input:focus {
        border-bottom: none !important;
        box-shadow: none !important;
    }

    .hd-search-input::placeholder {
        color: var(--ui-text-faint);
    }

.hd-search-badge {
    flex: none;
    font-size: 10px;
    font-weight: 500;
    color: var(--ui-text-muted);
    background: var(--ui-surface-sunken);
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Khoi xam mo hien trong card luc dang goi API dashboard (docs/ui muc "Interactions").
   Chiem tron cho cua noi dung that nen card khong bi co lai roi gian ra khi co du lieu. */
.home-skeleton {
    width: 100%;
    height: 100%;
    min-height: 60px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f4f6f9 25%, #eceff3 37%, #f4f6f9 63%);
    background-size: 400% 100%;
    animation: home-skeleton-shine 1.4s ease infinite;
}

@keyframes home-skeleton-shine {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

/* ============================================================================
   DAU SIDEBAR - cho biet dang o phan he nao (docs/ui muc 2, CLIENT/Shared/NavMenu.razor)
   ============================================================================ */
/* NEN va MAU CHU cua khoi nay KHONG duoc phu thuoc vao nen cua sidebar: nen sidebar doi
   theo skin nguoi dung chon (light: trang, default: #20222a, dark: #26272b, gray: #F2F2F2,
   cream: #F2D6BD - xem wwwroot/css/skins/*.css). Ban dau khoi nay de nen trong suot + chu
   #2b3238 vi tuong sidebar luon la nen sang, hau qua la o skin default/dark chu gan nhu
   chim hoan toan vao nen (phan hoi ngay 14/08/2026).
   Cach xu ly: khoi tu ve NEN RIENG bang cap mau cua nhom phan he - --tint-<group> lam nen,
   --solid-<group> lam chu (docs/ui-module/README.md muc "Design Tokens"), cung bo mau ma
   luoi phan he trang chu va popup "Tat ca phan he" dang dung. Nho vay tuong phan chu/nen
   luon do khoi nay tu quyet dinh, khong con lien quan toi skin. */
.nav-module-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 12px;
    background: var(--tint-data);
    border-bottom: 1px solid rgba(0, 0, 0, .09);
    cursor: pointer;
    transition: filter .15s;
}

    .nav-module-head[data-group="buy"] { background: var(--tint-buy); }
    .nav-module-head[data-group="ops"] { background: var(--tint-ops); }
    .nav-module-head[data-group="fin"] { background: var(--tint-fin); }
    .nav-module-head[data-group="hr"] { background: var(--tint-hr); }
    .nav-module-head[data-group="data"] { background: var(--tint-data); }

    /* Dung filter thay vi doi mau nen: chi can mot dong la hover dung cho ca 5 nhom mau,
       khong phai viet lai 5 bien the nen dam hon. */
    .nav-module-head:hover {
        filter: brightness(.95);
    }

    .nav-module-head img {
        width: 22px;
        height: 22px;
        flex: none;
        object-fit: contain;
    }

    /* Icon SVG moi o dau sidebar (docs/ui-module muc 3): cung sprite voi trang chu + popup,
       20px, stroke-width 1.5 (dat tren the <svg> trong NavMenu.razor), KHONG chip nen.
       Mau lay theo nhom phan he --ico-<group> chu KHONG dung rgba(255,255,255,.82) nhu spec,
       vi khoi nay tu ve nen sang --tint-<group> (xem comment o .nav-module-head ben tren).
       Mac dinh (khong nhan dien duoc nhom) dung mau trung tinh cua --ico-data. */
    .nav-module-head .nav-module-icon {
        width: 20px;
        height: 20px;
        flex: none;
        color: var(--ico-data);
    }

    .nav-module-head[data-group="buy"] .nav-module-icon { color: var(--ico-buy); }
    .nav-module-head[data-group="ops"] .nav-module-icon { color: var(--ico-ops); }
    .nav-module-head[data-group="fin"] .nav-module-icon { color: var(--ico-fin); }
    .nav-module-head[data-group="hr"] .nav-module-icon { color: var(--ico-hr); }
    .nav-module-head[data-group="data"] .nav-module-icon { color: var(--ico-data); }

    .nav-module-head .fa-exchange-alt {
        font-size: 11px;
        color: rgba(0, 0, 0, .38);
        margin-left: auto;
    }

    .nav-module-head:hover .fa-exchange-alt {
        color: rgba(0, 0, 0, .68);
    }

/* Ten phan he: mau chu lay --solid-<group> (dam hon --ico-<group> mot bac) de noi ro tren
   nen --tint-<group>. Selector co dinh 2 lop ".nav-module-head .nav-module-name" - de rieng
   ".nav-module-name" thi khong du do uu tien khi skin dat mau chu chung cho vung sidebar. */
.nav-module-head .nav-module-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--solid-data);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .nav-module-head[data-group="buy"] .nav-module-name { color: var(--solid-buy); }
    .nav-module-head[data-group="ops"] .nav-module-name { color: var(--solid-ops); }
    .nav-module-head[data-group="fin"] .nav-module-name { color: var(--solid-fin); }
    .nav-module-head[data-group="hr"] .nav-module-name { color: var(--solid-hr); }
    .nav-module-head[data-group="data"] .nav-module-name { color: var(--solid-data); }

/* Chan sidebar: cham trang thai + so phien ban (docs/ui muc 2). */
.nav-version {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px 8px 14px;
    font-size: 11px;
    color: var(--ui-text-muted);
}

.nav-version-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #52bf11;
    flex: none;
}

/* ============================================================================
   SIDEBAR MANG MAU CUA O PHAN HE - CHI KHI DANG DUNG SKIN "DEFAULT"
   (yeu cau nguoi dung 15/08/2026: "menu ben trai cho mau chu va mau nen giong
   kieu cac o module"). Bang mau lay tu ".home-module-tile" ben tren:
   nen #dee4ed - vien #c7d0dc - chu #2b3238 - hover bat trang - muc dang mo
   #eef4fd/#1f4f96.

   VI SAO KHOA DIEU KIEN BANG :has(link#css_theme_mode[href*="default"]) THAY VI
   SUA THANG FILE skins/default.css:
   - Sua trong default.css la cach sach hon ve kien truc VA DA LAM (xem file do),
     nhung file skin duoc nap qua the <link id="css_theme_mode"> ma JS doi href
     luc chay (B_ChangeThemeMode, app.js dong 1126). Duong dan JS dung mang
     "?ud=202401122244" ghi cung trong NuGet (SHARED/Display/DisplayOptions_System.cs),
     KHONG bump duoc tu repo nay, va vi request phat sinh SAU khi trang tai xong
     nen Ctrl+Shift+R khong phá duoc cache cua no. Ket qua: sua default.css xong
     tren may nguoi dung van y nguyen (da xay ra 15/08/2026).
   - custom.css thi nap thang tu index.html va co "?ud=" tu bump duoc, nen dat o
     day la chac chan an.
   - Dieu kien nhin vao THE LINK chu khong nhin vao noi dung file, nen van dung
     ke ca khi file skin bi 404: chon skin khac (dark/gray/cream/light) la href
     doi, rule nay tat, skin do giu nguyen bang mau rieng - dung y nguoi dung
     "chi ap cho skin dang dung".
   - Do uu tien: :has() lay theo phan tu nang nhat ben trong (o day la id
     #css_theme_mode) nen thang chac chan ".page-sidebar" cua app.css lan cua
     file skin, khong can !important.
   - Yeu cau trinh duyet: :has() co tu Chrome/Edge 105, Safari 15.4, Firefox 121.
     Trinh duyet cu hon thi rule bi bo qua -> sidebar giu mau skin cu, KHONG vo
     giao dien.
   ============================================================================ */
html:has(link#css_theme_mode[href*="default"]) .page-sidebar {
    background-color: #dee4ed;
}

/* Doi nen toi -> sang thi phai doi HET cum mau danh cho nen toi ben duoi, bo sot
   cai nao la cai do tang hinh (chu #a5abb1, vien muc #3d3d40 cua app.css dong 158,
   ke dut nhom con #34363f, vien chan sidebar mau trang mo). */
html:has(link#css_theme_mode[href*="default"]) .nav-menu li a {
    color: #2b3238;
    border-color: #c7d0dc;
}

    /* Hover dao chieu sang trang, giong o phan he: nen da xam nen phai bat sang
       moi thay phan hoi (mau cu la phu trang mo, tren nen sang khong thay gi). */
    html:has(link#css_theme_mode[href*="default"]) .nav-menu li a:hover {
        background-color: #fff;
    }

html:has(link#css_theme_mode[href*="default"]) .nav-menu li.active > a {
    color: #1f4f96;
}

html:has(link#css_theme_mode[href*="default"]) .nav-menu li a.nav-link.active {
    color: #1f4f96;
    background-color: #eef4fd;
}

html:has(link#css_theme_mode[href*="default"]) ul.nav-menu ul:before {
    border-left: 1px dashed #c7d0dc;
}

html:has(link#css_theme_mode[href*="default"]) .page-sidebar .sidebar-footer {
    border-top: 1px solid #c7d0dc;
}

    html:has(link#css_theme_mode[href*="default"]) .page-sidebar .sidebar-footer .message span {
        color: #6b7683 !important;
    }

/* Duong ke doc ngan cach cac nhom nut tren header. Hien CHI con dung cho ban ke
   sau logo (docs/ui-main muc 1.2, xem MainLayout.razor); ban ke o cum icon ben
   phai (muc 1.8) da bo theo yeu cau nguoi dung 15/08/2026 - xem HeaderAlignEnd.razor. */
.hd-divider {
    width: 1px;
    height: 26px;
    background: var(--ui-border);
    margin: 0 6px;
    align-self: center;
    flex: none;
}

/* Ban ke dat ngay sau logo (muc 1.2). Chi dat le trai: le phai de 0 vi nut menu ke no
   da co san margin-left 2.1rem trong app.css (.header-navbar .header-icon-menu). */
.hd-divider-logo {
    margin: 0 0 0 16px;
}

/* Chip "cong ty / ky ke toan" (docs/ui muc 1.4) va nut "VP-CTY" (muc 1.5).
   Dung selector 2 lop ".header-company.hd-chip-xxx" (specificity 0,2,0,0) de
   thang chac chan rule ".header-company" mac dinh cua app.css (khung vien dut
   mau xam, xem app.css dong 2666) du app.css duoc nap SAU custom.css trong
   index.html. Class "hd-chip"/"hd-chip-data"/"hd-chip-branch" gan trong
   HeaderCompany.razor, giu nguyen class "header-company" cu de khong dung
   cham cac noi khac dang doc class nay (dark-mode.css, cream-mode.css). */
.header-company.hd-chip {
    margin-left: 10px;
    padding: 0 10px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--ui-border-strong);
    display: flex;
    align-items: center;
    transition: border-color .15s, background .15s;
}

    .header-company.hd-chip a {
        display: flex;
        align-items: center;
        height: 100%;
    }

    /* Rule nay an CHUNG cho ca 2 chip: icon database cua chip DataCode va icon dinh vi
       cua nut CTY - vi HeaderCompany.razor gan cung mot Class="icon-database" cho ca hai
       (dong 11 va 22). Sua o day la doi ca hai, khong can sua rieng.
       Co 15px (ban thiet ke ghi 12px, docs/ui-main muc 1.4/1.5) - nguoi dung chon thu
       15px ngay 15/08/2026 cho khoi de hon canh chu 11.5-12px trong chip. Nguong tran la
       chieu cao chip 34px tru padding, khoang 30px; qua muc do la icon dinh vien chip.
       Mui ten caret cuoi chip khong bi anh huong vi ::after co font-size 11px rieng. */
    .header-company.hd-chip .icon-database {
        display: flex;
        align-items: center;
        font-size: 15px;
    }

    .header-company.hd-chip .datacode {
        margin-left: 8px;
    }

    .header-company.hd-chip span {
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ui-text);
    }

.header-company.hd-chip-data {
    background: var(--ui-surface-alt);
}

    .header-company.hd-chip-data:hover {
        border-color: #4679cc;
    }

    /* Dau mui ten cuoi chip (muc 1.4) - ve bang CSS ::after, khong them the HTML
       moi de giu dung pham vi "chi chinh CSS" da chot voi nguoi dung. */
    .header-company.hd-chip-data .icon-database::after {
        font-family: "Font Awesome 5 Free", "FontAwesome";
        font-weight: 900;
        content: "\f0d7";
        font-size: 11px;
        color: var(--ui-text-faint);
        margin-left: 4px;
    }

.header-company.hd-chip-branch {
    background: var(--ui-surface);
}

    .header-company.hd-chip-branch span {
        font-size: 12px;
        font-weight: 500;
        color: var(--ui-text-soft);
    }

    .header-company.hd-chip-branch:hover {
        border-color: #4679cc;
    }

    .header-company.hd-chip-branch:hover span {
        color: #4679cc;
    }

/* Nut AI Assistant tren header (docs/ui muc 1.7, ban cap nhat 14/08/2026) -
   DA DOI tu nut nen xanh dam sang chip vien dong bo voi chip Data/CTY ben canh
   (".header-company.hd-chip-branch") vi nguoi dung phan hoi ban dau nhin lech
   tong the header. Giu nguyen kich thuoc/vi tri, chi doi mau. */
.hd-ai-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    height: 34px;
    margin-left: 10px;
    padding: 0 12px;
    border-radius: 8px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
}

    .hd-ai-btn:hover {
        border-color: var(--theme-primary);
        background: var(--ui-surface-alt);
    }

    /* Giu BANG font-size icon cua 2 chip Data/CTY ben canh (15px, xem
       ".header-company.hd-chip .icon-database") - 3 icon nay nam lien nhau tren mot hang
       nen lech co la thay ngay. Ban thiet ke cu de robot 13px con 2 chip 12px, chenh 1px
       khong vi ly do gi; nguoi dung chot san bang ve 15px ngay 15/08/2026.
       MAU: dung var(--theme-primary) chu KHONG ghi cung #4679cc, vi 2 icon ben canh lay
       dung bien do (app.css dong 2693-2696 ".header-company .icon-database") va bien nay
       doi theo Theme Colors nguoi dung chon trong Skins (10 mau, themes/theme01-11.css).
       Ghi cung ma mau thi chon theme mau khac la 3 icon lech nhau ngay. Truoc day o day
       la #4a5460 (xam den) nen icon robot tro thanh cai duy nhat khong xanh tren hang. */
    .hd-ai-btn i {
        font-size: 15px;
        color: var(--theme-primary);
    }

    .hd-ai-btn span {
        font-family: 'Lexend Deca', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: var(--ui-text-soft);
        white-space: nowrap;
    }

    .hd-ai-btn:hover i,
    .hd-ai-btn:hover span {
        color: var(--theme-primary);
    }

/* Cum 3 icon Cai dat / Tro giup / Thong bao + avatar nguoi dung ben phai header
   (docs/ui muc 1.9/1.10, ban cap nhat 14/08/2026). Ca 4 o deu la khung vuong bo
   goc 8, vien #dbe2ea, nen trang - LUON hien vien (khong doi hover moi hien nhu
   ban dau) de dong bo voi cum chip ben trai; da bo chu ten nguoi dung inline,
   ten van xem duoc qua tooltip (title) khi ru chuot vao avatar.
   ".hd-end-section" gan tren BHeaderBarSection (MainLayout.razor), ".hd-icon-btn"
   gan tren tung nut (HeaderAlignEnd.razor, ca nut Cai dat/Tro giup/Thong bao lan
   avatar) - KHONG dong cham toi cac noi khac dang dung chung
   BHeaderBarButtonIcon/BHeaderBarButtonImage (vd ModalSettingsRight, nut menu o
   dau header). Phai dung !important cho width/height/border-radius/font-size vi
   ".header-navbar .icon-circle" cua app.css (vong tron 52px, dong 423) cung 2
   lop class nen khong thang duoc bang do specificity thuong; font-size cua
   .material-icons (fonts-googleapis.css) cung khai bao co dinh nen phai
   !important tuong tu.

   ".hd-end-section" (chinh la the <ul class="right hd-end-section">, xem
   BHeaderBarSection.razor.cs - Align=End tu them class "right") CHI dung
   ".header-navbar .right > li { float:left }" (app.css dong 450) de xep hang
   ngang, KHONG phai flexbox nen khong co gi can giua theo chieu doc - moi <li>
   noi tren cung theo chieu cao rieng cua no. Truoc day icon 52px gan lap day
   header (56px) nen kho thay lech; sau khi ep ve 32px thi khoang chenh lo ra,
   icon bi day xuong duoi so voi avatar (avatar co box-sizing/padding khac).
   Chuyen ".hd-end-section" sang flex + align-items:center la sua tan goc: flex
   item tu dong bo qua "float", moi <li> deu can giua theo 1 truc doc duy nhat. */
.hd-end-section {
    display: flex;
    align-items: center;
}

.hd-end-section .hd-icon-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    position: relative;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border-strong);
    color: var(--ui-text-muted);
    transition: background-color .15s, border-color .15s, color .15s;
}

    /* Co glyph 20px, va anh avatar ben duoi cung 20px - CA 4 O PHAI BANG NHAU
       (yeu cau nguoi dung 15/08/2026). Lich su de nguoi sau khoi thu lai: ban dau
       15px thi 3 icon nhin be han han avatar 24px du chung khung 32px; da thu
       nang ca hai len 24px nhung net cham sat vien khung nen chot lai 20px.
       Sua so nao thi phai sua DU 3 CHO cung luc: rule nay, rule ::before cua
       chuong BNotification, va ".profile-avatar .profile-image" ben duoi. */
    .hd-end-section .hd-icon-btn i {
        font-size: 20px !important;
        color: inherit;
    }

    .hd-end-section .hd-icon-btn:hover {
        background-color: var(--ui-surface-alt);
        border-color: var(--theme-primary);
        color: var(--theme-primary);
    }

    /* Cham do bao thong bao chua doc (muc 1.9): 7x7 tron, vien trang 1.5px,
       khong hien so - de dung dung "cham" nhu ban thiet ke thay vi badge
       so luong mac dinh cua BNotification. */
    .hd-end-section .hd-icon-btn .badge.badge-icon {
        top: 4px;
        right: 5px;
        margin: 0;
        min-width: 0;
        width: 7px;
        height: 7px;
        padding: 0;
        background-color: #FC1349;
        /* Vanh vien quanh cham do phai la MAU NEN CUA O ICON (khong phai trang co dinh),
           neu khong o skin toi se hien mot vong trang quanh cham. */
        box-shadow: 0 0 0 1.5px var(--ui-surface);
        font-size: 0;
    }

        .hd-end-section .hd-icon-btn .badge.badge-icon span {
            display: none;
        }

    /* Anh dai dien thu nho lai (20px) so voi khung 32px de vanh vien cua khung
       lo ra deu quanh anh tron - dung !important vi ".header-navbar .right
       .profile-image" cua app.css (dong 434) cung 3 lop class, nap SAU
       custom.css nen thang duoc neu khong co !important.
       Con so 20px phai BANG font-size glyph cua 3 icon ben tren (yeu cau nguoi
       dung 15/08/2026: "chuyen lai ve 20 ke ca avatar"). */
    .hd-end-section .hd-icon-btn.profile-avatar .profile-image {
        width: 20px !important;
        height: 20px !important;
    }

    /* Doi glyph chuong sang "notifications_active" (chon qua phong van 14/08/2026).
       BNotification.razor (NuGet BBOS.Core.Components) HARD-CODE Icon="notifications"
       ngay trong markup, khong co tham so nao cho phep doi tu ben ngoai. Font Material
       Icons doc ten glyph tu CHINH NOI DUNG CHU ("notifications" la chu that trong the
       <i>, khong phai class), nen phai an chu that (font-size:0) roi chen glyph moi
       qua ::before voi day du thuoc tinh cua .material-icons (xem fonts-googleapis.css)
       - thieu thuoc tinh nao la ::before khong doc dung font, hien ra chu thay vi icon.
       Selector nham dung vao class "BNotification" ma BaseBNotification.OnInitializedAsync
       tu them (ClassMapper.Add("BNotification")) de KHONG dung cham icon Cai dat/Tro giup.
       Ve sau neu NuGet bo sung tham so Icon cho BNotification thi bo doan nay di, truyen
       thang Icon="@NamingBIcon.Notifications_active" cho gon.
       BUG DA GAP: "font-size:0" o day LUC DAU khong co !important nen thua rule
       ".hd-end-section .hd-icon-btn i { font-size:15px !important; }" khai bao truoc do
       (xem tren) - chu goc "notifications" van hien font-size 15px BINH THUONG, cong
       them glyph moi chen qua ::before => nhin thanh "2 cai chuong" chong len nhau. */
    .hd-end-section .hd-icon-btn.BNotification i.material-icons {
        font-size: 0 !important;
    }

        .hd-end-section .hd-icon-btn.BNotification i.material-icons::before {
            content: "notifications_active";
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            /* Phai giu BANG font-size cua ".hd-end-section .hd-icon-btn i" o tren
               (20px), vi chuong duoc ve bang ::before nen khong an theo rule do -
               de lech la chuong khac co 2 icon Cai dat/Tro giup. */
            font-size: 20px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-smoothing: antialiased;
            color: inherit;
        }

/* Lop phu trong suot de bam ra ngoai la dong goi y. */
.hd-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
}

.hd-search-suggest {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 420px;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 901;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .16);
    padding: 6px;
}

/* Vung ket qua cua hop tim kiem dang modal (giu lai de dung cho man hinh hep). */
.menu-search-results {
    max-height: 52vh;
    overflow-y: auto;
    margin-top: 4px;
}

.menu-search-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px !important;
    border-radius: 7px;
}

    .menu-search-item.selected {
        background-color: var(--ui-sel-bg);
        color: var(--ui-sel-text);
    }

.menu-search-icon {
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

    .menu-search-icon img {
        max-width: 26px;
        max-height: 26px;
    }

.menu-search-text {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

.menu-search-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-search-path {
    font-size: 0.72rem;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menu-search-empty {
    padding: 16px 4px;
    opacity: 0.7;
}

/* ============================================================================
   HOP CHON DU LIEU CHO PHIEN LAM VIEC - lop boc ".modal-session-picker"
   Dung theo ban thiet ke docs/ui-main/design_handoff_modal_datacode - phuong an 1a.

   DUNG CHUNG cho HAI modal, vi ca hai cung mot viec "chon du lieu ap dung cho ca phien":
     - CLIENT/Shared/ModalCompany.razor - chon DataCode + ky lam viec + ngon ngu.
     - CLIENT/Shared/ModalBranch.razor  - chon chi nhanh.
   Cac lop con ten ".dc-*" (data chooser) cung dung chung. Them modal thu ba cung kieu thi
   chi viec gan them lop "modal-session-picker", KHONG chep lai khoi CSS nay.
   ----------------------------------------------------------------------------
   VI SAO MAU DEU LA BIEN "--ui-*": ban thiet ke ghi ma mau sang (#fff, #1f2430,
   #6b7280...). Go cung nhu vay thi o skin Dark/Cream modal se trang toat, doc len
   giua khung toi - dung loi ma trang chu da mac ngay 16/08/2026. Bo bien "--ui-*"
   (tim "BANG MAU BE MAT" ben tren) da co san ban mau cho ca 5 skin nen chi can anh xa:
     surface #ffffff            -> var(--ui-surface)
     border  rgba(15,23,42,.18) -> var(--ui-border-strong)   (vien o nhap)
     border-soft rgba(...,.08)  -> var(--ui-border)          (duong chia)
     text-strong #1f2430        -> var(--ui-text-strong)
     text-body   #3f4a5c        -> var(--ui-text)
     text-muted  #6b7280        -> var(--ui-text-muted)
     primary-tint  #eaf1fd      -> var(--ui-sel-bg)          (dong dang chon)
     primary-tint-2 #f2f5fb     -> var(--ui-surface-alt)     (hover, nen dong tom tat)
     primary #3b6fd4            -> var(--theme-primary)      (doi theo bang Theme Colors)
   THEM MAU MOI thi dung bien, dung go hex - go hex la cho do lai thanh vet sang o skin toi.

   VI SAO NHIEU CHO PHAI DUNG ".modal.modal-session-picker" HOAC "!important":
   thu tu nap trong index.html la materialize -> custom.css -> app.css -> skins/*.css,
   nghia la file NAY nap TRUOC app.css va skin. Rule cung do uu tien nhung nap sau se
   thang, nen phai nang do uu tien len (them ".modal" o truoc) hoac dung !important:
     - app.css   ".modal .modal-content{padding:20px 10px}"  -> can (0,3,0)
     - materialize ".modal .modal-footer{height:56px...}"    -> can (0,3,0)
     - materialize "select{display:none}"                    -> can hon (0,0,1)
     - skins     ".modal,...{background:X !important}"       -> can !important + (0,2,0)
     - skins     ".bselectform{padding:... !important}"      -> can !important + (0,2,0)
   ============================================================================ */
.modal.modal-session-picker {
    /* Ban thiet ke: rong toi da 520px, man hep thi chua le 16px moi ben.
       De cao hon ".modal{width:55%}" cua materialize va ".modal.modal-sm{width:35%}"
       cua app.css nen the .razor KHONG con dat class "modal-sm" nua. */
    width: calc(100vw - 32px);
    max-width: 520px;
    border-radius: 10px;
    background: var(--ui-surface) !important;
    color: var(--ui-text);
    box-shadow: 0 10px 30px rgba(15,23,42,.14), 0 1px 2px rgba(15,23,42,.1);
}

/* ---------- Header ---------- */
.modal.modal-session-picker .modal-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-surface) !important;
}

.modal-session-picker .dc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-session-picker .dc-head-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.modal-session-picker .dc-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ui-text-strong);
}

.modal-session-picker .dc-subtitle {
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--ui-text-muted);
}

.modal-session-picker .dc-close {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ui-text-muted);
    transition: background-color .12s ease-out;
}

    .modal-session-picker .dc-close:hover {
        background-color: var(--ui-surface-alt);
    }

    .modal-session-picker .dc-close i {
        font-size: 18px;
        line-height: 1;
    }

/* ---------- Content ---------- */
.modal.modal-session-picker .modal-content {
    padding: 22px 24px 6px;
    background: var(--ui-surface) !important;
}

.modal-session-picker .dc-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* position:relative de panel goi y (position:absolute; top:100%) bam theo o chon ma. */
.modal-session-picker .dc-field {
    position: relative;
    display: flex;
    flex-direction: column;
}

.modal-session-picker .dc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Nhan truong: o Thang/Nam/Ngon ngu la the <label> do BSelectForm sinh ra (da dich san
   qua tham so Label), o Ma DataCode la span ".dc-label" - hai duong nhung mot kieu chu. */
.modal-session-picker .dc-label,
.modal-session-picker .md-form label {
    display: block;
    position: static;
    transform: none;
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.modal-session-picker .md-form {
    position: relative;
    margin: 0;
}

/* ---------- O chon Ma DataCode ---------- */
.modal-session-picker .dc-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 6px;
    background-color: var(--ui-surface);
    cursor: pointer;
    transition: border-color .12s ease-out;
}

    .modal-session-picker .dc-control:hover,
    .modal-session-picker .dc-control.is-open {
        border-color: var(--theme-primary);
    }

.modal-session-picker .dc-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background-color: var(--theme-primary);
}

.modal-session-picker .dc-control-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Ma DataCode dung font don cach (mono): ma dai, nhieu dau gach duoi va chu so nen font
   thuong rat de doc nham 0 voi O, 1 voi l. Chi rieng ma dung mono, phan con lai theo
   font chung cua ung dung. */
.modal-session-picker .dc-code,
.modal-session-picker .dc-item-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-session-picker .dc-code {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ui-text-strong);
}

.modal-session-picker .dc-company {
    font-size: 12px;
    line-height: 1.3;
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-session-picker .dc-caret {
    flex: none;
    font-size: 20px;
    line-height: 1;
    color: var(--ui-text-muted);
}

/* ---------- Panel goi y ---------- */
/* Lop phu bat cu bam ra ngoai de dong panel. Luu y: materialize giu lai
   "transform: scaleX(1)" tren the .modal sau khi mo, ma phan tu co transform thi tro
   thanh khung neo cho con position:fixed - nen lop phu nay chi trum trong long modal,
   khong trum ca man hinh. Do la hanh vi MONG MUON: bam ra ngoai modal van la thao tac
   dong modal san co cua materialize. */
.modal-session-picker .dc-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
}

.modal-session-picker .dc-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    z-index: 5;
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(15,23,42,.18);
    overflow: hidden;
    animation: dcPanelIn .12s ease-out;
}

@keyframes dcPanelIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-session-picker .dc-panel-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--ui-border);
}

/* The <input> co class "browser-default" (xem ModalCompany.razor) de materialize khong
   nhan no lam o nhap kieu Material - neu khong no bi ep border-bottom xam, cao 3rem va
   box-sizing:content-box, o tim kiem se lech han khoi khung bo tron cua ban thiet ke.
   Van dat lai day du thuoc tinh o day vi materialize con vai rule khong loc theo
   .browser-default (cung ly do da ghi trong login.css). */
.modal-session-picker .dc-panel-input {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 5px;
    outline: none;
    box-shadow: none;
    background-color: var(--ui-surface);
    font-family: inherit;
    font-size: 13px;
    color: var(--ui-text-strong);
}

    .modal-session-picker .dc-panel-input:focus {
        border: 1px solid var(--theme-primary);
        box-shadow: none;
    }

    .modal-session-picker .dc-panel-input::placeholder {
        color: var(--ui-text-faint);
    }

.modal-session-picker .dc-panel-list {
    max-height: 216px;
    overflow: auto;
}

.modal-session-picker .dc-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    cursor: pointer;
    /* Vien trai luon ton tai (trong suot) de dong khong bi xe dich 3px khi duoc chon. */
    border-left: 3px solid transparent;
}

    /* .is-active = dong dang duoc tro toi (chuot hoac phim mui ten).
       .is-selected = dong ung voi ma dang dung. Dat SAU de khi trung ca hai thi mau
       "dang chon" thang - nguoi dung can biet minh dang o dau hon la con tro dang o dau. */
    .modal-session-picker .dc-item.is-active {
        background-color: var(--ui-surface-alt);
    }

    .modal-session-picker .dc-item.is-selected {
        background-color: var(--ui-sel-bg);
        border-left-color: var(--theme-primary);
    }

.modal-session-picker .dc-item-code {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-text-strong);
}

.modal-session-picker .dc-item-name {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--ui-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-session-picker .dc-panel-empty {
    margin: 0;
    padding: 20px;
    text-align: center;
    font-size: 12.5px;
    color: var(--ui-text-muted);
}

/* Dong xuong ke luc dang tai danh sach. */
.modal-session-picker .dc-skeleton {
    height: 34px;
    margin: 8px 12px;
    border-radius: 5px;
    background-color: var(--ui-surface-sunken);
}

/* ---------- O chon Thang / Nam / Ngon ngu ----------
   Ba o nay la the <select> that do BSelectForm sinh ra (class "bselectform").
   Phai tu dat lai TOAN BO kieu: materialize an moi the select ("select{display:none}")
   va cac file skin to lai .bselectform theo kieu gach chan cua khung cu. */
.modal-session-picker .bselectform {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    line-height: 1.3;
    margin: 0 !important;
    padding: 11px 34px 11px 14px !important;
    border: 1px solid var(--ui-border-strong);
    border-radius: 6px;
    outline: none;
    background-color: var(--ui-surface);
    color: var(--ui-text-strong);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* Bo mui ten mac dinh cua he dieu hanh de tu ve mui ten dong bo voi o Ma DataCode. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .12s ease-out;
}

    .modal-session-picker .bselectform:hover,
    .modal-session-picker .bselectform:focus {
        border-color: var(--theme-primary);
    }

/* Danh sach xo xuong cua the <select> do trinh duyet ve; no lay mau nen/mau chu cua
   chinh the select, nhung Firefox thi doc tu the <option> - dat lai cho chac, neu khong
   o skin Dark se la chu sang tren nen sang. */
.modal-session-picker .bselectform option {
    background-color: var(--ui-surface);
    color: var(--ui-text-strong);
}

/* Mui ten tu ve. Dung tam giac CSS chu khong dung anh SVG nhung trong data-uri:
   mau tam giac phai doi theo skin, ma mau nam trong data-uri thi khong an theo bien duoc.
   Toa do: khoang cach tu day .md-form = nua chieu cao o select (44/2=22) tru nua chieu
   cao tam giac (5/2), lam tron thanh 19px - doi chieu cao o select thi sua lai so nay. */
.modal-session-picker .md-form::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 19px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ui-text-muted);
    pointer-events: none;
}

/* ---------- Dong tom tat ky lam viec ---------- */
.modal-session-picker .dc-summary {
    margin-top: 2px;
    padding: 12px 14px;
    border-radius: 6px;
    background-color: var(--ui-surface-alt);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-text);
}

    .modal-session-picker .dc-summary b {
        font-weight: 600;
        color: var(--ui-text-strong);
    }

/* ---------- Footer ---------- */
.modal.modal-session-picker .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: auto;
    padding: 18px 24px 20px;
    border-top: 0;
    background: var(--ui-surface) !important;
}

    .modal.modal-session-picker .modal-footer .btn {
        height: auto;
        margin: 0;
        padding: 12px 22px;
        line-height: 1;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        box-shadow: 0 1px 2px rgba(15,23,42,.2);
    }

        /* Nut "Dong" (BButton Flat): chi la chu mau chu dao, khong khoi nen, khong do bong. */
        .modal.modal-session-picker .modal-footer .btn.btn-flat-primary {
            padding: 12px 18px;
            background-color: transparent;
            box-shadow: none;
        }

            .modal.modal-session-picker .modal-footer .btn.btn-flat-primary:hover,
            .modal.modal-session-picker .modal-footer .btn.btn-flat-primary:focus {
                background-color: var(--ui-sel-bg);
            }

        /* Trong luc dang luu, nut "Ap dung" bi khoa. Materialize to nut khoa thanh xam
           (#DFDFDF !important) - o day giu nguyen mau nut va chi lam mo di, de nguoi dung
           thay dung nut vua bam chu khong tuong nut bi hong. */
        .modal.modal-session-picker .modal-footer .btn:disabled {
            opacity: .6;
            background-color: var(--theme-primary) !important;
            color: #fff !important;
        }

/* Man hep: modal da tu co chieu rong "100vw - 32px" o tren, chi phai thu le trong lai
   cho do chat. Luoi Thang/Nam GIU 2 cot theo ban thiet ke. */
@media only screen and (max-width: 560px) {
    .modal.modal-session-picker .modal-header,
    .modal.modal-session-picker .modal-content,
    .modal.modal-session-picker .modal-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================================
   MAN HINH "TAI KHOAN CUA TOI" (CLIENT/Pages/System/User/Profile.razor)
   Dung theo ban thiet ke docs/ui-main/design_handoff_bbos_profile.
   ----------------------------------------------------------------------------
   MAU: anh xa tu bang mau cua ban thiet ke sang bo bien "--ui-*" (tim "BANG MAU BE MAT")
   de trang tu doi theo skin:
     card #fff          -> var(--ui-surface)        vien card #e3e8f0  -> var(--ui-border)
     vien o nhap #d6dde8-> var(--ui-border-strong)  khoi phu #f6f8fb   -> var(--ui-surface-alt)
     chu chinh #1c2536  -> var(--ui-text-strong)    nhan #4c5765       -> var(--ui-text-soft)
     chu phu #7a8494    -> var(--ui-text-muted)     goi y #9aa3b0      -> var(--ui-text-faint)
     chinh #1e5bbf      -> var(--theme-primary)     nen chip #eaf1fd   -> var(--ui-sel-bg)
   KHONG dat nen cho ca trang: khung ".page-content-wrapper" phia sau da co mau nen chim
   rieng cho tung skin (#f1f4f6 / #37393e / #D9D9D9 / #D9BFA0), dung dung mau do lam nen
   cho the noi len - dat them nen o day la de mot mang mau la len giua giao dien.

   MAU TRANG THAI (dung / sai / manh yeu) khai o khoi "BANG MAU TRANG THAI" ngay ben duoi,
   khong khai rieng cho trang nay.
   ============================================================================ */

/* ============================================================================
   BANG MAU TRANG THAI DUNG CHUNG (them 15/08/2026)
   ----------------------------------------------------------------------------
   Bo "--ui-*" ben tren chi ta BE MAT (nen, vien, chu) nen doi mau theo tung skin.
   Bo "--bb-*" duoi day ta Y NGHIA: dat / chua dat / canh bao / nguy hiem - mau cua chung
   phai giu nguyen y nghia o moi skin (do van la do), chi can chinh do sang toi cho doc duoc.
   Vi vay chi khai lai cho skin DARK: mau dam dat tren nen #26272b la nhin gan nhu den.
   Ba skin nen sang con lai (Default / Light / Gray / Cream) dung chung ban mac dinh.

   Dung o: man hinh "Tai khoan cua toi" (danh sach yeu cau mat khau, thanh do manh, dong loi)
   va hop xac nhan xoa hoi thoai cua AI Assistant (nut Xoa, dong bao loi).
   THEM MAU MOI cho trang khac thi bo sung vao day, dung khai bien mau rieng theo tung trang.
   Xem ghi chu ve :has() o khoi "SKIN DARK" ben tren.
   ============================================================================ */
:root {
    --bb-ok: #2f9e6b;
    --bb-warn: #d99a2b;
    --bb-info: #3a8fd0;
    --bb-danger: #c2453a;
    --bb-danger-hover: #ab2e24;
    /* Nut nguy hiem luc bi khoa: van la do nhung nhat han di. */
    --bb-danger-soft: #e0a6a1;
    --bb-danger-border: #dc9a94;
    /* Cham tron cua muc "chua dat" trong danh sach yeu cau mat khau. */
    --bb-dot-off: #dde3ec;
}

html:has(link#css_theme_mode[href*="dark-mode"]) {
    --bb-ok: #4ec38a;
    --bb-warn: #e5b45c;
    --bb-info: #6cb0e2;
    --bb-danger: #e8776c;
    --bb-danger-hover: #f0958c;
    --bb-danger-soft: #6b3d38;
    --bb-danger-border: #a35349;
    --bb-dot-off: #4a4d52;
}

.pf-page {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 1160px;
    margin: 0 auto;
    padding: 14px 16px 32px;
    /* Cung font voi trang chu va trang dang nhap - bo font moi cua he thong. */
    font-family: 'Lexend Deca', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    color: var(--ui-text);
}

/* ---------- 1. Tieu de trang ---------- */
.pf-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.pf-head-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pf-crumb {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ui-text-muted);
}

.pf-crumb-sep {
    color: var(--ui-text-faint);
}

.pf-crumb-current {
    color: var(--ui-text-strong);
}

.pf-title {
    margin: 0;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: var(--ui-text-strong);
}

.pf-head-actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

/* ---------- Nut dung chung ---------- */
.pf-btn {
    height: 36px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    flex: 0 0 auto;
    cursor: pointer;
    transition: background-color .15s ease-out, border-color .15s ease-out;
}

.pf-btn-primary {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(16,24,40,.2);
}

    .pf-btn-primary:hover:not(:disabled) {
        background-color: var(--theme-primary-800);
        border-color: var(--theme-primary-800);
    }

/* Nut luu o chan the mat khau: giong nut chinh nhung khong do bong (ban thiet ke muc 5). */
.pf-btn-noshadow {
    box-shadow: none;
}

.pf-btn-ghost {
    padding: 0 16px;
    letter-spacing: .3px;
    background-color: var(--ui-surface);
    border-color: var(--ui-border-strong);
    color: var(--ui-text-soft);
}

    .pf-btn-ghost:hover:not(:disabled) {
        background-color: var(--ui-surface-alt);
    }

.pf-btn:disabled {
    opacity: .55;
    cursor: default;
}

/* Nut chu, khong vien khong nen (nut "Hien mat khau" tren dau the). */
.pf-link-btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--theme-primary);
    cursor: pointer;
}

    .pf-link-btn:hover {
        text-decoration: underline;
    }

/* ---------- Bo cuc 2 cot ---------- */
.pf-body {
    display: grid;
    grid-template-columns: 328px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.pf-col-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Cuon noi dung ben phai thi the ho so dung yen. */
    position: sticky;
    top: 14px;
}

.pf-col-right {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

/* ---------- The dung chung ---------- */
.pf-card {
    background-color: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    box-shadow: var(--ui-shadow);
}

.pf-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--ui-border);
}

.pf-card-head-sm {
    padding: 13px 18px;
}

.pf-card-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ui-text-strong);
}

.pf-card-title-sm {
    font-size: 14px;
    font-weight: 500;
    color: var(--ui-text-strong);
}

.pf-card-sub {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: var(--ui-text-muted);
}

.pf-card-body {
    padding: 22px;
}

.pf-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--ui-border);
    background-color: var(--ui-surface-alt);
    border-radius: 0 0 8px 8px;
}

.pf-foot-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12.5px;
    color: var(--ui-text-muted);
}

/* ---------- 2. The ho so ---------- */
.pf-card-profile {
    overflow: hidden;
}

.pf-cover {
    height: 72px;
    background: linear-gradient(180deg, var(--theme-primary-900), var(--theme-primary));
}

.pf-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 20px 22px;
    /* Keo len de o anh dai dien de len dai mau. */
    margin-top: -46px;
}

.pf-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--ui-sel-bg);
    border: 3px solid var(--ui-surface);
    box-shadow: 0 2px 6px rgba(16,24,40,.14);
}

    .pf-avatar img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pf-avatar-initials {
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--ui-sel-text);
}

.pf-profile-name {
    margin-top: 12px;
    font-size: 17px;
    font-weight: 500;
    color: var(--ui-text-strong);
    text-align: center;
    word-break: break-word;
}

.pf-profile-email {
    font-size: 13px;
    color: var(--ui-text-muted);
    text-align: center;
    word-break: break-all;
}

/* Hang chip nhom quyen. Mot nguoi co the thuoc mot hoac hang chuc nhom nen hang phai TU
   XUONG DONG, khong duoc ghim so luong hay chieu cao. */
.pf-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
}

.pf-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    /* Cao theo NOI DUNG (padding + min-height) chu khong ghim "height: 24px": ten nhom do
       khach hang tu dat, dai qua thi chu phai xuong dong duoc, ghim cung la chu tran ra
       ngoai vien thuoc (nguoi dung bao ngay 15/08/2026 khi mot user co 3 nhom). */
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 12px;
    background-color: var(--ui-sel-bg);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ui-sel-text);
    /* Ten nhom thuong viet lien khong dau cach (SALES_ORDER_EDIT) nen phai cho ngat giua tu,
       neu khong mot ten dai la day rong chip vuot khoi the ho so. */
    word-break: break-word;
}

.pf-chip-dot {
    /* flex:none de cham khong bi bop det khi ten nhom dai; align-self de cham nam dong dau
       thay vi troi ra giua khi chip cao 2 dong. */
    flex: none;
    align-self: flex-start;
    width: 6px;
    height: 6px;
    margin-top: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

.pf-avatar-actions {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
}

.pf-btn-sm {
    flex: 1;
    height: 32px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    background-color: var(--ui-surface);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ui-text-soft);
    cursor: pointer;
    transition: background-color .15s ease-out, color .15s ease-out;
}

    .pf-btn-sm:hover:not(:disabled) {
        background-color: var(--ui-surface-alt);
    }

    .pf-btn-sm:disabled {
        opacity: .5;
        cursor: default;
    }

.pf-btn-sm-danger {
    color: var(--ui-text-muted);
}

    .pf-btn-sm-danger:hover:not(:disabled) {
        color: var(--bb-danger);
    }

.pf-avatar-hint {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--ui-text-faint);
    text-align: center;
}

/* ---------- 3. The "Ngu canh lam viec" ---------- */
.pf-meta {
    padding: 6px 18px 14px;
}

.pf-meta-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--ui-border);
}

    .pf-meta-row:last-child {
        border-bottom: 0;
    }

.pf-meta-label {
    flex: none;
    font-size: 12.5px;
    color: var(--ui-text-muted);
}

.pf-meta-value {
    min-width: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ui-text-strong);
    text-align: right;
    word-break: break-all;
}

/* Ma DataCode dung font don cach cho de doc - cung ly do da ghi o ".dc-code". */
.pf-meta-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- 4 + 5. Luoi truong nhap lieu ---------- */
.pf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
}

.pf-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* O "Mat khau hien tai" dung mot minh mot hang nhung chi rong bang mot cot. */
.pf-field-half-row {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
}

.pf-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ui-text-soft);
}

/* Cac o nhap deu mang them lop "browser-default" (xem Profile.razor) de materialize khong
   bien chung thanh o nhap kieu Material (bo vien, ke gach chan xam, cao 3rem). Van dat lai
   day du thuoc tinh o day vi materialize con vai rule khong loc theo .browser-default. */
.pf-input {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    background-color: var(--ui-surface);
    font-family: inherit;
    font-size: 14px;
    color: var(--ui-text-strong);
}

    .pf-input::placeholder {
        color: var(--ui-text-faint);
    }

    .pf-input:focus {
        border-color: var(--theme-primary);
        /* Quang sang quanh o dang go. color-mix cho phep pha mau chu dao ra ban trong suot ma
           van bam theo bang Theme Colors nguoi dung chon; trinh duyet qua cu khong hieu thi chi
           mat rieng quang sang, vien van doi mau nen o van nhin ro dang duoc chon. */
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary) 15%, transparent);
    }

    .pf-input.is-error {
        border-color: var(--bb-danger-border);
    }

.pf-input-readonly {
    background-color: var(--ui-surface-alt);
    border-color: var(--ui-border);
    color: var(--ui-text-muted);
    cursor: not-allowed;
}

.pf-hint {
    font-size: 11.5px;
    color: var(--ui-text-faint);
}

    .pf-hint.is-ok {
        color: var(--bb-ok);
    }

    .pf-hint.is-error {
        color: var(--bb-danger);
    }

.pf-error {
    font-size: 11.5px;
    color: var(--bb-danger);
}

/* Thong bao loi do DataAnnotations sinh ra (neu co component nao trong the dung ValidationMessage). */
.pf-card .validation-message {
    font-size: 11.5px;
    color: var(--bb-danger);
}

/* ---------- Thanh do manh mat khau ---------- */
.pf-strength {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.pf-strength-track {
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background-color: var(--ui-surface-sunken);
    overflow: hidden;
}

.pf-strength-fill {
    display: block;
    height: 4px;
    border-radius: 4px;
    background-color: transparent;
    transition: width .15s ease-out, background-color .15s ease-out;
}

    /* Mau theo diem 0-4 dung nhu ban thiet ke: rat yeu/yeu = do, trung binh = cam,
       kha = xanh duong, manh = xanh la. */
    .pf-strength-fill.is-score-0,
    .pf-strength-fill.is-score-1 {
        background-color: var(--bb-danger);
    }

    .pf-strength-fill.is-score-2 {
        background-color: var(--bb-warn);
    }

    .pf-strength-fill.is-score-3 {
        background-color: var(--bb-info);
    }

    .pf-strength-fill.is-score-4 {
        background-color: var(--bb-ok);
    }

.pf-strength-label {
    min-width: 64px;
    text-align: right;
    font-size: 11.5px;
    color: var(--ui-text-muted);
}

/* ---------- Khoi "Yeu cau mat khau" ---------- */
.pf-rules {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    background-color: var(--ui-surface-alt);
}

.pf-rules-title {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ui-text-soft);
}

.pf-rules-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}

.pf-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ui-text);
}

.pf-rule-dot {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: var(--bb-dot-off);
    transition: background-color .15s ease-out;
}

.pf-rule.is-ok .pf-rule-dot {
    background-color: var(--bb-ok);
}

/* ---------- Man hep ---------- */
/* Duoi 1040px: bo 2 cot, the ho so khong dinh nua (dinh mot the cao gan het man hinh
   thi phan noi dung ben duoi gan nhu khong cuon duoc). */
@media only screen and (max-width: 1040px) {
    .pf-body {
        grid-template-columns: 1fr;
    }

    .pf-col-left {
        position: static;
        top: auto;
    }
}

@media only screen and (max-width: 720px) {
    .pf-grid {
        grid-template-columns: 1fr;
    }

    .pf-field-half-row {
        max-width: none;
    }

    .pf-rules-list {
        grid-template-columns: 1fr;
    }

    .pf-head {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}