/* ============================================================
   DARK CLIENT THEME  v2 — Unified Dark UI
   Modern · Premium · Smooth · Professional
   
   RULES:
   - Never override position: fixed/absolute on framework elements
   - Targeted CSS transitions only (no blanket * rule)
   - All color overrides use !important to beat framework .dark{bg:#181818}
   ============================================================ */

/* ── CSS Variables ──────────────────────────────────────────── */
:root {
    --dk-bg:           #141519;   /* content/page bg — sáng hơn sidebar, tạo phân cấp */
    --dk-surface:      #191b21;
    --dk-surface2:     #1c1e28;   /* card background */
    --dk-surface3:     #222540;
    --dk-sidebar:      #0c0d11;   /* sidebar — tối hơn rõ rệt so với content */
    --dk-nav:          rgba(12, 13, 17, 0.97);  /* navbar cùng tone với sidebar */
    --dk-border:       rgba(255, 255, 255, 0.065);
    --dk-border-hover: rgba(255, 255, 255, 0.11);
    --dk-primary:      #4d8cff;
    --dk-primary2:     #7c58ff;
    --dk-text:         #e0e4f0;   /* primary text — near-white trung tính */
    --dk-text-dim:     #575c70;   /* labels/secondary — xám mờ */
    --dk-text-mid:     #9298b0;   /* body text — xám trung bình */
    --dk-glow:         rgba(77, 140, 255, 0.28);
    --dk-glow-strong:  rgba(77, 140, 255, 0.50);
    --dk-success:      #1cbf7a;
    --dk-danger:       #f03650;
    --dk-warning:      #e8941e;
    --dk-info:         #18a8cc;
    --dk-radius:       10px;
    --dk-radius-lg:    14px;
    --dk-radius-sm:    7px;
    --dk-shadow:       0 4px 28px rgba(0, 0, 0, 0.55);
    --dk-shadow-sm:    0 2px 14px rgba(0, 0, 0, 0.4);
    --dk-shadow-card:  0 2px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
    --dk-trans:        0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar                { width: 5px; height: 5px; }
::-webkit-scrollbar-track          { background: var(--dk-bg); }
::-webkit-scrollbar-thumb          { background: #232438; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover    { background: #313458; }
*                                  { scrollbar-width: thin; scrollbar-color: #232438 var(--dk-bg); }

/* ── Smooth scroll & font rendering ─ */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.dark {
    overscroll-behavior: none;  /* ngăn chặn scroll chain giữa các vùng */
    background:
        radial-gradient(ellipse 85% 65% at 8% 2%,  rgba(55, 90, 230, 0.09) 0%, transparent 55%),
        radial-gradient(ellipse 65% 55% at 92% 92%, rgba(104, 56, 240, 0.07) 0%, transparent 50%),
        var(--dk-bg) !important;
    color: var(--dk-text) !important;
}
body.dark .content-page {
    background-color: transparent !important;
    animation: dkFadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
    /* contain: layout đã bị XÓA — một số trình duyệt xử lý nó như tạo stacking
       context, có thể ảnh hưởng position:fixed của Bootstrap modal */
}

/* Stagger entrance — mỗi cột hiện lên lần lượt */
body.dark .content-page .row > [class*='col-'] {
    animation: dkFadeUp 0.42s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.dark .content-page .row > [class*='col-']:nth-child(1) { animation-delay: 0.03s; }
body.dark .content-page .row > [class*='col-']:nth-child(2) { animation-delay: 0.10s; }
body.dark .content-page .row > [class*='col-']:nth-child(3) { animation-delay: 0.17s; }
body.dark .content-page .row > [class*='col-']:nth-child(4) { animation-delay: 0.24s; }
body.dark .content-page .row > [class*='col-']:nth-child(n+5) { animation-delay: 0.30s; }
body.dark #loading {
    background: var(--dk-bg) !important;
}
#loading {
    background: var(--dk-bg) !important;
}

/* ================================================================
   TOP NAVBAR
   IMPORTANT: Do NOT set position on .iq-top-navbar
              Framework uses position:fixed — must not override.
              The ::before gradient works because fixed IS a 
              positioned ancestor for absolute children.
   ================================================================ */
body.dark .iq-top-navbar,
body.dark .iq-top-navbar .iq-sub-dropdown {
    background: var(--dk-nav) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 1px 36px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,0.03) inset !important;
    /* GPU layer riêng — không bị repaint khi scroll */
    will-change: transform;
    transform: translateZ(0);
}
body.dark .iq-top-navbar .navbar  { background: transparent !important; }
body.dark .iq-navbar-custom        { background: transparent !important; }

/* Gradient glow line under navbar */
body.dark .iq-top-navbar::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(77, 140, 255, 0.45) 35%,
        rgba(124, 88, 255, 0.45) 65%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Navbar SVG icons */
body.dark .iq-top-navbar svg,
body.dark .iq-top-navbar .wrapper-menu {
    color: var(--dk-text-mid) !important;
    stroke: var(--dk-text-mid);
    transition: color var(--dk-trans), stroke var(--dk-trans);
}
body.dark .iq-top-navbar svg:hover,
body.dark .iq-top-navbar a:hover svg,
body.dark .iq-top-navbar .wrapper-menu:hover {
    color: var(--dk-primary) !important;
    stroke: var(--dk-primary);
}
/* User name */
body.dark .navbar-list li > a,
body.dark .user-name {
    color: var(--dk-text-mid) !important;
    transition: color var(--dk-trans);
}
body.dark .navbar-list li > a:hover { color: var(--dk-text) !important; }

/* Wallet badge */
body.dark .badge2 {
    background: rgba(77, 140, 255, 0.10) !important;
    border-color: rgba(77, 140, 255, 0.30) !important;
    color: #6ca8ff !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 0.78rem !important;
    transition: background var(--dk-trans), border-color var(--dk-trans), box-shadow var(--dk-trans);
}
body.dark .badge2:hover {
    background: rgba(77, 140, 255, 0.18) !important;
    box-shadow: 0 2px 14px rgba(77, 140, 255, 0.25) !important;
}
/* Mobile hamburger */
body.dark .navbar-toggler          { border-color: var(--dk-border) !important; }
body.dark .navbar-toggler svg      { color: var(--dk-text-mid) !important; }

/* ================================================================
   SIDEBAR
   ================================================================ */
body.dark .iq-sidebar {
    background: var(--dk-sidebar) !important;
    border-right: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.55) !important;
    /* GPU layer riêng — sidebar fixed không repaint khi scroll */
    will-change: transform;
    transform: translateZ(0);
    /* Subtle ambient glow nguồn sáng từ trên */
    background-image: radial-gradient(
        ellipse 180% 40% at 50% 0%,
        rgba(77, 140, 255, 0.055) 0%,
        transparent 65%
    ) !important;
}
body.dark .iq-sidebar-logo {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 12px !important;
}

