/* ================================================
   theme-shell.css (AdminSite) — Clean SaaS skin
   Layer cuối, đè theme Viho (style.css) + new-theme.css.
   Token đến từ _variables.css.
   ================================================ */

/* ---------------------------------------------------------------------------
   Be Vietnam Pro — NHUNG BAN NHUNG TAI CHO, KHONG goi ra Google Fonts.
   Benh vien chay OFFLINE: mot @import ra Google Fonts o day khong "chi la xau font"
   — trinh duyet CHAN RENDER cho stylesheet do cho toi khi request that bai, nen ca
   trang trang xoa vai giay moi hien. Font that nam o wwwroot/fonts/be-vietnam-pro/.

   Giu DU CA BA subset, dac biet la `vietnamese`: bo no thi moi chu co dau
   (a, e, o, u, dau nang...) roi ve font he thong, chu hoa chu thuong lech nhau ngay
   giua mot dong. Sinh tu Google Fonts css2, family Be Vietnam Pro, weight 400-800.

   File nay LA BAN SAO 1:1 giua AdminSite va Staff (nhu theme-shell.css noi chung) —
   sua mot ben PHAI sua ca hai.
   --------------------------------------------------------------------------- */
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-400-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-500-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-600-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-700-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-800-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/be-vietnam-pro/be-vietnam-pro-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.f-w-600, .f-14, .f-16 {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}

body { background: var(--bg-body) !important; color: var(--text-main); }
.page-wrapper .page-body-wrapper .page-body,
.page-body-wrapper { background: transparent !important; }

