/* =====================================================================
   MIHELSEOUL - BO GIAO DIEN MOI
   Phien ban 1.0  -  2026-08-04

   NGUYEN TAC AN TOAN:
   - File nay nap SAU CUNG (sau vendor.css va app.css) nen ghi de duoc
     toan bo giao dien cu ma KHONG phai sua mot dong PHP/JS nao.
   - Khong doi ten class, khong doi cau truc HTML -> logic he thong,
     DataTables, home.js... chay y nguyen.
   - Muon quay ve giao dien cu: xoa 1 dong <link> trong css.blade.php.

   BANG MAU LAY TU LOGO THUONG HIEU (ot do + lua cam):
     - Do ot     #C62828  -> mau chinh
     - Cam lua   #E8730C  -> mau nhan
   Da kiem dinh bang thuat toan OKLab + mo phong mu mau Machado 2009:
     - Tile so lieu dung nen TRUNG TINH, so lieu la nhan vat chinh.
     - Mau CHI dung khi mang y nghia (khoan con no = canh bao), va
       luon di kem ICON + NHAN CHU -> khong bao gio dua vao mau don doc.
     Cach nay loai bo hoan toan van de cap do<->xanh la (dE 3.9) va
       ho phach<->do (dE 2.0) ma nguoi mu mau khong phan biet duoc.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. BIEN MAU
   --------------------------------------------------------------- */
:root {
    --mh-brand:        #C62828;
    --mh-brand-strong: #A81E1E;
    --mh-brand-soft:   rgba(198, 40, 40, .09);
    --mh-flame:        #E8730C;

    --mh-nav-bg:       #171A1F;
    --mh-nav-bg-2:     #12151A;
    --mh-nav-ink:      #C9CED8;
    --mh-nav-dim:      #7E8593;

    --mh-page:         #F3F4F6;
    --mh-card:         #FFFFFF;
    --mh-line:         #E5E7EB;
    --mh-line-soft:    #EEF0F3;

    --mh-ink:          #111318;
    --mh-ink-2:        #545A66;
    --mh-ink-3:        #878D99;

    --mh-good:         #16A34A;
    --mh-warn:         #B45309;
    --mh-warn-soft:    #FDF3E7;

    --mh-r:            10px;
    --mh-r-sm:         7px;
    --mh-shadow:       0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
    --mh-shadow-lift:  0 6px 16px rgba(16,24,40,.10), 0 2px 5px rgba(16,24,40,.06);

    /* "MihelKhmer" phai dung DAU danh sach - xem khoi @font-face ngay ben duoi.
       No chi nhan cac ky tu Khmer nen chu Latin van dung system-ui nhu cu. */
    --mh-font: "MihelKhmer", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", "Noto Sans Khmer", "Khmer OS", Arial, sans-serif;
}

/* ---------------------------------------------------------------
   1b. CHU KHMER  (them 2026-08-07)

   VAN DE: chu Khmer hien nho hon han chu Latin dung canh no
   (vd "Q001 បាក់ទូក" o trang Franchise).

   NGUYEN NHAN - do chieu cao chu THAT trong tung file font
   (chieu cao chu "ក" so voi chieu cao chu "H" cua Segoe UI = 0.700 em):
        Khmer UI / Leelawadee UI (Windows tu thay the)  0.549 em  <- NHO 22%
        Khmer OS                                         0.684 em
        Khmer OS Battambang                              0.732 em  <- vua mat
        Khmer OS Content                                 0.732 em
   Danh sach font cu bat dau bang system-ui (= Segoe UI) - font nay KHONG
   co chu Khmer, nen trinh duyet phai di tim font khac cho rieng nhung ky tu
   do va roi vao font he thong nho nhat. Rieng "Khmer OS Battambang" ma ma
   nguon cu goi ten thi KHONG BAO GIO tai duoc, vi @font-face trong
   public/css/app.css dong 14 tro sai duong dan:
        url("public/fonts/khmer/KhmerOS_battambang.ttf")
   -> tinh tu /css/app.css thanh /css/public/fonts/... = 404
   (va format("ttf") cung sai, phai la format("truetype")).

   CACH VA: khai bao font Khmer ro rang, GIOI HAN theo unicode-range chi cho
   khoi ky tu Khmer. Nho vay dat no dau danh sach van khong dung toi chu
   Latin. Uu tien font da cai san trong may (local), khong co thi tai file
   co san trong du an.
   --------------------------------------------------------------- */
