/* ==========================================================================
   BRIGHT VIBRANT THEME (XANH LÁ - VÀNG - TRẮNG - ĐỎ) - ACC24H.NET
   Bảng màu chủ đạo:
   - Trắng sáng & Kem thanh lịch: #f4f8f5 (Nền trang), #ffffff (Thẻ nội dung)
   - Xanh lá cây (Emerald / Forest Green): #16a34a, #10b981, #15803d, #f0fdf4
   - Vàng kim / Hổ phách (Golden / Amber): #f59e0b, #eab308, #d97706, #fffbeb
   - Đỏ tươi (Crimson / Coral Red): #ef4444, #dc2626, #b91c1c, #fef2f2
   - Chữ tương phản cao: #0f172a, #1e293b, #334155 (Tuyệt đối không mờ hay chìm màu)
   ========================================================================== */

:root,
html[data-theme="light"],
html.theme-light {
    --ios-bg: #f2f2f7;
    --ios-card: #ffffff;
    --ios-card-inner: #f8fafc;
    --ios-border: #e2e8f0;
    --ios-border-focus: #16a34a;
    --ios-text-primary: #0f172a;
    --ios-text-secondary: #475569;
    --ios-text-muted: #64748b;
    --ios-segment-bg: #f1f5f9;
    --ios-segment-active: #ffffff;
    --ios-input-bg: #ffffff;
    --ios-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --ios-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
    --ios-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08);

    --brand-green: #16a34a;
    --brand-green-dark: #15803d;
    --brand-green-light: #dcfce7;
    --brand-green-soft: #f0fdf4;
    --brand-yellow: #f59e0b;
    --brand-yellow-dark: #b45309;
    --brand-yellow-light: #fef3c7;
    --brand-yellow-soft: #fffbeb;
    --brand-red: #dc2626;
    --brand-red-dark: #b91c1c;
    --brand-red-light: #fee2e2;
    --brand-red-soft: #fef2f2;
    --bg-page: #f2f2f7;
    --bg-card: #ffffff;
    --text-main: #0f172a;
    --text-body: #1e293b;
    --text-muted: #475569;
    --border-light: #e2e8f0;
    --border-green: #bbf7d0;
    --border-yellow: #fde68a;
    --border-red: #fecaca;
}

html[data-theme="dark"],
html.theme-dark,
html.dark-mode {
    --ios-bg: #090d16;
    --ios-card: #131b2e;
    --ios-card-inner: #19233c;
    --ios-border: rgba(255, 255, 255, 0.09);
    --ios-border-focus: #22c55e;
    --ios-text-primary: #f8fafc;
    --ios-text-secondary: #94a3b8;
    --ios-text-muted: #64748b;
    --ios-segment-bg: #1c263e;
    --ios-segment-active: #24314f;
    --ios-input-bg: #19233c;
    --ios-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --ios-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ios-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

    --brand-green: #22c55e;
    --brand-green-dark: #16a34a;
    --brand-green-light: rgba(34, 197, 94, 0.2);
    --brand-green-soft: rgba(34, 197, 94, 0.1);
    --brand-yellow: #fbbf24;
    --brand-yellow-dark: #f59e0b;
    --brand-yellow-light: rgba(251, 191, 36, 0.2);
    --brand-yellow-soft: rgba(251, 191, 36, 0.1);
    --brand-red: #ef4444;
    --brand-red-dark: #dc2626;
    --brand-red-light: rgba(239, 68, 68, 0.2);
    --brand-red-soft: rgba(239, 68, 68, 0.1);
    --bg-page: #090d16;
    --bg-card: #131b2e;
    --text-main: #f8fafc;
    --text-body: #e2e8f0;
    --text-muted: #94a3b8;
    --border-light: rgba(255, 255, 255, 0.09);
    --border-green: rgba(34, 197, 94, 0.35);
    --border-yellow: rgba(251, 191, 36, 0.35);
    --border-red: rgba(239, 68, 68, 0.35);
}

/* 1. NỀN TOÀN TRANG & BODY (DUAL THEME APPLE / MUACERT) */
html,
html[data-theme="light"],
html.theme-light {
    background-color: var(--ios-bg) !important;
    color-scheme: light !important;
}

body,
html[data-theme="light"] body,
html.theme-light body {
    background-color: var(--ios-bg) !important;
    background-image: radial-gradient(circle at 10% 0%, rgba(22, 163, 74, 0.05) 0%, transparent 40%),
                      radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.06) 0%, transparent 40%) !important;
    color: var(--ios-text-primary) !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

html[data-theme="dark"],
html.theme-dark,
html.dark-mode {
    background-color: var(--ios-bg) !important;
    color-scheme: dark !important;
}

html[data-theme="dark"] body,
html.theme-dark body,
html.dark-mode body {
    background-color: var(--ios-bg) !important;
    background-image: radial-gradient(circle at 10% 0%, rgba(34, 197, 94, 0.08) 0%, transparent 40%),
                      radial-gradient(circle at 90% 10%, rgba(251, 191, 36, 0.05) 0%, transparent 40%) !important;
    color: var(--ios-text-primary) !important;
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Ẩn triệt để lớp nền tối và hạt Halloween */
body::before,
body::after,
.hw-particle {
    display: none !important;
    content: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* Thanh cuộn sáng hiện đại */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    background-color: #f1f5f9;
}
::-webkit-scrollbar-track {
    background-color: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background: linear-gradient(180deg, #16a34a, #f59e0b);
}
::-webkit-scrollbar-thumb:hover {
    background: #15803d;
}

/* 2. ĐỘ TƯƠNG PHẢN CHỮ CAO - KHỬ TRIỆT ĐỂ CHỮ TRẮNG TRÊN NỀN TRẮNG */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main) !important;
}

html[data-theme="light"] .text-white:not(.btn):not(.badge):not(.cs-pixel-bar-text):not(.cs-pixel-hud-progress-text):not(.rank-circle):not(.rank):not(.service-avatar):not(.tx-chat-header-title),
html.theme-light .text-white:not(.btn):not(.badge):not(.cs-pixel-bar-text):not(.cs-pixel-hud-progress-text):not(.rank-circle):not(.rank):not(.service-avatar):not(.tx-chat-header-title) {
    color: var(--text-main) !important;
}

html[data-theme="light"] .text-light:not(.btn):not(.badge),
html.theme-light .text-light:not(.btn):not(.badge) {
    color: #334155 !important;
}

.text-warning:not(.btn):not(.badge) {
    color: #d97706 !important;
}

.text-info:not(.btn):not(.badge) {
    color: #0284c7 !important;
}

.text-success:not(.btn):not(.badge) {
    color: #15803d !important;
}

.text-danger:not(.btn):not(.badge) {
    color: #dc2626 !important;
}

.text-primary:not(.btn):not(.badge) {
    color: #16a34a !important;
}

.text-muted,
small.text-muted {
    color: #64748b !important;
}

.text-secondary {
    color: #475569 !important;
}

.text-blue-black,
.text-drak {
    color: #0f172a !important;
}

/* 3. THANH ĐIỀU HƯỚNG NAVBAR (TRẮNG - XANH LÁ - VÀNG - ĐỎ) */
html[data-theme="light"] header.sticky-top,
html.theme-light header.sticky-top {
    background: transparent !important;
    padding: 10px 16px 2px !important;
}

html[data-theme="light"] .navbar,
html.theme-light .navbar {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-image: none !important;
    border-radius: 9999px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    max-width: 1240px;
    margin: 0 auto !important;
    padding: 6px 18px !important;
    transform: translateZ(0);
}

html[data-theme="light"] .navbar .nav-link,
html.theme-light .navbar .nav-link {
    color: #0f172a !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px;
    padding: 8px 14px !important;
    border-radius: 8px;
    transition: all 0.2s ease !important;
    text-shadow: none !important;
}

html[data-theme="light"] .navbar .nav-link:hover,
html[data-theme="light"] .navbar .nav-link.active,
html.theme-light .navbar .nav-link:hover,
html.theme-light .navbar .nav-link.active {
    color: #15803d !important;
    background: #f0fdf4 !important;
    text-shadow: none !important;
}

html[data-theme="light"] .navbar .dropdown-menu,
html.theme-light .navbar .dropdown-menu {
    border-radius: 12px !important;
    border: 1.5px solid #bbf7d0 !important;
    background: #ffffff !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12) !important;
    padding: 8px !important;
}

html[data-theme="light"] .navbar .dropdown-item,
html.theme-light .navbar .dropdown-item {
    color: #1e293b !important;
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 12px;
    transition: all 0.15s ease;
}

html[data-theme="light"] .navbar .dropdown-item:hover,
html.theme-light .navbar .dropdown-item:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
    padding-left: 16px;
}

html[data-theme="light"] .navbar-toggler,
html.theme-light .navbar-toggler {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #15803d !important;
    border-radius: 10px !important;
}
html[data-theme="light"] .navbar-toggler .fa-bars,
html.theme-light .navbar-toggler .fa-bars {
    color: #15803d !important;
}

/* Nút Đăng nhập dạng Viên nhộng Xanh dương (Chuẩn Ảnh 1) & Đăng ký */
.btn-login-orange {
    background: #007aff !important;
    background: linear-gradient(135deg, #007aff 0%, #0062e3 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border-radius: 9999px !important;
    padding: 7px 22px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.4) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    letter-spacing: 0.3px;
    line-height: 1.25 !important;
}
.btn-login-orange:hover {
    background: #0066d6 !important;
    color: #ffffff !important;
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.55) !important;
}

.btn-register-orange {
    background: transparent !important;
    color: var(--ios-text-secondary) !important;
    border: 1px solid var(--ios-border) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 9999px !important;
    padding: 6px 16px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.25 !important;
}
.btn-register-orange:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    border-color: #007aff !important;
    color: #007aff !important;
}
html[data-theme="dark"] .btn-register-orange {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .btn-register-orange:hover {
    background: rgba(56, 189, 248, 0.12) !important;
    border-color: #38bdf8 !important;
    color: #38bdf8 !important;
}
.btn-register-orange:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 60%, #b45309 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4) !important;
}

/* Huy hiệu số dư trên Navbar */
.balance-badge-orange {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #f59e0b !important;
    color: #0f172a !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15) !important;
}
.balance-badge-orange span.text-secondary {
    color: #78350f !important;
    font-weight: 600;
}
.balance-badge-orange b {
    color: #dc2626 !important;
}

/* Drawer Menu Mobile */
@media (max-width: 767.98px) {
    html[data-theme="light"] .navbar-collapse,
    html.theme-light .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 2000;
        padding: 14px 14px 24px 14px;
        max-height: 82vh;
        overflow-y: auto;
        border-radius: 0 0 20px 20px;
        background: #ffffff !important;
        border-top: 1px solid #dcfce7 !important;
        border-bottom: 3px solid #16a34a !important;
        box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
    }
}
html[data-theme="light"] .mobile-nav-usercard,
html.theme-light .mobile-nav-usercard {
    background: linear-gradient(135deg, #f0fdf4 0%, #fffbeb 100%) !important;
    border: 1.5px solid #86efac !important;
    border-radius: 16px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.08) !important;
}
html[data-theme="light"] .mobile-nav-usercard h6,
html.theme-light .mobile-nav-usercard h6 {
    color: #0f172a !important;
}
html[data-theme="light"] .mobile-balance-box,
html.theme-light .mobile-balance-box {
    background: #ffffff !important;
    border: 1px solid #fde68a !important;
    border-radius: 12px;
    padding: 8px 10px;
}
html[data-theme="light"] .mobile-balance-box b,
html[data-theme="light"] .mobile-balance-box .text-danger,
html.theme-light .mobile-balance-box b,
html.theme-light .mobile-balance-box .text-danger {
    color: #dc2626 !important;
}
html[data-theme="light"] .mobile-nav-link,
html.theme-light .mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 7px;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
html[data-theme="light"] .mobile-nav-link:hover,
html[data-theme="light"] .mobile-nav-link:active,
html.theme-light .mobile-nav-link:hover,
html.theme-light .mobile-nav-link:active {
    background: #f0fdf4 !important;
    color: #15803d !important;
    border-color: #86efac !important;
}
html[data-theme="light"] .mobile-nav-link i.nav-icon,
html.theme-light .mobile-nav-link i.nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    flex-shrink: 0;
    background: #f0fdf4 !important;
    color: #16a34a !important;
}
html[data-theme="light"] .mobile-nav-subitem,
html.theme-light .mobile-nav-subitem {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    color: #334155 !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
}
html[data-theme="light"] .mobile-nav-subitem:hover,
html.theme-light .mobile-nav-subitem:hover {
    background: #f0fdf4 !important;
    color: #15803d !important;
}
.mobile-btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 11px;
    background: #fef2f2 !important;
    border: 1.5px solid #fecaca !important;
    border-radius: 12px;
    color: #dc2626 !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    margin-top: 10px;
}
.mobile-btn-logout:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* 4. CARD, BOX, CONTAINER & BUTTONS CHUẨN SÁNG */
html[data-theme="light"] .card,
html[data-theme="light"] .Boxsource,
html[data-theme="light"] .classWithPad,
html[data-theme="light"] .service-history-compact,
html[data-theme="light"] .wrapper,
html.theme-light .card,
html.theme-light .Boxsource,
html.theme-light .classWithPad,
html.theme-light .service-history-compact,
html.theme-light .wrapper {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
    color: #1e293b !important;
}

html[data-theme="light"] .card-header,
html.theme-light .card-header {
    background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%) !important;
    border-bottom: 1px solid #dcfce7 !important;
    color: #0f172a !important;
    font-weight: 700;
}

.c-content-title-1,
.Boxsource-title,
.BoxProduct-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}

