:root {
    /* Brittany Chiang dark theme: navy + teal */
    --bg-base: #0a192f;      /* navy d?m ? signature Brittany Chiang */
    --bg-panel: #112240;     /* panel: navy s?ng hon */
    --bg-card: #1d2d50;      /* card: lighter navy */
    --bg-hover: #233554;     /* hover: r? r?ng kh?ng ch?i */
    --bg-stripe: #0d1f38;    /* striped rows */
    --accent: #64ffda;       /* teal ? m?u ch? d?o Brittany Chiang */
    --accent2: #4dd9b8;
    --accent3: #57cbff;      /* blue accent ph? */
    --accent-rgb: 100,255,218;
    --warn: #ffd166;
    --danger: #ff6b6b;
    --success: #64ffda;
    --text-primary: #ccd6f6;    /* lavender tr?ng ? signature */
    --text-secondary: #8892b0;  /* slate x?m ? secondary text */
    --text-muted: #495670;
    --border: #1e3a5f;
    --border-light: #2a5082;
    --input-bg: #112240;
    --input-border: #3d6494;
    --font-mono: 'JetBrains Mono', monospace;
    --font-main: 'Be Vietnam Pro', sans-serif;
    --radius: 6px;
    --shadow: 0 4px 24px rgba(2,12,27,0.7);
    --glow: 0 0 20px rgba(100,255,218,0.10);
  }

  /* ====== QR MAIN BUTTON ====== */
  .qr-btn-main {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    padding: 8px 16px !important; font-size: 12px !important; font-weight: 700 !important;
    background: rgba(100,255,218,0.08) !important; border-color: rgba(100,255,218,0.45) !important;
    color: var(--accent) !important; letter-spacing: 0.3px !important;
    box-shadow: 0 0 0 0 rgba(100,255,218,0) !important; transition: all 0.18s !important;
  }
  .qr-btn-main:hover {
    background: rgba(100,255,218,0.18) !important;
    box-shadow: 0 0 14px rgba(100,255,218,0.22) !important;
    border-color: var(--accent) !important;
  }
  [data-theme="light"] .qr-btn-main {
    background: rgba(91,33,182,0.08) !important; border-color: rgba(91,33,182,0.45) !important;
    color: #5B21B6 !important;
  }
  [data-theme="light"] .qr-btn-main:hover {
    background: rgba(91,33,182,0.16) !important; box-shadow: 0 0 12px rgba(91,33,182,0.15) !important;
  }
  /* Delete button in detail modal */
  .detail-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--radius); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: var(--font-main);
    border: 1px solid rgba(255,107,107,0.45);
    background: rgba(255,107,107,0.09); color: var(--danger);
    transition: all 0.15s; white-space: nowrap;
  }
  .detail-delete-btn:hover { background: rgba(255,107,107,0.22); border-color: var(--danger); box-shadow: 0 0 12px rgba(255,107,107,0.2); }
  /* Responsive: show full label on PC, icon-only on mobile */
  .delete-label { display: inline; }
  @media (max-width: 600px) { .delete-label { display: none; } }

  /* ====== BULK DELETE BUTTON ====== */
  .bulk-delete-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: var(--font-main);
    border: 1px solid rgba(255,107,107,0.5);
    background: rgba(255,107,107,0.10); color: var(--danger);
    transition: all 0.15s; white-space: nowrap; flex-shrink: 0;
  }
  .bulk-delete-btn:hover { background: rgba(255,107,107,0.22); border-color: var(--danger); box-shadow: 0 0 12px rgba(255,107,107,0.2); }

  /* ====== TRASH OVERLAY ====== */
  .trash-overlay { display:none; position:fixed; inset:0; z-index:1400; background:rgba(0,0,0,0.82); align-items:center; justify-content:center; }
  .trash-overlay.open { display:flex; }
  .trash-modal {
    background:var(--bg-panel); border:1px solid rgba(255,107,107,0.3);
    border-radius:12px; width:880px; max-width:96vw; max-height:92vh;
    display:flex; flex-direction:column;
    box-shadow: var(--shadow), 0 0 60px rgba(255,107,107,0.08);
    animation: modalIn 0.22s ease;
  }
  .trash-header {
    padding:18px 22px 14px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
    background: linear-gradient(135deg,rgba(255,107,107,0.06),transparent);
  }
  .trash-title { font-size:16px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:10px; }
  .trash-title-badge {
    background:rgba(255,107,107,0.15); color:var(--danger);
    border:1px solid rgba(255,107,107,0.35);
    font-family:var(--font-mono); font-size:10px; font-weight:700;
    padding:3px 8px; border-radius:4px; letter-spacing:0.5px;
  }
  .trash-body { flex:1; overflow-y:auto; padding:18px 22px; }
  .trash-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
  .trash-search {
    flex:1; background:var(--bg-card); border:1px solid var(--border);
    color:var(--text-primary); font-family:var(--font-mono); font-size:12px;
    padding:7px 10px 7px 32px; border-radius:var(--radius); outline:none;
  }
  .trash-search:focus { border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,107,107,0.12); }
  .trash-search-wrap { position:relative; flex:1; }
  .trash-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-muted); pointer-events:none; }
  .trash-refresh-btn {
    padding:7px 12px; border-radius:var(--radius); border:1px solid var(--border);
    background:var(--bg-card); color:var(--text-secondary); font-size:11px;
    cursor:pointer; transition:all 0.15s; white-space:nowrap;
  }
  .trash-refresh-btn:hover { border-color:var(--accent2); color:var(--accent); }
  .trash-count { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); white-space:nowrap; }
  .trash-empty { text-align:center; padding:48px 20px; color:var(--text-muted); font-size:13px; }
  .trash-empty-icon { font-size:40px; margin-bottom:12px; opacity:0.4; }
  .trash-loading { text-align:center; padding:32px; color:var(--text-muted); font-family:var(--font-mono); font-size:12px; }
  .trash-table { width:100%; border-collapse:collapse; font-size:12px; }
  .trash-table th {
    background:var(--bg-card); border-bottom:2px solid var(--border);
    color:var(--text-secondary); padding:8px 12px; text-align:left;
    font-size:11px; font-weight:600; white-space:nowrap;
    position:sticky; top:0; z-index:2;
  }
  .trash-table td { border-bottom:1px solid var(--border); padding:8px 12px; vertical-align:middle; color:var(--text-primary); }
  .trash-table tr:hover td { background:rgba(255,107,107,0.04); }
  .trash-asset-id { font-family:var(--font-mono); font-size:10px; color:var(--danger); font-weight:700; }
  .trash-asset-name { font-size:12px; font-weight:600; color:var(--text-primary); }
  .trash-meta { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-top:2px; }
  .trash-restore-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:var(--radius); font-size:11px; font-weight:600;
    cursor:pointer; transition:all 0.15s; border:1px solid;
    border-color:rgba(0,212,255,0.35); background:rgba(0,212,255,0.07); color:var(--accent);
    white-space:nowrap;
  }
  .trash-restore-btn:hover { background:rgba(0,212,255,0.18); border-color:var(--accent2); box-shadow:0 0 10px rgba(0,212,255,0.15); }
  .trash-footer {
    padding:12px 22px; border-top:1px solid var(--border);
    display:flex; gap:8px; align-items:center; flex-shrink:0;
    background:var(--bg-panel);
  }
  /* Trash bulk bar */
  .trash-bulk-bar {
    display:none; align-items:center; gap:8px;
    padding:8px 14px; margin-bottom:10px;
    background:rgba(100,255,218,0.06); border:1px solid rgba(100,255,218,0.2);
    border-radius:var(--radius); animation: fadeIn 0.15s ease;
  }
  .trash-bulk-bar.visible { display:flex; }
  .trash-bulk-count { font-family:var(--font-mono); font-size:11px; color:var(--accent); flex:1; }
  .trash-bulk-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:var(--radius); font-size:11px; font-weight:600;
    cursor:pointer; transition:all 0.15s; border:1px solid; white-space:nowrap;
  }
  .trash-bulk-btn.restore { border-color:rgba(100,255,218,0.4); background:rgba(100,255,218,0.08); color:var(--accent); }
  .trash-bulk-btn.restore:hover { background:rgba(100,255,218,0.18); box-shadow:0 0 10px rgba(100,255,218,0.15); }
  .trash-bulk-btn.deselect { border-color:var(--border); background:var(--bg-card); color:var(--text-secondary); }
  .trash-bulk-btn.deselect:hover { border-color:var(--accent2); color:var(--accent); }
  .trash-table td.td-check { width:34px; padding:8px 6px 8px 12px; }
  .trash-table th.th-check { width:34px; padding:8px 6px 8px 12px; }
  .trash-cb { accent-color:var(--accent); width:13px; height:13px; cursor:pointer; }
  tr.trash-selected td { background:rgba(100,255,218,0.05) !important; }
  @keyframes rowFadeDelete { from { opacity:1; background:rgba(255,107,107,0.18); } to { opacity:0; transform:translateX(20px); } }
  tr.row-deleting td { animation: rowFadeDelete 0.4s ease forwards; }
  @keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }

  /* ====== COLUMN DRAG-TO-REORDER ====== */
  .draggable-col { cursor: default; transition: background 0.15s, opacity 0.15s; }

  /* Tay c?m k?o ? icon ? b?n tr?i label */
  .col-drag-handle {
    display: inline-flex; align-items: center;
    font-size: 13px; color: var(--text-muted);
    opacity: 0; cursor: grab; padding: 0 4px 0 0;
    transition: opacity 0.15s;
    user-select: none;
  }
  .draggable-col:hover .col-drag-handle { opacity: 0.55; }
  .draggable-col:hover .col-drag-handle:hover { opacity: 1; color: var(--accent); }

  /* C?t dang du?c k?o */
  .col-dragging { opacity: 0.45 !important; background: rgba(var(--accent-rgb),0.06) !important; }

  /* C?t dang du?c hover khi k?o ? hi?n du?ng ch? th? */
  .col-drag-over {
    border-left: 3px solid var(--accent) !important;
    background: rgba(var(--accent-rgb), 0.08) !important;
    box-shadow: inset 3px 0 0 var(--accent);
  }

  [data-theme="light"] .col-drag-over {
    border-left-color: #5B21B6 !important;
    background: rgba(91,33,182,0.07) !important;
    box-shadow: inset 3px 0 0 #5B21B6;
  }

  /* ====== SORT INDICATOR ? r? r?ng, kh?ng nh?m l?n ====== */
  th.active-sort {
    background: rgba(var(--accent-rgb), 0.12) !important;
    border-bottom: 3px solid var(--accent) !important;
    box-shadow: inset 0 -3px 0 var(--accent);
    position: relative;
  }
  th.active-sort .th-inner {
    color: var(--accent) !important;
    font-weight: 700 !important;
  }

  /* Sort icon: m?c d?nh nh? m?; active s?ng to */
  .sort-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    font-size: 13px; font-weight: 900;
    opacity: 0.25;
    color: var(--text-secondary);
    transition: all 0.18s;
    vertical-align: middle;
    border-radius: 3px;
    margin-left: 3px;
  }
  th:hover .sort-icon { opacity: 0.55; }
  th.active-sort .sort-icon {
    opacity: 1;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.15);
    font-size: 15px;
  }

  /* Light mode */
  [data-theme="light"] th.active-sort {
    background: rgba(91,33,182,0.09) !important;
    border-bottom: 3px solid #5B21B6 !important;
    box-shadow: inset 0 -3px 0 #5B21B6;
  }
  [data-theme="light"] th.active-sort .th-inner {
    color: #3B0764 !important;
    font-weight: 700 !important;
  }
  [data-theme="light"] th.active-sort .sort-icon {
    color: #5B21B6;
    background: rgba(91,33,182,0.10);
    opacity: 1;
  }

  /* row colors ? cu?i file */
  .data-table tr:hover td { background-color: rgba(100,255,218,0.08) !important; transition: background 0.2s; }

  /* ====== LIGHT THEME ? Warm Cream ? Deep Violet ====== */
  /*
   * Tri?t l?: Tho?t kh?i "corporate gray + sky blue" nh?m ch?n.
   * N?n ?m cream (#FAF8F4) t?o c?m gi?c sang tr?ng, d? ch?u cho m?t.
   * Violet (#5B21B6) thay v? xanh corporate ? c? c? t?nh, hi?n d?i (Linear/Stripe).
   * Text warm-black (#1C1917) thay v? cold-slate ? d?c tho?i m?i hon.
   */
  [data-theme="light"] {
    --bg-base:   #FAF8F4;   /* cream ?m ? kh?ng ph?i tr?ng l?nh */
    --bg-panel:  #FFFFFF;
    --bg-card:   #FEFCF8;   /* tr?ng kem nh? */
    --bg-hover:  #F0EBE1;   /* hover ?m, d? nh?n */
    --bg-stripe: #F6F2EB;   /* striped row ? d? tuong ph?n, kh?ng ch?i */

    --accent:     #5B21B6;  /* deep violet ? c? t?nh, kh?ng ph?i blue mass-market */
    --accent2:    #7C3AED;  /* violet s?ng hon ? hover/border */
    --accent3:    #059669;  /* emerald ? success/positive, tuoi kh?ng s?c s? */
    --accent-rgb: 91,33,182;

    --warn:    #B45309;     /* amber d?m ? d? d?c tr?n n?n s?ng */
    --danger:  #DC2626;
    --success: #059669;

    --text-primary:   #1C1917;  /* warm near-black, ?m hon cold #0f172a */
    --text-secondary: #6B5F56;  /* stone ?m */
    --text-muted:     #A69D96;  /* muted ? d? nh?n, kh?ng l?n ?t */

    --border:       #E5DDD3;    /* vi?n beige ?m */
    --border-light: #EDE8E0;    /* vi?n m? */

    --shadow: 0 4px 16px rgba(28,25,23,0.08), 0 1px 3px rgba(28,25,23,0.05);
    --glow:   0 0 16px rgba(91,33,182,0.12);

    --input-bg:     #FEFCF8;
    --input-border: #D6CFC5;
  }

  /* Header & sidebar accent text */
  [data-theme="light"] .header-sub,
  [data-theme="light"] .last-sync  { color: #6B5F56 !important; font-weight: 600; }
  [data-theme="light"] .sidebar-label { color: #5B21B6 !important; }

  /* -- Status badges -- */
  [data-theme="light"] .status-ok      { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
  [data-theme="light"] .status-broken  { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }
  [data-theme="light"] .status-lost    { background: #FEF3C7; color: #78350F; border: 1px solid #FCD34D; }
  [data-theme="light"] .status-other   { background: #F0EBE1; color: #6B5F56; border: 1px solid #D6CFC5; }
  [data-theme="light"] .status-retired { background: #EDE9FE; color: #5B21B6; border: 1px solid #C4B5FD; }
  [data-theme="light"] .status-returned{ background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
  [data-theme="light"] .status-stored   { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
  [data-theme="light"] .status-pending-handover { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; animation: pulse-orange 2s infinite; }
  [data-theme="light"] .status-pending-retire   { background: #F3E8FF; color: #6B21A8; border: 1px solid #D8B4FE; }
  [data-theme="light"] .handover-banner { background:rgba(251,191,36,0.12); border-color:rgba(251,146,60,0.5); }
  [data-theme="light"] .handover-banner-text { color:#374151; }
  [data-theme="light"] .handover-banner-text strong { color:#d97706; }
  [data-theme="light"] .age-warn { background: #FEF3C7; color: #78350F; border-color: #FCD34D; }
  [data-theme="light"] .age-crit { background: #FEE2E2; color: #991B1B; border-color: #FCA5A5; }

  /* -- Navigation -- */
  [data-theme="light"] .nav-item.active {
    background: rgba(91,33,182,0.08) !important;
    box-shadow: inset 3px 0 0 var(--accent), var(--glow);
  }
  [data-theme="light"] .stat-label { color: #6B5F56; }

  /* -- Chips & buttons -- */
  [data-theme="light"] .filter-chip {
    background: rgba(91,33,182,0.08);
    color: #5B21B6;
    border-color: rgba(91,33,182,0.25);
  }
  [data-theme="light"] .toolbar-btn {
    background: #FEFCF8;
    border-color: #D6CFC5;
    color: #3A3330;
  }
  [data-theme="light"] .toolbar-btn.primary {
    background: rgba(91,33,182,0.08);
    border-color: rgba(124,58,237,0.5);
    color: #5B21B6;
  }
  [data-theme="light"] .toolbar-btn.success-btn {
    background: rgba(5,150,105,0.08);
    border-color: rgba(5,150,105,0.35);
    color: #059669;
  }

  /* -- Table -- */
  /* light mode row + hover ? cu?i file */

  /* -- Misc -- */
  [data-theme="light"] .edit-setup-warn code { background: rgba(91,33,182,0.08); color: #5B21B6; }


  /* Light mode: logo badge ? violet nh?t n?n tr?ng kem, ch? violet d?m */
  [data-theme="light"] .logo-badge {
    background: linear-gradient(135deg, #EDE9FE, #DDD6FE);
    color: #4C1D95;
    border: 1px solid #C4B5FD;
  }

  /* Scrollbar light mode */
  [data-theme="light"] ::-webkit-scrollbar-track { background: #F0EBE1; }
  [data-theme="light"] ::-webkit-scrollbar-thumb { background: #D6CFC5; border: 2px solid #F0EBE1; border-radius: 10px; }
  [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #7C3AED; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { overflow-x: hidden; }
  body {
    background: var(--bg-base); color: var(--text-primary);
    font-family: var(--font-main); font-size: 13px; line-height: 1.5;
    min-height: 100vh; overflow-x: hidden; transition: background 0.25s, color 0.25s;
  }
  body:not([data-theme="light"])::before {
    content: ''; position: fixed; top:0;left:0;right:0;bottom:0;
    background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(100,255,218,0.015) 2px,rgba(100,255,218,0.015) 4px);
    pointer-events: none; z-index: 9999;
  }

  /* ====== HEADER ====== */
  .header {
    background: var(--bg-panel); border-bottom: 1px solid var(--border);
    padding: 0 24px; display: flex; align-items: center; gap: 16px;
    height: 58px; position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 20px rgba(0,0,0,0.4);
  }
  .header-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .logo-badge {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    color: #000; font-family: var(--font-mono); font-weight: 700;
    font-size: 11px; padding: 4px 8px; border-radius: 4px; letter-spacing: 0.5px;
  }
  .header-title { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; }
  .header-sub { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
  .header-sub, .last-sync { color: #94a3b8 !important; font-weight: 500; }
  .header-divider { width: 1px; height: 32px; background: var(--border); margin: 0 8px; }
  .header-spacer { flex: 1; }
  .theme-toggle {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border-light);
    color: var(--text-secondary); font-size: 13px;
    width: 34px; height: 30px; border-radius: var(--radius);
    cursor: pointer; justify-content: center; transition: all 0.2s;
  }
  .theme-toggle:hover { border-color: var(--accent2); color: var(--accent); background: rgba(0,144,204,0.08); }

  /* ====== FILTER CHIPS ====== */
  .filter-chips-bar { display: none; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
  .filter-chips-bar.visible { display: flex; }
  .filter-chips-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; white-space: nowrap; }
  .filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 500; background: rgba(0,144,204,0.14); color: var(--accent); border: 1px solid rgba(0,144,204,0.35); white-space: nowrap; }
  .filter-chip-close { cursor: pointer; font-size: 11px; opacity: 0.7; line-height: 1; margin-left: 2px; }
  .filter-chip-close:hover { opacity: 1; }
  .filter-chip-clear { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 3px 8px; border: 1px solid var(--border); border-radius: 20px; background: transparent; margin-left: 2px; transition: all 0.15s; }
  .filter-chip-clear:hover { color: var(--danger); border-color: var(--danger); }

  .sync-btn {
    display: flex; align-items: center; gap: 7px;
    background: transparent; border: 1px solid var(--accent2);
    color: var(--accent); font-family: var(--font-mono); font-size: 11px;
    padding: 6px 14px; border-radius: var(--radius); cursor: pointer;
    transition: all 0.2s; font-weight: 500;
  }
  .sync-btn:hover { background: rgba(0,212,255,0.1); box-shadow: var(--glow); }
  .sync-btn.syncing { opacity: 0.6; cursor: not-allowed; }
  .sync-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent3); }
  .sync-dot.pulse { animation: pulse-dot 1s infinite; }
  @keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.3; transform:scale(0.8); } }
  .last-sync { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

  /* ====== LAYOUT ====== */
  .layout { display: flex; height: calc(100vh - 58px); }
  .sidebar { width: 220px; flex-shrink: 0; background: var(--bg-panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow-y: auto; }
  .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

  /* ====== SIDEBAR ====== */
  .sidebar-section { padding: 14px 14px 6px; }
  .sidebar-label { color: var(--accent) !important; font-weight: 700; letter-spacing: 1px; margin-top: 10px; opacity: 1 !important; font-size: 10px; }
  .nav-item, .status-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 12px;
    border-radius: var(--radius); cursor: pointer; color: var(--text-secondary);
    font-size: 12px; transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    border: 1px solid transparent; margin-bottom: 2px; position: relative;
  }
  .nav-item:hover, .status-item:hover {
    background: var(--bg-hover) !important; color: var(--text-primary);
    transform: translateX(4px); border-color: rgba(0,212,255,0.2);
    box-shadow: 4px 0 15px rgba(0,0,0,0.2), 0 0 10px rgba(0,212,255,0.1);
  }
  .nav-item.active { background: rgba(0,212,255,0.12) !important; color: var(--accent) !important; border-color: rgba(0,212,255,0.4); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent), var(--glow); }
  .nav-icon { font-size: 14px; width: 16px; text-align: center; }
  .nav-item:hover .nav-icon { filter: drop-shadow(0 0 5px var(--accent)); transform: scale(1.1); }

  /* -- Stat Cards 2?2 grid -- */
  .stat-grid-2x2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 2px; }
  .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; text-align: center; transition: all 0.3s ease; position: relative; overflow: hidden; }
  .stat-card:hover { border-color: var(--accent2); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.3), var(--glow); }
  /* Small variant for 2?2 grid */
  .stat-card-sm { margin-bottom: 0; padding: 10px 8px 8px; }
  .stat-card-sm .stat-num { font-size: 20px; }
  .stat-card-sm .stat-label { font-size: 10px; }
  /* Clickable stat cards */
  .stat-card-click { cursor: pointer; }
  .stat-card-click:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(0,0,0,0.35), 0 0 16px rgba(var(--accent-rgb),0.2); }
  .stat-card-click:active { transform: translateY(0) scale(0.97); }

  .stat-num { font-family: var(--font-mono); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.5px; text-shadow: 0 0 5px currentColor, 0 0 15px rgba(255,255,255,0.2); }
  #statTotal  { color: var(--accent);  text-shadow: 0 0 10px rgba(0,212,255,0.6); }
  #statActive { color: #00ff9d;        text-shadow: 0 0 10px rgba(0,255,157,0.6); }
  #statIssue  { color: #ffb300;        text-shadow: 0 0 10px rgba(255,179,0,0.6); }
  #statOther  { color: var(--accent3); text-shadow: 0 0 10px rgba(87,203,255,0.5); }
  [data-theme="light"] .stat-num { text-shadow: none !important; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)); }
  .stat-label { font-size: 11px; color: #b8c8e8; margin-top: 4px; font-weight: 500; letter-spacing: 0.3px; }
  [data-theme="light"] .stat-label { color: #6B5F56; }

  /* -- Mini dashboard: label "T?ng tài s?n" + pill labels -- */
  .dash-total-label {
    font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
    color: var(--text-secondary); text-transform: uppercase; padding-top: 8px;
  }
  .dash-pill-label-vis {
    font-size: 9px; font-family: var(--font-mono);
    color: var(--text-secondary); margin-top: 3px; letter-spacing: 0.3px;
  }
  [data-theme="light"] .dash-total-label,
  [data-theme="light"] .dash-pill-label-vis { color: #6B5F56; }

  /* -- Dash pill light mode: tinted background per type -- */
  [data-theme="light"] .dash-pill {
    background: #FEFCF8;
    border-color: #E5DDD3;
    box-shadow: 0 1px 4px rgba(28,25,23,0.07);
  }
  [data-theme="light"] .dash-pill-ok      { background: rgba(5,150,105,0.07);  border-color: rgba(5,150,105,0.28); }
  [data-theme="light"] .dash-pill-unclear { background: rgba(220,38,38,0.07);  border-color: rgba(220,38,38,0.28); }
  [data-theme="light"] .dash-pill-pending { background: rgba(180,83,9,0.07);   border-color: rgba(180,83,9,0.28); }
  [data-theme="light"] .dash-pill-retired { background: rgba(91,33,182,0.06);  border-color: rgba(91,33,182,0.22); }

  [data-theme="light"] .dash-pill-ok:hover      { background: rgba(5,150,105,0.13);  border-color: rgba(5,150,105,0.45) !important; box-shadow: 0 4px 12px rgba(5,150,105,0.15); }
  [data-theme="light"] .dash-pill-unclear:hover { background: rgba(220,38,38,0.13);  border-color: rgba(220,38,38,0.45) !important; box-shadow: 0 4px 12px rgba(220,38,38,0.15); }
  [data-theme="light"] .dash-pill-pending:hover { background: rgba(180,83,9,0.13);   border-color: rgba(180,83,9,0.45) !important;  box-shadow: 0 4px 12px rgba(180,83,9,0.15); }
  [data-theme="light"] .dash-pill-retired:hover { background: rgba(91,33,182,0.12);  border-color: rgba(91,33,182,0.4) !important;  box-shadow: 0 4px 12px rgba(91,33,182,0.12); }

  [data-theme="light"] .dash-pill-ok.active      { border-color: rgba(5,150,105,0.7) !important;  --pill-glow:5,150,105; }
  [data-theme="light"] .dash-pill-unclear.active { border-color: rgba(220,38,38,0.7) !important;  --pill-glow:220,38,38; }
  [data-theme="light"] .dash-pill-pending.active { border-color: rgba(180,83,9,0.7) !important;   --pill-glow:180,83,9; }
  [data-theme="light"] .dash-pill-retired.active { border-color: rgba(91,33,182,0.6) !important;  --pill-glow:91,33,182; }

  /* -- Quick-filter count badges -- */
  .qf-count {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 1px 6px; border-radius: 10px; letter-spacing: 0.3px;
    background: rgba(100,255,218,0.12); color: var(--accent);
    border: 1px solid rgba(100,255,218,0.22);
    min-width: 20px; text-align: center; flex-shrink: 0;
  }
  .qf-count-ok     { background: rgba(0,255,157,0.10); color: #00ff9d; border-color: rgba(0,255,157,0.25); }
  .qf-count-issue  { background: rgba(255,179,0,0.12);  color: #ffb300; border-color: rgba(255,179,0,0.28); }
  .qf-count-lost   { background: rgba(255,107,107,0.10); color: #ff9090; border-color: rgba(255,107,107,0.25); }
  .qf-count-aged   { background: rgba(87,203,255,0.10);  color: var(--accent3); border-color: rgba(87,203,255,0.25); }
  .qf-count-retired{ background: rgba(148,130,255,0.10); color: #a890ff; border-color: rgba(148,130,255,0.25); }
  [data-theme="light"] .qf-count        { background: rgba(91,33,182,0.08); color: #5B21B6; border-color: rgba(91,33,182,0.2); }
  [data-theme="light"] .qf-count-ok     { background: rgba(16,185,129,0.10); color: #059669; border-color: rgba(16,185,129,0.25); }
  [data-theme="light"] .qf-count-issue  { background: rgba(217,119,6,0.10);  color: #d97706; border-color: rgba(217,119,6,0.25); }
  [data-theme="light"] .qf-count-lost   { background: rgba(239,68,68,0.10);  color: #dc2626; border-color: rgba(239,68,68,0.25); }
  [data-theme="light"] .qf-count-aged   { background: rgba(59,130,246,0.10); color: #2563eb; border-color: rgba(59,130,246,0.25); }
  [data-theme="light"] .qf-count-retired{ background: rgba(139,92,246,0.10); color: #7c3aed; border-color: rgba(139,92,246,0.25); }

  /* -- Divider tr?n item ph?n c?ch lo?i filter -- */
  .sidebar-nav-divider-top { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 10px; }

  .status-bar { margin-top: 8px; }
  .status-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; font-size: 11px; border-radius: 4px; cursor: pointer; }
  .status-item:hover { background: var(--bg-hover); }
  .status-item.active { background: rgba(0,212,255,0.12) !important; box-shadow: inset 3px 0 0 var(--accent); }
  .status-item.active .status-name { color: var(--accent); font-weight: 600; }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .status-name { flex: 1; margin-left: 7px; color: var(--text-secondary); font-size: 11px; }
  .status-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-primary); }

  /* ====== TOOLBAR ====== */
  .toolbar { padding: 12px 16px; background: var(--bg-panel); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; overflow: visible; }
  .search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
  .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 13px; pointer-events: none; }
  .search-input { width: 100%; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; padding: 7px 10px 7px 32px; border-radius: var(--radius); outline: none; transition: border-color 0.2s; }
  .search-input::placeholder { color: var(--text-secondary); opacity: 1; }
  .search-input:hover, .filter-select:hover { border-color: var(--accent2) !important; background: var(--bg-hover); }
  .search-input:focus, .filter-select:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15) !important; outline: none; }
  .filter-select, .toolbar-btn { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); font-family: var(--font-main); font-size: 12px; padding: 7px 10px; border-radius: var(--radius); cursor: pointer; outline: none; transition: all 0.15s; }
  .filter-select:focus, .toolbar-btn:hover { border-color: var(--accent2); }
  .filter-select.has-value { border-color: var(--accent2); color: var(--accent); background: rgba(0,144,204,0.08); font-weight: 500; }
  .search-input.has-value { border-color: var(--accent2); background: rgba(0,144,204,0.05); }
  .toolbar-btn { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
  .toolbar-btn.primary { background: rgba(0,144,204,0.15); border-color: var(--accent2); color: var(--accent); }
  .toolbar-btn.primary:hover { background: rgba(0,144,204,0.25); }
  .toolbar-btn.success-btn { background: rgba(0,230,118,0.12); border-color: rgba(0,230,118,0.4); color: var(--success); }
  .toolbar-btn.success-btn:hover { background: rgba(0,230,118,0.22); }
  .toolbar-btn.toolbar-btn-import { background: rgba(160,100,255,0.12); border-color: rgba(160,100,255,0.5); color: #b47fff; }
  .toolbar-btn.toolbar-btn-import:hover { background: rgba(160,100,255,0.22); }
  [data-theme="light"] .toolbar-btn.toolbar-btn-import { background: rgba(124,58,237,0.07); border-color: rgba(124,58,237,0.3); color: #7c3aed; }
  [data-theme="light"] .toolbar-btn.toolbar-btn-import:hover { background: rgba(124,58,237,0.14); }
  .toolbar-sep { width: 1px; height: 24px; background: var(--border); }
  /* More menu dropdown */
  .more-menu-wrap { position: relative; }
  .more-menu-btn { display: flex; align-items: center; gap: 5px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); font-family: var(--font-main); font-size: 12px; padding: 7px 11px; border-radius: var(--radius); cursor: pointer; outline: none; transition: all 0.15s; white-space: nowrap; font-weight: 500; }
  .more-menu-btn:hover, .more-menu-btn.open { border-color: var(--accent2); color: var(--text-primary); background: var(--bg-hover); }
  .more-menu-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 200; min-width: 160px; padding: 4px; animation: dropIn 0.15s ease; }
  @keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  .more-menu-dropdown.open { display: block; }
  .more-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text-secondary); transition: all 0.12s; white-space: nowrap; background: none; border: none; width: 100%; text-align: left; font-family: var(--font-main); }
  .more-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  .more-menu-item.item-import { color: #b47fff; }
  .more-menu-item.item-import:hover { background: rgba(160,100,255,0.1); color: #b47fff; }
  .more-menu-sep { height: 1px; background: var(--border); margin: 3px 0; }
  .more-menu-item.item-success { color: var(--success); }
  .more-menu-item.item-success:hover { background: rgba(0,230,118,0.08); }
  [data-theme="light"] .more-menu-item.item-success { color: #059669; }
  [data-theme="light"] .more-menu-item.item-success:hover { background: rgba(5,150,105,0.07); }
  [data-theme="light"] .more-menu-item.item-import { color: #7c3aed; }
  [data-theme="light"] .more-menu-item.item-import:hover { background: rgba(124,58,237,0.07); color: #7c3aed; }
  .record-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; margin-left: auto; }
  .record-count span { color: var(--accent); }

  /* ====== TABLE ====== */
  .table-wrap { flex: 1; overflow: auto; background: var(--bg-base); }
  .data-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
  .data-table thead { position: sticky; top: 0; z-index: 50; }
  .data-table th {
    background: linear-gradient(180deg, #272738 0%, #21212e 100%) !important;
    border-bottom: 2px solid var(--accent2);
    border-top: 1px solid var(--border-light);
    border-right: 1px solid rgba(0,212,255,0.14);
    color: #c8d8f0;
    position: relative;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    white-space: normal;
    max-width: 120px;
  }
  .data-table th:last-child { border-right: none; }
  [data-theme="light"] .data-table th {
    background: linear-gradient(180deg, #EDE8DF 0%, #E4DDD2 100%) !important;
    border-bottom: 2px solid #C4B5FD;
    border-top: 1px solid #D6CFC5;
    border-right: 1px solid rgba(91,33,182,0.12);
    color: #3A2F28 !important;
    box-shadow: 0 2px 6px rgba(28,25,23,0.06);
  }
  [data-theme="light"] .data-table th:last-child { border-right: none; }
  .th-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 8px 10px; background: inherit; white-space: normal; word-break: break-word; text-align: center; line-height: 1.4; }
  .th-inner:hover { background: rgba(0,212,255,0.12); color: var(--accent); border-radius: 2px; }
  [data-theme="light"] .th-inner:hover { background: rgba(91,33,182,0.10); color: #5B21B6; border-radius: 2px; }
  .td-center { text-align: center !important; }
  .td-left   { text-align: left !important; }
  .sort-icon { color: var(--text-muted); font-size: 10px; }
  .data-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); padding: 7px 12px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--text-primary); transition: background 0.1s; text-align: center; }
  /* hover ? cu?i file */
  .data-table tr:nth-child(even) td { background: var(--bg-stripe); }
  .td-stt { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: center; min-width: 44px; }
  .td-id { font-family: var(--font-mono); font-size: 11px; color: var(--accent2); font-weight: 600; }
  .td-action { position: sticky; right: 0; z-index: 2; text-align: center; cursor: pointer; color: var(--text-muted); font-size: 14px; min-width: 36px; padding: 7px 6px; background: var(--bg-base); box-shadow: -3px 0 8px rgba(0,0,0,0.18); }
  .td-action:hover { color: var(--accent); background: var(--bg-hover); }
  .th-action { position: sticky; right: 0; z-index: 52; width: 36px; min-width: 36px; text-align: center; background: linear-gradient(180deg, #272738 0%, #21212e 100%) !important; box-shadow: -3px 0 8px rgba(0,0,0,0.18); }
  [data-theme="light"] .th-action { background: linear-gradient(180deg, #e8eef8 0%, #dde5f0 100%) !important; }

  .status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 4px; font-size: 10px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
  .status-ok     { background: rgba(0,230,118,0.12); color: var(--success); border: 1px solid rgba(0,230,118,0.2); }
  .status-broken { background: rgba(255,68,68,0.12);  color: var(--danger);  border: 1px solid rgba(255,68,68,0.2);  }
  .status-lost   { background: rgba(255,179,0,0.12);  color: var(--warn);    border: 1px solid rgba(255,179,0,0.2);  }
  .status-other    { background: rgba(122,139,170,0.1); color: var(--text-secondary); border: 1px solid var(--border); }
  .status-retired  { background: rgba(120,80,200,0.12); color: #a78bfa; border: 1px solid rgba(120,80,200,0.3); }
  .status-returned { background: rgba(100,160,200,0.12); color: #7ec8e3; border: 1px solid rgba(100,160,200,0.3); }
  .status-stored   { background: rgba(100,180,120,0.10); color: #6ee7b7; border: 1px solid rgba(100,180,120,0.25); }
  /* Tr?ng th?i trung gian: h?ng ch? b?n giao kho */
  .status-pending-handover { background: rgba(251,146,60,0.15); color: #fb923c; border: 1px solid rgba(251,146,60,0.35); animation: pulse-orange 2s infinite; }
  .status-pending-retire   { background: rgba(192,132,252,0.15); color: #c084fc; border: 1px solid rgba(192,132,252,0.4); }
  @keyframes pulse-orange { 0%,100%{border-color:rgba(251,146,60,0.35)} 50%{border-color:rgba(251,146,60,0.8)} }
  /* Banner b?n giao kho trong detail modal */
  .handover-banner { display:flex; align-items:center; gap:12px; background:rgba(251,146,60,0.12); border:1px solid rgba(251,146,60,0.4); border-radius:10px; padding:14px 16px; margin-bottom:16px; flex-wrap:wrap; }
  .handover-banner-icon { font-size:24px; flex-shrink:0; }
  .handover-banner-text { flex:1; min-width:200px; font-size:13px; line-height:1.5; color:var(--text-secondary); }
  .handover-banner-text strong { color:#fb923c; font-size:14px; }
  .handover-confirm-btn { flex-shrink:0; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none; border-radius:8px; padding:9px 18px; font-size:13px; font-weight:700; cursor:pointer; transition:opacity 0.2s,transform 0.1s; }
  .handover-confirm-btn:hover { opacity:0.88; transform:translateY(-1px); }
  .handover-confirm-btn:active { transform:translateY(0); }

  /* Age warning badge */
  .age-badge { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600; letter-spacing: 0.2px; }
  .age-warn  { background: rgba(255,179,0,0.12); color: var(--warn); border: 1px solid rgba(255,179,0,0.25); }
  .age-crit  { background: rgba(255,68,68,0.12);  color: var(--danger); border: 1px solid rgba(255,68,68,0.25); }
  .td-date-wrap { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.3; }
  .td-date-val  { white-space: nowrap; }

  /* ====== COLUMN PANEL ====== */
  .col-panel-overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.6); }
  .col-panel-overlay.open { display: flex; align-items: flex-start; justify-content: flex-end; }
  .col-panel { width: 320px; max-height: 100vh; overflow-y: auto; background: var(--bg-panel); border-left: 1px solid var(--border); padding: 20px; box-shadow: -8px 0 40px rgba(0,0,0,0.6); animation: slideInRight 0.2s ease; }
  @keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .panel-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .panel-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; }
  .col-group { margin-bottom: 16px; }
  .col-group-title { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
  .col-item { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 4px; cursor: pointer; transition: background 0.1s; }
  .col-item:hover { background: var(--bg-hover); }
  .col-item label { cursor: pointer; font-size: 12px; color: var(--text-secondary); flex: 1; }
  .col-item input[type=checkbox] { accent-color: var(--accent); width: 13px; height: 13px; }
  .col-item.checked label { color: var(--text-primary); }
  .col-actions { display: flex; gap: 8px; margin-bottom: 12px; }
  .col-action-btn { flex: 1; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; padding: 5px 10px; border-radius: var(--radius); cursor: pointer; text-align: center; }
  .col-action-btn:hover { border-color: var(--accent2); color: var(--accent); }

  /* ====== DETAIL MODAL ====== */
  .modal-overlay { display: none; position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; }
  .modal-overlay.open { display: flex; }
  .modal { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 10px; width: 700px; max-width: 95vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow), var(--glow); animation: modalIn 0.2s ease; }
  @keyframes modalIn { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
  .modal-header { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: sticky; top: 0; background: var(--bg-panel); z-index: 1; }
  .modal-id { font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; }
  .modal-name { font-size: 15px; font-weight: 600; margin-top: 2px; color: var(--text-primary); }
  .modal-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; line-height: 1; flex-shrink: 0; padding: 2px; }
  .modal-close:hover { color: var(--text-primary); }
  .modal-body { padding: 20px; }
  .detail-section { grid-column: 1/-1; margin-bottom: 16px; }
  .detail-section-title { font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--accent2); letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 12px; background: rgba(0,144,204,0.08); border-left: 2px solid var(--accent2); margin-bottom: 0; }
  .detail-row { display: grid; grid-template-columns: 140px 1fr; border-bottom: 1px solid var(--border); }
  .detail-row:last-child { border-bottom: none; }
  .detail-key { padding: 7px 12px; font-size: 11px; color: var(--text-muted); background: var(--bg-stripe); border-right: 1px solid var(--border); font-weight: 500; }
  .detail-val { padding: 7px 12px; font-size: 12px; color: var(--text-primary); word-break: break-all; }
  .detail-val.mono { font-family: var(--font-mono); font-size: 11px; }
  .detail-val.empty { color: var(--text-muted); font-style: italic; }
  .detail-val.editable { cursor: pointer; }
  .detail-val.editable:hover { background: rgba(0,144,204,0.08); outline: 1px solid var(--accent2); outline-offset: -2px; }
  .detail-val.editing { padding: 2px 6px; }

  /* ====== LOADING ====== */
  .state-center { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 300px; gap: 12px; color: var(--text-muted); }
  .state-icon { font-size: 36px; opacity: 0.3; }
  .state-text { font-size: 13px; }
  .loading-spinner { width: 24px; height: 24px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  @keyframes spin    { to { transform: rotate(360deg); } }
  @keyframes shimmer { 0%,100%{opacity:1} 50%{opacity:0.5} }

  /* ====== FOOTER ====== */
  .footer { padding: 6px 16px; background: var(--bg-panel); border-top: 1px solid var(--border-light); display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
  .footer-item { display: flex; align-items: center; gap: 6px; }
  .footer-link { color: var(--accent2); text-decoration: none; transition: color 0.15s; font-weight: 500; }
  .footer-link:hover { color: var(--accent); text-shadow: 0 0 8px rgba(var(--accent-rgb),0.5); }

  /* ====== SCAN BTN ? Hero CTA ====== */
  .scan-btn {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 2px;
    background: linear-gradient(135deg, rgba(100,255,218,0.18), rgba(87,203,255,0.12));
    border: 1.5px solid var(--accent);
    color: var(--accent);
    width: 44px; height: 44px;
    border-radius: 10px;
    cursor: pointer; flex-shrink: 0;
    transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 0 0 rgba(100,255,218,0.5), 0 2px 12px rgba(100,255,218,0.15);
    animation: scan-btn-pulse 2.6s ease-in-out infinite;
    overflow: visible;
  }
  /* V?ng s?ng ping b?n ngo?i */
  .scan-btn::before {
    content: '';
    position: absolute; inset: -5px;
    border-radius: 14px;
    border: 1.5px solid rgba(100,255,218,0.45);
    animation: scan-ring-expand 2.6s ease-out infinite;
    pointer-events: none;
  }
  /* Dot xanh "LIVE" g?c tr?n ph?i */
  .scan-btn::after {
    content: '';
    position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #00ff9d;
    border: 1.5px solid var(--bg-panel);
    box-shadow: 0 0 6px #00ff9d;
    animation: scan-dot-blink 1.4s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes scan-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(100,255,218,0.45), 0 2px 12px rgba(100,255,218,0.15); }
    50%       { box-shadow: 0 0 0 6px rgba(100,255,218,0), 0 2px 20px rgba(100,255,218,0.3); }
  }
  @keyframes scan-ring-expand {
    0%   { opacity: 0.7; transform: scale(1); }
    80%  { opacity: 0;   transform: scale(1.55); }
    100% { opacity: 0;   transform: scale(1.55); }
  }
  @keyframes scan-dot-blink {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.25; }
  }
  .scan-btn svg { transition: transform 0.2s; }
  .scan-btn:hover {
    background: linear-gradient(135deg, rgba(100,255,218,0.32), rgba(87,203,255,0.22));
    border-color: var(--accent);
    box-shadow: 0 0 0 0 transparent, 0 4px 24px rgba(100,255,218,0.4);
    transform: translateY(-1px) scale(1.06);
  }
  .scan-btn:hover svg { transform: scale(1.15); }
  .scan-btn:active { transform: scale(0.95); }
  .scan-btn.active {
    background: linear-gradient(135deg, rgba(0,255,157,0.22), rgba(100,255,218,0.16));
    border-color: var(--accent3);
    color: var(--accent3);
    animation: none;
  }
  .scan-btn.active::before { border-color: rgba(0,255,157,0.5); animation-duration: 1s; }
  /* Light mode */
  [data-theme="light"] .scan-btn {
    background: linear-gradient(135deg, rgba(91,33,182,0.12), rgba(124,58,237,0.08));
    border-color: #7C3AED; color: #5B21B6;
    box-shadow: 0 0 0 0 rgba(91,33,182,0.3), 0 2px 10px rgba(91,33,182,0.12);
    animation: scan-btn-pulse-light 2.6s ease-in-out infinite;
  }
  [data-theme="light"] .scan-btn::before { border-color: rgba(91,33,182,0.35); }
  [data-theme="light"] .scan-btn::after  { background: #059669; box-shadow: 0 0 6px #059669; border-color: #fff; }
  @keyframes scan-btn-pulse-light {
    0%,100% { box-shadow: 0 0 0 0 rgba(91,33,182,0.35), 0 2px 10px rgba(91,33,182,0.12); }
    50%     { box-shadow: 0 0 0 6px rgba(91,33,182,0), 0 2px 18px rgba(91,33,182,0.25); }
  }
  [data-theme="light"] .scan-btn:hover {
    background: linear-gradient(135deg, rgba(91,33,182,0.22), rgba(124,58,237,0.16));
    box-shadow: 0 0 0 0 transparent, 0 4px 20px rgba(91,33,182,0.3);
  }

  /* Mobile: to hon, n?i b?t hon */
  @media (max-width: 768px) {
    .scan-btn {
      width: 52px; height: 52px;
      border-radius: 14px;
      border-width: 2px;
    }
    .scan-btn::before { inset: -6px; border-radius: 18px; }
    .scan-btn::after  { top: -4px; right: -4px; width: 10px; height: 10px; }
    .scan-btn svg     { width: 22px; height: 22px; }
  }

  /* ====== BARCODE SCANNER ====== */
  .scanner-overlay { display: none; position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,0.85); align-items: center; justify-content: center; }
  .scanner-overlay.open { display: flex; }
  .scanner-modal { background: var(--bg-panel); border: 1px solid var(--border-light); border-radius: 12px; width: 460px; max-width: 95vw; box-shadow: var(--shadow), 0 0 40px rgba(0,212,255,0.15); animation: modalIn 0.2s ease; overflow: hidden; }
  .scanner-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,rgba(0,144,204,0.1),rgba(0,212,255,0.05)); }
  .scanner-title { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--text-primary); }
  .scanner-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 2px; transition: color 0.15s; }
  .scanner-close:hover { color: var(--danger); }
  .scanner-body { padding: 16px; }
  .scanner-viewport { position: relative; width: 100%; aspect-ratio: 4/3; background: #000; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); }
  .scanner-viewport.scanning { border-color: var(--accent); box-shadow: 0 0 20px rgba(0,212,255,0.25); }
  #scannerVideo { width: 100%; height: 100%; object-fit: cover; display: block; }
  .scanner-laser { position: absolute; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg,transparent,var(--accent),var(--accent3),var(--accent),transparent); border-radius: 2px; opacity: 0; box-shadow: 0 0 8px var(--accent); top: 50%; animation: none; }
  .scanner-viewport.scanning .scanner-laser { opacity: 1; animation: laser-scan 2s ease-in-out infinite; }
  @keyframes laser-scan { 0%,100% { top:15%; opacity:0.9; } 50% { top:85%; opacity:1; } }
  .scanner-corners { position: absolute; inset: 0; pointer-events: none; }
  .scanner-corners::before,.scanner-corners::after,.scanner-corner-br::before,.scanner-corner-br::after { content:''; position:absolute; width:22px; height:22px; border-color:var(--accent); border-style:solid; opacity:0.8; }
  .scanner-corners::before { top:10px; left:10px; border-width:2px 0 0 2px; border-radius:4px 0 0 0; }
  .scanner-corners::after  { top:10px; right:10px; border-width:2px 2px 0 0; border-radius:0 4px 0 0; }
  .scanner-corner-br::before { bottom:10px; left:10px; border-width:0 0 2px 2px; border-radius:0 0 0 4px; }
  .scanner-corner-br::after  { bottom:10px; right:10px; border-width:0 2px 2px 0; border-radius:0 0 4px 0; }
  .scanner-status { margin-top:12px; padding:8px 12px; border-radius:6px; font-family:var(--font-mono); font-size:11px; text-align:center; background:var(--bg-card); border:1px solid var(--border); color:var(--text-muted); min-height:36px; display:flex; align-items:center; justify-content:center; gap:8px; }
  .scanner-status.detecting { color:var(--accent); border-color:rgba(0,212,255,0.3); background:rgba(0,212,255,0.05); }
  .scanner-status.found { color:var(--success); border-color:rgba(0,230,118,0.3); background:rgba(0,230,118,0.07); }
  .scanner-status.error { color:var(--danger); border-color:rgba(255,68,68,0.3); background:rgba(255,68,68,0.07); }
  .scanner-result-box { display:none; margin-top:10px; padding:10px 14px; background:rgba(0,255,157,0.07); border:1px solid rgba(0,255,157,0.25); border-radius:6px; }
  .scanner-result-box.show { display:block; }
  .scanner-result-label { font-size:10px; color:var(--text-muted); font-family:var(--font-mono); letter-spacing:0.5px; margin-bottom:4px; }
  .scanner-result-value { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--success); word-break:break-all; }
  .scanner-actions { display:flex; gap:8px; margin-top:12px; }
  .scanner-action-btn { flex:1; padding:8px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:500; font-family:var(--font-main); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); transition:all 0.15s; text-align:center; }
  .scanner-action-btn:hover { border-color:var(--accent2); color:var(--accent); }
  .scanner-action-btn.primary { background:rgba(0,144,204,0.15); border-color:var(--accent2); color:var(--accent); font-weight:600; }
  .scanner-action-btn.primary:hover { background:rgba(0,144,204,0.28); }
  .scanner-tip { margin-top:10px; font-size:10px; color:var(--text-muted); text-align:center; font-family:var(--font-mono); line-height:1.6; }
  tr.barcode-highlight td { animation: highlight-pulse 1.5s ease; }
  @keyframes highlight-pulse { 0% { background:rgba(0,255,157,0.3) !important; } 100% { background:transparent; } }
  .scan-match-badge { display:inline-block; background:var(--accent3); color:#000; font-family:var(--font-mono); font-size:10px; font-weight:700; padding:1px 6px; border-radius:10px; margin-left:6px; }


  /* ====== EDIT FORM ====== */
  .edit-group { margin-bottom: 20px; }
  .edit-group-title { font-family:var(--font-mono); font-size:10px; letter-spacing:1px; color:var(--accent); font-weight:700; text-transform:uppercase; margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
  .edit-row { display:grid; grid-template-columns:120px 1fr; gap:8px 12px; align-items:center; margin-bottom:10px; }
  .edit-label { font-size:11px; color:var(--text-secondary); font-weight:500; text-align:right; padding-right:4px; }
  .edit-input,.edit-select,.edit-textarea { background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-mono); font-size:12px; padding:7px 10px; border-radius:var(--radius); outline:none; width:100%; transition:border-color 0.2s,box-shadow 0.2s; }
  .edit-textarea { resize:vertical; min-height:56px; font-family:var(--font-main); }
  .edit-input:focus,.edit-select:focus,.edit-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.12); }
  .edit-readonly { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); padding:7px 0; opacity:0.7; }
  .edit-setup-warn { background:rgba(255,179,0,0.08); border:1px solid rgba(255,179,0,0.3); border-radius:var(--radius); padding:12px 14px; margin-bottom:14px; font-size:12px; color:var(--warn); line-height:1.6; }
  .edit-setup-warn code { background:rgba(0,0,0,0.3); padding:2px 6px; border-radius:3px; font-size:11px; color:var(--accent); }

  /* -- Scrollbar ? Brittany Chiang style -- */
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: var(--bg-base); }
  ::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 10px;
    border: 2px solid var(--bg-base);
    transition: background 0.2s;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--accent); box-shadow: 0 0 8px rgba(100,255,218,0.4); }
  ::-webkit-scrollbar-corner { background: var(--bg-base); }
  * { scrollbar-width: thin; scrollbar-color: var(--border-light) var(--bg-base); }

  /* ====== VIEW TABS ====== */
  .view-tabs { display:flex; gap:1px; background:var(--border); border-radius:var(--radius); overflow:hidden; }
  .view-tab { padding:6px 12px; cursor:pointer; font-size:11px; font-weight:500; background:var(--bg-card); color:var(--text-muted); transition:all 0.15s; display:flex; align-items:center; gap:5px; }
  .view-tab.active { background:var(--bg-hover); color:var(--text-primary); }
  .view-tab:hover:not(.active) { background:var(--bg-hover); }

  /* ====== CARDS ====== */
  .cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; padding:16px; }
  .asset-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:14px; cursor:pointer; transition:all 0.2s; position:relative; overflow:hidden; }
  .asset-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,var(--accent2),var(--accent)); opacity:0; transition:opacity 0.2s; }
  .asset-card:hover { border-color:var(--border-light); transform:translateY(-1px); box-shadow:var(--shadow); }
  .asset-card:hover::before { opacity:1; }
  .card-id { font-family:var(--font-mono); font-size:10px; color:var(--accent2); font-weight:700; }
  .card-name { font-size:13px; font-weight:600; margin:4px 0 8px; color:var(--text-primary); line-height:1.3; }
  .card-row { display:flex; justify-content:space-between; margin-bottom:3px; }
  .card-key { font-size:10px; color:var(--text-muted); }
  .card-val { font-size:10px; color:var(--text-secondary); text-align:right; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ====== TOAST ====== */
  .toast-container { position:fixed; bottom:20px; right:20px; z-index:9998; display:flex; flex-direction:column; gap:8px; }
  .toast { background:var(--bg-panel); border:1px solid var(--border-light); color:var(--text-primary); font-size:12px; padding:10px 16px; border-radius:var(--radius); box-shadow:var(--shadow); animation:toastIn 0.3s ease; display:flex; align-items:center; gap:8px; max-width:320px; }
  .toast.success { border-left:3px solid var(--success); }
  .toast.error   { border-left:3px solid var(--danger);  }
  .toast.info    { border-left:3px solid var(--accent);  }
  .toast.warn    { border-left:3px solid var(--warn);    }
  @keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

  /* ====== MOBILE ====== */
  .mobile-menu-btn { display:none; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius); background:transparent; border:1px solid var(--border-light); color:var(--text-secondary); font-size:18px; cursor:pointer; flex-shrink:0; transition:all 0.2s; }
  .mobile-menu-btn:hover { border-color:var(--accent2); color:var(--accent); }
  .sidebar-overlay { display:none; position:fixed; inset:0; z-index:150; background:rgba(0,0,0,0.6); backdrop-filter:blur(2px); }
  .sidebar-overlay.open { display:block; }
  .sidebar-close-btn { display:none; }
  .mobile-toolbar-actions { display:none; }
  .mobile-filter-panel { display:none; padding:8px 10px; background:var(--bg-panel); border-bottom:1px solid var(--border); gap:8px; flex-wrap:wrap; }
  .mobile-filter-panel.open { display:flex; }
  .mobile-filter-panel .filter-select { flex:1 1 calc(50% - 4px); min-width:0; font-size:13px; padding:8px 6px; }
  .mobile-filter-panel .toolbar-btn { flex:1 1 calc(50% - 4px); justify-content:center; padding:8px; font-size:12px; }

  @media (max-width:768px) {
    .header { padding:0 12px; height:52px; gap:8px; }
    /* FIX: cho logo co l?i d? c?c n?t b?n ph?i (theme-toggle?) kh?ng b? d?y ra ngo?i */
    .header-logo { flex-shrink:1; min-width:0; overflow:hidden; }
    .header-title { overflow:hidden; text-overflow:ellipsis; }
    /* FIX: d?m b?o theme-toggle kh?ng b? co v? lu?n hi?n */
    .theme-toggle { flex-shrink:0; width:36px; height:36px; }
    /* ?n role badge tr?n m?n h?nh r?t nh? d? ti?t ki?m ch? */
    @media (max-width:480px) { .header-role-badge { display:none; } }
	.dept-selector-overlay {
        align-items: flex-start;
        overflow-x: hidden;   /* ch?n scroll ngang */
        overflow-y: auto;
    }
    .dept-selector-wrap {
        padding: 20px 16px;
        width: 100%;
        box-sizing: border-box;  /* padding kh?ng l?m tr?n */
    }
    .dept-grid {
        grid-template-columns: 1fr 1fr;  /* c? d?nh 2 c?t d?u nhau */
        gap: 10px;
    }
    .dept-card {
        padding: 16px 12px 14px;
    }
    .dept-card-badge {
        font-size: 16px;
    }
    .dept-selector-title {
        font-size: 18px;
    }
    /* Bulk bar mobile */
    .bulk-bar { padding: 8px 10px; gap: 6px; }
    .bulk-count { font-size: 11px; }
    .bulk-count span { font-size: 15px; }
    .bulk-field-select,
    .bulk-status-select,
    .bulk-value-input { min-width: 0; width: 100%; font-size: 12px; padding: 7px 8px; }
    .bulk-bar > * { flex-shrink: 1; min-width: 0; }
    .bulk-apply-btn, .bulk-cancel-btn { padding: 7px 10px; font-size: 11px; white-space: nowrap; flex-shrink: 0; }
    .bulk-value-wrap { width: 100%; }
    .mobile-menu-btn { display:flex; }
    .header-sub,.header-divider,.last-sync,.sync-dot { display:none; }
    .header .toolbar-btn, .header .sync-btn { display:none; }
    .header-logo { gap:8px; }
    .logo-badge { font-size:10px; padding:3px 6px; }
    .header-title { font-size:13px; }
    .sidebar { position:fixed; top:0; left:0; bottom:0; width:280px; z-index:200; transform:translateX(-100%); transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),box-shadow 0.28s ease; box-shadow:none; overflow-y:auto; display:flex; }
    .sidebar.open { transform:translateX(0); box-shadow:8px 0 40px rgba(0,0,0,0.5); }
    .layout { height:calc(100vh - 52px); overflow-x: hidden; }
    .main { width:100%; }
    .toolbar { padding:8px 10px; gap:6px; flex-wrap:wrap; overflow:visible; }
    .search-wrap { flex:1 1 calc(100% - 48px); max-width:100%; min-width:unset; order:1; }
    .scan-btn { order:1; flex-shrink:0; }
    .search-input { font-size: 16px; padding: 9px 10px 9px 34px; }
    .desktop-only { display:none !important; }
    .mobile-toolbar-actions { display:flex; gap:5px; order:2; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:1px; }
    .mobile-toolbar-actions::-webkit-scrollbar { display:none; }
    .mobile-toolbar-actions .sync-btn { flex:0 0 auto; justify-content:center; padding:8px 12px; font-size:12px; white-space:nowrap; }
    .mobile-toolbar-actions .toolbar-btn { flex:0 0 auto; justify-content:center; padding:8px 10px; font-size:12px; white-space:nowrap; }
    .view-tabs { order:1; margin-left:auto; }
    .view-tab { padding:8px 12px; font-size:12px; }
    .record-count { order:99; width:100%; margin-left:0; text-align:right; padding:2px 0; }
    .table-wrap { -webkit-overflow-scrolling:touch; }
    .sidebar:not(.open) { border-right: none; }
    .data-table { font-size:11px; }

    .data-table td,.th-inner { padding:8px 8px; }
    .data-table td { min-height:40px; }
    .td-action { min-width:40px; padding:8px; }
    .cards-grid { grid-template-columns:1fr; padding:10px; gap:10px; }
    .asset-card { padding:12px; }
    .modal-overlay { align-items:flex-end; padding:0; }
    .modal { width:100%; max-width:100%; max-height:90vh; border-radius:16px 16px 0 0; animation:modalSlideUp 0.25s ease; }
    @keyframes modalSlideUp { from { transform:translateY(100%); } to { transform:translateY(0); } }
    .modal-header { padding:14px 16px 10px; }
    .modal-body { padding:14px 16px; }
    .detail-row { grid-template-columns:1fr; }
    .detail-key { padding:5px 12px 2px; border-right:none; border-bottom:none; background:var(--bg-stripe); font-size:10px; }
    .detail-val { padding:2px 12px 7px; font-size:12px; }
    .col-panel-overlay { align-items:flex-end; }
    .col-panel { width:100%; max-height:75vh; border-left:none; border-top:1px solid var(--border); border-radius:16px 16px 0 0; animation:modalSlideUp 0.25s ease; }
    .filter-chips-bar { padding:6px 10px; }
    .footer { padding:4px 10px; font-size:9px; gap:10px; }
    .nav-item { min-height:44px; padding:10px 12px; font-size:13px; }
    .theme-toggle { width:40px; height:40px; }
    .filter-chip-close { padding:4px; }
    .sidebar-close-btn { display:flex !important; align-items:center; gap:8px; padding:14px 16px 6px; color:var(--text-muted); font-size:12px; cursor:pointer; border-bottom:1px solid var(--border); margin-bottom:4px; }
    .sidebar-close-btn:hover { color:var(--text-primary); }
  }
  @media (max-width:380px) {
    .dept-grid { grid-template-columns:1fr; }
  }
  @media (min-width:480px) and (max-width:768px) { .cards-grid { grid-template-columns:repeat(2,1fr); } }

  /* ====== KI?M K? MODULE ====== */
  .kk-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(0,0,0,0.8); align-items:center; justify-content:center; }
  .kk-overlay.open { display:flex; }
  .kk-modal { background:var(--bg-panel); border:1px solid var(--border-light); border-radius:12px; width:860px; max-width:96vw; max-height:92vh; display:flex; flex-direction:column; box-shadow:var(--shadow),0 0 60px rgba(0,230,118,0.1); animation:modalIn 0.22s ease; }
  .kk-header { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:linear-gradient(135deg,rgba(0,230,118,0.06),transparent); }
  .kk-title { font-size:16px; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:10px; }
  .kk-title-badge { background:rgba(0,230,118,0.15); color:var(--success); border:1px solid rgba(0,230,118,0.35); font-family:var(--font-mono); font-size:10px; font-weight:700; padding:3px 8px; border-radius:4px; }
  .kk-body { flex:1; overflow-y:auto; padding:20px 22px; }
  .kk-progress-bar-wrap { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:16px 20px; margin-bottom:20px; }
  .kk-progress-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
  .kk-session-name { font-size:14px; font-weight:700; color:var(--text-primary); }
  .kk-progress-nums { font-family:var(--font-mono); font-size:13px; }
  .kk-progress-nums .done { color:var(--success); font-weight:700; }
  .kk-progress-nums .total { color:var(--text-muted); }
  .kk-bar-outer { height:8px; background:var(--bg-hover); border-radius:4px; overflow:hidden; }
  .kk-bar-inner { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--success),var(--accent3)); transition:width 0.4s ease; }
  .kk-meta { display:flex; gap:20px; margin-top:10px; font-size:11px; color:var(--text-muted); font-family:var(--font-mono); }
  .kk-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .kk-search { flex:1; min-width:180px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-family:var(--font-mono); font-size:12px; padding:7px 10px 7px 32px; border-radius:var(--radius); outline:none; }
  .kk-search:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.12); }
  .kk-search-wrap { position:relative; flex:1; min-width:180px; }
  .kk-search-icon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-muted); pointer-events:none; }
  .kk-filter-btn { padding:7px 12px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-card); color:var(--text-secondary); font-size:11px; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
  .kk-filter-btn:hover,.kk-filter-btn.active { border-color:var(--accent2); color:var(--accent); background:rgba(0,144,204,0.08); }
  .kk-filter-btn.checked-btn.active { border-color:rgba(0,230,118,0.4); color:var(--success); background:rgba(0,230,118,0.08); }
  .kk-filter-btn.unchecked-btn.active { border-color:rgba(255,179,0,0.4); color:var(--warn); background:rgba(255,179,0,0.08); }
  .kk-table { width:100%; border-collapse:collapse; font-size:12px; }
  .kk-table th { background:var(--bg-card); border-bottom:2px solid var(--border); color:var(--text-secondary); padding:8px 12px; text-align:left; font-size:11px; font-weight:600; white-space:nowrap; position:sticky; top:0; z-index:2; }
  .kk-table td { border-bottom:1px solid var(--border); padding:8px 12px; vertical-align:middle; color:var(--text-primary); }
  .kk-table tr:hover td { background:var(--bg-hover); }
  .kk-table tr.kk-checked td { background:rgba(0,230,118,0.05) !important; }
  .kk-table tr.kk-shared-done td { opacity:0.5; }
  .kk-check-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:var(--radius);
    font-size:11px; font-weight:600; cursor:pointer;
    transition:all 0.15s; border:1px solid; white-space:nowrap;
  }
  .kk-check-btn.unchecked { border-color:var(--border); background:var(--bg-card); color:var(--text-muted); }
  .kk-check-btn.unchecked:hover { border-color:rgba(0,230,118,0.5); color:var(--success); background:rgba(0,230,118,0.08); }
  .kk-check-btn.checked { border-color:rgba(0,230,118,0.4); background:rgba(0,230,118,0.1); color:var(--success); }
  .kk-check-btn.checked:hover { border-color:rgba(255,68,68,0.4); color:var(--danger); background:rgba(255,68,68,0.08); }
  .kk-asset-name { font-weight:600; color:var(--text-primary); }
  .kk-asset-id { font-family:var(--font-mono); font-size:10px; color:var(--accent2); }
  .kk-checked-time { font-family:var(--font-mono); font-size:10px; color:var(--success); }
  .kk-footer { padding:14px 22px; border-top:1px solid var(--border); display:flex; gap:8px; align-items:center; flex-shrink:0; background:var(--bg-panel); }
  .kk-session-select { background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:12px; padding:7px 10px; border-radius:var(--radius); outline:none; flex:0 0 auto; min-width:160px; }
  .kk-session-select:focus { border-color:var(--accent); }
  .kk-session-info { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); flex:1; }

  /* New session form */
  .kk-new-session { background:rgba(0,144,204,0.06); border:1px solid rgba(0,144,204,0.2); border-radius:8px; padding:14px 16px; margin-bottom:18px; }
  .kk-new-session-title { font-family:var(--font-mono); font-size:10px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
  .kk-new-row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .kk-new-input { background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:12px; padding:7px 10px; border-radius:var(--radius); outline:none; flex:1; min-width:140px; }
  .kk-new-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.1); }

  /* ====== KK SCAN MODE ====== */
  .kk-scan-zone { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:16px; }
  .kk-scan-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  .kk-scan-title { font-size:13px; font-weight:700; color:var(--text-primary); flex:1; }
  .kk-scan-badge { font-family:var(--font-mono); font-size:10px; background:rgba(0,230,118,0.12); color:var(--success); border:1px solid rgba(0,230,118,0.3); padding:2px 8px; border-radius:4px; }
  .kk-scan-video-wrap { position:relative; width:100%; max-width:360px; margin:0 auto 12px; background:#000; border-radius:8px; overflow:hidden; aspect-ratio:4/3; }
  .kk-scan-video { width:100%; height:100%; object-fit:cover; display:block; }
  .kk-scan-crosshair { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  .kk-scan-crosshair::before { content:''; display:block; width:60%; height:40%; border:2px solid rgba(100,255,218,0.7); border-radius:6px; box-shadow:0 0 0 9999px rgba(0,0,0,0.3); }
  .kk-scan-status { text-align:center; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); padding:6px 0; min-height:24px; }
  .kk-scan-status.found { color:var(--success); }
  .kk-scan-status.error { color:var(--danger); }
  .kk-scan-btns { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
  /* Result overlay tr?n camera */
  .kk-result-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; pointer-events:none; opacity:0; transition:opacity 0.15s; z-index:10; }
  .kk-result-overlay.show { opacity:1; }
  .kk-result-overlay.ok  { background:rgba(0,200,83,0.72); }
  .kk-result-overlay.warn{ background:rgba(255,152,0,0.78); }
  .kk-result-overlay.err { background:rgba(255,68,68,0.72); }
  .kk-overlay-icon { font-size:42px; line-height:1; }
  .kk-overlay-name { font-size:14px; font-weight:700; color:#fff; text-align:center; padding:0 12px; text-shadow:0 1px 4px rgba(0,0,0,0.5); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kk-overlay-id   { font-size:11px; color:rgba(255,255,255,0.85); font-family:var(--font-mono); }
  /* Auto-confirm toggle */
  .kk-autoconfirm-row { display:flex; align-items:center; justify-content:space-between; background:rgba(0,212,255,0.06); border:1px solid rgba(0,212,255,0.18); border-radius:8px; padding:9px 14px; margin-bottom:10px; gap:10px; }
  .kk-autoconfirm-label { font-size:12px; color:var(--text-secondary); flex:1; line-height:1.4; }
  .kk-autoconfirm-label strong { color:var(--accent); font-size:12px; }
  .kk-toggle { position:relative; display:inline-flex; width:40px; height:22px; flex-shrink:0; }
  .kk-toggle input { opacity:0; width:0; height:0; }
  .kk-toggle-slider { position:absolute; inset:0; background:var(--bg-panel); border:1px solid var(--border); border-radius:22px; cursor:pointer; transition:background 0.2s; }
  .kk-toggle-slider::before { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#888; transition:left 0.2s,background 0.2s; }
  .kk-toggle input:checked + .kk-toggle-slider { background:rgba(0,212,255,0.18); border-color:var(--accent); }
  .kk-toggle input:checked + .kk-toggle-slider::before { left:21px; background:var(--accent); }
  /* Remaining badge trong scan tab */
  .kk-scan-remaining { text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:8px; }
  .kk-scan-remaining .rem-num { color:var(--warn); font-weight:700; font-size:13px; }
  .kk-scan-remaining .rem-done { color:var(--success); }
  /* Manual input */
  .kk-manual-row { display:flex; gap:6px; align-items:center; margin-top:10px; }
  .kk-manual-input { flex:1; background:var(--bg-card); border:1px solid var(--border); color:var(--text-primary); font-size:12px; padding:7px 10px; border-radius:var(--radius); outline:none; font-family:var(--font-mono); }
  .kk-manual-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,212,255,0.1); }
  .kk-manual-input::placeholder { color:var(--text-muted); font-size:11px; }
  .kk-manual-btn { background:rgba(0,212,255,0.1); border:1px solid rgba(0,212,255,0.3); color:var(--accent); font-size:13px; padding:7px 14px; border-radius:var(--radius); cursor:pointer; white-space:nowrap; transition:background 0.15s; }
  .kk-manual-btn:hover { background:rgba(0,212,255,0.2); }

  /* Confirm card ? hi?n sau khi scan th?nh c?ng */
  .kk-confirm-card { display:none; background:rgba(0,230,118,0.06); border:1px solid rgba(0,230,118,0.25); border-radius:10px; padding:16px; margin-bottom:16px; animation:fadeIn 0.2s ease; }
  .kk-confirm-card.open { display:block; }
  .kk-confirm-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
  .kk-confirm-icon { font-size:28px; flex-shrink:0; }
  .kk-confirm-info { flex:1; }
  .kk-confirm-name { font-size:14px; font-weight:700; color:var(--text-primary); }
  .kk-confirm-id { font-family:var(--font-mono); font-size:11px; color:var(--accent2); margin-top:2px; }
  .kk-confirm-meta { font-size:11px; color:var(--text-secondary); margin-top:4px; }
  .kk-confirm-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
  @media(max-width:560px){ .kk-confirm-fields { grid-template-columns:1fr; } }

  /* ====== KK MOBILE ====== */
  @media (max-width:768px) {
    /* 1. Bottom sheet ? gi?ng c?c modal kh?c */
    .kk-overlay { align-items:flex-end; padding:0; }
    .kk-modal {
      width:100%; max-width:100%;
      border-radius:20px 20px 0 0;
      max-height:93vh;
      animation:modalSlideUp 0.28s cubic-bezier(0.4,0,0.2,1);
    }
    /* Drag handle hint */
    .kk-header::before {
      content:''; display:block; position:absolute; top:8px; left:50%; transform:translateX(-50%);
      width:36px; height:4px; border-radius:2px; background:var(--border);
    }
    .kk-header { position:relative; padding:18px 14px 10px; }

    /* 2. Body padding nh? hon */
    .kk-body { padding:12px 14px; }

    /* 3. Progress block compact */
    .kk-progress-bar-wrap { padding:10px 12px; margin-bottom:12px; }
    .kk-session-name { font-size:13px; }
    .kk-progress-nums { font-size:12px; }
    .kk-meta { flex-wrap:wrap; gap:5px 12px; font-size:10px; }

    /* 4. New session form compact */
    .kk-new-session { padding:10px 12px; margin-bottom:12px; }

    /* 5. Scan zone compact */
    .kk-scan-zone { padding:10px 12px; margin-bottom:12px; }
    .kk-scan-header { margin-bottom:8px; flex-wrap:wrap; gap:6px; }

    /* 6. Camera full width ? quan tr?ng nh?t khi c?m di?n tho?i scan */
    .kk-scan-video-wrap { max-width:100%; border-radius:10px; margin-bottom:8px; }

    /* 7. Tab buttons ? touch target l?n hon */
    .kk-tab-btn { padding:9px 14px; font-size:12px; }

    /* 8. Auto-confirm toggle row compact */
    .kk-autoconfirm-row { padding:8px 10px; margin-bottom:8px; }
    .kk-autoconfirm-label { font-size:11px; }

    /* 9. Scan buttons full width */
    .kk-scan-btns { gap:8px; }
    .kk-scan-btns .kk-confirm-btn { flex:1; justify-content:center; min-height:44px; font-size:13px; }

    /* 10. Confirm card: khi m? th? ?n scan zone + progress d? chi?m to?n b? kh?ng gian */
    .kk-body:has(.kk-confirm-card.open) .kk-scan-zone,
    .kk-body:has(.kk-confirm-card.open) .kk-progress-bar-wrap,
    .kk-body:has(.kk-confirm-card.open) .kk-new-session { display:none; }

    /* 11. Confirm card full-screen feel */
    .kk-confirm-card { padding:14px 14px 20px; margin-bottom:0; border-radius:12px; }
    .kk-confirm-name { font-size:15px; }
    .kk-confirm-id, .kk-confirm-meta { font-size:11px; }

    /* 12. Confirm action buttons full-width stacked */
    .kk-confirm-actions { flex-direction:column; gap:8px; }
    .kk-confirm-actions .kk-confirm-btn {
      flex:unset; width:100%; justify-content:center;
      padding:13px 16px; font-size:14px; font-weight:700;
    }

    /* 13. Table ?n b?t c?t cho v?a m?n h?nh */
    .kk-table { font-size:11px; }
    .kk-table th, .kk-table td { padding:7px 8px; }
    /* ?n c?t STT v? H?ng/Serial */
    .kk-table th:nth-child(1), .kk-table td:nth-child(1),
    .kk-table th:nth-child(4), .kk-table td:nth-child(4) { display:none; }
    /* N?t ki?m nh? hon */
    .kk-check-btn { padding:6px 8px; font-size:11px; }

    /* 14. Footer compact */
    .kk-footer { padding:10px 12px; gap:6px; flex-wrap:wrap; }
    .kk-session-select { flex:1 1 auto; min-width:0; font-size:12px; padding:7px 8px; }
    .kk-session-info { width:100%; order:3; font-size:10px; }

    /* 15. Manual input row */
    .kk-manual-row { margin-top:8px; }
    .kk-manual-input { font-size: 16px; padding: 9px 10px; }
    .kk-manual-btn   { padding: 9px 16px; font-size: 14px; min-height: 44px; }

    /* 16. Submit zone */
    .kk-submit-zone { flex-direction:column; padding:12px; }
    .kk-submit-btn { width:100%; justify-content:center; }
  }

  @media (max-width:400px) {
    /* M?n nh?: ?n th?m c?t V? tr? */
    .kk-table th:nth-child(5), .kk-table td:nth-child(5) { display:none; }
    /* Tab buttons nh? hon */
    .kk-tab-btn { padding:8px 10px; font-size:11px; }
    .kk-tab-btns { font-size:11px; }
  }
  .kk-confirm-field label { display:block; font-size:11px; color:var(--text-secondary); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
  .kk-confirm-field select, .kk-confirm-field input {
    width:100%; background:var(--bg-card); border:1.5px solid var(--border);
    color:var(--text-primary); font-size:14px; font-weight:500; padding:10px 12px;
    border-radius:10px; outline:none; font-family:var(--font-main); box-sizing:border-box;
    transition:border-color 0.15s, box-shadow 0.15s;
  }
  .kk-confirm-field select:focus, .kk-confirm-field input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,152,219,0.13); }
  .kk-confirm-note-row { margin-bottom:12px; }
  .kk-confirm-note-row label { display:block; font-size:11px; color:var(--text-secondary); font-weight:700; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
  .kk-confirm-note-row input { width:100%; background:var(--bg-card); border:1.5px solid var(--border); color:var(--text-primary); font-size:14px; font-weight:500; padding:10px 12px; border-radius:10px; outline:none; box-sizing:border-box; font-family:var(--font-main); transition:border-color 0.15s, box-shadow 0.15s; }
  .kk-confirm-note-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,152,219,0.13); }
  .kk-confirm-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .kk-confirm-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius); font-size:12px; font-weight:600; cursor:pointer; border:1px solid; transition:all 0.15s; white-space:nowrap; }
  .kk-confirm-btn.ok { background:rgba(0,230,118,0.15); border-color:rgba(0,230,118,0.4); color:var(--success); }
  .kk-confirm-btn.ok:hover { background:rgba(0,230,118,0.28); }
  .kk-confirm-btn.skip { background:var(--bg-card); border-color:var(--border); color:var(--text-secondary); }
  .kk-confirm-btn.skip:hover { border-color:var(--accent2); color:var(--text-primary); }
  .kk-confirm-not-found { background:rgba(255,179,0,0.08); border:1px solid rgba(255,179,0,0.3); border-radius:8px; padding:14px 16px; margin-bottom:16px; display:none; }
  .kk-confirm-not-found.open { display:block; }

  /* Submit to Sheets */
  .kk-submit-zone { background:rgba(100,255,218,0.04); border:1px solid rgba(100,255,218,0.15); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
  .kk-submit-info { flex:1; font-size:12px; color:var(--text-secondary); }
  .kk-submit-info strong { color:var(--text-primary); }
  .kk-submit-btn { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:var(--radius); font-size:12px; font-weight:700; cursor:pointer; border:1px solid rgba(100,255,218,0.4); background:rgba(100,255,218,0.12); color:var(--accent); transition:all 0.15s; white-space:nowrap; }
  .kk-submit-btn:hover { background:rgba(100,255,218,0.22); box-shadow:0 0 14px rgba(100,255,218,0.2); }
  .kk-submit-btn:disabled { opacity:0.5; cursor:not-allowed; }
  .kk-tab-btns { display:flex; gap:0; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
  .kk-tab-btn { padding:6px 14px; font-size:11px; font-weight:600; cursor:pointer; background:var(--bg-card); color:var(--text-secondary); border:none; border-right:1px solid var(--border); transition:all 0.15s; white-space:nowrap; }
  .kk-tab-btn:last-child { border-right:none; }
  .kk-tab-btn.active { background:rgba(0,144,204,0.15); color:var(--accent); }
  .kk-manual-search { display:none; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:14px; }
  .kk-manual-search.open { display:block; }
  .kk-manual-input { width:100%; background:var(--input-bg); border:1px solid var(--input-border); color:var(--text-primary); font-family:var(--font-mono); font-size:12px; padding:8px 12px; border-radius:var(--radius); outline:none; margin-bottom:8px; box-sizing:border-box; }
  .kk-manual-input:focus { border-color:var(--accent); }
  .kk-manual-results { max-height:160px; overflow-y:auto; }
  .kk-manual-row { padding:8px 10px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:10px; }
  .kk-manual-row:hover { background:var(--bg-hover); }
  .kk-manual-row-id { font-family:var(--font-mono); font-size:10px; color:var(--accent2); width:70px; flex-shrink:0; }
  .kk-manual-row-name { font-size:12px; color:var(--text-primary); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .kk-manual-row-loc { font-size:10px; color:var(--text-muted); }

  /* ====== QR MODAL ====== */
  .qr-overlay { display:none; position:fixed; inset:0; z-index:1300; background:rgba(0,0,0,0.8); align-items:center; justify-content:center; }
  .qr-overlay.open { display:flex; }
  .qr-modal { background:var(--bg-panel); border:1px solid var(--border-light); border-radius:12px; width:340px; max-width:95vw; box-shadow:var(--shadow); animation:modalIn 0.2s ease; overflow:hidden; }
  .qr-header { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
  .qr-title { font-size:14px; font-weight:600; color:var(--text-primary); }
  .qr-body { padding:20px; text-align:center; }
  .qr-img-wrap { background:#fff; border-radius:8px; padding:12px; display:inline-block; margin-bottom:12px; }
  .qr-img-wrap img { display:block; width:160px; height:160px; }
  .qr-asset-id { font-family:var(--font-mono); font-size:14px; font-weight:700; color:var(--accent); margin-bottom:4px; }
  .qr-asset-name { font-size:12px; color:var(--text-secondary); margin-bottom:16px; }
  .qr-actions { display:flex; gap:8px; justify-content:center; }
  .qr-btn { padding:8px 16px; border-radius:var(--radius); font-size:12px; font-weight:600; cursor:pointer; border:1px solid; transition:all 0.15s; }
  .qr-btn-print { background:rgba(0,144,204,0.15); border-color:var(--accent2); color:var(--accent); }
  .qr-btn-print:hover { background:rgba(0,144,204,0.28); }
  .qr-btn-close { background:var(--bg-card); border-color:var(--border); color:var(--text-secondary); }
  .qr-btn-close:hover { border-color:var(--border-light); color:var(--text-primary); }

  /* ====== ADD NEW MODAL (mobile) ====== */
  .add-overlay { display:none; position:fixed; inset:0; z-index:1050; background:rgba(0,0,0,0.75); align-items:center; justify-content:center; }
  .add-overlay.open { display:flex; }

  /* ====== ADD NEW DRAWER (desktop only) ====== */
  .add-drawer-backdrop {
    display:none; position:fixed; inset:0; z-index:1048;
    background:rgba(0,0,0,0.55); backdrop-filter:blur(2px);
    opacity:0; transition:opacity 0.3s ease;
  }
  .add-drawer-backdrop.open { display:block; opacity:1; }

  .add-drawer {
    position:fixed; top:0; right:-660px; width:640px; height:100vh;
    z-index:1049; background:var(--bg-panel);
    border-left:1px solid var(--border-light);
    box-shadow:-12px 0 48px rgba(0,0,0,0.5), -2px 0 0 rgba(100,255,218,0.06);
    display:flex; flex-direction:column;
    transition:right 0.32s cubic-bezier(0.4,0,0.2,1);
  }
  .add-drawer.open { right:0; }

  .add-drawer-header {
    padding:18px 22px 14px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0; background:var(--bg-panel);
    position:sticky; top:0; z-index:2;
  }
  .add-drawer-title-row { display:flex; align-items:center; gap:10px; }
  .add-drawer-badge {
    font-family:var(--font-mono); font-size:10px; font-weight:700;
    padding:3px 9px; border-radius:4px; letter-spacing:0.5px;
    background:rgba(100,255,218,0.12); color:var(--success);
    border:1px solid rgba(100,255,218,0.3);
  }
  .add-drawer-title { font-size:15px; font-weight:700; color:var(--text-primary); }
  .add-drawer-sub { font-size:11px; color:var(--text-muted); font-family:var(--font-mono); margin-top:2px; }

  .add-drawer-body {
    flex:1; overflow-y:auto; padding:18px 22px;
    scrollbar-width:thin; scrollbar-color:var(--border-light) transparent;
  }
  .add-drawer-body::-webkit-scrollbar { width:5px; }
  .add-drawer-body::-webkit-scrollbar-thumb { background:var(--border-light); border-radius:10px; }

  .add-drawer-footer {
    padding:14px 22px; border-top:1px solid var(--border);
    display:flex; gap:10px; align-items:center; flex-shrink:0;
    background:var(--bg-panel);
  }

  /* 2-column grid b?n trong drawer */
  .drawer-group { margin-bottom:22px; }
  .drawer-group-title {
    font-family:var(--font-mono); font-size:10px; letter-spacing:1px;
    color:var(--accent); font-weight:700; text-transform:uppercase;
    margin-bottom:12px; padding-bottom:7px; border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:7px;
  }
  .drawer-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:14px 18px;
  }
  .drawer-field { display:flex; flex-direction:column; gap:5px; }
  .drawer-field.span2 { grid-column:1 / -1; }
  .drawer-field-label {
    font-size:11px; color:var(--text-secondary); font-weight:500;
    display:flex; align-items:center; gap:4px;
  }
  .drawer-field-label .req { color:var(--danger); font-size:13px; line-height:1; }

  /* ====== DEPT SELECTOR ====== */
  /* Lu?n d?ng dark theme b?t k? setting ngu?i d?ng */
  .dept-selector-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: #13131a;
    align-items: center; justify-content: center; flex-direction: column;
    overflow-y: auto;  /* th?m d?ng n?y */
	}
  .dept-selector-overlay::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
    background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.04) 2px,rgba(0,0,0,0.04) 4px);
  }
  .dept-selector-overlay.open { display: flex; }
  .dept-selector-wrap { width: 100%; max-width: 700px; padding: 28px 24px; position: relative; z-index: 2; }
  .dept-selector-header { text-align: center; margin-bottom: 36px; }
  .dept-org-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0090cc, #00d4ff);
    color: #000; font-family: 'JetBrains Mono', monospace; font-weight: 800;
    font-size: 12px; padding: 5px 14px; border-radius: 5px;
    letter-spacing: 1.5px; margin-bottom: 14px;
  }
  .dept-org-name {
    font-size: 11px; color: #7dd3fc; font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px; margin-bottom: 20px;
    text-transform: uppercase;
  }
  .dept-selector-title {
    font-size: 24px; font-weight: 700; color: #f1f5f9;
    margin-bottom: 6px;
  }
  .dept-selector-sub {
    font-size: 11px; color: #94a3b8;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px;
  }
  .dept-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
  }
  .dept-card {
    background: #1c1c26; border: 1px solid #2e2e42;
    border-radius: 10px; padding: 22px 16px 18px; cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    text-align: center; position: relative; overflow: hidden;
  }
  .dept-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--dept-color); opacity: 0.6; transition: opacity 0.2s;
  }
  .dept-card::after {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--dept-color-rgb),0.08) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.25s;
  }
  .dept-card:hover {
    border-color: var(--dept-color);
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 30px rgba(var(--dept-color-rgb), 0.12);
  }
  .dept-card:hover::before { opacity: 1; }
  .dept-card:hover::after  { opacity: 1; }
  .dept-card-badge {
    display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 800;
    font-size: 20px; color: var(--dept-color);
    text-shadow: 0 0 24px currentColor;
    margin-bottom: 6px; letter-spacing: 1px; position: relative; z-index: 1;
  }
  .dept-card-name {
    font-size: 11px; color: #cbd5e1; font-weight: 500;
    line-height: 1.5; margin-bottom: 12px; position: relative; z-index: 1;
  }
  .dept-card-status {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 3px 9px; border-radius: 20px; position: relative; z-index: 1;
  }
  .dept-card-status.ready  { background: rgba(0,230,118,0.1);  color: #00e676; border: 1px solid rgba(0,230,118,0.25); }
  .dept-card-status.pending{ background: rgba(255,179,0,0.08); color: #ffb300; border: 1px solid rgba(255,179,0,0.2);  }
  .dept-card-arrow {
    position: absolute; bottom: 10px; right: 13px;
    font-size: 12px; color: #475569; opacity: 0;
    transition: opacity 0.2s, transform 0.2s; z-index: 1;
  }
  .dept-card:hover .dept-card-arrow { opacity: 1; transform: translateX(4px); }
  .dept-selector-footer {
    text-align: center; margin-top: 22px;
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b;
    letter-spacing: 0.3px;
  }

  /* Switch dept button in header */
  .switch-dept-btn {
    display: flex; align-items: center; gap: 6px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 11px; font-family: var(--font-mono);
    padding: 5px 10px; border-radius: var(--radius);
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .switch-dept-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,212,255,0.07); }

  @media (max-width:768px) {
    .switch-dept-label { display: none; }
    .switch-dept-btn { width: 34px; height: 34px; padding: 0; justify-content: center; font-size: 16px; }
  }

  /* ====== BULK ACTION ====== */
  .bulk-bar {
    display: none; position: sticky; bottom: 0; z-index: 80;
    background: var(--bg-panel); border-top: 2px solid var(--accent2);
    padding: 10px 16px; align-items: center; gap: 10px; flex-wrap: wrap;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
    animation: slideUpBar 0.2s ease;
  }
  @keyframes slideUpBar { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
  .bulk-bar.visible { display: flex; }
  .bulk-count { font-family: var(--font-mono); font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
  .bulk-count span { font-size: 18px; }
  .bulk-sep { width:1px; height:24px; background:var(--border); }
  .bulk-label { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
  .bulk-status-select {
    background: var(--input-bg); border: 1px solid var(--accent2);
    color: var(--text-primary); font-size: 12px; padding: 7px 12px;
    border-radius: var(--radius); outline: none; cursor: pointer; min-width: 180px;
  }
  .bulk-status-select:focus { border-color: var(--accent); }
  .bulk-apply-btn {
    background: rgba(0,230,118,0.15); border: 1px solid rgba(0,230,118,0.4);
    color: var(--success); font-size: 12px; font-weight: 700;
    padding: 7px 18px; border-radius: var(--radius); cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
  }
  .bulk-apply-btn:hover { background: rgba(0,230,118,0.28); }
  .bulk-apply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  .bulk-cancel-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-muted); font-size: 12px;
    padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
    transition: all 0.15s; white-space: nowrap;
  }
  .bulk-cancel-btn:hover { border-color: var(--danger); color: var(--danger); }
  .bulk-progress { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
  .bulk-field-select {
    background: var(--input-bg); border: 1px solid var(--border-light);
    color: var(--text-primary); font-size: 12px; padding: 7px 12px;
    border-radius: var(--radius); outline: none; cursor: pointer; min-width: 160px;
  }
  .bulk-field-select:focus { border-color: var(--accent); }
  .bulk-value-wrap { display: flex; align-items: center; gap: 6px; }
  .bulk-value-input {
    background: var(--input-bg); border: 1px solid var(--accent2);
    color: var(--text-primary); font-size: 12px; padding: 7px 10px;
    border-radius: var(--radius); outline: none; min-width: 180px;
  }
  .bulk-value-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb),0.15); }

  /* Checkbox column in table */
  .th-cb { width: 36px; min-width: 36px; text-align: center !important; padding: 0 !important; }
  .td-cb { width: 36px; min-width: 36px; text-align: center; padding: 0 6px !important; cursor: default !important; }
  .row-cb { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
  .th-cb-check { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
  tr.row-selected td { background: rgba(0,212,255,0.1) !important; }

  /* ====== GOOGLE LOGIN OVERLAY ====== */
  .glogin-overlay {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: radial-gradient(ellipse at center, #0d1f38 0%, #0a192f 100%);
    align-items: center; justify-content: center; flex-direction: column;
  }
  .glogin-overlay.open { display: flex; }
  .glogin-box {
    background: var(--bg-panel); border: 1px solid var(--border-light);
    border-radius: 16px; width: 420px; max-width: 94vw;
    box-shadow: 0 8px 64px rgba(0,0,0,0.7), 0 0 80px rgba(100,255,218,0.06);
    animation: modalIn 0.3s ease;
    overflow: hidden;
  }
  .glogin-header {
    padding: 28px 28px 20px;
    background: linear-gradient(135deg,rgba(100,255,218,0.06),rgba(87,203,255,0.04));
    border-bottom: 1px solid var(--border);
    text-align: center;
  }
  .glogin-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(100,255,218,0.08); border: 1px solid rgba(100,255,218,0.2);
    border-radius: 20px; padding: 5px 14px; margin-bottom: 16px;
    font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 700; letter-spacing: 0.5px;
  }
  .glogin-title {
    font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px;
  }
  .glogin-sub {
    font-size: 12px; color: var(--text-muted); font-family: var(--font-mono);
  }
  .glogin-body { padding: 28px; }
  .glogin-desc {
    font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.7; text-align: center;
  }
  .glogin-btn-wrap {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  #googleBtnContainer { display: flex; justify-content: center; }
  .glogin-dev-btn {
    display: none; /* ch? hi?n khi c?n dev */
    background: rgba(255,179,0,0.08); border: 1px solid rgba(255,179,0,0.3);
    color: var(--warn); font-size: 11px; padding: 7px 16px; border-radius: 6px;
    cursor: pointer; font-family: var(--font-mono); transition: all 0.15s;
  }
  .glogin-dev-btn:hover { background: rgba(255,179,0,0.18); }
  .glogin-error {
    display: none; margin-top: 14px;
    background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.3);
    border-radius: 6px; padding: 10px 14px;
    font-size: 12px; color: var(--danger); text-align: center; line-height: 1.5;
  }
  .glogin-footer {
    padding: 14px 28px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); text-align: center;
  }


  /* ====== USER DROPDOWN ====== */
  .user-dropdown-wrap { position: relative; flex-shrink: 0; }
  .header-user-badge {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px 4px 4px; border-radius: 20px;
    background: rgba(100,255,218,0.06); border: 1px solid var(--border);
    cursor: pointer; flex-shrink: 0; transition: all 0.15s; user-select: none;
  }
  .header-user-badge:hover { background: rgba(100,255,218,0.12); border-color: var(--accent2); }
  .header-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0; overflow: hidden;
    background: #4a5568;
  }
  .header-user-name {
    font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
  }
  .header-role-badge {
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 7px; border-radius: 10px;
    background: rgba(100,255,218,0.1); color: var(--accent); border: 1px solid rgba(100,255,218,0.25);
  }
  .header-role-badge.admin       { background: rgba(255,179,0,0.12);   color: var(--warn);   border-color: rgba(255,179,0,0.3); }
  .header-role-badge.supervisor  { background: rgba(167,139,250,0.12); color: #a78bfa;       border-color: rgba(167,139,250,0.35); }
  @media (max-width: 640px) { .header-user-name { display: none; } }

  /* Dropdown panel */
  .user-dropdown-menu {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--bg-panel); border: 1px solid var(--border-light);
    border-radius: 10px; min-width: 240px;
    box-shadow: var(--shadow), 0 8px 40px rgba(0,0,0,0.45);
    z-index: 9999; overflow: hidden;
    animation: fadeIn 0.15s ease;
  }
  .user-dropdown-menu.open { display: block; }
  .user-dropdown-profile {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: linear-gradient(135deg,rgba(100,255,218,0.05),transparent);
    border-bottom: 1px solid var(--border);
  }
  .user-dropdown-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 700; color: #fff; background: #4a5568;
  }
  .user-dropdown-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .user-dropdown-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
  .user-dropdown-email { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); margin-top: 2px; word-break: break-all; }
  .user-dropdown-dept {
    display: inline-block; margin-top: 5px;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
    padding: 2px 8px; border-radius: 10px;
    background: rgba(100,255,218,0.1); color: var(--accent); border: 1px solid rgba(100,255,218,0.25);
  }
  .user-dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 16px; background: none; border: none; border-radius: 0;
    color: var(--text-secondary); font-size: 13px; font-family: var(--font-main);
    cursor: pointer; text-align: left; transition: background 0.12s, color 0.12s;
  }
  .user-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
  .user-dropdown-item.danger { color: var(--danger); }
  .user-dropdown-item.danger:hover { background: rgba(255,107,107,0.1); color: var(--danger); }
  .user-dropdown-divider { height: 1px; background: var(--border); }
  /* ?n c?c btn cu ? logic chuy?n v?o dropdown */
  .signout-btn, .admin-panel-btn { display: none !important; }

  /* ====== ADMIN PANEL OVERLAY ====== */
  .admin-panel-overlay {
    display: none; position: fixed; inset: 0; z-index: 5000;
    background: rgba(0,0,0,0.8); align-items: flex-start; justify-content: center;
    padding: 20px 16px; overflow-y: auto;
  }
  .admin-panel-overlay.open { display: flex; }
  .admin-panel-modal {
    background: var(--bg-panel); border: 1px solid var(--border-light);
    border-radius: 14px; width: 100%; max-width: 900px;
    box-shadow: var(--shadow), 0 0 80px rgba(255,179,0,0.06);
    animation: modalIn 0.22s ease; display: flex; flex-direction: column;
    min-height: 500px;
  }
  .admin-panel-header {
    padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    background: linear-gradient(135deg,rgba(255,179,0,0.06),transparent);
  }
  .admin-panel-title { font-size: 15px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 10px; }
  .admin-panel-badge {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    background: rgba(255,179,0,0.12); color: var(--warn);
    border: 1px solid rgba(255,179,0,0.3); padding: 3px 9px; border-radius: 4px; letter-spacing: 0.5px;
  }
  .admin-tab-bar {
    display: flex; gap: 0; border-bottom: 1px solid var(--border);
    background: var(--bg-card); flex-shrink: 0;
  }
  .admin-tab-btn {
    padding: 11px 20px; font-size: 12px; font-weight: 600;
    background: transparent; border: none; border-bottom: 2px solid transparent;
    color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    font-family: var(--font-main); display: flex; align-items: center; gap: 6px;
  }
  .admin-tab-btn:hover { color: var(--text-primary); }
  .admin-tab-btn.active { color: var(--warn); border-bottom-color: var(--warn); }
  .admin-tab-content { padding: 18px 22px; flex: 1; }
  /* User table */
  .admin-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .admin-search {
    flex: 1; min-width: 160px; background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); font-family: var(--font-mono); font-size: 12px;
    padding: 7px 10px; border-radius: var(--radius); outline: none;
  }
  .admin-search:focus { border-color: var(--warn); }
  .admin-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .admin-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: var(--radius); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: var(--font-main);
    background: rgba(100,255,218,0.1); border: 1px solid rgba(100,255,218,0.35);
    color: var(--accent); transition: all 0.15s; white-space: nowrap;
  }
  .admin-add-btn:hover { background: rgba(100,255,218,0.22); }
  .admin-user-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .admin-user-table th {
    background: var(--bg-card); border-bottom: 2px solid var(--border);
    color: var(--text-secondary); padding: 8px 12px; text-align: left;
    font-size: 11px; font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  }
  .admin-user-table td { border-bottom: 1px solid var(--border); padding: 9px 12px; vertical-align: middle; color: var(--text-primary); }
  .admin-user-table tr:hover td { background: var(--bg-hover); }
  .admin-role-badge {
    display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 2px 8px; border-radius: 4px; letter-spacing: 0.3px;
  }
  .admin-role-badge.admin       { background: rgba(255,179,0,0.12);   color: var(--warn);    border: 1px solid rgba(255,179,0,0.3); }
  .admin-role-badge.supervisor  { background: rgba(167,139,250,0.12); color: #a78bfa;        border: 1px solid rgba(167,139,250,0.35); }
  .admin-role-badge.user        { background: rgba(100,255,218,0.08); color: var(--accent);  border: 1px solid rgba(100,255,218,0.2); }
  .admin-action-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 4px; cursor: pointer;
    font-size: 11px; font-weight: 600; border: 1px solid; transition: all 0.13s;
    font-family: var(--font-main); margin-left: 4px;
  }
  .admin-action-btn.edit { border-color: rgba(87,203,255,0.4); background: rgba(87,203,255,0.08); color: var(--accent3); }
  .admin-action-btn.edit:hover { background: rgba(87,203,255,0.22); }
  .admin-action-btn.del { border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); color: var(--danger); }
  .admin-action-btn.del:hover { background: rgba(255,107,107,0.22); }
  /* Activity log table */
  .admin-activity-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  .admin-activity-table th {
    background: var(--bg-card); border-bottom: 2px solid var(--border);
    color: var(--text-secondary); padding: 8px 12px; text-align: left;
    font-size: 11px; font-weight: 600; white-space: nowrap; position: sticky; top: 0; z-index: 2;
  }
  .admin-activity-table td { border-bottom: 1px solid var(--border); padding: 8px 12px; vertical-align: middle; }
  .admin-activity-table tr:hover td { background: var(--bg-hover); }
  /* User form overlay */
  .user-form-overlay {
    display: none; position: fixed; inset: 0; z-index: 6000;
    background: rgba(0,0,0,0.65); align-items: center; justify-content: center;
  }
  .user-form-overlay.open { display: flex; }
  .user-form-modal {
    background: var(--bg-panel); border: 1px solid var(--border-light);
    border-radius: 12px; width: 460px; max-width: 95vw;
    box-shadow: var(--shadow); animation: modalIn 0.2s ease; overflow: hidden;
  }
  .user-form-header {
    padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg,rgba(100,255,218,0.05),transparent);
  }
  .user-form-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
  .user-form-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
  .user-form-row { display: flex; flex-direction: column; gap: 5px; }
  .user-form-label { font-size: 11px; color: var(--text-secondary); font-weight: 600; }
  .user-form-label .req { color: var(--danger); }
  .user-form-input, .user-form-select {
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 13px; padding: 8px 11px;
    border-radius: var(--radius); outline: none; font-family: var(--font-main); width: 100%;
    box-sizing: border-box;
  }
  .user-form-input:focus, .user-form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(100,255,218,0.1); }
  .user-form-input:disabled { opacity: 0.6; cursor: not-allowed; }
  .user-form-footer {
    padding: 14px 20px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; align-items: center;
  }
  .user-form-save-btn {
    flex: 1; padding: 9px; display: flex; align-items: center; justify-content: center;
    gap: 6px; background: rgba(100,255,218,0.12); border: 1px solid rgba(100,255,218,0.4);
    color: var(--accent); border-radius: var(--radius); cursor: pointer;
    font-size: 13px; font-weight: 700; font-family: var(--font-main); transition: all 0.15s;
  }
  .user-form-save-btn:hover { background: rgba(100,255,218,0.22); }


  .inline-edit-input {
    width: 100%; min-width: 80px;
    background: var(--bg-base);
    border: 2px solid var(--accent);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 12px;
    padding: 3px 7px;
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.18);
  }
  [data-theme="light"] .inline-edit-input {
    background: #fff;
    border-color: #7C3AED;
    color: #1C1917;
    box-shadow: 0 0 0 3px rgba(91,33,182,0.14);
  }
  /* Mobile: edit-row stack + select/input touch-friendly */
  @media (max-width: 768px) {
    .edit-row {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .edit-label {
      text-align: left;
      padding-right: 0;
      font-size: 10px;
      color: var(--text-muted);
    }
    .edit-input, .edit-select, .edit-textarea {
      font-size: 16px;         /* =16px: ch?n iOS Safari t? zoom khi focus */
      padding: 10px 12px;
      min-height: 44px;        /* touch target t?i thi?u */
    }
    .edit-textarea { min-height: 64px; }
    /* inline-edit select: touch target l?n hon */
    .inline-edit-input {
      font-size: 16px;
      padding: 8px 10px;
      min-height: 44px;
    }
  }
  .data-table tbody td:not(.td-cb):not(.td-id):not(.td-stt) { position: relative; cursor: pointer; }
  .data-table tbody td:not(.td-cb):not(.td-id):not(.td-stt):hover::after {
    content: '?';
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--text-muted); opacity: 0.45; pointer-events: none;
  }

  /* ====== TRANSFER ASSET BUTTON ====== */
  .transfer-asset-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 13px; border-radius: var(--radius); cursor: pointer;
    font-size: 12px; font-weight: 600; font-family: var(--font-main);
    border: 1px solid rgba(87,203,255,0.45);
    background: rgba(87,203,255,0.09); color: var(--accent3);
    transition: all 0.15s; white-space: nowrap;
  }
  .transfer-asset-btn:hover { background: rgba(87,203,255,0.22); border-color: var(--accent3); box-shadow: 0 0 12px rgba(87,203,255,0.2); }
  [data-theme="light"] .transfer-asset-btn { border-color: rgba(5,150,105,0.4); background: rgba(5,150,105,0.07); color: #059669; }
  [data-theme="light"] .transfer-asset-btn:hover { background: rgba(5,150,105,0.16); border-color: #059669; }

  /* ====== TRANSFER MODAL ====== */
  .transfer-overlay {
    display: none; position: fixed; inset: 0; z-index: 1500;
    background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
  }
  .transfer-overlay.open { display: flex; }
  .transfer-modal {
    background: var(--bg-panel); border: 1px solid rgba(87,203,255,0.25);
    border-radius: 12px; width: 480px; max-width: 95vw;
    box-shadow: var(--shadow), 0 0 50px rgba(87,203,255,0.08);
    animation: modalIn 0.2s ease; overflow: hidden;
  }
  .transfer-modal-header {
    padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, rgba(87,203,255,0.06), transparent);
  }
  .transfer-modal-title {
    font-size: 15px; font-weight: 700; color: var(--text-primary);
    display: flex; align-items: center; gap: 10px;
  }
  .transfer-modal-badge {
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 3px 8px; border-radius: 4px; letter-spacing: 0.5px;
    background: rgba(87,203,255,0.12); color: var(--accent3);
    border: 1px solid rgba(87,203,255,0.3);
  }
  .transfer-modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
  .transfer-asset-info {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .transfer-asset-info-name {
    font-size: 13px; font-weight: 700; color: var(--text-primary);
  }
  .transfer-asset-info-id {
    font-family: var(--font-mono); font-size: 11px; color: var(--accent); font-weight: 600;
  }
  .transfer-field { display: flex; flex-direction: column; gap: 6px; }
  .transfer-field-label {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: 5px;
  }
  .transfer-field-label .req { color: var(--danger); }
  .transfer-select, .transfer-input {
    background: var(--bg-card); border: 1px solid var(--border);
    color: var(--text-primary); font-size: 13px; padding: 9px 11px;
    border-radius: var(--radius); outline: none; font-family: var(--font-main); width: 100%;
  }
  .transfer-select:focus, .transfer-input:focus {
    border-color: var(--accent3);
    box-shadow: 0 0 0 3px rgba(87,203,255,0.12);
  }
  .transfer-arrow-row {
    display: flex; align-items: center; gap: 10px; font-size: 12px;
    color: var(--text-secondary); font-family: var(--font-mono);
  }
  .transfer-dept-pill {
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
    background: rgba(100,255,218,0.1); border: 1px solid rgba(100,255,218,0.25); color: var(--accent);
  }
  .transfer-dept-pill.target {
    background: rgba(87,203,255,0.1); border-color: rgba(87,203,255,0.3); color: var(--accent3);
  }
  .transfer-status { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-height: 16px; }
  .transfer-modal-footer {
    padding: 14px 22px; border-top: 1px solid var(--border);
    display: flex; gap: 8px; align-items: center;
    background: var(--bg-panel);
  }
  .transfer-confirm-btn {
    flex: 1; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 7px;
    background: rgba(87,203,255,0.12); border: 1px solid rgba(87,203,255,0.4); color: var(--accent3);
    border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 700;
    font-family: var(--font-main); transition: all 0.15s;
  }
  .transfer-confirm-btn:hover:not(:disabled) { background: rgba(87,203,255,0.24); box-shadow: 0 0 14px rgba(87,203,255,0.2); }
  .transfer-confirm-btn:disabled { opacity: 0.5; cursor: not-allowed; }
  [data-theme="light"] .transfer-confirm-btn { background: rgba(5,150,105,0.08); border-color: rgba(5,150,105,0.4); color: #059669; }
  [data-theme="light"] .transfer-confirm-btn:hover:not(:disabled) { background: rgba(5,150,105,0.18); }

  /* ====== MOBILE: CH?N iOS AUTO-ZOOM KHI FOCUS INPUT ======
     iOS Safari t? zoom v?o input c? font-size < 16px.
     Rule to?n c?c du?i d?y d?m b?o m?i input/select/textarea
     tr?n mobile d?u c? font-size = 16px ? c?ch duy nh?t kh?ng
     ph? v? user-scalable (kh?c v?i d?ng maximum-scale=1). */
  @media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    select,
    textarea {
      font-size: 16px !important;
    }
  }

  /* ====== TAP DELAY: X?a 300ms delay tr?n touch devices ====== */
  button,
  [role="button"],
  .nav-item,
  .status-item,
  .stat-card-click,
  .toolbar-btn,
  .filter-chip,
  .col-action-btn,
  .kk-filter-btn,
  .kk-confirm-btn,
  .trash-restore-btn,
  .trash-bulk-btn,
  .dept-card {
    touch-action: manipulation;
  }

  /* ====== SAFE AREA: H? tr? iPhone notch / Dynamic Island ====== */
  .header {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  @media (max-width: 768px) {
    .header {
      padding-left: max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
    }
    .footer {
      padding-bottom: max(6px, env(safe-area-inset-bottom));
    }
  }

/* ------------------------------------------------
   1-Tap Status Chips ? kiemke confirm card
   ------------------------------------------------ */
  .kk-confirm-status-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-secondary); margin: 14px 0 8px; text-align: center;
  }

  .kk-status-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }

  .kk-status-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 16px 10px 14px; border: 2px solid transparent; border-radius: 16px;
    font-family: var(--font-main); cursor: pointer; text-align: center; line-height: 1.3;
    transition: transform 0.1s ease, box-shadow 0.12s ease, filter 0.1s;
    -webkit-tap-highlight-color: transparent; user-select: none; min-height: 88px;
  }

  .kk-status-icon { font-size: 26px; line-height: 1; display: block; }

  .kk-status-text { display: flex; flex-direction: column; font-size: 13px; font-weight: 700; gap: 2px; }
  .kk-status-text small { font-size: 10px; font-weight: 500; opacity: 0.65; display: block; }

  /* M?u tinted theo tr?ng th?i */
  .kk-status-btn.s01 { background: #eafaf1; border-color: #a9dfbf; color: #1a6635; }
  .kk-status-btn.s03 { background: #fef5e7; border-color: #f5cba7; color: #784212; }

  /* Active = tr?ng th?i hi?n t?i c?a t?i s?n (t? kkShowConfirm) */
  .kk-status-btn.active.s01 { background: #1e8449; border-color: #1e8449; color: #fff; box-shadow: 0 4px 16px rgba(30,132,73,0.4); }
  .kk-status-btn.active.s03 { background: #d35400; border-color: #d35400; color: #fff; box-shadow: 0 4px 16px rgba(211,84,0,0.38); }

  /* Press effect */
  .kk-status-btn:active { transform: scale(0.95); filter: brightness(0.9); box-shadow: none !important; }

  /* Dark mode */
  @media (prefers-color-scheme: dark) {
    .kk-status-btn.s01 { background: rgba(39,174,96,0.15); border-color: rgba(39,174,96,0.35); color: #6fcf97; }
    .kk-status-btn.s03 { background: rgba(230,126,34,0.15); border-color: rgba(230,126,34,0.35); color: #f0a04b; }
  }
  /* ============================================================
     ROW STATUS COLORS + HOVER ? DARK & LIGHT MODE (consolidated)
     T?t c? rules t?p trung ? d?y, kh?ng c?n conflict !important
     ============================================================ */

  /* --- DARK MODE: m?u n?n row theo tr?ng th?i --- */
  .data-table tbody tr.row-ok       td { background-color: rgba(100,255,218,0.10) !important; }
  .data-table tbody tr.row-broken   td { background-color: rgba(255,100,100,0.15) !important; }
  .data-table tbody tr.row-lost     td { background-color: rgba(255,200,50,0.13)  !important; }
  .data-table tbody tr.row-retired  td { background-color: rgba(148,130,255,0.12) !important; }
  .data-table tbody tr.row-returned td { background-color: rgba(87,203,255,0.12)  !important; }

  /* --- DARK MODE: hover row thu?ng --- */
  .data-table tbody tr:hover td {
    background-color: #1e3a5f !important;
    transition: background 0.08s !important;
  }
  .data-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }

  /* --- DARK MODE: hover row c? m?u (d?m hon m?u n?n row) --- */
  .data-table tbody tr.row-ok:hover       td { background-color: rgba(100,255,218,0.24) !important; }
  .data-table tbody tr.row-broken:hover   td { background-color: rgba(255,100,100,0.30) !important; }
  .data-table tbody tr.row-lost:hover     td { background-color: rgba(255,200,50,0.28)  !important; }
  .data-table tbody tr.row-retired:hover  td { background-color: rgba(148,130,255,0.26) !important; opacity:1; }
  .data-table tbody tr.row-returned:hover td { background-color: rgba(87,203,255,0.24)  !important; opacity:1; }

  /* --- LIGHT MODE: m?u n?n row theo tr?ng th?i --- */
  [data-theme="light"] .data-table tbody tr.row-ok       td { background-color: rgba(16,185,129,0.12)  !important; }
  [data-theme="light"] .data-table tbody tr.row-broken   td { background-color: rgba(239,68,68,0.12)   !important; }
  [data-theme="light"] .data-table tbody tr.row-lost     td { background-color: rgba(245,158,11,0.13)  !important; }
  [data-theme="light"] .data-table tbody tr.row-retired  td { background-color: rgba(139,92,246,0.10)  !important; }
  [data-theme="light"] .data-table tbody tr.row-returned td { background-color: rgba(59,130,246,0.10)  !important; }

  /* --- LIGHT MODE: hover row thu?ng --- */
  [data-theme="light"] .data-table tbody tr:hover td {
    background-color: #dde8f5 !important;   /* xanh nh?t r? tr?n n?n cream */
    border-bottom-color: rgba(91,33,182,0.15) !important;
    transition: background 0.08s !important;
  }
  [data-theme="light"] .data-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }

  /* --- LIGHT MODE: hover row c? m?u (d?m hon m?u n?n row) --- */
  [data-theme="light"] .data-table tbody tr.row-ok:hover       td { background-color: rgba(16,185,129,0.26)  !important; }
  [data-theme="light"] .data-table tbody tr.row-broken:hover   td { background-color: rgba(239,68,68,0.24)   !important; }
  [data-theme="light"] .data-table tbody tr.row-lost:hover     td { background-color: rgba(245,158,11,0.26)  !important; }
  [data-theme="light"] .data-table tbody tr.row-retired:hover  td { background-color: rgba(139,92,246,0.22)  !important; }
  [data-theme="light"] .data-table tbody tr.row-returned:hover td { background-color: rgba(59,130,246,0.22)  !important; }

  /* Spacer rows c?a virtual scroll ? kh?ng hover, kh?ng m?u */
  .data-table tbody tr.vs-spacer td,
  .data-table tbody tr.vs-spacer:hover td {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Sticky thead */
  .data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-panel);
  }

  /* Fixed row height cho virtual scroll */
  .data-table tbody tr  { height: 40px; max-height: 40px; contain: layout style; }
  .data-table tbody td  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-height: 40px; }
  .data-table td        { transition: background 0.08s !important; }