@font-face {
    font-family: "MihelKhmer";
    src: local("Khmer OS Battambang"), local("KhmerOSBattambang-Regular"),
         url("/fonts/khmer/KhmerOS_battambang.ttf") format("truetype");
    unicode-range: U+1780-17FF, U+19E0-19FF, U+200B;
    font-display: swap;
}
@font-face {
    font-family: "MihelKhmer";
    font-weight: 700;
    /* Chi lay ban dam da cai san trong may; khong co thi trinh duyet tu lam
       dam tu ban thuong (khong ep dung file khac de tranh lech net chu). */
    src: local("Khmer OS Battambang Bold"), local("KhmerOSBattambang-Bold");
    unicode-range: U+1780-17FF, U+19E0-19FF, U+200B;
    font-display: swap;
}
/* Khai bao lai dung duong dan cho ten font ma app.css dang goi san
   (.logo-lg, .dropdown-toggle>span, #pos_table th... deu ep font nay).
   Nho vay may KHONG cai font Khmer OS cung hien dung. */
@font-face {
    font-family: "Khmer OS Battambang";
    src: local("Khmer OS Battambang"), local("KhmerOSBattambang-Regular"),
         url("/fonts/khmer/KhmerOS_battambang.ttf") format("truetype");
    font-display: swap;
}

/* ---------------------------------------------------------------
   2. NEN VA CHU
   --------------------------------------------------------------- */