.c-content-title-1 .c-line-center {
    background: linear-gradient(90deg, #16a34a, #eab308, #dc2626) !important;
    height: 4px !important;
    width: 90px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Các nút chính trên toàn trang */
.btn-primary,
.button-blue {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
    border: 1px solid #15803d !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
    transition: all 0.2s ease !important;
}
.btn-primary:hover,
.button-blue:hover {
    background: linear-gradient(135deg, #15803d 0%, #047857 100%) !important;
    border-color: #166534 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.35) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%) !important;
    border-color: #d97706 !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}
.btn-warning:hover {
    background: linear-gradient(135deg, #d97706 0%, #ca8a04 100%) !important;
    color: #ffffff !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Thẻ sản phẩm ngoài trang chủ (BoxProduct) */
.BoxProduct .card {
    border: 1.5px solid #dcfce7 !important;
    border-radius: 14px !important;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.BoxProduct .card:hover {
    transform: translateY(-4px);
    border-color: #16a34a !important;
    box-shadow: 0 12px 28px rgba(22, 163, 74, 0.14) !important;
}

/* Tab Nạp Thẻ & Top Nạp ở Trang Chủ */
#topNapTabs .nav-link {
    color: #475569 !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 8px 12px !important;
    background: transparent !important;
}
#topNapTabs .nav-link.active {
    color: #15803d !important;
    border-bottom: 3px solid #16a34a !important;
    background: #f0fdf4 !important;
    border-radius: 8px 8px 0 0;
}
.rank-other {
    background-color: #16a34a !important;
    border: none !important;
    color: #ffffff !important;
}
.banner-topnap {
    background: linear-gradient(135deg, #f0fdf4 0%, #fffbeb 100%) !important;
    border: 1.5px solid #bbf7d0 !important;
}

/* Thanh 🔔 DỊCH VỤ ĐÃ THUÊ ở Trang Chủ */
.service-history-box .leaderboard-box {
    background: linear-gradient(110deg, #f0fdf4 0%, #fffbeb 50%, #fef2f2 100%) !important;
    border: 1.5px solid #86efac !important;
    color: #0f172a !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.08) !important;
}
.service-history-box .history-label {
    color: #dc2626 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}
.service-history-box .history-entry {
    color: #1e293b !important;
    font-weight: 500;
}
.service-history-box .history-entry strong {
    color: #15803d !important;
    font-weight: 800;
}
.service-history-box .history-entry b {
    color: #b45309 !important;
    font-weight: 700;
}
.service-history-box .history-entry .history-quantity {
    color: #dc2626 !important;
    font-weight: 700;
}
.service-history-box .history-entry small {
    color: #64748b !important;
}

/* 5. FORM, INPUT & BẢNG BIỂU (TABLES) TƯƠNG PHẢN CAO */
html[data-theme="light"] .form-control,
html[data-theme="light"] .form-select,
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="number"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html.theme-light .form-control,
html.theme-light .form-select,
html.theme-light input[type="text"],
html.theme-light input[type="password"],
html.theme-light input[type="number"],
html.theme-light input[type="email"],
html.theme-light select,
html.theme-light textarea {
    background-color: #ffffff !important;
    border: 1.5px solid #94a3b8 !important;
    color: #0f172a !important;
    border-radius: 9px;
    color-scheme: light !important;
}
html[data-theme="light"] .form-control:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] input:focus,
html[data-theme="light"] select:focus,
html[data-theme="light"] textarea:focus,
html.theme-light .form-control:focus,
html.theme-light .form-select:focus,
html.theme-light input:focus,
html.theme-light select:focus,
html.theme-light textarea:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.16) !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}
html[data-theme="light"] .form-control::placeholder,
html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder,
html.theme-light .form-control::placeholder,
html.theme-light input::placeholder,
html.theme-light textarea::placeholder {
    color: #94a3b8 !important;
}
html[data-theme="light"] .form-label,
html[data-theme="light"] label,
html.theme-light .form-label,
html.theme-light label {
    color: #1e293b !important;
    font-weight: 600;
}

/* Bảng biểu (Tables) trên toàn hệ thống */
html[data-theme="light"] .table,
html.theme-light .table {
    color: #0f172a !important;
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] .table thead th,
html[data-theme="light"] .table thead.table-dark th,
html.theme-light .table thead th,
html.theme-light .table thead.table-dark th {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border-color: #166534 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    font-size: 13px;
    padding: 11px 10px !important;
}
html[data-theme="light"] .table tbody td,
html[data-theme="light"] .table tbody th,
html.theme-light .table tbody td,
html.theme-light .table tbody th {
    border-bottom: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    vertical-align: middle;
}
html[data-theme="light"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html.theme-light .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #f8fafc !important;
    background-color: #f8fafc !important;
    color: #0f172a !important;
}
html[data-theme="light"] .table tbody tr:hover > *,
html.theme-light .table tbody tr:hover > * {
    background-color: #f0fdf4 !important;
    color: #0f172a !important;
}
/* Khử toàn bộ inline style màu sáng mờ trong các bảng lịch sử */
.table tbody td b[style*="color: #f1f5f9"],
.table tbody td strong[style*="color: #f1f5f9"],
.table tbody td span[style*="color: #f1f5f9"] {
    color: #0f172a !important;
}
.table tbody td span[style*="color: #cbd5e1"],
.table tbody td b[style*="color: #cbd5e1"],
.table tbody td[style*="color: #cbd5e1"] {
    color: #334155 !important;
    font-weight: 600;
}
.table tbody td small[style*="color: #94a3b8"] {
    color: #475569 !important;
}
.table tbody th[style*="color: #ffaa00"],
.table tbody td strong[style*="color: #ffaa00"],
.table tbody td b[style*="color: #ff8c00"],
.table tbody td strong[style*="color: #ff8c00"] {
    color: #d97706 !important;
}
.table tbody td b[style*="color: #38bdf8"],
.table tbody td span[style*="color: #38bdf8"] {
    color: #0284c7 !important;
}
.table tbody td b[style*="color: #ff6b6b"] {
    color: #dc2626 !important;
}

/* 6. SIDEBAR MENU TÀI KHOẢN & PROFILE (MENU.PHP, AVTBIA.PHP) */
.profile-user-name,
.profile-user-name span.profile-name-text {
    color: var(--ios-text-primary, #0f172a) !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .profile-user-name,
html[data-theme="dark"] .profile-user-name span.profile-name-text,
html.theme-dark .profile-user-name,
html.theme-dark .profile-user-name span.profile-name-text {
    color: #f8fafc !important;
}
.profile-user-id {
    color: #d97706 !important;
}
.menu_user {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    margin-bottom: 12px;
}
.menu_user h3,
.menu_user i {
    color: #ffffff !important;
}
.c-border-green-600 {
    border-color: #16a34a !important;
}
.dv-title h3 {
    color: #15803d !important;
    border-left: 4px solid #16a34a !important;
    padding-left: 12px !important;
    font-weight: 800 !important;
}
html[data-theme="light"] ul.c-menu,
html.theme-light ul.c-menu {
    list-style: none;
    padding: 8px;
    margin: 0 0 18px 0;
    background: #f8fafc;
    border: 1px solid #dcfce7;
    border-radius: 12px;
}
ul.c-menu li {
    margin-bottom: 4px;
}
ul.c-menu li:last-child {
    margin-bottom: 0;
}
html[data-theme="light"] ul.c-menu li a,
html.theme-light ul.c-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 9px;
    color: #1e293b !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.18s ease;
}
ul.c-menu li a i {
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: #16a34a;
}
ul.c-menu li a:hover {
    background: #dcfce7 !important;
    color: #15803d !important;
    transform: translateX(3px);
}
ul.c-menu li a.active {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
ul.c-menu li a.active i {
    color: #fef08a !important;
}

/* ==========================================================================
   7. GIAO DIỆN MUA CLONE (CLONE.PHP) - APPLE / MUACERT SAAS DUAL THEME
   ========================================================================== */
.clone-main-card {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-shadow-sm) !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}
.clone-section-header {
    background: var(--ios-card-inner) !important;
    border-bottom: 1px solid var(--ios-border) !important;
    padding: 14px 18px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    color: var(--ios-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}
.clone-section-header i {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: rgba(34, 197, 94, 0.12) !important;
    color: var(--brand-green) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}
html[data-theme="dark"] .clone-section-header i {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #34d399 !important;
}
#clone-package-list::-webkit-scrollbar {
    width: 5px !important;
}
#clone-package-list::-webkit-scrollbar-track {
    background: var(--ios-segment-bg) !important;
    border-radius: 10px !important;
}
#clone-package-list::-webkit-scrollbar-thumb {
    background: var(--brand-green) !important;
    border-radius: 10px !important;
}

/* Package Card Item */
.clone-pkg-item {
    background: var(--ios-card) !important;
    border: 1.5px solid var(--ios-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: var(--ios-shadow-sm) !important;
}
.clone-pkg-item:hover {
    border-color: var(--brand-green) !important;
    background: var(--brand-green-soft) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12) !important;
}
.clone-pkg-item.selected,
.clone-pkg-item.selected:hover,
.clone-pkg-item.selected:active,
.clone-pkg-item.selected:focus {
    border: 2px solid var(--brand-green) !important;
    background: var(--brand-green-soft) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 16px rgba(22, 163, 74, 0.14) !important;
    transform: translateY(-2px) !important;
}
html[data-theme="light"] .clone-pkg-item.selected,
html[data-theme="light"] .clone-pkg-item.selected:hover {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
}
html[data-theme="dark"] .clone-pkg-item.selected,
html[data-theme="dark"] .clone-pkg-item.selected:hover {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 4px 16px rgba(16, 185, 129, 0.18) !important;
}
.clone-pkg-name {
    color: var(--ios-text-primary) !important;
    font-weight: 800 !important;
    font-size: 15.5px !important;
}
.clone-pkg-desc {
    color: var(--ios-text-secondary) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}
.clone-pkg-price {
    font-weight: 800 !important;
    font-size: 16px !important;
}
html[data-theme="light"] .clone-pkg-price {
    color: #dc2626 !important;
}
html[data-theme="dark"] .clone-pkg-price {
    color: #fbbf24 !important;
}
.clone-pkg-price span {
    color: var(--ios-text-muted) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
.clone-pkg-badge.in-stock {
    background: rgba(34, 197, 94, 0.12) !important;
    color: var(--brand-green) !important;
    border: 1px solid var(--border-green) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
}
.clone-pkg-badge.out-stock {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--brand-red) !important;
    border: 1px solid var(--border-red) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
}
.clone-meta-grid {
    border-top: 1px dashed var(--ios-border) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}
.clone-meta-tag {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}
.clone-meta-tag strong,
.clone-meta-tag b {
    font-weight: 700 !important;
}
.clone-meta-tag.tag-off {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    color: var(--brand-yellow-dark) !important;
}
.clone-meta-tag.tag-created {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    color: #2563eb !important;
}
.clone-meta-tag.tag-warranty {
    background: rgba(147, 51, 234, 0.1) !important;
    border-color: rgba(147, 51, 234, 0.3) !important;
    color: #7c3aed !important;
}
.clone-meta-tag.tag-ban-yes,
.clone-meta-tag.tag-pass-yes {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: var(--brand-green) !important;
}
.clone-meta-tag.tag-ban-no,
.clone-meta-tag.tag-pass-no {
    background: var(--ios-card-inner) !important;
    border-color: var(--ios-border) !important;
    color: var(--ios-text-muted) !important;
}

/* Right Column: Checkout Box */
.checkout-summary-box {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}
.checkout-sub-label {
    color: var(--ios-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 4px !important;
}
.checkout-pkg-title {
    color: var(--brand-green) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 4px !important;
    text-shadow: none !important;
}
html[data-theme="dark"] .checkout-pkg-title {
    color: #34d399 !important;
}
.checkout-stock-text {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ios-text-secondary) !important;
}

/* Stepper & Inputs */
.qty-stepper-btn {
    width: 44px !important;
    border: 1.5px solid var(--ios-border) !important;
    background: var(--ios-card-inner) !important;
    color: var(--ios-text-primary) !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}
.qty-stepper-btn:hover {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border-color: var(--brand-green) !important;
}
.clone-qty-input {
    font-size: 16px !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1.5px solid var(--ios-border) !important;
    border-bottom: 1.5px solid var(--ios-border) !important;
    background: var(--ios-input-bg) !important;
    color: var(--ios-text-primary) !important;
    padding: 8px 12px !important;
}
.clone-qty-input:focus {
    border-color: var(--brand-green) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .qty-stepper-btn {
    background: #1e293b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .clone-qty-input {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f8fafc !important;
}

/* Quick Qty Buttons */
.quick-qty-btn {
    border: 1px solid var(--ios-border) !important;
    background: var(--ios-card) !important;
    color: var(--ios-text-primary) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 7px 0 !important;
    border-radius: 8px !important;
    transition: all 0.18s ease !important;
    text-align: center !important;
}
.quick-qty-btn:hover {
    background: var(--brand-green-soft) !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
}
.quick-qty-btn.active {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border-color: #15803d !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3) !important;
}
html[data-theme="dark"] .quick-qty-btn {
    background: #19233c !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .quick-qty-btn:hover {
    background: #1e2d4d !important;
    border-color: #10b981 !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .quick-qty-btn.active {
    background: linear-gradient(135deg, #16a34a, #10b981) !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35) !important;
}

/* Total Card */
.checkout-total-card {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
html[data-theme="light"] .checkout-total-card {
    background: #fffbeb !important;
    border: 1.5px dashed #f59e0b !important;
}
html[data-theme="dark"] .checkout-total-card {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1.5px dashed rgba(245, 158, 11, 0.35) !important;
}
.checkout-total-title {
    color: var(--ios-text-primary) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}
.checkout-total-price {
    font-size: 22px !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .checkout-total-price {
    color: #dc2626 !important;
}
html[data-theme="dark"] .checkout-total-price {
    color: #fbbf24 !important;
}

/* Buy Action Button */
.btn-buy-action {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 13px 20px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.btn-buy-action:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45) !important;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
}


/* ==========================================================================
   8. GIAO DIỆN CHUNG SỨC LIÊN QUÂN (CHUNGSUC.PHP) - APPLE / MUACERT SAAS
   ========================================================================== */
.cs-hero {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-shadow-sm) !important;
    padding: 20px !important;
    margin-bottom: 24px !important;
}
.cs-hero h2 {
    color: var(--ios-text-primary) !important;
    font-weight: 800 !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
    text-shadow: none !important;
}
.cs-card {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 18px !important;
    box-shadow: var(--ios-shadow-sm) !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}
.cs-card-header {
    background: var(--ios-card-inner) !important;
    border-bottom: 1px solid var(--ios-border) !important;
    padding: 14px 18px !important;
    color: var(--ios-text-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif !important;
}
.cs-card-header .cs-header-title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--ios-text-primary) !important;
    letter-spacing: -0.2px !important;
}
.cs-card-header i.fa-cart-plus,
.cs-card-header i.fa-history {
    width: 32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    background: rgba(34, 197, 94, 0.12) !important;
    color: var(--brand-green) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin-right: 8px !important;
}
html[data-theme="dark"] .cs-card-header i.fa-cart-plus,
html[data-theme="dark"] .cs-card-header i.fa-history {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #34d399 !important;
}
.cs-card-header .badge.bg-success {
    background: rgba(34, 197, 94, 0.12) !important;
    color: var(--brand-green) !important;
    border: 1px solid var(--border-green) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
}
.btn-refresh-orders {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    border-radius: 8px !important;
    padding: 4px 10px !important;
    transition: all 0.15s ease !important;
}
.btn-refresh-orders:hover {
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
    background: var(--brand-green-soft) !important;
}

/* Lưới ô mốc vé Chung Sức */
.cs-moc-card {
    background: var(--ios-card) !important;
    border: 1.5px solid var(--ios-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--ios-shadow-sm) !important;
    padding: 10px 6px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 94px !important;
}
.cs-moc-card:hover {
    border-color: var(--brand-green) !important;
    background: var(--brand-green-soft) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.14) !important;
}
.cs-moc-card.active,
.cs-moc-card:has(input[type="radio"]:checked) {
    border: 2px solid var(--brand-green) !important;
    background: var(--brand-green-soft) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2), 0 4px 14px rgba(22, 163, 74, 0.15) !important;
    transform: translateY(-2px) !important;
}
html[data-theme="light"] .cs-moc-card.active,
html[data-theme="light"] .cs-moc-card:has(input[type="radio"]:checked) {
    background: #f0fdf4 !important;
    border-color: #16a34a !important;
}
html[data-theme="dark"] .cs-moc-card.active,
html[data-theme="dark"] .cs-moc-card:has(input[type="radio"]:checked) {
    background: rgba(16, 185, 129, 0.14) !important;
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25), 0 4px 14px rgba(16, 185, 129, 0.2) !important;
}
.cs-card-target-num {
    color: var(--ios-text-primary) !important;
    font-size: 17px !important;
    font-weight: 900 !important;
}
.cs-card-target-unit {
    color: var(--brand-yellow) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}
.cs-card-label {
    color: var(--ios-text-muted) !important;
    font-size: 11px !important;
}
.cs-card-price-main {
    color: var(--brand-green) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
}
.cs-moc-card.active .cs-card-price-main,
.cs-moc-card:has(input[type="radio"]:checked) .cs-card-price-main {
    color: var(--brand-red) !important;
}
.cs-card-price-old {
    color: var(--ios-text-muted) !important;
    font-size: 11px !important;
    text-decoration: line-through !important;
}

/* Tabs chọn nguồn & nhập mã mời Chung Sức (Segmented Control Pill Bar) */
.cs-tab-pills-bar,
.cs-tab-pills-wrap {
    background: var(--ios-segment-bg) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 12px !important;
    padding: 4px !important;
    display: flex !important;
    gap: 4px !important;
}
.cs-tab-pill {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    color: var(--ios-text-secondary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    border-radius: 9px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.cs-tab-pill:hover {
    color: var(--brand-green) !important;
    background: rgba(34, 197, 94, 0.08) !important;
}
.cs-tab-pill.active {
    background: var(--ios-segment-active) !important;
    color: var(--ios-text-primary) !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--border-green) !important;
}
html[data-theme="light"] .cs-tab-pill.active {
    color: #15803d !important;
    background: #ffffff !important;
}
html[data-theme="dark"] .cs-tab-pill.active {
    color: #34d399 !important;
    background: #24314f !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}
.cs-tab-pill.active i {
    color: var(--brand-green) !important;
}

/* Inputs & Textareas moved to dedicated dual-theme block */
.cs-txt-toolbar {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 8px 12px !important;
}
.cs-txt-btn {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-secondary) !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 4px 10px !important;
    transition: all 0.15s ease !important;
}
.cs-txt-btn:hover {
    background: var(--brand-green-soft) !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
}
#paneCustomAccounts {
    background: var(--ios-card-inner) !important;
    border: 1.5px solid var(--ios-border) !important;
    border-radius: 12px !important;
    padding: 12px !important;
}

/* Hộp Tóm tắt đơn hàng Chung Sức */
.cs-summary-box {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 14px !important;
    padding: 16px !important;
    box-shadow: none !important;
}
.cs-summary-box .text-muted {
    color: var(--ios-text-muted) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.cs-summary-val {
    color: var(--brand-green) !important;
    font-weight: 800 !important;
}
.cs-summary-divider {
    border: 0 !important;
    border-top: 1px dashed var(--ios-border) !important;
    margin: 12px 0 !important;
    opacity: 0.8 !important;
}
.cs-summary-total-label {
    color: var(--ios-text-primary) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}
.cs-summary-total-price {
    font-size: 20px !important;
    font-weight: 900 !important;
}
html[data-theme="light"] .cs-summary-total-price {
    color: #dc2626 !important;
}
html[data-theme="dark"] .cs-summary-total-price {
    color: #fbbf24 !important;
}

/* Nút đặt đơn Chung Sức */
.btn-cs-submit {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 13px 20px !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.btn-cs-submit:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    box-shadow: 0 6px 22px rgba(22, 163, 74, 0.45) !important;
    transform: translateY(-2px) !important;
}

/* Cột phải: Danh sách đơn hàng Chung Sức */
.cs-orders-scroll::-webkit-scrollbar {
    width: 5px !important;
}
.cs-orders-scroll::-webkit-scrollbar-track {
    background: var(--ios-segment-bg) !important;
    border-radius: 10px !important;
}
.cs-orders-scroll::-webkit-scrollbar-thumb {
    background: var(--brand-green) !important;
    border-radius: 10px !important;
}
/* CHUNG SỨC: TIẾN ĐỘ ĐƠN HÀNG TRÊN NỀN SÁNG (LIGHT THEME) */
html[data-theme="light"] .cs-pixel-card,
html.theme-light .cs-pixel-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    padding: 11px 13px !important;
    margin-bottom: 10px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    color: #0f172a !important;
}
html[data-theme="light"] .cs-pixel-card:hover,
html.theme-light .cs-pixel-card:hover {
    border-color: #22c55e !important;
    background: #f8fafc !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08) !important;
    transform: translateY(-2px) !important;
}
/* ĐỔI KIỂU KHI BẤM VÀO ĐƠN HÀNG: SÁNG RÕ, KHÔNG BỊ BIẾN THÀNH MÀU ĐEN */
html[data-theme="light"] .cs-pixel-card.selected-order,
html.theme-light .cs-pixel-card.selected-order {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%) !important;
    border: 2px solid #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.22), 0 8px 24px rgba(22, 163, 74, 0.12) !important;
    transform: translateY(-2px) !important;
}
html[data-theme="light"] .cs-pixel-card.selected-order .cs-pixel-code,
html.theme-light .cs-pixel-card.selected-order .cs-pixel-code {
    color: #15803d !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}
html[data-theme="light"] .cs-pixel-card.selected-order .cs-pixel-stat-box,
html.theme-light .cs-pixel-card.selected-order .cs-pixel-stat-box {
    background: #ffffff !important;
    border: 1px solid #bbf7d0 !important;
    box-shadow: 0 1px 3px rgba(22, 163, 74, 0.08) !important;
}
html[data-theme="light"] .cs-pixel-card.selected-order .cs-pixel-btn,
html.theme-light .cs-pixel-card.selected-order .cs-pixel-btn {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3) !important;
}
html[data-theme="light"] .cs-pixel-code,
html.theme-light .cs-pixel-code {
    color: var(--ios-text-primary) !important;
    font-weight: 800 !important;
    font-family: monospace !important;
}
html[data-theme="light"] .cs-pixel-date,
html.theme-light .cs-pixel-date {
    color: var(--ios-text-muted) !important;
    font-size: 11.5px !important;
}
html[data-theme="light"] .cs-pixel-stat-box,
html.theme-light .cs-pixel-stat-box {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
}
html[data-theme="light"] .cs-pixel-stat-lbl,
html.theme-light .cs-pixel-stat-lbl {
    color: var(--ios-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
}
html[data-theme="light"] .cs-pixel-bar-wrap,
html.theme-light .cs-pixel-bar-wrap {
    background: var(--ios-segment-bg) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 10px !important;
    height: 18px !important;
    overflow: hidden !important;
}
html[data-theme="light"] .cs-pixel-card-footer,
html.theme-light .cs-pixel-card-footer {
    border-top: 1px dashed var(--ios-border) !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}
html[data-theme="light"] .cs-copy-code-pill,
html[data-theme="light"] .cs-code-copy-group,
html.theme-light .cs-copy-code-pill,
html.theme-light .cs-code-copy-group {
    background: var(--ios-card-inner) !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-primary) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}
html[data-theme="light"] .cs-copy-code-pill code,
html[data-theme="light"] .cs-selectable-code,
html.theme-light .cs-copy-code-pill code,
html.theme-light .cs-selectable-code {
    color: var(--ios-text-primary) !important;
    font-weight: 700 !important;
}
html[data-theme="light"] .cs-copy-code-btn,
html.theme-light .cs-copy-code-btn {
    color: var(--ios-text-muted) !important;
}
html[data-theme="light"] .cs-copy-code-btn:hover,
html.theme-light .cs-copy-code-btn:hover {
    color: var(--brand-green) !important;
}
html[data-theme="light"] .cs-pixel-btn,
html.theme-light .cs-pixel-btn {
    background: var(--brand-green-soft) !important;
    border: 1px solid var(--border-green) !important;
    color: var(--brand-green-dark) !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    transition: all 0.15s ease !important;
}
.cs-pixel-btn:hover {
    background: var(--brand-green) !important;
    color: #ffffff !important;
    border-color: var(--brand-green) !important;
}
html[data-theme="dark"] .cs-pixel-btn {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #34d399 !important;
}
html[data-theme="dark"] .cs-pixel-btn:hover {
    background: #16a34a !important;
    color: #ffffff !important;
}

/* 9. MODALS & POPUPS SÁNG RÕ */
/* HUY HIỆU TRẠNG THÁI & THỜI GIAN: CHỮ ĐẬM RÕ NÉT, HẾT BỊ MỜ */
html[data-theme="light"] .cs-pixel-tag,
html.theme-light .cs-pixel-tag {
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2.5px 7px !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html[data-theme="light"] .cs-job-badge-done,
html[data-theme="light"] .cs-pixel-tag-done,
html.theme-light .cs-job-badge-done,
html.theme-light .cs-pixel-tag-done {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .cs-pixel-tag-time,
html.theme-light .cs-pixel-tag-time {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .cs-job-badge-running,
html[data-theme="light"] .cs-pixel-tag-run,
html.theme-light .cs-job-badge-running,
html.theme-light .cs-pixel-tag-run {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .cs-job-badge-pending,
html.theme-light .cs-job-badge-pending {
    background: #f3e8ff !important;
    color: #6b21a8 !important;
    border: 1px solid #d8b4fe !important;
    font-weight: 800 !important;
}
html[data-theme="light"] .cs-job-badge-failed,
html[data-theme="light"] .cs-job-badge-refund,
html[data-theme="light"] .cs-pixel-tag-refund,
html.theme-light .cs-job-badge-failed,
html.theme-light .cs-job-badge-refund,
html.theme-light .cs-pixel-tag-refund {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border: 1px solid #fca5a5 !important;
    font-weight: 800 !important;
}

/* ĐIỀU CHỈNH MÀU MODAL CHI TIẾT ĐƠN HÀNG DỊU MẮT, KHÔNG BỊ SÁNG CHÓI LÓA */
html[data-theme="light"] #modalOrderDetail .modal-content,
html[data-theme="light"] .cs-order-modal,
html.theme-light #modalOrderDetail .modal-content,
html.theme-light .cs-order-modal {
    background: #f8fafc !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
}
html[data-theme="light"] #modalOrderDetail .modal-header,
html[data-theme="light"] .cs-order-modal-header,
html.theme-light #modalOrderDetail .modal-header,
html.theme-light .cs-order-modal-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 14px 18px !important;
    color: #0f172a !important;
}
html[data-theme="light"] #modalOrderDetail .modal-title,
html.theme-light #modalOrderDetail .modal-title {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    text-shadow: none !important;
}
html[data-theme="light"] #modalOrderDetail .cs-modal-subtitle,
html[data-theme="light"] #modalOrderDetail .modal-header small,
html.theme-light #modalOrderDetail .cs-modal-subtitle,
html.theme-light #modalOrderDetail .modal-header small {
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}
html[data-theme="light"] #modalOrderDetail .modal-footer,
html[data-theme="light"] .cs-order-modal-footer,
html.theme-light #modalOrderDetail .modal-footer,
html.theme-light .cs-order-modal-footer {
    background: #f1f5f9 !important;
    border-top: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #modalOrderDetail .btn-secondary,
html.theme-light #modalOrderDetail .btn-secondary {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] #modalOrderDetail .cs-pixel-hud-tile,
html.theme-light #modalOrderDetail .cs-pixel-hud-tile {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #modalOrderDetail .cs-pixel-hud-lbl,
html.theme-light #modalOrderDetail .cs-pixel-hud-lbl {
    color: #475569 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}
html[data-theme="light"] #modalOrderDetail .cs-pixel-hud-val,
html.theme-light #modalOrderDetail .cs-pixel-hud-val {
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalOrderDetail .cs-modal-progress-card,
html.theme-light #modalOrderDetail .cs-modal-progress-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #modalOrderDetail .cs-modal-progress-card span.fw-bold,
html.theme-light #modalOrderDetail .cs-modal-progress-card span.fw-bold {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 13.5px !important;
}
html[data-theme="light"] #modalOrderDetail .cs-pixel-hud-progress-wrap,
html.theme-light #modalOrderDetail .cs-pixel-hud-progress-wrap {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    height: 14px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] #modalOrderDetail .cs-progress-milestones,
html.theme-light #modalOrderDetail .cs-progress-milestones {
    color: #334155 !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
}
html[data-theme="light"] #modalOrderDetail .cs-single-code-box,
html.theme-light #modalOrderDetail .cs-single-code-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #modalOrderDetail .cs-single-code-title,
html.theme-light #modalOrderDetail .cs-single-code-title {
    color: #475569 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

html[data-theme="light"] .modal-content,
html[data-theme="light"] .cs-pixel-modal,
html[data-theme="light"] #modalConfirmOrder .modal-content,
html[data-theme="light"] #modalPaymentShortage .modal-content,
html[data-theme="light"] #modalViewAccounts .modal-content,
html[data-theme="light"] #modalPaymentQR .modal-content,
html[data-theme="light"] #global-modal .modal-content,
html.theme-light .modal-content,
html.theme-light .cs-pixel-modal,
html.theme-light #modalConfirmOrder .modal-content,
html.theme-light #modalPaymentShortage .modal-content,
html.theme-light #modalViewAccounts .modal-content,
html.theme-light #modalPaymentQR .modal-content,
html.theme-light #global-modal .modal-content {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #16a34a !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 60px rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] .modal-header,
html[data-theme="light"] .cs-pixel-modal-header,
html[data-theme="light"] #modalPaymentShortage .modal-header,
html[data-theme="light"] #modalPaymentQR .modal-header,
html[data-theme="light"] #modalViewAccounts .modal-header,
html[data-theme="light"] #global-modal .modal-header,
html.theme-light .modal-header,
html.theme-light .cs-pixel-modal-header,
html.theme-light #modalPaymentShortage .modal-header,
html.theme-light #modalPaymentQR .modal-header,
html.theme-light #modalViewAccounts .modal-header,
html.theme-light #global-modal .modal-header {
    background: linear-gradient(90deg, #f0fdf4 0%, #fffbeb 100%) !important;
    border-bottom: 1.5px solid #bbf7d0 !important;
    color: #0f172a !important;
}
.modal-title,
#global-modalLabel {
    color: #15803d !important;
    text-shadow: none !important;
}
html[data-theme="light"] #global-modal .modal-body,
html.theme-light #global-modal .modal-body {
    background: #ffffff !important;
    color: #1e293b !important;
}
html[data-theme="light"] #global-modal .modal-footer,
html[data-theme="light"] .modal-footer,
html[data-theme="light"] .cs-pixel-modal-footer,
html.theme-light #global-modal .modal-footer,
html.theme-light .modal-footer,
html.theme-light .cs-pixel-modal-footer {
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
}
.btn-close,
.btn-close-white,
#global-modal .modal-header .btn-close {
    filter: none !important;
    opacity: 0.75;
}
.cs-pixel-hud-tile,
.cs-code-progress-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    color: #0f172a !important;
}
.cs-pixel-hud-val {
    color: #0f172a !important;
}
.qr-amount-box {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    border: 1.5px solid #f59e0b !important;
    box-shadow: none !important;
}
.qr-amount-val {
    color: #dc2626 !important;
    text-shadow: none !important;
    animation: none !important;
}
.qr-bank-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
}
.qr-radar-box {
    background: #f0fdf4 !important;
    border: 1.5px solid #86efac !important;
    color: #15803d !important;
    box-shadow: none !important;
}