/* ── Menu items wrapper ─────────────── */
body.dark .iq-sidebar-menu .side-menu > li {
    position: relative !important;
}
body.dark .iq-sidebar-menu .side-menu > li > a {
    color: var(--dk-text-mid) !important;
    border-radius: var(--dk-radius-sm) !important;
    margin: 2px 10px !important;
    padding: 9px 14px !important;
    position: relative !important;
    overflow: hidden !important;
    /* icon */
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    transition:
        color      0.2s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
        transform  0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Shimmer sweep khi hover */
body.dark .iq-sidebar-menu .side-menu > li > a::after {
    content: "";
    position: absolute;
    top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    transition: left 0.45s ease !important;
    pointer-events: none;
}
body.dark .iq-sidebar-menu .side-menu > li > a:hover::after {
    left: 130%;
}

/* Hover state */
body.dark .iq-sidebar-menu .side-menu > li > a:hover {
    color: #c0d8ff !important;
    background: rgba(77, 140, 255, 0.10) !important;
    box-shadow: inset 0 0 0 1px rgba(77, 140, 255, 0.12) !important;
    transform: translateX(3px) !important;
}

/* SVG / icon trong menu item */
body.dark .iq-sidebar-menu .side-menu > li > a svg,
body.dark .iq-sidebar-menu .side-menu > li > a i {
    transition: color 0.2s ease, transform 0.2s ease !important;
}
body.dark .iq-sidebar-menu .side-menu > li > a:hover svg,
body.dark .iq-sidebar-menu .side-menu > li > a:hover i {
    color: var(--dk-primary) !important;
    transform: scale(1.15) !important;
}

/* Active state */
body.dark .iq-sidebar-menu .side-menu > li.active > a,
body.dark .iq-sidebar-menu .side-menu > li.sidebar-layout.active > a {
    color: #c8e0ff !important;
    background: linear-gradient(
        90deg,
        rgba(77, 140, 255, 0.18) 0%,
        rgba(77, 140, 255, 0.06) 100%
    ) !important;
    box-shadow:
        inset 3px 0 0 var(--dk-primary),
        0 2px 20px rgba(77, 140, 255, 0.16),
        inset 0 0 0 1px rgba(77, 140, 255, 0.14) !important;
    padding-left: 16px !important;
    transform: none !important;
    animation: dkSidebarPulse 3s ease-in-out infinite !important;
}
body.dark .iq-sidebar-menu .side-menu > li.active > a svg,
body.dark .iq-sidebar-menu .side-menu > li.active > a i {
    color: var(--dk-primary) !important;
}

/* ── Submenu ────────────────────────── */
body.dark .iq-sidebar-menu .submenu {
    border-left: 1px solid rgba(77, 140, 255, 0.12) !important;
    margin-left: 24px !important;
}
body.dark .iq-sidebar-menu .submenu li a {
    color: #6878a0 !important;
    border-radius: 6px !important;
    padding: 7px 12px !important;
    margin: 1px 6px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: color 0.2s ease, background 0.2s ease, transform 0.18s ease !important;
}
body.dark .iq-sidebar-menu .submenu li a:hover {
    color: #a8c8f0 !important;
    background: rgba(77, 140, 255, 0.09) !important;
    transform: translateX(3px) !important;
}

/* ── Section labels ─────────────────── */
body.dark span.text-uppercase.small,
body.dark .iq-sidebar-menu .side-menu > li.px-3 > span {
    color: #50588a !important;
    font-size: 0.66rem !important;
    letter-spacing: 1.1px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* ── Sidebar sub-dropdowns ──────────── */
body.dark .iq-sidebar .iq-sub-dropdown .card {
    background: #14161b !important;
    border-color: var(--dk-border) !important;
}
body.dark .iq-sidebar .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    color: var(--dk-text-mid) !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease !important;
}
body.dark .iq-sidebar .list-group-item:hover {
    background: rgba(77, 140, 255, 0.08) !important;
    color: #a0c4ff !important;
    transform: translateX(2px) !important;
}
body.dark .iq-sidebar .dropdown-menu-1 a        { color: var(--dk-text-dim) !important; }
body.dark .iq-sidebar .dropdown-menu-1 a:hover  { color: #a0c4ff !important; }

/* ================================================================
   CARDS
   ================================================================ */
body.dark .card {
    overflow: hidden !important;
    background: rgba(28, 30, 40, 0.80) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid var(--dk-border) !important;
    border-radius: var(--dk-radius-lg) !important;
    box-shadow: var(--dk-shadow-card) !important;
    color: var(--dk-text) !important;
    transition: border-color var(--dk-trans), box-shadow var(--dk-trans), transform var(--dk-trans) !important;
    animation: dkFadeUp 0.38s cubic-bezier(0.4, 0, 0.2, 1) both;
}
/* Subtle top highlight edge — adds glass depth */
body.dark .card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.07) 70%, transparent 100%);
    pointer-events: none;
    z-index: 1;
}
body.dark .card:hover {
    border-color: rgba(77, 140, 255, 0.22) !important;
    box-shadow: 0 10px 48px rgba(0, 0, 0, 0.68), 0 0 0 1px rgba(77,140,255,0.12) inset !important;
    transform: translateY(-1px) !important;
}
body.dark .card-header {
    background: rgba(255, 255, 255, 0.028) !important;
    border-bottom: none !important;
    color: var(--dk-text) !important;
    border-radius: var(--dk-radius-lg) var(--dk-radius-lg) 0 0 !important;
    position: relative !important;
}
/* Gradient separator thay thế border đơn giản */
body.dark .card-header::after {
    content: "";
    position: absolute;
    bottom: 0; left: 5%; right: 5%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.07) 20%,
        rgba(77, 140, 255, 0.20) 50%,
        rgba(255, 255, 255, 0.07) 80%,
        transparent 100%
    );
    pointer-events: none;
}
body.dark .card-header .header-title h4,
body.dark .card-header .header-title h5,
body.dark .card-header > h4,
body.dark .card-header > h5 {
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}
body.dark .card-footer {
    background: rgba(255, 255, 255, 0.018) !important;
    border-top: 1px solid var(--dk-border) !important;
    border-radius: 0 0 var(--dk-radius-lg) var(--dk-radius-lg) !important;
}
body.dark .card-title  { color: #e8eaf4 !important; }
body.dark .card-text   { color: var(--dk-text-mid) !important; }
body.dark .card-body   { color: var(--dk-text) !important; }
/* Scrollable card-body — gradient fade ở đáy */
body.dark .card-body[style*="overflow"] {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}
/* Table b tag — brighten inline colored text */
body.dark .table td b  { filter: brightness(1.25) !important; }
body.dark .table td b[style*="color"] { filter: brightness(1.3) saturate(0.9) !important; }
/* Product card */
body.dark .card-product {
    background: linear-gradient(135deg, #0f1c38 0%, #0a1328 100%) !important;
    border: 1px solid rgba(77, 140, 255, 0.20) !important;
    box-shadow: 0 4px 26px rgba(0, 0, 20, 0.5) !important;
    color: #fff !important;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 { color: #e0e4f0 !important; }
body.dark p           { color: var(--dk-text-mid) !important; }
body.dark .text-dark  { color: var(--dk-text) !important; }
body.dark .text-muted { color: var(--dk-text-dim) !important; }
body.dark .text-secondary { color: var(--dk-text-dim) !important; }
body.dark hr          { border-color: var(--dk-border) !important; }

/* ================================================================
   TABLES
   ================================================================ */
body.dark .table {
    color: var(--dk-text-mid) !important;
    border-color: var(--dk-border) !important;
}
body.dark .table thead th {
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-dim) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}
body.dark .table td,
body.dark .table th   { border-color: rgba(255, 255, 255, 0.05) !important; }
body.dark .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.014) !important;
}
body.dark .table tbody tr {
    transition: background var(--dk-trans);
    animation: dkFadeUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.dark .table tbody tr:hover {
    background: rgba(77, 140, 255, 0.07) !important;
}
/* Scrollable areas — gợi ý browser chuẩn bị trước */
body.dark .card-body[style*="overflow"] {
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    will-change: scroll-position;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
body.dark .table-bordered { border-color: var(--dk-border) !important; }

/* ================================================================
   FORMS
   ================================================================ */
body.dark .form-control {
    background: rgba(255, 255, 255, 0.046) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    color: #e0eeff !important;
    border-radius: var(--dk-radius-sm) !important;
    transition: border-color var(--dk-trans), box-shadow var(--dk-trans), background var(--dk-trans) !important;
}
body.dark .form-control:hover  { border-color: rgba(255, 255, 255, 0.15) !important; }
body.dark .form-control:focus {
    background: rgba(255, 255, 255, 0.072) !important;
    border-color: var(--dk-primary) !important;
    box-shadow: 0 0 0 3px rgba(77, 140, 255, 0.18), 0 2px 14px rgba(0,0,0,0.3) !important;
    color: #fff !important;
    outline: none !important;
}
body.dark .form-control::placeholder { color: rgba(255, 255, 255, 0.18) !important; }
body.dark select.form-control option { background: #141620 !important; color: #d8dce8 !important; }
body.dark .custom-select {
    background-color: rgba(255, 255, 255, 0.046) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #e0eeff !important;
}
body.dark .input-group-text {
    background: rgba(255, 255, 255, 0.042) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--dk-text-mid) !important;
}
body.dark label                { color: var(--dk-text-dim) !important; }
body.dark .form-group label    { color: var(--dk-text-mid) !important; }
/* Checkbox / radio */
body.dark .custom-control-label::before {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
body.dark .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--dk-primary) !important;
    border-color: var(--dk-primary) !important;
    box-shadow: 0 0 8px rgba(77, 140, 255, 0.4) !important;
}
body.dark .custom-switch .custom-control-label::after { background: #3d506e !important; }

/* ================================================================
   BUTTONS
   ================================================================ */
body.dark .btn {
    transition: transform var(--dk-trans), box-shadow var(--dk-trans), opacity var(--dk-trans), background var(--dk-trans) !important;
}
body.dark .btn-primary {
    background: linear-gradient(135deg, #3d80ff 0%, #6848ff 100%) !important;
    border: none !important;
    box-shadow: 0 4px 22px rgba(61, 128, 255, 0.40) !important;
}
body.dark .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 7px 30px rgba(61, 128, 255, 0.60) !important;
}
body.dark .btn-primary:active { transform: scale(0.97) translateY(1px) !important; }
body.dark .btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    color: var(--dk-text-mid) !important;
}
body.dark .btn-secondary:hover { background: rgba(255, 255, 255, 0.10) !important; transform: translateY(-1px) !important; }
body.dark .btn-success {
    background: linear-gradient(135deg, #18b870, #0d8c52) !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(24, 184, 112, 0.38) !important;
}
body.dark .btn-success:hover { transform: translateY(-2px) !important; box-shadow: 0 7px 26px rgba(24, 184, 112, 0.54) !important; }
body.dark .btn-danger {
    background: linear-gradient(135deg, #e83050, #b8182e) !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(232, 48, 80, 0.38) !important;
}
body.dark .btn-danger:hover  { transform: translateY(-2px) !important; box-shadow: 0 7px 26px rgba(232, 48, 80, 0.54) !important; }
body.dark .btn-warning {
    background: linear-gradient(135deg, #e88b18, #c06a0c) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(232, 139, 24, 0.38) !important;
}
body.dark .btn-warning:hover { transform: translateY(-2px) !important; box-shadow: 0 7px 26px rgba(232, 139, 24, 0.54) !important; }
body.dark .btn-info {
    background: linear-gradient(135deg, #159acc, #0b70a0) !important;
    border: none !important;
    box-shadow: 0 4px 18px rgba(21, 154, 204, 0.38) !important;
}
body.dark .btn-info:hover    { transform: translateY(-2px) !important; box-shadow: 0 7px 26px rgba(21, 154, 204, 0.54) !important; }
body.dark .btn-light {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.11) !important;
    color: var(--dk-text-mid) !important;
}
body.dark .btn-outline-primary {
    border-color: rgba(77, 140, 255, 0.48) !important;
    color: #6aacff !important;
    background: transparent !important;
}
body.dark .btn-outline-primary:hover {
    background: rgba(77, 140, 255, 0.13) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(77, 140, 255, 0.22) !important;
}
body.dark .btn:active { transform: scale(0.97) translateY(1px) !important; }

/* ================================================================
   DROPDOWNS
   ================================================================ */
body.dark .dropdown-menu {
    background: #141620 !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 14px 56px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border-radius: var(--dk-radius) !important;
}
body.dark .dropdown-menu.show {
    animation: dkDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.dark .iq-sub-dropdown.dropdown-menu {
    animation: dkDropIn 0.18s cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.dark .dropdown-item {
    color: var(--dk-text-mid) !important;
    border-radius: 6px !important;
    margin: 1px 4px !important;
    width: calc(100% - 8px) !important;
    transition: background var(--dk-trans), color var(--dk-trans) !important;
}
body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    background: rgba(77, 140, 255, 0.12) !important;
    color: #90c0ff !important;
}
body.dark .dropdown-item.svg-icon a        { color: var(--dk-text-mid) !important; }
body.dark .dropdown-item.svg-icon:hover a  { color: #90c0ff !important; }
body.dark .dropdown-divider                { border-color: var(--dk-border) !important; }
/* Notification dropdown */
body.dark .iq-sub-dropdown .card          { background: #141620 !important; border-color: var(--dk-border) !important; }
body.dark .p-3.card-header-border         { border-bottom: 1px solid var(--dk-border) !important; }
body.dark .dropdown-item-1                { border-bottom: 1px solid rgba(255,255,255,0.04) !important; }
body.dark .list-style-detail h6           { color: var(--dk-text) !important; }
body.dark .list-style-detail small        { color: var(--dk-text-dim) !important; }
body.dark .avatar-danger                  { background: rgba(232, 48, 80, 0.14) !important; color: #f0607a !important; }

/* ================================================================
   NAV TABS & PILLS
   ================================================================ */
body.dark .nav-tabs                        { border-color: var(--dk-border) !important; }
body.dark .nav-tabs .nav-link {
    color: var(--dk-text-dim) !important;
    border: 1px solid transparent !important;
    border-radius: 8px 8px 0 0 !important;
    transition: color var(--dk-trans), background var(--dk-trans) !important;
}
body.dark .nav-tabs .nav-link:hover        { color: var(--dk-text-mid) !important; background: rgba(255,255,255,0.035) !important; }
body.dark .nav-tabs .nav-link.active {
    background: rgba(77, 140, 255, 0.11) !important;
    border-color: rgba(77, 140, 255, 0.28) rgba(77, 140, 255, 0.28) transparent !important;
    color: #8ec8ff !important;
}
body.dark .tab-content                     { color: var(--dk-text) !important; }
body.dark .nav-pills .nav-link {
    color: var(--dk-text) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--dk-radius-sm) !important;
    transition: background var(--dk-trans), color var(--dk-trans), box-shadow var(--dk-trans), border-color var(--dk-trans) !important;
}
body.dark .nav-pills .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
}
body.dark .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #3d80ff, #6848ff) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 18px rgba(61, 128, 255, 0.40) !important;
}

/* ================================================================
   PAGINATION
   ================================================================ */
body.dark .page-link {
    background: rgba(255, 255, 255, 0.038) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-dim) !important;
    transition: background var(--dk-trans), color var(--dk-trans), box-shadow var(--dk-trans) !important;
}
body.dark .page-link:hover {
    background: rgba(77, 140, 255, 0.12) !important;
    color: #8ec8ff !important;
    border-color: rgba(77, 140, 255, 0.28) !important;
}
body.dark .page-item.active .page-link {
    background: linear-gradient(135deg, #3d80ff, #6848ff) !important;
    border-color: #3d80ff !important;
    color: #fff !important;
    box-shadow: 0 2px 16px rgba(61, 128, 255, 0.48) !important;
}
body.dark .page-item.disabled .page-link  { color: #383d55 !important; background: rgba(255,255,255,0.02) !important; }

/* ================================================================
   MODAL
   ================================================================ */
body.dark .modal-content {
    background: rgba(26, 28, 38, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255,255,255,0.04) inset !important;
    border-radius: var(--dk-radius-lg) !important;
    color: var(--dk-text) !important;
}
body.dark .modal-header {
    border-bottom: 1px solid var(--dk-border) !important;
    background: rgba(255, 255, 255, 0.022) !important;
    border-radius: var(--dk-radius-lg) var(--dk-radius-lg) 0 0 !important;
}
body.dark .modal-footer                   { border-top: 1px solid var(--dk-border) !important; }
body.dark .modal-title                    { color: #e8eaf4 !important; }
body.dark .close                          { color: var(--dk-text-dim) !important; text-shadow: none !important; opacity: 0.7 !important; }
body.dark .close:hover                    { color: var(--dk-text) !important; opacity: 1 !important; }
body.dark .modal-backdrop.show            { opacity: 0.72 !important; background: #020408 !important; }

/* ================================================================
   LIST GROUPS
   ================================================================ */
body.dark .list-group-item {
    background: transparent !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text-mid) !important;
    transition: background var(--dk-trans), color var(--dk-trans) !important;
}
body.dark .list-group-item:hover          { background: rgba(77, 140, 255, 0.07) !important; color: #90c0ff !important; }
body.dark .list-group-item.active         { background: rgba(77, 140, 255, 0.16) !important; border-color: rgba(77,140,255,0.3) !important; }

/* ================================================================
   BADGES
   ================================================================ */
body.dark .badge-primary  { background: rgba(77, 140, 255, 0.20) !important; color: #6cb4ff !important; }
body.dark .badge-success  { background: rgba(28, 191, 122, 0.18) !important; color: #40d890 !important; }
body.dark .badge-danger   { background: rgba(232, 48, 80, 0.18)  !important; color: #f07090 !important; }
body.dark .badge-warning  { background: rgba(232, 139, 24, 0.18) !important; color: #f0aa50 !important; }
body.dark .badge-info     { background: rgba(21, 154, 204, 0.18) !important; color: #50c0e8 !important; }

/* ================================================================
   BREADCRUMB
   ================================================================ */
body.dark .breadcrumb                     { background: transparent !important; }
body.dark .breadcrumb-item a              { color: rgba(77, 140, 255, 0.9) !important; transition: color var(--dk-trans); }
body.dark .breadcrumb-item.active         { color: var(--dk-text-dim) !important; }
body.dark .breadcrumb-item + .breadcrumb-item::before { color: #3d4a62 !important; }

/* ================================================================
   FOOTER
   ================================================================ */
body.dark .iq-footer {
    background: var(--dk-bg) !important;
    border-top: 1px solid var(--dk-border) !important;
    color: var(--dk-text-dim) !important;
}
body.dark .iq-footer a   { color: var(--dk-text-dim) !important; transition: color var(--dk-trans); }
body.dark .iq-footer a:hover { color: var(--dk-primary) !important; }

/* ================================================================
   UTILITY OVERRIDES
   ================================================================ */
body.dark .bg-white           { background: rgba(255, 255, 255, 0.025) !important; }
body.dark .bg-light           { background: rgba(255, 255, 255, 0.035) !important; }
body.dark .bg-white.card      { background: rgba(28, 30, 40, 0.80) !important; }
body.dark .border             { border-color: var(--dk-border) !important; }
body.dark .border-bottom      { border-bottom-color: var(--dk-border) !important; }
body.dark .border-top         { border-top-color: var(--dk-border) !important; }
body.dark .shadow             { box-shadow: var(--dk-shadow) !important; }
body.dark .shadow-sm          { box-shadow: var(--dk-shadow-sm) !important; }
body.dark code, body.dark pre {
    background: rgba(255, 255, 255, 0.045) !important;
    color: #88c0f8 !important;
    border-radius: 6px !important;
}
body.dark .progress {
    background: rgba(255, 255, 255, 0.07) !important;
    border-radius: 100px !important;
}

/* ================================================================
   DATATABLES
   ================================================================ */
body.dark .dataTables_wrapper .dataTables_length select,
body.dark .dataTables_wrapper .dataTables_filter input {
    background: rgba(255, 255, 255, 0.046) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: var(--dk-text-mid) !important;
    border-radius: 6px !important;
}
body.dark .dataTables_wrapper .dataTables_info,
body.dark .dataTables_wrapper .dataTables_paginate { color: var(--dk-text-dim) !important; }

/* ================================================================
   TOOLTIPS
   ================================================================ */
body.dark .tooltip-inner {
    background: #141620 !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text-mid) !important;
    border-radius: 6px !important;
    box-shadow: var(--dk-shadow-sm) !important;
}

/* ================================================================
   ALERTS — bao gồm iq-alert component của Datum template
   ================================================================ */
body.dark .alert {
    border-radius: var(--dk-radius) !important;
    border-width: 1px !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
/* bg-white alert override — PHP dùng class này */
body.dark .alert.bg-white        { background: rgba(255,255,255,0.035) !important; }
body.dark .alert-success         { background: rgba(28, 191, 122, 0.10) !important; border-color: rgba(28, 191, 122, 0.28) !important; color: #4ddea0 !important; }
body.dark .alert-danger          { background: rgba(240, 54, 80, 0.10) !important;  border-color: rgba(240, 54, 80, 0.28) !important;  color: #f07090 !important; }
body.dark .alert-warning         { background: rgba(232, 148, 30, 0.10) !important; border-color: rgba(232, 148, 30, 0.28) !important; color: #f0b060 !important; }
body.dark .alert-info            { background: rgba(24, 168, 204, 0.10) !important; border-color: rgba(24, 168, 204, 0.28) !important; color: #50c8e8 !important; }
body.dark .alert-primary         { background: rgba(77, 140, 255, 0.10) !important; border-color: rgba(77, 140, 255, 0.28) !important; color: #7ab8ff !important; }
/* iq-alert icon & text */
body.dark .iq-alert-icon         { opacity: 0.85; flex-shrink: 0; }
body.dark .alert-primary  .iq-alert-icon,
body.dark .alert-primary  .iq-alert-text,
body.dark .alert-primary  .iq-alert-text a   { color: #7ab8ff !important; }
body.dark .alert-danger   .iq-alert-icon,
body.dark .alert-danger   .iq-alert-text     { color: #f07090 !important; }
body.dark .alert-warning  .iq-alert-icon,
body.dark .alert-warning  .iq-alert-text     { color: #f0b060 !important; }
body.dark .alert-info     .iq-alert-icon,
body.dark .alert-info     .iq-alert-text     { color: #50c8e8 !important; }
body.dark .alert-success  .iq-alert-icon,
body.dark .alert-success  .iq-alert-text     { color: #4ddea0 !important; }

/* ================================================================
   AUTH / STANDALONE PAGES
   (login, register, forgot-password, reset-password,
    verify, verify-otp-mail, giftbox)
   ================================================================ */
body.bg-image  { background-color: #07090f; }
body.dark      { background-color: var(--dk-bg); }

.login-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
}
.login-content .card,
body.dark .login-content .card {
    background: rgba(10, 12, 22, 0.84) !important;
    backdrop-filter: blur(26px) !important;
    -webkit-backdrop-filter: blur(26px) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 65px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(255,255,255,0.06) inset !important;
    color: #e0eeff !important;
    transition: box-shadow var(--dk-trans), border-color var(--dk-trans) !important;
    animation: none !important;
}
.login-content .card:hover {
    border-color: rgba(77, 140, 255, 0.15) !important;
    box-shadow: 0 18px 75px rgba(0, 0, 0, 0.84), 0 0 0 1px rgba(77,140,255,0.1) inset !important;
}
.login-content .card-body    { color: #e0eeff; }
.login-content h3,
.login-content h4            { color: #ffffff !important; letter-spacing: 0.3px; }
.login-content p             { color: var(--dk-text-mid) !important; }
.login-content .text-secondary,
.login-content label.text-secondary,
.login-content label         { color: var(--dk-text-mid) !important; }

.login-content .form-control {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 9px !important;
    color: #ffffff !important;
    transition: border-color var(--dk-trans), box-shadow var(--dk-trans), background var(--dk-trans) !important;
}
.login-content .form-control:hover  { border-color: rgba(255,255,255,0.18) !important; }
.login-content .form-control:focus {
    background: rgba(255, 255, 255, 0.092) !important;
    border-color: var(--dk-primary) !important;
    box-shadow: 0 0 0 3px rgba(77,140,255,0.20), 0 2px 16px rgba(0,0,0,0.38) !important;
    color: #ffffff !important;
}
.login-content .form-control::placeholder { color: rgba(255,255,255,0.21) !important; }
.login-content .btn-primary {
    background: linear-gradient(135deg, #4282ff 0%, #6445ff 100%) !important;
    border: none !important;
    border-radius: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    padding: 0.64rem 1rem !important;
    box-shadow: 0 5px 26px rgba(66,130,255,0.44) !important;
    transition: transform var(--dk-trans), box-shadow var(--dk-trans), opacity var(--dk-trans) !important;
}
.login-content .btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 9px 34px rgba(66,130,255,0.64) !important;
    opacity: 0.96 !important;
}
.login-content .btn-primary:active { transform: scale(0.97) translateY(1px) !important; }
.login-content a             { color: #6aacff !important; text-decoration: none !important; transition: color var(--dk-trans) !important; }
.login-content a:hover       { color: #a0ccff !important; text-decoration: underline !important; }
.login-content .auth-logo    { margin-bottom: 1.5rem; text-align: center; }
.login-content .custom-control-label { color: var(--dk-text-mid) !important; }
.login-content .custom-control-input:checked ~ .custom-control-label::before {
    background: var(--dk-primary) !important;
    border-color: var(--dk-primary) !important;
    box-shadow: 0 0 8px rgba(77,140,255,0.4) !important;
}

/* ================================================================
   KEYFRAME ANIMATIONS
   ================================================================ */

/* Card / section fade-up entrance */
@keyframes dkFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    /* transform: none — không dùng translateY(0) vì bất kỳ giá trị transform nào khác 'none'
       đều tạo Stacking Context mới. Với fill-mode:both, translateY(0) sẽ
       được giữ vĩnh viễn trên .content-page, khiến z-index của #modalBuy bị
       giới hạn trong .content-page, trong khi .modal-backdrop append vào body
       sau .content-page trong DOM lại đè lên toàn bộ nây ➡ modal bị che. */
    to   { opacity: 1; transform: none; }
}

/* Dropdown slide-in */
@keyframes dkDropIn {
    from { opacity: 0; transform: translateY(-7px) scale(0.975); }
    to   { opacity: 1; transform: none; }
}

/* Sidebar active item breathing glow — cập nhật khớp active state mới */
@keyframes dkSidebarPulse {
    0%, 100% {
        box-shadow:
            inset 3px 0 0 var(--dk-primary),
            0 2px 18px rgba(77, 140, 255, 0.14),
            inset 0 0 0 1px rgba(77, 140, 255, 0.12);
    }
    50% {
        box-shadow:
            inset 3px 0 0 var(--dk-primary),
            0 2px 28px rgba(77, 140, 255, 0.28),
            inset 0 0 0 1px rgba(77, 140, 255, 0.22);
    }
}

/* Focus ring for keyboard nav */
body.dark a:focus-visible,
body.dark button:focus-visible,
body.dark .btn:focus-visible {
    outline: 2px solid rgba(77,140,255,0.6) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(77,140,255,0.12) !important;
}