body:not(.lockscreen) {
    background: var(--mh-page) !important;
    font-family: var(--mh-font) !important;
    color: var(--mh-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body:not(.lockscreen) .content-wrapper,
body:not(.lockscreen) .right-side {
    background: var(--mh-page) !important;
}
h1, h2, h3, h4, h5, h6, .box-title {
    font-family: var(--mh-font) !important;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------------
   3. THANH TREN (HEADER)
   --------------------------------------------------------------- */
body:not(.lockscreen) .main-header .navbar,
body[class*="skin-"] .main-header .navbar {
    background: var(--mh-card) !important;
    border-bottom: 1px solid var(--mh-line);
    box-shadow: none;
    min-height: 58px;
}
body:not(.lockscreen) .main-header .logo,
body[class*="skin-"] .main-header .logo {
    background: var(--mh-nav-bg) !important;
    border-bottom: none;
    height: 58px;
    line-height: 58px;
}
body:not(.lockscreen) .main-header .navbar .nav > li > a,
body[class*="skin-"] .main-header .navbar .nav > li > a {
    color: var(--mh-ink-2) !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
body:not(.lockscreen) .main-header .navbar .nav > li > a:hover,
body:not(.lockscreen) .main-header .navbar .nav > li > a:focus,
body:not(.lockscreen) .main-header .navbar .nav > .open > a {
    background: var(--mh-brand-soft) !important;
    color: var(--mh-brand) !important;
}
body:not(.lockscreen) .main-header .sidebar-toggle {
    color: var(--mh-ink-2) !important;
}
body:not(.lockscreen) .main-header .sidebar-toggle:hover {
    background: var(--mh-brand-soft) !important;
    color: var(--mh-brand) !important;
}
/* huy hieu thong bao */
body:not(.lockscreen) .navbar .label-warning,
body:not(.lockscreen) .navbar .label-danger {
    background: var(--mh-brand) !important;
    font-weight: 600;
    border-radius: 999px;
    padding: 2px 6px;
}

/* ---------------------------------------------------------------
   4. SIDEBAR
   --------------------------------------------------------------- */
body:not(.lockscreen) .main-sidebar,
body:not(.lockscreen) .left-side,
body[class*="skin-"] .main-sidebar {
    background: var(--mh-nav-bg) !important;
}
body:not(.lockscreen) .main-sidebar .sidebar {
    padding-bottom: 24px;
}

/* --- khu vuc logo thuong hieu ---
   Do uu tien phai vuot .main-header .logo (0,2,0) va .skin-x .main-header
   .logo (0,3,0) cua AdminLTE, nen viet kem body[class*="skin-"] + .logo. */
body[class*="skin-"] .main-header .logo.mh-brand,
body[class*="skin-"] .main-sidebar .logo.mh-brand,
.mh-brand {
    display: flex !important;
    align-items: center;
    gap: 11px;
    padding: 17px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(180deg, rgba(198,40,40,.14) 0%, rgba(198,40,40,0) 100%);
    text-decoration: none !important;
}
.mh-brand:hover { background: linear-gradient(180deg, rgba(198,40,40,.2) 0%, rgba(198,40,40,0) 100%); }
.mh-brand__img {
    width: 42px; height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    background: #fff;
    padding: 2px;
    box-shadow: 0 0 0 2px rgba(232,115,12,.55);
    object-fit: contain;
}
.mh-brand__txt { min-width: 0; line-height: 1.15; }
.mh-brand__name {
    display: block;
    color: #fff;
    font-family: var(--mh-font) !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .055em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mh-brand__sub {
    display: block;
    color: var(--mh-nav-dim);
    font-family: var(--mh-font) !important;
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    margin-top: 2px;
    white-space: nowrap;
}
/* Bien the nam trong thanh header (o goc tren ben trai, ngay tren sidebar).
   AdminLTE gioi han khoi nay cao 50px va rong 230px -> phai thu gon lai. */
body[class*="skin-"] .main-header .logo.mh-brand {
    height: 58px;
    padding: 0 14px;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: none;
}
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__img {
    width: 36px; height: 36px; flex-basis: 36px;
}
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__name { font-size: 14px; }
body[class*="skin-"] .main-header .logo.mh-brand .mh-brand__sub  { font-size: 9.5px; letter-spacing: .11em; }

/* khi sidebar thu gon: chi con logo tron */
.sidebar-collapse .mh-brand { justify-content: center; padding: 14px 4px; }
.sidebar-collapse .mh-brand__txt { display: none; }
.sidebar-collapse .mh-brand__img { width: 34px; height: 34px; flex-basis: 34px; }
body[class*="skin-"].sidebar-collapse .main-header .logo.mh-brand { padding: 0; justify-content: center; }

/* --- menu --- */
body:not(.lockscreen) .sidebar-menu > li > a {
    color: var(--mh-nav-ink) !important;
    font-size: 13.5px;
    font-weight: 500;
    padding: 11px 16px;
    border-left: 3px solid transparent;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
body:not(.lockscreen) .sidebar-menu > li > a > i {
    width: 22px;
    font-size: 15px;
    color: var(--mh-nav-dim);
    transition: color .15s ease;
}
body:not(.lockscreen) .sidebar-menu > li:hover > a,
body:not(.lockscreen) .sidebar-menu > li.active > a,
body:not(.lockscreen) .sidebar-menu > li.menu-open > a {
    background: rgba(255, 255, 255, .05) !important;
    color: #fff !important;
    border-left-color: var(--mh-brand);
}
body:not(.lockscreen) .sidebar-menu > li:hover > a > i,
body:not(.lockscreen) .sidebar-menu > li.active > a > i {
    color: var(--mh-flame) !important;
}
body:not(.lockscreen) .sidebar-menu > li.active > a {
    background: linear-gradient(90deg, rgba(198,40,40,.22) 0%, rgba(198,40,40,.04) 100%) !important;
}
/* menu con */
body:not(.lockscreen) .sidebar-menu .treeview-menu {
    background: var(--mh-nav-bg-2) !important;
    padding: 4px 0;
}
body:not(.lockscreen) .sidebar-menu .treeview-menu > li > a {
    color: var(--mh-nav-dim) !important;
    font-size: 12.8px;
    padding: 8px 8px 8px 46px;
    border-left: 3px solid transparent;
}
body:not(.lockscreen) .sidebar-menu .treeview-menu > li > a:hover,
body:not(.lockscreen) .sidebar-menu .treeview-menu > li.active > a {
    color: #fff !important;
    background: rgba(255, 255, 255, .04) !important;
    border-left-color: var(--mh-flame);
}
body:not(.lockscreen) .sidebar-menu .treeview-menu > li > a > i { color: inherit; }
/* thanh cuon manh trong sidebar */
body:not(.lockscreen) .main-sidebar ::-webkit-scrollbar { width: 6px; }
body:not(.lockscreen) .main-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14); border-radius: 3px;
}

/* ---------------------------------------------------------------
   4b. GO BO "DAI BANNER XANH" CUA GIAO DIEN CU

   Giao dien cu dung thu thuat:
       .content-header-custom { background:#2b80ec; padding:15px 15px 200px }
       .content-custom        { margin-top:-210px }
   -> mot dai mau cao 257px roi keo noi dung de len tren.
   Bo selector cu co do uu tien 0,3,0 nen phai dung 0,3,1 moi ghi de duoc
   (them body[class*="skin-"]). Mau chu cua ho co !important nen phai
   dung !important tuong ung.
   Ap dung cho MOI skin (blue/red/green...) vi moi skin co mot mau banner.
   --------------------------------------------------------------- */
body[class*="skin-"] .content-wrapper .content-header-custom {
    background: transparent !important;
    color: var(--mh-ink) !important;
    padding: 22px 20px 4px !important;
}
body[class*="skin-"] .content-wrapper .content-header-custom h1,
body[class*="skin-"] .content-wrapper .content-header-custom a {
    color: var(--mh-ink) !important;
    font-family: var(--mh-font) !important;
}
body[class*="skin-"] .content-wrapper .content-header-custom small,
body[class*="skin-"] .content-wrapper .content-header-custom .breadcrumb {
    color: var(--mh-ink-3) !important;
}
body[class*="skin-"] .content-wrapper .content-custom {
    margin-top: 0 !important;
}

/* Bootstrap gan .row:before/.row:after (clearfix). Khi bien .row thanh
   grid/flex thi hai pseudo-element nay TRO THANH O LUOI RONG va day cac
   the sang phai. Phai tat chung di. */
body:not(.lockscreen) .row-custom::before,
body:not(.lockscreen) .row-custom::after,
body:not(.lockscreen) .content-custom > .row:first-child::before,
body:not(.lockscreen) .content-custom > .row:first-child::after {
    display: none !important;
}

/* ---------------------------------------------------------------
   5. TIEU DE TRANG
   --------------------------------------------------------------- */
body:not(.lockscreen) .content-header {
    padding: 22px 20px 6px;
    background: transparent;
}
body:not(.lockscreen) .content-header > h1 {
    font-size: 22px;
    font-weight: 650;
    color: var(--mh-ink);
    margin: 0;
    letter-spacing: -.02em;
}
body:not(.lockscreen) .content-header > h1 > small {
    display: block;
    font-size: 13px;
    color: var(--mh-ink-3);
    margin-top: 5px;
}
body:not(.lockscreen) .content-header > .breadcrumb {
    background: transparent;
    top: 24px;
    font-size: 12.5px;
}
body:not(.lockscreen) .content { padding: 12px 20px 24px; }

/* ---------------------------------------------------------------
   6. THE SO LIEU (KPI)
   Thiet ke lai hoan toan tu "khoi mau bao hoa" cua AdminLTE thanh
   the trung tinh: SO LIEU la nhan vat chinh, mau chi lam diem nhan.
   --------------------------------------------------------------- */
body:not(.lockscreen) .info-box {
    display: block;
    background: var(--mh-card) !important;
    border: 1px solid var(--mh-line);
    border-radius: var(--mh-r);
    box-shadow: var(--mh-shadow);
    min-height: 96px;
    padding: 16px 18px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body:not(.lockscreen) .info-box:hover {
    box-shadow: var(--mh-shadow-lift);
    transform: translateY(-2px);
    border-color: #D8DCE3;
}
/* vach mau mong ben trai - diem nhan thuong hieu, khong phai khoi day */
body:not(.lockscreen) .info-box::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--mh-line);
    transition: background .2s ease;
}
body:not(.lockscreen) .info-box:hover::before { background: var(--mh-brand); }

/* bieu tuong: chip nho bo tron, KHONG con la khoi mau lon */
body:not(.lockscreen) .info-box .info-box-icon {
    width: 40px; height: 40px;
    line-height: 40px;
    border-radius: var(--mh-r-sm);
    font-size: 17px;
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #F1F3F6 !important;
    color: var(--mh-ink-2) !important;
    margin-bottom: 12px;
    box-shadow: none;
}
body:not(.lockscreen) .info-box .info-box-icon > i { font-size: 16px; }

body:not(.lockscreen) .info-box .info-box-content {
    margin-left: 0 !important;
    padding: 0;
}
body:not(.lockscreen) .info-box .info-box-text {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mh-ink-3);
    white-space: normal;
    margin-bottom: 5px;
}
/* SO LIEU - nhan vat chinh. Dung chu so ti le (khong tabular-nums)
   vi day la so lon dung mot minh. */
body:not(.lockscreen) .info-box .info-box-number {
    display: block;
    font-size: 25px;
    font-weight: 680;
    line-height: 1.15;
    color: var(--mh-ink);
    letter-spacing: -.025em;
    font-variant-numeric: proportional-nums;
}

/* --- Luoi the so lieu ---
   Dashboard co 2 hang (4 the + 2 the). Dung CSS Grid de moi the LUON
   cung be rong du nam o hang nao -> nhin can doi, tu xuong dong tren
   man hinh nho. Khong phai sua HTML. */
body:not(.lockscreen) .row-custom {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
    margin-left: 0;
    margin-right: 0;
}
body:not(.lockscreen) .row-custom > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding-left: 0;
    padding-right: 0;
}
body:not(.lockscreen) .row-custom .info-box { margin-bottom: 0; height: 100%; }

/* --- Mau CHI dung khi mang y nghia (ban dung class thu cong) --- */
/* Chi tieu noi bat: tong ban hang */
body:not(.lockscreen) .info-box.mh-hero::before { background: var(--mh-brand); }
body:not(.lockscreen) .info-box.mh-hero .info-box-icon {
    background: var(--mh-brand-soft) !important;
    color: var(--mh-brand) !important;
}
/* Chu so LUON mac mau chu (ink), khong mac mau nhan dien.
   Chip icon co mau ben canh moi la thu mang y nghia mau. */

/* Khoan con no = trang thai canh bao (luon kem icon + nhan chu) */
body:not(.lockscreen) .info-box.mh-due::before { background: var(--mh-warn); }
body:not(.lockscreen) .info-box.mh-due .info-box-icon {
    background: var(--mh-warn-soft) !important;
    color: var(--mh-warn) !important;
}
/* nhan chu nho mau canh bao - di kem icon, khong dua vao mau don doc */
body:not(.lockscreen) .info-box.mh-due .info-box-text { color: var(--mh-warn); }

/* Da thu = trang thai tot */
body:not(.lockscreen) .info-box.mh-good::before { background: var(--mh-good); }
body:not(.lockscreen) .info-box.mh-good .info-box-icon {
    background: rgba(22,163,74,.10) !important;
    color: var(--mh-good) !important;
}

/* vo hieu hoa cac lop mau nen cu cua AdminLTE tren chip icon */
body:not(.lockscreen) .info-box .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box .info-box-icon.bg-yellow,
body:not(.lockscreen) .info-box .info-box-icon.bg-red,
body:not(.lockscreen) .info-box .info-box-icon.bg-green,
body:not(.lockscreen) .info-box .info-box-icon.bg-blue {
    background: #F1F3F6 !important;
    color: var(--mh-ink-2) !important;
}
body:not(.lockscreen) .info-box.mh-hero .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box.mh-hero .info-box-icon.bg-yellow,
body:not(.lockscreen) .info-box.mh-hero .info-box-icon.bg-red {
    background: var(--mh-brand-soft) !important; color: var(--mh-brand) !important;
}
body:not(.lockscreen) .info-box.mh-due .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box.mh-due .info-box-icon.bg-yellow,
body:not(.lockscreen) .info-box.mh-due .info-box-icon.bg-red {
    background: var(--mh-warn-soft) !important; color: var(--mh-warn) !important;
}
body:not(.lockscreen) .info-box.mh-good .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box.mh-good .info-box-icon.bg-yellow {
    background: rgba(22,163,74,.10) !important; color: var(--mh-good) !important;
}

/* --- Nhan dien y nghia tung the QUA CLASS DU LIEU CO SAN ---
   Dung :has() nen KHONG phai them class nao vao HTML -> khong dung toi
   markup ma home.js dang gan du lieu vao.
   PHAI dat SAU khoi "vo hieu hoa bg-aqua/bg-yellow" o tren, vi hai ben
   cung do uu tien (0,4,1) va cung !important -> quy tac dung SAU thang. */
body:not(.lockscreen) .info-box:has(.total_sell)::before { background: var(--mh-brand); }
body:not(.lockscreen) .info-box:has(.total_sell) .info-box-icon,
body:not(.lockscreen) .info-box:has(.total_sell) .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box:has(.total_sell) .info-box-icon.bg-yellow,
body:not(.lockscreen) .info-box:has(.total_sell) .info-box-icon.bg-red {
    background: var(--mh-brand-soft) !important;
    color: var(--mh-brand) !important;
}
body:not(.lockscreen) .info-box:has(.total_sell) .info-box-number { font-size: 27px; }

body:not(.lockscreen) .info-box:has(.invoice_paid)::before { background: var(--mh-good); }
body:not(.lockscreen) .info-box:has(.invoice_paid) .info-box-icon,
body:not(.lockscreen) .info-box:has(.invoice_paid) .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box:has(.invoice_paid) .info-box-icon.bg-yellow {
    background: rgba(22,163,74,.10) !important;
    color: var(--mh-good) !important;
}

body:not(.lockscreen) .info-box:has(.invoice_due)::before,
body:not(.lockscreen) .info-box:has(.purchase_due)::before { background: var(--mh-warn); }
body:not(.lockscreen) .info-box:has(.invoice_due) .info-box-icon,
body:not(.lockscreen) .info-box:has(.invoice_due) .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box:has(.invoice_due) .info-box-icon.bg-yellow,
body:not(.lockscreen) .info-box:has(.purchase_due) .info-box-icon,
body:not(.lockscreen) .info-box:has(.purchase_due) .info-box-icon.bg-aqua,
body:not(.lockscreen) .info-box:has(.purchase_due) .info-box-icon.bg-yellow {
    background: var(--mh-warn-soft) !important;
    color: var(--mh-warn) !important;
}
body:not(.lockscreen) .info-box:has(.invoice_due) .info-box-text,
body:not(.lockscreen) .info-box:has(.purchase_due) .info-box-text { color: var(--mh-warn); }

/* --- Thanh loc dashboard: 1 hang duy nhat phia tren, ap dung cho
       toan bo bieu do ben duoi (khong dat bo loc rieng trong tung hop) --- */
body:not(.lockscreen) .content-custom > .row:first-child {
    background: var(--mh-card);
    border: 1px solid var(--mh-line);
    border-radius: var(--mh-r);
    box-shadow: var(--mh-shadow);
    padding: 13px 16px;
    margin: 0 0 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
body:not(.lockscreen) .content-custom > .row:first-child > [class*="col-"] {
    width: auto !important;
    float: none !important;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
}
body:not(.lockscreen) .content-custom > .row:first-child .btn-group { float: none !important; }
body:not(.lockscreen) .content-custom > .row:first-child .btn-group > label.btn {
    background: transparent !important;
    border: 1px solid var(--mh-line) !important;
    color: var(--mh-ink-2) !important;
    font-weight: 550;
}
body:not(.lockscreen) .content-custom > .row:first-child .btn-group > label.btn.active {
    background: var(--mh-brand) !important;
    border-color: var(--mh-brand) !important;
    color: #fff !important;
    box-shadow: none;
}

/* ---------------------------------------------------------------
   7. HOP / WIDGET
   --------------------------------------------------------------- */
body:not(.lockscreen) .box {
    background: var(--mh-card);
    border: 1px solid var(--mh-line);
    border-top: 1px solid var(--mh-line);
    border-radius: var(--mh-r);
    box-shadow: var(--mh-shadow);
    margin-bottom: 20px;
}
body:not(.lockscreen) .box.box-primary,
body:not(.lockscreen) .box.box-warning,
body:not(.lockscreen) .box.box-info,
body:not(.lockscreen) .box.box-success,
body:not(.lockscreen) .box.box-danger {
    border-top-color: var(--mh-line);
}
body:not(.lockscreen) .box > .box-header {
    padding: 15px 18px;
    border-bottom: 1px solid var(--mh-line-soft);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
body:not(.lockscreen) .box > .box-header .box-title {
    font-size: 14.5px;
    font-weight: 640;
    color: var(--mh-ink);
    letter-spacing: -.01em;
    line-height: 1.4;
}
body:not(.lockscreen) .box > .box-header > .fa,
body:not(.lockscreen) .box > .box-header > .fas,
body:not(.lockscreen) .box > .box-header > i {
    color: var(--mh-ink-3);
    margin-right: 2px;
}
body:not(.lockscreen) .box > .box-header .box-tools { margin-left: auto; position: static; }
body:not(.lockscreen) .box-body { padding: 16px 18px; }

/* ---------------------------------------------------------------
   8. BANG DU LIEU
   --------------------------------------------------------------- */
body:not(.lockscreen) .table > thead > tr > th {
    background: #FAFBFC;
    border-bottom: 1px solid var(--mh-line) !important;
    border-top: none !important;
    color: var(--mh-ink-2);
    font-size: 11.5px;
    font-weight: 640;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 11px 12px;
    white-space: nowrap;
}
body:not(.lockscreen) .table > tbody > tr > td {
    border-top: 1px solid var(--mh-line-soft) !important;
    padding: 11px 12px;
    font-size: 13.4px;
    color: var(--mh-ink);
    vertical-align: middle;
}
/* con so trong bang xep thang cot -> dung tabular-nums */
body:not(.lockscreen) .table > tbody > tr > td { font-variant-numeric: tabular-nums; }
body:not(.lockscreen) .table-striped > tbody > tr:nth-of-type(odd) { background: #FCFCFD; }
body:not(.lockscreen) .table-hover > tbody > tr:hover { background: var(--mh-brand-soft); }
body:not(.lockscreen) .table-bordered,
body:not(.lockscreen) .table-bordered > tbody > tr > td,
body:not(.lockscreen) .table-bordered > thead > tr > th {
    border-color: var(--mh-line-soft) !important;
}
/* --- SO TRANG (phan trang cua bang du lieu) ---
   LUU Y QUAN TRONG: bang o day dung renderer Bootstrap cua DataTables, nen
   cau truc la  <ul class="pagination"><li class="paginate_button"><a>1</a></li>
   tuc .paginate_button la the <li>, KHONG phai the <a>.
   Truoc day theme dat padding + nen hover len chinh <li>, trong khi con so
   nam trong <a> (Bootstrap da cho <a> padding + nen trang rieng) -> khoi nen
   xanh nhat khi ro chuot bi VE LECH ra ngoai con so.
   Cach dung: <li> khong trang tri gi, toan bo mau/padding/bo goc dat len <a>. */
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.paginate_button {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li > a,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li > span {
    padding: 5px 11px;
    margin-left: 2px;
    border: 1px solid transparent !important;
    border-radius: var(--mh-r-sm) !important;
    background: transparent;
    color: var(--mh-ink-2) !important;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li > a:focus {
    background: var(--mh-brand-soft) !important;
    color: var(--mh-brand) !important;
}
/* Trang dang xem: Bootstrap danh dau bang class .active tren <li> */
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.active > a:hover,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
    background: var(--mh-brand) !important;
    border-color: var(--mh-brand) !important;
    color: #fff !important;
}
/* Nut Truoc/Sau khi khong bam duoc: khong sang len khi ro chuot */
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:hover,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span {
    background: transparent !important;
    color: var(--mh-ink-3) !important;
    cursor: not-allowed;
}

/* Bang nao dung renderer MAC DINH cua DataTables (khong Bootstrap) thi
   .paginate_button lai chinh la the <a> - giu lai kieu cu cho truong hop do. */
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate a.paginate_button {
    border-radius: var(--mh-r-sm);
    border: 1px solid transparent;
    padding: 5px 11px;
    color: var(--mh-ink-2) !important;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
    background: var(--mh-brand) !important;
    border-color: var(--mh-brand) !important;
    color: #fff !important;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    background: var(--mh-brand-soft) !important;
    border-color: transparent !important;
    color: var(--mh-brand) !important;
}
body:not(.lockscreen) .dataTables_wrapper .dataTables_info,
body:not(.lockscreen) .dataTables_wrapper .dataTables_length,
body:not(.lockscreen) .dataTables_wrapper .dataTables_filter {
    color: var(--mh-ink-3);
    font-size: 12.8px;
}

/* ---------------------------------------------------------------
   9. NUT VA O NHAP
   --------------------------------------------------------------- */
body:not(.lockscreen) .btn {
    border-radius: var(--mh-r-sm);
    font-weight: 550;
    font-size: 13.4px;
    padding: 7px 15px;
    border: 1px solid transparent;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
}
body:not(.lockscreen) .btn:active { transform: translateY(1px); }
body:not(.lockscreen) .btn-primary,
body:not(.lockscreen) .btn-info {
    background: var(--mh-brand) !important;
    border-color: var(--mh-brand) !important;
    color: #fff !important;
}
body:not(.lockscreen) .btn-primary:hover,
body:not(.lockscreen) .btn-info:hover,
body:not(.lockscreen) .btn-primary:focus,
body:not(.lockscreen) .btn-info:focus {
    background: var(--mh-brand-strong) !important;
    border-color: var(--mh-brand-strong) !important;
}
body:not(.lockscreen) .btn-default {
    background: var(--mh-card) !important;
    border-color: var(--mh-line) !important;
    color: var(--mh-ink-2) !important;
}
body:not(.lockscreen) .btn-default:hover {
    background: #F7F8FA !important;
    border-color: #D6DAE1 !important;
}
body:not(.lockscreen) .btn-success { background: var(--mh-good) !important; border-color: var(--mh-good) !important; }
body:not(.lockscreen) .btn-warning { background: var(--mh-warn) !important; border-color: var(--mh-warn) !important; color: #fff !important; }

/* nhom nut loc ngay tren dashboard */
body:not(.lockscreen) .btn-group > .btn-info.active,
body:not(.lockscreen) .btn-group > label.btn-info.active {
    background: var(--mh-brand-strong) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.2);
}

body:not(.lockscreen) .form-control,
body:not(.lockscreen) .select2-container .select2-selection--single {
    border-radius: var(--mh-r-sm) !important;
    border: 1px solid var(--mh-line) !important;
    box-shadow: none !important;
    height: 38px;
    font-size: 13.6px;
    color: var(--mh-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}
body:not(.lockscreen) .form-control:focus,
body:not(.lockscreen) .select2-container--focus .select2-selection--single {
    border-color: var(--mh-brand) !important;
    box-shadow: 0 0 0 3px var(--mh-brand-soft) !important;
}
body:not(.lockscreen) label { font-weight: 600; font-size: 12.8px; color: var(--mh-ink-2); }

/* ---------------------------------------------------------------
   10. (Da bo 2026-08-05: kieu cho dong bao "dang xem N ngay gan nhat".
       Mac dinh gio la HOM NAY nen khong can dong bao nua.)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   11. KHUNG BIEU DO
   --------------------------------------------------------------- */
body:not(.lockscreen) .box-body > canvas,
body:not(.lockscreen) .box-body > div[id*="chart"] {
    max-width: 100%;
}

/* ---------------------------------------------------------------
   12. LINH TINH
   --------------------------------------------------------------- */
body:not(.lockscreen) .main-footer {
    background: transparent;
    border-top: 1px solid var(--mh-line);
    color: var(--mh-ink-3);
    font-size: 12.5px;
    padding: 14px 20px;
}
body:not(.lockscreen) .scrolltop .scroll {
    background: var(--mh-brand);
    color: #fff;
    border-radius: var(--mh-r-sm);
    box-shadow: var(--mh-shadow-lift);
}
body:not(.lockscreen) .modal-content {
    border-radius: var(--mh-r);
    border: none;
    box-shadow: 0 20px 48px rgba(16,24,40,.18);
}
body:not(.lockscreen) .modal-header {
    border-bottom: 1px solid var(--mh-line-soft);
    padding: 16px 20px;
}
body:not(.lockscreen) .modal-header .modal-title { font-weight: 640; font-size: 16px; }
body:not(.lockscreen) .nav-tabs > li.active > a {
    border-color: transparent;
    border-bottom: 2px solid var(--mh-brand);
    color: var(--mh-brand);
    font-weight: 600;
}
body:not(.lockscreen) .pagination > .active > a,
body:not(.lockscreen) .pagination > .active > span {
    background: var(--mh-brand);
    border-color: var(--mh-brand);
}

/* ---------------------------------------------------------------
   13. MAN HINH NHO
   --------------------------------------------------------------- */
@media (max-width: 767px) {
    body:not(.lockscreen) .content { padding: 10px 12px 20px; }
    body:not(.lockscreen) .content-header { padding: 16px 12px 4px; }
    body:not(.lockscreen) .content-header > h1 { font-size: 19px; }
    body:not(.lockscreen) .info-box { min-height: 84px; padding: 14px; }
    body:not(.lockscreen) .info-box .info-box-number { font-size: 21px; }
    body:not(.lockscreen) .box-body { padding: 13px; }
    /* bang rong tu cuon ngang, KHONG lam trang bi tran */
    body:not(.lockscreen) .box-body > .table-responsive,
    body:not(.lockscreen) .dataTables_wrapper { overflow-x: auto; }
}

/* ---------------------------------------------------------------
   14. IN AN - giu nguyen, khong de theme lam hong hoa don
   --------------------------------------------------------------- */
@media print {
    body:not(.lockscreen) .info-box,
    body:not(.lockscreen) .box {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    .thanh-tim-truoc { display: none !important; }
}