/* SweetAlert */
html[data-theme="light"] .swal-modal,
html.theme-light .swal-modal {
    background-color: #ffffff !important;
    border: 2px solid #86efac !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}
html[data-theme="light"] .swal-title,
html.theme-light .swal-title {
    color: #0f172a !important;
}
html[data-theme="light"] .swal-text,
html.theme-light .swal-text {
    color: #334155 !important;
}

/* 10. HỘP CHĂM SÓC KHÁCH HÀNG (CSKH) & FOOTER */
#tx-chat-trigger {
    background: linear-gradient(135deg, #16a34a 0%, #10b981 100%) !important;
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.4) !important;
    border: 2px solid #ffffff !important;
}
#tx-chat-trigger.active {
    background: #dc2626 !important;
}
html[data-theme="light"] #tx-chat-tooltip,
html.theme-light #tx-chat-tooltip {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 2px solid #16a34a !important;
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.2) !important;
}
html[data-theme="light"] #tx-chat-tooltip span,
html.theme-light #tx-chat-tooltip span {
    color: #15803d !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}
html[data-theme="light"] #tx-chat-tooltip::after,
html.theme-light #tx-chat-tooltip::after {
    border-color: transparent transparent transparent #ffffff !important;
}
html[data-theme="light"] #tx-chat-tooltip::before,
html.theme-light #tx-chat-tooltip::before {
    border-color: transparent transparent transparent #16a34a !important;
}
#tx-chat-tooltip-close {
    color: #dc2626 !important;
}
html[data-theme="light"] #tx-chat-window,
html.theme-light #tx-chat-window {
    background: #ffffff !important;
    border: 1.5px solid #86efac !important;
    box-shadow: 0 14px 45px rgba(15, 23, 42, 0.16) !important;
}
#tx-chat-header {
    background: linear-gradient(135deg, #15803d 0%, #16a34a 100%) !important;
    border-bottom: 2px solid #eab308 !important;
}
.tx-chat-header-avatar,
.tx-chat-msg-avatar {
    background: #eab308 !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
}
.tx-chat-msg.client {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
    color: #ffffff !important;
}
#tx-chat-send {
    background: linear-gradient(135deg, #16a34a 0%, #059669 100%) !important;
}

