/* ========================================
   EMPTY STATES & ASYMMETRIC LAYOUT IMPROVEMENTS
   ======================================== */

/* Tailwind .hidden utility (load sau app.min.css + !important để thắng mọi
   selector khác ghi đè display khi không đính kèm class .hidden).
   KHÔNG đụng .multi-select-dropdown.hidden, .app-modal-overlay.hidden,
   .mobile-tab-btn.hidden... — các rule đó đã có display riêng ở app.min.css */
.hidden { display: none !important; }

/* ==================== 0. FOUNDATION LAYER ====================
   Reset, tokens, accessibility utilities, motion preference.
   Nên đặt đầu file để mọi rule bên dưới kế thừa. */

/* Header luôn nổi trên cùng, fix cứng vị trí để không bị đẩy xuống bởi padding/wrapper */
header.sticky,
header.sticky.top-0,
.header-sticky,
[class*="sticky"][class*="top-0"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
}
/* Bù padding-top cho content khi header dùng fixed — gọn lại */
body, main, #app {
    padding-top: 56px !important;
}
@media (max-width: 768px) {
    body, main, #app {
        padding-top: 52px !important;
    }
}
/* Bảng stats: vô hiệu hóa sticky thead để tránh xung đột với scroll container (gây lỗi chồng row)
   Theo nguyên tắc "table-header-group", thead luôn nằm trên đầu tbody trong flow bình thường. */
#stats-table thead,
#stats-table-body thead,
thead.bg-inputbg.sticky,
thead[class*="sticky"][class*="top-0"] {
    position: static !important;
    top: auto !important;
    z-index: auto !important;
}
/* Đảm bảo th cells có nền đặc và không wrap text thành nhiều dòng xấu */
#stats-table th,
thead.bg-inputbg th {
    background-color: var(--ghz-cardbg, #1f242b) !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}
/* Cột Thao tác: cho phép wrap để button gọn lại, không phình cột đè lên header */
#stats-table th:last-child,
#stats-table td:last-child,
thead.bg-inputbg th:last-child {
    white-space: normal !important;
    text-align: center !important;
    width: 1% !important;
}
/* Button "Chi tiết" trong bảng stats: gọn lại 1 dòng, không tràn cột */
#stats-table td button,
#stats-table-body td button {
    white-space: nowrap !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Bảng stats: min-width vừa đủ để không cuộn ngang gây đè header */
#stats-table {
    min-width: 640px !important;
}
/* Fix lỗi button "Chi tiết" đè lên hàng trên khi cuộn dọc:
   - Row được hover sẽ có z-index cao hơn các row khác
   - Row KHÔNG hover phải có z-index thấp để button không "trồi" lên */
#stats-table tbody tr {
    position: relative !important;
    z-index: 1 !important;
}
#stats-table tbody tr:hover {
    z-index: 5 !important;
}
#stats-table tbody tr:hover td button {
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05) !important;
}
/* Loại bỏ box-shadow/transform có thể khiến button "trồi" khỏi row */
#stats-table td button,
#stats-table-body td button {
    box-shadow: none !important;
    transform: none !important;
    position: static !important;
}
/* FIX: Khi cuộn, button "Chi tiết" tuyệt đối KHÔNG được phép đè qua header/hàng khác.
   Dùng overflow:hidden trên td để clip mọi nội dung tràn, kết hợp overflow:hidden trên row. */
#stats-table tbody tr,
#stats-table-body tr {
    overflow: hidden !important;
    transform: translateZ(0) !important; /* ép tạo stacking context cho row */
}
#stats-table td,
#stats-table-body td {
    overflow: hidden !important;
}
/* Trên td cuối (Thao tác), vẫn cần button click được → bỏ overflow hidden,
   nhưng giới hạn kích thước button để không tràn ra ngoài viewport của cell */
#stats-table td:last-child,
#stats-table-body td:last-child {
    overflow: visible !important;
}
/* Khi cuộn xa, button vẫn có thể bị "trồi" do z-index. Ép z-index thấp để header luôn thắng */
#stats-table td:last-child button,
#stats-table-body td:last-child button {
    z-index: 2 !important;
    position: relative !important;
}
/* Vô hiệu hóa mọi hover effect tạo stacking context "nổi" trên row */
#stats-table tbody tr:hover td button,
#stats-table-body tr:hover td button {
    z-index: 3 !important;
    transform: none !important;
}
/* Các row kế tiếp phải có z-index thấp hơn để không đè row trước khi cuộn */
#stats-table tbody,
#stats-table-body {
    isolation: isolate !important;
}

/* ========== HEADER / TOPBAR CỐ ĐỊNH KHI CUỘN ========== */
/* Header cố định đầu trang: luôn hiển thị khi cuộn dọc */
header,
.app-header,
.topbar,
.ghz-header,
[class*="header"]:not(table th),
[class*="topbar"],
[class*="navbar"] {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background-color: var(--ghz-cardbg, #1f242b) !important;
    /* backdrop-filter có thể làm element trong suốt khi cuộn - giữ nguyên hoặc tắt */
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}
/* Đảm bảo bóng đổ nhẹ để tách header với nội dung khi cuộn */
/* Giảm khoảng cách giữa header và page-header đầu tiên */
.ui-page-header {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 4px !important;
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

/* Khu vực CTV (ctv-self-view) là view standalone khi đăng nhập bằng tài khoản CTV —
   thay thế hoàn toàn layout admin. Force màu sáng + tương phản cao cho title/copy/eyebrow
   để luôn đọc được trên mọi theme, kể cả theme pastel có --ghz-text-primary tối. */
#ctv-self-view .ui-page-header {
    padding: 12px 16px;
    margin-bottom: 16px !important;
    background: var(--ghz-card-glass-bg, rgba(20, 23, 27, 0.55)) !important;
    border: 1px solid var(--ghz-card-glass-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(16px) saturate(1.3));
    backdrop-filter: var(--ghz-card-glass-blur, blur(16px) saturate(1.3));
}
#ctv-self-view .ui-page-title {
    color: #f7fafc !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#ctv-self-view .ui-page-copy {
    color: #cbd5e1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#ctv-self-view .ui-page-eyebrow {
    color: #facc15 !important;
    background: rgba(250, 204, 21, 0.18) !important;
    border: 1px solid rgba(250, 204, 21, 0.35);
}
#ctv-self-view .ui-page-eyebrow i { color: #facc15 !important; }

.ui-page-header + .card,
.ui-page-header + .grid,
.ui-page-header + details,
.ui-page-header + .space-y-6 {
    margin-top: 0 !important;
}

/* Screen-reader-only utility (label/title ẩn cho a11y) */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Reduced motion: tắt animation/transition cho user yêu cầu
   (NHƯNG vẫn cho phép rank-card chạy animation gradient liquid — vì nó là background chuyển động, không gây say xe) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .rank-card.rank-1, .rank-card.rank-1::before, .rank-card.rank-1::after {
        animation-name: liquidFlow !important;
        animation-duration: 8s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }
    .rank-card.rank-2, .rank-card.rank-2::before, .rank-card.rank-2::after {
        animation-name: liquidFlow !important;
        animation-duration: 10s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }
    .rank-card.rank-3, .rank-card.rank-3::before, .rank-card.rank-3::after {
        animation-name: liquidFlow !important;
        animation-duration: 12s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
    }
}

/* Focus-visible: outline rõ cho keyboard nav (chuột không bị) — theme-aware */
:focus-visible {
    outline: 2px solid var(--ghz-brand-color, #34d399);
    outline-offset: 2px;
}

/* Firefox scrollbar + WebKit — theme-aware (fallback giữ classic đen) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ghz-scrollbar-thumb, #2a2e35) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--ghz-scrollbar-track, transparent); }
*::-webkit-scrollbar-thumb {
    background: var(--ghz-scrollbar-thumb, #2a2e35);
    border-radius: 999px;
}

/* ==================== AVATAR - FIX LỆCH ====================
   Đảm bảo avatar hiển thị đúng khi có ảnh: cover + center */
.p026-info-note .p026-shift-chip {
    vertical-align: middle;
}

/* ========== P026 EMP TYPE CHIPS — LIGHT THEME VISIBILITY ========== */
/* Chỉ emp-type badges (KDCT, KDPT...) — KHÔNG phải shift chips (S, C, T) */
.p026-emp-type-sm {
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    filter: brightness(0.9) saturate(1.2) !important;
}
/* Emp type màu xanh lá (kinhdoanh) — tăng contrast */
.p026-emp-type-sm.kinhdoanh {
    color: #166534 !important;
    background-color: #bbf7d0 !important;
    border-color: #22c55e !important;
    filter: none !important;
}
/* Emp type màu tím (partime) — tăng contrast */
.p026-emp-type-sm.partime {
    color: #5b21b6 !important;
    background-color: #ddd6fe !important;
    border-color: #a78bfa !important;
    filter: none !important;
}
/* Icon trong emp-type */
.p026-emp-type-sm i {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2)) !important;
}

/* Shift chips (S, C, T) — GIỮ NGUYÊN, không chỉnh */
.p026-shift-chip {
    /* Giữ nguyên style gốc */
}

/* ========== CELL VALUE — THEME AWARE ========== */
/* Giá trị số (10.000.000đ) cần nổi bật trên cả 2 theme */
.cell-value {
    color: var(--ghz-text-primary, #e5e7eb) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
/* Tiền tệ/đơn vị trong cell-value */
.cell-value .currency,
.cell-value .unit {
    color: var(--ghz-text-secondary, #9ca3af) !important;
}

/* ========== BUTTON "XEM" CHI TIẾT — THEME AWARE ========== */
/* Button text-secondary: dùng biến theme để không bị xám nhạt */
button.text-secondary {
    color: var(--ghz-text-secondary, #9ca3af) !important;
    background-color: var(--ghz-card-bg, #1f242b) !important;
    border: 1px solid var(--ghz-card-border, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    padding: 3px 8px !important;
    margin-right: 4px !important;
    font-size: 0.7rem !important;
    border-radius: 4px !important;
    line-height: 1.2 !important;
}
button.text-secondary:hover {
    color: var(--ghz-brand-active, #00c37a) !important;
    border-color: var(--ghz-brand-active, #00c37a) !important;
    background-color: var(--ghz-card-bg, #1f242b) !important;
    box-shadow: 0 2px 6px rgba(0, 195, 122, 0.25) !important;
}
/* Icon trong button */
button.text-secondary i {
    color: inherit !important;
    margin-right: 2px !important;
    font-size: 0.65rem !important;
}

/* ========== BẢNG GIAO DỊCH CTV — COMPACT ========== */
/* Cell có class cell-value hoặc nằm trong bảng giao dịch cần gọn */
td:has(> .cell-value),
td[data-label] {
    padding: 6px 8px !important;
    vertical-align: middle !important;
    font-size: 0.75rem !important;
}
/* Text trong bảng giao dịch: nhỏ gọn, theme-aware */
td[data-label] {
    color: var(--ghz-text-secondary, #9ca3af) !important;
}
td[data-label="Ngày"],
td[data-label="CTV"],
td[data-label="Khách hàng"],
td[data-label="SĐT khách"] {
    color: var(--ghz-text-primary, #e5e7eb) !important;
    white-space: nowrap !important;
}
/* Giá trị tiền: monospace + bold */
td[data-label="Giá trị đơn"] .cell-value,
td[data-label="Hoa hồng"] .cell-value {
    font-variant-numeric: tabular-nums !important;
    font-weight: 600 !important;
}
/* Status "Đã duyệt" — đảm bảo nổi bật */
td[data-label="Trạng thái"] .text-green-400 {
    color: #4ade80 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.3) !important;
}
/* Row hover mượt hơn */
tr.hover\:bg-darkbg\/50:hover {
    background-color: var(--ghz-hover-bg, rgba(255, 255, 255, 0.04)) !important;
}
.avatar-circle {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ==================== GUIDE IFRAME (tab Hướng dẫn) ====================
   bundle.js tạo iframe với class .guide-content-frame để load App/huong-dan.html.
   Iframe mặc định 300×150 — phải ép fill width/height hoặc nội dung bị co. */
.guide-content-frame {
    width: 100% !important;
    min-height: calc(100vh - 80px) !important;
    border: 0 !important;
    display: block !important;
}
@media (max-width: 768px) {
    .guide-content-frame { min-height: calc(100dvh - 70px) !important; }
}

/* ==================== HEADER SEARCH TRIGGER ====================
   Hiển thị kbd ⌘K bên cạnh icon search để gợi ý shortcut. */
#header-search-trigger {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 10px !important;
}
#header-search-trigger .header-search-kbd {
    background: var(--ghz-input-bg, rgba(255, 255, 255, 0.08));
    color: var(--ghz-text-muted, #9ca3af);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
}
@media (max-width: 640px) {
    /* Mobile: chỉ hiện icon, ẩn kbd để gọn */
    #header-search-trigger .header-search-kbd { display: none; }
}

/* ==================== 1. EMPTY STATES ==================== */

/* Empty State Container */
.empty-state {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 4rem 2rem;
    animation: emptyStateFadeIn 0.4s ease-out;
    /* lime debug outline removed */
}

/* When empty-state lives inside a table cell, force it to span full cell width */
td > .empty-state,
td.p-0 > .empty-state {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.empty-state > * {
    justify-self: center;
    max-width: 100%;
    min-width: 0;
}

.empty-state .empty-state-icon {
    margin-left: auto;
    margin-right: auto;
}

.empty-state .empty-state-cta {
    margin-left: auto;
    margin-right: auto;
}

@keyframes emptyStateFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Empty State Icon Container */
.empty-state-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.25rem;
    background: var(--ghz-brand-soft-12, rgba(0, 195, 122, 0.14));
    border: 1px solid var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.28));
    box-shadow: 0 0 24px var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.18));
}

.empty-state-icon i {
    font-size: 2rem;
    color: var(--ghz-brand-color, rgba(0, 195, 122, 0.6));
}

/* Variants cho icon colors */
.empty-state-icon.variant-blue {
    background: var(--ghz-info-bg, rgba(77, 141, 255, 0.14));
    border-color: color-mix(in srgb, var(--ghz-info, #4d8dff) 28%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--ghz-info, #4d8dff) 18%, transparent);
}

.empty-state-icon.variant-blue i {
    color: color-mix(in srgb, var(--ghz-info, #4d8dff) 60%, transparent);
}

.empty-state-icon.variant-yellow {
    background: var(--ghz-warning-bg, rgba(234, 179, 8, 0.14));
    border-color: color-mix(in srgb, var(--ghz-warning, #eab308) 28%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--ghz-warning, #eab308) 18%, transparent);
}

.empty-state-icon.variant-yellow i {
    color: color-mix(in srgb, var(--ghz-warning, #eab308) 60%, transparent);
}

.empty-state-icon.variant-red {
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.14));
    border-color: color-mix(in srgb, var(--ghz-danger, #ef4444) 28%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--ghz-danger, #ef4444) 18%, transparent);
}

.empty-state-icon.variant-red i {
    color: color-mix(in srgb, var(--ghz-danger, #ef4444) 60%, transparent);
}

/* Empty State Title */
.empty-state-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ghz-text-primary, #ffffff);
    margin-bottom: 0.5rem;
}

/* Empty State Description */
.empty-state-description {
    font-size: 0.875rem;
    color: var(--ghz-text-muted, #6b7280);
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 28rem;
    min-width: 0;
    justify-self: center;
    text-align: center !important;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Empty State Action Button */
.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ghz-brand-active-bg, rgba(0, 195, 122, 0.18));
    color: var(--ghz-text-on-brand-strong, #052e16);
    border: 1px solid var(--ghz-brand-active-border, rgba(0, 195, 122, 0.45));
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 35%, transparent);
}

.empty-state-action:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 25%, transparent);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 45%, transparent);
}

.empty-state-action:active {
    transform: translateY(0);
}

/* Secondary action (optional) */
.empty-state-action-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--ghz-text-muted, #9ca3af);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.75rem;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.empty-state-action-secondary:hover {
    background: var(--ghz-brand-soft-08, #1f242b);
    color: var(--ghz-text-primary, #ffffff);
    border-color: var(--ghz-info, #4d8dff);
}

/* Empty State trong Table */
.table-empty-state {
    padding: 3rem 2rem;
}

.table-empty-state .empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
}

.table-empty-state .empty-state-icon i {
    font-size: 1.5rem;
}

.table-empty-state .empty-state-title {
    font-size: 1rem;
}

.table-empty-state .empty-state-description {
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

/* ==================== 5. ASYMMETRIC LAYOUT ==================== */

/* Grid System với Asymmetric Layout */
.asymmetric-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
}

/* Hero Metrics - Larger Cards */
.asymmetric-col-7 {
    grid-column: span 7;
}

.asymmetric-col-5 {
    grid-column: span 5;
}

.asymmetric-col-8 {
    grid-column: span 8;
}

.asymmetric-col-4 {
    grid-column: span 4;
}

.asymmetric-col-9 {
    grid-column: span 9;
}

.asymmetric-col-3 {
    grid-column: span 3;
}

/* Hero Card - Larger visual impact */
.hero-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 20px;
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.hero-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--ghz-brand-soft-08, rgba(0, 195, 122, 0.08)) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.hero-metric-value {
    font-size: 3rem;
    font-weight: 800;
    color: var(--ghz-brand-color, #00c37a);
    line-height: 1;
    margin: 1rem 0 0.5rem;
    padding: 4px 0;
    background: linear-gradient(135deg, var(--ghz-grad-1, #00c37a), var(--ghz-grad-2, #4d8dff));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-metric-label {
    font-size: 0.875rem;
    color: var(--ghz-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.hero-metric-trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--ghz-brand-soft-08, rgba(0, 195, 122, 0.1));
    color: var(--ghz-brand-color, #00c37a);
}

.hero-metric-trend.trend-down {
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.1));
    color: var(--ghz-danger, #f87171);
}

.hero-metric-trend i {
    font-size: 0.75rem;
}

/* Secondary Card - Smaller support cards */
.secondary-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
}

.secondary-metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ghz-text-primary, #ffffff);
    margin: 0.75rem 0 0.25rem;
}

.secondary-metric-label {
    font-size: 0.75rem;
    color: var(--ghz-text-muted, #9ca3af);
    font-weight: 500;
}

.secondary-metric-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    font-size: 1.125rem;
}

.secondary-metric-icon.icon-primary {
    background: var(--ghz-brand-soft-12, rgba(0, 195, 122, 0.12));
    color: var(--ghz-brand-color, #00c37a);
}

.secondary-metric-icon.icon-secondary {
    background: var(--ghz-info-bg, rgba(77, 141, 255, 0.12));
    color: var(--ghz-info, #4d8dff);
}

.secondary-metric-icon.icon-warning {
    background: var(--ghz-warning-bg, rgba(234, 179, 8, 0.12));
    color: var(--ghz-warning, #eab308);
}

.secondary-metric-icon.icon-danger {
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.12));
    color: var(--ghz-danger, #ef4444);
}

/* Detail Card - Information dense */
.detail-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.4);
}

.detail-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
}

.detail-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ghz-text-primary, #ffffff);
}

.detail-card-subtitle {
    font-size: 0.75rem;
    color: var(--ghz-text-muted, #6b7280);
    margin-top: 0.25rem;
}

.detail-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ghz-card-border, rgba(42, 46, 53, 0.5));
}

.detail-list-item:last-child {
    border-bottom: none;
}

.detail-list-label {
    font-size: 0.8125rem;
    color: var(--ghz-text-muted, #9ca3af);
}

.detail-list-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ghz-text-primary, #ffffff);
}

/* Responsive Asymmetric Layout */
@media (max-width: 1023px) {
    .asymmetric-grid {
        grid-template-columns: repeat(8, 1fr);
    }
    
    .asymmetric-col-7,
    .asymmetric-col-8,
    .asymmetric-col-9 {
        grid-column: span 8;
    }
    
    .asymmetric-col-5,
    .asymmetric-col-4,
    .asymmetric-col-3 {
        grid-column: span 8;
    }
}

@media (max-width: 767px) {
    .asymmetric-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .asymmetric-col-7,
    .asymmetric-col-8,
    .asymmetric-col-9,
    .asymmetric-col-5,
    .asymmetric-col-4,
    .asymmetric-col-3 {
        grid-column: span 1;
    }
    
    .hero-card {
        padding: 1.5rem;
    }
    
    .hero-metric-value {
        font-size: 2.25rem;
    }
    
    .empty-state {
        padding: 3rem 1.5rem;
    }
}

/* Staggered Animation for Cards */
.asymmetric-grid > * {
    animation: cardEnter 0.4s ease-out backwards;
}

.asymmetric-grid > *:nth-child(1) {
    animation-delay: 0.05s;
}

.asymmetric-grid > *:nth-child(2) {
    animation-delay: 0.1s;
}

.asymmetric-grid > *:nth-child(3) {
    animation-delay: 0.15s;
}

.asymmetric-grid > *:nth-child(4) {
    animation-delay: 0.2s;
}

.asymmetric-grid > *:nth-child(5) {
    animation-delay: 0.25s;
}

.asymmetric-grid > *:nth-child(6) {
    animation-delay: 0.3s;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility: Hide element when showing empty state */
.has-empty-state {
    display: none !important;
}


/* ==================== 6. SKELETON LOADING STATES ==================== */

/* Skeleton base */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--ghz-input-bg, #181b20) 0%,
        var(--ghz-card-border, #1f242b) 50%,
        var(--ghz-input-bg, #181b20) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Skeleton variants */
.skeleton-text {
    height: 14px;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-text.large {
    height: 20px;
}

.skeleton-text.small {
    height: 10px;
}

.skeleton-title {
    height: 24px;
    width: 60%;
    border-radius: 6px;
    margin-bottom: 12px;
}

.skeleton-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.skeleton-button {
    height: 40px;
    border-radius: 12px;
}

.skeleton-card {
    height: 120px;
    border-radius: 16px;
}

.skeleton-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
}

/* Skeleton Card Layout */
.skeleton-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.skeleton-list-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 12px;
    margin-bottom: 8px;
}

.skeleton-list-item-content {
    flex: 1;
    min-width: 0;
}

/* Skeleton Table */
.skeleton-table-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
}

.skeleton-table-cell {
    height: 14px;
    border-radius: 4px;
}

/* Specific skeleton components */
.skeleton-inventory-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-metric-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Pulse variant (alternative to shimmer) */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* Disable skeleton animation on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--ghz-card-border, #1f242b);
    }
    
    .skeleton-pulse {
        animation: none;
        opacity: 0.5;
    }
}


/* ==================== 7. ADVANCED FILTERS ==================== */

/* Filter Panel */
.filter-panel {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.filter-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ghz-text-primary, #ffffff);
}

.filter-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Filter Grid */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 767px) {
    .filter-grid {
        grid-template-columns: 1fr;
    }
}

/* Date Range Picker */
.date-range-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 10px;
    padding: 8px 12px;
    transition: border-color 0.2s ease;
}

.date-range-picker:focus-within {
    border-color: var(--ghz-brand-color, #00c37a);
}

.date-range-picker input[type="date"] {
    background: transparent;
    border: none;
    color: var(--ghz-text-primary, #ffffff);
    font-size: 13px;
    padding: 0;
    outline: none;
    flex: 1;
    min-width: 0;
}

.date-range-separator {
    color: var(--ghz-text-muted, #6b7280);
    font-size: 12px;
    flex-shrink: 0;
}

/* Multi-select Filter */
.multi-select-wrapper {
    position: relative;
    min-width: 0;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--ghz-text-primary, #ffffff);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.multi-select-trigger:hover,
.multi-select-trigger[aria-expanded="true"] {
    border-color: var(--ghz-info, #4d8dff);
}

.multi-select-trigger-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multi-select-trigger-icon {
    flex-shrink: 0;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 12px;
    transition: transform 0.2s ease;
}

.multi-select-trigger[aria-expanded="true"] .multi-select-trigger-icon {
    transform: rotate(180deg);
}

.multi-select-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 280px;
    overflow-y: auto;
    background: var(--ghz-card-bg, #1f242b);
    border: 1px solid var(--ghz-card-border, #3a424d);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
    animation: dropdownEnter 0.15s ease-out;
}

.multi-select-dropdown.hidden {
    display: none;
}

@keyframes dropdownEnter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.multi-select-search {
    width: 100%;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--ghz-text-primary, #ffffff);
    font-size: 13px;
    outline: none;
    margin-bottom: 8px;
}

.multi-select-search:focus {
    border-color: var(--ghz-info, #4d8dff);
}

.multi-select-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.multi-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.multi-select-option:hover {
    background: rgba(77, 141, 255, 0.1);
}

.multi-select-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--ghz-brand-color, #00c37a);
}

.multi-select-option-label {
    flex: 1;
    min-width: 0;
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.multi-select-option input[type="checkbox"]:checked + .multi-select-option-label {
    color: var(--ghz-text-primary, #ffffff);
    font-weight: 600;
}

.multi-select-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15));
    color: var(--ghz-brand-color, #00c37a);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    margin-left: 6px;
}

/* Filter Tags */
.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ghz-card-border, #2a2e35);
}

.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ghz-info-bg, rgba(77, 141, 255, 0.12));
    border: 1px solid color-mix(in srgb, var(--ghz-info, #4d8dff) 25%, transparent);
    color: var(--ghz-info, #4d8dff);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    animation: filterTagEnter 0.2s ease-out;
}

@keyframes filterTagEnter {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.filter-tag-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.filter-tag-remove:hover {
    background: color-mix(in srgb, var(--ghz-info, #4d8dff) 20%, transparent);
}

/* Clear All Button */
.filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-clear-all:hover {
    border-color: var(--ghz-danger, #ef4444);
    color: var(--ghz-danger, #ef4444);
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.1));
}

/* Filter Presets */
.filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.filter-preset-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-preset-btn:hover {
    border-color: var(--ghz-info, #4d8dff);
    color: var(--ghz-info, #4d8dff);
    background: color-mix(in srgb, var(--ghz-info, #4d8dff) 8%, transparent);
}

.filter-preset-btn.active {
    border-color: var(--ghz-brand-color, #00c37a);
    background: var(--ghz-brand-soft-12, rgba(0, 195, 122, 0.12));
    color: var(--ghz-brand-color, #00c37a);
}

.filter-results-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 13px;
    margin-top: 12px;
}

.filter-results-count strong {
    color: var(--ghz-text-primary, #ffffff);
    font-weight: 700;
}


/* ==================== 8. OPTIMISTIC UPDATE INDICATORS ==================== */

/* Optimistic state on elements */
.optimistic-updating {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.optimistic-updating::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 195, 122, 0.1) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: optimistic-shimmer 1.5s infinite;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes optimistic-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Success flash animation */
.optimistic-success {
    animation: optimistic-success-flash 0.6s ease-out;
}

@keyframes optimistic-success-flash {
    0%, 100% {
        background-color: transparent;
    }
    25% {
        background-color: rgba(0, 195, 122, 0.15);
    }
}

/* Error shake animation */
.optimistic-error {
    animation: optimistic-error-shake 0.4s ease-out;
}

@keyframes optimistic-error-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-8px);
    }
    75% {
        transform: translateX(8px);
    }
}

/* Undo toast styles */
.undo-toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.undo-toast-message {
    flex: 1;
    min-width: 0;
}

.undo-toast-action {
    flex-shrink: 0;
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15));
    border: 1px solid var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.3));
    color: var(--ghz-brand-color, #00c37a);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.undo-toast-action:hover {
    background: rgba(0, 195, 122, 0.25);
    border-color: rgba(0, 195, 122, 0.5);
}

/* Loading dots for inline actions */
.loading-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: loading-dot-bounce 1.2s ease-in-out infinite;
}

.loading-dot:nth-child(1) {
    animation-delay: 0s;
}

.loading-dot:nth-child(2) {
    animation-delay: 0.15s;
}

.loading-dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loading-dot-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-8px);
        opacity: 1;
    }
}

/* ==================== 9. INVENTORY HISTORY & COMPLETED TASKS ==================== */

.task-item-completed {
    /* Theme engine chỉ thay các biến này trong checklist; fallback giữ nguyên Classic. */
    box-shadow: 0 0 0 1px var(--ghz-task-completed-ring, rgba(0, 195, 122, 0.35)),
                0 0 18px var(--ghz-task-completed-glow, rgba(0, 195, 122, 0.18));
}

/* ==================== 10. TOUCH SCROLL OPTIMIZATION ==================== */

/* Vertical scrollable lists: autocomplete, history, work logs, device lists, templates */
.inventory-autocomplete-listbox,
.imei-history-list,
.inventory-imei-history-body,
#employee-work-history-list,
#inventory-recent-imports,
#inventory-recent-exports,
#inventory-device-list,
#inventory-model-list,
#inventory-color-list,
#inventory-price-list {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Horizontal + vertical scroll for inventory history table wrapper */
.inventory-history-wrap {
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.task-item-completed input[type="checkbox"] {
    cursor: not-allowed !important;
}

.inventory-repair-tag {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.13);
    color: #f87171;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    line-height: 1rem;
    font-weight: 700;
}

.inventory-repair-tag i {
    margin-right: 0.35rem;
}

/* Modal này đã kế thừa style compact/center từ .app-modal-overlay > .card
   Không cần override riêng - đã đồng nhất với các modal khác */

.inventory-imei-history-body {
    max-height: calc(90vh - 9rem);
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

.imei-history-list {
    position: relative;
    display: grid;
    gap: 0.875rem;
}

.imei-history-list::before {
    content: '';
    position: absolute;
    top: 1.75rem;
    bottom: 1.75rem;
    left: 1.5rem;
    width: 1px;
    background: var(--ghz-card-border, #2a2e35);
}

.imei-history-item {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.875rem;
    color: var(--ghz-text-primary, #e5e7eb);
}

.imei-history-icon {
    position: relative;
    z-index: 1;
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ghz-card-glass-border, rgba(120,140,150,0.45));
    border-radius: 0.9rem;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.3));
    backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.3));
}

.imei-history-import { color: var(--ghz-success, #34d399); border-color: color-mix(in srgb, var(--ghz-success, #34d399) 40%, transparent); background: color-mix(in srgb, var(--ghz-success, #34d399) 12%, transparent); }
.imei-history-export { color: var(--ghz-warning, #fbbf24); border-color: color-mix(in srgb, var(--ghz-warning, #fbbf24) 40%, transparent); background: color-mix(in srgb, var(--ghz-warning, #fbbf24) 12%, transparent); }
.imei-history-repair { color: var(--ghz-danger, #f87171); border-color: color-mix(in srgb, var(--ghz-danger, #f87171) 45%, transparent); background: color-mix(in srgb, var(--ghz-danger, #f87171) 12%, transparent); }
.imei-history-correction { color: var(--ghz-info, #60a5fa); border-color: color-mix(in srgb, var(--ghz-info, #60a5fa) 40%, transparent); background: color-mix(in srgb, var(--ghz-info, #60a5fa) 12%, transparent); }
.imei-history-reversal { color: var(--ghz-info, #c084fc); border-color: color-mix(in srgb, var(--ghz-info, #c084fc) 40%, transparent); background: color-mix(in srgb, var(--ghz-info, #c084fc) 12%, transparent); }
.imei-history-void,
.imei-history-archive { color: var(--ghz-text-muted, #a78bfa); border-color: color-mix(in srgb, var(--ghz-text-muted, #a78bfa) 40%, transparent); background: color-mix(in srgb, var(--ghz-text-muted, #a78bfa) 12%, transparent); }

.imei-history-content {
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid var(--ghz-card-glass-border, rgba(255,255,255,0.12));
    border-radius: 1rem;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    box-shadow: var(--ghz-card-glass-shadow,
        0 1px 0 0 rgba(255,255,255,0.10) inset,
        0 8px 32px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.10));
    color: var(--ghz-text-primary, #e5e7eb);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.imei-history-item:hover .imei-history-content {
    border-color: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 45%, transparent);
    box-shadow: var(--ghz-card-glass-shadow,
        0 1px 0 0 rgba(255,255,255,0.10) inset,
        0 8px 32px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.10)),
        0 0 0 1px color-mix(in srgb, var(--ghz-brand-color, #00c37a) 18%, transparent);
}

.imei-history-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.65rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--ghz-card-glass-border, rgba(120,140,150,0.40));
    color: var(--ghz-text-primary, #e5e7eb);
}

.imei-history-title {
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.imei-history-time,
.imei-history-details {
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 0.75rem;
    line-height: 1.4;
}

.imei-history-time {
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--ghz-text-muted, #9ca3af) 10%, transparent);
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.imei-history-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1rem;
    margin-top: 0.85rem;
}

.imei-history-field {
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.imei-history-field-label {
    display: inline;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.imei-history-field-value {
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 0.84rem;
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
}

.imei-history-note {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--ghz-info, #60a5fa) 8%, transparent);
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(18px) saturate(1.2));
    backdrop-filter: var(--ghz-card-glass-blur, blur(18px) saturate(1.2));
    border: 1px solid color-mix(in srgb, var(--ghz-info, #60a5fa) 25%, transparent);
    border-left: 3px solid var(--ghz-info, #60a5fa);
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

.imei-history-note .font-bold {
    color: var(--ghz-info, #60a5fa);
}

/* Note variant tone theo loại movement */
.imei-history-note--import,
.imei-history-title--import {
    --note-accent: var(--ghz-success, #34d399);
}
.imei-history-note--export,
.imei-history-title--export {
    --note-accent: var(--ghz-warning, #fbbf24);
}
.imei-history-note--repair,
.imei-history-title--repair {
    --note-accent: var(--ghz-danger, #f87171);
}
.imei-history-note--correction,
.imei-history-title--correction {
    --note-accent: var(--ghz-info, #60a5fa);
}
.imei-history-note--reversal,
.imei-history-title--reversal {
    --note-accent: #c084fc;
}
.imei-history-note--void,
.imei-history-note--archive,
.imei-history-title--void,
.imei-history-title--archive {
    --note-accent: #a78bfa;
}
.imei-history-note--knox,
.imei-history-title--knox {
    --note-accent: var(--ghz-brand-color, #00c37a);
}
.imei-history-title--knox {
    color: var(--note-accent);
}

/* Lịch sử Knox + Lịch sử kho trong modal lịch sử IMEI */
.imei-history-knox { color: var(--ghz-brand-color, #00c37a); border-color: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 40%, transparent); background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 12%, transparent); }

.imei-history-section + .imei-history-section {
    margin-top: 1.25rem;
}

.imei-history-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.imei-history-section-count {
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ghz-text-muted, #9ca3af) 15%, transparent);
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 0.7rem;
    font-weight: 600;
}

.imei-history-section-empty {
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--ghz-card-glass-border, rgba(120,140,150,0.40));
    border-radius: 0.75rem;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 0.8rem;
}

.imei-history-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.imei-history-knox-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--ghz-brand-color, #00c37a) 45%, transparent);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 12%, transparent);
    color: var(--ghz-brand-color, #00c37a);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease;
}

.imei-history-knox-btn:hover {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 22%, transparent);
}

.imei-history-knox-btn:focus-visible {
    outline: 2px solid var(--ghz-brand-color, #00c37a);
    outline-offset: 2px;
}

.inventory-knox-detail-body {
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid var(--ghz-card-glass-border, rgba(120,140,150,0.40));
    border-radius: 0.75rem;
    background: var(--ghz-card-glass-bg, rgba(40,42,44,0.4));
    color: var(--ghz-text-primary, #e5e7eb);
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-size: 0.8rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.imei-history-note--import,
.imei-history-note--export,
.imei-history-note--repair,
.imei-history-note--correction,
.imei-history-note--reversal,
.imei-history-note--void,
.imei-history-note--archive {
    background: color-mix(in srgb, var(--note-accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--note-accent) 25%, transparent);
    border-left-color: var(--note-accent);
}

.imei-history-note--import .font-bold,
.imei-history-note--export .font-bold,
.imei-history-note--repair .font-bold,
.imei-history-note--correction .font-bold,
.imei-history-note--reversal .font-bold,
.imei-history-note--void .font-bold,
.imei-history-note--archive .font-bold {
    color: var(--note-accent);
}

.imei-history-title--import,
.imei-history-title--export,
.imei-history-title--repair,
.imei-history-title--correction,
.imei-history-title--reversal,
.imei-history-title--void,
.imei-history-title--archive {
    color: var(--note-accent);
}

@media (max-width: 640px) {
    /* Modal lịch sử IMEI - đã đồng nhất với rule chung ở dưới */
    .inventory-lightbox-body {
        max-height: calc(100vh - 8rem);
        padding: 0.75rem;
    }

    .imei-history-list::before {
        left: 1rem;
    }

    .imei-history-item {
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0.625rem;
    }

    .imei-history-icon {
        width: 2rem;
        height: 2rem;
        border-radius: 0.65rem;
        font-size: 0.75rem;
    }

    .imei-history-content {
        padding: 0.8rem;
    }

    .imei-history-header {
        display: block;
    }

    .imei-history-time {
        margin-top: 0.3rem;
    }

    .imei-history-detail-grid {
        /* 2 cột trên mobile để label & value cùng dòng → gọn hơn */
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.6rem;
        margin-top: 0.6rem;
    }

    .imei-history-field {
        /* field luôn là flex row */
        gap: 0.35rem;
    }
}

/* App modal layers are coordinated by bundle.js; keep every overlay above nav and toasts. */
body.app-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    touch-action: none;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    height: 100% !important;
}

/* Khoá <html> khi body có class .app-modal-open (browser có :has()) */
html:has(body.app-modal-open) {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    touch-action: none;
    height: 100% !important;
}

/* Fallback class khi browser không hỗ trợ :has() */
html.app-modal-lock {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    touch-action: none;
    height: 100% !important;
}

.p026-modal-backdrop {
    position: fixed !important;
    inset: 0;
}

.app-modal-overlay {
    z-index: 1000;
    overscroll-behavior: contain;
}

/* Compact, low-contrast scrollbars for app panes and modal content. */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--ghz-scrollbar-track, rgba(255, 255, 255, 0.035));
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    min-height: 3rem;
    border: 2px solid transparent;
    border-radius: 999px;
    background: var(--ghz-scrollbar-thumb, linear-gradient(180deg, #00a86b, #007d52));
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--ghz-brand-hover, #23cf8c);
    background-clip: content-box;
}

*::-webkit-scrollbar-corner {
    background: var(--ghz-scrollbar-track, #11151a);
}

.inventory-image-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ghz-input-bg, rgba(20, 23, 27, 0.85));
    color: var(--ghz-text-muted, #6b7280);
}

#inventory-export-submit {
    opacity: 1;
    color: #111827;
    background: #facc15;
    box-shadow: 0 10px 24px -8px rgba(250, 204, 21, 0.55);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

#inventory-export-submit:disabled {
    opacity: 1;
}

#inventory-export-submit i {
    color: inherit;
}

#inventory-export-submit[data-state="locked"] {
    cursor: not-allowed;
    color: #fde68a;
    background: var(--ghz-input-bg, #181b20);
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.42);
}

#inventory-export-submit[data-state="locked"]:hover,
#inventory-export-submit[data-state="locked"]:focus {
    background: var(--ghz-input-bg, #181b20);
    color: #fde68a;
}

#inventory-export-submit[data-state="ready"]:hover {
    background: #fde047;
}

#inventory-export-submit[data-state="ready"]:active {
    transform: translateY(1px);
}

#inventory-export-submit[data-state="ready"]:focus-visible {
    outline: 2px solid #facc15;
    outline-offset: 3px;
}

#inventory-export-submit[data-state="loading"] {
    cursor: wait;
    color: #111827;
    background: #facc15;
    box-shadow: 0 10px 24px -8px rgba(250, 204, 21, 0.4);
}

.inventory-export-status {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ghz-text-muted, #9ca3af);
}

.inventory-export-status[data-state="ready"] {
    color: var(--ghz-success, #86efac);
}

.inventory-export-status[data-state="loading"] {
    color: var(--ghz-warning, #fde68a);
}

@media (prefers-reduced-motion: reduce) {
    #inventory-export-submit {
        transition: none;
    }

    #inventory-export-submit[data-state="ready"]:active {
        transform: none;
    }
}

@media (max-width: 767px) {
    /* ============ MOBILE TAB BAR — GLASS MORPHISM (FIXED BOTTOM, COMPACT) ============ */
    .mobile-tab-bar {
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;
        gap: 3px;
        padding: 5px 5px;
        margin-bottom: 0;
        /* Glass background — theme-aware via --ghz-tabbar-bg / --ghz-card-border */
        background: var(--ghz-tabbar-bg, linear-gradient(135deg, rgba(15, 23, 32, 0.78) 0%, rgba(20, 30, 42, 0.68) 50%, rgba(15, 23, 32, 0.78) 100%)) !important;
        backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(180%));
        -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(180%));
        border: 1px solid var(--ghz-card-border, rgba(255, 255, 255, 0.08));
        border-radius: 16px;
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.5),
            0 2px 8px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        position: fixed;
        left: 6px;
        right: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
        z-index: 60;
        overflow: visible;
    }

    /* Light reflection overlay cho glass */
    .mobile-tab-bar::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.05) 0%,
            transparent 50%
        );
        pointer-events: none;
        z-index: 0;
        border-radius: 16px;
    }

    .mobile-tab-btn,
    .mobile-more-wrap {
        min-width: 0;
        min-height: 50px;
        position: relative;
        z-index: 1;
    }

    /* Khi button bị ẩn do phân quyền → thoát khỏi grid layout để không chiếm chỗ */
    .mobile-tab-btn.hidden,
    .mobile-more-wrap.hidden {
        display: none !important;
    }

    .mobile-tab-btn {
        flex: 1 1 24%;
        max-width: 96px;
        padding: 3px 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        line-height: 1;
        text-align: center;
        border: 1px solid transparent;
        border-radius: 10px;
        color: var(--ghz-tabbar-text, rgba(229, 231, 235, 0.55));
        background: transparent;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
            color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
        overflow: hidden;
    }

    /* Ripple effect dùng box-shadow animation */
    .mobile-tab-btn {
        --ripple-x: 50%;
        --ripple-y: 50%;
    }

    .mobile-tab-btn:active {
        transform: scale(0.92);
        box-shadow:
            inset 0 0 0 999px var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15)),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .mobile-tab-btn i {
        display: flex;
        flex: 0 0 0.95rem;
        align-items: center;
        justify-content: center;
        width: 0.95rem;
        height: 0.95rem;
        margin: 0;
        line-height: 1;
        font-size: 0.875rem;
        position: relative;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mobile-tab-btn span {
        display: -webkit-box;
        width: 100%;
        min-height: 18px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 10px;
        text-align: center;
        white-space: normal;
        font-size: 0.6rem;
        letter-spacing: 0.01em;
    }

    /* ACTIVE state — pill glass sáng tone brand theo theme
       Fix: trước đây hard-code mint (#00c37a/#34d399) → trên pastel
       gradient gần như trong suốt, icon không nổi bật.
       Bây giờ dùng var(--ghz-brand-active) + var(--ghz-text-on-brand-strong)
       từ theme-engine.js → đồng bộ 12 theme. */
    .mobile-tab-btn.active {
        color: var(--ghz-text-on-brand-strong, #052e16);
        font-weight: 700;
        background: linear-gradient(
            135deg,
            var(--ghz-brand-active-bg, rgba(0,195,122,0.45)) 0%,
            color-mix(in srgb, var(--ghz-brand-active, #00c37a) 28%, transparent) 100%
        );
        border-color: var(--ghz-brand-active-border, rgba(0,195,122,0.80));
        /* Glow halo tone brand theo theme, alpha linh hoạt qua --ghz-tab-btn-glow-alpha */
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            inset 0 -1px 0 rgba(0, 0, 0, 0.18),
            0 2px 10px -2px color-mix(in srgb, var(--ghz-brand-active, #00c37a) var(--ghz-tab-btn-glow-alpha, 45%), transparent),
            0 0 0 1px color-mix(in srgb, var(--ghz-brand-active, #00c37a) var(--ghz-tab-btn-glow-soft, 27%), transparent),
            0 0 10px 1px color-mix(in srgb, var(--ghz-brand-active, #00c37a) var(--ghz-tab-btn-glow-strong, 65%), transparent);
        animation: tabBtnPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Shine sweep — vệt sáng lướt ngang khi active (chạy 1 lần, không phụ thuộc theme) */
    .mobile-tab-btn.active::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient(
            100deg,
            transparent 0%,
            rgba(255, 255, 255, 0.25) 50%,
            transparent 100%
        );
        transform: skewX(-20deg);
        animation: shineSweep 0.9s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
        opacity: 0;
        pointer-events: none;
    }

    /* Subtle highlight overlay — tone brand theo theme (thay vì radial mint cứng) */
    .mobile-tab-btn.active::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(
            ellipse at center,
            color-mix(in srgb, var(--ghz-brand-active, #00c37a) 25%, transparent) 0%,
            transparent 70%
        );
        pointer-events: none;
    }

    /* Icon + text active nổi bật: dùng --ghz-text-on-brand-strong (theme-aware)
       + drop-shadow tone brand (theme-aware). Kế thừa color từ parent nên bold/icon đều nổi. */
    .mobile-tab-btn.active i,
    .mobile-tab-btn.active svg {
        color: inherit;
        filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ghz-brand-active, #00c37a) var(--ghz-tab-btn-glow-strong, 65%), transparent));
        animation: tabIconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .mobile-tab-btn.active span {
        color: inherit;
        font-weight: 700;
    }

    .mobile-more-wrap {
        display: flex;
        position: relative;
    }

    .mobile-more-menu {
        z-index: 90;
        position: absolute;
        bottom: calc(100% + 12px);
        right: 0;
        min-width: 200px;
        background: var(--ghz-tabbar-bg, linear-gradient(135deg, rgba(15, 23, 32, 0.92) 0%, rgba(20, 30, 42, 0.88) 100%)) !important;
        backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(180%));
        -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(180%));
        border: 1px solid var(--ghz-card-border, rgba(255, 255, 255, 0.1));
        box-shadow:
            0 12px 40px rgba(0, 0, 0, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        overflow: hidden;
        animation: moreMenuFade 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: bottom right;
    }

    /* Tailwind .hidden = display:none !important. Cần giữ để ẩn popup khi chưa mở. */
    .mobile-more-menu.hidden {
        display: none !important;
    }

    .mobile-more-menu .mobile-more-item {
        color: var(--ghz-tabbar-text, rgba(229, 231, 235, 0.85));
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    }

    .mobile-more-menu .mobile-more-item {
        width: 100%;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 0.875rem;
        color: var(--ghz-tabbar-text, rgba(229, 231, 235, 0.85));
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
    }

    .mobile-more-menu .mobile-more-item i {
        width: 1.1rem;
        text-align: center;
        font-size: 0.95rem;
    }

    .mobile-more-menu .mobile-more-item:hover,
    .mobile-more-menu .mobile-more-item:active {
        background: var(--ghz-brand-soft-12, rgba(52, 211, 153, 0.12));
        color: var(--ghz-brand-color, #34d399);
        padding-left: 18px;
    }

    /* Item đang được chọn trong popup Thêm — highlight rõ để biết đang ở tab nào */
    .mobile-more-menu .mobile-more-item.is-current {
        background: var(--ghz-brand-active-bg, linear-gradient(135deg, rgba(0, 195, 122, 0.22) 0%, rgba(52, 211, 153, 0.14) 100%));
        color: var(--ghz-text-on-brand-strong, #ffffff);
        font-weight: 600;
        border-left: 3px solid var(--ghz-brand-color, #34d399);
        padding-left: 13px;
    }
    .mobile-more-menu .mobile-more-item.is-current i {
        color: var(--ghz-brand-color, #34d399);
    }

/* FIX: Dùng max() để padding không bị thừa khi safe-area lớn
   - iPhone cũ (không safe-area): dùng 92px
   - iPhone có safe-area: dùng max(92px, safe-area) → tránh padding thừa */
@media (max-width: 767px) {
    #main-content {
        padding-bottom: max(92px, env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ============ ANIMATIONS ============ */
@keyframes tabBtnPop {
    0% {
        transform: scale(0.85);
        opacity: 0.7;
    }
    60% {
        transform: scale(1.08);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes tabIconBounce {
    0% {
        transform: scale(0.7) translateY(2px);
    }
    40% {
        transform: scale(1.25) translateY(-3px);
    }
    70% {
        transform: scale(0.95) translateY(1px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

@keyframes tabGlowPulse {
    0%, 100% {
        box-shadow:
            0 0 8px 1px rgba(52, 211, 153, 0.35),
            0 0 16px 3px rgba(52, 211, 153, 0.18);
    }
    50% {
        box-shadow:
            0 0 14px 3px rgba(52, 211, 153, 0.55),
            0 0 28px 6px rgba(52, 211, 153, 0.3);
    }
}

/* Opacity pulse cho halo (::after) */
@keyframes tabGlowOpacity {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 1;
    }
}

@keyframes moreMenuFade {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(8px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes shineSweep {
    0% {
        left: -100%;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

/* Stagger animation cho các tab lúc load */
.mobile-tab-bar .mobile-tab-btn,
.mobile-tab-bar .mobile-more-wrap {
    animation: tabEnter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.mobile-tab-bar .mobile-tab-btn:nth-child(1) { animation-delay: 0.05s; }
.mobile-tab-bar .mobile-tab-btn:nth-child(2) { animation-delay: 0.10s; }
.mobile-tab-bar .mobile-tab-btn:nth-child(3) { animation-delay: 0.15s; }
.mobile-tab-bar .mobile-tab-btn:nth-child(4) { animation-delay: 0.20s; }
.mobile-tab-bar .mobile-more-wrap { animation-delay: 0.25s; }

@keyframes tabEnter {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal sizing: one predictable viewport-safe layout for every app dialog. */
.app-modal-overlay {
    padding: 1.5rem;
}

.app-modal-overlay > .card {
    max-height: calc(100dvh - 3rem);
    overscroll-behavior: contain;
    background: var(--ghz-card-glass-bg, var(--ghz-card-bg, #181b20));
    border-color: var(--ghz-card-glass-border, var(--ghz-card-border, #2a2e35));
    box-shadow: var(--ghz-card-glass-shadow, 0 8px 32px -4px rgba(0, 0, 0, 0.5));
    /* Flex column để .modal-scroll con chiếm phần còn lại và cuộn nội bộ */
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Inner scrollable region trong app modal (áp dụng cả desktop + mobile, NGOÀI media query) */
.app-modal-overlay .modal-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* KHÔNG set max-height ở đây — để flex column của .card tính toán vùng cuộn.
       Set max-height cứng gây scroll "lố" modal hoặc kẹt khi siblings đổi chiều cao. */
}

.app-modal-overlay .ui-modal-close {
    display: inline-flex;
    flex: 0 0 2.75rem;
    width: 2.75rem;
    height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    line-height: 1;
    touch-action: manipulation;
}

.app-modal-overlay .ui-modal-close:hover,
.app-modal-overlay .ui-modal-close:focus-visible {
    border-color: var(--ghz-card-border, rgba(156, 163, 175, 0.42));
    background: var(--ghz-brand-soft-08, rgba(255, 255, 255, 0.08));
    outline: none;
}

#inventory-lightbox {
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    z-index: 1100; /* lightbox phải luôn nằm trên các modal khác (label preview, IMEI history, ...) */
}

#inventory-lightbox-image {
    display: block;
    width: auto;
    height: auto;
    max-width: min(88vw, 68rem);
    max-height: calc(100dvh - 12rem);
}

#inventory-lightbox-close {
    position: fixed;
    top: max(4rem, calc(env(safe-area-inset-top) + 2.5rem));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 1;
    border-color: var(--ghz-card-glass-border, rgba(255, 255, 255, 0.28));
    background: var(--ghz-card-glass-bg, rgba(14, 16, 19, 0.92));
    box-shadow: var(--ghz-card-glass-shadow, 0 8px 24px rgba(0, 0, 0, 0.32));
}

#inventory-device-detail-body img,
#inventory-recent-detail-body img {
    max-width: 100%;
}

#inventory-image-preview-wrap,
#inventory-export-image-preview-wrap {
    min-width: 0;
}

#inventory-image-caption,
#inventory-export-image-caption {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .app-modal-overlay {
        align-items: center;
        /* Padding 4 bên đều nhau */
        padding: max(0.5rem, env(safe-area-inset-top))
            max(0.5rem, env(safe-area-inset-right))
            max(0.5rem, env(safe-area-inset-bottom))
            max(0.5rem, env(safe-area-inset-left));
    }

    /* === Modal mobile: CENTER + COMPACT === */
    .app-modal-overlay > .card {
        width: 100%;
        max-width: min(20rem, calc(100vw - 1rem));
        max-height: min(60vh, calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
        margin: auto;
        padding: 0.75rem;
        border-radius: 0.75rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        box-shadow: var(--ghz-card-glass-shadow, 0 8px 32px -4px rgba(0, 0, 0, 0.5));
        font-size: 0.875rem;
    }
    /* NO drag handle, NO slide animation - đơn giản là popup center */
    .app-modal-overlay > .card::before {
        display: none;
    }

    /* Modal lớn hơn → vẫn compact, có scroll - cần !important để thắng Tailwind max-w-* */
    .app-modal-overlay > .card.max-w-sm,
    .app-modal-overlay > .card.max-w-md,
    .app-modal-overlay > .card.max-w-lg {
        max-width: min(22rem, calc(100vw - 1rem)) !important;
        max-height: min(70vh, calc(100dvh - 1rem)) !important;
    }

    .app-modal-overlay > .card.max-w-xl,
    .app-modal-overlay > .card.max-w-2xl,
    .app-modal-overlay > .card.max-w-3xl,
    .app-modal-overlay > .card.max-w-4xl {
        max-width: min(24rem, calc(100vw - 1rem)) !important;
        max-height: min(78vh, calc(100dvh - 1rem)) !important;
    }

    /* Thắng .w-full của Tailwind */
    .app-modal-overlay > .card.w-full {
        width: auto !important;
    }

    /* Giảm padding p-6, p-5 thành p-3 cho tất cả modal children */
    .app-modal-overlay > .card.p-4,
    .app-modal-overlay > .card.p-5,
    .app-modal-overlay > .card.p-6 {
        padding: 0.75rem !important;
    }

    /* Giảm mb-4 xuống mb-2 */
    .app-modal-overlay > .card > .flex.justify-between.items-center {
        margin-bottom: 0.5rem !important;
        gap: 0.5rem;
    }

    /* Tiêu đề modal gọn hơn */
    .app-modal-overlay .ui-section-title {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }

    /* Bảng bên trong modal: gọn hơn */
    .app-modal-overlay > .card table {
        font-size: 0.8125rem !important;
    }
    .app-modal-overlay > .card table th,
    .app-modal-overlay > .card table td {
        padding: 0.4rem 0.5rem !important;
    }
    /* Header sticky trong modal table */
    .app-modal-overlay > .card table thead.sticky-thead th {
        font-size: 0.6875rem !important;
        padding: 0.5rem 0.4rem !important;
    }

    /* Label + value rows bên trong modal: gọn */
    .app-modal-overlay > .card .grid > div,
    .app-modal-overlay > .card .flex > div {
        font-size: 0.8125rem;
    }
    .app-modal-overlay > .card label {
        font-size: 0.75rem;
    }
    /* Compact icon block trong inventory detail */
    .app-modal-overlay > .card .bg-primary-soft,
    .app-modal-overlay > .card .bg-inputbg {
        padding: 0.5rem !important;
    }

    .app-modal-overlay > .card > :first-child .ui-modal-close {
        margin-top: -0.15rem;
        margin-right: -0.15rem;
    }

    .app-modal-overlay .ui-modal-close {
        flex-basis: 2rem;
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    /* IMEI history modal đã đồng nhất với rule .app-modal-overlay > .card ở trên */

    /* === MODAL MOBILE COMPACT - CLASS .ui-modal-mobile ===
       Override Tailwind max-h-[90vh] + p-6 inline với !important
       Width: desktop ~32rem (512px), mobile ~calc(100vw - 1rem)
       Height: ~62vh max, scroll nếu nội dung dài */
    .app-modal-overlay > .card.ui-modal-mobile,
    .app-modal-overlay > .ui-modal-mobile {
        /* Set width CỐ ĐỊNH để thắng w-full, sau đó max-width giới hạn trên */
        width: min(32rem, calc(100vw - 1rem)) !important;
        max-width: min(32rem, calc(100vw - 1rem)) !important;
        max-height: min(62vh, calc(100dvh - 1rem)) !important;
        padding: 0.75rem !important;
        font-size: 0.8125rem !important;
    }
    /* Selector ID-based: chắc chắn thắng Tailwind w-full */
    #inventory-device-detail-modal > .ui-modal-mobile,
    #inventory-device-detail-modal > .card.ui-modal-mobile,
    #inventory-recent-detail-modal > .ui-modal-mobile,
    #inventory-recent-detail-modal > .card.ui-modal-mobile,
    #emp-history-modal > .ui-modal-mobile,
    #emp-history-modal > .card.ui-modal-mobile {
        width: min(32rem, calc(100vw - 1rem)) !important;
        max-width: min(32rem, calc(100vw - 1rem)) !important;
        max-height: min(62vh, calc(100dvh - 1rem)) !important;
    }
    /* BỎ max-height cứng cho modal-scroll — để flex column của card tự tính.
       Lý do: set max-height: calc(62vh - 4.5rem) làm scrollEl bị giới hạn cứng,
       trong khi siblings (header/filter/pagination) có thể co giãn → khoảng trống
       hoặc tràn. Đã fix triệt để ở rev3. */
    /* Header row inside ui-modal-mobile: gọn */
    .app-modal-overlay > .card.ui-modal-mobile > .flex.justify-between.items-center {
        margin-bottom: 0.5rem !important;
        gap: 0.5rem;
    }
    /* Section title */
    .app-modal-overlay > .card.ui-modal-mobile .ui-section-title {
        font-size: 1rem !important;
        line-height: 1.25 !important;
    }
    /* Các dòng label-value: gọn */
    .app-modal-overlay > .card.ui-modal-mobile label {
        font-size: 0.75rem !important;
    }
    .app-modal-overlay > .card.ui-modal-mobile input,
    .app-modal-overlay > .card.ui-modal-mobile select,
    .app-modal-overlay > .card.ui-modal-mobile textarea {
        font-size: 0.8125rem !important;
        padding: 0.4rem 0.625rem !important;
    }
    /* Grid spacing */
    .app-modal-overlay > .card.ui-modal-mobile .grid.gap-4,
    .app-modal-overlay > .card.ui-modal-mobile .grid.gap-3 {
        gap: 0.5rem !important;
    }
    .app-modal-overlay > .card.ui-modal-mobile .space-y-3 > * + * {
        margin-top: 0.5rem !important;
    }
    /* Block bên trong: padding nhỏ */
    .app-modal-overlay > .card.ui-modal-mobile .bg-inputbg,
    .app-modal-overlay > .card.ui-modal-mobile .bg-primary-soft {
        padding: 0.5rem !important;
        border-radius: 0.5rem !important;
    }

    /* ==== P1: COMPACT "Chi tiết thiết bị" / "Chi tiết giao dịch gần đây" ====
       Hai modal này có nội dung dài (ảnh 192px + 9 field info + 6 button) gây overflow mobile.
       - Modal gọn hơn: 28rem thay vì 32rem
       - Ảnh max-h-28 (thắng Tailwind max-h-48 + max-w-4xl w-full)
       - Field rows gọn: label 0.6875rem, value 0.8125rem, gap 0.5rem
       - Button full-width, padding gọn
       - Inner card bg-inputbg/40 padding 0.5rem */
    #inventory-device-detail-modal > .ui-modal-mobile,
    #inventory-device-detail-modal > .card.ui-modal-mobile,
    #inventory-recent-detail-modal > .ui-modal-mobile,
    #inventory-recent-detail-modal > .card.ui-modal-mobile {
        width: min(28rem, calc(100vw - 0.5rem)) !important;
        max-width: min(28rem, calc(100vw - 0.5rem)) !important;
        max-height: min(85dvh, calc(100dvh - 0.5rem)) !important;
        padding: 0.5rem !important;
    }
    #inventory-device-detail-modal .modal-scroll,
    #inventory-recent-detail-modal .modal-scroll {
        max-height: calc(85dvh - 3.5rem) !important;
        padding-right: 0.125rem !important;
    }
    /* Ảnh thiết bị gọn: thắng Tailwind max-h-48 (192px) */
    #inventory-device-detail-body img,
    #inventory-recent-detail-body img {
        max-height: 7rem !important;
        width: auto !important;
        max-width: 60% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        border-radius: 0.5rem !important;
    }
    /* Card con bg-inputbg/40: padding + gap gọn */
    #inventory-device-detail-modal .bg-inputbg\/40,
    #inventory-recent-detail-modal .bg-inputbg\/40 {
        padding: 0.625rem !important;
    }
    #inventory-device-detail-modal .bg-inputbg\/40 .space-y-3,
    #inventory-recent-detail-modal .bg-inputbg\/40 .space-y-3,
    #inventory-device-detail-modal .bg-inputbg\/40 .space-y-2,
    #inventory-recent-detail-modal .bg-inputbg\/40 .space-y-2 {
        row-gap: 0.375rem !important;
    }
    #inventory-device-detail-modal .bg-inputbg\/40 > * + *,
    #inventory-recent-detail-modal .bg-inputbg\/40 > * + * {
        margin-top: 0.375rem !important;
    }
    /* Field rows label-value compact */
    #inventory-device-detail-modal .flex.justify-between.items-start.gap-3,
    #inventory-device-detail-modal .flex.justify-between.items-center.gap-3,
    #inventory-recent-detail-modal .flex.justify-between.items-start.gap-3,
    #inventory-recent-detail-modal .flex.justify-between.items-center.gap-3 {
        gap: 0.5rem !important;
    }
    #inventory-device-detail-modal .flex.justify-between > .text-sm,
    #inventory-recent-detail-modal .flex.justify-between > .text-sm {
        font-size: 0.75rem !important;
        line-height: 1.15 !important;
    }
    #inventory-device-detail-modal .flex.justify-between > .text-base,
    #inventory-recent-detail-modal .flex.justify-between > .text-base {
        font-size: 0.8125rem !important;
        line-height: 1.2 !important;
    }
    /* Buttons: 2 cột → 4 cột gọn, padding nhỏ */
    #inventory-device-detail-modal button[data-inventory-device-action],
    #inventory-recent-detail-modal button[data-inventory-recent-action] {
        padding: 0.4rem 0.5rem !important;
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
    }
    #inventory-device-detail-modal .grid.grid-cols-2,
    #inventory-recent-detail-modal .grid.grid-cols-2 {
        gap: 0.375rem !important;
    }
    /* Status badge: gọn hơn */
    #inventory-device-detail-modal .border.rounded-full,
    #inventory-recent-detail-modal .border.rounded-full {
        padding: 0.125rem 0.625rem !important;
        font-size: 0.65rem !important;
    }

    /* ==== P1: COMPACT CHUNG CHO CÁC MODAL ui-modal-mobile ====
       Áp dụng cho emp-history, stats-detail, lead-modal, calendar-modal, work-detail,
       inventory-templates, v.v. — giảm padding + giảm font + giảm gap khi viewport ≤640px.
       KHÔNG đụng inventory-device-detail / inventory-recent-detail (đã compact riêng). */
    .app-modal-overlay > .card.ui-modal-mobile {
        padding: 0.625rem !important;
        max-height: 85dvh !important;
    }
    /* BỎ max-height cứng — để flex:1 1 auto tự lấy phần còn lại của card.flex-col.
       Set max-height: calc(85dvh - 4rem) cố định gây scroll "lố" modal khi siblings đổi kích thước. */
    /* Header row: gọn */
    .app-modal-overlay > .card.ui-modal-mobile .flex.items-center.justify-between {
        padding: 0.5rem 0.625rem !important;
    }
    /* Form fields chung: padding gọn, gap nhỏ */
    .app-modal-overlay > .card.ui-modal-mobile .ui-input,
    .app-modal-overlay > .card.ui-modal-mobile input.ui-input,
    .app-modal-overlay > .card.ui-modal-mobile select.ui-input,
    .app-modal-overlay > .card.ui-modal-mobile textarea.ui-input {
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    .app-modal-overlay > .card.ui-modal-mobile label.field-label,
    .app-modal-overlay > .card.ui-modal-mobile label.ui-label {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    .app-modal-overlay > .card.ui-modal-mobile form > .flex.justify-end,
    .app-modal-overlay > .card.ui-modal-mobile #stats-detail-actions,
    .app-modal-overlay > .card.ui-modal-mobile .modal-scroll > .flex.justify-end {
        gap: 0.375rem !important;
        padding: 0.5rem 0.625rem !important;
    }
    .app-modal-overlay > .card.ui-modal-mobile .ui-btn-primary,
    .app-modal-overlay > .card.ui-modal-mobile .ui-btn-secondary,
    .app-modal-overlay > .card.ui-modal-mobile button[type="submit"],
    .app-modal-overlay > .card.ui-modal-mobile #stats-detail-actions button {
        padding: 0.5rem 0.875rem !important;
        font-size: 0.8125rem !important;
    }
    /* Space-y-3 → space-y-2 on mobile */
    .app-modal-overlay > .card.ui-modal-mobile .space-y-3,
    .app-modal-overlay > .card.ui-modal-mobile .space-y-4 {
        row-gap: 0.5rem !important;
    }

    #inventory-lightbox {
        align-items: center;
    }

    #inventory-lightbox-image {
        max-width: calc(100vw - 2rem - env(safe-area-inset-left) - env(safe-area-inset-right));
        max-height: calc(100dvh - 6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        border-radius: 0.875rem;
    }

    /* Thumb-reachable close button: bottom-center pill instead of the top-right notch zone. */
    #inventory-lightbox-close {
        top: auto;
        bottom: calc(0.75rem + env(safe-area-inset-bottom));
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: auto;
        min-width: 8rem;
        height: 2.75rem;
        gap: 0.5rem;
        padding: 0 1.25rem;
        border-radius: 999px;
        background: rgba(14, 16, 19, 0.96);
    }

    #inventory-lightbox-close::after {
        content: 'Đóng ảnh';
        font-size: 0.875rem;
        font-weight: 600;
    }

    #inventory-image-preview-wrap,
    #inventory-export-image-preview-wrap {
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.75rem;
    }

    #inventory-image-preview,
    #inventory-export-image-preview {
        flex: 0 0 4rem;
    }

    #label-preview-stage {
        max-height: 52dvh !important;
        padding: 0.5rem !important;
    }
}

/* ========================================
   ĐỢT 1: EMPTY STATE VARIANT-PRIMARY + TAB BADGES + SAFE AREA MOBILE TAB
   ======================================== */

/* Empty state variant-primary (primary xanh lá #00c37a) */
.empty-state-icon.variant-primary {
    background: rgba(0, 195, 122, 0.08);
    border-color: rgba(0, 195, 122, 0.15);
}

.empty-state-icon.variant-primary i {
    color: rgba(0, 195, 122, 0.4);
}

/* P0_14: Empty State CTA button + motivation animation */
.empty-state-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 500;
    background: linear-gradient(135deg, var(--ghz-brand-color, var(--primary, #00c37a)), #6366f1);
    color: var(--ghz-text-on-grad, #fff);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    box-shadow: 0 4px 14px rgba(0, 195, 122, 0.25);
}
.empty-state-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 195, 122, 0.32);
    opacity: 0.95;
}
.empty-state-cta:active {
    transform: translateY(0);
}
.empty-state-cta i {
    font-size: 0.95em;
}

/* Animated emojis (3 emji bouncing) */
.empty-state-icon-animated {
    background: rgba(0, 195, 122, 0.08);
    border-color: rgba(0, 195, 122, 0.15);
}
.empty-state-emoji {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 1.6rem;
    line-height: 1;
}
.empty-state-emoji span {
    display: inline-block;
    animation: empty-state-bounce 1.1s infinite ease-in-out;
}
.empty-state-emoji span:nth-child(2) { animation-delay: 0.15s; }
.empty-state-emoji span:nth-child(3) { animation-delay: 0.3s; }
@keyframes empty-state-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .empty-state-emoji span { animation: none; }
}

/* Tab Badge — chấm tròn 5px neo góc phải trên của icon */
.tab-btn i,
.mobile-tab-btn i,
.tab-pill i {
    position: relative;
}
.tab-badge {
    position: absolute !important;
    top: -2px !important;
    right: -3px !important;
    left: auto !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    max-width: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px var(--ghz-input-bg, #181b20) !important;
    pointer-events: none !important;
    animation: tabBadgePulse 1.8s ease-in-out infinite !important;
    z-index: 5 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.tab-badge-red {
    background: var(--ghz-danger, #ef4444) !important;
}

.tab-badge-yellow {
    background: var(--ghz-warning, #f59e0b) !important;
    box-shadow: 0 0 0 1px var(--ghz-input-bg, #181b20) !important;
}

@keyframes tabBadgePop {
    from {
        opacity: 0;
        transform: scale(0.4);
    }
    60% {
        transform: scale(1.15);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Desktop tab bar: icon-only như mobile để gọn, không dàn hàng ngang.
   Khi viewport ≥ 768px: pill chỉ hiện icon, nhãn ẩn.
   Khi < 768px: desktop bar đã bị ẩn (mobile-tab-bar thay thế), nên không ảnh hưởng.

   LƯU Ý: text nhãn nằm trực tiếp trong <button> (text node, không bọc <span>),
   nên phải dùng font-size:0 + color:transparent để ẩn text node, không thể ẩn span. */
@media (min-width: 768px) {
    .desktop-tab-bar {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
        padding: 4px;
        width: fit-content;
        max-width: 100%;
        overflow: visible;
    }
    .desktop-tab-bar .tab-pill {
        flex: 0 0 auto;
        padding: 6px 10px;
        gap: 0;
        font-size: 0 !important;
        line-height: 1 !important;
        color: transparent !important;
        text-indent: -9999px !important;
    }
    .desktop-tab-bar .tab-pill i {
        font-size: 14px;
        color: inherit;
        text-indent: 0 !important;
        position: relative;
    }
    .desktop-tab-bar .tab-pill.active {
        color: var(--ghz-text-on-brand-strong, #ffffff) !important;
    }
    .desktop-tab-bar .tab-pill.active i {
        color: var(--ghz-brand-color, #34d399) !important;
    }
    /* Tooltip khi hover (vì text đã ẩn) */
    .desktop-tab-bar .tab-pill {
        position: relative;
    }
    .desktop-tab-bar .tab-pill::after {
        content: attr(aria-label);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        background: var(--ghz-card-bg, #1f2937);
        color: var(--ghz-text-primary, #f3f4f6);
        font-size: 11px;
        line-height: 1;
        white-space: nowrap;
        padding: 4px 8px;
        border-radius: 6px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: 50;
    }
    .desktop-tab-bar .tab-pill:hover::after {
        opacity: 1;
    }
}

/* Đảm bảo tab pill là position relative để badge hiển thị đúng */
.desktop-tab-bar .tab-pill,
.mobile-tab-bar .mobile-tab-btn {
    position: relative;
}

/* Mobile tab bar - iOS safe area + compact sizing (1 hàng ~52px, 2 hàng ~94px)
   NOTE: padding-bottom của #main-content đã được set ở @media (max-width: 767px)
   phía trên — KHÔNG khai báo lại để tránh xung đột giá trị. */
@supports (padding: max(0px)) {
    .mobile-tab-bar {
        padding-bottom: max(5px, env(safe-area-inset-bottom));
    }
}

/* Khi đang ở tab Hướng dẫn (iframe) → main-content không cần padding-bottom vì tab bar đã ẩn */
body.guide-tab-active #main-content {
    padding-bottom: 0 !important;
}

/* ================================================================
   MOBILE TAB BAR — AUTO-HIDE ON SCROLL DOWN
   Khi user vuốt xuống → tab bar trượt xuống dưới (ẩn khỏi viewport)
   Khi user vuốt lên → tab bar hiện lại ngay
   Khi chạm đáy trang → tự hiện để không "kẹt" content
   Class .mobile-tab-bar--hidden được toggle bởi JS scroll handler
   Khi body.guide-tab-active (đang ở tab Hướng dẫn - iframe) → tab bar
   đã bị ẩn hoàn toàn qua class .hidden, không cần hook auto-hide nữa.
   ================================================================ */
.mobile-tab-bar {
    /* Có transition mượt khi ẩn/hiện */
    transition:
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.24s ease;
    will-change: transform, opacity;
}

.mobile-tab-bar.mobile-tab-bar--hidden {
    /* Trượt xuống dưới khỏi viewport, mờ nhẹ */
    transform: translateY(calc(100% + 24px));
    opacity: 0;
    /* Vẫn giữ pointer-events để tránh click vô tình vào bar ẩn */
    pointer-events: none;
}

/* Khi tab bar ẩn → giảm padding-bottom của main-content để tận dụng tối đa không gian */
#main-content.main-content--tabbar-hidden {
    padding-bottom: 16px !important;
    transition: padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
#main-content {
    /* Có transition để khi bar ẩn/hiện, content "trượt" mượt theo */
    transition: padding-bottom 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Khi bar đang ẩn mà user hover/press vào vùng đáy → peek bar nhô lại 1 phần
   giúp user biết vẫn có thể bấm tab. (chỉ trên thiết bị có hover) */
@media (hover: hover) and (pointer: fine) {
    body:not(.app-modal-open):not(.is-scrolling-down) .mobile-tab-bar--hidden:hover {
        transform: translateY(calc(100% - 18px));
        opacity: 0.55;
    }
}

/* FIX: xóa selector no-op `.mobile-tab-bar:not(...) ~ * #main-content`
   (chỉ có comment, không set giá trị nào) — vô tác dụng nhưng gây noise. */

/* Toast responsive: luôn ở góc trên-phải trên mọi thiết bị.
   Đẩy xuống dưới top-bar (60px) để không che nút thoát/tài khoản, và dưới safe-area top trên iOS.
   P0_05 fix: z-index cao hơn modal (modal có z-index 1000) */
@media (max-width: 767px) {
  .toast-region {
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 12px;
    left: auto;
    bottom: auto;
    max-width: calc(100vw - 24px);
    width: min(360px, calc(100vw - 24px));
    align-items: flex-end;
    z-index: 1001;
  }
  /* Toast đơn lẻ không tràn toàn bộ chiều ngang */
  .toast-region > .app-toast {
    max-width: 100%;
  }
}

/* Desktop: toast trên modal */
@media (min-width: 768px) {
  .toast-region {
    z-index: 1001;
  }
}

/* Tăng contrast cho text phụ - WCAG AA — theme-aware */
.text-gray-500,
.ui-meta-copy,
.ui-section-copy {
    color: var(--ghz-text-muted, #d1d5db) !important;
}

/* ========== EMPTY STATE CTV ĐÃ ĐƯỢC XÓA TRONG bundle.js ==========
   Trang CTV: 3 empty-state (chưa có khoản thưởng, chưa có giao dịch,
   ngày mới) đã được xóa trực tiếp trong bundle.js bằng cách set
   innerHTML = '' thay vì render empty-state.
   Vì vậy không cần CSS hack ở đây. */

/* ========================================================================
   #knox-config-card (Check Knox add-on)
   Mount trong tab Nhập máy hoặc Admin. Tone amber nổi bật cho admin-only,
   nhưng toàn bộ dùng theme tokens để đổi theo light/dark + theme gradient.
   Style được move từ inventory-knox-config.js inline <style> để gọn code.
   ======================================================================== */
#knox-config-card,
#knox-config-fallback-mount > #knox-config-card {
    background: var(--ghz-card-glass-bg, rgba(20, 23, 27, 0.72));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.4));
    border: 1px solid var(--ghz-card-glass-border, rgba(250, 204, 21, 0.25));
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: var(--ghz-card-glass-shadow, 0 8px 24px -10px rgba(250, 204, 21, 0.25));
    /* Card gọn ~400px desktop, full-width mobile. !important để thắng mọi flex/grid parent. */
    width: 100%;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Nếu parent là flex: tự co lại theo content, không bị stretch full-width */
    flex-shrink: 0;
    align-self: center;
    box-sizing: border-box;
}
#knox-config-card .knox-config-header {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 13px;
    margin-bottom: 8px;
    color: var(--ghz-warning, rgb(250, 204, 21));
    letter-spacing: 0.01em;
}
#knox-config-card .knox-config-header i {
    font-size: 14px;
    color: var(--ghz-warning, rgb(250, 204, 21));
}
#knox-config-card .knox-config-row {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
/* Stack dọc luôn (cả mobile + desktop): mỗi input 1 dòng → đỡ hẹp, đỡ wrap chữ */
#knox-config-card input {
    width: 100%;
    min-width: 0;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, var(--ghz-card-border, #2a2e35));
    color: var(--ghz-text-primary, #e5e7eb);
    padding: 9px 11px; border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#knox-config-card input::placeholder {
    color: var(--ghz-text-muted, #9ca3af);
    opacity: 0.7;
}
#knox-config-card input:focus {
    border-color: var(--ghz-warning, rgb(250, 204, 21));
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.12);
}
#knox-config-card button {
    background: var(--ghz-warning, rgb(250, 204, 21));
    color: var(--ghz-text-on-grad, rgb(15, 17, 21));
    font-weight: 700;
    padding: 9px 18px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
}
#knox-config-card button:hover {
    background: color-mix(in srgb, var(--ghz-warning, rgb(250, 204, 21)) 85%, #000 15%);
    box-shadow: 0 4px 12px -4px rgba(250, 204, 21, 0.45);
}
#knox-config-card button:active { transform: translateY(1px); }
#knox-config-card button:disabled {
    opacity: 0.55; cursor: not-allowed;
    background: var(--ghz-text-muted, #6b7280);
    box-shadow: none;
    color: var(--ghz-text-secondary, #d1d5db);
}
/* Desktop: card đã max-width: 420px + margin auto, không cần override thêm */
#knox-config-card .knox-status {
    margin-top: 10px; font-size: 12px;
    color: var(--ghz-info, rgb(147, 197, 253));
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 16px;
}
#knox-config-card .knox-status i { font-size: 12px; }
#knox-config-card .knox-status.error { color: var(--ghz-danger, rgb(252, 165, 165)); }
#knox-config-card .knox-status.success { color: var(--ghz-success, rgb(134, 239, 172)); }
#knox-config-card .knox-hint {
    margin-top: 6px; font-size: 11px;
    color: var(--ghz-text-muted, #9ca3af);
    line-height: 1.5;
}

/* Required field indicator - dấu * đỏ cho label có input required liền kề */
.field-label {
    color: var(--ghz-text-primary, #1f2937) !important;
}

/* Empty state description contrast */
.empty-state-description {
    color: var(--ghz-text-muted, #9ca3af) !important;
}

/* Empty state action secondary border-color khi hover */
.empty-state-action-secondary:hover {
    border-color: var(--ghz-brand-active-border, rgba(0, 195, 122, 0.4)) !important;
}

/* Mobile: chấm 5px dính góc phải trên icon */
.mobile-tab-bar .tab-badge,
.mobile-tab-btn .tab-badge {
    top: -2px !important;
    right: -3px !important;
    left: auto !important;
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    max-width: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    font-weight: 400 !important;
    line-height: 0 !important;
    box-shadow: 0 0 0 1px var(--ghz-input-bg, #181b20) !important;
}

/* ================================================================
   TAB KHO (NHẬP/XUẤT) — COMPACT MOBILE
   Mục đích: giảm padding/font/input để có nhiều chỗ vuốt, không bị
   "nặng" form trên màn hình nhỏ. Áp dụng cho #tab-kho.
   ================================================================ */
@media (max-width: 767px) {
    /* Header card gọn lại */
    #tab-kho .ui-page-header {
        gap: 8px;
    }
    /* Card disclosure padding gọn */
    #tab-kho details.card > div.px-6.pb-6.pt-0,
    #tab-kho details.card > .px-6,
    #tab-kho details.card > .pb-6,
    #tab-kho details.card > .pt-0 {
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 14px !important;
        padding-top: 0 !important;
    }
    #tab-kho .card.p-6 {
        padding: 14px !important;
    }
    #tab-kho .card .ui-disclosure-summary {
        padding: 12px !important;
    }
    /* Form inputs compact */
    #tab-kho form#inventory-import-form input,
    #tab-kho form#inventory-import-form select,
    #tab-kho form#inventory-import-form textarea,
    #tab-kho form#inventory-export-form input,
    #tab-kho form#inventory-export-form select,
    #tab-kho form#inventory-export-form textarea,
    #tab-kho form#inventory-export-lookup-form input,
    #tab-kho form#inventory-export-lookup-form select {
        padding: 8px 10px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
    /* Label nhỏ + margin nhỏ */
    #tab-kho form label {
        font-size: 11px !important;
        line-height: 1.3;
    }
    #tab-kho form label input,
    #tab-kho form label select,
    #tab-kho form label textarea {
        margin-top: 4px !important;
    }
    /* Grid gap nhỏ */
    #tab-kho form#inventory-import-form {
        gap: 8px !important;
    }
    #tab-kho form#inventory-export-form {
        row-gap: 8px !important;
    }
    /* Submit button nhỏ hơn */
    #tab-kho #inventory-import-submit,
    #tab-kho #inventory-export-submit {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: 15px !important;
    }
    #tab-kho #inventory-export-submit {
        font-size: 16px !important;
    }
    #tab-kho #inventory-export-submit i {
        font-size: 1.05rem !important;
    }
    /* Image preview gọn */
    #tab-kho #inventory-image-preview,
    #tab-kho #inventory-export-image-preview {
        width: 44px !important;
        height: 44px !important;
    }
    #tab-kho #inventory-image-preview-wrap,
    #tab-kho #inventory-export-image-preview-wrap {
        padding: 8px !important;
        gap: 8px !important;
    }
    /* Card tiêu đề + mô tả nhỏ */
    #tab-kho .ui-page-title {
        font-size: 22px !important;
        line-height: 1.2;
    }
    #tab-kho .ui-page-copy {
        font-size: 12px !important;
    }
    #tab-kho .ui-section-title {
        font-size: 15px !important;
    }
    #tab-kho .ui-section-copy,
    #tab-kho .ui-subsection-title {
        font-size: 12px !important;
    }
    /* Bảng lịch sử 2 cột → stack dọc trên mobile, mỗi cột 1 hàng ngang */
    #tab-kho .inventory-history-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    #tab-kho .inventory-history-grid {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
        gap: 16px !important;
    }
    #tab-kho #inventory-recent-imports,
    #tab-kho #inventory-recent-exports {
        max-height: 320px !important;
    }
    /* ============================================================
       CARD LỊCH SỬ NHẬP/XUẤT — COMPACT HORIZONTAL MOBILE
       Mỗi card: giảm chiều ngang + chiều cao để nhiều card hiển thị
       hơn, vuốt mượt hơn.
       ============================================================ */
    /* Card wrapper gọn */
    #tab-kho #inventory-recent-imports > div,
    #tab-kho #inventory-recent-exports > div {
        padding: 8px !important;
        border-radius: 10px !important;
    }
    /* Flex container: giảm gap giữa ảnh và info */
    #tab-kho #inventory-recent-imports > div > .flex,
    #tab-kho #inventory-recent-exports > div > .flex {
        gap: 8px !important;
    }
    /* Ảnh thumbnail gọn 80px → 44px (-45%) */
    #tab-kho #inventory-recent-imports img,
    #tab-kho #inventory-recent-exports img {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
    }
    /* Placeholder ảnh không có (no-img) cũng gọn theo — dùng data-image-type vì class thật là div chứ không phải placeholder */
    #tab-kho #inventory-recent-imports div[data-image-type],
    #tab-kho #inventory-recent-exports div[data-image-type] {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        font-size: 11px !important;
    }
    /* Tên máy + status: gọn */
    #tab-kho #inventory-recent-imports h5,
    #tab-kho #inventory-recent-exports h5 {
        font-size: 12px !important;
        line-height: 1.25 !important;
        margin-bottom: 1px !important;
    }
    /* Các text phụ (dung lượng, màu, IMEI) */
    #tab-kho #inventory-recent-imports p,
    #tab-kho #inventory-recent-exports p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin-top: 1px !important;
    }
    /* IMEI/Serial font monospace - giữ nguyên nhưng giảm kích thước */
    #tab-kho #inventory-recent-imports .font-mono,
    #tab-kho #inventory-recent-exports .font-mono {
        font-size: 10.5px !important;
    }
    /* Status badge: nhỏ gọn */
    #tab-kho #inventory-recent-imports .inline-block,
    #tab-kho #inventory-recent-exports .inline-block {
        font-size: 9px !important;
        padding: 1px 6px !important;
    }
    /* Repair tag */
    #tab-kho #inventory-recent-imports .inventory-repair-tag,
    #tab-kho #inventory-recent-exports .inventory-repair-tag {
        font-size: 10px !important;
        padding: 1px 6px !important;
        margin-top: 2px !important;
    }
    /* Hidden reason box: gọn */
    #tab-kho #inventory-recent-imports .border-purple-500\\/30,
    #tab-kho #inventory-recent-exports .border-purple-500\\/30 {
        padding: 5px 6px !important;
        font-size: 10.5px !important;
        margin-top: 4px !important;
    }
    /* Footer row: price + timestamp */
    #tab-kho #inventory-recent-imports .flex.items-center.justify-between,
    #tab-kho #inventory-recent-exports .flex.items-center.justify-between {
        margin-top: 4px !important;
    }
    #tab-kho #inventory-recent-imports .flex.items-center.justify-between span,
    #tab-kho #inventory-recent-exports .flex.items-center.justify-between span {
        font-size: 10.5px !important;
    }
    /* Heading của 2 danh sách con */
    #tab-kho #inventory-import-history-heading,
    #tab-kho #inventory-activity-history-heading {
        font-size: 12px !important;
    }
    /* Bộ lọc gọn */
    #tab-kho #inventory-activity-search,
    #tab-kho #inventory-brand-filter,
    #tab-kho #inventory-status-filter,
    #tab-kho #inventory-activity-sort {
        font-size: 13px !important;
        padding: 7px 10px !important;
    }
    /* Repair fieldset padding gọn */
    #tab-kho #inventory-export-repair-fields {
        padding: 10px !important;
    }
    #tab-kho #inventory-export-repair-fields legend {
        font-size: 11px !important;
    }
    #tab-kho #inventory-export-repair-fields input,
    #tab-kho #inventory-export-repair-fields select,
    #tab-kho #inventory-export-repair-fields textarea {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
    /* Status text nhỏ */
    #tab-kho .inventory-export-status {
        font-size: 12px !important;
    }
    /* Card spacing giữa 2 disclosure */
    #tab-kho .grid.grid-cols-1.xl\\:grid-cols-2 {
        gap: 12px !important;
    }
}

/* Trên mobile rất nhỏ (≤ 380px) thu gọn thêm */
@media (max-width: 380px) {
    #tab-kho form label {
        font-size: 10.5px !important;
    }
    #tab-kho form#inventory-import-form input,
    #tab-kho form#inventory-import-form select,
    #tab-kho form#inventory-export-form input,
    #tab-kho form#inventory-export-form select {
        font-size: 13px !important;
    }
    #tab-kho #inventory-export-submit {
        font-size: 15px !important;
        padding: 9px !important;
    }
    /* Card lịch sử nhỏ hơn nữa */
    #tab-kho #inventory-recent-imports img,
    #tab-kho #inventory-recent-exports img,
    #tab-kho #inventory-recent-imports div[data-image-type],
    #tab-kho #inventory-recent-exports div[data-image-type] {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
    }
    #tab-kho #inventory-recent-imports > div,
    #tab-kho #inventory-recent-exports > div {
        padding: 6px !important;
    }
    #tab-kho #inventory-recent-imports > div > .flex,
    #tab-kho #inventory-recent-exports > div > .flex {
        gap: 6px !important;
    }
    #tab-kho #inventory-recent-imports h5,
    #tab-kho #inventory-recent-exports h5 {
        font-size: 11.5px !important;
    }
}

/* ========================================
       ĐỢT 2: FILTER CHIP + STATS TABLE VISUAL + CONFIRM MODAL ICON + OFFLINE INDICATOR
       ======================================== */

/* ==================== FILTER CHIP BUTTONS ==================== */
.chip-filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.chip-filter-label {
    font-size: 0.75rem;
    color: var(--ghz-text-muted, #9ca3af);
    font-weight: 500;
}

.chip-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    background: var(--ghz-input-bg, rgba(20, 23, 27, 0.5));
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 999px;
    padding: 3px;
}

.chip-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ghz-text-muted, #9ca3af);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    box-sizing: border-box;
}

.chip-filter-item i {
    font-size: 0.7rem;
    opacity: 0.7;
}

.chip-filter-item:hover {
    color: var(--ghz-text-on-default, #e5e7eb);
    background: rgba(255, 255, 255, 0.04);
}

.chip-filter-item.active,
.chip-filter-item.state-expanded {
    background: var(--ghz-brand-active-bg, rgba(0, 195, 122, 0.18));
    color: var(--ghz-text-on-brand-strong, #052e16);
    border: 1px solid var(--ghz-brand-active-border, rgba(0, 195, 122, 0.45));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 35%, transparent);
}

.chip-filter-item.active i,
.chip-filter-item.state-expanded i {
    opacity: 1;
}

/* P0_31 — state mới: collapsed (gấp / phụ) + disabled */
.chip-filter-item.state-collapsed {
    color: var(--ghz-brand-color, #00c37a);
    background: var(--ghz-brand-soft-08, rgba(0, 195, 122, 0.05));
    border: 1px dashed color-mix(in srgb, var(--ghz-brand-color, #00c37a) 45%, transparent);
}
.chip-filter-item.state-collapsed:hover {
    background: var(--ghz-brand-soft-12, rgba(0, 195, 122, 0.10));
}
.chip-filter-item.state-disabled {
    color: var(--ghz-text-muted, #4b5563);
    background: var(--ghz-brand-soft-06, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--ghz-card-border, rgba(255, 255, 255, 0.04));
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.chip-filter-item:focus-visible {
    outline: 2px solid var(--ghz-brand-color, #4d8dff);
    outline-offset: 1px;
}

/* Mobile: chip group cuộn ngang để tránh tràn */
@media (max-width: 640px) {
    .chip-filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
    }
    .chip-filter-label {
        font-size: 0.7rem;
    }
    .chip-filter-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.25rem;
        padding: 3px;
    }
    .chip-filter-list::-webkit-scrollbar { height: 0; display: none; }
    .chip-filter-item {
        padding: 4px 9px;
        font-size: 0.7rem;
        flex-shrink: 0;
    }
    .chip-filter-item i { font-size: 0.65rem; }
    /* Badge admin-only (shield) hiển thị nhỏ hơn trên mobile */
    .chip-filter-item .chip-admin-badge {
        font-size: 0.55rem;
        opacity: 0.9;
    }
}

/* Desktop: keep filter chips visually consistent with the compact mobile style. */
@media (min-width: 768px) {
    .chip-filter-list,
    #inventory-status-chips,
    #inventory-layout-chips {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding: 3px;
        border-radius: 999px;
    }

    .chip-filter-item {
        min-height: 0;
        padding: 4px 9px;
        gap: 0.375rem;
        border-radius: 999px;
        font-size: 0.7rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: normal;
        transition: background-color .15s ease, border-color .15s ease,
            color .15s ease, box-shadow .15s ease;
    }

    .chip-filter-item i {
        width: auto;
        font-size: 0.65rem;
    }

    .chip-filter-item:hover:not(:disabled):not(.active) {
        transform: none;
    }

    .chip-filter-item.active:hover,
    .chip-filter-item.state-expanded:hover {
        transform: none;
    }
}

/* Admin-only badge trong chip */
.chip-admin-badge {
    color: var(--ghz-info, #4d8dff);
    margin-left: 2px;
    font-size: 0.65rem;
    opacity: 0.75;
}

/* ==================== PERMISSION MATRIX CHIPS ==================== */
.permissions-matrix {
    display: grid;
    gap: 0.75rem;
}

.permissions-matrix-card {
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--ghz-card-bg, rgba(20, 23, 27, 0.5));
}

.permissions-matrix-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
}

.permissions-matrix-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ghz-text-primary, #e5e7eb);
}

.permissions-matrix-count {
    margin: 0;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ghz-text-muted, #9ca3af);
}

.permissions-matrix-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.permissions-chip {
    min-height: 32px;
}

.permissions-matrix-note {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--ghz-text-muted, #9ca3af);
}

.admin-template-section {
    margin: 0;
}

.admin-template-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ghz-text-primary, #e5e7eb);
}

.admin-template-section-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.permissions-chip[disabled],
.permissions-chip[aria-busy="true"] {
    opacity: 0.6;
    cursor: wait;
}

@media (max-width: 640px) {
    .permissions-matrix {
        gap: 0.5rem;
    }
    .permissions-matrix-card {
        padding: 0.625rem 0.75rem;
        border-radius: 0.625rem;
    }
    .permissions-matrix-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        margin-bottom: 0.5rem;
    }
    .permissions-matrix-title {
        font-size: 0.8125rem;
        line-height: 1.2;
    }
    .permissions-matrix-count {
        font-size: 0.6875rem;
    }
    .permissions-matrix-chips {
        flex-wrap: wrap;
        gap: 0.25rem;
        overflow-x: visible;
    }
    .permissions-chip {
        flex-shrink: 0;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.6875rem !important;
        min-height: 28px;
        gap: 0.25rem;
    }
    .permissions-chip i {
        font-size: 0.6875rem;
    }
    /* Admin: card tài khoản gọn lại trên mobile */
    /* Dùng grid để tránh bug flex của <summary> trên Chrome mobile */
    #admin-account-management .ui-disclosure-summary {
        padding: 0.75rem 1rem;
        display: grid !important;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-items: center;
        gap: 0.5rem;
    }
    #admin-account-management .ui-disclosure-summary > span {
        font-size: 0.8125rem;
    }
    /* Tiêu đề "Quản lý tài khoản" + chevron: 1 dòng, icon + text + chevron nằm ngang */
    #admin-account-management .ui-disclosure-summary > div:first-child {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }
    #admin-account-management .ui-disclosure-summary > div:first-child > span {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--ghz-text-primary, #fff);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Dropdown full-width trên mobile (dòng dưới) */
    #admin-account-management .ui-disclosure-summary select {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        font-size: 0.8125rem;
        padding: 0.4375rem 0.625rem;
        min-width: 0;
        background-color: var(--ghz-input-bg, var(--inputbg, #1e2530));
        border: 1px solid var(--ghz-input-border, var(--bordercol, #3a3f4b));
        color: var(--ghz-text-primary, #fff);
        border-radius: 0.5rem;
    }
    #admin-account-list {
        gap: 0.5rem;
    }
    #admin-account-list > div {
        padding: 0.625rem 0.75rem;
        border-radius: 0.625rem;
    }
    /* Chỉ áp dụng font-size nhỏ cho span là thông tin, KHÔNG áp cho tên + badge */
    #admin-account-list > div p {
        font-size: 0.75rem;
    }
    #admin-account-list > div button {
        padding: 0.4375rem 0.625rem;
        font-size: 0.75rem;
    }
    /* Tên tài khoản: cho phép xuống dòng + giữ badge tách riêng (mobile) */
    #admin-account-list > div .admin-account-name {
        font-size: 0.9375rem;
        line-height: 1.25;
        word-break: break-word;
    }
    #admin-account-list > div .admin-account-badge {
        font-size: 0.6875rem;
        white-space: nowrap;
        padding: 0.25rem 0.625rem;
    }
    #admin-account-list > div .admin-account-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    /* Bỏ padding ngang của nút trong mobile để nút căn đều */
    #admin-account-list > div .admin-account-actions button {
        padding: 0.5rem 0.25rem;
    }
    #admin-account-list > div .admin-account-actions button i {
        margin-right: 0.25rem;
    }
}

/* ===== Badge trạng thái tài khoản: nhỏ gọn + tô màu phân biệt (áp dụng mọi nơi) ===== */
.admin-account-badge {
    font-size: 0.6875rem !important;
    line-height: 1 !important;
    padding: 0.1875rem 0.5rem !important;
    border-radius: 999px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.admin-account-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.admin-account-badge--active,
.admin-account-badge.state-expanded {
    background-color: var(--ghz-brand-soft-18, rgba(22, 163, 74, 0.18));
    color: var(--ghz-brand-color, #4ade80);
    border: 1px solid color-mix(in srgb, var(--ghz-brand-color, #22c55e) 45%, transparent);
}
.admin-account-badge--active::before,
.admin-account-badge.state-expanded::before {
    background-color: var(--ghz-brand-color, #22c55e);
    box-shadow: 0 0 6px var(--ghz-brand-glow-35, rgba(34, 197, 94, 0.6));
    animation: admin-badge-pulse 1.6s ease-in-out infinite;
}
.admin-account-badge.state-default {
    background-color: color-mix(in srgb, var(--ghz-text-muted, #9ca3af) 18%, transparent);
    color: var(--ghz-text-muted, #9ca3af);
    border: 1px solid color-mix(in srgb, var(--ghz-text-muted, #9ca3af) 40%, transparent);
}
.admin-account-badge--archived,
.admin-account-badge.state-collapsed {
    background-color: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.30);
}
.admin-account-badge--archived::before,
.admin-account-badge.state-collapsed::before {
    background-color: #fbbf24;
}
.admin-account-badge.state-disabled {
    background-color: rgba(239, 68, 68, 0.10);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.25);
    cursor: not-allowed;
    opacity: 0.7;
    pointer-events: none;
}
.admin-account-badge.state-disabled::before {
    background-color: #ef4444;
    animation: none;
    box-shadow: none;
}
@keyframes admin-badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(1.35); }
}
@media (min-width: 640px) {
    /* Desktop: trở lại layout flex ngang: title trái, dropdown phải, chevron ngoài cùng */
    #admin-account-management .ui-disclosure-summary {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }
    #admin-account-management .ui-disclosure-summary > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }
    #admin-account-management .ui-disclosure-summary > div:first-child > span {
        white-space: nowrap;
        overflow: visible;
        text-overflow: unset;
    }
    #admin-account-management .ui-disclosure-summary select {
        grid-column: unset;
        grid-row: unset;
        flex: 0 0 auto;
        width: auto;
    }
    #admin-account-list > div .admin-account-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 1rem;
    }
    #admin-account-list > div .admin-account-actions button {
        padding: 0.5rem 0.75rem;
    }
}

/* ==================== INVENTORY HISTORY LAYOUT TOGGLE ==================== */
/* Chip toggle nằm ngang trên cùng dòng tiêu đề (desktop) */
.chip-filter-group--inline {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.chip-filter-group--inline .chip-filter-list {
    padding: 2px;
    gap: 0.2rem;
}
.chip-filter-group--inline .chip-filter-item {
    padding: 3px 9px;
    font-size: 0.7rem;
}

/* Mobile: 2 cột wrap thành 1 cột cho gọn */
@media (max-width: 640px) {
    .inventory-history-grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        min-width: 0 !important;
    }
    #inventory-recent-imports,
    #inventory-recent-exports {
        max-height: 400px !important;
    }
    #inventory-recent-unified {
        max-height: 500px !important;
    }
}

/* ==================== STATS TABLE VISUAL HIERARCHY ==================== */
.stats-table-enhanced {
    border-collapse: separate;
    border-spacing: 0;
}

.stats-table-enhanced thead th {
    background: linear-gradient(180deg, var(--ghz-tabbar-bg-fallback, rgba(20,23,27,0.9)) 0%, var(--ghz-card-bg, rgba(14,16,19,0.85)) 100%);
    border-bottom: 2px solid var(--ghz-card-border, #2a2e35);
    font-weight: 700;
    letter-spacing: 0.03em;
}
/* Cố định: header bảng thống kê có nền đặc + z-index cao để KHÔNG bị row trượt qua */
.stats-table-wrap table thead.sticky {
    z-index: 10 !important;
}
.stats-table-wrap table thead.sticky th {
    position: sticky !important;
    top: 0 !important;
    background: #1c2127 !important;
    color: #9ca3af !important;
    box-shadow: 0 2px 0 0 rgba(0,0,0,0.4);
    z-index: 10 !important;
}
.stats-table-enhanced tbody tr {
    transition: background 0.12s ease;
}

.stats-table-enhanced tbody tr:hover {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 4%, transparent);
}

.stats-cell-qty {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
    font-size: 1rem !important;
    color: #f59e0b !important;
    font-weight: 800 !important;
}

.stats-cell-qty::before {
    content: '×';
    margin-right: 2px;
    color: var(--ghz-text-muted, #6b7280);
    font-weight: 500;
}

.stats-cell-kpi {
    font-variant-numeric: tabular-nums;
    font-size: 1.0625rem !important;
}

.stats-cell-kpi.text-primary {
    color: var(--ghz-brand-color, #00c37a) !important;
    background: var(--ghz-brand-soft-08, rgba(0, 195, 122, 0.08));
    border-radius: 8px;
}

/* ==================== DESKTOP/TABLET RESPONSIVE LAYOUT ==================== */
/* Grid 2 cột cho các card section trên tablet trở lên */
@media (min-width: 768px) {
    #tab-congviec > .space-y-6 > .card:not(:has(table)):not(:has(.schedule-week-wrap)),
    #tab-cua-toi > .space-y-6 > .card:not(:has(table)) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        align-items: start;
    }
    /* Bảng dữ liệu: full width */
    #tab-congviec > .space-y-6 > .card:has(table),
    #tab-congviec > .space-y-6 > details,
    #tab-cua-toi > .space-y-6 > .card:has(table),
    #tab-cua-toi > .space-y-6 > details {
        grid-column: 1 / -1;
    }
    /* Container responsive: tận dụng không gian rộng */
    .responsive-card-table {
        font-size: 0.875rem;
    }
}

/* Desktop (>=1024px): Grid 2 cột rộng hơn + padding tăng */
@media (min-width: 1024px) {
    #tab-congviec > .space-y-6 > .card:not(:has(table)):not(:has(.schedule-week-wrap)),
    #tab-cua-toi > .space-y-6 > .card:not(:has(table)) {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    /* Card padding rộng hơn */
    .card.p-6 {
        padding: 1.5rem !important;
    }
    /* Bảng stats: padding cells rộng hơn */
    .responsive-card-table td {
        padding: 0.75rem 1rem !important;
    }
    .responsive-card-table th {
        padding: 0.625rem 1rem !important;
    }
}

/* Large desktop (>=1280px): Grid 3 cột cho các stats cards nhỏ */
@media (min-width: 1280px) {
    #tab-cua-toi > .space-y-6 > .card:has(#my-ranking-list),
    #tab-cua-toi > .space-y-6 > .card:has(.own-summary) {
        grid-column: span 1;
    }
}

/* Desktop/Tablet: giữ min-width từ HTML để bảng rộng vẫn cuộn ngang đúng. */
@media (min-width: 768px) {
    .responsive-card-table {
        width: 100%;
    }
}

/* Desktop/Tablet: Modal responsive - rộng hơn trên màn hình lớn */
@media (min-width: 768px) {
    .app-modal-overlay .card.max-w-md {
        max-width: 36rem !important;
    }
    .app-modal-overlay .card.max-w-lg {
        max-width: 42rem !important;
    }
    .app-modal-overlay .card.max-w-xl {
        max-width: 48rem !important;
    }
    /* Modal history: padding thoáng hơn */
    #emp-history-modal .card,
    #inventory-device-detail-modal .card,
    #inventory-recent-detail-modal .card {
        padding: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    /* Modal lớn trên desktop: chiếm 60% màn hình ngang */
    .app-modal-overlay .card.max-w-4xl {
        max-width: 60vw !important;
        max-width: 64rem !important;
    }
    /* Modal trung bình: chiếm 50% */
    .app-modal-overlay .card.max-w-2xl {
        max-width: 48rem !important;
    }
    .app-modal-overlay .card.max-w-xl {
        max-width: 42rem !important;
    }
    /* Padding modal desktop */
    #emp-history-modal .card,
    #inventory-device-detail-modal .card,
    #inventory-recent-detail-modal .card {
        padding: 1.75rem !important;
    }
}

/* ==================== CONFIRM MODAL ICON ==================== */
.confirm-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.confirm-icon-danger {
    background: rgba(239, 68, 68, 0.16);
    color: #f87171;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.06);
}

.confirm-icon-warning {
    background: rgba(234, 179, 8, 0.16);
    color: #facc15;
    box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.06);
}

.confirm-icon-info {
    background: rgba(77, 141, 255, 0.16);
    color: #75a7ff;
    box-shadow: 0 0 0 4px rgba(77, 141, 255, 0.06);
}

/* ==================== OFFLINE INDICATOR ==================== */
.offline-indicator {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--ghz-card-bg, #1f242b);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ghz-text-muted, #9ca3af);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;            /* ẩn hoàn toàn khỏi render tree + a11y */
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    max-width: calc(100vw - 32px);
}

.offline-indicator.visible {
    opacity: 1;
    visibility: visible;           /* hiện ngay khi có class visible */
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.offline-indicator.offline {
    border-color: color-mix(in srgb, var(--ghz-danger, #ef4444) 40%, transparent);
    color: var(--ghz-danger, #f87171);
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.08));
}

.offline-indicator.online {
    border-color: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.4));
    color: var(--ghz-brand-color, #00c37a);
    background: var(--ghz-brand-soft-08, rgba(0, 195, 122, 0.08));
}

.offline-indicator i {
    font-size: 14px;
}

@media (max-width: 767px) {
    .offline-indicator {
        top: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        left: 12px;
        justify-content: center;
    }
}

/* ========================================
   ĐỢT 3: ANIMATION + BREADCRUMB + GLOBAL SEARCH + UNDO
   ======================================== */

/* BREADCRUMB: đã xóa hoàn toàn khỏi app (CSS + JS + DOM) — không render breadcrumb nữa. */

/* FIX: CSS .phase3-search-* / .phase3-undo-btn đã lỗi thời — DOM hiện dùng .app-search-*
   do bundle.js render. Xóa toàn bộ block cũ (290+ dòng) để file gọn và tránh override nhầm. */

/* ==================== CTV SELF-VIEW — CARD MOBILE + COLLAPSE LỊCH SỬ ==================== */
/* Desktop giữ bảng; mobile dùng chung pattern responsive-card-table. */

/* Các rule table cũ phía dưới chỉ áp dụng từ tablet trở lên; nếu để chúng chạy trên
   mobile, selector ID với !important sẽ phá layout card của responsive-card-table. */
@media (max-width: 767px) {
    .ctv-self-table-scroll {
        max-height: none !important;
        overflow: visible !important;
        border: 0;
        border-radius: 0;
    }
    .ctv-self-table-wrap {
        width: 100%;
    }
    .ctv-self-sale-table,
    .ctv-self-bonus-table {
        width: 100% !important;
        min-width: 0 !important;
    }

    #ctv-self-sale-table-body tr,
    #ctv-self-bonus-history-body tr {
        display: block !important;
        background: #14171b !important;
        border: 1px solid var(--ghz-card-border, #2a2e35) !important;
        border-radius: 14px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    #ctv-self-sale-table-body tr:last-child,
    #ctv-self-bonus-history-body tr:last-child {
        margin-bottom: 0 !important;
    }
    #ctv-self-sale-table-body td,
    #ctv-self-bonus-history-body td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px;
        width: 100% !important;
        max-width: none !important;
        min-height: 36px;
        padding: 10px 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.04) !important;
        white-space: normal !important;
        text-align: right !important;
        flex: none !important;
    }
    #ctv-self-sale-table-body td:first-child,
    #ctv-self-bonus-history-body td:first-child {
        border-top: 0 !important;
    }
    #ctv-self-sale-table-body td::before,
    #ctv-self-bonus-history-body td::before {
        content: attr(data-label) !important;
        display: block !important;
        flex: 0 0 auto !important;
        max-width: 42% !important;
        font-size: 10.5px;
        line-height: 1.3;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        text-align: left;
        color: #6b7280;
    }
    #ctv-self-sale-table-body td > *,
    #ctv-self-bonus-history-body td > * {
        max-width: 58%;
    }
}

/* ID selectors + class + tag = specificity (0,1,4,0) → thắng MỌI rule .responsive-card-table */
#ctv-self-sale-table-body tr td,
#ctv-self-bonus-history-body tr td {
    display: table-cell !important;
    padding: 12px !important;
    /* KHÔNG ép text-align: để class text-left/text-center/text-right từ HTML tự quyết định */
    width: auto !important;
    max-width: none !important;
    border: none !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    flex: none !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

#ctv-self-sale-table-body tr,
#ctv-self-bonus-history-body tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}

#ctv-self-sale-table-body,
#ctv-self-bonus-history-body {
    display: table-row-group !important;
}

/* Bỏ data-label giả ::before trên body td */
#ctv-self-sale-table-body td::before,
#ctv-self-bonus-history-body td::before {
    content: none !important;
    display: none !important;
}

/* Header của 2 bảng này: hiển thị ngang (gốc ẩn thead) */
.ctv-self-sale-table thead,
.ctv-self-bonus-table thead {
    display: table-header-group !important;
}

.ctv-self-sale-table thead th,
.ctv-self-bonus-table thead th {
    padding: 12px !important;
    white-space: nowrap !important;
    font-weight: 700;
    display: table-cell !important;
    /* KHÔNG ép text-align: để class text-center/text-right từ HTML tự quyết định */
    vertical-align: middle !important;
}

/* Wrapper overflow-x: KHÔNG để CSS gốc override thành visible */
.ctv-self-sale-table,
.ctv-self-bonus-table {
    table-layout: auto;
    width: 100%;
    min-width: 600px;
}

/* Trên mobile: bảng cuộn ngang, font/padding bóp nhỏ để gọn hơn */
@media (max-width: 767px) {
    .ctv-self-sale-table thead th,
    .ctv-self-bonus-table thead th {
        padding: 8px 6px !important;
        font-size: 10px !important;
    }
    #ctv-self-sale-table-body td,
    #ctv-self-bonus-history-body td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        white-space: normal !important;
        word-break: break-word;
    }
    #ctv-self-sale-table-body td.text-right,
    #ctv-self-bonus-history-body td.text-right {
        text-align: right !important;
    }
    #ctv-self-sale-table-body td.text-center,
    #ctv-self-bonus-history-body td.text-center {
        text-align: center !important;
    }
}

/* ==================== CTV TABLE FIX: SCROLLABLE BODY + RESPONSIVE ==================== */
/* Cấu trúc:
   <div class="ctv-self-table-scroll">      ← cuộn CẢ NGANG & DỌC
     <table>...</table>
   </div>
   KHÔNG tách 2 wrapper - tách ra sẽ khiến width không vượt được container cha
   vì overflow-x chỉ có tác dụng khi nội dung RỘNG HƠN container rõ rệt.
*/

/* Wrapper duy nhất: scroll cả 2 chiều, có max-height để giới hạn dọc */
.ctv-self-table-scroll {
    width: 100%;
    max-height: 420px !important;
    overflow: auto !important;       /* cả x và y */
    overflow-x: auto !important;
    overflow-y: auto !important;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
    display: block;                  /* tách khỏi table layout để width:100% không bị override */
    background: transparent;
}

/* Bảng: width > container để kích hoạt scroll ngang */
.ctv-self-sale-table,
.ctv-self-bonus-table {
    width: max-content;              /* bảng rộng bằng nội dung, KHÔNG bị ép 100% */
    min-width: 100%;                 /* nhưng tối thiểu = 100% wrapper */
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

/* Wrapper ngang (giữ để tương thích nếu có div lồng thêm) */
.ctv-self-table-wrap {
    width: 100%;
    display: block;
}

/* Header sticky khi cuộn dọc */
.ctv-self-sale-table thead th,
.ctv-self-bonus-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: var(--ghz-input-bg, #1a1d23) !important;
    padding: 12px !important;
    white-space: nowrap !important;
    font-weight: 700;
    display: table-cell !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
}

/* Body rows: phải là table-row để giữ layout cột */
#ctv-self-sale-table-body tr,
#ctv-self-bonus-history-body tr {
    display: table-row !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: none !important;
}

/* Body tbody: giữ table-row-group để layout chuẩn */
#ctv-self-sale-table-body,
#ctv-self-bonus-history-body {
    display: table-row-group !important;
}

/* Body td: table-cell, có wrap text để không tràn */
#ctv-self-sale-table-body td,
#ctv-self-bonus-history-body td {
    display: table-cell !important;
    padding: 10px 8px !important;
    border: none !important;
    vertical-align: middle !important;
    width: auto !important;
    max-width: 220px !important;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal !important;
}

/* Cột số (text-right) và cột giữa (text-center) */
#ctv-self-sale-table-body td.text-right,
#ctv-self-bonus-history-body td.text-right {
    text-align: right !important;
    white-space: nowrap !important;
    max-width: 160px !important;
}

#ctv-self-sale-table-body td.text-center,
#ctv-self-bonus-history-body td.text-center {
    text-align: center !important;
    white-space: nowrap !important;
    max-width: 120px !important;
}

/* Bỏ ::before giả của responsive-card-table */
#ctv-self-sale-table-body td::before,
#ctv-self-bonus-history-body td::before {
    content: none !important;
    display: none !important;
}

/* Mobile: bảng nhỏ gọn hơn, vẫn cuộn ngang + dọc */
@media (max-width: 639px) {
    .ctv-self-table-scroll {
        max-height: 340px !important;
    }

    .ctv-self-sale-table,
    .ctv-self-bonus-table {
        min-width: 720px;
    }

    .ctv-self-sale-table thead th,
    .ctv-self-bonus-table thead th {
        padding: 8px 6px !important;
        font-size: 10px !important;
    }

    #ctv-self-sale-table-body td,
    #ctv-self-bonus-history-body td {
        padding: 8px 6px !important;
        font-size: 12px !important;
        max-width: 180px !important;
    }

    /* Scrollbar mỏng trên mobile */
    .ctv-self-table-scroll::-webkit-scrollbar {
        width: 4px;
        height: 6px;
    }

    .ctv-self-table-scroll::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.25);
        border-radius: 999px;
    }
    
    /* Chỉ dấu scrollbar ngang dạng thanh mỏng */
    .ctv-self-table-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
}

/* === EMP HISTORY MODAL — FIX SCROLL + THEME FOR COLUMN "Thao tác" ===
   Lý do: rule .responsive-card-table td[data-label="Thao tác"] toàn cục ép
   flex column + nền/border cứng khiến nút Sửa/Xóa trong #emp-history-modal
   bị dãn full-width và tách rời khỏi token glass/theme. Đồng thời
   body/html bị khóa touch-action khi modal mở nên .modal-scroll cần
   touch-action riêng để cuộn được. */
#emp-history-modal .modal-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    min-height: 0;
    flex: 1 1 auto;
    /* KHÔNG đặt max-height ở đây — để CSS flex tính toán vùng cuộn từ
       card.parent (max-h-[90vh] flex flex-col). Việc set max-height cứng
       là nguyên nhân scroll bị "lố" modal / kẹt trong khoảng không cố định. */
    /* Đảm bảo nhận wheel event độc lập với ancestor overflow:hidden */
    pointer-events: auto !important;
    /* Force scrollbar luôn hiển thị (trackpad/wheel có thể ẩn scrollbar mặc định) */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #2a2e35 #0e1013;
}
/* tbody#modal-history-body khớp selector [id$="-body"] của modal nên bị biến
   thành vùng cuộn lồng (overflow auto + overscroll contain). Trên mobile,
   thao tác vuốt bị tbody giữ lại và .modal-scroll không cuộn → ép về thường. */
#emp-history-modal #modal-history-body {
    overflow: visible !important;
    flex: none !important;
    min-height: auto !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
}
/* Webkit scrollbar cho modal scroll - luôn hiển thị để user thấy có thể cuộn */
#emp-history-modal .modal-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    -webkit-appearance: none;
}
#emp-history-modal .modal-scroll::-webkit-scrollbar-track {
    background: #0e1013;
    border-radius: 4px;
}
#emp-history-modal .modal-scroll::-webkit-scrollbar-thumb {
    background: #2a2e35;
    border-radius: 4px;
    min-height: 24px;
}
#emp-history-modal .modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #3a424d;
}
/* KHÔNG override max-height ở mobile — để .card.ui-modal-mobile max-height tự co. */
#emp-history-modal .responsive-card-table tbody tr,
#modal-history-body tr {
    overflow: visible !important;
    transform: none !important;
}
#emp-history-modal .responsive-card-table td {
    overflow: visible !important;
}
#emp-history-modal .responsive-card-table td[data-label="Thao tác"],
#emp-history-modal td.history-actions-cell {
    background: transparent !important;
    border-top: 1px solid var(--ghz-card-border, rgba(255,255,255,.06)) !important;
}
#emp-history-modal .history-actions {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: auto !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}
#emp-history-modal .history-actions .ui-icon-button-glass {
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 36px !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}
#emp-history-modal .history-actions-empty {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: var(--ghz-text-muted, #6b7280);
    font-size: 12px;
}
/* Trên card mobile: ghi đè rule toàn cục "column/full-width" chỉ trong modal này */
@media (max-width: 768px) {
    #emp-history-modal .responsive-card-table td[data-label="Thao tác"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 10px 14px !important;
    }
    #emp-history-modal .responsive-card-table td[data-label="Thao tác"]::before {
        flex: 0 0 auto !important;
        max-width: none !important;
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    #emp-history-modal .responsive-card-table td.history-actions-cell::before {
        /* Nhãn "Thao tác" vẫn hiện nhưng không chiếm trọn dòng */
    }
    #emp-history-modal .history-actions,
    #emp-history-modal td[data-label="Thao tác"] > .history-actions {
        width: auto !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile: đảm bảo card không chặn scroll của .modal-scroll */
    #emp-history-modal > .card,
    #emp-history-modal .card.ui-modal-mobile {
        overflow: visible !important;
    }
    
    #emp-history-modal .modal-scroll {
        /* Tăng cường touch scrolling */
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        /* Đảm bảo có momentum scrolling trên iOS */
        will-change: scroll-position;
    }
}

/* Stats cards mobile: ẩn cột Thao tác (nút Chi tiết) — cả card đã tappable */
@media (max-width: 767px) {
    #stats-table-body td[data-label="Thao tác"],
    #my-stats-table-body td[data-label="Thao tác"] {
        display: none !important;
    }
}

/* CTV self tables: final mobile override after legacy desktop-table rules above. */
@media (max-width: 767px) {
    .ctv-self-table-scroll {
        max-height: none !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .ctv-self-table-wrap {
        width: 100% !important;
    }
    .ctv-self-sale-table,
    .ctv-self-bonus-table {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border-collapse: collapse !important;
    }
    .ctv-self-sale-table thead,
    .ctv-self-bonus-table thead {
        display: none !important;
    }
    #ctv-self-sale-table-body,
    #ctv-self-bonus-history-body {
        display: block !important;
    }
    #ctv-self-sale-table-body tr,
    #ctv-self-bonus-history-body tr {
        display: block !important;
        width: 100% !important;
        background: #14171b !important;
        border: 1px solid var(--ghz-card-border, #2a2e35) !important;
        border-radius: 14px !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
    }
    #ctv-self-sale-table-body tr:last-child,
    #ctv-self-bonus-history-body tr:last-child {
        margin-bottom: 0 !important;
    }
    #ctv-self-sale-table-body td,
    #ctv-self-bonus-history-body td {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 36px !important;
        padding: 10px 14px !important;
        border: 0 !important;
        border-top: 1px solid rgba(255,255,255,.04) !important;
        white-space: normal !important;
        text-align: right !important;
        flex: none !important;
    }
    #ctv-self-sale-table-body td:first-child,
    #ctv-self-bonus-history-body td:first-child {
        border-top: 0 !important;
    }
    #ctv-self-sale-table-body td::before,
    #ctv-self-bonus-history-body td::before {
        content: attr(data-label) !important;
        display: block !important;
        flex: 0 0 auto !important;
        max-width: 42% !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
        letter-spacing: .05em !important;
        text-transform: uppercase !important;
        text-align: left !important;
        color: #6b7280 !important;
    }
    #ctv-self-sale-table-body td > *,
    #ctv-self-bonus-history-body td > * {
        max-width: 58% !important;
    }
}

/* ==================== ACCOUNT FROZEN OVERLAY ====================
   Chặn toàn bộ ứng dụng khi tài khoản bị admin lưu trữ; chỉ nút Đăng xuất
   bên trong overlay nhận tương tác. */
.app-frozen-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1.25rem !important;
    background: rgba(8, 10, 14, 0.84) !important;
    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
    pointer-events: auto !important;
}
.app-frozen-overlay.hidden { display: none !important; }
.app-frozen-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top, rgba(239, 68, 68, 0.18), transparent 55%),
                radial-gradient(ellipse at bottom, rgba(220, 38, 38, 0.12), transparent 55%);
    pointer-events: none;
}
.app-frozen-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.75rem 1.5rem;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 22px;
    background: var(--ghz-card-glass-bg, rgba(24, 27, 32, 0.96));
    box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(239, 68, 68, 0.18);
    text-align: center;
}
.app-frozen-icon-wrap {
    width: 76px;
    height: 76px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.22), rgba(220, 38, 38, 0.18));
    border: 1px solid rgba(239, 68, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-frozen-icon { font-size: 2rem; color: #fca5a5; }
.app-frozen-title { color: #fff; font-size: 1.25rem; font-weight: 700; line-height: 1.35; margin: 0 0 0.75rem; }
.app-frozen-desc { color: #d1d5db; font-size: 0.9375rem; line-height: 1.55; margin: 0 0 1.5rem; }
.app-frozen-desc strong { color: #fca5a5; }
.app-frozen-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.app-frozen-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    padding: 0.85rem 1.25rem;
    border-radius: 14px;
    font: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-frozen-btn-primary { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); }
.app-frozen-hint { margin: 0; color: #9ca3af; font-size: 0.75rem; line-height: 1.45; }
body.app-frozen-active { overflow: hidden !important; touch-action: none !important; pointer-events: none !important; }
#account-frozen-overlay,
#account-frozen-overlay * { pointer-events: auto !important; }

/* ==================== COLLAPSE TRIGGER (CTV Lịch sử) ==================== */
.phase3-collapse-trigger {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    outline: none;
    transition: opacity 0.15s ease;
}

.phase3-collapse-trigger:hover {
    opacity: 0.85;
}

.phase3-collapse-trigger:focus-visible {
    outline: 2px solid rgba(0, 195, 122, 0.4);
    outline-offset: 4px;
    border-radius: 8px;
}

.phase3-collapse-icon {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ghz-text-primary, #ffffff) 6%, transparent);
    color: var(--ghz-text-muted, #9ca3af);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, background 0.15s ease;
    font-size: 12px;
    flex-shrink: 0;
}

.phase3-collapse-trigger[aria-expanded="true"] .phase3-collapse-icon {
    transform: rotate(180deg);
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15));
    color: var(--ghz-brand-color, #00c37a);
}

.phase3-collapse-panel {
    overflow: hidden;
    animation: phase3CollapseFade 0.25s ease-out;
}

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

/* ==================== EMPLOYEE SELF-VIEW (PHASE 3) ==================== */
/* Style cho 3 card mới: Thông tin cá nhân, Công việc hôm nay, Hoạt động gần đây */
#my-info-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.my-info-avatar-initial {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ghz-brand-color, #00c37a);
}

.my-today-task-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 10px;
    transition: background-color 0.15s ease;
}

.my-today-task-item:hover {
    background: var(--ghz-card-bg, #1a1d22);
}

.my-today-task-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15));
    color: var(--ghz-brand-color, #00c37a);
    display: flex;
    align-items: center;
    justify-content: center;
}

.my-today-task-icon.is-done {
    background: var(--ghz-success-bg, rgba(74, 222, 128, 0.15));
    color: var(--ghz-success, #4ade80);
}

.my-today-task-content {
    flex: 1;
    min-width: 0;
}

.my-today-task-title {
    color: var(--ghz-text-primary, #fff);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-today-task-meta {
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 12px;
    margin-top: 2px;
}

.my-recent-work-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--ghz-input-bg, #14171b);
    border: 1px solid var(--ghz-input-border, #2a2e35);
    border-radius: 10px;
}

.my-recent-work-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.my-recent-work-icon.is-work {
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.15));
    color: var(--ghz-brand-color, #00c37a);
}

.my-recent-work-icon.is-handover {
    background: var(--ghz-info-bg, rgba(77, 141, 255, 0.15));
    color: var(--ghz-info, #4d8dff);
}

.my-recent-work-icon.is-report {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}

.my-recent-work-content {
    flex: 1;
    min-width: 0;
}

.my-recent-work-title {
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.my-recent-work-meta {
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 11px;
    margin-top: 2px;
}

.my-empty-state {
    text-align: center;
    padding: 20px;
    color: var(--ghz-text-muted, #374151);
    font-size: 13px;
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    border: 1px dashed var(--ghz-card-glass-border, rgba(255,255,255,0.18));
    border-radius: 10px;
}

/* ==================== END EMPLOYEE SELF-VIEW ==================== */

/* ==================== GHZ GLASS CARD (UNIFIED PATTERN) ==================== */
/* Class dùng chung cho MỌI card (lớn + phụ) — đồng nhất theme-aware.
   Ưu tiên biến từ theme-engine.js:
     --ghz-card-glass-bg      : gradient tone theme (mint-fresh, midnight, classic, ...)
     --ghz-card-glass-border  : border tone theme
     --ghz-card-glass-blur    : blur(28px) saturate(1.8) (mạnh hơn để tách bg)
     --ghz-card-glass-shadow  : inset highlight + drop shadow tone theme
     --ghz-text-primary       : text chính (đậm/tối ở theme sáng, sáng ở theme tối)
   Fallback an toàn khi biến không có (vd theme classic cũ chưa set glass vars):
     → bg mờ trắng 8% + blur 24px + border trắng 10% + shadow subtle.
   Theme classic không có --ghz-card-glass-bg → áp dụng fallback mặc định (vẫn đẹp, vẫn tách bg). */
.ghz-glass-card {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    border: 1px solid var(--ghz-card-glass-border, rgba(255,255,255,0.12));
    border-radius: 12px;
    box-shadow: var(--ghz-card-glass-shadow,
        0 1px 0 0 rgba(255,255,255,0.10) inset,
        0 8px 32px rgba(0,0,0,0.18),
        0 2px 8px rgba(0,0,0,0.10));
    color: var(--ghz-text-primary, #1f2937);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
/* Fallback cho browser không hỗ trợ backdrop-filter (Safari cũ, Edge cũ): bg đậm đặc để vẫn đọc được */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ghz-glass-card {
        background: rgba(20,25,30,0.92);
    }
    html[data-theme="classic"] .ghz-glass-card {
        background: rgba(15,20,17,0.94);
    }
    html[data-theme="midnight"] .ghz-glass-card {
        background: rgba(15,32,39,0.94);
    }
    html[data-theme="deep-space"] .ghz-glass-card,
    html[data-theme="pure-dark"] .ghz-glass-card,
    html[data-theme="charcoal"] .ghz-glass-card {
        background: rgba(20,20,25,0.94);
    }
}

/* ==================== INVENTORY RECENT LIST (Lịch sử nhập/xuất) ==================== */
/* Áp dụng cho [data-item-idx] card trong #inventory-recent-imports + #inventory-recent-exports.
   Vấn đề: bundle.js render text-white / text-gray-* cứng → theme sáng không đọc được.
   Giải pháp: dùng [data-item-idx] (attribute duy nhất của card lịch sử) để override text-white
   thành màu theme-aware ở theme sáng, giữ nguyên ở theme tối. */

/* ===== HEADER: .ui-subsection-title "Danh sách lịch sử" / "Máy nhập" / "Máy xuất" ===== */
/* app.min.css đặt color: #e5e7eb cứng (xám nhạt) → theme sáng pastel không đọc được.
   Force theme-aware color bằng hex cứng + !important cho mỗi theme. */
.ui-subsection-title {
    color: var(--ghz-text-primary, #1f2937) !important;
}
/* Theme tối → giữ #e5e7eb (xám sáng) */
html[data-theme="classic"] .ui-subsection-title,
html[data-theme="midnight"] .ui-subsection-title,
html[data-theme="deep-space"] .ui-subsection-title,
html[data-theme="pure-dark"] .ui-subsection-title,
html[data-theme="charcoal"] .ui-subsection-title,
html[data-theme="purple-haze"] .ui-subsection-title {
    color: #e5e7eb !important;
}
/* Theme sáng → hex cứng đậm theo từng theme */
html[data-theme="mint-fresh"] .ui-subsection-title {
    color: #1a202c !important;
}
html[data-theme="peach-cream"] .ui-subsection-title {
    color: #2d2418 !important;
}
html[data-theme="lavender-mist"] .ui-subsection-title {
    color: #2d1f4e !important;
}
html[data-theme="sky-blue"] .ui-subsection-title {
    color: #1e3a5f !important;
}
html[data-theme="sunset"] .ui-subsection-title {
    color: #5a2a1a !important;
}
html[data-theme="fire"] .ui-subsection-title {
    color: #5c2a0a !important;
}
html[data-theme="pink-bloom"] .ui-subsection-title {
    color: #5a1f3d !important;
}

/* ===== Icon heading "Máy nhập" / "Máy xuất" (text-primary, themed-disclosure-icon) ===== */
/* text-primary (icon Nhập) → tone primary brand */
.ui-subsection-title .text-primary {
    color: var(--ghz-brand-color, #00c37a) !important;
}
/* themed-disclosure-icon (icon Xuất) → mặc định xám sáng, force theme-aware */
.ui-subsection-title .themed-disclosure-icon {
    color: var(--ghz-text-secondary, #9ca3af) !important;
}
html[data-theme="classic"] .ui-subsection-title .themed-disclosure-icon,
html[data-theme="midnight"] .ui-subsection-title .themed-disclosure-icon,
html[data-theme="deep-space"] .ui-subsection-title .themed-disclosure-icon,
html[data-theme="pure-dark"] .ui-subsection-title .themed-disclosure-icon,
html[data-theme="charcoal"] .ui-subsection-title .themed-disclosure-icon,
html[data-theme="purple-haze"] .ui-subsection-title .themed-disclosure-icon {
    color: #d1d5db !important;
}
html[data-theme="mint-fresh"] .ui-subsection-title .themed-disclosure-icon {
    color: #2d5048 !important;
}
html[data-theme="peach-cream"] .ui-subsection-title .themed-disclosure-icon {
    color: #6b4423 !important;
}
html[data-theme="lavender-mist"] .ui-subsection-title .themed-disclosure-icon {
    color: #4a3578 !important;
}
html[data-theme="sky-blue"] .ui-subsection-title .themed-disclosure-icon {
    color: #1e4976 !important;
}
html[data-theme="sunset"] .ui-subsection-title .themed-disclosure-icon {
    color: #7a3825 !important;
}
html[data-theme="fire"] .ui-subsection-title .themed-disclosure-icon {
    color: #7c3a14 !important;
}
html[data-theme="pink-bloom"] .ui-subsection-title .themed-disclosure-icon {
    color: #6b2848 !important;
}
[data-item-idx] h5.text-white {
    color: var(--ghz-text-primary, #1f2937);
}
/* Theme tối (bg tối) → text trắng giữ nguyên theo bundle.js */
html[data-theme="classic"] [data-item-idx] h5.text-white,
html[data-theme="midnight"] [data-item-idx] h5.text-white,
html[data-theme="deep-space"] [data-item-idx] h5.text-white,
html[data-theme="pure-dark"] [data-item-idx] h5.text-white,
html[data-theme="charcoal"] [data-item-idx] h5.text-white,
html[data-theme="purple-haze"] [data-item-idx] h5.text-white {
    color: #ffffff !important;
}
/* Theme sáng (bg kem) → text đậm theo theme - dùng hex cứng để bypass CSS var fallback issue */
html[data-theme="mint-fresh"] [data-item-idx] h5.text-white {
    color: #1a202c !important;
}
html[data-theme="peach-cream"] [data-item-idx] h5.text-white {
    color: #2d2418 !important;
}
html[data-theme="lavender-mist"] [data-item-idx] h5.text-white {
    color: #2d1f4e !important;
}
html[data-theme="sky-blue"] [data-item-idx] h5.text-white {
    color: #1e3a5f !important;
}
html[data-theme="sunset"] [data-item-idx] h5.text-white {
    color: #5a2a1a !important;
}
html[data-theme="fire"] [data-item-idx] h5.text-white {
    color: #5c2a0a !important;
}
html[data-theme="pink-bloom"] [data-item-idx] h5.text-white {
    color: #5a1f3d !important;
}

/* Border card: tone theme (mặc định border-bordercol có thể quá đậm ở theme sáng pastel) */
[data-item-idx],
[data-unified-idx] {
    border-color: var(--ghz-card-border, rgba(120,140,150,0.45)) !important;
}
/* Border dưới trong card (giữa content) */
[data-item-idx] .border-t,
[data-unified-idx] .border-t { border-color: var(--ghz-card-border, rgba(120,140,150,0.40)) !important; }

/* Card loại Nhập (border-l-primary) - tone thống nhất theo từng nhóm theme */
[data-item-idx].border-l-primary,
[data-unified-idx].border-l-primary {
    border-left-color: var(--ghz-brand-color, #00c37a) !important;
}
/* Theme TỐI → nền tone primary mờ (giống bundle.js gốc, dùng brand color với opacity thấp) */
html[data-theme="classic"] [data-item-idx].border-l-primary,
html[data-theme="midnight"] [data-item-idx].border-l-primary,
html[data-theme="deep-space"] [data-item-idx].border-l-primary,
html[data-theme="pure-dark"] [data-item-idx].border-l-primary,
html[data-theme="charcoal"] [data-item-idx].border-l-primary,
html[data-theme="purple-haze"] [data-item-idx].border-l-primary,
html[data-theme="classic"] [data-unified-idx].border-l-primary,
html[data-theme="midnight"] [data-unified-idx].border-l-primary,
html[data-theme="deep-space"] [data-unified-idx].border-l-primary,
html[data-theme="pure-dark"] [data-unified-idx].border-l-primary,
html[data-theme="charcoal"] [data-unified-idx].border-l-primary,
html[data-theme="purple-haze"] [data-unified-idx].border-l-primary {
    background-color: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 6%, transparent) !important;
}
/* Theme SÁNG → nền kem trắng giống Lịch sử bàn giao, text tối đậm dễ đọc */
html[data-theme="mint-fresh"] [data-item-idx].border-l-primary,
html[data-theme="peach-cream"] [data-item-idx].border-l-primary,
html[data-theme="lavender-mist"] [data-item-idx].border-l-primary,
html[data-theme="sky-blue"] [data-item-idx].border-l-primary,
html[data-theme="sunset"] [data-item-idx].border-l-primary,
html[data-theme="fire"] [data-item-idx].border-l-primary,
html[data-theme="pink-bloom"] [data-item-idx].border-l-primary,
html[data-theme="mint-fresh"] [data-unified-idx].border-l-primary,
html[data-theme="peach-cream"] [data-unified-idx].border-l-primary,
html[data-theme="lavender-mist"] [data-unified-idx].border-l-primary,
html[data-theme="sky-blue"] [data-unified-idx].border-l-primary,
html[data-theme="sunset"] [data-unified-idx].border-l-primary,
html[data-theme="fire"] [data-unified-idx].border-l-primary,
html[data-theme="pink-bloom"] [data-unified-idx].border-l-primary {
    background-color: #fef3e2 !important;
}

[data-item-idx].border-l-yellow-500,
[data-unified-idx].border-l-yellow-500 {
    border-left-color: var(--ghz-warning, #fbbf24) !important;
}
html[data-theme="classic"] [data-item-idx].border-l-yellow-500,
html[data-theme="midnight"] [data-item-idx].border-l-yellow-500,
html[data-theme="deep-space"] [data-item-idx].border-l-yellow-500,
html[data-theme="pure-dark"] [data-item-idx].border-l-yellow-500,
html[data-theme="charcoal"] [data-item-idx].border-l-yellow-500,
html[data-theme="purple-haze"] [data-item-idx].border-l-yellow-500,
html[data-theme="classic"] [data-unified-idx].border-l-yellow-500,
html[data-theme="midnight"] [data-unified-idx].border-l-yellow-500,
html[data-theme="deep-space"] [data-unified-idx].border-l-yellow-500,
html[data-theme="pure-dark"] [data-unified-idx].border-l-yellow-500,
html[data-theme="charcoal"] [data-unified-idx].border-l-yellow-500,
html[data-theme="purple-haze"] [data-unified-idx].border-l-yellow-500 {
    background-color: color-mix(in srgb, var(--ghz-warning, #fbbf24) 6%, transparent) !important;
}
html[data-theme="mint-fresh"] [data-item-idx].border-l-yellow-500,
html[data-theme="peach-cream"] [data-item-idx].border-l-yellow-500,
html[data-theme="lavender-mist"] [data-item-idx].border-l-yellow-500,
html[data-theme="sky-blue"] [data-item-idx].border-l-yellow-500,
html[data-theme="sunset"] [data-item-idx].border-l-yellow-500,
html[data-theme="fire"] [data-item-idx].border-l-yellow-500,
html[data-theme="pink-bloom"] [data-item-idx].border-l-yellow-500,
html[data-theme="mint-fresh"] [data-unified-idx].border-l-yellow-500,
html[data-theme="peach-cream"] [data-unified-idx].border-l-yellow-500,
html[data-theme="lavender-mist"] [data-unified-idx].border-l-yellow-500,
html[data-theme="sky-blue"] [data-unified-idx].border-l-yellow-500,
html[data-theme="sunset"] [data-unified-idx].border-l-yellow-500,
html[data-theme="fire"] [data-unified-idx].border-l-yellow-500,
html[data-theme="pink-bloom"] [data-unified-idx].border-l-yellow-500 {
    background-color: #fef3e2 !important;
}

/* Override Tailwind .bg-primary\/[0.03] (primary = cam #ff7e29) để không tô cam nhạt card ở theme sáng.
   Tailwind compile class này thành background-color: rgba(255,126,41,0.03).
   !important + specificity cao hơn (.bg-primary\/\[0\.03\] có 1 class = 0,1,0,0) */
html[data-theme="mint-fresh"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="peach-cream"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="lavender-mist"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="sky-blue"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="sunset"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="fire"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="pink-bloom"] [data-item-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="mint-fresh"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="peach-cream"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="lavender-mist"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="sky-blue"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="sunset"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="fire"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\],
html[data-theme="pink-bloom"] [data-unified-idx].border-l-primary.bg-primary\/\[0\.03\] {
    background-color: #fef3e2 !important;
}
html[data-theme="mint-fresh"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="peach-cream"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="lavender-mist"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="sky-blue"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="sunset"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="fire"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="pink-bloom"] [data-item-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="mint-fresh"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="peach-cream"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="lavender-mist"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="sky-blue"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="sunset"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="fire"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\],
html[data-theme="pink-bloom"] [data-unified-idx].border-l-yellow-500.bg-yellow-400\/\[0\.03\] {
    background-color: #fef3e2 !important;
}

[data-item-idx].border-l-gray-500,
[data-unified-idx].border-l-gray-500 {
    border-left-color: var(--ghz-text-muted, #6b7280) !important;
    background-color: color-mix(in srgb, var(--ghz-text-muted, #6b7280) 5%, transparent) !important;
}

/* ====== STATS TABLE (#stats-table-body) - Theme aware ====== */
/* Container: nền trắng kem ở theme sáng, giữ tối ở theme tối */
html[data-theme="classic"] #stats-table-body,
html[data-theme="midnight"] #stats-table-body,
html[data-theme="deep-space"] #stats-table-body,
html[data-theme="pure-dark"] #stats-table-body,
html[data-theme="charcoal"] #stats-table-body,
html[data-theme="purple-haze"] #stats-table-body {
    background-color: transparent !important;
}
html[data-theme="mint-fresh"] #stats-table-body,
html[data-theme="peach-cream"] #stats-table-body,
html[data-theme="lavender-mist"] #stats-table-body,
html[data-theme="sky-blue"] #stats-table-body,
html[data-theme="sunset"] #stats-table-body,
html[data-theme="fire"] #stats-table-body,
html[data-theme="pink-bloom"] #stats-table-body {
    background-color: #fef3e2 !important;
}

/* Row hover: tối hơn ở theme sáng (không phải inputbg nhạt) */
html[data-theme="classic"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="midnight"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="deep-space"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="pure-dark"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="charcoal"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="purple-haze"] #stats-table-body tr.hover\:bg-inputbg\/50:hover {
    background-color: rgba(255,255,255,.04) !important;
}
html[data-theme="mint-fresh"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="peach-cream"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="lavender-mist"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="sky-blue"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="sunset"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="fire"] #stats-table-body tr.hover\:bg-inputbg\/50:hover,
html[data-theme="pink-bloom"] #stats-table-body tr.hover\:bg-inputbg\/50:hover {
    background-color: rgba(0,0,0,.06) !important;
}

/* Tên NV (cột đầu tiên): text đậm tối ở theme sáng */
html[data-theme="classic"] #stats-table-body td:first-child,
html[data-theme="midnight"] #stats-table-body td:first-child,
html[data-theme="deep-space"] #stats-table-body td:first-child,
html[data-theme="pure-dark"] #stats-table-body td:first-child,
html[data-theme="charcoal"] #stats-table-body td:first-child,
html[data-theme="purple-haze"] #stats-table-body td:first-child {
    color: inherit !important;
}
html[data-theme="mint-fresh"] #stats-table-body td:first-child,
html[data-theme="peach-cream"] #stats-table-body td:first-child,
html[data-theme="lavender-mist"] #stats-table-body td:first-child,
html[data-theme="sky-blue"] #stats-table-body td:first-child,
html[data-theme="sunset"] #stats-table-body td:first-child,
html[data-theme="fire"] #stats-table-body td:first-child,
html[data-theme="pink-bloom"] #stats-table-body td:first-child {
    color: #1f2937 !important;
}

/* Badge XANH "Đã hoàn thành": điều chỉnh opacity cho theme sáng */
html[data-theme="mint-fresh"] #stats-table-body .bg-green-500\/15,
html[data-theme="peach-cream"] #stats-table-body .bg-green-500\/15,
html[data-theme="lavender-mist"] #stats-table-body .bg-green-500\/15,
html[data-theme="sky-blue"] #stats-table-body .bg-green-500\/15,
html[data-theme="sunset"] #stats-table-body .bg-green-500\/15,
html[data-theme="fire"] #stats-table-body .bg-green-500\/15,
html[data-theme="pink-bloom"] #stats-table-body .bg-green-500\/15 {
    background-color: rgba(22,163,74,.15) !important;
}
html[data-theme="mint-fresh"] #stats-table-body .text-green-300,
html[data-theme="peach-cream"] #stats-table-body .text-green-300,
html[data-theme="lavender-mist"] #stats-table-body .text-green-300,
html[data-theme="sky-blue"] #stats-table-body .text-green-300,
html[data-theme="sunset"] #stats-table-body .text-green-300,
html[data-theme="fire"] #stats-table-body .text-green-300,
html[data-theme="pink-bloom"] #stats-table-body .text-green-300 {
    color: #15803d !important;
}
html[data-theme="mint-fresh"] #stats-table-body .border-green-500\/30,
html[data-theme="peach-cream"] #stats-table-body .border-green-500\/30,
html[data-theme="lavender-mist"] #stats-table-body .border-green-500\/30,
html[data-theme="sky-blue"] #stats-table-body .border-green-500\/30,
html[data-theme="sunset"] #stats-table-body .border-green-500\/30,
html[data-theme="fire"] #stats-table-body .border-green-500\/30,
html[data-theme="pink-bloom"] #stats-table-body .border-green-500\/30 {
    border-color: rgba(22,163,74,.3) !important;
}

/* Badge VÀNG "Chưa hoàn thành": điều chỉnh cho theme sáng */
html[data-theme="mint-fresh"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="peach-cream"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="lavender-mist"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="sky-blue"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="sunset"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="fire"] #stats-table-body .bg-yellow-500\/15,
html[data-theme="pink-bloom"] #stats-table-body .bg-yellow-500\/15 {
    background-color: rgba(234,179,8,.18) !important;
}
html[data-theme="mint-fresh"] #stats-table-body .text-yellow-300,
html[data-theme="peach-cream"] #stats-table-body .text-yellow-300,
html[data-theme="lavender-mist"] #stats-table-body .text-yellow-300,
html[data-theme="sky-blue"] #stats-table-body .text-yellow-300,
html[data-theme="sunset"] #stats-table-body .text-yellow-300,
html[data-theme="fire"] #stats-table-body .text-yellow-300,
html[data-theme="pink-bloom"] #stats-table-body .text-yellow-300 {
    color: #a16207 !important;
}
html[data-theme="mint-fresh"] #stats-table-body .border-yellow-500\/30,
html[data-theme="peach-cream"] #stats-table-body .border-yellow-500\/30,
html[data-theme="lavender-mist"] #stats-table-body .border-yellow-500\/30,
html[data-theme="sky-blue"] #stats-table-body .border-yellow-500\/30,
html[data-theme="sunset"] #stats-table-body .border-yellow-500\/30,
html[data-theme="fire"] #stats-table-body .border-yellow-500\/30,
html[data-theme="pink-bloom"] #stats-table-body .border-yellow-500\/30 {
    border-color: rgba(234,179,8,.3) !important;
}

/* KPI trống (-): xám đậm ở theme sáng */
html[data-theme="classic"] #stats-table-body .text-gray-600,
html[data-theme="midnight"] #stats-table-body .text-gray-600,
html[data-theme="deep-space"] #stats-table-body .text-gray-600,
html[data-theme="pure-dark"] #stats-table-body .text-gray-600,
html[data-theme="charcoal"] #stats-table-body .text-gray-600,
html[data-theme="purple-haze"] #stats-table-body .text-gray-600 {
    color: #9ca3af !important;
}
html[data-theme="mint-fresh"] #stats-table-body .text-gray-600,
html[data-theme="peach-cream"] #stats-table-body .text-gray-600,
html[data-theme="lavender-mist"] #stats-table-body .text-gray-600,
html[data-theme="sky-blue"] #stats-table-body .text-gray-600,
html[data-theme="sunset"] #stats-table-body .text-gray-600,
html[data-theme="fire"] #stats-table-body .text-gray-600,
html[data-theme="pink-bloom"] #stats-table-body .text-gray-600 {
    color: #6b7280 !important;
}

/* Ngày: xám ở theme sáng */
html[data-theme="classic"] #stats-table-body .text-gray-500,
html[data-theme="midnight"] #stats-table-body .text-gray-500,
html[data-theme="deep-space"] #stats-table-body .text-gray-500,
html[data-theme="pure-dark"] #stats-table-body .text-gray-500,
html[data-theme="charcoal"] #stats-table-body .text-gray-500,
html[data-theme="purple-haze"] #stats-table-body .text-gray-500 {
    color: #9ca3af !important;
}
html[data-theme="mint-fresh"] #stats-table-body .text-gray-500,
html[data-theme="peach-cream"] #stats-table-body .text-gray-500,
html[data-theme="lavender-mist"] #stats-table-body .text-gray-500,
html[data-theme="sky-blue"] #stats-table-body .text-gray-500,
html[data-theme="sunset"] #stats-table-body .text-gray-500,
html[data-theme="fire"] #stats-table-body .text-gray-500,
html[data-theme="pink-bloom"] #stats-table-body .text-gray-500 {
    color: #6b7280 !important;
}

/* Button Chi tiết: nền trắng nhạt ở theme sáng */
html[data-theme="classic"] #stats-table-body .bg-inputbg,
html[data-theme="midnight"] #stats-table-body .bg-inputbg,
html[data-theme="deep-space"] #stats-table-body .bg-inputbg,
html[data-theme="pure-dark"] #stats-table-body .bg-inputbg,
html[data-theme="charcoal"] #stats-table-body .bg-inputbg,
html[data-theme="purple-haze"] #stats-table-body .bg-inputbg {
    background-color: #181b20 !important;
}
html[data-theme="mint-fresh"] #stats-table-body .bg-inputbg,
html[data-theme="peach-cream"] #stats-table-body .bg-inputbg,
html[data-theme="lavender-mist"] #stats-table-body .bg-inputbg,
html[data-theme="sky-blue"] #stats-table-body .bg-inputbg,
html[data-theme="sunset"] #stats-table-body .bg-inputbg,
html[data-theme="fire"] #stats-table-body .bg-inputbg,
html[data-theme="pink-bloom"] #stats-table-body .bg-inputbg {
    background-color: rgba(255,255,255,.7) !important;
}
html[data-theme="classic"] #stats-table-body .text-gray-200,
html[data-theme="midnight"] #stats-table-body .text-gray-200,
html[data-theme="deep-space"] #stats-table-body .text-gray-200,
html[data-theme="pure-dark"] #stats-table-body .text-gray-200,
html[data-theme="charcoal"] #stats-table-body .text-gray-200,
html[data-theme="purple-haze"] #stats-table-body .text-gray-200 {
    color: #d1d5db !important;
}
html[data-theme="mint-fresh"] #stats-table-body .text-gray-200,
html[data-theme="peach-cream"] #stats-table-body .text-gray-200,
html[data-theme="lavender-mist"] #stats-table-body .text-gray-200,
html[data-theme="sky-blue"] #stats-table-body .text-gray-200,
html[data-theme="sunset"] #stats-table-body .text-gray-200,
html[data-theme="fire"] #stats-table-body .text-gray-200,
html[data-theme="pink-bloom"] #stats-table-body .text-gray-200 {
    color: #374151 !important;
}

/* IMEI text-primary - theme aware */
[data-item-idx] .font-mono.text-primary {
    color: var(--ghz-brand-color, var(--primary, #ff7e29)) !important;
}

/* ====== INVENTORY DEVICE DETAIL MODAL - Card "Thông tin nhập kho" ====== */
/* Nền card: trắng kem ở theme sáng, tối ở theme tối */
html[data-theme="classic"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="midnight"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="deep-space"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="pure-dark"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="charcoal"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="purple-haze"] #inventory-device-detail-modal .bg-inputbg\/40 {
    background-color: rgba(24,27,32,.4) !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="peach-cream"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="sky-blue"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="sunset"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="fire"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .bg-inputbg\/40 {
    background-color: #fef3e2 !important;
}

/* Border card trong modal: theme tối */
html[data-theme="classic"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="midnight"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="deep-space"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="pure-dark"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="charcoal"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="purple-haze"] #inventory-device-detail-modal .bg-inputbg\/40 {
    border-color: rgba(100,120,140,.3) !important;
}
/* Border card trong modal: theme sáng */
html[data-theme="mint-fresh"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="peach-cream"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="sky-blue"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="sunset"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="fire"] #inventory-device-detail-modal .bg-inputbg\/40,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .bg-inputbg\/40 {
    border-color: rgba(0,0,0,.12) !important;
}

/* Label text-gray-300: tối đậm ở theme sáng */
html[data-theme="classic"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="midnight"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="deep-space"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="pure-dark"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="charcoal"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="purple-haze"] #inventory-device-detail-modal .text-gray-300 {
    color: #d1d5db !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="peach-cream"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="sky-blue"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="sunset"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="fire"] #inventory-device-detail-modal .text-gray-300,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .text-gray-300 {
    color: #374151 !important;
}

/* Value text-white: tối đậm ở theme sáng */
html[data-theme="classic"] #inventory-device-detail-modal .text-white,
html[data-theme="midnight"] #inventory-device-detail-modal .text-white,
html[data-theme="deep-space"] #inventory-device-detail-modal .text-white,
html[data-theme="pure-dark"] #inventory-device-detail-modal .text-white,
html[data-theme="charcoal"] #inventory-device-detail-modal .text-white,
html[data-theme="purple-haze"] #inventory-device-detail-modal .text-white {
    color: #f9fafb !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .text-white,
html[data-theme="peach-cream"] #inventory-device-detail-modal .text-white,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .text-white,
html[data-theme="sky-blue"] #inventory-device-detail-modal .text-white,
html[data-theme="sunset"] #inventory-device-detail-modal .text-white,
html[data-theme="fire"] #inventory-device-detail-modal .text-white,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .text-white {
    color: #1f2937 !important;
}

/* Meta text-gray-400: xám đậm ở theme sáng */
html[data-theme="classic"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="midnight"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="deep-space"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="pure-dark"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="charcoal"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="purple-haze"] #inventory-device-detail-modal .text-gray-400 {
    color: #9ca3af !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="peach-cream"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="sky-blue"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="sunset"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="fire"] #inventory-device-detail-modal .text-gray-400,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .text-gray-400 {
    color: #6b7280 !important;
}

/* Border trong card (border-bordercol): mỏng ở theme sáng */
html[data-theme="classic"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="midnight"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="deep-space"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="pure-dark"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="charcoal"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="purple-haze"] #inventory-device-detail-modal .border-bordercol {
    border-color: rgba(100,120,140,.3) !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="peach-cream"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="sky-blue"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="sunset"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="fire"] #inventory-device-detail-modal .border-bordercol,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .border-bordercol {
    border-color: rgba(0,0,0,.1) !important;
}

/* Copy button: nền trắng nhạt ở theme sáng */
html[data-theme="classic"] #inventory-device-detail-modal .copy-btn,
html[data-theme="midnight"] #inventory-device-detail-modal .copy-btn,
html[data-theme="deep-space"] #inventory-device-detail-modal .copy-btn,
html[data-theme="pure-dark"] #inventory-device-detail-modal .copy-btn,
html[data-theme="charcoal"] #inventory-device-detail-modal .copy-btn,
html[data-theme="purple-haze"] #inventory-device-detail-modal .copy-btn {
    color: #9ca3af !important;
}
html[data-theme="mint-fresh"] #inventory-device-detail-modal .copy-btn,
html[data-theme="peach-cream"] #inventory-device-detail-modal .copy-btn,
html[data-theme="lavender-mist"] #inventory-device-detail-modal .copy-btn,
html[data-theme="sky-blue"] #inventory-device-detail-modal .copy-btn,
html[data-theme="sunset"] #inventory-device-detail-modal .copy-btn,
html[data-theme="fire"] #inventory-device-detail-modal .copy-btn,
html[data-theme="pink-bloom"] #inventory-device-detail-modal .copy-btn {
    color: #6b7280 !important;
}

/* ====== STATUS BADGES (Đang tồn, Đã xuất, Đã hủy) ====== */
/* Tăng opacity bg để nổi bật trên mọi nền */
html[data-theme="classic"] .bg-green-500\/10,
html[data-theme="midnight"] .bg-green-500\/10,
html[data-theme="deep-space"] .bg-green-500\/10,
html[data-theme="pure-dark"] .bg-green-500\/10,
html[data-theme="charcoal"] .bg-green-500\/10,
html[data-theme="purple-haze"] .bg-green-500\/10 {
    background-color: rgba(34,197,94,.12) !important;
}
html[data-theme="mint-fresh"] .bg-green-500\/10,
html[data-theme="peach-cream"] .bg-green-500\/10,
html[data-theme="lavender-mist"] .bg-green-500\/10,
html[data-theme="sky-blue"] .bg-green-500\/10,
html[data-theme="sunset"] .bg-green-500\/10,
html[data-theme="fire"] .bg-green-500\/10,
html[data-theme="pink-bloom"] .bg-green-500\/10 {
    background-color: rgba(34,197,94,.18) !important;
}
html[data-theme="mint-fresh"] .text-green-400,
html[data-theme="peach-cream"] .text-green-400,
html[data-theme="lavender-mist"] .text-green-400,
html[data-theme="sky-blue"] .text-green-400,
html[data-theme="sunset"] .text-green-400,
html[data-theme="fire"] .text-green-400,
html[data-theme="pink-bloom"] .text-green-400 {
    color: #16a34a !important;
}
html[data-theme="mint-fresh"] .border-green-500\/30,
html[data-theme="peach-cream"] .border-green-500\/30,
html[data-theme="lavender-mist"] .border-green-500\/30,
html[data-theme="sky-blue"] .border-green-500\/30,
html[data-theme="sunset"] .border-green-500\/30,
html[data-theme="fire"] .border-green-500\/30,
html[data-theme="pink-bloom"] .border-green-500\/30 {
    border-color: rgba(34,197,94,.35) !important;
}

/* Badge VÀNG */
html[data-theme="classic"] .bg-yellow-500\/10,
html[data-theme="midnight"] .bg-yellow-500\/10,
html[data-theme="deep-space"] .bg-yellow-500\/10,
html[data-theme="pure-dark"] .bg-yellow-500\/10,
html[data-theme="charcoal"] .bg-yellow-500\/10,
html[data-theme="purple-haze"] .bg-yellow-500\/10 {
    background-color: rgba(234,179,8,.12) !important;
}
html[data-theme="mint-fresh"] .bg-yellow-500\/10,
html[data-theme="peach-cream"] .bg-yellow-500\/10,
html[data-theme="lavender-mist"] .bg-yellow-500\/10,
html[data-theme="sky-blue"] .bg-yellow-500\/10,
html[data-theme="sunset"] .bg-yellow-500\/10,
html[data-theme="fire"] .bg-yellow-500\/10,
html[data-theme="pink-bloom"] .bg-yellow-500\/10 {
    background-color: rgba(234,179,8,.18) !important;
}
html[data-theme="mint-fresh"] .text-yellow-300,
html[data-theme="peach-cream"] .text-yellow-300,
html[data-theme="lavender-mist"] .text-yellow-300,
html[data-theme="sky-blue"] .text-yellow-300,
html[data-theme="sunset"] .text-yellow-300,
html[data-theme="fire"] .text-yellow-300,
html[data-theme="pink-bloom"] .text-yellow-300 {
    color: #ca8a04 !important;
}
html[data-theme="mint-fresh"] .border-yellow-500\/30,
html[data-theme="peach-cream"] .border-yellow-500\/30,
html[data-theme="lavender-mist"] .border-yellow-500\/30,
html[data-theme="sky-blue"] .border-yellow-500\/30,
html[data-theme="sunset"] .border-yellow-500\/30,
html[data-theme="fire"] .border-yellow-500\/30,
html[data-theme="pink-bloom"] .border-yellow-500\/30 {
    border-color: rgba(234,179,8,.35) !important;
}

/* Badge TÍM (voided) */
html[data-theme="mint-fresh"] .bg-purple-500\/10,
html[data-theme="peach-cream"] .bg-purple-500\/10,
html[data-theme="lavender-mist"] .bg-purple-500\/10,
html[data-theme="sky-blue"] .bg-purple-500\/10,
html[data-theme="sunset"] .bg-purple-500\/10,
html[data-theme="fire"] .bg-purple-500\/10,
html[data-theme="pink-bloom"] .bg-purple-500\/10 {
    background-color: rgba(168,85,247,.15) !important;
}
html[data-theme="mint-fresh"] .text-purple-300,
html[data-theme="peach-cream"] .text-purple-300,
html[data-theme="lavender-mist"] .text-purple-300,
html[data-theme="sky-blue"] .text-purple-300,
html[data-theme="sunset"] .text-purple-300,
html[data-theme="fire"] .text-purple-300,
html[data-theme="pink-bloom"] .text-purple-300 {
    color: #7c3aed !important;
}
html[data-theme="mint-fresh"] .border-purple-500\/30,
html[data-theme="peach-cream"] .border-purple-500\/30,
html[data-theme="lavender-mist"] .border-purple-500\/30,
html[data-theme="sky-blue"] .border-purple-500\/30,
html[data-theme="sunset"] .border-purple-500\/30,
html[data-theme="fire"] .border-purple-500\/30,
html[data-theme="pink-bloom"] .border-purple-500\/30 {
    border-color: rgba(168,85,247,.3) !important;
}

/* ===== Caption (capacity, color, IMEI meta) — text-gray-400 ===== */
/* Theme tối: giữ xám nhạt */
html[data-theme="classic"] [data-item-idx] .text-gray-400,
html[data-theme="midnight"] [data-item-idx] .text-gray-400,
html[data-theme="deep-space"] [data-item-idx] .text-gray-400,
html[data-theme="pure-dark"] [data-item-idx] .text-gray-400,
html[data-theme="charcoal"] [data-item-idx] .text-gray-400,
html[data-theme="purple-haze"] [data-item-idx] .text-gray-400 {
    color: #9ca3af !important;
}
/* Theme sáng: hex cứng đậm hơn để bypass fallback */
html[data-theme="mint-fresh"] [data-item-idx] .text-gray-400 {
    color: #2d5048 !important;
}
html[data-theme="peach-cream"] [data-item-idx] .text-gray-400 {
    color: #6b4423 !important;
}
html[data-theme="lavender-mist"] [data-item-idx] .text-gray-400 {
    color: #4a3578 !important;
}
html[data-theme="sky-blue"] [data-item-idx] .text-gray-400 {
    color: #1e4976 !important;
}
html[data-theme="sunset"] [data-item-idx] .text-gray-400 {
    color: #7a3825 !important;
}
html[data-theme="fire"] [data-item-idx] .text-gray-400 {
    color: #7c3a14 !important;
}
html[data-theme="pink-bloom"] [data-item-idx] .text-gray-400 {
    color: #6b2848 !important;
}

/* ===== Timestamp text-[10px] text-gray-500 ===== */
html[data-theme="classic"] [data-item-idx] .text-gray-500,
html[data-theme="midnight"] [data-item-idx] .text-gray-500,
html[data-theme="deep-space"] [data-item-idx] .text-gray-500,
html[data-theme="pure-dark"] [data-item-idx] .text-gray-500,
html[data-theme="charcoal"] [data-item-idx] .text-gray-500,
html[data-theme="purple-haze"] [data-item-idx] .text-gray-500 {
    color: #6b7280 !important;
}
html[data-theme="mint-fresh"] [data-item-idx] .text-gray-500 {
    color: #3a6560 !important;
}
html[data-theme="peach-cream"] [data-item-idx] .text-gray-500 {
    color: #785030 !important;
}
html[data-theme="lavender-mist"] [data-item-idx] .text-gray-500 {
    color: #5a4280 !important;
}
html[data-theme="sky-blue"] [data-item-idx] .text-gray-500 {
    color: #2c5a85 !important;
}
html[data-theme="sunset"] [data-item-idx] .text-gray-500 {
    color: #854530 !important;
}
html[data-theme="fire"] [data-item-idx] .text-gray-500 {
    color: #8c4520 !important;
}
html[data-theme="pink-bloom"] [data-item-idx] .text-gray-500 {
    color: #7a3455 !important;
}

/* ===== Badge type (Nhập/Xuất/Ẩn) text-yellow-300, text-primary, text-gray-300 ===== */
[data-item-idx] .text-yellow-300 {
    color: var(--ghz-warning, #b45309) !important;
}
html[data-theme="classic"] [data-item-idx] .text-yellow-300,
html[data-theme="midnight"] [data-item-idx] .text-yellow-300,
html[data-theme="deep-space"] [data-item-idx] .text-yellow-300,
html[data-theme="pure-dark"] [data-item-idx] .text-yellow-300,
html[data-theme="charcoal"] [data-item-idx] .text-yellow-300,
html[data-theme="purple-haze"] [data-item-idx] .text-yellow-300 {
    color: #fde047 !important;
}
[data-item-idx] .text-gray-300 {
    color: var(--ghz-text-muted, #4b5563) !important;
}
html[data-theme="classic"] [data-item-idx] .text-gray-300,
html[data-theme="midnight"] [data-item-idx] .text-gray-300,
html[data-theme="deep-space"] [data-item-idx] .text-gray-300,
html[data-theme="pure-dark"] [data-item-idx] .text-gray-300,
html[data-theme="charcoal"] [data-item-idx] .text-gray-300,
html[data-theme="purple-haze"] [data-item-idx] .text-gray-300 {
    color: #d1d5db !important;
}

/* ==================== EMPLOYEE REWARD BAR (PHASE 3 redesigned) ==================== */
/* Thanh tiến trình 2 phần: xanh (thưởng) + đỏ (phạt). Tỉ lệ hiển thị dựa trên tổng thưởng + tổng phạt. */
.my-reward-bar-track {
    width: 100%;
    height: 12px;
    background: var(--ghz-input-bg, #1a1d22);
    border-radius: 999px;
    overflow: hidden;
    display: flex;
    border: 1px solid var(--ghz-card-border, #2a2e35);
}

.my-reward-bar-seg {
    height: 100%;
    transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.my-reward-bar-reward {
    background: linear-gradient(90deg, var(--ghz-grad-1, #00c37a) 0%, var(--ghz-grad-2, #00e08a) 100%);
    box-shadow: 0 0 8px var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.4)) inset;
}

.my-reward-bar-penalty {
    background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.4) inset;
}

#my-reward-motivation {
    line-height: 1.5;
}

#my-reward-motivation i.fa-lightbulb {
    flex-shrink: 0;
}

#my-reward-net {
    line-height: 1.1;
}

/* ========================================
   RANKING LIST - Huy chương + Avatar (Top 3)
   ======================================== */

/* Container chung — áp dụng cho #my-ranking-list & #manager-kpi-ranking-list */
/* Hardcode màu tối — KHÔNG dùng var() vì theme sáng (peach-cream, sky-blue...)
   đặt --ghz-card-bg = màu sáng → nền card trắng/kem → avatar/medal chìm */
.rank-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(20, 26, 34, 0.95) 0%, rgba(15, 22, 30, 0.95) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    color: #f3f4f6;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}
.rank-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

/* Avatar tròn bên trái */
/* Hardcode màu thay vì var() vì theme sáng đặt --ghz-text-primary = màu tối
 * → background gradient tối-đậm-đậm không hợp với nền card sáng.
 * Dùng #374151 + #1f2937 (tối xám) để luôn đậm hơn card nền. */
.rank-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #374151, #1f2937);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.10);
    text-transform: uppercase;
}
.rank-avatar img, .rank-avatar-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
}
.rank-avatar-initials {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #ffffff; /* hardcode — luôn trắng */
    margin: 0;
    padding: 0;
}

/* Huy chương icon (bên phải, cạnh số điểm) */
.rank-medal {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
    position: relative;
    color: #fff;
}

/* Đoạn tên + meta ở giữa */
.rank-info {
    flex: 1 1 auto;
    min-width: 0;
}
.rank-name {
    font-weight: 600;
    font-size: 14px;
    color: #f3f4f6; /* hardcode — luôn trắng cho rank-other */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.rank-name .self-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
    background: rgba(52, 211, 153, 0.18);
    color: #34d399;
    border: 1px solid rgba(52, 211, 153, 0.3);
}
.rank-meta {
    font-size: 12px;
    color: #6b7280; /* hardcode — theme sáng đặt --ghz-text-muted = nâu/tím/xám đậm */
    margin-top: 2px;
}

/* Cụm huy chương + điểm (bên phải) */
.rank-points {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rank-points-num {
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #d1d5db; /* hardcode — theme sáng có thể đổi var */
}
.rank-points-unit {
    font-size: 12px;
    color: var(--ghz-text-muted, #6b7280);
    font-weight: 500;
}

/* ==========================================================================
   RANK 1/2/3 — LIQUID METAL STYLE (v2026-09-19, đồng bộ với panel ⑤ demo)
   - VÀNG LỎNG (rank-1), BẠC LỎNG (rank-2), ĐỒNG LỎNG (rank-3)
   - Giảm chói (~40-50%) + chậm chuyển động (8s/10s/12s) để hài hòa với theme khác
   - Gradient palette dịu hơn, bỏ white-peak
   ========================================================================== */
@keyframes liquidFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* === RANK 1 — VÀNG LỎNG === */
.rank-card.rank-1 {
    background: linear-gradient(135deg,
        #5a3d00 0%, #8b6914 25%, #c9a32b 45%,
        #ffd700 55%, #e6c34d 70%, #c9a32b 85%, #5a3d00 100%);
    background-size: 200% 200%;
    border: 1px solid rgba(255, 215, 0, 0.35);
    color: #3d2b00;
    box-shadow:
        0 3px 14px rgba(255, 215, 0, 0.2),
        0 0 0 1px rgba(255, 215, 0, 0.1),
        inset 0 1px 0 rgba(255, 245, 200, 0.35),
        inset 0 -2px 4px rgba(90, 61, 0, 0.4);
    animation: liquidFlow 8s ease-in-out infinite;
}
.rank-card.rank-1 .rank-name { color: #3d2b00; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rank-card.rank-1 .rank-meta { color: rgba(61, 43, 0, 0.7); }
.rank-card.rank-1 .rank-medal {
    background: linear-gradient(135deg, #e6c34d, #ffd700 50%, #b8860b);
    color: #3d2b00;
    border: 1px solid rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.rank-card.rank-1 .rank-points-num {
    background: linear-gradient(90deg, #5a3d00, #c9a32b, #ffd700, #e6c34d, #ffd700, #b8860b, #5a3d00);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: liquidFlow 6s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(90, 61, 0, 0.35));
}

/* === RANK 2 — BẠC LỎNG === */
.rank-card.rank-2 {
    background: linear-gradient(135deg,
        #4a4a52 0%, #6b6b80 25%, #9898a8 45%,
        #d8d8e0 55%, #c0c0cc 70%, #9898a8 85%, #4a4a52 100%);
    background-size: 200% 200%;
    border: 1px solid rgba(232, 232, 240, 0.4);
    color: #2a2a3e;
    box-shadow:
        0 3px 14px rgba(192, 192, 210, 0.22),
        0 0 0 1px rgba(232, 232, 240, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -2px 4px rgba(74, 74, 82, 0.4);
    animation: liquidFlow 10s ease-in-out infinite;
}
.rank-card.rank-2 .rank-name { color: #2a2a3e; text-shadow: 0 1px 1px rgba(255,255,255,0.4); }
.rank-card.rank-2 .rank-meta { color: rgba(42, 42, 62, 0.7); }
.rank-card.rank-2 .rank-medal {
    background: linear-gradient(135deg, #d8d8e0, #c0c0cc 50%, #9898a8);
    color: #2a2a3e;
    border: 1px solid rgba(232, 232, 240, 0.5);
    box-shadow: 0 0 7px rgba(232, 232, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.rank-card.rank-2 .rank-points-num {
    background: linear-gradient(90deg, #4a4a52, #9898a8, #d8d8e0, #c0c0cc, #d8d8e0, #b8b8c8, #4a4a52);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: liquidFlow 8s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(74, 74, 82, 0.35));
}

/* === RANK 3 — ĐỒNG LỎNG === */
.rank-card.rank-3 {
    background: linear-gradient(135deg,
        #3d2410 0%, #5a3614 25%, #8b4513 45%,
        #c47842 55%, #b06a35 70%, #8b4513 85%, #3d2410 100%);
    background-size: 200% 200%;
    border: 1px solid rgba(205, 127, 50, 0.35);
    color: #3d2410;
    box-shadow:
        0 3px 12px rgba(205, 127, 50, 0.22),
        0 0 0 1px rgba(205, 127, 50, 0.1),
        inset 0 1px 0 rgba(230, 165, 103, 0.35),
        inset 0 -2px 4px rgba(61, 36, 16, 0.4);
    animation: liquidFlow 12s ease-in-out infinite;
}
.rank-card.rank-3 .rank-name { color: #3d2410; text-shadow: 0 1px 1px rgba(255,255,255,0.3); }
.rank-card.rank-3 .rank-meta { color: rgba(61, 36, 16, 0.7); }
.rank-card.rank-3 .rank-medal {
    background: linear-gradient(135deg, #c47842, #b06a35 50%, #8b4513);
    color: #fff5e6;
    border: 1px solid rgba(205, 127, 50, 0.4);
    box-shadow: 0 0 6px rgba(205, 127, 50, 0.3), inset 0 1px 0 rgba(255, 220, 180, 0.45);
}
.rank-card.rank-3 .rank-points-num {
    background: linear-gradient(90deg, #3d2410, #8b4513, #c47842, #b06a35, #c47842, #a06028, #3d2410);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: liquidFlow 10s linear infinite;
    filter: drop-shadow(0 1px 1px rgba(61, 36, 16, 0.35));
}

/* ===== RANK 4+ — bình thường ===== */
/* Hardcode #ffffff thay vì dùng var(--ghz-text-primary), vì:
 * - Theme sáng (peach-cream, sky-blue...) đặt --ghz-text-primary = màu tối
 *   → color-mix(in srgb, dark 5%, transparent) = gần như trong suốt
 *   → medal & avatar không có nền, chữ trôi nổi trên card
 * - Hardcode #ffffff đảm bảo nền medal/avatar LUÔN là tint trắng (5% white trên
 *   nền card tối) — hoạt động đúng trên mọi theme
 */
.rank-card.rank-other .rank-medal {
    background: color-mix(in srgb, #ffffff 5%, transparent);
    color: #9ca3af;
    border: 1px solid color-mix(in srgb, #ffffff 8%, transparent);
}

/* ===== Tô đậm dòng của chính mình ===== */
.rank-card.rank-other.is-self {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.15) 0%, rgba(20, 26, 34, 0.92) 50%, rgba(52, 211, 153, 0.08) 100%);
    border-color: rgba(52, 211, 153, 0.4);
    box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.15), 0 4px 16px rgba(52, 211, 153, 0.15);
}
.rank-card.rank-other.is-self .rank-points-num {
    color: #34d399;
}

/* ==========================================================================
   TRI ÂN TOP 3 — phóng to tên/avatar/medal/points theo thứ hạng (v2026-09-19)
   Rank 1: 19px / 800 — lớn nhất
   Rank 2: 17px / 700
   Rank 3: 16px / 700
   Rank other: 14px / 600 (giữ nguyên)
   + Fix: top 3 tên dài được phép xuống dòng (bỏ nowrap),
         vì 19px/17px to gấp 1.3× → không thể ép 1 hàng.
   ========================================================================== */
.rank-card.rank-1 .rank-name,
.rank-card.rank-2 .rank-name,
.rank-card.rank-3 .rank-name {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.15;
    min-width: 0;
}
.rank-card.rank-1 .rank-name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.rank-card.rank-2 .rank-name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
}
.rank-card.rank-3 .rank-name {
    font-size: 16px;
    font-weight: 700;
}
.rank-card.rank-1 .rank-avatar {
    width: 48px;
    height: 48px;
    font-size: 16px;
}
.rank-card.rank-2 .rank-avatar {
    width: 46px;
    height: 46px;
    font-size: 15px;
}
.rank-card.rank-3 .rank-avatar {
    width: 44px;
    height: 44px;
    font-size: 14px;
}
.rank-card.rank-1 .rank-medal {
    width: 36px;
    height: 36px;
    font-size: 16px;
}
.rank-card.rank-2 .rank-medal {
    width: 34px;
    height: 34px;
    font-size: 15px;
}
.rank-card.rank-3 .rank-medal {
    width: 33px;
    height: 33px;
    font-size: 14px;
}
.rank-card.rank-1 .rank-points-num {
    font-size: 18px;
}
.rank-card.rank-2 .rank-points-num {
    font-size: 17px;
}
.rank-card.rank-3 .rank-points-num {
    font-size: 16px;
}
/* is-self vẫn giữ size theo rank tương ứng */
.rank-card.is-self.rank-1 .rank-name { font-size: 19px; font-weight: 800; }
.rank-card.is-self.rank-2 .rank-name { font-size: 17px; font-weight: 700; }
.rank-card.is-self.rank-3 .rank-name { font-size: 16px; font-weight: 700; }

/* ========================================
   ANIMATION (đã được thay thế bằng liquidFlow trên .rank-card.rank-1/2/3)
   - Shine sweep tạm tắt để không chồng chéo với liquidFlow (v2026-09-19)
   - Animation duy nhất: liquidFlow 8s/10s/12s → chuyển động mượt, ít giật
   ======================================== */
@keyframes rankShineSweep {
    0%   { left: -100%; opacity: 0; }
    100% { left: 150%; opacity: 0; }
}
@keyframes rankGoldShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes rankSilverShimmer {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
/* Override: tắt shine-sweep pseudo-element để không xung đột với liquidFlow */
.rank-card.rank-1::before,
.rank-card.rank-2::before,
.rank-card.rank-3::before {
    display: none;
}

/* ================================================================
   BẢNG LỊCH LÀM VIỆC CHUNG — ĐÃ SỬA TRIỆT ĐỂ
   - Bảng chiếm toàn bộ chiều ngang container (width 100%)
   - Cột tên NV: width cố định 200px, tên hiển thị đầy đủ KHÔNG cắt,
     nếu dài thì wrap 2 dòng (word-wrap: break-word)
   - 21 cột ca chia đều phần còn lại
   - Border-bottom trên td đầu tiên của mỗi hàng = đường line phân cách
   - Tickbox ~22-24px (vừa đẹp, không quá to cũng không quá nhỏ)
   - Scope đảm bảo style không tràn ra ngoài
   ================================================================ */
/* === ROOT: SCHEDULE WEEK (Lich Lam Viec) ============================================
   Bug fix v153: tab Lịch Làm Việc trước đây render ra nội dung nhưng bị đẩy lệch sang phải
   và biến mất khỏi viewport vì container cha (#tab-lichlamviec) không có overflow ràng buộc.
   Bảng lịch (.schedule-week-table) + form đăng ký (.schedule-form-table) đều có min-width lớn
   (~700-900px) > viewport mobile, đẩy cả tab-content ra ngoài màn hình.
   Giải pháp: clip tràn ngang ở container cha, để scroll ngang cục bộ ở từng bảng con hoạt động. */
/* Nền gradient phía sau bảng lịch để backdrop-filter blur có cái để "blur" */
#tab-lichlamviec {
    /* Clip tràn ngang để nội dung con không đẩy cả tab-content ra ngoài viewport */
    overflow-x: hidden;
    /* Đảm bảo không bao giờ rộng hơn parent (main-content) */
    max-width: 100%;
    /* Cho phép wrapper bảng (đã có overflow-x:auto) cuộn ngang độc lập */
    min-width: 0;
    /* Gradient blob để blur có hiệu lực (radial gradient tạo chiều sâu) */
    background:
        radial-gradient(ellipse 600px 300px at 10% 0%, rgba(59, 130, 246, 0.10), transparent 60%),
        radial-gradient(ellipse 500px 400px at 90% 30%, rgba(168, 85, 247, 0.08), transparent 60%);
}
#tab-kho {
    /* Bảo vệ khỏi tràn ngang từ bảng + stepper nội bộ khi viewport mobile/tablet */
    overflow-x: hidden;
    max-width: 100%;
    min-width: 0;
}

/* Header của tab Lịch làm việc: classic giữ #0e1013, non-classic transparent để lộ --ghz-bg */
#tab-lichlamviec > .ui-page-header:first-of-type {
    background-color: #0e1013 !important;
}
html[data-theme]:not([data-theme="classic"]) #tab-lichlamviec > .ui-page-header:first-of-type {
    background: transparent !important;
    background-color: transparent !important;
}

.schedule-week-table {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    min-width: 0;
}

/* Wrapper ngoài bảng - nếu vẫn tràn thì scroll ngang an toàn thay vì vỡ layout */
.schedule-week-wrap {
    /* overflow-x: auto đã có sẵn từ tailwind 'overflow-hidden', thay đổi thành scroll ngang khi cần */
    max-width: 100%;
}
.schedule-week-wrap > table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/* === HEADER === */
.schedule-week-table thead th {
    font-weight: 700;
    color: var(--ghz-text-muted, #9ca3af);
    letter-spacing: 0.04em;
    background: var(--ghz-input-bg, var(--inputbg, #181b20));
    border-bottom: 1px solid var(--ghz-card-border, var(--bordercol, #2a2e35));
}
.schedule-th-name {
    text-align: left;
    padding: 12px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    vertical-align: middle;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--ghz-input-bg, var(--inputbg, #181b20));
}
.schedule-th-day {
    text-align: center;
    padding: 10px 4px;
    font-size: 12px;
    font-weight: 700;
    border-right: 1px solid var(--ghz-card-border, var(--bordercol, #2a2e35));
    vertical-align: middle;
    background: var(--ghz-input-bg, var(--inputbg, #181b20));
    min-width: 0;
}
.schedule-th-day:last-child { border-right: none; }

/* === Bảng co giãn 100% theo viewport, không có min-width cứng === */
.schedule-week-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

/* === BODY: HÀNG NHÂN VIÊN === */
.schedule-emp-row { transition: background-color 0.15s ease; }
.schedule-emp-row:hover { background: color-mix(in srgb, var(--ghz-text-primary, #fff) 4%, transparent); }

/* Đường line phân cách rõ ràng giữa các nhân viên */
.schedule-emp-row td {
    border-top: 1px solid var(--ghz-card-border, var(--bordercol, #2a2e35));
}
.schedule-emp-row:first-child td {
    border-top: none;
}

/* === CỘT TÊN NHÂN VIÊN — STICKY bên trái khi scroll ngang mobile === */
.schedule-emp-name {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    padding: 12px 14px !important;
    text-align: left !important;
    vertical-align: middle !important;
    background: var(--ghz-input-bg, rgba(24, 27, 32, 0.95)) !important;
    overflow-wrap: break-word;
    word-break: break-word;
    position: sticky;
    left: 0;
    z-index: 2;
    box-shadow: 2px 0 6px -2px color-mix(in srgb, var(--ghz-text-primary, #000) 35%, transparent);
}
.emp-name-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--ghz-text-primary, white);
    line-height: 1.3;
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 30px);
}
.emp-name-text + .ui-icon-button {
    margin-left: 4px;
    vertical-align: middle;
}

/* === CỘT NGÀY — 3 chip ca xếp NGANG (label trên, chấm dưới trong từng chip) === */
.schedule-day-cell {
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
    min-width: 0;
}
/* Border giữa các ngày - đậm để phân chia rõ */
.schedule-cell-day-sep {
    border-right: 1px solid var(--ghz-card-border, var(--bordercol, #2a2e35)) !important;
}

/* Container 3 chip NGANG - dùng GRID để 3 chip tự đều nhau theo width cell */
.shift-day {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    justify-items: stretch;
    padding: 0;
    min-width: 0;
    width: 100%;
}

/* === CONTAINER: 3 chip NGANG, có khoảng cách giữa các chip === */
.shift-chips-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;                    /* Khoảng cách giữa các chip - không sát nhau */
}

/* Chip 1 ca - PASTEL palette
   - Active: chỉ chữ S/C/T (chữ tone đậm trên nền pastel sáng)
   - Empty: chỉ ✕ đỏ tối (không có S/C/T, không có label) */
.shift-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    font-weight: 900;
    line-height: 1;
    user-select: none;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    min-height: 22px;            /* Thu nhỏ: từ 26 → 22 */
    width: clamp(20px, 2.6vw, 32px); /* Thu nhỏ: scale theo viewport, max 32px */
}
.shift-chip-label {
    color: inherit;
    font-size: clamp(10px, 1.05vw, 13px);   /* Thu nhỏ text */
    letter-spacing: 0.02em;
    font-weight: 900;
    line-height: 1;
}

/* Chip "đi làm" - nền pastel + chữ tone đậm + glow rất nhẹ */
.shift-chip-active {
    background: var(--chip-fill);
    color: var(--chip-text);
    border: 1px solid color-mix(in srgb, var(--chip-fill) 70%, var(--chip-text) 30%);
    box-shadow:
        0 0 5px color-mix(in srgb, var(--chip-glow) 30%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.40);
}
.shift-chip-active .shift-chip-label {
    color: var(--chip-text);
    font-weight: 900;
}

/* Chip "trống/nghỉ" - CHỈ ✕ đỏ tối màu (bỏ S/C/T)
   Nền nâu đỏ đậm tối để làm nổi ✕ đỏ tươi */
.shift-chip-empty {
    background: color-mix(in srgb, var(--ghz-danger, #7f1d1d) 28%, var(--ghz-input-bg, #1a1d23));
    color: var(--ghz-danger, #fca5a5);
    border: 1px solid color-mix(in srgb, var(--ghz-danger, #fca5a5) 35%, transparent);
    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,0.15);
}
.shift-chip-empty .shift-chip-x {
    color: var(--ghz-danger, #fca5a5);
    font-size: clamp(11px, 1.1vw, 14px);
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 0 4px rgba(252, 165, 165, 0.5);
}

.shift-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
}
.shift-chip-active:hover {
    box-shadow:
        0 0 9px color-mix(in srgb, var(--chip-glow) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.50);
}
.shift-chip-empty:hover {
    background: color-mix(in srgb, var(--ghz-danger, #991b1b) 35%, var(--ghz-input-bg, #1a1d23));
    border-color: color-mix(in srgb, var(--ghz-danger, #fca5a5) 55%, transparent);
}
.shift-chip-empty:hover .shift-chip-x {
    color: #fecaca;                              /* Sáng hơn khi hover */
    text-shadow: 0 0 6px rgba(252, 165, 165, 0.7);
}

/* === P0_31 — state alias cho shift chip (đồng bộ với chip-filter-item) === */
.shift-chip.state-default {
    background: color-mix(in srgb, var(--ghz-danger, #7f1d1d) 28%, var(--ghz-input-bg, #1a1d23));
    color: var(--ghz-danger, #fca5a5);
    border: 1px solid color-mix(in srgb, var(--ghz-danger, #fca5a5) 35%, transparent);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.shift-chip.state-default .shift-chip-x { color: #fca5a5; font-weight: 900; line-height: 1; }
.shift-chip.state-default:hover {
    background: color-mix(in srgb, var(--ghz-danger, #991b1b) 35%, var(--ghz-input-bg, #1a1d23));
    border-color: color-mix(in srgb, var(--ghz-danger, #fca5a5) 55%, transparent);
}
.shift-chip.state-default:hover .shift-chip-x { color: #fecaca; }

.shift-chip.state-expanded {
    background: var(--chip-fill);
    color: var(--chip-text);
    border: 1px solid color-mix(in srgb, var(--chip-fill) 70%, var(--chip-text) 30%);
    box-shadow:
        0 0 9px color-mix(in srgb, var(--chip-glow) 45%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.50);
}
.shift-chip.state-expanded .shift-chip-label { color: var(--chip-text); }

.shift-chip.state-collapsed {
    background: var(--ghz-brand-soft-12, rgba(0, 195, 122, 0.10));
    color: var(--ghz-brand-color, #00c37a);
    border: 1px dashed color-mix(in srgb, var(--ghz-brand-color, #00c37a) 50%, transparent);
}
.shift-chip.state-collapsed:hover {
    background: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.16));
}

.shift-chip.state-disabled {
    color: var(--ghz-text-muted, #374151);
    background: var(--ghz-brand-soft-06, rgba(255, 255, 255, 0.02));
    border: 1px dashed var(--ghz-card-border, rgba(255, 255, 255, 0.06));
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

/* === LEGEND: chú thích màu ca === */
.schedule-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: var(--ghz-card-bg, rgba(24, 27, 32, 0.4));
    border-bottom: 1px solid var(--ghz-card-border, var(--bordercol, #2a2e35));
    font-size: 11px;
    color: var(--ghz-text-muted, #9ca3af);
}
.schedule-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.schedule-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Chip demo trong legend (kích thước cố định nhỏ) */
.schedule-legend-chip {
    width: 18px;
    height: 18px;
    min-height: 18px;
    aspect-ratio: auto;
    font-size: 9px;
    flex-shrink: 0;
}

/* === DESKTOP (>=1024px): rộng rãi === */
@media (min-width: 1024px) {
    .schedule-th-name,
    .schedule-emp-name {
        width: 200px !important;
    }
    .schedule-day-cell { padding: 8px 6px; }
    .shift-chip { padding: 4px 6px; gap: 3px; }
}

/* === TABLET (640-1023px) === */
@media (min-width: 640px) and (max-width: 1023px) {
    .schedule-th-name,
    .schedule-emp-name {
        width: 150px !important;
    }
    .schedule-th-day { font-size: 11px; padding: 8px 2px; }
    .schedule-day-cell { padding: 6px 3px; }
    .shift-chip { padding: 4px 4px; gap: 2px; }
}

/* === MOBILE (<640px): cột tên sticky, cell tự co === */
@media (max-width: 639px) {
    .schedule-th-name,
    .schedule-emp-name {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        padding: 8px 8px !important;
    }
    .emp-name-text { font-size: 12px; }
    .schedule-th-name { font-size: 10px; }
    .schedule-th-day { font-size: 11px; padding: 8px 2px; }
    .schedule-day-cell { padding: 5px 2px; }
    .shift-chip { padding: 3px 2px; }
}

/* === MOBILE NHỎ (<400px): thu nhỏ tối đa === */
@media (max-width: 399px) {
    .schedule-th-name,
    .schedule-emp-name {
        width: 85px !important;
        min-width: 85px !important;
        max-width: 85px !important;
        padding: 6px 6px !important;
    }
    .emp-name-text { font-size: 11px; }
    .schedule-th-day { font-size: 10px; padding: 6px 1px; }
    .schedule-day-cell { padding: 3px 1px; }
    .shift-chip { padding: 2px 1px; gap: 0; }
}

/* === PWA MOBILE: bảng lịch cho phép cuộn ngang, ngày rộng cố định ===
   - Cột tên NV giữ NGUYÊN sticky left (giữ nguyên)
   - 7 cột ngày + chip S/C/T được rộng hơn (min-width cố định) → cuộn ngang
   - Bỏ table-layout: fixed để các cột ngày không bị co lại bằng nhau trên mobile */
.schedule-week-wrap {
    /* overflow-x: auto cho phép cuộn ngang khi bảng rộng hơn viewport */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.schedule-week-wrap > table {
    display: table;
    /* Bỏ width:100% + table-layout:fixed để bảng tự giãn theo min-width nội dung */
    width: max-content !important;
    min-width: 100%;
    table-layout: auto;
}
.schedule-th-day,
.schedule-day-cell {
    /* Cột ngày có min-width cố định — không co lại dưới 90px dù viewport nhỏ.
       7 ngày × 90px = 630px + 180px tên NV = 810px bảng rộng tối thiểu. */
    min-width: 88px;
    width: 88px;
    white-space: nowrap;
}
/* Mobile hẹp (<640px): cột ngày thu nhỏ còn 76px để cuộn ít hơn */
@media (max-width: 639px) {
    .schedule-th-day,
    .schedule-day-cell {
        min-width: 78px;
        width: 78px;
    }
}
@media (max-width: 399px) {
    .schedule-th-day,
    .schedule-day-cell {
        min-width: 70px;
        width: 70px;
    }
}

/* Chip S/C/T trên mobile: cố định kích thước để không bị méo khi cuộn ngang.
   Override `clamp(20px, 2.6vw, 32px)` để chip luôn vuông, không scale theo viewport. */
.shift-chip {
    width: 24px !important;
    min-height: 24px !important;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    box-sizing: border-box;
}
.shift-chips-row {
    gap: 4px !important;
    flex-wrap: nowrap;
    justify-content: center;
}
@media (max-width: 639px) {
    .shift-chip {
        width: 22px !important;
        min-height: 22px !important;
    }
}
@media (max-width: 399px) {
    .shift-chip {
        width: 20px !important;
        min-height: 20px !important;
    }
}

/* === KHUNG CÁC NÚT SẮP XẾP LỊCH (Xem tuần / Chọn tuần) ===
   Trên mobile: label ẩn đi, input chiếm full chiều rộng của khung.
   Khung picker không tràn ra vì flex-wrap ở parent + min-w-0 cho input. */
.schedule-week-picker {
    max-width: 100%;
}
.schedule-week-picker > input[type="date"] {
    min-width: 0;
    max-width: 100%;
}
@media (max-width: 639px) {
    .schedule-week-picker > label {
        display: none;
    }
    .schedule-week-picker {
        flex: 1 1 auto;
        min-width: 0;
    }
    .schedule-week-picker > input[type="date"] {
        width: 100%;
        min-width: 0;
        font-size: 12px;
    }
}

/* === CÁC NÚT SẮP XẾP / LỌC CHUNG ===
   Tất cả input/select trong các khung filter: co lại gọn khi mobile */
.filter-input,
.filter-select {
    min-width: 0;
    max-width: 100%;
    width: auto;
}
@media (max-width: 639px) {
    .filter-input,
    .filter-select {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        font-size: 12px;
    }
}

/* === BẢNG THỐNG KÊ CÔNG VIỆC (tab quản lý) ===
   - Hiển thị tối đa ~14 dòng rồi scroll nội bộ
   - Cột "Nội dung / Kết quả" được cắt gọn + có nút mở popup chi tiết */
.stats-table-wrap {
    max-height: 540px;
    overflow-y: auto;
    overflow-x: auto;
}
@media (max-width: 639px) {
    .stats-table-wrap {
        max-height: 420px;
    }
}
.stats-result-cell {
    max-width: 320px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* Modal chi tiết thống kê - áp dụng compact mobile giống các modal khác */
#stats-detail-modal > .ui-modal-mobile,
#stats-detail-modal > .card.ui-modal-mobile {
    width: min(32rem, calc(100vw - 1rem)) !important;
    max-width: min(32rem, calc(100vw - 1rem)) !important;
}
#stats-detail-modal .modal-scroll,
#stats-detail-modal .modal-scroll {
    overflow-y: auto !important;
    max-height: calc(62vh - 4.5rem) !important;
}
#stats-detail-actions {
    overflow-x: hidden !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#stats-detail-actions button {
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kết quả tìm nhanh (Ctrl+K) */
.quick-search-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--color-bordercol, #2a2a2a);
    cursor: pointer;
    transition: background-color 0.1s;
}
.quick-search-item:hover,
.quick-search-item.is-active {
    background-color: rgba(255,255,255,0.05);
}
.quick-search-item-title {
    color: var(--ghz-text-primary, #fff);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
}
.quick-search-item-sub {
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 11px;
}
.quick-search-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--ghz-text-muted, #6b7280);
    font-size: 13px;
}

/* Áp dụng: 5s, chạy 1 lần, giữ trạng thái cuối (forwards) */
/* Shine sweep đã được tắt hoàn toàn (v2026-09-19) để liquidFlow chạy đơn lẻ,
   không bị 2 animation chồng chéo gây giật.
   Nếu sau này muốn bật lại, xóa block này là shine-sweep quét 1 lần 5s sẽ tự hoạt động. */

/* Tắt animation nếu user cài đặt reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rank-card.rank-1::before,
    .rank-card.rank-2::before,
    .rank-card.rank-3::before,
    .rank-card.rank-1 .rank-points-num,
    .rank-card.rank-2 .rank-points-num {
        animation: none;
        opacity: 0;
    }
}

/* === TẤT CẢ button có cảm giác bấm (ấn xuống 2%) - #6 demo === */
button:not(:disabled):active,
[role="button"]:not([aria-disabled="true"]):active,
.btn-glow:not(:disabled):active,
a[role="button"]:not([aria-disabled="true"]):active {
    transform: scale(0.98);
    transition: transform 0.08s ease;
}

/* ===== MODAL WORK DETAIL — FIX OVERFLOW & CLOSE BUTTON =====
   1) Header title không được đẩy button X ra khỏi modal
   2) Select options dài không làm tràn form trên mobile */
#unified-work-detail-modal .card .flex.justify-between.items-start.gap-3 {
    /* Đảm bảo row header không bị overflow */
    overflow: hidden;
}
#unified-work-detail-modal #unified-work-detail-title {
    /* Cho phép xuống dòng nếu tiêu đề quá dài, không chiếm 1 hàng cứng */
    min-width: 0;
    word-break: break-word;
    flex: 1 1 0%;
}
#unified-work-detail-modal .ui-modal-close {
    flex-shrink: 0;
    /* Đảm bảo luôn nằm trong card */
    position: relative;
    z-index: 1;
}
#unified-work-detail-modal select.uwd-edit-select {
    /* Select không tràn ngang card trên mobile */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
#unified-work-detail-modal select.uwd-edit-select option {
    /* Option dài được cắt ngắn bằng ellipsis */
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   GLOBAL: NGĂN THANH SEARCH/SORT/FILTER BỊ TRÀN KHI CO VIEWPORT
   Áp dụng cho MỌI row flex có chứa input, select, button hoặc textarea.
   Khi viewport nhỏ: tự wrap xuống dòng, mỗi item chiếm tối thiểu một kích thước
   hợp lý (180px cho input search, 140px cho select, full-width cho button)
   nhưng KHÔNG BAO GIỜ tràn ra ngoài container cha.
   ================================================================ */

/* Wrapper chính cho mọi thanh filter/sort: đảm bảo không bị overflow ngang */
.flex.flex-col.sm\\:flex-row,
[class*="filter-row"],
[class*="sort-row"],
[class*="search-row"] {
    min-width: 0;
}

/* Input search/filter chung: min-width an toàn, ellipsis khi quá dài */
input[id*="search"],
input[id*="filter"],
input[id*="sort"],
input[id$="-search"],
input[id$="-filter"],
input[id$="-sort"],
input[placeholder*="Tìm"],
input[placeholder*="tìm"] {
    min-width: 0;
}

/* Row filter Kho: flex-wrap đã có → ép mỗi item responsive đúng */
#tab-kho .flex.flex-col.sm\\:flex-row.flex-wrap {
    row-gap: 8px;
}
#tab-kho #inventory-activity-search {
    min-width: 0;
    flex: 1 1 200px;
}
#tab-kho #inventory-brand-filter,
#tab-kho #inventory-status-filter,
#tab-kho #inventory-activity-sort {
    min-width: 0;
    flex: 1 1 140px;
    max-width: 100%;
}
@media (max-width: 640px) {
    #tab-kho #inventory-activity-search,
    #tab-kho #inventory-brand-filter,
    #tab-kho #inventory-status-filter,
    #tab-kho #inventory-activity-sort {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Generic rule ngăn tất cả row flex có child input/select không bị tràn
   Áp dụng cho MỌI flex row bên trong .card (chứa form lọc, search, sort). */
.card form > .flex.flex-col.sm\\:flex-row,
.card .flex.flex-col.sm\\:flex-row,
.flex.flex-col.sm\\:flex-row.flex-wrap {
    max-width: 100%;
    min-width: 0;
}
.card form > .flex.flex-col.sm\\:flex-row > *,
.card .flex.flex-col.sm\\:flex-row > *,
.flex.flex-col.sm\\:flex-row.flex-wrap > * {
    min-width: 0;
    max-width: 100%;
}

/* Select bên trong flex row: text dài → ellipsis (option) */
.card form select,
.card select[id*="filter"],
.card select[id*="sort"],
.card select[id$="-filter"],
.card select[id$="-sort"] {
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Select khi có icon mũi tên native, đảm bảo nội dung hiển thị đẹp */
select {
    /* Tránh option quá dài đẩy width tối đa của select */
    max-width: 100%;
}

/* ================================================================
   P0_01: STEPPER FORM NHẬP HÀNG
   Biến form 1 cột dài → 2 bước (IMEI+Ảnh → Chi tiết máy)
   Phiên bản: v160 (bump khi apply)
   ================================================================ */

/* Wrapper giữ stepper + pane (bọc bên ngoài form, KHÔNG phá form element) */
#inventory-import-stepper-wrap {
    display: flex;
    flex-direction: column;
}

/* === STEPPER VERTICAL — DEPRECATED ===
   Đã chuyển sang layout NGANG (giống mobile, desktop chỉ kéo dài ra) ở block dưới.
   Các rule này giữ lại làm fallback nếu block mới chưa load, nhưng sẽ bị override bằng !important. */
.inv-stepper-vertical {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 16px 8px 20px;
    background: var(--ghz-brand-soft-06, rgba(255,255,255,.02));
    border-radius: 16px 16px 0 0;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
}

.inv-step-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    cursor: default;
    min-width: 80px;
}

.inv-step-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ghz-input-bg, #232730);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all .25s ease;
}

.inv-step-num {
    color: var(--ghz-text-muted, #374151);
    font-weight: 800;
    font-size: 13px;
    line-height: 1;
    transition: color .2s ease;
}

.inv-step-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ghz-text-muted, #6b7280);
    letter-spacing: 0.05em;
    text-align: center;
    transition: color .2s ease;
    white-space: nowrap;
}

.inv-step-v.active .inv-step-circle {
    background: var(--ghz-brand-color, #00c37a);
    border: none;
    box-shadow: 0 0 0 4px var(--ghz-brand-active-bg, rgba(0,195,122,0.22));
}

.inv-step-v.active .inv-step-num {
    color: var(--ghz-text-on-brand-strong, #052e16);
}

.inv-step-v.active .inv-step-label {
    color: var(--ghz-text-primary, #1f2937);
}

.inv-step-v.done .inv-step-circle {
    background: var(--ghz-brand-active-bg, rgba(0,195,122,0.18));
    border: none;
}

.inv-step-v.done .inv-step-num {
    color: var(--ghz-text-on-brand-strong, #052e16);
}

.inv-step-v.done .inv-step-label {
    color: var(--ghz-text-on-brand-strong, #052e16);
}

.inv-step-v-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 24px;
    background: var(--ghz-card-border, #2a2e35);
    align-self: flex-start;
    margin-top: 17px;
    transition: background .25s ease;
}

.inv-step-v-line.done {
    background: var(--ghz-brand-color, #00c37a);
}

/* Pane content */
.inv-pane {
    display: none;
    animation: invStepIn .28s cubic-bezier(.16,1,.3,1) forwards;
}

.inv-pane.active {
    display: block;
}

@keyframes invStepIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Restart animation mỗi lần đổi pane — trượt phải → trái */
@keyframes invSlideIn {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.inv-pane.inv-slide-in {
    animation: invSlideIn .35s ease-out;
    overflow: hidden;
}

/* Animation khi chuyển tab — fade + trượt nhẹ lên */
@keyframes tabSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tab-content.tab-slide-in {
    animation: tabSlideIn .35s cubic-bezier(.16,1,.3,1);
}

/* IMEI prefill card (hiện khi tra thấy máy cũ) */
#inventory-imei-prefill-card {
    display: flex;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, rgba(59,130,246,.08) 0%, rgba(59,130,246,.02) 100%);
    border: 1px solid rgba(59,130,246,.28);
    border-radius: 12px;
    padding: 8px 10px;
    margin: 10px 0 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}

#inventory-imei-prefill-card.hidden {
    display: none;
}

.inv-prefill-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(59,130,246,.25);
    background: var(--ghz-input-bg, #14171b);
    transition: transform .35s ease;
}
.inv-prefill-thumb:hover {
    transform: scale(1.06);
}

.inv-prefill-info {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

/* ===== B2 — FORM LABEL & HELPER TEXT SÁNG HƠN =====
   Vấn đề: text-gray-400 (#9ca3af) trên nền inputbg tối (#1f242b) tạo contrast ratio < 3.0
   → khó nhìn, đặc biệt label form dài. Đẩy các label trong form context lên gray-300
   để đạt contrast WCAG AA. Áp scope vào form / inv-form / inv-pane / modal / knox card
   để KHÔNG ảnh hưởng badge, status chip, header-search... (các chỗ khác đang dùng
   text-gray-400 có chủ đích). */
form label,
form .text-gray-400,
form .text-gray-600,
form .text-gray-500,
.inv-form label,
form p.text-xs,
.form-section .text-gray-400,
.knox-config-card label,
.knox-config-card .knox-hint {
    color: #d1d5db !important; /* gray-300, đậm hơn gray-400 #9ca3af */
}

/* Helper text bổ sung trong label (phần "(không bắt buộc)") - sáng trung bình, không quá đậm */
form label .text-gray-600,
form label .text-gray-500,
form label .text-gray-400:not(.text-red-400) {
    color: #cbd5e1 !important; /* slate-300 - phụ nhưng vẫn đọc được */
}

.inv-prefill-model {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ghz-text-primary, #f3f4f6);
    margin: 0;
    /* 2 dòng ellipsis, không tràn */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.inv-prefill-meta {
    font-size: 11px;
    color: var(--ghz-text-muted, #9ca3af);
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Caption phu (preview file moi / "Dung lai anh may cu") - an mac dinh, chi hien khi co noi dung */
.inv-prefill-caption {
    font-size: 11px;
    color: var(--ghz-text-muted, #9ca3af);
    margin: 4px 0 0;
    overflow-wrap: anywhere;
}
.inv-prefill-caption.hidden {
    display: none;
}

/* ===== Card "Thiết bị đang tồn" (stepper xuất) — gọn, có thumb, text không tràn ===== */
.exp-device-card {
    /* Card rộng hết parent */
    width: 100%;
    box-sizing: border-box;
    /* KHÔNG border xanh ngoài — chỉ nền tone green cực nhạt */
    background: rgba(0,195,122,.05);
    border: 0;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 6px 0 0;
}
.exp-device-card-body {
    display: flex;
    align-items: stretch;
    gap: 14px;
    width: 100%;
    min-width: 0;
}
.exp-device-card-thumb {
    flex: 0 0 auto;
    width: 64px;
    align-self: stretch;
    min-height: 76px;
    border-radius: 10px;
    background: var(--ghz-input-bg, #14171b);
    /* Border xanh ĐẬM quanh thumb — nhấn duy nhất */
    border: 2px solid rgba(0,195,122,.55);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0,195,122,.18);
}
.exp-device-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.exp-device-card-thumb:hover img {
    transform: scale(1.06);
}
.exp-device-card-thumb[data-thumb-empty="1"] {
    background: var(--ghz-input-bg, #14171b);
    border: 2px dashed rgba(0,195,122,.35);
    box-shadow: none;
}
.exp-device-card-thumb[data-thumb-empty="1"] i {
    font-size: 24px;
    color: var(--ghz-text-muted, #4b5563);
}
/* Info: TRẢI DÀI chiếm hết khoảng trống còn lại, dàn đều top/mid/bot */
.exp-device-card-info {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
    line-height: 1.35;
}
.exp-device-card-info-top,
.exp-device-card-info-mid,
.exp-device-card-info-bot {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.exp-device-card-info-top { justify-content: flex-start; }
.exp-device-card-info-mid {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1 1 auto;
}
.exp-device-card-info-bot { justify-content: flex-start; }

.exp-device-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #34d399;
    background: rgba(0,195,122,.14);
    padding: 3px 8px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.exp-device-card-badge i {
    font-size: 9px;
}
.exp-device-card-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ghz-text-primary, #f3f4f6) !important;
    margin: 0;
    line-height: 1.25;
    width: 100%;
    /* 2 dòng ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
.exp-device-card-meta {
    font-size: 11.5px;
    color: var(--ghz-text-secondary, #9ca3af) !important;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-device-card-imei {
    font-size: 11px;
    color: var(--ghz-brand-color, #34d399) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin: 0;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Responsive mobile: thu thumb nhỏ lại 1 chút */
@media (max-width: 480px) {
    .exp-device-card-thumb { width: 52px; min-height: 64px; }
    .exp-device-card-name { font-size: 12.5px; }
    .exp-device-card { padding: 10px 12px; gap: 10px; }
}

/* Group title cho pane bước 2 */
.inv-group-title {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #00c37a;
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0,195,122,.15);
}

.inv-group-title:first-child {
    margin-top: 4px;
}

/* Nav footer của mỗi pane */
.inv-pane-nav {
    display: flex;
    gap: 8px;
    padding: 12px 0 2px;
    align-items: center;
}

.inv-pane-nav .inv-spacer {
    flex: 1;
}

/* ===== Bố cục card "Nhập hàng": stepper trên + form dưới (giống mobile, desktop chỉ rộng hơn) ===== */
.inv-import-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
    /* Tránh form quá rộng trên màn hình lớn → khó đọc. Giới hạn width vừa phải. */
    max-width: 720px !important;
    margin: 0 auto !important;
    width: 100%;
    box-sizing: border-box;
}

/* Khung stepper — luôn ngang, không phụ thuộc breakpoint */
.inv-import-aside {
    background: color-mix(in srgb, var(--ghz-text-primary, #ffffff) 2%, transparent);
    border-radius: 12px;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    padding: 10px 12px;
    box-sizing: border-box;
}

/* Stepper flex hướng ngang ở mọi breakpoint (đồng nhất mobile ↔ desktop) */
.inv-import-aside .inv-stepper-vertical {
    display: flex !important;
    flex-direction: row !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* Mỗi step nằm ngang: circle bên trái + label bên phải */
.inv-import-aside .inv-step-v {
    display: flex !important;
    flex-direction: row !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.inv-import-aside .inv-step-label {
    text-align: left !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    color: var(--ghz-text-muted, #6b7280);
}

/* Line dọc nối 2 step — luôn đường ngang ngắn */
.inv-import-aside .inv-step-v-line {
    width: auto !important;
    height: 2px !important;
    min-height: 0 !important;
    flex: 0 1 24px !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-left: 4px !important;
    margin-right: 4px !important;
    background: var(--ghz-card-border, #2a2e35);
}

.inv-import-form {
    min-width: 0 !important; /* tránh tràn grid */
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
}

/* Grid 2 cột cho các trường trong pane — từ tablet trở lên */
.inv-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
    width: 100%;
}

@media (min-width: 640px) {
    .inv-grid-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
}

.inv-import-form .inv-grid-2 > * {
    min-width: 0 !important; /* tránh tràn grid */
}

/* Validation error cho IMEI step1 */
#inv-step1-imei-error {
    font-size: 11.5px;
    color: #ef4444;
    margin: 4px 0 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

#inv-step1-imei-error.hidden {
    display: none;
}

/* ========================================
   TASK DETAIL: Character Counter & Tooltip
   P1_05 - 2026-09-16
   ======================================== */

/* Info tooltip wrapper */
.ui-info-tooltip-wrapper {
    position: relative;
    display: inline-flex;
}
.ui-info-tooltip-trigger {
    display: inline-flex;
    align-items: center;
    color: var(--ghz-text-muted, #6b7280);
    cursor: help;
    transition: color 0.2s;
    font-size: 0.875rem;
}
.ui-info-tooltip-wrapper:hover .ui-info-tooltip-trigger,
.ui-info-tooltip-wrapper:focus-within .ui-info-tooltip-trigger {
    color: var(--ghz-brand-color, #00c37a);
}
.ui-info-tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--ghz-card-bg, #1f242b);
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.1));
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--ghz-text-secondary, #d1d5db);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
    box-shadow: var(--ghz-card-glass-shadow, 0 8px 24px rgba(0,0,0,0.4));
}
.ui-info-tooltip-content::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ghz-card-bg, #1f242b);
}
.ui-info-tooltip-wrapper:hover .ui-info-tooltip-content,
.ui-info-tooltip-wrapper:focus-within .ui-info-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Character counter overlay */
.ui-char-counter-wrapper {
    position: relative;
}
.ui-char-counter-textarea {
    padding-bottom: 1.75rem !important;
}
.ui-char-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ghz-text-muted, #6b7280);
}

/* ==================== COPY IMEI BUTTONS ====================
   P0_05: Copy IMEI/Serial/Phone buttons */

/* Wrapper for copyable fields */
.copyable-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--ghz-input-bg, var(--inputbg, #1e293b));
    border-radius: 6px;
}

/* Monospace for IMEI/Serial */
.copyable-field.mono {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.9em;
}

/* Copy button */
.copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ghz-text-muted, #6b7280);
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    font-size: 0.85em;
    line-height: 1;
}

.copy-btn:hover {
    color: var(--primary, #34d399);
    background: rgba(52, 211, 153, 0.1);
}

.copy-btn:active {
    transform: scale(0.95);
}

.copy-btn.copied {
    color: #22c55e;
}
    pointer-events: none;
    transition: color 0.2s ease;
}
.ui-char-counter.warning {
    color: #facc15;
}
.ui-char-counter.danger {
    color: #f87171;
}

/* ========================================
   TASK DRAG & DROP - Sắp xếp công việc
   ======================================== */

/* Drag handle icon */
#task-checklist .task-item .cursor-move {
    cursor: grab;
    user-select: none;
    flex-shrink: 0;
}
#task-checklist .task-item .cursor-move:active {
    cursor: grabbing;
}

/* Drop zone highlight */
#task-checklist .task-item.drag-over {
    border-color: var(--ghz-brand-color, #00c37a) !important;
    background: var(--ghz-brand-soft-08, rgba(0,195,122,0.08)) !important;
    box-shadow: 0 0 0 2px var(--ghz-brand-glow-35, rgba(0,195,122,0.3));
}

/* ========================================
   P0_11 v4: DETAILS/SUMMARY CLICK AREA FIX
   Override .ui-disclosure-summary trong app.min.css
   Specificity phải cao hơn .ui-disclosure-summary (0,1,0)
   Dùng [class] + summary + !important
   ======================================== */

/* Áp dụng cho MỌI summary có class ui-disclosure-summary */
summary[class~="ui-disclosure-summary"] {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    list-style: none !important;
}

/* Inner span wrapper */
summary[class~="ui-disclosure-summary"] > span.flex,
summary[class~="ui-disclosure-summary"] > span[class~="flex"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}

/* Chevron icon */
summary[class~="ui-disclosure-summary"] > i[class~="ui-disclosure-chevron"] {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: auto !important;
    transition: transform 0.2s ease, color 0.15s ease;
}

/* Hover state */
summary[class~="ui-disclosure-summary"]:hover {
    background: rgba(255,255,255,.025) !important;
}

summary[class~="ui-disclosure-summary"]:hover > i[class~="ui-disclosure-chevron"] {
    color: #fff !important;
}

/* Touch/active state */
summary[class~="ui-disclosure-summary"]:active {
    background: rgba(255,255,255,.05) !important;
}

/* Ẩn default marker */
summary[class~="ui-disclosure-summary"]::-webkit-details-marker {
    display: none !important;
}

summary[class~="ui-disclosure-summary"]::marker {
    display: none !important;
}

/* ========================================
   SUMMARY GLASS + ACTIVE ICON (v2026-09-19)
   Đồng bộ: cả Nhập + Xuất đều có:
     - Icon nổi brand color khi <details open>
     - Border-bottom glass khi mở (để phân biệt với content bên dưới)
     - Active glow subtle cho icon
   ======================================== */

/* Icon "Nhập hàng" (text-primary) và "Xuất hàng" (themed-disclosure-icon) trong summary:
   mặc định (closed) → tone theme sáng = màu primary text (đậm nhưng không nhạt)
   open → brand color (xanh nổi bật) + soft glow */
.card > summary[class~="ui-disclosure-summary"] .text-primary,
.card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    transition: color .2s ease, text-shadow .2s ease, filter .2s ease;
}
/* Khi summary CLOSED → giữ tone theme tương ứng */
.card > summary[class~="ui-disclosure-summary"] .text-primary {
    color: var(--ghz-brand-color, #00c37a) !important;
}
.card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: var(--ghz-text-secondary, #9ca3af) !important;
}
html[data-theme="classic"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon,
html[data-theme="midnight"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon,
html[data-theme="deep-space"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon,
html[data-theme="pure-dark"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon,
html[data-theme="charcoal"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon,
html[data-theme="purple-haze"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #cbd5e1 !important;
}
html[data-theme="mint-fresh"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #2d5048 !important;
}
html[data-theme="peach-cream"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #6b4423 !important;
}
html[data-theme="lavender-mist"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #4a3578 !important;
}
html[data-theme="sky-blue"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #1e4976 !important;
}
html[data-theme="sunset"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #7a3825 !important;
}
html[data-theme="fire"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #7c3a14 !important;
}
html[data-theme="pink-bloom"] .card > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: #6b2848 !important;
}

/* Khi summary OPEN (details[open]) → CẢ 2 icon nổi brand color + soft glow đồng bộ */
.card > details[open] > summary[class~="ui-disclosure-summary"] .text-primary,
.card > details[open] > summary[class~="ui-disclosure-summary"] .themed-disclosure-icon {
    color: var(--ghz-brand-color, #00c37a) !important;
    filter: drop-shadow(0 0 6px var(--ghz-brand-glow-35, rgba(0,195,122,0.35)));
}
/* Glass border-bottom khi mở: tone brand color mờ để phân tách content */
.card > details[open] > summary[class~="ui-disclosure-summary"] {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ghz-brand-color, #00c37a) 6%, transparent),
        color-mix(in srgb, var(--ghz-brand-color, #00c37a) 2%, transparent)) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ghz-brand-color, #00c37a) 18%, transparent) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
/* Subtle border-left để highlight icon khi open */
.card > details[open] > summary[class~="ui-disclosure-summary"] > span.flex > i.fa-solid:first-child {
    position: relative;
}
.card > details[open] > summary[class~="ui-disclosure-summary"] > span.flex > i.fa-solid:first-child::before {
    content: '';
    position: absolute;
    inset: -8px -10px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ghz-brand-color, #00c37a) 22%, transparent) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}


/* Responsive mobile */
@media (max-width: 639px) {
    summary[class~="ui-disclosure-summary"] {
        padding: 0.875rem 1rem !important;
    }
}

/* Dragging item (opacity set by JS) */
#task-checklist .task-item[draggable="true"] {
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

/* ========================================
   P0_18: APP LOADING SKELETON (thay vòng xoay)
   ======================================== */

/* Skeleton base (giống demo) */
.app-skeleton-screen {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Mỗi thanh bar có animation shimmer, lấy màu từ theme hiện tại. */
.app-skeleton-bar,
.app-skeleton-avatar,
.app-skeleton-icon,
.app-skeleton-tab {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--ghz-input-bg, #1a1d23) 78%, var(--ghz-text-muted, #9ca3af)) 0%,
        color-mix(in srgb, var(--ghz-input-bg, #1a1d23) 58%, var(--ghz-text-primary, #e5e7eb)) 50%,
        color-mix(in srgb, var(--ghz-input-bg, #1a1d23) 78%, var(--ghz-text-muted, #9ca3af)) 100%);
    background-size: 200% 100%;
    animation: app-skeleton-shimmer 1.5s ease-in-out infinite;
    border: 1px solid color-mix(in srgb, var(--ghz-card-border, #2a2e35) 55%, transparent);
    border-radius: 6px;
}
.app-skeleton-bar { height: 14px; width: 100%; margin-bottom: 8px; }
.app-skeleton-bar.w-full { width: 100%; }
.app-skeleton-bar.w-3-4 { width: 75%; }
.app-skeleton-bar.w-1-2 { width: 50%; }
.app-skeleton-bar.w-1-4 { width: 25%; }
.app-skeleton-bar:last-child { margin-bottom: 0; }

.app-skeleton-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; }
.app-skeleton-icon { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }

.app-skeleton-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.app-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.app-skeleton-tabs {
    display: flex;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid color-mix(in srgb, var(--ghz-card-border, #2a2e35) 70%, transparent);
    margin-bottom: 4px;
}
.app-skeleton-tab { height: 32px; width: 70px; border-radius: 8px; }

.app-skeleton-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, rgba(120, 140, 150, 0.18));
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}
.app-skeleton-card-header {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

@keyframes app-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Brand ở cuối skeleton (giữ logo + spinner nhỏ) */
.app-skeleton-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    opacity: 0.8;
}
.app-skeleton-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ghz-brand-soft-18, rgba(0,195,122,0.25));
    border-top-color: var(--ghz-brand-color, #00c37a);
    border-radius: 50%;
    animation: app-skeleton-spin 0.8s linear infinite;
}
@keyframes app-skeleton-spin {
    to { transform: rotate(360deg); }
}

/* Fade out khi app sẵn sàng (đã có class .hidden) */
#app-loading-screen {
    position: fixed;
    inset: 0;
    background: var(--ghz-bg, #0e1013);
    z-index: 9999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.3s ease;
}
#app-loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Tôn trọng prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .app-skeleton-bar,
    .app-skeleton-avatar,
    .app-skeleton-icon,
    .app-skeleton-tab,
    .app-skeleton-spinner {
        animation: none;
    }
    #app-loading-screen { transition: none; }
}

/* Mobile: skeleton thu nhỏ một chút */
@media (max-width: 640px) {
    .app-skeleton-screen { padding: 16px 14px 24px; gap: 16px; }
    .app-skeleton-tab { width: 60px; height: 28px; }
}





/* ============================================================
   P0_25: Monthly Schedule Stats - styling chip + sticky total
   ============================================================ */

/* Bảng lịch tháng: container */
#schedule-monthly-table,
.schedule-monthly-table {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 12px;
}

/* Sticky cột Nhân viên — classic: nền đen blur; non-classic: input/card tokens */
.monthly-th-name,
.monthly-td-name {
    position: sticky;
    left: 0;
    z-index: 4;
    background: var(--ghz-input-bg, rgba(8, 10, 14, 0.88));
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 1px 0 0 var(--ghz-card-border, rgba(255,255,255,0.1));
}
.monthly-th-name {
    z-index: 5;
    min-width: 200px;
    text-align: left;
    font-weight: 700;
    color: var(--ghz-text-primary, #e5e7eb);
    padding: 8px 10px;
    background: var(--ghz-input-bg, rgba(0, 0, 0, 0.92));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Cột Tổng - sticky ngay sau cột Tên */
.monthly-th-total,
.monthly-td-total {
    position: sticky;
    left: 200px;  /* = min-width của cột Tên */
    z-index: 4;
    background: var(--ghz-input-bg, rgba(8, 10, 14, 0.88)) !important;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 1px 0 0 var(--ghz-card-border, rgba(255,255,255,0.12));
    min-width: 64px;
    text-align: center;
    font-weight: 900;
    padding: 8px 6px;
}
.monthly-th-total {
    z-index: 5;
    color: var(--ghz-warning, #fbbf24);
    background: var(--ghz-input-bg, rgba(0, 0, 0, 0.92)) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Ô Tổng - nội dung (số to + đơn vị) */
.monthly-td-total > div:first-child {
    font-size: 18px;
    color: var(--ghz-warning, #fbbf24);
    line-height: 1;
}
.monthly-td-total > div:last-child {
    font-size: 8px;
    color: var(--ghz-text-muted, #6b7280);
    font-weight: 500;
    margin-top: 1px;
}

/* Header cột ngày */
.monthly-th-day {
    min-width: 36px;
    width: 36px;
    text-align: center;
    font-weight: 700;
    color: var(--ghz-text-muted, #9ca3af);
    padding: 6px 0;
    background: var(--ghz-input-bg, linear-gradient(180deg, rgba(31,41,55,0.96), rgba(17,24,39,0.96)));
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
}
.monthly-week-sep {
    border-left: 1px solid var(--ghz-card-border, rgba(255,255,255,0.15));
}
.monthly-today-col {
    color: var(--ghz-warning, #fde68a) !important;
    background: color-mix(in srgb, var(--ghz-warning, #78350f) 28%, var(--ghz-input-bg, #111827)) !important;
}

/* Cell ngày trong body */
.monthly-td-day {
    padding: 2px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.04));
}
.monthly-day-cell-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
}
.monthly-day-empty {
    color: var(--ghz-text-muted, #4b5563);
    font-size: 11px;
    user-select: none;
}

/* Cell Nhân viên */
.monthly-emp-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.monthly-emp-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ghz-brand-color, #4f46e5), var(--ghz-brand-active, #7c3aed));
    color: var(--ghz-text-on-grad, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    flex-shrink: 0;
}
.monthly-emp-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.monthly-emp-name {
    font-weight: 700;
    color: var(--ghz-text-primary, #f3f4f6);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.monthly-emp-type {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;
    width: max-content;
}
.monthly-emp-type.kinhdoanh { background: var(--ghz-info-bg, rgba(59,130,246,0.18)); color: var(--ghz-info, #93c5fd); border: 1px solid color-mix(in srgb, var(--ghz-info, #3b82f6) 40%, transparent); }
.monthly-emp-type.marketing { background: var(--ghz-brand-soft-18, rgba(236,72,153,0.18)); color: var(--ghz-brand-color, #f9a8d4); border: 1px solid var(--ghz-brand-soft-45, rgba(236,72,153,0.4)); }
.monthly-emp-type.partime   { background: var(--ghz-warning-bg, rgba(245,158,11,0.18)); color: var(--ghz-warning, #fcd34d); border: 1px solid color-mix(in srgb, var(--ghz-warning, #f59e0b) 40%, transparent); }

/* Empty state */
.monthly-empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--ghz-text-muted, #6b7280);
}
.monthly-empty-state i {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.5;
}
.monthly-empty-state p {
    margin: 8px 0;
    font-size: 13px;
}

/* === CHIP ca làm việc - màu rõ ràng === */
.monthly-day-cell-content .shift-chip {
    background: var(--chip-fill, #6b7280);
    color: var(--chip-text, #f3f4f6);
    border: 1px solid color-mix(in srgb, var(--chip-fill, #6b7280) 60%, var(--chip-text, #f3f4f6) 30%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 1px 2px rgba(0,0,0,0.4);
    text-shadow: 0 1px 0 rgba(0,0,0,0.15);
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 12px;
}
.monthly-day-cell-content .shift-chip-empty {
    background: color-mix(in srgb, var(--ghz-danger, #7f1d1d) 35%, var(--ghz-input-bg, #1a1d23));
    color: var(--ghz-danger, #fca5a5);
    border: 1px solid color-mix(in srgb, var(--ghz-danger, #fca5a5) 40%, transparent);
}


/* ===== THƯỞNG/PHẠT: giới hạn modal chi tiết về 380px ===== */
#reward-detail-modal > .ui-modal-mobile,
#reward-detail-modal > .card.ui-modal-mobile {
    width: min(23.75rem, calc(100vw - 1rem)) !important;
    max-width: min(23.75rem, calc(100vw - 1rem)) !important;
    max-height: min(80vh, calc(100dvh - 1rem)) !important;
    font-size: 0.8125rem !important;
}

/* ===== P0_24: EMP CARD (thẻ nhân viên) ===== */
.emp-list-card { display: flex; flex-direction: column; gap: 8px; }
.emp-card-row {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    border: 1px solid var(--ghz-card-glass-border, rgba(255,255,255,0.12));
    border-radius: 12px; padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px; align-items: center;
    cursor: pointer; transition: all .15s;
    position: relative;
    color: var(--ghz-text-primary, #1f2937);
}
.emp-card-row:active { background: var(--ghz-card-glass-bg, rgba(255,255,255,0.12)); transform: scale(0.99); }
.emp-card-row:hover { border-color: var(--ghz-card-glass-border-hover, var(--ghz-brand-color, #00c37a)); }
.emp-card-row.paid::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 2px; background: var(--primary, #ff7e29); border-radius: 12px 12px 0 0;
}
.emp-avatar-mini {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 13px; flex-shrink: 0; color: white;
    background: linear-gradient(135deg, var(--primary, #ff7e29), var(--secondary, #b794f4));
}
.emp-info-block { min-width: 0; }
.emp-name-mini { font-weight: 700; color: var(--ghz-text-primary, #1f2937); font-size: 0.9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emp-meta-mini { font-size: 0.7rem; color: var(--ghz-text-muted, #6b7280); margin-top: 2px; line-height: 1.3; }
.emp-net-mini { font-size: 1.05rem; font-weight: 800; text-align: right; line-height: 1.1; }
.emp-net-mini.pos { color: var(--ghz-button-bg, var(--primary, #ff7e29)); }
.emp-net-mini.neg { color: #f87171; }
.emp-net-mini.zero { color: var(--ghz-text-muted, #6b7280); }
.emp-right-mini { display: flex; align-items: center; gap: 4px; }
.status-badge-mini { display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 6px; font-size: 0.65rem; font-weight: 600; }
.status-badge-mini.unpaid,
.status-badge-mini.state-collapsed { background: var(--ghz-warning-bg, rgba(251, 191, 36, 0.15)); color: var(--ghz-warning, #fbbf24); border: 1px solid color-mix(in srgb, var(--ghz-warning, #fbbf24) 30%, transparent); }
.status-badge-mini.paid,
.status-badge-mini.state-expanded { background: var(--ghz-brand-soft-18, rgba(34, 197, 94, 0.15)); color: var(--ghz-success, var(--ghz-brand-color, #22c55e)); border: 1px solid color-mix(in srgb, var(--ghz-success, var(--ghz-brand-color, #22c55e)) 40%, transparent); }
.status-badge-mini.zero,
.status-badge-mini.state-default { background: var(--ghz-info-bg, rgba(107, 114, 128, 0.15)); color: var(--ghz-text-muted, #9ca3af); border: 1px solid color-mix(in srgb, var(--ghz-text-muted, #9ca3af) 25%, transparent); }
.status-badge-mini.state-disabled { background: rgba(255,255,255,0.02); color: #4b5563; border: 1px dashed rgba(255,255,255,0.06); cursor: not-allowed; opacity: 0.5; pointer-events: none; }

.reward-stats-mini .stat-mini-card {
    background: var(--ghz-card-glass-bg, rgba(255,255,255,0.08));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.4));
    border: 1px solid var(--ghz-card-glass-border, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
    color: var(--ghz-text-primary, #1f2937);
    transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.reward-stats-mini .stat-mini-card .lbl {
    font-size: 0.65rem; color: var(--ghz-text-muted, #9ca3af); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.reward-stats-mini .stat-mini-card .val {
    font-size: 0.95rem; font-weight: 800; color: var(--ghz-text-primary, #e5e7eb); line-height: 1.1;
}
.reward-stats-mini .stat-mini-card .val.pos { color: var(--ghz-button-bg, var(--primary, #ff7e29)); }
.reward-stats-mini .stat-mini-card .val.neg { color: #f87171; }
.reward-stats-mini .stat-mini-card .val.warn { color: #fbbf24; }
@media (max-width: 480px) {
    .reward-stats-mini .stat-mini-card { padding: 6px 4px; }
    .reward-stats-mini .stat-mini-card .lbl { font-size: 0.6rem; }
    .reward-stats-mini .stat-mini-card .val { font-size: 0.85rem; }
}

/* Nút thanh toán trong modal chi tiết */
.pay-employee-btn {
    background: var(--ghz-brand-active-bg, rgba(34, 197, 94, 0.18));
    color: var(--ghz-text-on-brand-strong, #064e3b); border: 1px solid var(--ghz-brand-active-border, rgba(34, 197, 94, 0.45));
    padding: 10px 16px;
    border-radius: 10px; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; transition: all .15s; flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pay-employee-btn:hover { background: color-mix(in srgb, #22c55e 25%, transparent); transform: translateY(-1px); }
.pay-employee-btn:active { transform: scale(0.98); }
.pay-employee-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pay-employee-btn.already-paid {
    background: var(--ghz-brand-soft-12, rgba(34, 197, 94, 0.15)); color: var(--ghz-text-on-brand-strong, #064e3b); cursor: default;
}

/* ===== P0_30 CASE 7 — shift-box-active (solid brand thay inline hardcode #00c37a) ===== */
.shift-box-active {
    background: var(--ghz-brand-active-bg, rgba(0, 195, 122, 0.18));
    color: var(--ghz-text-on-brand-strong, #052e16);
    border: 1px solid var(--ghz-brand-active-border, rgba(0, 195, 122, 0.45));
}
.shift-box-active:hover {
    background: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 25%, transparent);
}

/* ===== P0_31 — state alias tổng quát ===== */
.state-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===========================================================================
 * v2026-09-19 — GLASS TIER (phủ kính + viền cho TẤT CẢ class nền đen)
 * 4 tier theo độ mờ + viền:
 *   Tier 1 — Card chính:  viền 2px, blur 28px, saturate 1.8
 *   Tier 2 — Card phụ:    viền 1.5px, blur 24px, saturate 1.6
 *   Tier 3 — Row item:    viền 1.5px, blur 22px, saturate 1.5
 *   Tier 4 — Utility:     viền 1px, blur 20px, saturate 1.4
 * Light theme phủ trắng mờ + viền xám đậm; Dark theme đậm hơn + viền sáng.
 * ========================================================================= */

/* ----- Tier 1: Card chính ----- */
.ghz-glass-1,
.emp-card-row,
.hero-card,
.secondary-card,
.detail-card,
.filter-panel,
.permissions-matrix-card,
.imei-history-list {
    background: var(--ghz-card-glass-bg, rgba(35,40,48,0.65)) !important;
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(28px) saturate(1.8)) !important;
    backdrop-filter: var(--ghz-card-glass-blur, blur(28px) saturate(1.8)) !important;
    border: 2px solid var(--ghz-card-glass-border, rgba(120,140,150,0.55)) !important;
    border-radius: 14px !important;
    position: relative !important;
    box-shadow:
        0 4px 14px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.06) !important;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}
.ghz-glass-1::after,
.emp-card-row::after,
.hero-card::after,
.secondary-card::after,
.detail-card::after,
.filter-panel::after,
.permissions-matrix-card::after,
.imei-history-list::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.25) !important;
}
.ghz-glass-1:hover,
.emp-card-row:hover,
.hero-card:hover,
.secondary-card:hover,
.detail-card:hover,
.filter-panel:hover,
.permissions-matrix-card:hover,
.imei-history-list:hover {
    border-color: var(--ghz-brand-color, rgba(56,178,172,0.95)) !important;
    box-shadow:
        0 8px 22px rgba(0,0,0,0.45),
        0 0 0 1px var(--ghz-brand-glow-35, rgba(56,178,172,0.4)),
        inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* ----- Tier 2: Card phụ / picker / panel phụ ----- */
.ghz-glass-2,
.date-range-picker,
.multi-select-trigger,
.multi-select-dropdown,
.multi-select-search,
.stats-table-enhanced,
.empty-state-action-secondary,
.detail-card-header,
.inv-import-aside,
.inv-stepper-vertical,
.ctv-self-table-scroll {
    background: var(--ghz-card-glass-bg, rgba(35,40,48,0.6)) !important;
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.6)) !important;
    backdrop-filter: var(--ghz-card-glass-blur, blur(24px) saturate(1.6)) !important;
    border: 1.5px solid var(--ghz-card-glass-border, rgba(120,140,150,0.5)) !important;
    border-radius: 12px !important;
    position: relative !important;
    box-shadow:
        0 3px 12px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
.ghz-glass-2::after,
.date-range-picker::after,
.multi-select-trigger::after,
.multi-select-dropdown::after,
.multi-select-search::after,
.stats-table-enhanced::after,
.empty-state-action-secondary::after,
.detail-card-header::after,
.inv-import-aside::after,
.inv-stepper-vertical::after,
.ctv-self-table-scroll::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}
.ghz-glass-2:hover,
.date-range-picker:hover,
.multi-select-trigger:hover,
.multi-select-dropdown:hover,
.multi-select-search:hover,
.stats-table-enhanced:hover,
.empty-state-action-secondary:hover,
.detail-card-header:hover,
.inv-import-aside:hover,
.inv-stepper-vertical:hover,
.ctv-self-table-scroll:hover {
    border-color: var(--ghz-brand-color, rgba(56,178,172,0.85)) !important;
}

/* ----- Tier 3: Row item ----- */
.ghz-glass-3,
.my-today-task-item,
.my-recent-work-item,
.reward-stats-mini,
.schedule-emp-row,
.imei-history-item,
.ctv-self-sale-table,
.monthly-day-cell-content {
    background: var(--ghz-card-glass-bg, rgba(35,40,48,0.55)) !important;
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(22px) saturate(1.5)) !important;
    backdrop-filter: var(--ghz-card-glass-blur, blur(22px) saturate(1.5)) !important;
    border: 1.5px solid var(--ghz-card-glass-border, rgba(120,140,150,0.45)) !important;
    border-radius: 12px !important;
    position: relative !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.ghz-glass-3::after,
.my-today-task-item::after,
.my-recent-work-item::after,
.reward-stats-mini::after,
.schedule-emp-row::after,
.imei-history-item::after,
.ctv-self-sale-table::after,
.monthly-day-cell-content::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03),
        inset 0 -1px 0 rgba(0,0,0,0.18) !important;
}
.ghz-glass-3:hover,
.my-today-task-item:hover,
.my-recent-work-item:hover,
.reward-stats-mini:hover,
.schedule-emp-row:hover,
.imei-history-item:hover,
.ctv-self-sale-table:hover,
.monthly-day-cell-content:hover {
    border-color: var(--ghz-brand-color, rgba(56,178,172,0.9)) !important;
    background: var(--ghz-brand-soft-18, rgba(56,178,172,0.18)) !important;
}

/* ----- Tier 4: Utility / chip / badge / legend ----- */
.ghz-glass-4,
.shift-chip,
.shift-chip-empty,
.chip-filter-list,
.filter-tag,
.filter-preset-btn,
.filter-clear-all,
.status-badge-mini,
/* Loại bỏ .rank-card.rank-other khỏi selector glass theme
 * Lý do: --ghz-card-glass-bg là gradient kem/trắng trên theme sáng
 *         → che mất nền tối của .rank-card.rank-other
 *         → avatar/medal chìm, không hiển thị
 * Bằng cách loại bỏ khỏi danh sách selector, rule glass theme
 * không override .rank-card.rank-other nữa → giữ nguyên nền tối */
.rank-card.rank-other,
.inv-step-circle,
.inv-step-v-line,
.inv-prefill-thumb,
.exp-device-card-thumb,
.imei-history-icon,
.imei-history-note,
.schedule-legend,
.schedule-th-day,
.schedule-cell-day-sep,
.schedule-week-table,
.my-reward-bar-track,
.ui-info-tooltip-content,
.skeleton,
.skeleton-list-item,
.skeleton-inventory-card,
.skeleton-metric-card,
.empty-state-icon,
.empty-state-icon-animated,
.hero-metric-trend,
.secondary-metric-icon,
.imei-history-export,
.imei-history-import,
.imei-history-correction,
.imei-history-repair,
.imei-history-reversal,
.imei-history-void,
.imei-history-knox,
.inv-group-title,
.inventory-image-unavailable,
.inventory-repair-tag,
.admin-account-badge,
.admin-account-badge--archived,
.confirm-icon-info,
.confirm-icon-warning,
.confirm-icon-danger,
.pay-employee-btn,
.copy-btn,
.header-search-kbd,
.offline-indicator,
.monthly-th-name,
.monthly-th-total,
.monthly-emp-type {
    background: var(--ghz-card-glass-bg, rgba(35,40,48,0.5)) !important;
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.4)) !important;
    backdrop-filter: var(--ghz-card-glass-blur, blur(20px) saturate(1.4)) !important;
    border: 1px solid var(--ghz-card-glass-border, rgba(120,140,150,0.4)) !important;
    border-radius: 10px !important;
    position: relative !important;
    box-shadow:
        0 1px 6px rgba(0,0,0,0.22),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    transition: border-color .15s ease !important;
}
.ghz-glass-4:hover,
.shift-chip:hover,
.shift-chip-empty:hover,
.filter-tag:hover,
.filter-preset-btn:hover,
.filter-clear-all:hover,
/* .rank-card.rank-other:hover - loại bỏ để glass theme không override */
.inv-step-circle:hover {
    /* No border override - .inv-step-circle dùng border: none */
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 12%, var(--ghz-input-bg, #232730)) !important;
}

.schedule-th-day:hover,
.ui-info-tooltip-content:hover {
    border-color: var(--ghz-brand-color, rgba(56,178,172,0.75)) !important;
}

/* ----- Dark theme variant: glass đậm hơn, viền sáng hơn ----- */
html[data-theme="midnight"] .ghz-glass-1,
html[data-theme="midnight"] .ghz-glass-2,
html[data-theme="midnight"] .ghz-glass-3,
html[data-theme="midnight"] .ghz-glass-4,
html[data-theme="deep-space"] .ghz-glass-1,
html[data-theme="deep-space"] .ghz-glass-2,
html[data-theme="deep-space"] .ghz-glass-3,
html[data-theme="deep-space"] .ghz-glass-4,
html[data-theme="pure-dark"] .ghz-glass-1,
html[data-theme="pure-dark"] .ghz-glass-2,
html[data-theme="pure-dark"] .ghz-glass-3,
html[data-theme="pure-dark"] .ghz-glass-4,
html[data-theme="charcoal"] .ghz-glass-1,
html[data-theme="charcoal"] .ghz-glass-2,
html[data-theme="charcoal"] .ghz-glass-3,
html[data-theme="charcoal"] .ghz-glass-4 {
    background: var(--ghz-card-glass-bg, rgba(20,24,30,0.7)) !important;
    border-color: var(--ghz-card-glass-border, rgba(180,200,210,0.5)) !important;
}

/* ===========================================================================
 * v2026-09-19 — OVERRIDE Tailwind utility nền đen (bg-inputbg, bg-cardbg)
 * Tailwind utility .bg-inputbg có specificity (0,1,0), KHÔNG có !important.
 * Rule dưới đây dùng selector 2-class (0,2,0) + !important → thắng chắc.
 * ========================================================================= */

/* Classic: glass dark (giữ nguyên giao diện gốc).
   Theme khác: dùng --ghz-card-bg / --ghz-input-bg (shorthand `background`
   để thắng background-color cứng — gradient token không hợp lệ trên background-color). */
.bg-inputbg,
.bg-cardbg {
    background-color: rgba(35,40,48,0.65) !important;
    border-color: rgba(120,140,150,0.5) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
}

.bg-inputbg\/70,
.bg-inputbg\/50,
.bg-inputbg\/30,
.bg-inputbg\/20,
.bg-inputbg\/10 {
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
    border-color: rgba(120,140,150,0.45) !important;
}
.bg-inputbg\/70 { background-color: rgba(35,40,48,0.7) !important; }
.bg-inputbg\/50 { background-color: rgba(35,40,48,0.5) !important; }
.bg-inputbg\/30 { background-color: rgba(35,40,48,0.3) !important; }
.bg-inputbg\/20 { background-color: rgba(35,40,48,0.2) !important; }
.bg-inputbg\/10 { background-color: rgba(35,40,48,0.1) !important; }

html[data-theme]:not([data-theme="classic"]) .bg-cardbg {
    background: var(--ghz-card-bg) !important;
    border-color: var(--ghz-card-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg {
    background: var(--ghz-input-bg) !important;
    border-color: var(--ghz-input-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg\/70 {
    background: color-mix(in srgb, var(--ghz-input-bg) 70%, transparent) !important;
    border-color: var(--ghz-input-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg\/50 {
    background: color-mix(in srgb, var(--ghz-input-bg) 50%, transparent) !important;
    border-color: var(--ghz-input-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg\/30 {
    background: color-mix(in srgb, var(--ghz-input-bg) 30%, transparent) !important;
    border-color: var(--ghz-input-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg\/20 {
    background: color-mix(in srgb, var(--ghz-input-bg) 20%, transparent) !important;
    border-color: var(--ghz-input-border) !important;
}
html[data-theme]:not([data-theme="classic"]) .bg-inputbg\/10 {
    background: color-mix(in srgb, var(--ghz-input-bg) 10%, transparent) !important;
    border-color: var(--ghz-input-border) !important;
}

/* ===== B1.4 — NÚT THEME-AWARE: 3 state + BOUNCE ===== */
@keyframes btnBounce {
    0%   { transform: scale(1); }
    20%  { transform: scale(0.92); }
    50%  { transform: scale(1.05); }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* Áp dụng cho cả .btn-primary-theme (mới) lẫn .btn-glow (cũ) để retro-fit */
.btn-primary-theme,
.btn-glow {
    background-color: var(--ghz-brand-color, #00c37a) !important;
    color: var(--ghz-text-on-grad, #ffffff);
    border: 2px solid transparent;
    transition: background-color .22s ease, box-shadow .22s ease, transform .08s ease;
    transform-origin: center;
}

.btn-primary-theme:hover:not(:disabled):not(:active),
.btn-glow:hover:not(:disabled):not(:active) {
    background-color: var(--ghz-brand-hover, #00a86b) !important;
    box-shadow: 0 6px 16px -3px var(--ghz-brand-color, rgba(0,195,122,.45));
    transform: translateY(-1px);
}

.btn-primary-theme:active:not(:disabled),
.btn-glow:active:not(:disabled) {
    background-color: var(--ghz-brand-active, #008c5b) !important;
    animation: btnBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 4px -1px var(--ghz-brand-active, rgba(0,140,91,.4));
}

.btn-primary-theme.is-selected,
.btn-glow.is-selected {
    background-color: var(--ghz-brand-active, #008c5b) !important;
    box-shadow: 0 0 0 2px var(--ghz-brand-color, #00c37a),
                0 0 0 4px rgba(0,195,122,0.25);
}

.btn-primary-theme:focus-visible,
.btn-glow:focus-visible {
    box-shadow: 0 0 0 3px rgba(125,125,125,0.30);
    border-color: var(--ghz-brand-color, #00c37a);
}

.btn-primary-theme:disabled,
.btn-glow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* ===== B1.B — TONE-DOWN BUTTON "NỔI" THEO THEME =====
   Giu style tone-down (bg nhat + border + text-primary) nhu cu, NHA them glow shadow
   + hover lift + bounce nhe khi click. Dung cho button phu can noi bat hon
   (Check Knox, Sửa nhập, Sửa, ...) ma khong qua loa mat nhu btn-glow solid. */
.btn-tone-down {
    background-color: var(--ghz-brand-active-bg, rgba(0, 195, 122, 0.18)) !important;
    color: var(--ghz-primary, var(--ghz-brand-color, #00c37a)) !important;
    border: 1px solid var(--ghz-primary, var(--ghz-brand-color, #00c37a)) !important;
    border-radius: 0.5rem;
    transition: background-color .22s ease,
                box-shadow .22s ease,
                border-color .22s ease,
                transform .08s ease !important;
    transform-origin: center;
}

.btn-tone-down:hover:not(:disabled):not(:active) {
    background-color: var(--ghz-brand-color, rgba(0, 195, 122, 0.28)) !important;
    border-color: var(--ghz-brand-hover, #00a86b) !important;
    box-shadow: 0 6px 16px -3px var(--ghz-brand-color, rgba(0, 195, 122, 0.45)),
                0 0 0 1px var(--ghz-brand-color, rgba(0, 195, 122, 0.5)) inset;
    transform: translateY(-1px);
}

.btn-tone-down:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.08s ease;
    box-shadow: 0 1px 4px -1px var(--ghz-brand-active, rgba(0, 140, 91, 0.4));
}

.btn-tone-down:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ghz-brand-color, rgba(0, 195, 122, 0.35));
}

.btn-tone-down:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* Reduced motion: tat lift/bounce */
@media (prefers-reduced-motion: reduce) {
    .btn-tone-down:hover:not(:disabled):not(:active),
    .btn-tone-down:active:not(:disabled) {
        transform: none;
        transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }
}

/* ===== B1.B2 — TONE-DOWN WARNING (yellow tone) =====
   Bien the cua btn-tone-down cho action canh bao (Sửa xuất, ...).
   Giu pattern nổi (glow + lift + bounce) nhu primary, nhung dung tone vang. */
.btn-tone-down-warning {
    background-color: rgba(234, 179, 8, 0.18) !important;
    color: rgb(252, 211, 77) !important;
    border: 1px solid rgba(234, 179, 8, 0.5) !important;
    border-radius: 0.5rem;
    transition: background-color .22s ease,
                box-shadow .22s ease,
                border-color .22s ease,
                transform .08s ease !important;
    transform-origin: center;
}

.btn-tone-down-warning:hover:not(:disabled):not(:active) {
    background-color: rgba(234, 179, 8, 0.28) !important;
    border-color: rgba(234, 179, 8, 0.75) !important;
    box-shadow: 0 6px 16px -3px rgba(234, 179, 8, 0.45),
                0 0 0 1px rgba(234, 179, 8, 0.5) inset;
    transform: translateY(-1px);
}

.btn-tone-down-warning:active:not(:disabled) {
    transform: scale(0.97);
    transition: transform 0.08s ease;
    box-shadow: 0 1px 4px -1px rgba(202, 138, 4, 0.4);
}

.btn-tone-down-warning:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.35);
}

.btn-tone-down-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

@media (prefers-reduced-motion: reduce) {
    .btn-tone-down-warning:hover:not(:disabled):not(:active),
    .btn-tone-down-warning:active:not(:disabled) {
        transform: none;
        transition: background-color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
    }
}

/* Tôn trọng reduced-motion: tắt bounce */
@media (prefers-reduced-motion: reduce) {
    .btn-primary-theme:active:not(:disabled),
    .btn-glow:active:not(:disabled) {
        animation: none;
    }
}

/* ===== B1.A — XUẤT HÀNG 4 NÚT THEME-AWARE (solid brand pattern) ===== */
.tra-btn {
    background: var(--ghz-brand-active-bg, rgba(0,195,122,0.18));
    color: var(--ghz-text-on-brand-strong, #052e16);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 700;
    border: 1px solid var(--ghz-brand-active-border, rgba(0,195,122,0.45));
    cursor: pointer;
    transition: background .22s ease, box-shadow .22s ease, transform .08s ease;
    font-size: 13px;
    transform-origin: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tra-btn:hover:not(:disabled):not(:active) {
    background: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 25%, transparent);
    box-shadow: 0 6px 16px -3px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 35%, transparent);
    transform: translateY(-1px);
}
.tra-btn:active:not(:disabled) {
    background: color-mix(in srgb, var(--ghz-grad-1, #00c37a) 32%, transparent);
    animation: btnBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tra-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

.stepper-btn {
    background: var(--ghz-brand-active-bg, rgba(0, 195, 122, 0.18));
    color: var(--ghz-text-on-brand-strong, #052e16);
    border: 1px solid var(--ghz-brand-active-border, rgba(0, 195, 122, 0.45));
    padding: 8px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    border: 2px solid var(--ghz-brand-active-border, rgba(0, 195, 122, 0.45));
    cursor: pointer;
    transition: background .22s ease, box-shadow .22s ease, transform .08s ease;
    transform-origin: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.stepper-btn:hover:not(:disabled):not(:active) {
    background: var(--ghz-brand-hover, #00a86b);
    box-shadow: 0 6px 16px -3px var(--ghz-brand-color, rgba(0,195,122,.45));
    transform: translateY(-1px);
}
.stepper-btn:active:not(:disabled) {
    background: var(--ghz-brand-active, #008c5b);
    animation: btnBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stepper-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

.legend-themeware {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--ghz-brand-soft-18, rgba(0,195,122,0.18));
    color: var(--ghz-brand-color, #00c37a);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.file-input-themeware {
    display: block;
    width: 100%;
    font-size: 13px;
    color: var(--ghz-text-secondary, #d1d5db);
}
.file-input-themeware::file-selector-button {
    margin-right: 12px;
    border: 0;
    border-radius: 8px;
    background: var(--ghz-brand-soft-15, rgba(0,195,122,0.15));
    padding: 8px 12px;
    color: var(--ghz-brand-color, #00c37a);
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}
.file-input-themeware::file-selector-button:hover {
    background: var(--ghz-brand-soft-25, rgba(0,195,122,0.25));
}

.themed-yellow-text {
    color: var(--ghz-brand-color, #facc15);
    font-weight: 700;
}

/* ===== B1.B — ICON + STAT VÀNG → THEME-AWARE ===== */

/* Disclosure summary icon (10 chỗ) */
.themed-disclosure-icon {
    color: var(--ghz-brand-color, #facc15);
}

/* Lightbulb tip icon (1 chỗ) */
.themed-tip-icon {
    color: var(--ghz-brand-color, #facc15);
}

/* Stat số thường (2 chỗ - 2306, 2328) */
.themed-stat-yellow {
    color: var(--ghz-brand-color, #facc15);
    font-weight: 700;
}

/* Stat số lớn 26-28px (1 chỗ - 1729) */
.themed-stat-large {
    color: var(--ghz-brand-color, #facc15);
    font-weight: 800;
    line-height: 1;
}

/* Stat mini (1 chỗ - 1531) */
.themed-mini-stat {
    color: var(--ghz-brand-color, #facc15);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

/* Pending text (1 chỗ - 2751) */
.themed-pending-text {
    color: var(--ghz-brand-color, #facc15);
    font-weight: 700;
}

/* ===== GLASS BUTTONS (theme-aware, opt-in mới) =====
   Class .btn-glass-* dùng CSS variables định nghĩa trong theme-engine.js
   (--ghz-btn-primary-bg/border/shadow, --ghz-btn-secondary-*, v.v.)
   → đổi theme tự đổi màu nút, không hardcode.

   KHÔNG thay thế .btn-glow / .btn-primary-theme hiện có — chỉ thêm class mới
   để bundle.js có thể chuyển đổi dần. Pattern 4-tier giống các glass card:
   - Section/card: blur(28px) — Tier 1
   - Button:      blur(16px) saturate(1.6) — tier riêng cho nút
   - Icon button: blur(14px) saturate(1.5)
   - Tab bar pill: blur(20px) saturate(1.4) — Tier 4 */

/* --- Bounce animation (chia sẻ với .btn-glow) --- */
@keyframes btnBounceGlass {
    0%   { transform: scale(1); }
    20%  { transform: scale(0.92); }
    50%  { transform: scale(1.05); }
    75%  { transform: scale(0.98); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .btn-glass-primary:active:not(:disabled),
    .btn-glass-secondary:active:not(:disabled),
    .btn-glass-danger:active:not(:disabled),
    .btn-glass-warning:active:not(:disabled) {
        animation: none;
    }
}

/* --- 1. Primary (Lưu, Thêm, Xác nhận) --- */
.btn-glass-primary {
    background: var(--ghz-btn-primary-bg) !important;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    color: var(--ghz-text-on-grad, #ffffff);
    border: 1.5px solid var(--ghz-btn-primary-border) !important;
    box-shadow: var(--ghz-btn-primary-shadow) !important;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn-glass-primary:hover:not(:disabled):not(:active) {
    background: var(--ghz-btn-primary-bg-hover) !important;
    border-color: var(--ghz-btn-primary-border-hover) !important;
    box-shadow: var(--ghz-btn-primary-shadow-hover) !important;
    transform: translateY(-2px);
}
.btn-glass-primary:active:not(:disabled) {
    transform: scale(0.96);
    animation: btnBounceGlass 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-glass-primary:focus-visible {
    outline: 2px solid var(--ghz-grad-1, #00c37a);
    outline-offset: 2px;
}
.btn-glass-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* --- 2. Secondary (Hủy, Đặt lại) --- */
.btn-glass-secondary {
    background: var(--ghz-btn-secondary-bg) !important;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    color: var(--ghz-text-primary, #f3f4f6);
    border: 1.5px solid var(--ghz-btn-secondary-border) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .18s ease;
}
.btn-glass-secondary:hover:not(:disabled):not(:active) {
    background: var(--ghz-btn-secondary-bg-hover) !important;
    border-color: var(--ghz-btn-secondary-border-hover) !important;
    transform: translateY(-1px);
}
.btn-glass-secondary:active:not(:disabled) {
    transform: scale(0.96);
    animation: btnBounceGlass 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-glass-secondary:focus-visible {
    outline: 2px solid var(--ghz-text-secondary, #9ca3af);
    outline-offset: 2px;
}
.btn-glass-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 3. Danger (Xóa) --- */
.btn-glass-danger {
    background: var(--ghz-btn-danger-bg) !important;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    color: var(--ghz-btn-danger-text);
    border: 1.5px solid var(--ghz-btn-danger-border) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .18s ease;
}
.btn-glass-danger:hover:not(:disabled):not(:active) {
    background: var(--ghz-btn-danger-bg-hover) !important;
    border-color: var(--ghz-btn-danger-border-hover) !important;
    color: var(--ghz-text-primary, #ffffff);
    transform: translateY(-1px);
}
.btn-glass-danger:active:not(:disabled) {
    transform: scale(0.96);
    animation: btnBounceGlass 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-glass-danger:focus-visible {
    outline: 2px solid var(--ghz-danger, #f87171);
    outline-offset: 2px;
}
.btn-glass-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 4. Warning (Cảnh báo) --- */
.btn-glass-warning {
    background: var(--ghz-btn-warning-bg) !important;
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    color: var(--ghz-btn-warning-text);
    border: 1.5px solid var(--ghz-btn-warning-border) !important;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all .18s ease;
}
.btn-glass-warning:hover:not(:disabled):not(:active) {
    background: var(--ghz-btn-warning-bg-hover) !important;
    border-color: var(--ghz-btn-warning-border-hover) !important;
    transform: translateY(-1px);
}
.btn-glass-warning:active:not(:disabled) {
    transform: scale(0.96);
    animation: btnBounceGlass 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-glass-warning:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 5. Icon button (Sửa/Xóa/Mở/...) - 36×36 glass chip --- */
.ui-icon-button-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    cursor: pointer;
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    background: var(--ghz-btn-icon-bg) !important;
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid var(--ghz-btn-icon-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 2px 6px rgba(0, 0, 0, 0.20) !important;
    color: var(--ghz-text-secondary, #d1d5db);
}
.ui-icon-button-glass.primary {
    color: var(--ghz-btn-icon-primary-text);
    background: var(--ghz-btn-icon-primary-bg) !important;
    border-color: var(--ghz-btn-icon-primary-border) !important;
}
.ui-icon-button-glass.secondary {
    color: var(--ghz-btn-icon-secondary-text);
    background: var(--ghz-btn-icon-secondary-bg) !important;
    border-color: var(--ghz-btn-icon-secondary-border) !important;
}
.ui-icon-button-glass.danger {
    color: var(--ghz-btn-icon-danger-text);
    background: var(--ghz-btn-icon-danger-bg) !important;
    border-color: var(--ghz-btn-icon-danger-border) !important;
}
.ui-icon-button-glass.warning {
    color: var(--ghz-btn-icon-warning-text);
    background: var(--ghz-btn-icon-warning-bg) !important;
    border-color: var(--ghz-btn-icon-warning-border) !important;
}
.ui-icon-button-glass:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.30) !important;
}
.ui-icon-button-glass.primary:hover:not(:disabled) {
    background: var(--ghz-btn-icon-primary-bg-hover) !important;
    border-color: var(--ghz-btn-icon-primary-border-hover) !important;
}
.ui-icon-button-glass.secondary:hover:not(:disabled) {
    background: var(--ghz-btn-icon-secondary-bg-hover) !important;
    border-color: var(--ghz-btn-icon-secondary-border-hover) !important;
}
.ui-icon-button-glass.danger:hover:not(:disabled) {
    background: var(--ghz-btn-icon-danger-bg-hover) !important;
    border-color: var(--ghz-btn-icon-danger-border-hover) !important;
}
.ui-icon-button-glass.warning:hover:not(:disabled) {
    background: var(--ghz-btn-icon-warning-bg-hover) !important;
    border-color: var(--ghz-btn-icon-warning-border-hover) !important;
}
.ui-icon-button-glass:active:not(:disabled) {
    transform: scale(0.92);
}
.ui-icon-button-glass:focus-visible {
    outline: 2px solid var(--ghz-grad-1, #00c37a);
    outline-offset: 2px;
}
.ui-icon-button-glass:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- 6. Empty state CTA (nút lớn trong empty state) --- */
.empty-state-cta-glass {
    background: var(--ghz-brand-active-bg, rgba(0,195,122,0.18)) !important;
    backdrop-filter: blur(20px) saturate(1.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.7);
    color: var(--ghz-text-on-brand-strong, #052e16);
    border: 1.5px solid var(--ghz-brand-active-border, rgba(0,195,122,0.45)) !important;
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.10) !important;
    padding: 14px 28px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .12s ease, box-shadow .2s ease;
}
.empty-state-cta-glass:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 12px 32px color-mix(in srgb, var(--ghz-grad-1, #00c37a) 40%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
.empty-state-cta-glass:active:not(:disabled) {
    transform: scale(0.98);
}

/* ========== BẢNG CTV SALE — SCROLLABLE, HIỂN THỊ ~8 DÒNG ========== */
.ctv-sale-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}
/* Sticky thead khi cuộn dọc */
.ctv-sale-table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background-color: var(--ghz-input-bg, #1a1d23) !important;
    color: var(--ghz-text-secondary, #9ca3af) !important;
    box-shadow: 0 1px 0 0 var(--ghz-border, rgba(255, 255, 255, 0.08)) !important;
}
/* Wrapper bảng: hiển thị ~8 dòng, còn lại cuộn */
.card .overflow-x-auto:has(.ctv-sale-table) {
    max-height: 420px !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    border-radius: 0.5rem !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--ghz-border, rgba(255,255,255,0.2)) transparent !important;
}
.card .overflow-x-auto:has(.ctv-sale-table)::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}
.card .overflow-x-auto:has(.ctv-sale-table)::-webkit-scrollbar-thumb {
    background: var(--ghz-border, rgba(255,255,255,0.2)) !important;
    border-radius: 3px !important;
}
.card .overflow-x-auto:has(.ctv-sale-table)::-webkit-scrollbar-thumb:hover {
    background: var(--ghz-brand-active, #00c37a) !important;
}

/* ========== WORK PRIORITY BUTTON — GIỮ MÀU KHI ACTIVE ========== */
/* Chỉ fix nút "Bình thường" data-priority="normal": giữ màu xanh khi active */
button[data-priority="normal"].active,
button[data-priority="normal"]:active {
    background-color: var(--ghz-brand-soft-18, rgba(0, 195, 122, 0.18)) !important;
    color: var(--ghz-brand-color, #00c37a) !important;
    border-color: var(--ghz-brand-color, #00c37a) !important;
    box-shadow: 0 0 0 1px var(--ghz-brand-color, #00c37a) !important;
}
/* Text bên trong nút cũng giữ màu */
button[data-priority="normal"].active span,
button[data-priority="normal"].active i {
    color: var(--ghz-brand-color, #00c37a) !important;
}

/* ========== CHIP FILTER STATUS BADGES — MÀU RIÊNG ========== */
.chip-filter-item.active[data-value="Đã duyệt"],
.chip-filter-item.active[data-value="da-duyet"] {
    background: var(--ghz-success-bg, rgba(74, 222, 128, 0.18)) !important;
    border-color: var(--ghz-success, #22c55e) !important;
    color: #4ade80 !important;
}
/* Chip "Đang chờ" */
.chip-filter-item.active[data-value="Chờ duyệt"],
.chip-filter-item.active[data-value="dang-cho"],
.chip-filter-item.active[data-value="cho-duyet"] {
    background: var(--ghz-warning-bg, rgba(251, 191, 36, 0.18)) !important;
    border-color: var(--ghz-warning, #f59e0b) !important;
    color: #fbbf24 !important;
}
/* Chip "Hủy duyệt" / "Từ chối" */
.chip-filter-item.active[data-value="Từ chối"],
.chip-filter-item.active[data-value="huy-duyet"],
.chip-filter-item.active[data-value="tu-choi"] {
    background: var(--ghz-danger-bg, rgba(239, 68, 68, 0.18)) !important;
    border-color: var(--ghz-danger, #ef4444) !important;
    color: #f87171 !important;
}
/* Hover preview cho các chip trạng thái */
.chip-filter-item[data-value="Đã duyệt"]:hover {
    border-color: #22c55e !important;
    color: #4ade80 !important;
}
.chip-filter-item[data-value="Chờ duyệt"]:hover {
    border-color: #f59e0b !important;
    color: #fbbf24 !important;
}
.chip-filter-item[data-value="Từ chối"]:hover {
    border-color: #ef4444 !important;
    color: #f87171 !important;
}

/* --- 7. Mobile tab bar (Tier 4) - override idle để có nền kính --- */
.mobile-tab-bar-glass {
    background: var(--ghz-card-glass-bg) !important;
    backdrop-filter: var(--ghz-glass-4-blur);
    -webkit-backdrop-filter: var(--ghz-glass-4-blur);
    border-top: 1.5px solid var(--ghz-card-glass-border) !important;
    box-shadow:
        0 -8px 20px -8px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}
.mobile-tab-btn-glass {
    background: color-mix(in srgb, white 3%, transparent) !important;
    backdrop-filter: blur(8px) saturate(1.3);
    -webkit-backdrop-filter: blur(8px) saturate(1.3);
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--ghz-text-muted, #374151);
    transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-tab-btn-glass:hover:not(.active) {
    color: var(--ghz-text-primary, #f3f4f6);
    background: color-mix(in srgb, white 8%, transparent) !important;
    border-color: color-mix(in srgb, white 15%, transparent) !important;
}
.mobile-tab-btn-glass.active {
    color: var(--ghz-text-on-brand-strong, #052e16);
    font-weight: 700;
    background: var(--ghz-brand-active-bg, rgba(0,195,122,0.18)) !important;
    backdrop-filter: blur(12px) saturate(1.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    border-color: var(--ghz-brand-active-border, rgba(0,195,122,0.45)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 4px 14px color-mix(in srgb, var(--ghz-brand-active, #00c37a) 25%, transparent);
}

/* ========== NÚT LÀM MỚI INVENTORY TAB — GLASS, NỔI, CÓ ICON XOAY ========== */
button[onclick="refreshInventoryTab()"] {
    background: linear-gradient(135deg, var(--ghz-input-bg, #1a1d23) 0%, color-mix(in srgb, var(--ghz-input-bg, #1a1d23) 70%, var(--ghz-brand-active, #00c37a) 8%) 100%) !important;
    border: 1px solid var(--ghz-border, rgba(255, 255, 255, 0.12)) !important;
    color: var(--ghz-text-primary, #f3f4f6) !important;
    backdrop-filter: blur(12px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.5) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 14px rgba(0, 0, 0, 0.25) !important;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease !important;
}
button[onclick="refreshInventoryTab()"]:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ghz-input-bg, #1a1d23) 80%, var(--ghz-brand-active, #00c37a) 20%) 0%, var(--ghz-input-bg, #1a1d23) 100%) !important;
    border-color: var(--ghz-brand-active, #00c37a) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 0 1px var(--ghz-brand-active, #00c37a),
        0 6px 20px color-mix(in srgb, var(--ghz-brand-active, #00c37a) 25%, transparent) !important;
    transform: translateY(-1px) !important;
}
button[onclick="refreshInventoryTab()"]:active {
    transform: translateY(0) scale(0.98) !important;
}
/* Spin icon khi đang refresh */
button[onclick="refreshInventoryTab()"].is-loading i,
button[onclick="refreshInventoryTab()"] i.spinning {
    animation: ghz-refresh-spin 0.9s linear infinite !important;
}
@keyframes ghz-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Đảm bảo dùng kèm class mobile-tab-bar cũ để giữ layout flex */
.mobile-tab-bar.mobile-tab-bar-glass {
    display: flex;
    padding: 8px 6px;
    justify-content: space-around;
}

/* ========================================
   MARKETING TAB
   ======================================== */
.mkt-subtab-bar {
    display: flex;
    gap: 6px;
    background: var(--ghz-tabbar-bg, var(--ghz-card-bg, rgba(255,255,255,0.04)));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: var(--ghz-card-glass-blur, blur(14px));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(14px));
    box-shadow: var(--ghz-card-glass-shadow, 0 1px 2px rgba(0,0,0,0.04));
    scrollbar-width: none;
}
.mkt-subtab-bar::-webkit-scrollbar { display: none; }
.mkt-subtab {
    flex: 1 1 auto;
    min-width: max-content;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ghz-tabbar-text, #9ca3af);
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.mkt-subtab:hover {
    background: var(--ghz-input-bg, rgba(255,255,255,0.04));
    color: var(--ghz-text-primary, #e5e7eb);
}
.mkt-subtab.active {
    background: var(--ghz-button-bg, #00c37a);
    color: var(--ghz-button-text, #ffffff);
    border-color: transparent;
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ghz-button-bg, #00c37a) 60%, transparent);
}
.mkt-subtab .count-badge {
    background: rgba(255,255,255,0.2);
    color: inherit;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    margin-left: 2px;
}
.mkt-subtab:not(.active) .count-badge {
    background: var(--ghz-input-bg, #14171b);
    color: var(--ghz-text-muted, #6b7280);
}

/* Stat cards */
.mkt-stat-card {
    background: var(--ghz-card-bg, #1a1d23);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 14px;
    padding: 18px 18px 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.mkt-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px var(--ghz-card-shadow, rgba(0,0,0,0.25));
    border-color: var(--ghz-brand-color, #00c37a);
}

/* Glass variant — dùng khi muốn card glass đẹp hơn (chỉ 1 vài chỗ) */
.mkt-stat-card.glass {
    background: var(--ghz-card-glass-bg, var(--ghz-card-bg, #1a1d23));
    backdrop-filter: var(--ghz-card-glass-blur, blur(14px));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(14px));
    border-color: var(--ghz-card-glass-border, var(--ghz-card-border, #2a2e35));
    box-shadow: var(--ghz-card-glass-shadow, 0 1px 2px rgba(0,0,0,0.04));
}

/* Decorative icon-bg (icon lớn mờ phía sau) */
.mkt-stat-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    opacity: 0.92;
}
.mkt-stat-card .mkt-stat-icon i { font-size: 18px; }

/* Stat card màu semantic (theme-aware) */
.mkt-stat-card.sem-success .mkt-stat-icon { background: var(--ghz-success-bg, rgba(34,197,94,0.14)); color: var(--ghz-success, #22c55e); }
.mkt-stat-card.sem-success .mkt-stat-value { color: var(--ghz-success, #22c55e); }
.mkt-stat-card.sem-danger .mkt-stat-icon { background: var(--ghz-danger-bg, rgba(239,68,68,0.14)); color: var(--ghz-danger, #ef4444); }
.mkt-stat-card.sem-danger .mkt-stat-value { color: var(--ghz-danger, #ef4444); }
.mkt-stat-card.sem-warning .mkt-stat-icon { background: var(--ghz-warning-bg, rgba(245,158,11,0.14)); color: var(--ghz-warning, #f59e0b); }
.mkt-stat-card.sem-warning .mkt-stat-value { color: var(--ghz-warning, #f59e0b); }
.mkt-stat-card.sem-info .mkt-stat-icon { background: var(--ghz-info-bg, rgba(59,130,246,0.14)); color: var(--ghz-info, #3b82f6); }
.mkt-stat-card.sem-info .mkt-stat-value { color: var(--ghz-info, #3b82f6); }
.mkt-stat-card.sem-brand .mkt-stat-icon { background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent); color: var(--ghz-brand-color, #00c37a); }
.mkt-stat-card.sem-brand .mkt-stat-value { color: var(--ghz-brand-color, #00c37a); }

/* Tương phản cao cho 5 light theme (màu đậm hơn dark theme để nổi trên nền sáng) */
html[data-theme="classic"] .mkt-stat-card.sem-success .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.sem-success .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.sem-success .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.sem-success .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.sem-success .mkt-stat-value { color: #15803d; }
html[data-theme="classic"] .mkt-stat-card.sem-danger .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.sem-danger .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.sem-danger .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.sem-danger .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.sem-danger .mkt-stat-value { color: #b91c1c; }
html[data-theme="classic"] .mkt-stat-card.sem-warning .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.sem-warning .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.sem-warning .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.sem-warning .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.sem-warning .mkt-stat-value { color: #b45309; }
html[data-theme="classic"] .mkt-stat-card.sem-info .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.sem-info .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.sem-info .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.sem-info .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.sem-info .mkt-stat-value { color: #1d4ed8; }
html[data-theme="classic"] .mkt-stat-card.sem-brand .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.sem-brand .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.sem-brand .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.sem-brand .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.sem-brand .mkt-stat-value { color: #047857; }

/* Legacy accent-* vẫn giữ để không vỡ code cũ */
.mkt-stat-card.accent-blue .mkt-stat-value { color: var(--ghz-info, #3b82f6); }
.mkt-stat-card.accent-green .mkt-stat-value { color: var(--ghz-success, #22c55e); }
.mkt-stat-card.accent-amber .mkt-stat-value { color: #f59e0b; }
.mkt-stat-card.accent-red .mkt-stat-value { color: var(--ghz-danger, #ef4444); }
html[data-theme="classic"] .mkt-stat-card.accent-blue .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.accent-blue .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.accent-blue .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.accent-blue .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.accent-blue .mkt-stat-value { color: #1d4ed8; }
html[data-theme="classic"] .mkt-stat-card.accent-green .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.accent-green .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.accent-green .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.accent-green .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.accent-green .mkt-stat-value { color: #15803d; }
html[data-theme="classic"] .mkt-stat-card.accent-amber .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.accent-amber .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.accent-amber .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.accent-amber .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.accent-amber .mkt-stat-value { color: #b45309; }
html[data-theme="classic"] .mkt-stat-card.accent-red .mkt-stat-value,
html[data-theme="peach-cream"] .mkt-stat-card.accent-red .mkt-stat-value,
html[data-theme="lavender-mist"] .mkt-stat-card.accent-red .mkt-stat-value,
html[data-theme="sky-blue"] .mkt-stat-card.accent-red .mkt-stat-value,
html[data-theme="mint-fresh"] .mkt-stat-card.accent-red .mkt-stat-value { color: #b91c1c; }

/* Label/sub typography */
.mkt-stat-label {
    color: var(--ghz-text-muted, #6b7280);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-right: 50px; /* tránh đè icon-bg */
}
.mkt-stat-label i { margin-right: 4px; }
.mkt-stat-value {
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-top: 8px;
    word-break: break-word;
}
.mkt-stat-sub {
    font-size: 11.5px;
    color: var(--ghz-text-muted, #6b7280);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* Stat trend pill (nếu có so sánh tháng trước) */
.mkt-stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ghz-input-bg, rgba(0,0,0,0.04));
    color: var(--ghz-text-muted, #6b7280);
}
.mkt-stat-trend.up { background: var(--ghz-success-bg, rgba(34,197,94,0.14)); color: var(--ghz-success, #22c55e); }
.mkt-stat-trend.down { background: var(--ghz-danger-bg, rgba(239,68,68,0.14)); color: var(--ghz-danger, #ef4444); }
.mkt-stat-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, 1fr);
}

/* Campaign cards */
.mkt-campaign-card {
    background: var(--ghz-card-bg, #1a1d23);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 14px;
    padding: 16px;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.mkt-campaign-card:hover {
    border-color: var(--ghz-brand-color, #00c37a);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -10px var(--ghz-card-shadow, rgba(0,0,0,0.25));
}
.mkt-campaign-card .mkt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 8px;
    margin-bottom: 8px;
}
.mkt-campaign-card .mkt-card-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--ghz-text-primary, #e5e7eb);
    word-break: break-word;
    line-height: 1.3;
}
.mkt-campaign-card .mkt-progress-block {
    margin-top: 12px;
}
.mkt-campaign-card .mkt-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--ghz-text-muted, #6b7280);
    margin-bottom: 6px;
    font-weight: 600;
}
.mkt-campaign-card .mkt-progress-meta .spent { color: var(--ghz-text-primary, #e5e7eb); }
.mkt-campaign-card .mkt-progress-pct {
    margin-left: auto;
    padding-left: 8px;
    font-weight: 700;
    color: var(--ghz-brand-color, #00c37a);
}
.mkt-campaign-card .mkt-progress-pct.warn { color: var(--ghz-warning, #f59e0b); }
.mkt-campaign-card .mkt-progress-pct.danger { color: var(--ghz-danger, #ef4444); }
.mkt-progress-bar {
    height: 6px;
    background: var(--ghz-input-bg, rgba(255,255,255,0.06));
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.mkt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ghz-grad-1, #00c37a) 0%, var(--ghz-grad-2, #00a85f) 100%);
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(.4,.2,.2,1);
}
.mkt-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    background: var(--ghz-input-bg, rgba(255,255,255,0.06));
    color: var(--ghz-text-muted, #9ca3af);
}
.mkt-channel-badge::before {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-size: 10px;
    opacity: 0.85;
}
/* === Channel variants — moi channel 1 mau rieng === */
/* Dùng CSS variables để tự đổi màu theo theme (sáng/tối). */
.mkt-channel-badge.facebook {
    background: var(--mkt-ch-fb-bg, rgba(24, 119, 242, .15));
    color: var(--mkt-ch-fb-text, #4f8df7);
}
.mkt-channel-badge.instagram {
    background: var(--mkt-ch-ig-bg, rgba(225, 48, 108, .15));
    color: var(--mkt-ch-ig-text, #e1306c);
}
.mkt-channel-badge.tiktok {
    background: var(--mkt-ch-tt-bg, rgba(0, 242, 234, .12));
    color: var(--mkt-ch-tt-text, #5eead4);
    border: 1px solid var(--mkt-ch-tt-border, rgba(0, 242, 234, .35));
}
.mkt-channel-badge.youtube {
    background: var(--mkt-ch-yt-bg, rgba(255, 0, 0, .15));
    color: var(--mkt-ch-yt-text, #ff5b5b);
}
.mkt-channel-badge.website {
    background: var(--mkt-ch-web-bg, rgba(107, 114, 128, .2));
    color: var(--mkt-ch-web-text, #9ca3af);
}
.mkt-channel-badge.zalo {
    background: var(--mkt-ch-zalo-bg, rgba(0, 104, 255, .15));
    color: var(--mkt-ch-zalo-text, #4a90ff);
}

/* === Light-theme overrides — mau dam, nen nhat, tuong phan cao === */
html[data-theme="classic"] .mkt-channel-badge,
html[data-theme="peach-cream"] .mkt-channel-badge,
html[data-theme="lavender-mist"] .mkt-channel-badge,
html[data-theme="sky-blue"] .mkt-channel-badge,
html[data-theme="mint-fresh"] .mkt-channel-badge {
    border: 1px solid transparent;
}
html[data-theme="classic"] .mkt-channel-badge.facebook,
html[data-theme="peach-cream"] .mkt-channel-badge.facebook,
html[data-theme="lavender-mist"] .mkt-channel-badge.facebook,
html[data-theme="sky-blue"] .mkt-channel-badge.facebook,
html[data-theme="mint-fresh"] .mkt-channel-badge.facebook {
    --mkt-ch-fb-bg: #dbeafe;
    --mkt-ch-fb-text: #1d4ed8;
}
html[data-theme="classic"] .mkt-channel-badge.instagram,
html[data-theme="peach-cream"] .mkt-channel-badge.instagram,
html[data-theme="lavender-mist"] .mkt-channel-badge.instagram,
html[data-theme="sky-blue"] .mkt-channel-badge.instagram,
html[data-theme="mint-fresh"] .mkt-channel-badge.instagram {
    --mkt-ch-ig-bg: #fce7f3;
    --mkt-ch-ig-text: #be185d;
}
html[data-theme="classic"] .mkt-channel-badge.tiktok,
html[data-theme="peach-cream"] .mkt-channel-badge.tiktok,
html[data-theme="lavender-mist"] .mkt-channel-badge.tiktok,
html[data-theme="sky-blue"] .mkt-channel-badge.tiktok,
html[data-theme="mint-fresh"] .mkt-channel-badge.tiktok {
    --mkt-ch-tt-bg: #ccfbf1;
    --mkt-ch-tt-text: #0f766e;
    --mkt-ch-tt-border: #5eead4;
}
html[data-theme="classic"] .mkt-channel-badge.youtube,
html[data-theme="peach-cream"] .mkt-channel-badge.youtube,
html[data-theme="lavender-mist"] .mkt-channel-badge.youtube,
html[data-theme="sky-blue"] .mkt-channel-badge.youtube,
html[data-theme="mint-fresh"] .mkt-channel-badge.youtube {
    --mkt-ch-yt-bg: #fee2e2;
    --mkt-ch-yt-text: #b91c1c;
}
html[data-theme="classic"] .mkt-channel-badge.website,
html[data-theme="peach-cream"] .mkt-channel-badge.website,
html[data-theme="lavender-mist"] .mkt-channel-badge.website,
html[data-theme="sky-blue"] .mkt-channel-badge.website,
html[data-theme="mint-fresh"] .mkt-channel-badge.website {
    --mkt-ch-web-bg: #f3f4f6;
    --mkt-ch-web-text: #4b5563;
}
html[data-theme="classic"] .mkt-channel-badge.zalo,
html[data-theme="peach-cream"] .mkt-channel-badge.zalo,
html[data-theme="lavender-mist"] .mkt-channel-badge.zalo,
html[data-theme="sky-blue"] .mkt-channel-badge.zalo,
html[data-theme="mint-fresh"] .mkt-channel-badge.zalo {
    --mkt-ch-zalo-bg: #dbeafe;
    --mkt-ch-zalo-text: #1e40af;
}

/* Auto light mode khi user chua chon theme cu the */
@media (prefers-color-scheme: light) {
    html:not([data-theme]) .mkt-channel-badge.facebook {
        --mkt-ch-fb-bg: #dbeafe;
        --mkt-ch-fb-text: #1d4ed8;
    }
    html:not([data-theme]) .mkt-channel-badge.instagram {
        --mkt-ch-ig-bg: #fce7f3;
        --mkt-ch-ig-text: #be185d;
    }
    html:not([data-theme]) .mkt-channel-badge.tiktok {
        --mkt-ch-tt-bg: #ccfbf1;
        --mkt-ch-tt-text: #0f766e;
        --mkt-ch-tt-border: #5eead4;
    }
    html:not([data-theme]) .mkt-channel-badge.youtube {
        --mkt-ch-yt-bg: #fee2e2;
        --mkt-ch-yt-text: #b91c1c;
    }
    html:not([data-theme]) .mkt-channel-badge.website {
        --mkt-ch-web-bg: #f3f4f6;
        --mkt-ch-web-text: #4b5563;
    }
    html:not([data-theme]) .mkt-channel-badge.zalo {
        --mkt-ch-zalo-bg: #dbeafe;
        --mkt-ch-zalo-text: #1e40af;
    }
}
.mkt-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.mkt-status-badge.active, .mkt-status-badge.scheduled, .mkt-status-badge.posted, .mkt-status-badge.won {
    background: var(--ghz-success-bg, rgba(34,197,94,0.14));
    color: var(--ghz-success, #22c55e);
}
.mkt-status-badge.paused, .mkt-status-badge.draft, .mkt-status-badge.contacting {
    background: var(--ghz-warning-bg, rgba(245,158,11,0.14));
    color: var(--ghz-warning, #f59e0b);
}
.mkt-status-badge.ended, .mkt-status-badge.cancelled, .mkt-status-badge.lost {
    background: var(--ghz-input-bg, rgba(107,114,128,0.18));
    color: var(--ghz-text-muted, #9ca3af);
}
.mkt-status-badge.new, .mkt-status-badge.qualified {
    background: var(--ghz-info-bg, rgba(59,130,246,0.14));
    color: var(--ghz-info, #3b82f6);
}

/* Calendar */
.mkt-calendar-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    table-layout: fixed; /* Quan trọng: fix độ rộng cột, không cho items dài phá layout */
}
.mkt-calendar-table th,
.mkt-calendar-table td {
    width: calc(100% / 7);
    min-width: 0; /* để ellipsis hoạt động trong td flex */
    padding: 0;
    vertical-align: top;
}
.mkt-calendar-day {
    min-height: 92px;
    max-height: 160px; /* chặn chiều cao để cột không dài bất thường khi có quá nhiều item */
    padding: 4px 6px 6px;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 8px;
    background: var(--ghz-card-bg, #1a1d23);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* chặn tràn ra ngoài ô */
    box-sizing: border-box;
}
.mkt-calendar-day:hover { background: var(--ghz-input-bg, #14171b); }
.mkt-calendar-day.today { border-color: var(--ghz-brand-color, #00c37a); }
.mkt-calendar-day.other-month { opacity: 0.4; pointer-events: none; }
.mkt-calendar-day:hover { border-color: var(--ghz-brand-color, #00c37a); }

.mkt-calendar-day-header {
    font-weight: 700;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    flex-shrink: 0; /* header luôn hiển thị */
}
.mkt-day-plus {
    opacity: 0;
    color: var(--ghz-brand-color, #00c37a);
    font-size: 9px;
    padding: 2px 4px;
    border-radius: 4px;
    transition: opacity .15s, background-color .15s;
    line-height: 1;
}
.mkt-calendar-day:hover .mkt-day-plus { opacity: 1; }
.mkt-day-plus:hover { background: rgba(0, 195, 122, .15); }

.mkt-calendar-day-content {
    font-size: 10px;
    line-height: 1.4;
    color: var(--ghz-text-primary, #e5e7eb);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0; /* cho phép flex item thu nhỏ + ellipsis */
    overflow: hidden;
}
.mkt-calendar-day-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    background: var(--ghz-input-bg, #14171b);
    border-radius: 4px;
    min-width: 0; /* bắt buộc để text-overflow ellipsis hoạt động trong flex */
    overflow: hidden;
}
.mkt-calendar-day-item-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 10px;
}
.mkt-calendar-day-item .mkt-channel-badge {
    flex-shrink: 0; /* badge không bị nén */
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: .03em;
    min-width: 26px;     /* giong nhau cho moi channel */
    justify-content: center;
    text-transform: lowercase;
}
.mkt-calendar-day-more {
    font-size: 9px;
    color: var(--ghz-text-muted, #9ca3af);
    margin-top: 2px;
    flex-shrink: 0;
}
.mkt-calendar-filter-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}

/* Leads table */
.mkt-leads-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--ghz-card-bg, transparent);
    border-radius: 12px;
    overflow: hidden;
}
.mkt-leads-table th {
    text-align: left;
    padding: 12px 14px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ghz-text-muted, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
    background: var(--ghz-input-bg, rgba(255,255,255,0.03));
}
.mkt-leads-table td {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ghz-text-primary, #e5e7eb);
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.06));
}
.mkt-leads-table tr:last-child td { border-bottom: none; }
.mkt-leads-table tr:hover td { background: var(--ghz-input-bg, rgba(255,255,255,0.04)); }

/* Số tiền trong table - tabular numbers, căn phải */
.mkt-leads-table td.mkt-num,
.mkt-leads-table td.mkt-money {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-weight: 600;
}

/* KPI */
.mkt-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
.mkt-ranking-list { list-style: none; padding: 0; margin: 0; }
.mkt-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
}
.mkt-ranking-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--ghz-input-bg, #14171b);
    color: var(--ghz-text-muted, #6b7280);
}
.mkt-ranking-item:first-child .mkt-ranking-rank {
    background: #fbbf24;
    color: #fff;
}

/* Image card fallback (gradient) */
.image-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-radius: 8px;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image-card::after {
    content: '📷';
    font-size: 24px;
    opacity: 0.3;
}
.mkt-media-thumb,
.mkt-media-placeholder {
    display: block;
    width: 48px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
}
.mkt-media-placeholder {
    height: 36px;
}

/* === Responsive === */
@media (max-width: 900px) {
    .mkt-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .mkt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* === Merged Budgets & Campaigns (gop Chiến dịch + Chi phí Ads) === */

/* Progress fill warn/danger variants (theme-aware từ semantic) */
.mkt-progress-fill.warn {
    background: linear-gradient(90deg, var(--ghz-warning, #f59e0b) 0%, color-mix(in srgb, var(--ghz-warning, #f59e0b) 65%, white) 100%);
}
.mkt-progress-fill.danger {
    background: linear-gradient(90deg, var(--ghz-danger, #ef4444) 0%, color-mix(in srgb, var(--ghz-danger, #ef4444) 65%, white) 100%);
}
.mkt-progress-fill.success {
    background: linear-gradient(90deg, var(--ghz-success, #22c55e) 0%, color-mix(in srgb, var(--ghz-success, #22c55e) 65%, white) 100%);
}

/* Channel chip riêng cho Ads section (banner compact) */
.mkt-channel-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
}

/* Section collapsible (chỉ toggle trên mobile qua class trong JS) */
.ui-section-title.collapsible { cursor: default; }

/* ============== SKELETON + ERROR STATE ============== */
.mkt-skeleton {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: mktFadeIn 0.2s ease-out;
}
.mkt-skeleton-head {
    display: flex;
    align-items: center;
    padding: 4px 0;
}
.mkt-skeleton .skeleton {
    background: linear-gradient(
        90deg,
        var(--ghz-input-bg, rgba(255,255,255,0.04)) 0%,
        color-mix(in srgb, var(--ghz-input-bg, rgba(255,255,255,0.04)) 50%, var(--ghz-card-border, rgba(255,255,255,0.12))) 50%,
        var(--ghz-input-bg, rgba(255,255,255,0.04)) 100%
    );
    background-size: 200% 100%;
    animation: mkt-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    display: block;
}
.mkt-skeleton .skeleton-text {
    height: 12px;
    border-radius: 4px;
}
@keyframes mkt-skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes mktFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mkt-skeleton .skeleton {
        animation: none;
        opacity: 0.6;
    }
}

.mkt-error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 16px;
    gap: 8px;
    background: var(--ghz-danger-bg, rgba(239,68,68,0.06));
    border: 1px dashed color-mix(in srgb, var(--ghz-danger, #ef4444) 35%, transparent);
    border-radius: 14px;
}
.mkt-error-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ghz-danger-bg, rgba(239,68,68,0.14));
    color: var(--ghz-danger, #ef4444);
    font-size: 24px;
    margin-bottom: 4px;
}
.mkt-error-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ghz-text-primary, #e5e7eb);
}
.mkt-error-desc {
    font-size: 13px;
    color: var(--ghz-text-muted, #6b7280);
    max-width: 380px;
    margin-bottom: 8px;
    line-height: 1.5;
}
.mkt-error-state .ui-btn-primary {
    background: var(--ghz-danger, #ef4444);
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ghz-danger, #ef4444) 50%, transparent);
}
.mkt-error-state .ui-btn-primary:hover {
    background: color-mix(in srgb, var(--ghz-danger, #ef4444) 85%, #000);
}

/* ============== MOBILE TOUCH IMPROVEMENTS ============== */
@media (max-width: 768px) {
    .ui-btn-primary,
    .ui-btn-ghost,
    .ui-btn-secondary {
        min-height: 44px;
    }
    .mkt-subtab { min-height: 40px; }
    .mkt-channel-badge { padding: 4px 10px; }
    .mkt-status-badge { padding: 4px 10px; }
}
@media (max-width: 480px) {
    .ui-btn-primary,
    .ui-btn-ghost { padding: 10px 14px; font-size: 13.5px; }
}

/* ============== SIDEBAR COLLAPSE (slide ngang) ============== */
/* Class utility: dùng cho sidebar/drawer bất kỳ — width: 0 → 280px (hoặc --sidebar-w) */
.app-sidebar,
.ui-sidebar {
    --sidebar-w: 280px;
    --sidebar-collapsed-w: 64px;
    width: var(--sidebar-w);
    flex-shrink: 0;
    transition:
        width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    will-change: width, transform;
}

/* Collapsed: thu lại còn 64px (icon-only) */
.app-sidebar.is-collapsed,
.ui-sidebar.is-collapsed {
    width: var(--sidebar-collapsed-w);
}

/* Slide-out sang trái (ẩn khỏi viewport — drawer style) */
.app-sidebar.is-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    transform: translateX(0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.app-sidebar.is-drawer.is-collapsed {
    width: var(--sidebar-w);              /* giữ nguyên width khi slide */
    transform: translateX(-100%);         /* nhưng đẩy khỏi viewport */
}
/* Overlay khi drawer mở */
.app-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 55;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.app-sidebar-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* Sidebar content ẩn khi collapsed */
.app-sidebar .ui-sidebar-label,
.app-sidebar .ui-sidebar-text,
.ui-sidebar .ui-sidebar-label,
.ui-sidebar .ui-sidebar-text {
    opacity: 1;
    transition: opacity 0.18s ease;
    white-space: nowrap;
}
.app-sidebar.is-collapsed .ui-sidebar-label,
.app-sidebar.is-collapsed .ui-sidebar-text,
.ui-sidebar.is-collapsed .ui-sidebar-label,
.ui-sidebar.is-collapsed .ui-sidebar-text {
    opacity: 0;
    pointer-events: none;
}
.app-sidebar.is-collapsed .ui-sidebar-icon,
.ui-sidebar.is-collapsed .ui-sidebar-icon {
    transform: scale(1.1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-sidebar, .ui-sidebar {
        transition: width 0.15s linear, transform 0.15s linear;
    }
}

/* ============== TAB CONTENT SLIDE HORIZONTAL ============== */
/* Class cho tab content - dùng khi switch tab giữa các panel */
.tab-panel {
    display: none;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.22s ease-out, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-panel.is-active {
    display: block;
    opacity: 1;
    transform: translateX(0);
}

/* Variant: slide ngược (prev tab) */
.tab-panel.tab-slide-enter-left {
    transform: translateX(-12px);
}
.tab-panel.tab-slide-enter-right {
    transform: translateX(12px);
}

/* ============== DISCLOSURE SUMMARY (form add/edit collapsible) ============== */
/* Hợp nhất summary vào .card: bỏ nền/viền/shadow/blur/margin-bottom riêng.
   Chỉ giữ padding + bo góc trên để summary nằm liền mạch trong card.
   Dùng !important để thắng .ui-disclosure-summary trong app.min.css (load trước). */
.ui-disclosure-summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    width: 100% !important;
    padding: 16px 24px !important;
    color: var(--ghz-text-primary, #fff) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    /* Chỉ bo 4 góc trên để khớp với border-radius của .card cha */
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: color 0.15s ease !important;
    margin: 0 !important;
}
/* Hover chỉ đổi màu chữ - không đổi nền/viền/shadow */
.ui-disclosure-summary:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--ghz-brand-color, #00c37a) !important;
}
.ui-disclosure-summary:active { transform: scale(0.998); }

/* Chevron mặc định của disclosure summary — đổi thành caret pill đồng bộ collapsible */
.ui-disclosure-summary > .ui-disclosure-chevron,
.ui-disclosure-summary > .fa-chevron-down,
.ui-disclosure-summary > .fa-chevron-up,
.ui-disclosure-summary > .fa-chevron-right,
.ui-disclosure-summary > i[class*="chevron"],
.ui-disclosure-summary > span > i[class*="chevron"] {
    flex-shrink: 0;
    color: var(--ghz-text-muted, #9ca3af);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s;
}
.ui-disclosure-summary:hover > i[class*="chevron"],
.ui-disclosure-summary:hover > .ui-disclosure-chevron,
.ui-disclosure-summary:hover > span > i[class*="chevron"] {
    color: var(--ghz-brand-color, #00c37a);
}
.ui-disclosure-summary[aria-expanded="true"] > i[class*="chevron"],
.ui-disclosure-summary[aria-expanded="true"] > .ui-disclosure-chevron,
.ui-disclosure-summary[aria-expanded="true"] > span > i[class*="chevron"] {
    transform: rotate(180deg);
}

/* Khi summary nằm trong .card: đảm bảo các góc bo của summary
   không tràn ra ngoài border-radius của card cha */
details.card { overflow: hidden; }
/* Khi body mở ra, bỏ overflow để dropdown/select/tooltip trong body không bị cắt */
details.card[open] { overflow: visible; }
/* Bỏ border-top ngăn cách giữa summary và body để hợp nhất liền mạch.
   Áp dụng cho các div ngay sau summary trong details.card có class border-t. */
details.card > summary + div.border-t { border-top: 0 !important; margin-top: 0 !important; padding-top: 4px !important; }

/* Light theme: giữ trong suốt, không áp nền/viền riêng */
html[data-theme="classic"] .ui-disclosure-summary,
html[data-theme="peach-cream"] .ui-disclosure-summary,
html[data-theme="lavender-mist"] .ui-disclosure-summary,
html[data-theme="sky-blue"] .ui-disclosure-summary,
html[data-theme="mint-fresh"] .ui-disclosure-summary {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Mobile: padding nhỏ hơn */
@media (max-width: 768px) {
    .ui-disclosure-summary { padding: 14px 16px !important; font-size: 14px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ui-disclosure-summary, .ui-disclosure-summary * {
        transition-duration: 0.01ms !important;
    }
}

/* ============== NATIVE <details>/<summary> DISCLOSURE ============== */
/* Áp dụng style đồng bộ cho mọi <details> dạng collapsible form/card */
details.ui-disclosure,
details[data-disclosure="card"],
details.disclosure-card {
    background: var(--ghz-card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    margin: 12px 0;
    overflow: hidden;
    box-shadow: var(--ghz-card-glass-shadow, 0 1px 2px rgba(0,0,0,0.04));
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
details.ui-disclosure > summary,
details[data-disclosure="card"] > summary,
details.disclosure-card > summary {
    list-style: none;            /* ẩn caret mặc định */
    cursor: pointer;
    user-select: none;
    padding: 12px 14px;
    font-weight: 700;
    font-size: 15px;
    color: var(--ghz-text-primary, #fff);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.15s, color 0.15s;
    border-radius: 12px 12px 0 0;
}
details.ui-disclosure > summary::-webkit-details-marker,
details[data-disclosure="card"] > summary::-webkit-details-marker,
details.disclosure-card > summary::-webkit-details-marker {
    display: none;
}
details.ui-disclosure > summary:hover,
details[data-disclosure="card"] > summary:hover,
details.disclosure-card > summary:hover {
    background: var(--ghz-card-bg, rgba(255,255,255,0.06));
    color: var(--ghz-brand-color, #00c37a);
}
details.ui-disclosure > summary:active,
details[data-disclosure="card"] > summary:active,
details.disclosure-card > summary:active {
    transform: scale(0.998);
}

/* Caret pill tự động thêm vào summary */
details.ui-disclosure > summary::after,
details[data-disclosure="card"] > summary::after,
details.disclosure-card > summary::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 12px;
    padding: 6px 9px;
    border-radius: 8px;
    background: var(--ghz-input-bg, rgba(0,0,0,0.06));
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s,
                color 0.15s;
    flex-shrink: 0;
}
details.ui-disclosure > summary:hover::after,
details[data-disclosure="card"] > summary:hover::after,
details.disclosure-card > summary:hover::after {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent);
    color: var(--ghz-brand-color, #00c37a);
}
details.ui-disclosure[open] > summary::after,
details[data-disclosure="card"][open] > summary::after,
details.disclosure-card[open] > summary::after {
    transform: rotate(180deg);
}

/* Body của disclosure */
details.ui-disclosure > .disclosure-body,
details[data-disclosure="card"] > .disclosure-body,
details.disclosure-card > .disclosure-body,
details.ui-disclosure > *:not(summary),
details[data-disclosure="card"] > *:not(summary),
details.disclosure-card > *:not(summary) {
    padding: 14px;
    border-top: 1px solid var(--ghz-card-border, rgba(255,255,255,0.06));
    animation: disclosureEnter 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Light theme */
html[data-theme="classic"] details.ui-disclosure,
html[data-theme="peach-cream"] details.ui-disclosure,
html[data-theme="lavender-mist"] details.ui-disclosure,
html[data-theme="sky-blue"] details.ui-disclosure,
html[data-theme="mint-fresh"] details.ui-disclosure {
    background: white;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Mobile */
@media (max-width: 768px) {
    details.ui-disclosure > summary,
    details[data-disclosure="card"] > summary,
    details.disclosure-card > summary {
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    details.ui-disclosure > .disclosure-body,
    details[data-disclosure="card"] > .disclosure-body,
    details.disclosure-card > .disclosure-body,
    details.ui-disclosure > *:not(summary),
    details[data-disclosure="card"] > *:not(summary),
    details.disclosure-card > *:not(summary) {
        animation: none;
    }
}

/* ============== PAGE HEADER PILL (đồng bộ theme web chính) ============== */
.ui-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.ui-page-header .ui-page-header-text { flex: 1 1 auto; min-width: 0; }
.ui-page-header .ui-page-header-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent);
    color: var(--ghz-brand-color, #00c37a);
    margin-bottom: 8px;
    line-height: 1;
}
.ui-page-title {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ghz-text-primary, #ffffff);
    margin: 0;
}
.ui-page-copy {
    max-width: 48rem;
    margin-top: 4px;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Light theme overrides cho eyebrow + page-title + page-copy */
html[data-theme="classic"] .ui-page-title,
html[data-theme="peach-cream"] .ui-page-title,
html[data-theme="lavender-mist"] .ui-page-title,
html[data-theme="sky-blue"] .ui-page-title,
html[data-theme="mint-fresh"] .ui-page-title { color: #111827; }
html[data-theme="classic"] .ui-page-copy,
html[data-theme="peach-cream"] .ui-page-copy,
html[data-theme="lavender-mist"] .ui-page-copy,
html[data-theme="sky-blue"] .ui-page-copy,
html[data-theme="mint-fresh"] .ui-page-copy { color: #4b5563; }
html[data-theme="classic"] .ui-page-eyebrow,
html[data-theme="peach-cream"] .ui-page-eyebrow,
html[data-theme="lavender-mist"] .ui-page-eyebrow,
html[data-theme="sky-blue"] .ui-page-eyebrow,
html[data-theme="mint-fresh"] .ui-page-eyebrow {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 18%, transparent);
}

/* Page header meta pill (số liệu tổng bên phải title) */
.ui-page-header-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent);
    color: var(--ghz-brand-color, #00c37a);
    border: 1px solid color-mix(in srgb, var(--ghz-brand-color, #00c37a) 30%, transparent);
}
.ui-page-header-meta i { font-size: 12px; }
.ui-page-header-meta.error {
    background: var(--ghz-danger-bg, rgba(239,68,68,0.14));
    color: var(--ghz-danger, #ef4444);
    border-color: color-mix(in srgb, var(--ghz-danger, #ef4444) 30%, transparent);
}
.ui-page-header-meta.success {
    background: var(--ghz-success-bg, rgba(34,197,94,0.14));
    color: var(--ghz-success, #22c55e);
    border-color: color-mix(in srgb, var(--ghz-success, #22c55e) 30%, transparent);
}
html[data-theme="classic"] .ui-page-header-meta,
html[data-theme="peach-cream"] .ui-page-header-meta,
html[data-theme="lavender-mist"] .ui-page-header-meta,
html[data-theme="sky-blue"] .ui-page-header-meta,
html[data-theme="mint-fresh"] .ui-page-header-meta {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 18%, transparent);
}

/* ============== TOAST STYLE (overrides đẹp hơn) ============== */
.toast { font-family: inherit; }

/* ============== TOOLBAR GLASS ============== */
.mkt-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--ghz-card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 16px;
}
.mkt-toolbar .mkt-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.mkt-toolbar .mkt-toolbar-meta {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ghz-text-muted, #6b7280);
    padding: 6px 12px;
    background: var(--ghz-input-bg, rgba(0,0,0,0.04));
    border-radius: 999px;
}
.mkt-toolbar .mkt-toolbar-meta i {
    color: var(--ghz-brand-color, #00c37a);
}
.mkt-toolbar .mkt-toolbar-meta span {
    color: var(--ghz-text-muted, #9ca3af);
    font-weight: 600;
}

/* Toolbar row (1 hàng cho lịch prev/next) */
.mkt-toolbar .mkt-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}
.mkt-toolbar .mkt-calendar-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ghz-text-primary, #e5e7eb);
}
.mkt-toolbar .mkt-toolbar-row .ui-btn-ghost {
    flex: 0 0 auto;
    min-width: 110px;
    justify-content: center;
}
.mkt-toolbar .ui-btn-primary,
.mkt-toolbar .ui-btn-secondary {
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 10px;
}

/* Nút ghost (secondary nhẹ, không viền) */
.ui-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 14px;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    background: transparent;
    color: var(--ghz-text-primary, #e5e7eb);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ui-btn-ghost:hover {
    background: var(--ghz-input-bg, rgba(255,255,255,0.04));
    border-color: var(--ghz-brand-color, #00c37a);
    color: var(--ghz-brand-color, #00c37a);
}
.ui-btn-ghost i { font-size: 12px; }

/* ===================================================================
   MODAL MARKETING — Helpers dùng chung để đồng bộ với confirm-action-modal
   =================================================================== */

/* Card bao modal (giống confirm-action-modal: card p-6 w-full max-w-md shadow-2xl) */
.mkt-modal-card {
    width: 100%;
    max-width: 28rem; /* 448px */
    background: var(--ghz-card-bg, #1f2329);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
}

/* Modifier: rộng hơn (~672px) cho modal có nhiều thông tin */
.mkt-modal-card.mkt-modal-wide {
    max-width: 42rem; /* 672px */
}

/* Modifier: vừa (~576px) */
.mkt-modal-card.mkt-modal-medium {
    max-width: 36rem; /* 576px */
}

/* Header của modal */
.mkt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--ghz-card-border, #2a2e35);
    flex-shrink: 0;
}

/* Body của modal */
.mkt-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Footer của modal (nút Huỷ + Lưu/Xoá) */
.mkt-modal-footer {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--ghz-card-border, #2a2e35);
    flex-shrink: 0;
}

/* Nút primary xanh dùng trong modal (giống confirm-action-submit nhưng màu xanh) */
.mkt-modal-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--ghz-brand-color, #00c37a);
    color: #fff;
    border: 1px solid var(--ghz-brand-color, #00c37a);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mkt-modal-btn-primary:hover {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 85%, #000);
    border-color: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 85%, #000);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ghz-brand-color, #00c37a) 28%, transparent);
}
.mkt-modal-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Nút ghost (Huỷ) trong modal — giống confirm-action-modal Huỷ */
.mkt-modal-btn-ghost {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--ghz-input-bg, rgba(255,255,255,0.04));
    color: var(--ghz-text-secondary, #d1d5db);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.mkt-modal-btn-ghost:hover {
    background: var(--ghz-card-border, #2a2e35);
    border-color: var(--ghz-brand-color, #00c37a);
    color: var(--ghz-text-primary, #e5e7eb);
}

/* Nút danger (Xoá) trong modal — viền đỏ */
.mkt-modal-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, .12);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, .3);
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.mkt-modal-btn-danger:hover {
    background: #ef4444;
    color: #fff;
}

/* Input/select/textarea trong modal — đồng bộ style */
.mkt-input {
    width: 100%;
    background: var(--ghz-input-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--ghz-text-primary, #e5e7eb);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-size: 14px;
    font-family: inherit;
}
.mkt-input:focus {
    border-color: var(--ghz-brand-color, #00c37a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ghz-brand-color, #00c37a) 22%, transparent);
}
.mkt-input::placeholder {
    color: var(--ghz-text-muted, #6b7280);
}

/* Label trong modal */
.mkt-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ghz-text-primary, #1f2937);
    margin-bottom: 6px;
}
.mkt-field-label i { color: var(--ghz-brand-active, #047857); margin-right: 4px; }
.mkt-field-label .required { color: #f87171; margin-left: 2px; }

/* Mobile responsive */
@media (max-width: 640px) {
    .mkt-modal-card {
        max-width: 100% !important;
        max-height: 95vh;
        border-radius: 12px 12px 0 0;
    }
    .mkt-modal-card.mkt-modal-wide { max-width: 100% !important; }
    .mkt-modal-card.mkt-modal-medium { max-width: 100% !important; }
    .mkt-modal-header { padding: 12px 16px; }
    .mkt-modal-body { padding: 16px; }
    .mkt-modal-footer { padding: 12px 16px; flex-wrap: wrap; }
}

/* Toolbar helpers (legacy vẫn hoạt động) */
.mkt-filter-spacer { flex: 1; min-width: 12px; }
.mkt-filter-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ghz-input-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ghz-text-primary, #e5e7eb);
}
html[data-theme="classic"] .mkt-filter-group,
html[data-theme="peach-cream"] .mkt-filter-group,
html[data-theme="lavender-mist"] .mkt-filter-group,
html[data-theme="sky-blue"] .mkt-filter-group,
html[data-theme="mint-fresh"] .mkt-filter-group {
    --ghz-input-bg: #ffffff;
    --ghz-card-border: #e5e7eb;
    --ghz-text-primary: #111827;
}

/* ============== SECTION TITLE với icon-circle pill ============== */
.ui-section-title.with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0 0;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--ghz-text-primary);
    flex-wrap: wrap;
    line-height: 1.3;
    background: var(--ghz-card-glass-bg, var(--ghz-card-bg, rgba(255,255,255,0.04)));
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    backdrop-filter: var(--ghz-card-glass-blur, blur(8px));
    -webkit-backdrop-filter: var(--ghz-card-glass-blur, blur(8px));
    box-shadow: var(--ghz-card-glass-shadow, 0 1px 2px rgba(0,0,0,0.04));
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Light theme: header card nền trắng + border xám + shadow mờ */
html[data-theme="classic"] .ui-section-title.with-icon,
html[data-theme="peach-cream"] .ui-section-title.with-icon,
html[data-theme="lavender-mist"] .ui-section-title.with-icon,
html[data-theme="sky-blue"] .ui-section-title.with-icon,
html[data-theme="mint-fresh"] .ui-section-title.with-icon {
    background: white;
    border-color: #e5e7eb;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ui-section-title .mkt-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ghz-input-bg, rgba(255,255,255,0.06));
    color: var(--ghz-text-primary, #e5e7eb);
    font-size: 14px;
    flex-shrink: 0;
}
.ui-section-title .mkt-section-icon.brand {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent);
    color: var(--ghz-brand-color, #00c37a);
}
.ui-section-title .mkt-section-icon.info {
    background: var(--ghz-info-bg, rgba(59,130,246,0.14));
    color: var(--ghz-info, #3b82f6);
}
.ui-section-title .mkt-section-icon.success {
    background: var(--ghz-success-bg, rgba(34,197,94,0.14));
    color: var(--ghz-success, #22c55e);
}
.ui-section-title .mkt-section-count {
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: var(--ghz-input-bg, rgba(255,255,255,0.06));
    color: var(--ghz-text-muted, #6b7280);
    flex-shrink: 0;
}
.ui-section-title .mkt-section-count.brand {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 18%, transparent);
    color: var(--ghz-brand-color, #00c37a);
}

/* ============== COLLAPSIBLE SECTION HEADER (clickable card) ============== */
/* Desktop: luôn là card có khung rõ + caret pill */
.ui-section-title.collapsible {
    cursor: pointer;
    user-select: none;
    position: relative;
    margin-bottom: 12px;
    padding-right: 12px;
}
.ui-section-title.collapsible:hover {
    border-color: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 40%, var(--ghz-card-border, transparent));
    box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--ghz-brand-color, #00c37a) 20%, transparent);
}
.ui-section-title.collapsible:active {
    transform: scale(0.998);
}
.ui-section-title.collapsible::after {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: auto;
    color: var(--ghz-text-muted, #9ca3af);
    font-size: 12px;
    padding: 6px 9px;
    border-radius: 8px;
    transition: transform 0.2s, background-color 0.15s, color 0.15s;
    flex-shrink: 0;
    background: var(--ghz-input-bg, rgba(0,0,0,0.06));
}
.ui-section-title.collapsible:hover::after {
    background: color-mix(in srgb, var(--ghz-brand-color, #00c37a) 14%, transparent);
    color: var(--ghz-brand-color, #00c37a);
}
.ui-section-title.collapsible.collapsed::after {
    content: "\f078";
    transform: rotate(0deg);
}
.ui-section-title.collapsible.collapsed::after {
    content: "\f078";
    transform: rotate(0deg);
}
/* Legacy: vẫn support class .collapsed (do code cũ) bằng cách collapse body luôn */
.ui-section-title.collapsible.collapsed + .mkt-section-body {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Light theme: caret dùng border thay vì background mờ */
html[data-theme="classic"] .ui-section-title.collapsible::after,
html[data-theme="peach-cream"] .ui-section-title.collapsible::after,
html[data-theme="lavender-mist"] .ui-section-title.collapsible::after,
html[data-theme="sky-blue"] .ui-section-title.collapsible::after,
html[data-theme="mint-fresh"] .ui-section-title.collapsible::after {
    background: #f3f4f6;
    color: #4b5563;
}
html[data-theme="classic"] .ui-section-title.collapsible:hover::after,
html[data-theme="peach-cream"] .ui-section-title.collapsible:hover::after,
html[data-theme="lavender-mist"] .ui-section-title.collapsible:hover::after,
html[data-theme="sky-blue"] .ui-section-title.collapsible:hover::after,
html[data-theme="mint-fresh"] .ui-section-title.collapsible:hover::after {
    background: #d1fae5;
    color: #047857;
}

/* Section body: khoảng cách với header card + animation mượt */
.mkt-section-body {
    margin-top: 12px;
    overflow: hidden;
    max-height: 5000px;       /* đủ lớn cho mọi nội dung */
    opacity: 1;
    transform: translateY(0);
    transition:
        max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, opacity, transform;
}
.mkt-section-body:empty { display: none; }

/* Collapsed state */
.mkt-collapsed .mkt-section-body {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: 0;
    pointer-events: none;
}

/* Caret transition khi toggle */
.ui-section-title.collapsible::after {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.15s,
                color 0.15s;
}
.ui-section-title.collapsible.mkt-collapsed::after {
    content: "\f078";
    transform: rotate(0deg);
}

/* Caret bounce nhẹ khi click */
.ui-section-title.collapsible:active::after {
    transform: scale(0.85);
    transition-duration: 0.08s;
}

/* Mobile: animation ngắn hơn để phản hồi nhanh */
@media (max-width: 768px) {
    .mkt-section-body {
        transition:
            max-height 0.26s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.26s cubic-bezier(0.4, 0, 0.2, 1),
            margin-top 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mkt-section-body {
        transition: opacity 0.15s ease-out;
        max-height: none;
    }
    .mkt-collapsed .mkt-section-body {
        max-height: 0;
        opacity: 0;
    }
}

/* Horizontal scroll cho channel cards & table trên mobile */
@media (max-width: 768px) {
    .mkt-channel-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -12px;
        padding: 0 12px;
    }
    .mkt-channel-scroll-inner {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 65%;
        gap: 10px;
        padding-bottom: 8px;
    }
    .mkt-table-scroll {
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        margin: 0;
        padding: 0;
    }
    .mkt-table-scroll .mkt-leads-table { display: none; }
}

/* Mobile stat: ẩn stat thứ 4 để giảm crowded */
@media (max-width: 768px) {
    .mkt-stat-grid-mobile-4 > .mkt-stat-card:nth-child(4) {
        display: none;
    }
}
@media (max-width: 380px) {
    .mkt-stat-grid-mobile-4 { grid-template-columns: 1fr; }
    .mkt-stat-grid-mobile-4 > .mkt-stat-card:nth-child(4) {
        display: block;
    }
}

/* Mobile toolbar: full-width buttons */
@media (max-width: 768px) {
    .mkt-calendar-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .mkt-calendar-filter-bar .ui-btn-primary,
    .mkt-calendar-filter-bar .ui-btn-secondary {
        width: 100%;
        justify-content: center;
    }
    .mkt-calendar-filter-bar .mkt-filter-group {
        width: 100%;
        justify-content: space-between;
        padding: 8px 12px;
    }
}

/* Campaign grid 1 cột trên mobile */
@media (max-width: 768px) {
    .mkt-campaign-grid { grid-template-columns: 1fr !important; gap: 10px; }
}

@media (max-width: 480px) {
    .mkt-stat-grid { grid-template-columns: 1fr; }
    .mkt-kpi-grid { grid-template-columns: 1fr; }
    .mkt-subtab { padding: 8px 10px; font-size: 11px; }
    .mkt-calendar-day { min-height: 48px !important; padding: 3px !important; }
    .mkt-leads-table {
        display: none;
    }
    .mkt-card-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
        max-height: 66dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    @supports not (height: 1dvh) {
        .mkt-card-list { max-height: 66vh; }
    }
    .mkt-card-list + .mkt-pager,
    .mkt-table-scroll + .mkt-pager { margin-top: 10px; }
}

/* ============ Marketing day-detail modal (Plan: calendar clickable) ============ */
.mkt-day-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 8px;
    padding: 10px 12px;
    background: var(--ghz-input-bg, #181b20);
}
.mkt-day-detail-meta {
    font-size: 11px;
    color: var(--ghz-text-muted, #6b7280);
    margin-top: 2px;
}
.mkt-btn-primary {
    background: var(--ghz-brand-color, #00c37a);
    color: var(--ghz-text-on-grad, #ffffff);
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
    transition: opacity .15s, box-shadow .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mkt-btn-primary:hover { opacity: .9; }
.ui-btn-primary:focus-visible,
.ui-btn-secondary:focus-visible,
.ui-btn-ghost:focus-visible,
.mkt-btn-primary:focus-visible {
    outline: none;
    border-color: var(--ghz-brand-color, #00c37a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ghz-brand-color, #00c37a) 28%, transparent);
}
.mkt-btn-danger {
    background: rgba(239, 68, 68, .12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, .3);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}
.mkt-btn-danger:hover {
    background: #ef4444;
    color: #fff;
}


/* ============================================================
   LIGHT CARD PANEL (C1) — biến nền trắng mặc định của
   <table>/<thead>/<tbody> bên trong <details> thành
   light panel đẹp: viền + bo góc + shadow + padding,
   đồng bộ với các card khác trong app.

   Áp dụng cho: #my-stats-details > .stats-table-wrap + table
   Rollback: xóa block này duy nhất.
   ============================================================ */

/* Container: giữ border + radius, override nền theo theme glass */
#my-stats-details .stats-table-wrap {
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.12)) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: var(--ghz-card-bg, rgba(255,255,255,0.04)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04) !important;
}

/* Table base: xóa nền trắng browser default */
#my-stats-details .responsive-card-table {
    background: transparent !important;
    color: var(--ghz-text-primary, #e5e7eb) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Header: nền dịu + text tone secondary */
#my-stats-details .responsive-card-table thead {
    background: var(--ghz-input-bg, rgba(255,255,255,0.04)) !important;
    color: var(--ghz-text-secondary, #9ca3af) !important;
}
#my-stats-details .responsive-card-table thead th {
    background: transparent !important;
    color: var(--ghz-text-secondary, #9ca3af) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.12)) !important;
    padding: 10px 12px !important;
}

/* Body cell: trong suốt, có border dưới dạng divide */
#my-stats-details .responsive-card-table tbody td {
    background: transparent !important;
    color: var(--ghz-text-primary, #e5e7eb) !important;
    border-bottom: 1px solid var(--ghz-card-border, rgba(255,255,255,0.06)) !important;
    padding: 10px 12px !important;
}
#my-stats-details .responsive-card-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
#my-stats-details .responsive-card-table tbody tr:hover td {
    background: var(--ghz-input-bg, rgba(255,255,255,0.03)) !important;
}

/* Empty state: icon + text tone muted, căn giữa */
#my-stats-details .responsive-card-table tbody td .text-gray-600,
#my-stats-details .responsive-card-table tbody td .text-gray-500 {
    color: var(--ghz-text-muted, #6b7280) !important;
}

/* Border-top ngăn summary ↔ body: dùng tone theme */
#my-stats-details .border-t.border-bordercol {
    border-color: var(--ghz-card-border, rgba(255,255,255,0.12)) !important;
}

/* Input date + button: khung glass */
#my-stats-details input[type="date"].bg-inputbg,
#my-stats-details button.bg-inputbg {
    background: var(--ghz-input-bg, rgba(255,255,255,0.06)) !important;
    border: 1px solid var(--ghz-card-border, rgba(255,255,255,0.12)) !important;
    color: var(--ghz-text-primary, #e5e7eb) !important;
}
#my-stats-details input[type="date"]:focus,
#my-stats-details button:hover {
    border-color: var(--ghz-brand-color, #00c37a) !important;
}

/* text-primary highlight (icon title) */
#my-stats-details .text-primary {
    color: var(--ghz-brand-color, #00c37a) !important;
}

/* text tone muted labels */
#my-stats-details .text-gray-400 { color: var(--ghz-text-secondary, #9ca3af) !important; }
#my-stats-details .text-gray-300 { color: #d1d5db !important; }
#my-stats-details .text-gray-500 { color: var(--ghz-text-muted, #6b7280) !important; }
#my-stats-details .text-white    { color: var(--ghz-text-primary, #fff) !important; }

/* ============================================================
   MARKETING TAB - SUB-PANEL "Nội dung & Kế hoạch" (chip + plan)
   ============================================================ */

/* Chip sub-panel (trong panel content) */
.mkt-subtab-chip-row {
    display: inline-flex;
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    margin-bottom: 14px;
}
.mkt-subtab-chip {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ghz-text-muted, #9ca3af);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: color .15s, background-color .15s;
}
.mkt-subtab-chip:hover { color: var(--ghz-text-primary, #e5e7eb); }
.mkt-subtab-chip.active {
    background: var(--ghz-brand-color, #00c37a);
    color: #fff;
    box-shadow: 0 2px 6px -1px rgba(0,195,122,.45);
}

/* Sub-panel container (Bài đăng / Kế hoạch) - GIỮ vì HTML vẫn dùng */
.content-sub-panel { display: block; }
.content-sub-panel.hidden { display: none !important; }

/* Filter chip row cho Plan */
.mkt-plan-filter-row {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.mkt-plan-filter-chip {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--ghz-card-border, #2a2e35);
    background: var(--ghz-card-bg, #181b20);
    font-size: 12px;
    color: var(--ghz-text-muted, #9ca3af);
    cursor: pointer;
    font-weight: 500;
    transition: color .15s, background-color .15s, border-color .15s;
}
.mkt-plan-filter-chip:hover { color: var(--ghz-text-primary, #e5e7eb); }
.mkt-plan-filter-chip.active {
    background: var(--ghz-brand-color, #00c37a);
    color: #fff;
    border-color: var(--ghz-brand-color, #00c37a);
}

/* Section icon (kế thừa style ui-section-title nhưng có icon bg) */
.mkt-plan-section-icon {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    font-size: 12.5px;
    background: rgba(0,195,122,.12);
    color: var(--ghz-brand-color, #00c37a);
}

/* Task card list */
.mkt-task-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mkt-task-card {
    background: var(--ghz-card-bg, #181b20);
    border: 1px solid var(--ghz-card-border, #2a2e35);
    border-left: 3px solid var(--ghz-brand-color, #00c37a);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s, border-color .15s, background-color .15s;
}
.mkt-task-card:hover {
    box-shadow: 0 4px 12px -2px rgba(0,0,0,.25);
    transform: translateY(-1px);
}
.mkt-task-card.priority-high { border-left-color: var(--ghz-danger, #ef4444); }
.mkt-task-card.priority-med  { border-left-color: var(--ghz-warning, #f59e0b); }
.mkt-task-card.priority-low  { border-left-color: var(--ghz-info, #3b82f6); }
.mkt-task-card.overdue { background: rgba(239,68,68,.06); }
.mkt-task-card.done { opacity: .62; }
.mkt-task-card.done .mkt-task-title { text-decoration: line-through; color: var(--ghz-text-muted, #9ca3af); }
.mkt-task-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ghz-text-primary, #e5e7eb);
    word-break: break-word;
}
.mkt-task-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
    color: var(--ghz-text-muted, #9ca3af);
    flex-wrap: wrap;
}
.mkt-task-meta i { margin-right: 3px; }
.mkt-overdue-mark { color: var(--ghz-danger, #ef4444); font-weight: 600; }

/* Badge */
.mkt-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mkt-badge.status-todo   { background: rgba(156,163,175,.18); color: #9ca3af; }
.mkt-badge.status-doing  { background: rgba(59,130,246,.18); color: var(--ghz-info, #3b82f6); }
.mkt-badge.status-done   { background: rgba(16,185,129,.18); color: var(--ghz-success, #10b981); }
.mkt-badge.priority-high { background: rgba(239,68,68,.16); color: var(--ghz-danger, #ef4444); }
.mkt-badge.priority-med  { background: rgba(245,158,11,.16); color: var(--ghz-warning, #f59e0b); }
.mkt-badge.priority-low  { background: rgba(59,130,246,.16); color: var(--ghz-info, #3b82f6); }

/* Note grid (sticky-note style) */
.mkt-note-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.mkt-note-card {
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    position: relative;
    min-height: 110px;
    border: 1px solid transparent;
    transition: transform .15s, box-shadow .15s;
}
.mkt-note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(0,0,0,.25);
}
.mkt-note-card.color-yellow { background: rgba(254,243,199,.95); color: #78350f; border-color: rgba(217,119,6,.18); }
.mkt-note-card.color-blue   { background: rgba(219,234,254,.95); color: #1e3a8a; border-color: rgba(37,99,235,.18); }
.mkt-note-card.color-green  { background: rgba(209,250,229,.95); color: #064e3b; border-color: rgba(16,185,129,.18); }
.mkt-note-card.color-pink   { background: rgba(252,231,243,.95); color: #831843; border-color: rgba(236,72,153,.18); }
.mkt-note-card.pinned::before {
    content: "\f08d";
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 10px; right: 12px;
    color: rgba(0,0,0,.35);
    font-size: 13px;
}
.mkt-note-title { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.mkt-note-body {
    font-size: 12.5px;
    line-height: 1.5;
    opacity: .85;
    word-break: break-word;
    white-space: pre-wrap;
}
.mkt-note-meta { font-size: 10.5px; opacity: .55; margin-top: 8px; }

/* Empty state */
.mkt-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--ghz-text-muted, #9ca3af);
    background: var(--ghz-card-bg, #181b20);
    border: 1px dashed var(--ghz-card-border, #2a2e35);
    border-radius: 12px;
}
.mkt-empty i { font-size: 32px; opacity: .35; display: block; margin-bottom: 8px; }

/* Plan note color picker trong modal */
.plan-note-color-opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border: 1.5px solid var(--ghz-card-border, #2a2e35);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ghz-text-primary, #e5e7eb);
    transition: border-color .15s, background-color .15s;
    user-select: none;
}
.plan-note-color-opt:has(input:checked) {
    border-color: var(--ghz-brand-color, #00c37a);
    background: rgba(0,195,122,.08);
}
.plan-note-color-opt input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.plan-note-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.1);
    display: inline-block;
}
.plan-note-color-swatch.color-yellow { background: #fef3c7; }
.plan-note-color-swatch.color-blue   { background: #dbeafe; }
.plan-note-color-swatch.color-green  { background: #d1fae5; }
.plan-note-color-swatch.color-pink   { background: #fce7f3; }

/* Marketing note controls: readable labels and explicit selectable states. */
html[data-theme="classic"] .mkt-modal-card .mkt-field-label {
    color: #e5e7eb !important;
}
html[data-theme="classic"] .mkt-modal-card .mkt-field-label i {
    color: #9ca3af !important;
}
html[data-theme]:not([data-theme="classic"]) .mkt-modal-card .mkt-field-label {
    color: var(--ghz-text-primary, #1f2937) !important;
    font-weight: 700;
}
html[data-theme]:not([data-theme="classic"]) .mkt-modal-card .mkt-field-label i {
    color: var(--ghz-brand-active, #047857) !important;
}
html[data-theme]:not([data-theme="classic"]) .plan-note-color-opt {
    min-height: 36px;
    background: var(--ghz-input-bg, rgba(255,255,255,.75));
    border-color: color-mix(in srgb, var(--ghz-text-muted, #4b5563) 36%, var(--ghz-card-border, #9ca3af));
    color: var(--ghz-text-primary, #1f2937) !important;
    font-weight: 650;
}
html[data-theme]:not([data-theme="classic"]) .plan-note-color-opt:hover {
    border-color: var(--ghz-brand-active, #047857);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ghz-brand-active, #047857) 16%, transparent);
}
html[data-theme]:not([data-theme="classic"]) .plan-note-color-opt:has(input:checked) {
    border: 2px solid var(--ghz-brand-active, #047857);
    background: color-mix(in srgb, var(--ghz-brand-active, #047857) 12%, var(--ghz-input-bg, white));
    color: var(--ghz-text-primary, #1f2937) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ghz-brand-active, #047857) 18%, transparent);
}
.plan-note-color-opt:has(input:focus-visible) {
    outline: 3px solid var(--ghz-brand-active, #047857);
    outline-offset: 2px;
}
html[data-theme]:not([data-theme="classic"]) #plan-note-pin-btn:not(.hidden) {
    background: color-mix(in srgb, #b45309 14%, var(--ghz-input-bg, white)) !important;
    color: #78350f !important;
    border: 1px solid #b45309 !important;
    box-shadow: 0 2px 7px rgba(120, 53, 15, .18) !important;
    font-weight: 700 !important;
}
html[data-theme]:not([data-theme="classic"]) #plan-note-pin-btn:not(.hidden):hover {
    background: #92400e !important;
    color: #fff !important;
    border-color: #78350f !important;
    transform: translateY(-1px);
}
html[data-theme="midnight"] #plan-note-pin-btn:not(.hidden),
html[data-theme="deep-space"] #plan-note-pin-btn:not(.hidden),
html[data-theme="pure-dark"] #plan-note-pin-btn:not(.hidden),
html[data-theme="charcoal"] #plan-note-pin-btn:not(.hidden),
html[data-theme="purple-haze"] #plan-note-pin-btn:not(.hidden) {
    background: rgba(251, 191, 36, .18) !important;
    color: #fcd34d !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, .18) !important;
}
html[data-theme="midnight"] #plan-note-pin-btn:not(.hidden):hover,
html[data-theme="deep-space"] #plan-note-pin-btn:not(.hidden):hover,
html[data-theme="pure-dark"] #plan-note-pin-btn:not(.hidden):hover,
html[data-theme="charcoal"] #plan-note-pin-btn:not(.hidden):hover,
html[data-theme="purple-haze"] #plan-note-pin-btn:not(.hidden):hover {
    background: #b45309 !important;
    color: #fff !important;
}

/* Unified work detail: centered viewport-safe modal with an independently scrollable body. */
#unified-work-detail-modal {
    top: 68px !important;
    bottom: 0 !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    padding: 0.75rem 1rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#unified-work-detail-modal > .card {
    width: min(100%, 32rem) !important;
    height: calc(100% - 1.5rem) !important;
    max-height: calc(100% - 1.5rem) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#unified-work-detail-modal > .card > .modal-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
}

@media (max-width: 640px) {
    #unified-work-detail-modal {
        top: 61px !important;
        height: calc(100dvh - 61px) !important;
        padding: 0.5rem !important;
    }

    #unified-work-detail-modal > .card {
        width: min(100%, calc(100vw - 1rem)) !important;
        height: calc(100% - 1rem) !important;
        max-height: calc(100% - 1rem) !important;
        overflow: hidden !important;
    }
}

/* Global modal viewport safety: keep every app dialog below the sticky app header. */
body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) {
    top: 68px !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: calc(100dvh - 68px) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    overflow: hidden !important;
}

body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > .card,
body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > div.card {
    max-height: calc(100% - 1.5rem) !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > .card > .modal-scroll,
body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > .card > [id$="-body"]:not(tbody) {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > .card.ghz-modal-no-inner-scroll,
body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > div.card.ghz-modal-no-inner-scroll {
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) {
        top: 61px !important;
        height: calc(100dvh - 61px) !important;
        padding: 0.5rem !important;
    }

    body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > .card,
    body .app-modal-overlay:not(.hidden):not(#inventory-lightbox) > div.card {
        max-height: calc(100% - 1rem) !important;
    }
}

/* Toast viewport safety: keep notifications below the sticky app header and above overlays. */
.toast-region {
    top: calc(80px + env(safe-area-inset-top, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 12px)) !important;
    left: auto !important;
    z-index: 1200 !important;
    max-width: min(380px, calc(100vw - 24px)) !important;
}

@media (max-width: 767px) {
    .toast-region {
        top: calc(69px + env(safe-area-inset-top, 0px)) !important;
        right: 12px !important;
        left: auto !important;
        width: min(360px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
}

/* Inventory chips desktop: override glass theme so the group matches mobile chips. */
@media (min-width: 768px) {
    .chip-filter-list,
    #inventory-status-chips,
    #inventory-layout-toggle .chip-filter-list {
        display: inline-flex !important;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem !important;
        padding: 3px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 999px !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .chip-filter-list .chip-filter-item,
    #inventory-status-chips .chip-filter-item,
    #inventory-layout-toggle .chip-filter-item {
        min-height: 0 !important;
        padding: 4px 9px !important;
        gap: 0.375rem;
        border-radius: 999px !important;
        font-size: 0.7rem !important;
        font-weight: 600;
        line-height: 1.2;
        transform: none;
    }

    #inventory-status-chips .chip-filter-item:hover,
    #inventory-layout-toggle .chip-filter-item:hover {
        transform: none;
    }
}