body,
.page-main-header,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav,
.card, .modal-content, .dropdown-menu {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.ph, .ph-fill, [class^="ph-"], [class*=" ph-"] { line-height: 1; }

@keyframes theme-reveal-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.xp-reveal { opacity: 0; animation: theme-reveal-up .4s ease forwards; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .xp-reveal { opacity: 1 !important; }
}

/* ================================================
   SHELL — SIDEBAR
   ================================================ */
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav {
    background: var(--white) !important;
    border-right: 1px solid var(--border) !important;
    box-shadow: none !important;
}
.main-nav .sidebar-user img.rounded-circle {
    border: 2px solid var(--border) !important;
    background: var(--bg-body);
    padding: 0;
}
.main-nav .sidebar-user h6 { color: var(--text-main) !important; font-weight: 700; }
.main-nav .sidebar-user p { color: var(--text-muted) !important; }
.main-nav .sidebar-user .badge-bottom {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin-top: -16px !important;
    margin-bottom: 4px !important;
    text-align: center;
    z-index: 2;
}
.main-nav .sidebar-user .badge-primary,
.main-nav .sidebar-user .badge-bottom .badge {
    display: inline-block !important;
    width: auto !important;
    padding: 3px 12px !important;
    background: var(--primary) !important; color: #fff !important;
    border: none; border-radius: var(--radius-pill) !important;
    font-weight: 600; font-size: 11px; line-height: 1.4;
}
.main-nav .sidebar-user .setting-primary i { color: var(--primary) !important; }

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .sidebar-main-title h6 {
    color: var(--text-muted) !important;
    font-weight: 700 !important; text-transform: uppercase; letter-spacing: .5px;
}
.sidebar-khoa-title h6 { color: var(--text-muted) !important; }

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a {
    border-radius: var(--radius-sm) !important;
    color: var(--text-main) !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
    margin: 2px 0;
    display: flex !important;
    align-items: center;
    transition: background .15s ease, color .15s ease;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav:not(.close_icon) .main-navbar .nav-menu > li > a {
    padding: 8px 12px !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a > i:not(.collapse-icon):not(.fa-angle-down):first-child,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a > [class*="ph-"]:not(.collapse-icon) {
    width: 32px !important; height: 32px !important;
    min-width: 32px !important;
    box-sizing: border-box !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    background: transparent !important;
    color: var(--text-muted) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin-right: 10px !important; vertical-align: middle;
    transition: background .15s ease, color .15s ease;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover {
    background: var(--primary-light) !important;
    border-color: transparent !important;
    color: var(--primary) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover > i:not(.collapse-icon):not(.fa-angle-down):first-child,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a:hover > [class*="ph-"]:not(.collapse-icon) {
    color: var(--primary) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active,
.main-nav .main-navbar .nav-menu > li > a.active {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active > i:not(.collapse-icon):not(.fa-angle-down):first-child,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active > [class*="ph-"]:not(.collapse-icon) {
    background: transparent !important;
    color: var(--primary) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active .nav-label,
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li > a.active .collapse-icon {
    color: var(--primary) !important;
}

.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li .nav-submenu li a {
    color: var(--text-muted) !important; border-radius: var(--radius-sm) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li .nav-submenu li a:hover {
    color: var(--primary) !important; background: var(--primary-light) !important;
}
.page-wrapper.compact-wrapper .page-body-wrapper header.main-nav .main-navbar .nav-menu > li .nav-submenu li a:after {
    background-color: var(--border) !important;
}

.main-nav .according-menu i,
.main-nav .nav-menu .dropdown a .sub-arrow i {
    font-family: "Phosphor" !important;
    color: var(--text-muted);
    font-size: 16px;
    transition: transform .2s ease, color .2s ease;
}
.main-nav .according-menu i::before,
.main-nav .nav-menu .dropdown a .sub-arrow i::before { content: "\e13a" !important; }
.main-nav .nav-menu > li > a:hover .according-menu i { color: var(--primary); }
.main-nav .nav-menu .dropdown > a.active .according-menu i {
    transform: rotate(90deg);
    color: var(--primary);
}

/* ================================================
   SHELL — TOPBAR
   ================================================ */
.page-main-header {
    background: var(--white) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
    min-height: 56px !important;
    height: 56px !important;
}
.page-main-header .main-header-right { min-height: 56px; }
.page-main-header .main-header-right > div { height: auto; }

.page-main-header .left-menu-header .search-form,
.page-main-header .left-menu-header .form-inline.search-form,
.page-main-header .mobile-search { display: none !important; }

.page-main-header .main-header-right .main-header-left .logo-wrapper { display: flex !important; align-items: center; }
.page-main-header .main-header-right .main-header-left .dark-logo-wrapper { display: none !important; }
.page-main-header .logo-wrapper h4,
.page-main-header .main-header-left h4 { color: var(--text-main) !important; }

.page-main-header .main-header-left .logo-wrapper img,
.page-main-header .main-header-left .dark-logo-wrapper img {
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    max-height: 32px;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}
.page-main-header .logo-wrapper,
.page-main-header .logo-wrapper a,
.page-main-header .main-header-left .logo-wrapper {
    border: 0 !important;
    border-right: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

#sidebar-toggle {
    width: 40px; height: 40px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: var(--radius-sm) !important;
    background: var(--bg-body) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    color: var(--text-main) !important;
    font-size: 20px !important;
    cursor: pointer;
    transition: background .15s ease;
    /* Không có nút này thì trình duyệt mobile (Chrome/Safari) vẽ đè lên một khối xám mặc định lúc
       chạm — khối đó HÌNH CHỮ NHẬT, không theo border-radius của nút, nên nút bo góc trông "méo"
       ngay lúc chạm/vừa chạm xong (Safari còn giữ khối này một nhịp sau khi đã rời tay). */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
/* margin:0 !important LÀ ĐIỂM MẤU CHỐT, không phải trang trí: assets/css/responsive.css:2373 (theme
   gốc, @media max-width:575px) đặt "margin-left: 20px" cho .toggle-sidebar — viết cho bố cục CŨ của
   theme, không phải #sidebar-toggle flex-center hiện tại. Icon vẫn NẰM ĐÚNG GIỮA khối .toggle-sidebar,
   nhưng margin-left:20px đẩy cả khối lệch phải trong #sidebar-toggle (40px) rồi tràn ra ngoài bên phải
   — nhìn như icon bị "méo xệch về bên phải" dù bản thân icon vẽ hoàn toàn đối xứng. Đã tận mắt đo:
   thiếu rule này, offset trái/phải là 12px/-8px (tràn) thay vì 2px/2px như flex justify-content:center
   phải cho ra. */
#sidebar-toggle .toggle-sidebar { line-height: 1; display: flex; align-items: center; justify-content: center; margin: 0 !important; }
#sidebar-toggle .toggle-sidebar svg { display: block; }
#sidebar-toggle:hover { background: var(--primary-light) !important; color: var(--primary) !important; }

/* .main-header-right mang class Bootstrap "row" (flex-wrap: wrap mặc định). Header này chưa bao giờ
   được thiết kế để xuống dòng — nhưng ở một dải bề rộng desktop (khoảng 992-1350px, tuỳ độ dài tên/
   email đăng nhập) nội dung .nav-right (4 icon + "Tên (email)" không rút gọn) không đủ chỗ chừa lại
   sau main-header-left (290px cố định), nên nó bị đẩy xuống DÒNG THỨ HAI của flex row. .page-main-header
   lại có height cố định + fixed position ⇒ dòng thứ hai đó tràn ra NGOÀI header, đè lên nội dung trang
   — đúng bug "menu mất dạng" đã gặp thật. Khoá bằng nowrap; hai rule dưới (min-width:0 + ellipsis tên)
   là điều kiện CẦN để nowrap không biến thành tràn ngang thay vì xuống dòng. */
.page-main-header .main-header-right { flex-wrap: nowrap !important; }
.page-main-header .nav-right,
.page-main-header .nav-right > ul.nav-menus,
.page-main-header .nav-right > ul.nav-menus > li.dropdown { min-width: 0; }
/* .btn-primary-light.text-start là nút "Tên (email)" — nút DUY NHẤT trong .nav-right có class này,
   phân biệt với nút chuông/tắt-tiếng cũng dùng chung .btn-primary-light nhưng KHÔNG có .text-start.
   min-width:0 ở li/nút/.my-auto là bắt buộc: mặc định flex item có min-width:auto (không phải 0), nên
   dù span đã ellipsis, các tầng cha vẫn từ chối co lại theo và tràn ra ngoài.
   RIÊNG .my-auto phải đổi sang display:flex (thay vì block mặc định): span là inline-block bên trong
   .my-auto dạng block thì width:auto của nó tính theo shrink-to-fit — mà white-space:nowrap làm min-
   content của nó bằng NGUYÊN chiều dài chữ chưa cắt, thắng luôn cả max-width lẫn bề rộng còn lại của
   .my-auto (đã tận mắt đo: max-width:242px vẫn tràn ra ngoài .my-auto chỉ rộng 206px). Biến span thành
   flex item thật (flex:1 1 auto; min-width:0) thì bề rộng nó được THUẬT TOÁN FLEX gán theo khoảng trống
   còn lại, ellipsis mới có tác dụng đúng nghĩa thay vì chỉ là một max-width không ai tôn trọng. */
.page-main-header .nav-right li.dropdown .btn-primary-light.text-start,
.page-main-header .nav-right li.dropdown .btn-primary-light.text-start .my-auto { min-width: 0; }
.page-main-header .nav-right li.dropdown .btn-primary-light.text-start .my-auto {
    display: flex;
    align-items: center;
}
.page-main-header .nav-right li.dropdown .btn-primary-light.text-start .my-auto > span {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 22vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.page-main-header .nav-right > ul.nav-menus > li { display: flex; align-items: center; }
.page-main-header .nav-right > ul.nav-menus > li > a,
.page-main-header .nav-right .notification-box,
.page-main-header .nav-right .mode {
    width: 40px !important; height: 40px !important;
    min-width: 40px; min-height: 40px;
    box-sizing: border-box !important;
    padding: 0 !important;
    flex: 0 0 40px;
    display: flex !important; align-items: center; justify-content: center;
    border-radius: 50% !important;
    background: var(--bg-body) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none;
    color: var(--text-main) !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.page-main-header .nav-right .btn-primary-light:has(.notification-box) > div {
    width: auto !important; height: auto !important;
    display: contents !important;
}
.page-main-header .nav-right > ul.nav-menus > li > a i.ph,
.page-main-header .nav-right .notification-box i.ph,
.page-main-header .nav-right .notification-box i.fa,
.page-main-header .nav-right .mode i.ph { font-size: 18px; color: var(--text-main) !important; }
.page-main-header .nav-right > ul.nav-menus > li > a:hover,
.page-main-header .nav-right .notification-box:hover,
.page-main-header .nav-right .mode:hover {
    background: var(--primary-light) !important;
    color: var(--primary) !important;
}
.page-main-header .nav-right > ul.nav-menus > li > a:hover i.ph,
.page-main-header .nav-right .notification-box:hover i.ph,
.page-main-header .nav-right .mode:hover i.ph { color: var(--primary) !important; }
.page-main-header .nav-right .notification-box .dot-animated,
.page-main-header .nav-right .notification-box .notif-badge {
    background: var(--danger) !important; box-shadow: 0 0 0 1px var(--white);
}

.page-main-header .nav-right li.dropdown .btn-primary-light:has(.notification-box),
.page-main-header .nav-right li .btn-primary-light:has(.notification-box) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.page-main-header .nav-right .btn-primary-light {
    background: var(--bg-body) !important;
    color: var(--text-main) !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none;
    transition: background .15s ease;
}
.page-main-header .nav-right .btn-primary-light,
.page-main-header .nav-right .btn-primary-light span,
.page-main-header .nav-right .btn-primary-light a,
.page-main-header .nav-right .btn-primary-light a i.ph,
.page-main-header .nav-right .btn-primary-light i { color: var(--text-main) !important; }
.page-main-header .nav-right .btn-primary-light:hover { background: var(--primary-light) !important; }

.footer { background: transparent !important; box-shadow: none !important; }
.footer .footer-copyright,
.footer .footer-copyright small,
.footer .footer-copyright p { color: var(--text-muted) !important; font-weight: 500; }

/* ================================================================
   BUTTON SYSTEM — Bootstrap .btn variants → Clean SaaS
   ================================================================ */
.btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 7px 16px !important;
    border-width: 1px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    /* Fallback text color for buttons with no recognized color variant
       (e.g. legacy ".btn-default" used by the shared confirm-toast partial) —
       otherwise Bootstrap's own dark default btn text color persists unchanged
       into dark mode and goes invisible on a dark toast/card background.
       Named variants below override this via higher selector specificity. */
    color: var(--text-main);
}
.btn:hover { box-shadow: none !important; }
.btn-sm { font-size: 12px !important; padding: 5px 12px !important; }
.btn-xs, .btn-rounded.btn-xs { font-size: 11px !important; padding: 3px 10px !important; }

.btn-primary {
    background: var(--primary) !important; color: #fff !important;
    border-color: var(--primary) !important;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--primary-hover) !important; color: #fff !important;
    border-color: var(--primary-hover) !important;
}

.btn-secondary, .btn-light {
    background: var(--white) !important; color: var(--text-main) !important;
    border-color: var(--border) !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus {
    background: var(--bg-body) !important; color: var(--text-main) !important;
}

.btn-warning {
    background: var(--accent-light) !important; color: var(--warning-text) !important;
    border-color: var(--accent) !important;
}
.btn-warning:hover, .btn-warning:focus { background: var(--accent) !important; color: #fff !important; }

.btn-success {
    background: var(--success-light) !important; color: var(--success-text) !important;
    border-color: var(--success) !important;
}
.btn-success:hover, .btn-success:focus { background: var(--success) !important; color: #fff !important; }

.btn-danger {
    background: var(--danger-light) !important; color: var(--danger-text) !important;
    border-color: var(--danger) !important;
}
.btn-danger:hover, .btn-danger:focus { background: var(--danger) !important; color: #fff !important; }

.btn-info {
    background: var(--info-light) !important; color: var(--info-text) !important;
    border-color: var(--info) !important;
}
.btn-info:hover, .btn-info:focus { background: var(--info) !important; color: #fff !important; }

.btn-primary-light {
    background: var(--primary-light) !important; color: var(--primary) !important;
    border-color: transparent !important;
}
.btn-primary-light:hover { background: var(--primary) !important; color: #fff !important; }

/* ================================================================
   CARDS
   ================================================================ */
.card {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
    background: var(--white) !important;
}
.card-header {
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
/* Bootstrap's bg-primary/bg-success/etc utility on a card-header is a widely-used
   pattern in this app (see SystemStyleCard.CardHeader = "card-header bg-primary...")
   paired with a vendor rule (style.css) that whitens the header's h4/h5/span text.
   Only flatten card-header to the neutral Clean SaaS surface when no such color
   utility is present — otherwise the colored background is stripped but the text
   stays forced white, making the title invisible.

   Chừa thêm .acc-module-header / .acc-app-header (bigbang-accordion.css): hai class đó
   tự đặt nền var(--primary) / var(--primary-light) kèm chữ #fff / var(--primary), nhưng
   selector của chúng chỉ (0,2,0) nên bị luật này (0,7,0) đè -> nền phẳng trắng mà chữ
   vẫn trắng = mất chữ ở theme sáng. */
.card-header:not(.bg-primary):not(.bg-secondary):not(.bg-success):not(.bg-danger):not(.bg-warning):not(.bg-info):not(.acc-module-header):not(.acc-app-header) {
    background: var(--white) !important;
    border-bottom: 1px solid var(--border) !important;
}

/* ================================================================
   FORMS
   ================================================================ */
.form-control, .form-select,
.input-group-text,
.select2-container--default .select2-selection {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    background: var(--white) !important;
    color: var(--text-main) !important;
}
.form-control:focus, .form-select:focus,
.select2-container--default.select2-container--focus .select2-selection {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-light) !important;
    outline: none !important;
}
.form-control::placeholder { color: var(--text-muted) !important; }

/* ================================================================
   TABLES
   ================================================================ */
table.dataTable thead th,
.table thead th {
    background: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border-color: var(--border) !important;
    font-weight: 600 !important;
}
.table > :not(caption) > * > * { border-color: var(--border) !important; }
table.dataTable tbody tr:hover,
.table tbody tr:hover { background: var(--primary-light) !important; }

/* ================================================================
   MODALS / DROPDOWNS / TOASTS
   ================================================================ */
/* .toast here is Bootstrap's own component (confirm-toast partial, #confirmationToast/#confirmationDynamic
   in _Layout.cshtml) — toastr (showSuccess/showError/showWarning) reuses the SAME class name "toast" on
   its notification divs under #toast-container, so excluding that container keeps toastr's own
   success/error/warning/info background colors (custom_style.css) from being wiped out by this
   neutral-surface !important rule. */
.modal-content, .dropdown-menu, .toast:not(#toast-container *) {
    background: var(--white) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    color: var(--text-main) !important;
}
.dropdown-item { color: var(--text-main) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-light) !important; color: var(--primary) !important; }

/* ================================================================
   BADGES — keep pill shape here only
   ================================================================ */
.badge { border-radius: var(--radius-pill) !important; font-weight: 600; }