/* ==========================================================================
   MUACERT.COM / APPLE IOS DESIGN SYSTEM STYLES (INDEX & CORE PAGES)
   ========================================================================== */

/* 1. CONTAINER & LAYOUT */
.mc-home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 12px 36px;
}

/* 2. HERO SECTION */
.mc-hero-card {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 20px !important;
    padding: 20px;
    box-shadow: var(--ios-shadow-sm) !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s ease;
}

/* Segmented Control Pill Bar */
.mc-segmented-control {
    display: flex;
    background: var(--ios-segment-bg);
    border: 1px solid var(--ios-border);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.mc-segmented-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--ios-text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.mc-segmented-btn.active {
    background: var(--ios-segment-active);
    color: var(--ios-text-primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .mc-segmented-btn.active {
    color: #0f172a;
}
html[data-theme="dark"] .mc-segmented-btn.active {
    color: #ffffff;
    background: #24314f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Banner Card */
.mc-banner-card {
    background: var(--ios-card) !important;
    border: 1px solid var(--ios-border) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: var(--ios-shadow-sm) !important;
    height: 100%;
    min-height: 280px;
    position: relative;
}
.mc-banner-card .carousel,
.mc-banner-card .carousel-inner,
.mc-banner-card .carousel-item {
    height: 100%;
}
.mc-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 19px;
}

/* Form Styles inside Hero */
.mc-form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ios-text-secondary);
    margin-bottom: 5px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.mc-input {
    background-color: var(--ios-input-bg) !important;
    border: 1px solid var(--ios-border) !important;
    color: var(--ios-text-primary) !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 13.5px !important;
    transition: all 0.2s ease;
}
.mc-input:focus {
    border-color: var(--brand-green) !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18) !important;
}
.mc-card-benefit {
    background: var(--ios-card-inner);
    border: 1px dashed var(--ios-border);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--ios-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* 3. LIVE TRANSACTION TICKER PILL (APPLE CONVEYOR BELT / BĂNG CHUYỀN) */
.mc-ticker-pill {
    background: var(--ios-card);
    border: 1px solid var(--ios-border);
    border-radius: 50px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: var(--ios-shadow-sm);
    transition: all 0.25s ease;
    overflow: hidden;
    position: relative;
    user-select: none;
}
.mc-ticker-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.12);
    color: var(--brand-green);
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    letter-spacing: 0.4px;
    position: relative;
    z-index: 2;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}
.mc-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-green);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: mc-pulse 1.8s infinite;
}
@keyframes mc-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.mc-ticker-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 14px, black calc(100% - 14px), transparent 100%);
}

.mc-ticker-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    will-change: transform;
    animation: mc-conveyor-scroll 35s linear infinite;
}

.mc-ticker-content:hover .mc-ticker-track,
.mc-ticker-content:active .mc-ticker-track,
.mc-ticker-content.is-paused .mc-ticker-track {
    animation-play-state: paused;
}

.mc-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    font-size: 13.5px;
    color: var(--ios-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}
.mc-ticker-item b {
    color: var(--ios-text-primary);
    font-weight: 700;
}
.mc-ticker-item .mc-ticker-service {
    color: var(--brand-green);
    font-weight: 700;
}
.mc-ticker-item .mc-ticker-qty {
    color: #ef4444;
    font-weight: 700;
    margin-left: 2px;
}
.mc-ticker-item .mc-ticker-time {
    color: var(--ios-text-muted);
    font-size: 12px;
}
.mc-ticker-item .mc-ticker-bullet {
    color: var(--brand-green);
    font-weight: 900;
    opacity: 0.8;
}

@keyframes mc-conveyor-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Fallback legacy entry support */
.mc-ticker-entry {
    font-size: 13.5px;
    color: var(--ios-text-secondary);
    white-space: nowrap;
}
.mc-ticker-entry b {
    color: var(--ios-text-primary);
    font-weight: 700;
}
.mc-ticker-entry .mc-ticker-service {
    color: var(--brand-green);
    font-weight: 700;
}
.mc-ticker-entry .mc-ticker-time {
    color: var(--ios-text-muted);
    font-size: 12px;
}

/* 4. SECTION HEADER */
.mc-section-header {
    margin-bottom: 24px;
}
.mc-badge-pill {
    display: inline-block;
    background: rgba(34, 197, 94, 0.12);
    color: var(--brand-green);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.mc-section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ios-text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
.mc-section-subtitle {
    font-size: 14px;
    color: var(--ios-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* 5. SERVICE GRID & CARDS (COMPACT & BALANCED SAAS STYLE) */
.mc-service-col {
    max-width: 360px;
    width: 100%;
}
.mc-service-card {
    background: var(--ios-card);
    border: 1px solid var(--ios-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--ios-shadow-sm);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    position: relative;
}
.mc-service-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-green);
    box-shadow: var(--ios-shadow-md);
}
.mc-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    min-height: 205px;
    height: auto;
    overflow: hidden;
    background: #090d16;
}
.mc-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.35s ease;
}
.mc-service-card:hover .mc-card-img {
    transform: scale(1.04);
}
.mc-media-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
    text-transform: uppercase;
}
.mc-media-badge.hot {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
}
.mc-media-badge.active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
}
.mc-media-badge.maintenance {
    background: #475569;
    color: #ffffff;
}

.mc-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mc-card-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-green);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}
.mc-card-title {
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 6px;
    line-height: 1.3;
}
.mc-card-title a {
    color: var(--ios-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
.mc-card-title a:hover {
    color: var(--brand-green);
}
.mc-card-desc {
    font-size: 12.5px;
    color: var(--ios-text-secondary);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
}

/* Stats inside card */
.mc-card-stats {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ios-card-inner);
    border: 1px solid var(--ios-border);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.mc-stat-item {
    display: flex;
    flex-direction: column;
}
.mc-stat-label {
    font-size: 10.5px;
    color: var(--ios-text-muted);
    font-weight: 500;
    margin-bottom: 1px;
}
.mc-stat-val {
    font-size: 13px;
    font-weight: 800;
}

/* Features checkmark list */
.mc-features-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}
.mc-feature-item {
    font-size: 12px;
    color: var(--ios-text-secondary);
    display: flex;
    align-items: center;
    line-height: 1.35;
}
.mc-feature-item i {
    font-size: 11px;
}

/* Button */
.mc-btn-primary {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    padding: 8.5px 16px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mc-btn-primary:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35) !important;
}

/* 6. TRUST BADGES (4 BADGES) */
.mc-trust-card {
    background: var(--ios-card);
    border: 1px solid var(--ios-border);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: var(--ios-shadow-sm);
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    transition: all 0.2s ease;
}
.mc-trust-card:hover {
    border-color: var(--brand-green);
    transform: translateY(-2px);
}
.mc-trust-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(34, 197, 94, 0.1);
    color: var(--brand-green);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.mc-trust-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--ios-text-primary);
    margin-bottom: 2px;
}
.mc-trust-desc {
    font-size: 12px;
    color: var(--ios-text-muted);
    line-height: 1.4;
    margin-bottom: 0;
}

/* ==========================================================================
   7. DARK THEME GLOBAL MASTER OVERRIDES (APPLE / MUACERT OLED SLATE)
   Tự động kích hoạt khi html[data-theme="dark"], html.theme-dark, html.dark-mode
   Khử 100% màu trắng sáng đột ngột, đồng bộ nền tối cao cấp cho toàn bộ website
   ========================================================================== */
html[data-theme="dark"],
html.theme-dark,
html.dark-mode {
    color-scheme: dark !important;
}

html[data-theme="dark"] body,
html.theme-dark body,
html.dark-mode body {
    background-color: #090d16 !important;
    color: #f8fafc !important;
}

/* NAVBAR TRÊN NỀN TỐI (FROSTED GLASS CAPSULE ĐẢO NỔI OLED NHƯ ẢNH 1) */
html[data-theme="dark"] header.sticky-top,
html.theme-dark header.sticky-top,
html.dark-mode header.sticky-top {
    background: transparent !important;
    padding: 10px 16px 2px !important;
}
html[data-theme="dark"] .navbar,
html.theme-dark .navbar,
html.dark-mode .navbar {
    background: rgba(13, 18, 30, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 9999px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
    max-width: 1240px;
    margin: 0 auto !important;
    padding: 6px 18px !important;
}
html[data-theme="dark"] .navbar .nav-link,
html.theme-dark .navbar .nav-link,
html.dark-mode .navbar .nav-link {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .navbar .nav-link:hover,
html[data-theme="dark"] .navbar .nav-link.active,
html.theme-dark .navbar .nav-link:hover,
html.theme-dark .navbar .nav-link.active,
html.dark-mode .navbar .nav-link:hover,
html.dark-mode .navbar .nav-link.active {
    color: #22c55e !important;
    background: rgba(34, 197, 94, 0.12) !important;
}
html[data-theme="dark"] .navbar .dropdown-menu,
html.theme-dark .navbar .dropdown-menu,
html.dark-mode .navbar .dropdown-menu {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] .navbar .dropdown-item,
html.theme-dark .navbar .dropdown-item,
html.dark-mode .navbar .dropdown-item {
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .navbar .dropdown-item:hover,
html.theme-dark .navbar .dropdown-item:hover,
html.dark-mode .navbar .dropdown-item:hover {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #22c55e !important;
}
html[data-theme="dark"] .navbar-toggler,
html.theme-dark .navbar-toggler,
html.dark-mode .navbar-toggler {
    background: #19233c !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #22c55e !important;
}
html[data-theme="dark"] .navbar-toggler .fa-bars,
html.theme-dark .navbar-toggler .fa-bars,
html.dark-mode .navbar-toggler .fa-bars {
    color: #22c55e !important;
}
html[data-theme="dark"] .navbar-collapse,
html.theme-dark .navbar-collapse,
html.dark-mode .navbar-collapse {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .mobile-nav-link,
html.theme-dark .mobile-nav-link,
html.dark-mode .mobile-nav-link {
    background: #131b2e !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .mobile-nav-link:hover,
html.theme-dark .mobile-nav-link:hover,
html.dark-mode .mobile-nav-link:hover {
    background: rgba(34, 197, 94, 0.14) !important;
    color: #22c55e !important;
}
html[data-theme="dark"] .mobile-nav-link i.nav-icon,
html.theme-dark .mobile-nav-link i.nav-icon,
html.dark-mode .mobile-nav-link i.nav-icon {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #22c55e !important;
}
html[data-theme="dark"] .mobile-nav-subitem,
html.theme-dark .mobile-nav-subitem,
html.dark-mode .mobile-nav-subitem {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .mobile-nav-usercard,
html.theme-dark .mobile-nav-usercard,
html.dark-mode .mobile-nav-usercard {
    background: linear-gradient(135deg, #131b2e 0%, #19233c 100%) !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] .mobile-nav-usercard h6,
html.theme-dark .mobile-nav-usercard h6,
html.dark-mode .mobile-nav-usercard h6 {
    color: #f8fafc !important;
}
html[data-theme="dark"] .mobile-balance-box,
html.theme-dark .mobile-balance-box,
html.dark-mode .mobile-balance-box {
    background: #19233c !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}
html[data-theme="dark"] .balance-badge-orange,
html.theme-dark .balance-badge-orange,
html.dark-mode .balance-badge-orange {
    background: #19233c !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .balance-badge-orange span.text-secondary,
html.theme-dark .balance-badge-orange span.text-secondary,
html.dark-mode .balance-badge-orange span.text-secondary {
    color: #fbbf24 !important;
}

/* CARDS, CONTAINERS & SURFACES TRÊN NỀN TỐI */
html[data-theme="dark"] .card,
html[data-theme="dark"] .Boxsource,
html[data-theme="dark"] .classWithPad,
html[data-theme="dark"] .service-history-compact,
html[data-theme="dark"] .wrapper,
html[data-theme="dark"] .mc-hero-card,
html[data-theme="dark"] .mc-banner-card,
html[data-theme="dark"] .mc-service-card,
html[data-theme="dark"] .mc-trust-card,
html[data-theme="dark"] .mc-ticker-pill,
html.theme-dark .card,
html.theme-dark .Boxsource,
html.theme-dark .classWithPad,
html.theme-dark .service-history-compact,
html.theme-dark .wrapper,
html.theme-dark .mc-hero-card,
html.theme-dark .mc-banner-card,
html.theme-dark .mc-service-card,
html.theme-dark .mc-trust-card,
html.theme-dark .mc-ticker-pill,
html.dark-mode .card,
html.dark-mode .Boxsource,
html.dark-mode .classWithPad,
html.dark-mode .service-history-compact,
html.dark-mode .wrapper,
html.dark-mode .mc-hero-card,
html.dark-mode .mc-banner-card,
html.dark-mode .mc-service-card,
html.dark-mode .mc-trust-card,
html.dark-mode .mc-ticker-pill {
    background: #131b2e !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .mc-card-stats,
html[data-theme="dark"] .mc-card-benefit,
html.theme-dark .card-header,
html.theme-dark .mc-card-stats,
html.theme-dark .mc-card-benefit,
html.dark-mode .card-header,
html.dark-mode .mc-card-stats,
html.dark-mode .mc-card-benefit {
    background: #19233c !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .card-body,
html.theme-dark .card-body,
html.dark-mode .card-body {
    color: #e2e8f0 !important;
}

/* KHỬ TRIỆT ĐỂ LỚP NỀN TRẮNG TỪ BOOTSTRAP */
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] [class*="bg-light"],
html.theme-dark .bg-light,
html.theme-dark .bg-white,
html.theme-dark .alert-light,
html.theme-dark [class*="bg-light"],
html.dark-mode .bg-light,
html.dark-mode .bg-white,
html.dark-mode .alert-light,
html.dark-mode [class*="bg-light"] {
    background-color: #19233c !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] div[style*="background: #ffffff"],
html[data-theme="dark"] form[style*="background: #ffffff"],
html[data-theme="dark"] div[style*="background-color: #ffffff"],
html.theme-dark div[style*="background: #ffffff"],
html.theme-dark form[style*="background: #ffffff"],
html.theme-dark div[style*="background-color: #ffffff"],
html.dark-mode div[style*="background: #ffffff"],
html.dark-mode form[style*="background: #ffffff"],
html.dark-mode div[style*="background-color: #ffffff"] {
    background: #131b2e !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #f8fafc !important;
}

/* SIDEBAR PROFILE & MENU */
html[data-theme="dark"] ul.c-menu,
html.theme-dark ul.c-menu,
html.dark-mode ul.c-menu {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] ul.c-menu li a,
html.theme-dark ul.c-menu li a,
html.dark-mode ul.c-menu li a {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] ul.c-menu li a:hover,
html.theme-dark ul.c-menu li a:hover,
html.dark-mode ul.c-menu li a:hover {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #22c55e !important;
}

/* BẢNG BIỂU (TABLES) TRÊN NỀN TỐI */
html[data-theme="dark"] .table,
html.theme-dark .table,
html.dark-mode .table {
    color: #f8fafc !important;
    background-color: #131b2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .table tbody td,
html[data-theme="dark"] .table tbody th,
html.theme-dark .table tbody td,
html.theme-dark .table tbody th,
html.dark-mode .table tbody td,
html.dark-mode .table tbody th {
    background-color: #131b2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > *,
html.theme-dark .table-striped > tbody > tr:nth-of-type(odd) > *,
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #182238 !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .table tbody tr:hover > *,
html.theme-dark .table tbody tr:hover > *,
html.dark-mode .table tbody tr:hover > * {
    background-color: rgba(34, 197, 94, 0.12) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .table tbody td b,
html[data-theme="dark"] .table tbody td strong,
html.theme-dark .table tbody td b,
html.theme-dark .table tbody td strong,
html.dark-mode .table tbody td b,
html.dark-mode .table tbody td strong {
    color: #f8fafc;
}
html[data-theme="dark"] .table tbody td b[style*="color: #0f172a"],
html[data-theme="dark"] .table tbody td strong[style*="color: #0f172a"],
html.theme-dark .table tbody td b[style*="color: #0f172a"],
html.theme-dark .table tbody td strong[style*="color: #0f172a"],
html.dark-mode .table tbody td b[style*="color: #0f172a"],
html.dark-mode .table tbody td strong[style*="color: #0f172a"] {
    color: #f8fafc !important;
}
html[data-theme="dark"] .table tbody td span[style*="color: #475569"],
html.theme-dark .table tbody td span[style*="color: #475569"],
html.dark-mode .table tbody td span[style*="color: #475569"] {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .table tbody td small[style*="color: #64748b"],
html.theme-dark .table tbody td small[style*="color: #64748b"],
html.dark-mode .table tbody td small[style*="color: #64748b"] {
    color: #94a3b8 !important;
}

/* KHUNG CHÚ Ý XUẤT ĐƠN HÀNG CLONE (HIGH CONTRAST DUAL THEME) */
.code-example-badge.tkmk code {
    color: #fbbf24 !important;
    font-weight: 800;
}
.code-example-badge.full code {
    color: #4ade80 !important;
    font-weight: 700;
}
.code-inline-sample {
    background: #e2e8f0;
    color: #0f172a !important;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11px;
}
.code-inline-full {
    background: #dcfce7;
    color: #15803d !important;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 11.5px;
    border: 1px solid #86efac;
}

html[data-theme="dark"] .clone-notice-box,
html.theme-dark .clone-notice-box,
html.dark-mode .clone-notice-box {
    background: #131b2e !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .clone-notice-title,
html.theme-dark .clone-notice-title,
html.dark-mode .clone-notice-title {
    color: #4ade80 !important;
}
html[data-theme="dark"] .clone-notice-badge-top,
html.theme-dark .clone-notice-badge-top,
html.dark-mode .clone-notice-badge-top {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}
html[data-theme="dark"] .clone-notice-card-tkmk,
html.theme-dark .clone-notice-card-tkmk,
html.dark-mode .clone-notice-card-tkmk {
    background: #17223b !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .clone-notice-card-tkmk strong,
html.theme-dark .clone-notice-card-tkmk strong,
html.dark-mode .clone-notice-card-tkmk strong {
    color: #ffffff !important;
}
html[data-theme="dark"] .clone-notice-card-full,
html.theme-dark .clone-notice-card-full,
html.dark-mode .clone-notice-card-full {
    background: #17223b !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #e2e8f0 !important;
}
html[data-theme="dark"] .clone-notice-card-full strong,
html.theme-dark .clone-notice-card-full strong,
html.dark-mode .clone-notice-card-full strong {
    color: #ffffff !important;
}
html[data-theme="dark"] .notice-pill-tkmk,
html.theme-dark .notice-pill-tkmk,
html.dark-mode .notice-pill-tkmk {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}
html[data-theme="dark"] .notice-pill-full,
html.theme-dark .notice-pill-full,
html.dark-mode .notice-pill-full {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}
html[data-theme="dark"] .code-example-badge,
html.theme-dark .code-example-badge,
html.dark-mode .code-example-badge {
    background: #090d16 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .code-example-badge.tkmk code,
html.theme-dark .code-example-badge.tkmk code,
html.dark-mode .code-example-badge.tkmk code {
    color: #fbbf24 !important;
    font-weight: 800;
}
html[data-theme="dark"] .code-example-badge.full code,
html.theme-dark .code-example-badge.full code,
html.dark-mode .code-example-badge.full code {
    color: #4ade80 !important;
    font-weight: 700;
}
html[data-theme="dark"] .code-inline-sample,
html.theme-dark .code-inline-sample,
html.dark-mode .code-inline-sample {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
html[data-theme="dark"] .code-inline-full,
html.theme-dark .code-inline-full,
html.dark-mode .code-inline-full {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
}
html[data-theme="dark"] .clone-order-id,
html.theme-dark .clone-order-id,
html.dark-mode .clone-order-id {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .clone-order-total,
html.theme-dark .clone-order-total,
html.dark-mode .clone-order-total {
    color: #f87171 !important;
}
html[data-theme="dark"] .clone-order-date,
html.theme-dark .clone-order-date,
html.dark-mode .clone-order-date {
    color: #94a3b8 !important;
}

/* MODAL VIEW ACCOUNTS DARK MODE */
html[data-theme="dark"] #modalViewAccounts .modal-content,
html.theme-dark #modalViewAccounts .modal-content,
html.dark-mode #modalViewAccounts .modal-content {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-header,
html.theme-dark #modalViewAccounts .modal-header,
html.dark-mode #modalViewAccounts .modal-header {
    background: #0b1120 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-body,
html.theme-dark #modalViewAccounts .modal-body,
html.dark-mode #modalViewAccounts .modal-body {
    background: #131b2e !important;
    color: #f1f5f9 !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-footer,
html.theme-dark #modalViewAccounts .modal-footer,
html.dark-mode #modalViewAccounts .modal-footer {
    background: #0c1220 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-fmt-guide,
html.theme-dark #modalViewAccounts .modal-fmt-guide,
html.dark-mode #modalViewAccounts .modal-fmt-guide {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #bbf7d0 !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-fmt-guide strong,
html.theme-dark #modalViewAccounts .modal-fmt-guide strong,
html.dark-mode #modalViewAccounts .modal-fmt-guide strong {
    color: #ffffff !important;
}
html[data-theme="dark"] #modalViewAccounts .modal-fmt-label,
html.theme-dark #modalViewAccounts .modal-fmt-label,
html.dark-mode #modalViewAccounts .modal-fmt-label {
    color: #cbd5e1 !important;
}

/* FORM CONTROLS & INPUTS */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .mc-input,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html.theme-dark .form-control,
html.theme-dark .form-select,
html.theme-dark .mc-input,
html.theme-dark input[type="text"],
html.theme-dark input[type="password"],
html.theme-dark input[type="number"],
html.theme-dark input[type="email"],
html.theme-dark select,
html.theme-dark textarea,
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode .mc-input,
html.dark-mode input[type="text"],
html.dark-mode input[type="password"],
html.dark-mode input[type="number"],
html.dark-mode input[type="email"],
html.dark-mode select,
html.dark-mode textarea {
    background-color: #182238 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #f8fafc !important;
    color-scheme: dark !important;
}
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .mc-input:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html.theme-dark .form-control:focus,
html.theme-dark .form-select:focus,
html.theme-dark .mc-input:focus,
html.theme-dark input:focus,
html.theme-dark select:focus,
html.theme-dark textarea:focus,
html.dark-mode .form-control:focus,
html.dark-mode .form-select:focus,
html.dark-mode .mc-input:focus,
html.dark-mode input:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
    background-color: #1a253e !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html.theme-dark .form-control::placeholder,
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder,
html.dark-mode .form-control::placeholder,
html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #64748b !important;
}
html[data-theme="dark"] .form-label,
html[data-theme="dark"] label,
html[data-theme="dark"] .mc-form-label,
html.theme-dark .form-label,
html.theme-dark label,
html.theme-dark .mc-form-label,
html.dark-mode .form-label,
html.dark-mode label,
html.dark-mode .mc-form-label {
    color: #cbd5e1 !important;
}

/* MODALS, POPUPS, SWEETALERT */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .cs-pixel-modal,
html[data-theme="dark"] #modalConfirmOrder .modal-content,
html[data-theme="dark"] #modalPaymentShortage .modal-content,
html[data-theme="dark"] #modalViewAccounts .modal-content,
html[data-theme="dark"] #modalPaymentQR .modal-content,
html[data-theme="dark"] #global-modal .modal-content,
html[data-theme="dark"] .swal-modal,
html.theme-dark .modal-content,
html.theme-dark .cs-pixel-modal,
html.theme-dark #modalConfirmOrder .modal-content,
html.theme-dark #modalPaymentShortage .modal-content,
html.theme-dark #modalViewAccounts .modal-content,
html.theme-dark #modalPaymentQR .modal-content,
html.theme-dark #global-modal .modal-content,
html.theme-dark .swal-modal,
html.dark-mode .modal-content,
html.dark-mode .cs-pixel-modal,
html.dark-mode #modalConfirmOrder .modal-content,
html.dark-mode #modalPaymentShortage .modal-content,
html.dark-mode #modalViewAccounts .modal-content,
html.dark-mode #modalPaymentQR .modal-content,
html.dark-mode #global-modal .modal-content,
html.dark-mode .swal-modal {
    background: #131b2e !important;
    border: 1.5px solid rgba(34, 197, 94, 0.4) !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .cs-pixel-modal-header,
html[data-theme="dark"] #global-modal .modal-header,
html.theme-dark .modal-header,
html.theme-dark .cs-pixel-modal-header,
html.theme-dark #global-modal .modal-header,
html.dark-mode .modal-header,
html.dark-mode .cs-pixel-modal-header,
html.dark-mode #global-modal .modal-header {
    background: #19233c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] #global-modal .modal-body,
html.theme-dark #global-modal .modal-body,
html.dark-mode #global-modal .modal-body {
    background: #131b2e !important;
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .modal-footer,
html[data-theme="dark"] #global-modal .modal-footer,
html.theme-dark .modal-footer,
html.theme-dark #global-modal .modal-footer,
html.dark-mode .modal-footer,
html.dark-mode #global-modal .modal-footer {
    background: #19233c !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .btn-close,
html[data-theme="dark"] .btn-close-white,
html.theme-dark .btn-close,
html.theme-dark .btn-close-white,
html.dark-mode .btn-close,
html.dark-mode .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
    opacity: 0.8 !important;
}
html[data-theme="dark"] .swal-title,
html.theme-dark .swal-title,
html.dark-mode .swal-title {
    color: #f8fafc !important;
}
html[data-theme="dark"] .swal-text,
html.theme-dark .swal-text,
html.dark-mode .swal-text {
    color: #cbd5e1 !important;
}

/* CLONE SHORTAGE MODAL & QR SCANNER */
html[data-theme="dark"] .clone-qr-modal-content,
html.theme-dark .clone-qr-modal-content,
html.dark-mode .clone-qr-modal-content {
    background: #131b2e !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .clone-qr-modal-header,
html.theme-dark .clone-qr-modal-header,
html.dark-mode .clone-qr-modal-header {
    background: #19233c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .qr-cyber-inner,
html.theme-dark .qr-cyber-inner,
html.dark-mode .qr-cyber-inner {
    background: #090d16 !important;
}
html[data-theme="dark"] .qr-amount-box,
html.theme-dark .qr-amount-box,
html.dark-mode .qr-amount-box {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
}
html[data-theme="dark"] .qr-amount-val,
html.theme-dark .qr-amount-val,
html.dark-mode .qr-amount-val {
    color: #fbbf24 !important;
}
html[data-theme="dark"] .qr-bank-box,
html.theme-dark .qr-bank-box,
html.dark-mode .qr-bank-box {
    background: #19233c !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .qr-radar-box,
html.theme-dark .qr-radar-box,
html.dark-mode .qr-radar-box {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #4ade80 !important;
}
html[data-theme="dark"] .qr-bank-row:hover,
html.theme-dark .qr-bank-row:hover,
html.dark-mode .qr-bank-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* HỘP CSKH (CHAT BOX) */
html[data-theme="dark"] #tx-chat-window,
html.theme-dark #tx-chat-window,
html.dark-mode #tx-chat-window {
    background: #131b2e !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 14px 45px rgba(0, 0, 0, 0.6) !important;
}
html[data-theme="dark"] #tx-chat-tooltip,
html.theme-dark #tx-chat-tooltip,
html.dark-mode #tx-chat-tooltip {
    background: #131b2e !important;
    color: #f8fafc !important;
    border-color: #22c55e !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] #tx-chat-tooltip span,
html.theme-dark #tx-chat-tooltip span,
html.dark-mode #tx-chat-tooltip span {
    color: #f8fafc !important;
}
html[data-theme="dark"] #tx-chat-tooltip::after,
html.theme-dark #tx-chat-tooltip::after,
html.dark-mode #tx-chat-tooltip::after {
    border-color: transparent transparent transparent #131b2e !important;
}
html[data-theme="dark"] #tx-chat-tooltip::before,
html.theme-dark #tx-chat-tooltip::before,
html.dark-mode #tx-chat-tooltip::before {
    border-color: transparent transparent transparent #22c55e !important;
}
html[data-theme="dark"] #tx-chat-footer,
html.theme-dark #tx-chat-footer,
html.dark-mode #tx-chat-footer {
    background: #19233c !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .tx-chat-msg.admin,
html.theme-dark .tx-chat-msg.admin,
html.dark-mode .tx-chat-msg.admin {
    background: #19233c !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* HÒM THƯ THÀNH VIÊN (MEMBER MAIL) */
html[data-theme="dark"] .mem-mail-trigger,
html.theme-dark .mem-mail-trigger {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fbbf24 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .mem-mail-trigger:hover,
html.theme-dark .mem-mail-trigger:hover {
    background: #19233c !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    color: #fde68a !important;
}
html[data-theme="dark"] .mem-mail-panel,
html.theme-dark .mem-mail-panel,
html.dark-mode .mem-mail-panel {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
}
html[data-theme="dark"] .mem-mail-panel-head,
html.theme-dark .mem-mail-panel-head,
html.dark-mode .mem-mail-panel-head {
    background: #17223b !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .mem-mail-panel-head strong,
html.theme-dark .mem-mail-panel-head strong,
html.dark-mode .mem-mail-panel-head strong {
    color: #f8fafc !important;
}
html[data-theme="dark"] .mem-mail-panel-head strong i,
html.theme-dark .mem-mail-panel-head strong i,
html.dark-mode .mem-mail-panel-head strong i {
    color: #38bdf8 !important;
}
html[data-theme="dark"] .mem-mail-close-btn,
html.theme-dark .mem-mail-close-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #94a3b8 !important;
}
html[data-theme="dark"] .mem-mail-close-btn:hover,
html.theme-dark .mem-mail-close-btn:hover {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.4) !important;
    color: #f87171 !important;
}
html[data-theme="dark"] .mem-mail-item,
html.theme-dark .mem-mail-item,
html.dark-mode .mem-mail-item {
    background: #17223b !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .mem-mail-item:hover,
html.theme-dark .mem-mail-item:hover,
html.dark-mode .mem-mail-item:hover {
    background: #1e2c4c !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .mem-mail-item.unread,
html.theme-dark .mem-mail-item.unread,
html.dark-mode .mem-mail-item.unread {
    border-color: rgba(34, 197, 94, 0.35) !important;
    background: rgba(34, 197, 94, 0.12) !important;
    box-shadow: inset 3.5px 0 #22c55e !important;
}
html[data-theme="dark"] .mem-mail-letter-paper,
html.theme-dark .mem-mail-letter-paper,
html.dark-mode .mem-mail-letter-paper {
    background: #131b2e !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f8fafc !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.75) !important;
}
html[data-theme="dark"] .mem-mail-letter-paper h4,
html.theme-dark .mem-mail-letter-paper h4,
html.dark-mode .mem-mail-letter-paper h4 {
    color: #f8fafc !important;
}
html[data-theme="dark"] .mem-mail-letter-paper small,
html.theme-dark .mem-mail-letter-paper small {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .mem-mail-letter-paper hr,
html.theme-dark .mem-mail-letter-paper hr,
html.dark-mode .mem-mail-letter-paper hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .mem-mail-letter-paper .mem-mail-html,
html.theme-dark .mem-mail-letter-paper .mem-mail-html {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .mem-mail-letter-paper .mem-mail-html a,
html.theme-dark .mem-mail-letter-paper .mem-mail-html a {
    color: #38bdf8 !important;
}

/* THÀNH PHẦN TRANG CHỦ (INDEX) */
html[data-theme="dark"] .service-history-box .leaderboard-box,
html.theme-dark .service-history-box .leaderboard-box,
html.dark-mode .service-history-box .leaderboard-box {
    background: #131b2e !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .service-history-box .history-entry,
html.theme-dark .service-history-box .history-entry,
html.dark-mode .service-history-box .history-entry {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .mc-ticker-item,
html.theme-dark .mc-ticker-item,
html.dark-mode .mc-ticker-item {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .mc-ticker-item b,
html.theme-dark .mc-ticker-item b,
html.dark-mode .mc-ticker-item b {
    color: #f8fafc !important;
}
html[data-theme="dark"] .mc-ticker-item .mc-ticker-service,
html.theme-dark .mc-ticker-item .mc-ticker-service,
html.dark-mode .mc-ticker-item .mc-ticker-service {
    color: #4ade80 !important;
}
html[data-theme="dark"] .mc-ticker-item .mc-ticker-time,
html.theme-dark .mc-ticker-item .mc-ticker-time,
html.dark-mode .mc-ticker-item .mc-ticker-time {
    color: #64748b !important;
}
html[data-theme="dark"] .mc-ticker-item .mc-ticker-qty,
html.theme-dark .mc-ticker-item .mc-ticker-qty,
html.dark-mode .mc-ticker-item .mc-ticker-qty {
    color: #f87171 !important;
}
html[data-theme="dark"] .banner-topnap,
html.theme-dark .banner-topnap,
html.dark-mode .banner-topnap {
    background: #19233c !important;
    border-color: rgba(255, 255, 255, 0.09) !important;
}
html[data-theme="dark"] #topNapTabs .nav-link,
html.theme-dark #topNapTabs .nav-link,
html.dark-mode #topNapTabs .nav-link {
    color: #94a3b8 !important;
}
html[data-theme="dark"] #topNapTabs .nav-link.active,
html.theme-dark #topNapTabs .nav-link.active,
html.dark-mode #topNapTabs .nav-link.active {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-bottom: 3px solid #22c55e !important;
}
html[data-theme="dark"] .BoxProduct .card,
html.theme-dark .BoxProduct .card,
html.dark-mode .BoxProduct .card {
    border-color: rgba(255, 255, 255, 0.09) !important;
    background: #131b2e !important;
}

/* TYPOGRAPHY TRÊN NỀN TỐI */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] small.text-muted,
html[data-theme="dark"] .mc-stat-label,
html[data-theme="dark"] .mc-trust-desc,
html[data-theme="dark"] .mc-section-subtitle,
html.theme-dark .text-muted,
html.theme-dark small.text-muted,
html.theme-dark .mc-stat-label,
html.theme-dark .mc-trust-desc,
html.theme-dark .mc-section-subtitle,
html.dark-mode .text-muted,
html.dark-mode small.text-muted,
html.dark-mode .mc-stat-label,
html.dark-mode .mc-trust-desc,
html.dark-mode .mc-section-subtitle {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] .mc-card-desc,
html[data-theme="dark"] .mc-feature-item,
html.theme-dark .text-secondary,
html.theme-dark .mc-card-desc,
html.theme-dark .mc-feature-item,
html.dark-mode .text-secondary,
html.dark-mode .mc-card-desc,
html.dark-mode .mc-feature-item {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6,
html[data-theme="dark"] .mc-section-title,
html[data-theme="dark"] .mc-card-title,
html[data-theme="dark"] .mc-trust-title,
html.theme-dark h1, 
html.theme-dark h2, 
html.theme-dark h3, 
html.theme-dark h4, 
html.theme-dark h5, 
html.theme-dark h6,
html.theme-dark .mc-section-title,
html.theme-dark .mc-card-title,
html.theme-dark .mc-trust-title,
html.dark-mode h1, 
html.dark-mode h2, 
html.dark-mode h3, 
html.dark-mode h4, 
html.dark-mode h5, 
html.dark-mode h6,
html.dark-mode .mc-section-title,
html.dark-mode .mc-card-title,
html.dark-mode .mc-trust-title {
    color: #f8fafc !important;
}

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-blue-black,
html.theme-dark .text-dark,
html.theme-dark .text-blue-black,
html.dark-mode .text-dark,
html.dark-mode .text-blue-black {
    color: #f8fafc !important;
}

@media (max-width: 767.98px) {
    .mc-home-container {
        padding: 10px 8px 24px;
    }
    .mc-hero-card {
        padding: 16px 14px;
        border-radius: 16px !important;
    }
    .mc-banner-card {
        border-radius: 16px !important;
        min-height: 190px;
    }
    .mc-service-col {
        max-width: 350px;
        margin: 0 auto;
    }
    .mc-service-card {
        border-radius: 16px !important;
    }
    .mc-card-media {
        aspect-ratio: 16 / 10;
        min-height: 185px;
        height: auto;
    }
    .mc-card-body {
        padding: 12px 14px;
    }
    .mc-card-title {
        font-size: 15.5px;
    }
    .mc-section-title {
        font-size: 20px;
    }
    .mc-ticker-pill {
        padding: 6px 10px;
        font-size: 12px;
        gap: 8px;
    }
    .mc-ticker-badge {
        font-size: 10px;
        padding: 3px 8px;
        gap: 4px;
    }
    .mc-ticker-content {
        height: 22px;
    }
    .mc-ticker-item {
        font-size: 11.5px;
        padding: 0 12px;
        gap: 5px;
    }
    .mc-ticker-item .mc-ticker-time {
        font-size: 10.5px;
    }
    .mc-ticker-entry {
        font-size: 12px;
    }
}

/* ==========================================================================
   RECHARGE (ATM & CARD) HIGH CONTRAST & DUAL THEME STYLES
   ========================================================================== */
.bank-card-badge {
    border: 2px solid #005baa !important;
    background: var(--ios-card) !important;
    color: var(--ios-text-primary) !important;
    border-radius: 10px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0, 91, 170, 0.15);
}
.bank-card-badge span.text-dark {
    color: var(--ios-text-primary) !important;
}
.quick-amt-btn {
    border: 1.5px solid var(--ios-border) !important;
    background: var(--ios-card) !important;
    color: var(--ios-text-primary) !important;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: var(--ios-shadow-sm);
}
.quick-amt-btn:hover {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: var(--brand-green) !important;
    color: var(--brand-green) !important;
    transform: translateY(-1px);
}
.quick-amt-btn.active {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #ffffff !important;
    border-color: #15803d !important;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
}
#tokenReceiveBanner {
    background: rgba(34, 197, 94, 0.12) !important;
    border: 1.5px solid #86efac !important;
    color: #15803d !important;
}
html[data-theme="dark"] #tokenReceiveBanner {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
}
#txtTokenReceiveVal {
    color: #15803d !important;
}
html[data-theme="dark"] #txtTokenReceiveVal {
    color: #4ade80 !important;
}



/* ==========================================================================
   ANTI-GLARE DARK THEME: SOFT HONEY AMBER WARNING SYSTEM (CHỐNG LÓA MẮT)
   ========================================================================== */

/* 1. Mobile Quick Recharge Button */
.mobile-quick-recharge-btn {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    color: #d97706 !important;
    font-size: 11px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease;
}
.mobile-quick-recharge-btn:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #b45309 !important;
}

/* 2. Dark Theme Global Warnings: Soft Honey Amber / Gentle Gold */
html[data-theme="dark"] .mobile-quick-recharge-btn,
html.theme-dark .mobile-quick-recharge-btn {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}

/* Warning Badges: Soft Frosted Glass Amber instead of blazing solid electric yellow */
html[data-theme="dark"] .badge.bg-warning,
html[data-theme="dark"] .badge.badge-warning,
html[data-theme="dark"] .badge.text-warning,
html[data-theme="dark"] .bg-warning.text-dark,
html[data-theme="dark"] .badge-role-member,
html[data-theme="dark"] .badge-2fa-status.off,
html.theme-dark .badge.bg-warning,
html.theme-dark .badge.badge-warning,
html.theme-dark .badge.text-warning,
html.theme-dark .bg-warning.text-dark,
html.theme-dark .badge-role-member,
html.theme-dark .badge-2fa-status.off {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .badge.bg-warning i,
html[data-theme="dark"] .badge.badge-warning i,
html[data-theme="dark"] .bg-warning.text-dark i,
html[data-theme="dark"] .badge-role-member i,
html[data-theme="dark"] .badge-2fa-status.off i,
html.theme-dark .badge.bg-warning i,
html.theme-dark .badge.badge-warning i,
html.theme-dark .bg-warning.text-dark i,
html.theme-dark .badge-role-member i,
html.theme-dark .badge-2fa-status.off i {
    color: #fbbf24 !important;
}

/* Soft Warning Text (Anti-Glare) */
html[data-theme="dark"] .text-warning:not(.btn),
html[data-theme="dark"] span.text-warning,
html[data-theme="dark"] strong.text-warning,
html[data-theme="dark"] b.text-warning,
html[data-theme="dark"] i.text-warning,
html[data-theme="dark"] label.text-warning,
html[data-theme="dark"] .table .text-warning,
html[data-theme="dark"] [style*="color: #ffaa00"],
html[data-theme="dark"] [style*="color:#ffaa00"],
html[data-theme="dark"] [style*="color: #ff8c00"],
html[data-theme="dark"] [style*="color:#ff8c00"],
html[data-theme="dark"] [style*="color: #ffc107"],
html[data-theme="dark"] [style*="color:#ffc107"],
html.theme-dark .text-warning:not(.btn),
html.theme-dark span.text-warning,
html.theme-dark strong.text-warning,
html.theme-dark b.text-warning,
html.theme-dark i.text-warning,
html.theme-dark label.text-warning,
html.theme-dark .table .text-warning,
html.theme-dark [style*="color: #ffaa00"],
html.theme-dark [style*="color:#ffaa00"],
html.theme-dark [style*="color: #ff8c00"],
html.theme-dark [style*="color:#ff8c00"],
html.theme-dark [style*="color: #ffc107"],
html.theme-dark [style*="color:#ffc107"] {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .text-warning-emphasis,
html.theme-dark .text-warning-emphasis {
    color: #fde68a !important;
}

/* Warning Alerts & Notice Blocks */
html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .alert[style*="background: rgba(255, 170, 0"],
html[data-theme="dark"] .alert[style*="background:rgba(255, 170, 0"],
html[data-theme="dark"] .alert[style*="background-color: #fff3cd"],
html.theme-dark .alert-warning,
html.theme-dark .alert[style*="background: rgba(255, 170, 0"],
html.theme-dark .alert[style*="background:rgba(255, 170, 0"],
html.theme-dark .alert[style*="background-color: #fff3cd"] {
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.28) !important;
    color: #fde68a !important;
    box-shadow: none !important;
}

html[data-theme="dark"] .alert-warning strong,
html[data-theme="dark"] .alert-warning b,
html[data-theme="dark"] .alert-warning i,
html[data-theme="dark"] .alert-warning .fw-bold,
html.theme-dark .alert-warning strong,
html.theme-dark .alert-warning b,
html.theme-dark .alert-warning i,
html.theme-dark .alert-warning .fw-bold {
    color: #fbbf24 !important;
}

/* Warning Buttons */
html[data-theme="dark"] .btn-warning,
html.theme-dark .btn-warning {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
}
html[data-theme="dark"] .btn-warning:hover,
html.theme-dark .btn-warning:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
}

/* Warning Borders */
html[data-theme="dark"] .border-warning,
html[data-theme="dark"] .border-warning-subtle,
html[data-theme="dark"] [style*="border-color: #ffaa00"],
html[data-theme="dark"] [style*="border: 1px solid #ffaa00"],
html.theme-dark .border-warning,
html.theme-dark .border-warning-subtle,
html.theme-dark [style*="border-color: #ffaa00"],
html.theme-dark [style*="border: 1px solid #ffaa00"] {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Warning Subtle Backgrounds */
html[data-theme="dark"] .bg-warning-subtle,
html[data-theme="dark"] .bg-warning.bg-opacity-10,
html[data-theme="dark"] .bg-warning.bg-opacity-25,
html.theme-dark .bg-warning-subtle,
html.theme-dark .bg-warning.bg-opacity-10,
html.theme-dark .bg-warning.bg-opacity-25 {
    background-color: rgba(245, 158, 11, 0.12) !important;
}

/* Warning General Container & Progress Bars */
html[data-theme="dark"] .bg-warning:not(.badge):not(.btn):not(.progress-bar),
html.theme-dark .bg-warning:not(.badge):not(.btn):not(.progress-bar) {
    background-color: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}
html[data-theme="dark"] .progress-bar.bg-warning,
html.theme-dark .progress-bar.bg-warning {
    background: linear-gradient(90deg, #d97706, #fbbf24) !important;
}

/* Balance Badge on Navbar in Dark Mode */
html[data-theme="dark"] .balance-badge-orange,
html.theme-dark .balance-badge-orange {
    background: rgba(245, 158, 11, 0.12) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #f8fafc !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .balance-badge-orange span.text-secondary,
html.theme-dark .balance-badge-orange span.text-secondary {
    color: #cbd5e1 !important;
}
html[data-theme="dark"] .balance-badge-orange b,
html.theme-dark .balance-badge-orange b {
    color: #f87171 !important;
}

/* =========================================================
   RESPONSIVE NAVBAR ISLAND: CHỐNG TRÀN, CHỐNG ĐÈ CHỮ / LOGO (APPLE DUAL-THEME)
   ========================================================= */
@media (max-width: 991.98px) {
    html[data-theme="light"] .navbar,
    html.theme-light .navbar,
    html[data-theme="dark"] .navbar,
    html.theme-dark .navbar,
    html.dark-mode .navbar,
    .navbar {
        padding: 5px 12px !important;
        border-radius: 9999px !important;
    }
    .navbar .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 6px !important;
    }
    .navbar {
        border-radius: 20px !important;
        padding: 9px 14px 10px 14px !important;
    }
    .navbar .container-fluid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 0 !important;
    }
    .mobile-navbar-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 7px !important;
        width: 100% !important;
    }
    /* DÒNG 1: LOGO + AVATAR / TOGGLER MENU */
    .mobile-row-top {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 36px !important;
    }
    .mobile-row-top .navbar-brand {
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    .mobile-row-top .logo-main {
        height: 36px !important;
        max-height: 38px !important;
        width: auto !important;
        max-width: 165px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        display: block !important;
    }
    .mobile-top-right {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    .mobile-mini-avatar img {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        border: 2px solid #22c55e !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        object-fit: cover !important;
    }
    .navbar-toggler {
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        font-size: 15px !important;
        border: 1px solid var(--ios-border, rgba(0,0,0,0.1)) !important;
        background: var(--ios-segment-bg, rgba(0,0,0,0.04)) !important;
        color: var(--ios-text-primary, #0f172a) !important;
        margin: 0 !important;
    }

    /* DÒNG 2: SỐ DƯ VÍ TO RÕ + ĐỔI THEME & HÒM THƯ */
    .mobile-row-bottom {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
        padding-top: 7px !important;
        gap: 8px !important;
    }
    html[data-theme="dark"] .mobile-row-bottom,
    html.theme-dark .mobile-row-bottom,
    html.dark-mode .mobile-row-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.09) !important;
    }
    .mobile-row-bottom .balance-badge-orange {
        padding: 6px 14px !important;
        font-size: 12.5px !important;
        border-radius: 9999px !important;
        white-space: nowrap !important;
        line-height: 1.25 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    }
    .mobile-row-bottom .balance-label {
        display: inline !important;
        font-size: 12px !important;
        font-weight: 500 !important;
        color: var(--ios-text-secondary, #64748b) !important;
    }
    html[data-theme="dark"] .mobile-row-bottom .balance-label {
        color: #94a3b8 !important;
    }
    .mobile-row-bottom .balance-amount {
        font-size: 13.5px !important;
    }
    .mobile-row-actions {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        flex-shrink: 0 !important;
    }
    .mobile-row-bottom .theme-switch-btn,
    .mobile-row-bottom .mem-mail-trigger {
        width: 34px !important;
        height: 34px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    .mobile-row-bottom .mem-mail-trigger .mem-mail-icon {
        font-size: 15px !important;
    }
    .mobile-row-bottom .mem-mail-trigger .mem-mail-count {
        width: 16px !important;
        height: 16px !important;
        font-size: 9.5px !important;
        top: -4px !important;
        right: -4px !important;
        line-height: 16px !important;
    }
    .mobile-auth-actions {
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }
    .mobile-auth-actions .btn {
        font-size: 12px !important;
        line-height: 1.25 !important;
        padding: 6px 14px !important;
        white-space: nowrap !important;
        border-radius: 9999px !important;
    }
    .navbar-collapse {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 8px !important;
        right: 8px !important;
        background: var(--ios-card) !important;
        z-index: 2000;
        border-radius: 20px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.25) !important;
        padding: 12px 14px 18px 14px;
        max-height: 78vh;
        overflow-y: auto;
        border: 1px solid var(--ios-border) !important;
    }
}

@media (max-width: 379.98px) {
    .navbar {
        padding: 8px 10px !important;
    }
    .mobile-row-top .logo-main {
        height: 32px !important;
        max-height: 32px !important;
        max-width: 140px !important;
    }
    .mobile-row-bottom .balance-badge-orange {
        font-size: 11.5px !important;
        padding: 5px 10px !important;
    }
    .mobile-row-bottom .balance-label {
        font-size: 11px !important;
    }
    .mobile-row-actions {
        gap: 5px !important;
    }
    .mobile-row-bottom .theme-switch-btn,
    .mobile-row-bottom .mem-mail-trigger {
        width: 32px !important;
        height: 32px !important;
    }
    .navbar-toggler {
        width: 33px !important;
        height: 33px !important;
    }
}

@media (min-width: 992px) {
    .navbar .container-fluid {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    .navbar-brand {
        flex-shrink: 0 !important;
    }
    .navbar-nav {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 2px !important;
    }
    .navbar .nav-link {
        font-size: 12.5px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
    }
    #func-control {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .balance-badge-orange {
        white-space: nowrap !important;
    }
}
@media (min-width: 1200px) {
    .navbar-nav {
        gap: 6px !important;
    }
    .navbar .nav-link {
        font-size: 13.5px !important;
        padding: 6px 14px !important;
    }
}


/* ========================================================
   MODAL XÁC NHẬN TẠO ĐƠN CHUNG SỨC (LIGHT THEME - CỰC KỲ DỊU MẮT, SẮC NÉT)
   ======================================================== */
html[data-theme="light"] #modalConfirmOrder .modal-content,
html.theme-light #modalConfirmOrder .modal-content,
#modalConfirmOrder .cs-confirm-modal-content {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 18px !important;
    box-shadow: 0 25px 60px rgba(15, 23, 42, 0.18) !important;
    color: #0f172a !important;
}
html[data-theme="light"] #modalConfirmOrder .modal-header,
html.theme-light #modalConfirmOrder .modal-header,
#modalConfirmOrder .cs-confirm-modal-header {
    background: linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 14px 18px !important;
}
html[data-theme="light"] #modalConfirmOrder .modal-title,
html.theme-light #modalConfirmOrder .modal-title,
#modalConfirmOrder .cs-confirm-title {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder small,
html.theme-light #modalConfirmOrder small,
#modalConfirmOrder .cs-confirm-subtitle {
    color: #475569 !important;
    font-weight: 500 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-confirm-icon-box,
html.theme-light #modalConfirmOrder .cs-confirm-icon-box {
    background: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    color: #b45309 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-confirm-receipt-box,
html.theme-light #modalConfirmOrder .cs-confirm-receipt-box {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-lbl,
html.theme-light #modalConfirmOrder .cs-cf-lbl {
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-val-source,
html.theme-light #modalConfirmOrder .cs-cf-val-source {
    color: #15803d !important;
    font-weight: 700 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-val-moc,
html.theme-light #modalConfirmOrder .cs-cf-val-moc {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-badge-target,
html.theme-light #modalConfirmOrder .cs-cf-badge-target {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    border: 1px solid #7dd3fc !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-val-count,
html.theme-light #modalConfirmOrder .cs-cf-val-count {
    color: #0f172a !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-val-price,
html.theme-light #modalConfirmOrder .cs-cf-val-price {
    color: #0284c7 !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-val-tickets,
html.theme-light #modalConfirmOrder .cs-cf-val-tickets {
    color: #15803d !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-codes-container,
html.theme-light #modalConfirmOrder .cs-cf-codes-container {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-code-pill,
html.theme-light #modalConfirmOrder .cs-cf-code-pill {
    background: #ffffff !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
    font-weight: 800 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-hr,
html.theme-light #modalConfirmOrder .cs-cf-hr {
    border-color: #e2e8f0 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-total-lbl,
html.theme-light #modalConfirmOrder .cs-cf-total-lbl {
    color: #0f172a !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-cf-total-val,
html.theme-light #modalConfirmOrder .cs-cf-total-val {
    color: #dc2626 !important;
    font-weight: 900 !important;
    font-size: 22px !important;
    font-family: 'JetBrains Mono', Consolas, monospace !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-confirm-notice,
html.theme-light #modalConfirmOrder .cs-confirm-notice {
    background: #f0fdf4 !important;
    border: 1px dashed #86efac !important;
    color: #166534 !important;
    font-weight: 600 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-btn-cancel,
html.theme-light #modalConfirmOrder .cs-btn-cancel {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    font-weight: 700 !important;
}
html[data-theme="light"] #modalConfirmOrder .cs-btn-confirm,
html.theme-light #modalConfirmOrder .cs-btn-confirm {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
}

/* ========================================================
   2FA STATUS BADGES (APPLE DUAL-THEME: RÕ NÉT CẢ SÁNG LẪN TỐI)
   ======================================================== */
html[data-theme="light"] .badge-2fa-status.on,
html.theme-light .badge-2fa-status.on,
.badge-2fa-status.on {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1.5px solid #86efac !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.15) !important;
}
html[data-theme="light"] .badge-2fa-status.on i,
html.theme-light .badge-2fa-status.on i,
.badge-2fa-status.on i {
    color: #16a34a !important;
}

html[data-theme="light"] .badge-2fa-status.off,
html.theme-light .badge-2fa-status.off,
.badge-2fa-status.off {
    background: #fef3c7 !important;
    color: #b45309 !important;
    border: 1.5px solid #fcd34d !important;
    font-weight: 800 !important;
    font-size: 12.5px !important;
}
html[data-theme="light"] .badge-2fa-status.off i,
html.theme-light .badge-2fa-status.off i,
.badge-2fa-status.off i {
    color: #d97706 !important;
}

html[data-theme="dark"] .badge-2fa-status.on,
html.theme-dark .badge-2fa-status.on,
html.dark-mode .badge-2fa-status.on {
    background: rgba(34, 197, 94, 0.16) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
    box-shadow: none !important;
}
html[data-theme="dark"] .badge-2fa-status.on i,
html.theme-dark .badge-2fa-status.on i,
html.dark-mode .badge-2fa-status.on i {
    color: #4ade80 !important;
}


/* ========================================================
   ENHANCED DARK THEME: MODAL QUÉT QR THIẾU TIỀN & CHECKOUT CLONE
   ======================================================== */
html[data-theme="dark"] .checkout-sub-label,
html.theme-dark .checkout-sub-label,
html.dark-mode .checkout-sub-label {
    color: #cbd5e1 !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
}
html[data-theme="dark"] .checkout-pkg-title,
html.theme-dark .checkout-pkg-title,
html.dark-mode .checkout-pkg-title {
    color: #4ade80 !important;
    font-weight: 800 !important;
    font-size: 17.5px !important;
}
html[data-theme="dark"] .checkout-stock-text,
html.theme-dark .checkout-stock-text,
html.dark-mode .checkout-stock-text {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}
html[data-theme="dark"] .checkout-stock-text.text-success,
html.theme-dark .checkout-stock-text.text-success,
html.dark-mode .checkout-stock-text.text-success {
    color: #4ade80 !important;
}
html[data-theme="dark"] .checkout-stock-text b,
html[data-theme="dark"] .checkout-stock-text strong,
html.theme-dark .checkout-stock-text b,
html.theme-dark .checkout-stock-text strong,
html.dark-mode .checkout-stock-text b,
html.dark-mode .checkout-stock-text strong {
    color: #fbbf24 !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] .clone-qty-label,
html.theme-dark .clone-qty-label,
html.dark-mode .clone-qty-label {
    color: #f8fafc !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] .checkout-total-title,
html.theme-dark .checkout-total-title,
html.dark-mode .checkout-total-title {
    color: #fde68a !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] .checkout-total-price,
html.theme-dark .checkout-total-price,
html.dark-mode .checkout-total-price {
    color: #fbbf24 !important;
    font-weight: 900 !important;
}

/* Modal Quét QR Thiếu Tiền (Dark Mode Text High Contrast) */
html[data-theme="dark"] .qr-amount-box .text-muted,
html.theme-dark .qr-amount-box .text-muted,
html.dark-mode .qr-amount-box .text-muted {
    color: #cbd5e1 !important;
    font-weight: 750 !important;
}
html[data-theme="dark"] .qr-amount-box span,
html.theme-dark .qr-amount-box span,
html.dark-mode .qr-amount-box span {
    color: #f8fafc !important;
}
html[data-theme="dark"] #cloneQrPkgName,
html.theme-dark #cloneQrPkgName,
html.dark-mode #cloneQrPkgName {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] #cloneQrQty,
html.theme-dark #cloneQrQty,
html.dark-mode #cloneQrQty {
    color: #fbbf24 !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] #cloneQrShortageTotal,
html.theme-dark #cloneQrShortageTotal,
html.dark-mode #cloneQrShortageTotal {
    color: #4ade80 !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] #cloneQrShortageBalance,
html.theme-dark #cloneQrShortageBalance,
html.dark-mode #cloneQrShortageBalance {
    color: #f87171 !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] .qr-bank-row span.text-muted,
html.theme-dark .qr-bank-row span.text-muted,
html.dark-mode .qr-bank-row span.text-muted {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
}
html[data-theme="dark"] #cloneQrBankName,
html.theme-dark #cloneQrBankName,
html.dark-mode #cloneQrBankName {
    color: #f8fafc !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}
html[data-theme="dark"] #cloneQrBankAcc,
html.theme-dark #cloneQrBankAcc,
html.dark-mode #cloneQrBankAcc {
    color: #4ade80 !important;
    font-weight: 900 !important;
    font-size: 17.5px !important;
    letter-spacing: 0.5px !important;
}
html[data-theme="dark"] #cloneQrBankHolder,
html.theme-dark #cloneQrBankHolder,
html.dark-mode #cloneQrBankHolder {
    color: #f8fafc !important;
    font-weight: 800 !important;
    font-size: 14.5px !important;
}
html[data-theme="dark"] #cloneQrBankContent,
html.theme-dark #cloneQrBankContent,
html.dark-mode #cloneQrBankContent {
    color: #38bdf8 !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 12px rgba(56, 189, 248, 0.45) !important;
}
html[data-theme="dark"] .qr-bank-row .btn-copy-interactive,
html.theme-dark .qr-bank-row .btn-copy-interactive,
html.dark-mode .qr-bank-row .btn-copy-interactive {
    border: 1.5px solid rgba(56, 189, 248, 0.55) !important;
    color: #38bdf8 !important;
    background: rgba(56, 189, 248, 0.18) !important;
}
html[data-theme="dark"] #cloneQrBankAcc + .btn-copy-interactive,
html.theme-dark #cloneQrBankAcc + .btn-copy-interactive,
html.dark-mode #cloneQrBankAcc + .btn-copy-interactive {
    border: 1.5px solid rgba(74, 222, 128, 0.55) !important;
    color: #4ade80 !important;
    background: rgba(74, 222, 128, 0.18) !important;
}


/* ========================================================
   CHUNG SỨC: TIẾN ĐỘ ĐƠN HÀNG TRÊN NỀN TỐI (DARK THEME ĐẬM ĐÀ, KHÔNG BỊ TRẮNG)
   ======================================================== */
html[data-theme="dark"] .cs-pixel-card,
html.theme-dark .cs-pixel-card,
html.dark-mode .cs-pixel-card {
    background: #141f33 !important;
    border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
    color: #f8fafc !important;
}
html[data-theme="dark"] .cs-pixel-card:hover,
html.theme-dark .cs-pixel-card:hover,
html.dark-mode .cs-pixel-card:hover {
    background: #19273f !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 14px rgba(56, 189, 248, 0.2) !important;
    transform: translateY(-2px) !important;
}
html[data-theme="dark"] .cs-pixel-card.selected-order,
html.theme-dark .cs-pixel-card.selected-order,
html.dark-mode .cs-pixel-card.selected-order {
    background: #182844 !important;
    border: 2px solid #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35), 0 8px 25px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-2px) !important;
}
html[data-theme="dark"] .cs-pixel-card.selected-order .cs-pixel-code,
html.theme-dark .cs-pixel-card.selected-order .cs-pixel-code,
html.dark-mode .cs-pixel-card.selected-order .cs-pixel-code {
    color: #38bdf8 !important;
}
html[data-theme="dark"] .cs-pixel-card.selected-order .cs-pixel-stat-box,
html.theme-dark .cs-pixel-card.selected-order .cs-pixel-stat-box,
html.dark-mode .cs-pixel-card.selected-order .cs-pixel-stat-box {
    background: #0d1524 !important;
    border-color: rgba(56, 189, 248, 0.3) !important;
}
html[data-theme="dark"] .cs-pixel-card.selected-order .cs-pixel-btn,
html.theme-dark .cs-pixel-card.selected-order .cs-pixel-btn,
html.dark-mode .cs-pixel-card.selected-order .cs-pixel-btn {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    border-color: #22c55e !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .cs-pixel-code,
html.theme-dark .cs-pixel-code,
html.dark-mode .cs-pixel-code {
    color: #f8fafc !important;
    font-weight: 800 !important;
}
html[data-theme="dark"] .cs-pixel-date,
html.theme-dark .cs-pixel-date,
html.dark-mode .cs-pixel-date {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .cs-pixel-stat-box,
html.theme-dark .cs-pixel-stat-box,
html.dark-mode .cs-pixel-stat-box {
    background: #0d1524 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .cs-pixel-stat-lbl,
html.theme-dark .cs-pixel-stat-lbl,
html.dark-mode .cs-pixel-stat-lbl {
    color: #94a3b8 !important;
}
html[data-theme="dark"] .cs-pixel-bar-wrap,
html.theme-dark .cs-pixel-bar-wrap,
html.dark-mode .cs-pixel-bar-wrap {
    background: #090e18 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .cs-pixel-card-footer,
html.theme-dark .cs-pixel-card-footer,
html.dark-mode .cs-pixel-card-footer {
    border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .cs-copy-code-pill,
html[data-theme="dark"] .cs-code-copy-group,
html.theme-dark .cs-copy-code-pill,
html.theme-dark .cs-code-copy-group,
html.dark-mode .cs-copy-code-pill,
html.dark-mode .cs-code-copy-group {
    background: #0d1524 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #38bdf8 !important;
}
html[data-theme="dark"] .cs-selectable-code,
html.theme-dark .cs-selectable-code,
html.dark-mode .cs-selectable-code {
    color: #38bdf8 !important;
}
html[data-theme="dark"] .cs-copy-code-btn,
html.theme-dark .cs-copy-code-btn,
html.dark-mode .cs-copy-code-btn {
    color: #38bdf8 !important;
}
html[data-theme="dark"] .cs-pixel-btn,
html.theme-dark .cs-pixel-btn,
html.dark-mode .cs-pixel-btn {
    background: rgba(34, 197, 94, 0.16) !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    color: #4ade80 !important;
    font-weight: 700 !important;
}


/* ========================================================
   CHUNG SỨC: KHUNG NHẬP MÃ MỜI ĐẲNG CẤP (CYBER DARK & APPLE LIGHT)
   ======================================================== */

/* --- 1. CHẾ ĐỘ NỀN TỐI (DARK MODE) --- */
html[data-theme="dark"] .cs-single-code-wrap,
html.theme-dark .cs-single-code-wrap,
html.dark-mode .cs-single-code-wrap,
.cs-single-code-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #101a2e 0%, #0d1526 100%) !important;
    border: 2px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 13px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 15px rgba(56, 189, 248, 0.15) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden;
}

html[data-theme="dark"] .cs-single-code-wrap:hover,
html.theme-dark .cs-single-code-wrap:hover,
html.dark-mode .cs-single-code-wrap:hover {
    border-color: #38bdf8 !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6), inset 0 2px 6px rgba(0, 0, 0, 0.5), 0 0 22px rgba(56, 189, 248, 0.25) !important;
}

html[data-theme="dark"] .cs-single-code-wrap:focus-within,
html.theme-dark .cs-single-code-wrap:focus-within,
html.dark-mode .cs-single-code-wrap:focus-within {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28), 0 0 30px rgba(56, 189, 248, 0.45), inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .cs-code-prefix-icon,
html.theme-dark .cs-code-prefix-icon,
html.dark-mode .cs-code-prefix-icon,
.cs-code-prefix-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.15) !important;
    border: 1px solid rgba(56, 189, 248, 0.35) !important;
    color: #38bdf8 !important;
    font-size: 15px;
    filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
    flex-shrink: 0;
    pointer-events: none;
}

html[data-theme="dark"] .cs-single-code-input,
html.theme-dark .cs-single-code-input,
html.dark-mode .cs-single-code-input,
.cs-single-code-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #38bdf8 !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 13px 10px 13px 12px !important;
    height: 48px !important;
    box-shadow: none !important;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
}

html[data-theme="dark"] .cs-single-code-input::placeholder,
html.theme-dark .cs-single-code-input::placeholder,
html.dark-mode .cs-single-code-input::placeholder,
.cs-single-code-input::placeholder {
    color: #64748b !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
    text-shadow: none !important;
}

html[data-theme="dark"] .cs-code-input-actions,
html.theme-dark .cs-code-input-actions,
html.dark-mode .cs-code-input-actions,
.cs-code-input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
    flex-shrink: 0;
}

html[data-theme="dark"] .cs-quick-paste-btn,
html.theme-dark .cs-quick-paste-btn,
html.dark-mode .cs-quick-paste-btn,
.cs-quick-paste-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    background: rgba(56, 189, 248, 0.16) !important;
    border: 1px solid rgba(56, 189, 248, 0.45) !important;
    color: #38bdf8 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-theme="dark"] .cs-quick-paste-btn:hover,
html.theme-dark .cs-quick-paste-btn:hover,
html.dark-mode .cs-quick-paste-btn:hover {
    background: rgba(56, 189, 248, 0.3) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.55) !important;
    transform: translateY(-1px);
}

html[data-theme="dark"] .cs-clear-input-btn,
html.theme-dark .cs-clear-input-btn,
html.dark-mode .cs-clear-input-btn,
.cs-clear-input-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 17px;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}

html[data-theme="dark"] .cs-clear-input-btn:hover,
html.theme-dark .cs-clear-input-btn:hover,
html.dark-mode .cs-clear-input-btn:hover {
    color: #ef4444;
}

html[data-theme="dark"] #csCodesInput,
html.theme-dark #csCodesInput,
html.dark-mode #csCodesInput,
html[data-theme="dark"] #csCustomAccsInput,
html.theme-dark #csCustomAccsInput,
html.dark-mode #csCustomAccsInput {
    background: linear-gradient(135deg, #101a2e 0%, #0d1526 100%) !important;
    border: 2px solid rgba(56, 189, 248, 0.45) !important;
    border-radius: 12px !important;
    color: #38bdf8 !important;
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.25s ease !important;
}

html[data-theme="dark"] #csCodesInput:focus,
html.theme-dark #csCodesInput:focus,
html.dark-mode #csCodesInput:focus,
html[data-theme="dark"] #csCustomAccsInput:focus,
html.theme-dark #csCustomAccsInput:focus,
html.dark-mode #csCustomAccsInput:focus {
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.28), 0 0 25px rgba(56, 189, 248, 0.35) !important;
}

/* --- 2. CHẾ ĐỘ NỀN SÁNG (LIGHT MODE) --- */
html[data-theme="light"] .cs-single-code-wrap,
html.theme-light .cs-single-code-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 13px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05), inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden;
}

html[data-theme="light"] .cs-single-code-wrap:hover,
html.theme-light .cs-single-code-wrap:hover {
    border-color: #22c55e !important;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12) !important;
}

html[data-theme="light"] .cs-single-code-wrap:focus-within,
html.theme-light .cs-single-code-wrap:focus-within {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3.5px rgba(22, 163, 74, 0.2), 0 6px 20px rgba(22, 163, 74, 0.15) !important;
}

html[data-theme="light"] .cs-code-prefix-icon,
html.theme-light .cs-code-prefix-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: 8px;
    border-radius: 9px;
    background: #dcfce7 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    font-size: 15px;
    flex-shrink: 0;
    pointer-events: none;
}

html[data-theme="light"] .cs-single-code-input,
html.theme-light .cs-single-code-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #0f172a !important;
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    padding: 13px 10px 13px 12px !important;
    height: 48px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

html[data-theme="light"] .cs-single-code-input::placeholder,
html.theme-light .cs-single-code-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: normal !important;
}

html[data-theme="light"] .cs-code-input-actions,
html.theme-light .cs-code-input-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
    flex-shrink: 0;
}

html[data-theme="light"] .cs-quick-paste-btn,
html.theme-light .cs-quick-paste-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    background: #f0fdf4 !important;
    border: 1px solid #86efac !important;
    color: #15803d !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

html[data-theme="light"] .cs-quick-paste-btn:hover,
html.theme-light .cs-quick-paste-btn:hover {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(22, 163, 74, 0.25) !important;
    transform: translateY(-1px);
}

html[data-theme="light"] .cs-clear-input-btn,
html.theme-light .cs-clear-input-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 17px;
    padding: 4px 6px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.15s ease;
}

html[data-theme="light"] .cs-clear-input-btn:hover,
html.theme-light .cs-clear-input-btn:hover {
    color: #dc2626;
}

html[data-theme="light"] #csCodesInput,
html.theme-light #csCodesInput,
html[data-theme="light"] #csCustomAccsInput,
html.theme-light #csCustomAccsInput {
    background: #ffffff !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 12px !important;
    color: #0f172a !important;
    font-family: 'JetBrains Mono', Consolas, monospace !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.25s ease !important;
}

html[data-theme="light"] #csCodesInput:focus,
html.theme-light #csCodesInput:focus,
html[data-theme="light"] #csCustomAccsInput:focus,
html.theme-light #csCustomAccsInput:focus {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3.5px rgba(22, 163, 74, 0.2), 0 4px 16px rgba(22, 163, 74, 0.12) !important;
}

/* Status pills */
.cs-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 11.5px;
    font-weight: 700;
}

html[data-theme="dark"] .cs-status-pill.cs-status-valid,
html.theme-dark .cs-status-pill.cs-status-valid,
html.dark-mode .cs-status-pill.cs-status-valid {
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(34, 197, 94, 0.45);
    color: #4ade80;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.25);
}

html[data-theme="dark"] .cs-status-pill.cs-status-invalid,
html.theme-dark .cs-status-pill.cs-status-invalid,
html.dark-mode .cs-status-pill.cs-status-invalid {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid rgba(239, 68, 68, 0.45);
    color: #f87171;
}

html[data-theme="light"] .cs-status-pill.cs-status-valid,
html.theme-light .cs-status-pill.cs-status-valid {
    background: #dcfce7;
    border: 1px solid #86efac;
    color: #15803d;
}

html[data-theme="light"] .cs-status-pill.cs-status-invalid,
html.theme-light .cs-status-pill.cs-status-invalid {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #dc2626;
}

/* Helper text */
html[data-theme="dark"] .cs-code-help-text,
html.theme-dark .cs-code-help-text,
html.dark-mode .cs-code-help-text {
    color: #94a3b8;
}

html[data-theme="light"] .cs-code-help-text,
html.theme-light .cs-code-help-text {
    color: #475569;
}