:root{
    --bg: #F3F5F9;
    --panel: #FFFFFF;
    --panel-2: #F8FAFD;
    --line: #E1E7F0;
    --line-soft: #EDF1F7;
    --text: #16202E;
    --muted: #55637C;
    --muted-2: #7E8CA3;
    --amber: #B76E00;
    --amber-bright: #F5A623;
    --teal: #0E8F76;
    --red: #D6394B;
    --blue: #2C6FCB;
    --violet: #6E4FE0;
    --mono: 'JetBrains Mono', monospace;
    --sans: 'IBM Plex Sans', sans-serif;
    --disp: 'Space Grotesk', sans-serif;
  }
  body[data-theme="dark"]{
    --bg: #12161F;
    --panel: #1A2029;
    --panel-2: #1E2530;
    --line: #2B3340;
    --line-soft: #242C38;
    --text: #E7ECF4;
    --muted: #9AA6BA;
    --muted-2: #6E7A8F;
    --amber: #F5A623;
    --amber-bright: #F5A623;
    --teal: #2FBE9E;
    --red: #FF6B7A;
    --blue: #5B9AE8;
    --violet: #A48CFF;
  }
  body[data-theme="dark"] .sidebar{background:#0B0E14;}
  body[data-theme="dark"] .sidebar-logo{color:#0B0E14;}
  /* ============ Thư viện giao diện (theme library) ============
     Mỗi giao diện thêm sau này (ngoài Sáng/Tối mặc định) chỉ cần: 1 khối
     body[data-theme="..."]{ ghi đè đúng các biến --bg/--panel/... đã có ở :root }
     + 1 dòng trong mảng THEME_LIBRARY (JS, gần cuối file) — không phải sửa gì khác,
     toàn bộ app tự đổi màu theo vì mọi nơi đều dùng var(--...) chứ không hardcode màu. */
  body[data-theme="cyberpunk"]{
    --bg: #0B0E14;
    --panel: #171C27;
    --panel-2: #1B2130;
    --line: #2A3346;
    --line-soft: #212838;
    --text: #EAF0FF;
    --muted: #8891AC;
    --muted-2: #626C87;
    --amber: #3FE1FF;
    --amber-bright: #3FE1FF;
    --teal: #33F0A8;
    --red: #FF4D6D;
    --blue: #5CC8FF;
    --violet: #FF3EC9;
  }
  body[data-theme="cyberpunk"]{
    background:
      linear-gradient(180deg, rgba(63,225,255,0.07), transparent 300px),
      repeating-linear-gradient(0deg, rgba(140,170,255,0.05) 0px, rgba(140,170,255,0.05) 1px, transparent 1px, transparent 40px),
      repeating-linear-gradient(90deg, rgba(140,170,255,0.05) 0px, rgba(140,170,255,0.05) 1px, transparent 1px, transparent 40px),
      var(--bg);
  }
  body[data-theme="cyberpunk"] .sidebar{background:#05070C; box-shadow:0 16px 34px rgba(63,225,255,0.10), 0 0 0 1px rgba(63,225,255,0.12);}
  body[data-theme="cyberpunk"] .sidebar-logo{color:#05070C; box-shadow:0 0 16px -2px var(--amber-bright);}
  body[data-theme="cyberpunk"] .sidebar-nav-btn.active{box-shadow:0 0 14px -2px var(--amber-bright);}
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      linear-gradient(180deg, rgba(183,110,0,0.05), transparent 300px),
      repeating-linear-gradient(0deg, rgba(22,32,46,0.025) 0px, rgba(22,32,46,0.025) 1px, transparent 1px, transparent 40px),
      repeating-linear-gradient(90deg, rgba(22,32,46,0.025) 0px, rgba(22,32,46,0.025) 1px, transparent 1px, transparent 40px),
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    padding:28px 32px 60px;
    min-height:100vh;
    font-variant-numeric: tabular-nums;
  }
  .wrap{width:100%;}

  .app-shell{display:flex; flex-direction:column; gap:18px; max-width:1500px; margin:0 auto; align-items:stretch;}
  .main-area{flex:1; min-width:0;}

  .sidebar{
    width:100%; flex-shrink:0; background:#12161F; border-radius:18px;
    display:flex; flex-direction:row; align-items:center; padding:12px 18px;
    position:sticky; top:0; z-index:40;
    box-shadow:0 16px 34px rgba(16,23,35,0.16);
  }
  .sidebar-logo{
    width:40px; height:40px; border-radius:11px; background:var(--amber-bright);
    display:flex; align-items:center; justify-content:center; color:#12161F;
    font-family:var(--disp); font-weight:700; font-size:12px; letter-spacing:.02em;
    margin-right:18px; flex-shrink:0; transition:transform .12s ease, filter .12s ease;
  }
  .sidebar-logo:hover{filter:brightness(1.08); transform:scale(1.05);}
  .sidebar-logo:active{transform:scale(0.96);}
  .sidebar-nav{display:flex; flex-direction:row; gap:10px; align-items:center; flex-wrap:wrap;}
  .sidebar-nav-btn{
    width:48px; height:48px; border-radius:14px; border:none; background:transparent; color:#8B96AC;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    cursor:pointer; transition:background .15s ease, color .15s ease;
  }
  .sidebar-nav-btn svg{width:21px; height:21px;}
  .sidebar-nav-btn:hover:not(.active){background:rgba(255,255,255,0.08); color:#fff;}
  .sidebar-nav-btn.active{background:#fff; color:#12161F;}
  .sidebar-spacer{flex:1;}
  .notif-badge{
    position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 3px; border-radius:8px;
    background:var(--red); color:#fff; font-size:10px; font-weight:800; align-items:center; justify-content:center;
    box-shadow:0 0 0 2px #12161F;
  }
  .notif-panel{
    position:absolute; top:56px; right:14px; z-index:9000; width:min(360px, 92vw); max-height:70vh;
    background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.25);
    flex-direction:column; overflow:hidden;
  }
  .notif-panel-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:12px 14px;
    border-bottom:1px solid var(--line); font-weight:800; font-size:13.5px; color:var(--text);
  }
  .notif-list{overflow-y:auto; max-height:calc(70vh - 46px);}
  .notif-item{padding:9px 14px; border-bottom:1px solid var(--line);}
  .notif-item:last-child{border-bottom:none;}
  .notif-item-time{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); margin-bottom:2px;}
  .notif-item-text{font-size:12.5px; color:var(--text); line-height:1.45;}
  .notif-item.notif-error .notif-item-text{color:var(--red);}
  .notif-item.notif-success .notif-item-text{color:var(--teal);}
  .sidebar-nav-btn-ghost{color:#4B5567; cursor:default;}
  .sidebar-nav-btn-ghost:hover{background:transparent; color:#4B5567;}

  /* Bảng chọn giao diện (theme picker) — cùng khuôn mẫu với .notif-panel để nhất quán giao diện */
  .theme-badge{
    position:absolute; bottom:6px; right:6px; width:9px; height:9px; border-radius:50%;
    border:2px solid #12161F; background:var(--amber-bright);
  }
  .theme-panel{
    position:absolute; top:56px; right:14px; z-index:9000; width:min(240px, 92vw);
    background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,0.25);
    flex-direction:column; overflow:hidden;
  }
  .theme-panel-head{
    padding:11px 14px; border-bottom:1px solid var(--line); font-weight:800; font-size:12.5px; color:var(--text);
  }
  .theme-option{
    width:100%; display:flex; align-items:center; gap:10px; padding:10px 14px; border:none; background:transparent;
    color:var(--text); font-family:var(--sans); font-size:13px; text-align:left; cursor:pointer;
  }
  .theme-option:hover{background:var(--panel-2);}
  .theme-option-swatch{width:16px; height:16px; border-radius:50%; flex-shrink:0; border:1.5px solid rgba(127,127,127,0.35);}
  .theme-option-check{margin-left:auto; width:16px; height:16px; color:var(--teal); flex-shrink:0; visibility:hidden;}
  .theme-option.active .theme-option-check{visibility:visible;}
  .theme-option.active{color:var(--text); font-weight:700;}

  .search-page-head{margin-bottom:20px;}
  .search-panel{padding:22px;}

  header{
    display:flex; justify-content:space-between; align-items:flex-end;
    border-bottom:1px solid var(--line);
    padding-bottom:18px; margin-bottom:22px; flex-wrap:wrap; gap:14px;
  }
  .brand-eyebrow{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--amber);
    text-transform:uppercase; display:flex; align-items:center; gap:8px; margin-bottom:8px;
  }
  .brand-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);}
  h1{ font-family:var(--disp); font-weight:700; font-size:30px; margin:0; letter-spacing:-.01em; }
  .sub{color:var(--muted); font-size:13.5px; margin-top:6px;}

  .header-right{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap;}
  .snapshot{
    font-family:var(--mono); text-align:right; font-size:12px; color:var(--muted);
    border-left:1px solid var(--line); padding-left:16px;
  }
  .snapshot b{color:var(--text); font-size:15px; display:block; font-weight:600;}
  .snapshot .updated-at{margin-top:5px; padding-top:5px; border-top:1px solid var(--line); font-size:10.5px; color:var(--muted-2);}
  #uploaded-file-line{border-top:none; padding-top:0; margin-top:3px; max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

  .upload-wrap{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
  .btn-update{
    font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.04em;
    color:var(--bg); background:var(--amber); border:none; border-radius:7px;
    padding:10px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
    text-transform:uppercase; transition:filter .15s ease, transform .15s ease;
  }
  .btn-update:hover{filter:brightness(1.08); transform:translateY(-1px);}
  .btn-update:active{transform:translateY(0);}
  .btn-update svg{width:14px; height:14px;}
  .btn-ghost-outline{
    background:transparent; color:var(--muted); border:1px solid var(--line); font-size:10.5px; padding:7px 12px;
  }
  .btn-ghost-outline:hover{color:var(--violet); border-color:var(--violet); background:rgba(110,79,224,0.06); filter:none;}
  .upload-status{font-family:var(--mono); font-size:11px; color:var(--muted-2); max-width:280px; text-align:right;}
  .upload-status.err{color:var(--red);}
  .upload-status.ok{color:var(--teal);}
  #file-input{display:none;}

  .plan-bar{
    display:flex; align-items:center; gap:18px; flex-wrap:wrap;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:12px 18px; margin-bottom:16px;
  }
  .plan-bar-label{
    font-family:var(--disp); font-size:13px; font-weight:600; color:var(--text);
    display:flex; align-items:center; gap:8px; white-space:nowrap;
  }
  .plan-bar-label .tag{
    font-family:var(--mono); font-size:9.5px; color:var(--bg); background:var(--violet);
    padding:2px 6px; border-radius:3px; letter-spacing:.05em; font-weight:700;
  }
  .plan-buttons{display:flex; gap:14px; flex-wrap:wrap; flex:1;}
  .plan-item{display:flex; align-items:center; gap:9px;}
  .btn-plan{
    font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.03em;
    color:var(--violet); background:rgba(110,79,224,0.08); border:1px solid rgba(110,79,224,0.35);
    border-radius:7px; padding:7px 13px; cursor:pointer; white-space:nowrap;
    transition:background .15s ease;
  }
  .btn-plan:hover{background:rgba(110,79,224,0.16);}
  .btn-plan.loaded{color:var(--teal); background:rgba(14,143,118,0.1); border-color:rgba(14,143,118,0.35);}
  .plan-status{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); max-width:220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .plan-status.ok{color:var(--teal);}
  .plan-status.err{color:var(--red);}
  .btn-plan-clear{
    background:none; border:none; color:var(--muted-2); cursor:pointer; font-size:13px;
    padding:0 2px; display:none; line-height:1;
  }
  .btn-plan-clear.show{display:inline-block;}
  .btn-plan-clear:hover{color:var(--red);}

  .plan-cards{display:flex; flex-direction:column; gap:18px;}
  .plan-card{background:var(--panel-2, var(--bg)); border:1px solid var(--line); border-radius:9px; padding:14px 16px; margin-bottom:22px;}
  .plan-card:last-child{margin-bottom:0;}
  .plan-card-head{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:10px;}
  .plan-card-badge{
    font-family:var(--mono); font-size:10px; font-weight:800; color:#fff; padding:2px 8px; border-radius:5px;
    letter-spacing:.03em; margin-right:2px; flex-shrink:0;
  }
  .plan-card-title{font-family:var(--disp); font-size:14px; font-weight:700; margin-right:auto;}
  .plan-card-file{font-family:var(--mono); font-size:10px; color:var(--muted-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px;}
  .btn-plan-edit{
    font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
    color:var(--violet); background:rgba(110,79,224,0.08); border:1px solid rgba(110,79,224,0.35);
    border-radius:6px; padding:5px 10px; cursor:pointer; white-space:nowrap; flex-shrink:0;
    transition:background .15s ease;
  }
  .btn-plan-edit:hover{background:rgba(110,79,224,0.18);}
  .plan-card-editing{border-style:dashed !important;}
  .plan-edit-actions{display:flex; gap:7px; flex-shrink:0;}
  .btn-plan-save, .btn-plan-cancel{
    font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
    border-radius:6px; padding:5px 10px; cursor:pointer; white-space:nowrap; border:1px solid transparent;
    transition:background .15s ease;
  }
  .btn-plan-save{color:var(--teal); background:rgba(14,143,118,0.12); border-color:rgba(14,143,118,0.4);}
  .btn-plan-save:hover{background:rgba(14,143,118,0.24);}
  .btn-plan-cancel{color:var(--muted-2); background:rgba(136,146,160,0.1); border-color:var(--line);}
  .btn-plan-cancel:hover{color:var(--red); border-color:rgba(214,57,75,0.4);}
  .plan-detail-table-edit tbody td{padding:3px 5px;}
  .plan-edit-input{
    width:100%; min-width:64px; box-sizing:border-box; font-family:var(--mono); font-size:11.5px;
    color:var(--text); background:var(--bg); border:1px solid var(--line); border-radius:5px;
    padding:5px 7px;
  }
  .plan-edit-input:focus{outline:none; border-color:var(--violet); box-shadow:0 0 0 2px rgba(110,79,224,0.15);}
  input.plan-edit-input[type="number"]{text-align:right;}
  .btn-row-del{
    background:none; border:none; color:var(--muted-2); cursor:pointer; font-size:13px; padding:2px 4px; line-height:1;
  }
  .btn-row-del:hover{color:var(--red);}
  .btn-plan-add-row{
    font-family:var(--mono); font-size:11px; font-weight:700; color:var(--violet);
    background:rgba(110,79,224,0.08); border:1px dashed rgba(110,79,224,0.4); border-radius:6px;
    padding:6px 16px; cursor:pointer;
  }
  .btn-plan-add-row:hover{background:rgba(110,79,224,0.18);}
  .plan-card-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(90px, 1fr)); gap:10px; margin-bottom:12px;}
  .plan-card-kpis div{display:flex; flex-direction:column; gap:2px;}
  .plan-card-kpis b{font-family:var(--mono); font-size:17px; color:var(--text);}
  .plan-card-kpis span{font-family:var(--mono); font-size:9.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em;}
  .plan-card-chart-label{font-family:var(--mono); font-size:10px; color:var(--muted); margin:10px 0 4px; text-transform:uppercase; letter-spacing:.05em;}
  .plan-dc-list{display:flex; flex-direction:column; gap:4px;}
  .plan-dc-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--text); padding:3px 0; border-bottom:1px solid var(--line-soft);}
  .plan-dc-row b{color:var(--violet);}

  .plan-table-wrap{max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:7px;}
  .plan-detail-table{width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap;}
  .plan-detail-table thead th{
    position:sticky; top:0; background:var(--panel); text-align:left; font-family:var(--mono);
    font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted-2);
    font-weight:600; padding:7px 10px; border-bottom:1px solid var(--line); z-index:1;
  }
  .plan-detail-table tbody td{padding:6px 10px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); color:var(--text); font-weight:600;}
  .plan-detail-table tbody tr:hover{filter:brightness(0.97);}
  /* Hiệu ứng "nháy màu" khi bấm 1 dòng ở bảng Thống kê Container để nhảy sang đúng dòng này (xem
     document.addEventListener('click', ...) phần xử lý data-cont-jump trong app.js). SỬA (lỗi thật
     đã gặp — outline vẽ lồng vào/tràn ra ngoài dòng bị chính dòng kế bên vẽ đè lên che mất, kể cả sau
     khi thử offset dương lẫn position:relative + z-index): đổi hẳn sang tô MÀU NỀN TRÊN TỪNG Ô (td)
     thay vì outline trên cả dòng (tr) — theo đúng quy tắc vẽ nền bảng HTML, nền của Ô LUÔN được vẽ ĐÈ
     LÊN TRÊN nền của Dòng (không phụ thuộc z-index/thứ tự DOM giữa các dòng), nên chắc chắn không thể
     bị dòng khác che mất nữa. */
  @keyframes tn5RowJumpFlash{
    0%{ background-color:rgba(110,79,224,0.55); }
    100%{ background-color:rgba(110,79,224,0); }
  }
  .plan-detail-table tbody tr.tn5-row-jump-flash td{animation:tn5RowJumpFlash 1.6s ease-out;}
  .plan-detail-table tbody tr.cont-pick-row:hover{background:rgba(110,79,224,0.10) !important; filter:none;}
  .cpt-table thead th{vertical-align:top; padding-bottom:6px;}
  .cpt-th{display:flex; align-items:center; gap:5px; margin-bottom:5px;}
  .cpt-sort-btn{
    border:none; background:transparent; color:var(--muted-2); cursor:pointer; font-size:11px;
    padding:0 2px; line-height:1; font-family:var(--mono);
  }
  .cpt-sort-btn:hover{color:var(--violet);}
  .cpt-sort-btn.active{color:var(--violet); font-weight:700;}
  .cpt-filter-btn{border:none; background:none; cursor:pointer; color:inherit; opacity:0.55; padding:1px; display:inline-flex;}
  .cpt-filter-btn:hover{opacity:1;}
  .cpt-filter-btn.active{opacity:1; color:var(--blue);}
  #cont-pick-tooltip{
    /* z-index PHẢI cao hơn .pick-slip-overlay (10001) — nếu không, hover popover này vẫn hiện đúng
       nội dung (display:flex) nhưng bị đè khuất phía SAU các popup dạng overlay (VD: popup Nhóm SPP),
       trông như hover "không có tác dụng gì" dù thực ra vẫn đang chạy đúng. */
    position:fixed; z-index:10002; display:none; flex-direction:column;
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    box-shadow:0 10px 30px rgba(0,0,0,0.20);
    padding:10px 14px 12px; font-family:var(--mono); font-size:11.5px; color:var(--text);
    max-width:440px; max-height:380px; line-height:1.55;
  }
  #cont-pick-tooltip.cpt-pinned{border-color:var(--violet); box-shadow:0 10px 30px rgba(110,79,224,0.35);}
  .cpt-hint{
    font-size:10px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.03em;
    padding-bottom:6px; margin-bottom:6px; border-bottom:1px dashed var(--line); flex-shrink:0;
  }
  #cont-pick-tooltip.cpt-pinned .cpt-hint{color:var(--violet);}
  #cont-pick-tooltip-body{overflow-y:auto;}
  .cpt-item{margin-bottom:10px; padding-bottom:9px; border-bottom:1px dashed var(--line);}
  .cpt-item:last-child{margin-bottom:0; padding-bottom:0; border-bottom:none;}
  .cpt-item-head{margin-bottom:5px;}
  .cpt-po{color:var(--muted);}
  .cpt-kh{color:var(--violet); font-weight:600;}
  .cpt-locs{margin:4px 0 6px 6px; padding-left:8px; border-left:2px solid var(--line);}
  .cpt-loc-row{display:flex; justify-content:space-between; gap:14px; padding:1.5px 0; color:var(--muted-2);}
  .cpt-loc-row b{color:var(--text); font-weight:600;}
  .cpt-loc-sub{font-size:10px; color:var(--muted-2); opacity:0.8; margin:-1px 0 5px;}
  .cpt-total{color:var(--teal); font-weight:600; margin-top:2px;}
  .cpt-empty{color:var(--muted-2); font-style:italic;}
  .cpt-kho-group{margin-bottom:9px;}
  .cpt-kho-title{color:var(--violet); font-weight:700; margin-bottom:3px;}
  .cpt-kho-total{color:var(--muted-2); font-weight:600;}
  #btn-fixed-back-to-pick{
    position:fixed; right:26px; bottom:88px; z-index:590;
    width:46px; height:46px; border-radius:50%;
    background:var(--violet); color:#fff; border:none;
    box-shadow:0 6px 18px rgba(110,79,224,0.35);
    align-items:center; justify-content:center; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  #btn-fixed-back-to-pick:hover{transform:translateY(-3px); box-shadow:0 10px 24px rgba(110,79,224,0.45);}
  #btn-fixed-back-to-pick svg{width:22px; height:22px;}
  .plan-detail-table tbody tr.cont-group-first td{border-top:3px solid var(--cont-line, rgba(22,32,46,0.14));}
  .plan-detail-table .cont-no-cell{color:var(--violet); font-weight:700; border-left:4px solid transparent;}
  .cont-badge{
    display:inline-flex; align-items:center; justify-content:center; min-width:26px;
    padding:3px 8px; border-radius:6px; color:#fff; font-weight:700; font-size:11.5px;
  }
  .loc-head{color:var(--violet) !important;}
  .loc-cell{color:var(--text) !important; font-weight:600;}
  .plan-detail-table .num{text-align:right; color:var(--amber); font-weight:600;}
  .compare-summary{font-weight:normal; text-transform:none; letter-spacing:0;}
  .compare-badge{
    font-family:var(--mono); font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px;
    letter-spacing:.03em; display:inline-block;
  }
  .compare-badge.ok{color:var(--teal); background:rgba(14,143,118,0.12);}
  .compare-badge.short{color:var(--red); background:rgba(214,57,75,0.12);}
  .compare-badge.warn{color:var(--amber); background:rgba(183,110,0,0.12);}
  .compare-table .diff-ok{color:var(--teal) !important;}
  .compare-table .diff-short{color:var(--red) !important;}
  .compare-table .oqc-pass{color:var(--teal) !important; font-weight:600;}
  .compare-table .oqc-ng{color:var(--red) !important; font-weight:600;}
  .po-warn{color:var(--amber); cursor:help; font-size:11px;}
  .po-any{color:var(--muted); font-style:italic; font-size:11px;}

  .item-link{color:var(--violet); cursor:pointer; font-weight:600; display:inline-flex; align-items:center; gap:5px;}
  .item-link:hover{text-decoration:underline;}
  .item-link-arrow{font-size:8px; color:var(--muted-2); transition:transform .15s ease;}
  .item-link.open .item-link-arrow{transform:rotate(90deg); color:var(--violet);}
  tr.item-detail-row td{padding:0; background:var(--panel-2); border-bottom:1px solid var(--line);}
  .item-detail-wrap{padding:12px 16px;}
  .item-detail-title{font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:8px;}
  .item-detail-title b{color:var(--violet);}
  .item-detail-mini{width:100%; border-collapse:collapse; font-size:11.5px;}
  .item-detail-mini thead th{
    text-align:left; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
    color:var(--muted-2); font-weight:600; padding:5px 8px; border-bottom:1px solid var(--line);
  }
  .item-detail-mini tbody td{padding:5px 8px; font-family:var(--mono); color:var(--text); border-bottom:1px solid var(--line-soft);}
  .item-detail-mini .num{text-align:right; font-weight:600; color:var(--amber);}
  .item-detail-empty{padding:12px 16px; font-family:var(--mono); font-size:11.5px; color:var(--muted-2);}

  .compare-label-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;}
  .btn-export-excel{
    font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
    color:var(--teal); background:rgba(14,143,118,0.1); border:1px solid rgba(14,143,118,0.35);
    border-radius:6px; padding:5px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:5px;
    white-space:nowrap; transition:background .15s ease;
  }
  .btn-export-excel:hover{background:rgba(14,143,118,0.2);}
  .btn-export-excel svg{width:12px; height:12px;}

  .kpis{
    display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
    background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;
    margin-bottom:22px;
  }
  .kpi{background:var(--panel); padding:16px 18px; position:relative;}
  .kpi .label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-family:var(--mono);}
  .kpi .value{font-family:var(--mono); font-weight:700; font-size:26px; margin-top:8px; color:var(--text);}
  .kpi .foot{font-size:11.5px; color:var(--muted-2); margin-top:6px;}
  .kpi.accent .value{color:var(--amber);}
  .kpi.good .value{color:var(--teal);}
  .kpi.bad .value{color:var(--red);}
  #kpi-strip:hover{filter:brightness(0.97);}

  /* ============ Bảng "Cont theo Kho" — 3 cột 3B/3A/2B kèm trạng thái pick từng kho ============ */
  .kcs-panel{
    border:1px solid var(--line); border-radius:10px; background:var(--panel);
    margin-top:18px; margin-bottom:22px; overflow:hidden; cursor:pointer;
  }
  .kcs-panel:hover{filter:brightness(0.97);}
  .kcs-unclassified{
    display:flex; align-items:center; gap:8px; padding:8px 16px;
    background:rgba(214,57,75,0.08); color:var(--red); font-size:12px; font-weight:700;
    border-bottom:1px solid var(--line);
  }
  .kcs-grid{display:grid; grid-template-columns:repeat(3, 1fr);}
  .kcs-col{padding:16px 14px; border-left:1px solid var(--line);}
  .kcs-col:first-child{border-left:none;}
  .kcs-kho-name{font-family:var(--mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
  .kcs-total{font-family:var(--mono); font-weight:700; font-size:28px; margin-top:6px; color:var(--text);}
  .kcs-total-label{font-size:11px; color:var(--muted-2); margin-bottom:10px;}
  .kcs-status-row{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text); padding:3px 0;}
  .kcs-status-row .kcs-dot{width:7px; height:7px; border-radius:50%; flex:none;}
  .kcs-status-row .kcs-dot.bad{background:var(--red);}
  .kcs-status-row .kcs-dot.accent{background:var(--amber);}
  .kcs-status-row .kcs-dot.good{background:var(--teal);}
  .kcs-status-row b{margin-left:auto; font-family:var(--mono);}
  .kcs-hint{text-align:center; padding:7px 0; font-size:11px; color:var(--muted-2); border-top:1px solid var(--line);}
  @media (max-width:640px){
    .kcs-grid{grid-template-columns:1fr;}
    .kcs-col{border-left:none; border-top:1px solid var(--line);}
    .kcs-col:first-child{border-top:none;}
  }

  .grid{display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:16px; margin-bottom:16px;}
  .panel{
    background:var(--panel); border:1px solid var(--line); border-radius:10px;
    padding:18px 18px 16px;
  }
  .panel h2{
    font-family:var(--disp); font-size:14.5px; font-weight:600; margin:0 0 3px;
    display:flex; align-items:center; gap:8px;
  }
  .panel h2 .tag{
    font-family:var(--mono); font-size:9.5px; color:var(--bg); background:var(--amber);
    padding:2px 6px; border-radius:3px; letter-spacing:.05em; font-weight:700;
  }
  .panel .desc{font-size:12px; color:var(--muted); margin-bottom:14px;}
  .row2{grid-column:span 2;}
  .row3{grid-column:span 3;}

  .wh-map{display:flex; gap:10px; align-items:flex-end; height:190px; padding:6px 4px 0;}
  .wh-block{ flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; position:relative; }
  .wh-bar-track{position:relative; width:100%; flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; overflow:visible;}
  .wh-bar{
    width:100%; border-radius:6px 6px 3px 3px; position:relative; overflow:hidden;
    border:1px solid rgba(22,32,46,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    transition:height .3s ease; flex-shrink:0;
  }
  .wh-bar .ng-slice{position:absolute; bottom:0; left:0; right:0; background:repeating-linear-gradient(135deg, rgba(214,57,75,0.85), rgba(214,57,75,0.85) 4px, rgba(214,57,75,0.5) 4px, rgba(214,57,75,0.5) 8px);}
  .wh-name{font-family:var(--mono); font-size:12px; margin-top:10px; color:var(--text); font-weight:600; flex-shrink:0;}
  .wh-qty{font-family:var(--mono); font-size:15px; color:var(--amber); font-weight:700; margin-bottom:4px; flex-shrink:0;}
  .wh-pct{font-size:10.5px; color:var(--muted-2); margin-top:2px; font-family:var(--mono); flex-shrink:0;}
  .wh-floor{height:1px; background:var(--line); margin-top:0;}
  .legend-inline{display:flex; gap:16px; margin-top:14px; font-size:11px; color:var(--muted); font-family:var(--mono);}
  .legend-inline span{display:inline-flex; align-items:center; gap:6px;}
  .sw{width:10px;height:10px;border-radius:2px;display:inline-block;}

  canvas{max-width:100%;}

  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  thead th{
    text-align:left; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted-2); font-weight:600; padding:6px 8px;
    border-bottom:1px solid var(--line);
  }
  tbody td{padding:7px 8px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); color:var(--text);}
  tbody tr:hover{background:rgba(22,32,46,0.035);}
  .num{text-align:right; font-weight:600;}
  .barcell{position:relative;}
  .barcell .bg{position:absolute; left:0; top:0; bottom:0; background:linear-gradient(90deg, rgba(183,110,0,0.14), rgba(183,110,0,0.03)); border-radius:3px;}
  .tag-kho{
    font-family:var(--mono); font-size:10px; padding:1px 6px; border-radius:3px;
    border:1px solid var(--line); color:var(--muted); white-space:nowrap;
  }
  .cpt-kho-manual-select{
    font-family:var(--mono); font-size:11px; padding:2px 4px; border-radius:5px;
    border:1px solid var(--line); color:var(--text); background:var(--panel); cursor:pointer;
  }
  .cpt-kho-manual-select.is-manual{
    border:1px dashed var(--amber); background:rgba(245,166,35,0.08);
  }
  .cpt-kho-manual-select:focus{outline:none; border-style:solid;}
  .cpt-short-badge{
    font-family:var(--mono); font-size:10px; font-weight:700; color:var(--red);
    background:rgba(214,57,75,0.12); border:1px solid rgba(214,57,75,0.35); border-radius:5px;
    padding:2px 7px; cursor:pointer; white-space:nowrap; margin-left:6px; vertical-align:middle;
  }
  .cpt-short-badge:hover{background:rgba(214,57,75,0.22);}
  .cpt-change-badge{
    font-family:var(--mono); font-size:10px; font-weight:700; border-radius:5px;
    padding:2px 7px; white-space:nowrap; margin-right:6px; vertical-align:middle; display:inline-block;
  }
  .cpt-change-new{color:var(--blue); background:rgba(46,110,222,0.12); border:1px solid rgba(46,110,222,0.35);}
  .cpt-change-changed{color:var(--amber-bright); background:rgba(245,166,35,0.14); border:1px solid rgba(245,166,35,0.4);}

  /* ============ Sơ đồ kho 3B ============ */
  .wh3b-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; font-size:11.5px; color:var(--muted); font-family:var(--mono);}
  .wh3b-legend span{display:inline-flex; align-items:center; gap:6px;}
  .wh3b-legend i{width:12px; height:12px; border-radius:3px; display:inline-block; border:1px solid rgba(22,32,46,0.15);}
  .wh3b-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(126px, 1fr)); gap:10px;
    margin-bottom:6px;
  }
  .wh3b-group-divider{
    grid-column:1 / -1; margin:10px 0 2px; padding:6px 12px; border-radius:7px;
    background:rgba(110,79,224,0.10); border:1px solid rgba(110,79,224,0.25);
    font-family:var(--mono); font-size:11.5px; font-weight:700; letter-spacing:.05em;
    color:var(--violet); text-transform:uppercase;
  }
  .wh3b-group-divider:first-child{margin-top:0;}

  .cmp-legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
  .cmp-legend span{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted);}
  .cmp-legend i{width:10px; height:10px; border-radius:3px; display:inline-block;}
  .cmp-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
  @media (max-width:900px){.cmp-grid{grid-template-columns:1fr;}}
  .cmp-table-scroll{max-height:640px; overflow:auto; border:1px solid var(--line); border-radius:8px;}
  .cmp-table-scroll .kho-empty{padding:28px 0;}
  tr.cmp-match td{background:rgba(47,169,107,0.28);}
  tr.cmp-mismatch td{background:rgba(214,57,75,0.30);}
  tr.cmp-onlyErp td{background:rgba(44,111,203,0.28);}
  tr.cmp-onlyWms td{background:rgba(138,92,246,0.28);}
  tr.cmp-mismatch td:last-child, tr.cmp-onlyErp td:last-child, tr.cmp-onlyWms td:last-child{font-weight:700;}

  .search-fab{
    position:fixed; right:26px; bottom:26px; z-index:600;
    display:flex; align-items:center; gap:8px; padding:12px 18px 12px 14px;
    border-radius:999px; border:none; cursor:pointer;
    background:var(--amber); color:#1a1206; font-family:var(--sans); font-weight:700; font-size:13px;
    box-shadow:0 10px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.05);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .search-fab:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,0.32), 0 0 0 1px rgba(0,0,0,0.05);}
  .search-fab:active{transform:translateY(0);}
  .search-fab svg{flex-shrink:0;}
  @media (max-width:640px){
    .search-fab{right:16px; bottom:16px; padding:11px 16px 11px 12px; font-size:12.5px;}
    #btn-fixed-back-to-pick{right:16px; bottom:78px;}
    .tx-xtc-grid{grid-template-columns:1fr !important;}
  }

  #desktop-mode-toggle{
    position:fixed; left:16px; bottom:16px; z-index:600;
    display:flex; align-items:center; gap:7px; padding:11px 16px 11px 13px;
    border-radius:999px; border:1px solid var(--line); cursor:pointer;
    background:var(--panel); color:var(--text); font-family:var(--sans); font-weight:700; font-size:12.5px;
    box-shadow:0 10px 28px rgba(0,0,0,0.20), 0 0 0 1px rgba(0,0,0,0.04);
  }
  #desktop-mode-toggle.on{background:var(--violet); color:#fff; border-color:var(--violet);}
  #desktop-mode-toggle svg{flex-shrink:0;}

  .search-sticky-controls{
    position:sticky; z-index:30; margin-bottom:16px;
    box-shadow:0 10px 22px rgba(0,0,0,0.10);
  }
  .wh3b-box{
    font-family:var(--sans); text-align:left; position:relative;
    background:var(--panel-2, var(--bg)); border:1.5px solid var(--line); border-radius:9px;
    padding:10px 11px 9px;
    transition:border-color .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  .wh3b-box:hover{border-color:var(--amber-bright); transform:translateY(-1px);}
  .wh3b-box.active{border-color:var(--violet); box-shadow:0 0 0 2px rgba(110,79,224,0.18);}
  .wh3b-box-main{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:6px; width:100%; padding-right:20px;}
  .wh3b-box-name{font-family:var(--mono); font-size:11.5px; font-weight:700; color:var(--text); letter-spacing:.01em;}
  .wh3b-box-count{font-family:var(--mono); font-size:16px; font-weight:700; color:var(--text); display:flex; align-items:baseline; gap:4px;}
  .wh3b-box-max{font-size:10.5px; font-weight:600; color:var(--muted-2);}
  .wh3b-over{font-size:9.5px; font-weight:700; color:var(--red); background:rgba(214,57,75,0.1); border-radius:4px; padding:0 4px; margin-left:2px;}
  .wh3b-box-fill{display:block; width:100%; height:6px; border-radius:4px; background:var(--line-soft); overflow:hidden;}
  .wh3b-box-fill-bar{display:block; height:100%; border-radius:4px; transition:width .25s ease;}
  .wh3b-box.lvl-empty .wh3b-box-fill-bar{background:var(--muted-2);}
  .wh3b-box.lvl-empty .wh3b-box-count{color:var(--muted-2);}
  .wh3b-box.lvl-low .wh3b-box-fill-bar{background:var(--teal);}
  .wh3b-box.lvl-mid .wh3b-box-fill-bar{background:var(--amber-bright);}
  .wh3b-box.lvl-full .wh3b-box-fill-bar{background:var(--red);}
  .wh3b-box-gear{
    position:absolute; top:7px; right:7px; width:19px; height:19px; border-radius:50%;
    border:none; background:rgba(22,32,46,0.06); color:var(--muted-2);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .wh3b-box-gear:hover{background:rgba(110,79,224,0.16); color:var(--violet);}
  .wh3b-ng-badge{
    display:inline-block; margin-left:5px; background:var(--red); color:#fff;
    font-size:8.5px; font-weight:700; padding:1px 5px; border-radius:4px; vertical-align:middle; letter-spacing:.02em;
  }
  .wh3b-empty{font-size:13px; color:var(--muted); padding:20px 4px;}
  .wh3b-detail-title{font-family:var(--mono); font-size:11px; color:var(--muted); margin:18px 0 8px;}
  .wh3b-detail-title b{color:var(--violet);}
  .wh3b-summary{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px;}
  .wh3b-summary div{display:flex; flex-direction:column; gap:2px;}
  .wh3b-summary b{font-family:var(--mono); font-size:17px; color:var(--text);}
  .wh3b-summary span{font-family:var(--mono); font-size:9.5px; color:var(--muted-2); text-transform:uppercase; letter-spacing:.04em;}

  .wh3b-grid-mode-btn{
    font-family:var(--mono); font-size:10.5px; font-weight:700; padding:5px 9px; border-radius:7px;
    border:1px solid var(--line); background:var(--panel-2, var(--bg)); color:var(--muted); cursor:pointer;
    white-space:nowrap;
  }
  .wh3b-grid-mode-btn:hover{border-color:var(--violet); color:var(--violet);}
  .wh3b-grid-mode-btn.active{border-color:var(--teal); color:var(--teal); background:rgba(14,143,118,0.1);}
  /* Heatmap 'qty' tô cả nền ô theo đúng % lấp đầy — ẩn bớt thanh fill mảnh cho khỏi lặp lại đúng 1
     thông tin 2 lần; heatmap 'oqc' tô theo tỉ lệ PASS/NG (thông tin KHÁC với % lấp đầy) nên vẫn giữ
     nguyên thanh fill để còn biết được mức lấp đầy song song. */
  .wh3b-box.heat-qty .wh3b-box-fill{opacity:.22;}
  .wh3b-custom-grid{display:grid; gap:10px; margin-bottom:6px;}
  .wh3b-custom-grid{touch-action:pan-y; overscroll-behavior-x:contain;}
  .wh3b-custom-grid .wh3b-box{touch-action:none; user-select:none;}
  .wh3b-custom-grid .wh3b-box.wh3b-dragging{opacity:.78; transform:scale(1.02); border-color:var(--violet); box-shadow:0 0 0 2px rgba(110,79,224,.28), 0 10px 24px rgba(0,0,0,.14); cursor:grabbing; z-index:20;}
  .wh3b-drag-hint{font-family:var(--mono);font-size:10px;color:var(--violet);background:rgba(110,79,224,.08);border:1px solid rgba(110,79,224,.2);padding:6px 9px;border-radius:7px;margin:0 0 10px;}
  .wh3b-custom-grid .wh3b-box-main{cursor:grab;}
  .wh3b-custom-grid .wh3b-box.wh3b-dragging .wh3b-box-main{cursor:grabbing;}
  .wh3b-custom-grid .wh3b-box-main:active{cursor:grabbing;}
  @media (max-width:760px){
    .wh3b-custom-grid{gap:7px;overflow-x:auto;padding:2px 2px 8px;align-items:stretch;}
    .wh3b-custom-grid .wh3b-box,.wh3b-custom-grid .wh3b-custom-add-cell{min-width:72px;}
    .wh3b-custom-grid .wh3b-box{padding:8px 8px 7px;}
    .wh3b-custom-grid .wh3b-box-name{font-size:10px;}
    .wh3b-custom-grid .wh3b-box-count{font-size:14px;}
  }

  .wh3b-custom-grid-note{
    font-family:var(--mono); font-size:11px; color:var(--violet); background:rgba(110,79,224,0.08);
    border:1px solid rgba(110,79,224,0.25); border-radius:8px; padding:8px 12px; margin-bottom:12px;
  }
  .wh3b-custom-add-cell{
    border:1.5px dashed var(--line); border-radius:9px; background:transparent; color:var(--muted-2);
    font-size:22px; font-weight:300; cursor:pointer; display:flex; align-items:center; justify-content:center;
    min-height:90px; transition:border-color .15s ease, color .15s ease;
  }
  .wh3b-custom-add-cell:hover{border-color:var(--violet); color:var(--violet);}
  .wh3b-custom-gear{
    position:absolute; top:7px; right:28px; width:19px; height:19px; border-radius:50%;
    border:none; background:rgba(22,32,46,0.06); color:var(--muted-2);
    display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .wh3b-custom-gear:hover{background:rgba(110,79,224,0.16); color:var(--violet);}

  /* Tay cầm kéo-thả để đổi kích thước ô trong lưới TUỲ CHỈNH — kéo viền phải = đổi độ rộng, kéo
     viền dưới = đổi độ cao, kéo góc = đổi cả 2. Chỉ xuất hiện trong .wh3b-custom-grid. */
  .wh3b-resize-handle{
    position:absolute; z-index:3; touch-action:none; border-radius:3px;
    background:rgba(110,79,224,0.28); opacity:.35;
    transition:opacity .15s ease, background-color .15s ease;
  }
  .wh3b-box:hover .wh3b-resize-handle, .wh3b-box.wh3b-resizing .wh3b-resize-handle{opacity:1;}
  .wh3b-resize-handle:hover{background:rgba(110,79,224,0.55);}
  .wh3b-resize-e{top:4px; bottom:4px; right:-5px; width:9px; cursor:ew-resize;}
  .wh3b-resize-s{left:4px; right:4px; bottom:-5px; height:9px; cursor:ns-resize;}
  .wh3b-resize-se{right:-6px; bottom:-6px; width:14px; height:14px; cursor:nwse-resize; background:transparent;}
  .wh3b-resize-se::after{
    content:''; position:absolute; right:3px; bottom:3px; width:7px; height:7px;
    border-right:2px solid var(--violet); border-bottom:2px solid var(--violet);
  }

  /* Ô đang được CHỌN (Ctrl+Click hoặc kéo chuột vùng chọn) trong grid tuỳ chỉnh — viền + nền nổi bật
     để phân biệt, dùng chung cho cả ô đã có locator lẫn ô trống ("+", chọn để làm đích dán). */
  .wh3b-cell-selected{
    outline:2px solid var(--teal) !important; outline-offset:-2px;
    background-color:rgba(47,190,158,0.14) !important;
    z-index:2;
  }
  button.wh3b-custom-add-cell.wh3b-cell-selected{color:var(--teal); border-color:var(--teal);}
  /* Vùng chọn đang kéo chuột (marquee) — hình chữ nhật mờ, KHÔNG chặn sự kiện chuột (pointer-events
     none) để không cản trở việc tính toán ô nào nằm trong vùng khi đang kéo. */
  .wh3b-marquee{
    position:fixed; z-index:50; pointer-events:none;
    border:1.5px dashed var(--teal); background:rgba(47,190,158,0.10);
  }
  .wh3b-box.wh3b-resizing{border-color:var(--violet); box-shadow:0 0 0 2px rgba(110,79,224,0.25); z-index:5;}
  .wh3b-resize-hint{
    position:absolute; left:50%; bottom:-22px; transform:translateX(-50%); z-index:6;
    font-family:var(--mono); font-size:10px; font-weight:700; color:#fff;
    background:var(--violet); padding:2px 6px; border-radius:5px; white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity .1s ease;
  }
  .wh3b-box.wh3b-resizing .wh3b-resize-hint{opacity:1;}

  /* Khối màu riêng cho từng phần của Sơ đồ kho 3B (PROD / A01-A33 / Picking / Loading) */
  #sodo3b-grid{display:flex; flex-direction:column; gap:16px;}
  .wh3b-block{border-radius:11px; padding:12px; border:1.5px solid; background:var(--panel);}
  .wh3b-block-prod{border-color:rgba(110,79,224,0.5); background:rgba(110,79,224,0.10);}
  .wh3b-block-main{border-color:rgba(44,111,203,0.45); background:rgba(44,111,203,0.08);}
  .wh3b-block-pick{border-color:rgba(245,166,35,0.55); background:rgba(245,166,35,0.11);}
  .wh3b-block-loading{border-color:rgba(14,143,118,0.5); background:rgba(14,143,118,0.10);}
  .wh3b-subgrid{display:grid; gap:10px;}
  .wh3b-subgrid-1col{grid-template-columns:1fr;}
  .wh3b-subgrid-2col{grid-template-columns:1fr 1fr;}
  .wh3b-subgrid-5col{grid-template-columns:repeat(5, 1fr);}
  @media (max-width:760px){ .wh3b-subgrid-5col{grid-template-columns:repeat(auto-fit, minmax(90px, 1fr));} }
  .wh3b-box-blank{visibility:hidden;}
  #sodo3b-panel{position:relative;}
  .wh3b-outside-warning{
    position:absolute; top:12px; right:12px; z-index:5;
    display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px;
    background:var(--red); color:#fff; border:none; cursor:pointer;
    font-family:var(--mono); font-size:11px; font-weight:700;
    box-shadow:0 4px 12px rgba(214,57,75,0.35);
    animation:whOutsidePulse 1.6s ease-in-out infinite;
  }
  .wh3b-outside-warning:hover{filter:brightness(1.08);}
  @keyframes whOutsidePulse{
    0%, 100%{ box-shadow:0 4px 12px rgba(214,57,75,0.35); }
    50%{ box-shadow:0 4px 18px rgba(214,57,75,0.6); }
  }

  /* ================= Panel "Cảnh báo hôm nay" (tổng hợp toàn app) ================= */
  .alerts-head{margin-bottom:12px;}
  .alerts-summary{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px;}
  .alerts-summary b{color:var(--red); font-weight:700;}
  .alerts-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px;}
  .alert-card{
    display:flex; align-items:flex-start; gap:10px; text-align:left; cursor:pointer;
    background:rgba(214,57,75,0.06); border:1px solid rgba(214,57,75,0.22); border-radius:10px;
    padding:11px 13px; font-family:var(--sans); transition:background .15s, transform .1s;
  }
  .alert-card:hover{background:rgba(214,57,75,0.13); transform:translateY(-1px);}
  .alert-card .alert-icon{flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--disp); font-weight:800; font-size:14px;}
  .alert-card .alert-body{min-width:0;}
  .alert-card .alert-title{font-size:12.5px; font-weight:700; color:var(--text);}
  .alert-card .alert-desc{font-family:var(--mono); font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.4;}
  .alerts-empty{font-family:var(--mono); font-size:12px; color:var(--teal); padding:4px 2px;}

  /* ================= Xu hướng Utilization (biểu đồ đường, tự vẽ bằng SVG) ================= */
  .trend-legend{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:10px;}
  .trend-legend span{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted);}
  .trend-legend i{width:14px; height:3px; border-radius:2px; display:inline-block;}
  .trend-chart-svg text{font-family:var(--mono);}

  /* ================= Màn hình kho (chữ to, chỉ hiện việc cần làm hôm nay) ================= */
  .kiosk-wrap{background:var(--bg); min-height:100vh; padding:22px;}
  .kiosk-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .kiosk-title{font-family:var(--disp); font-size:30px; font-weight:800; color:var(--text);}
  .kiosk-date{font-family:var(--mono); font-size:15px; color:var(--muted); margin-top:4px; text-transform:capitalize;}
  .kiosk-refresh-btn{
    width:56px; height:56px; border-radius:16px; border:1px solid var(--line); background:var(--panel);
    color:var(--violet); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .kiosk-refresh-btn:hover{background:var(--line-soft);}
  .kiosk-refresh-btn.spinning svg{animation:kioskSpin .7s linear infinite;}
  @keyframes kioskSpin{ to{ transform:rotate(360deg); } }

  .kiosk-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:22px;}
  .kiosk-kpi{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; text-align:center;}
  .kiosk-kpi-val{font-family:var(--disp); font-size:44px; font-weight:800; line-height:1;}
  .kiosk-kpi-label{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:8px; letter-spacing:.03em;}
  .kiosk-kpi.bad .kiosk-kpi-val{color:var(--red);}
  .kiosk-kpi.warn .kiosk-kpi-val{color:var(--amber-bright);}
  .kiosk-kpi.good .kiosk-kpi-val{color:var(--teal);}

  .kiosk-list{display:flex; flex-direction:column; gap:14px;}
  .kiosk-empty{font-family:var(--mono); font-size:16px; color:var(--teal); text-align:center; padding:60px 20px;}
  .kiosk-card{
    background:var(--panel); border-radius:16px; border-left:10px solid transparent;
    padding:18px 22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px;
    box-shadow:0 2px 8px rgba(0,0,0,0.04);
  }
  .kiosk-card.lvl-done{opacity:0.7;}
  .kiosk-card.lvl-manualDone{opacity:0.85;}
  .kiosk-card-cont{font-family:var(--disp); font-size:34px; font-weight:800; color:var(--text); min-width:130px;}
  .kiosk-card-time{font-family:var(--mono); font-size:22px; font-weight:700; color:var(--muted); min-width:80px;}
  .kiosk-card-loaddate{font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted-2); margin-bottom:2px;}
  .kiosk-card-status{font-family:var(--disp); font-size:20px; font-weight:800; flex:1 1 auto; min-width:160px;}
  .kiosk-card-meta{font-family:var(--mono); font-size:13px; color:var(--muted-2); width:100%;}
  .kiosk-card-warn{
    width:100%; font-family:var(--mono); font-size:14px; font-weight:700; color:#fff;
    background:var(--red); border-radius:8px; padding:8px 12px; margin-top:4px;
  }
  @media (max-width:600px){
    .kiosk-card-cont{font-size:26px;}
    .kiosk-card-time{font-size:18px;}
    .kiosk-card-status{font-size:16px;}
  }
  .kiosk-card-pick-btn{
    flex:0 0 auto; background:var(--violet); color:#fff; border:none; border-radius:10px;
    padding:10px 16px; font-family:var(--sans); font-weight:700; font-size:14px; cursor:pointer;
    display:flex; align-items:center; gap:6px;
  }
  .kiosk-card-pick-btn:hover{filter:brightness(1.1);}
  .kiosk-card-mark-btn{
    flex:0 0 auto; background:var(--panel-2, var(--bg)); color:var(--teal); border:2px solid var(--teal);
    border-radius:10px; padding:9px 16px; font-family:var(--sans); font-weight:700; font-size:14px;
    cursor:pointer; display:flex; align-items:center; gap:6px;
  }
  .kiosk-card-mark-btn:hover{background:rgba(14,143,118,0.1);}
  .kiosk-card-mark-btn.marked{background:var(--violet); border-color:var(--violet); color:#fff;}
  .cpt-pick-slip-btn{
    border:none; background:none; cursor:pointer; font-size:13px; margin-left:4px; padding:1px 3px;
    border-radius:4px; opacity:0.7;
  }
  .cpt-pick-slip-btn:hover{opacity:1; background:var(--line-soft);}
  .cpt-mark-btn{
    border:1px solid var(--teal); background:none; color:var(--teal); cursor:pointer;
    font-size:11px; font-weight:700; margin-left:6px; padding:2px 6px; border-radius:5px;
  }
  .cpt-mark-btn:hover{background:rgba(14,143,118,0.1);}
  .cpt-mark-btn.marked{background:var(--violet); border-color:var(--violet); color:#fff;}
  .cpt-delete-btn{
    border:1px solid var(--red); background:none; color:var(--red); cursor:pointer;
    font-size:11px; margin-left:6px; padding:2px 6px; border-radius:5px; line-height:1;
  }
  .cpt-delete-btn:hover{background:rgba(214,57,75,0.12);}
  .cki-restore-btn{
    border:1px solid var(--muted-2); background:none; color:var(--muted); cursor:pointer;
    padding:4px 7px; border-radius:5px; line-height:1; display:inline-flex; align-items:center;
  }
  .cki-restore-btn:hover{border-color:var(--amber); color:var(--amber); background:rgba(245,166,35,0.1);}
  .cpt-hidden-cont-wrap{position:relative; display:inline-block; margin-top:10px;}
  .cpt-hidden-cont-toggle{
    display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--panel);
    color:var(--muted); border-radius:20px; padding:5px 12px; font-size:12px; cursor:pointer;
  }
  .cpt-hidden-cont-toggle:hover{border-color:rgba(214,57,75,0.4); color:var(--red);}
  .cpt-hidden-cont-delete-all{
    display:inline-flex; align-items:center; justify-content:center; margin-left:6px;
    width:28px; height:28px; border:1px solid var(--line); background:var(--panel);
    color:var(--muted); border-radius:50%; cursor:pointer; vertical-align:middle;
  }
  .cpt-hidden-cont-delete-all:hover{border-color:var(--red); color:#fff; background:var(--red);}
  .cpt-hidden-cont-count{
    background:rgba(214,57,75,0.12); color:var(--red); font-weight:700; font-size:10.5px;
    border-radius:10px; padding:1px 6px; font-family:var(--mono);
  }
  .cpt-hidden-cont-popup{
    position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:260px; max-width:min(420px, 90vw);
    background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.15);
    padding:12px;
  }
  .confirmed-history-popup{
    position:absolute; top:calc(100% + 6px); right:0; z-index:40; width:min(640px, 94vw); max-height:70vh; overflow:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.18);
    padding:14px;
  }
  .confirmed-history-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px;}
  .confirmed-history-tab{
    border:1px solid var(--line); background:var(--bg); color:var(--muted); border-radius:16px;
    padding:4px 12px; font-size:11.5px; font-family:var(--mono); cursor:pointer;
  }
  .confirmed-history-tab.active{background:var(--violet); border-color:var(--violet); color:#fff; font-weight:700;}
  .confirmed-history-empty{text-align:center; color:var(--muted-2); font-style:italic; padding:16px 0;}
  .app-toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:20000;
    background:#1d2430; color:#fff; padding:11px 20px; border-radius:9px; font-size:13px; font-weight:600;
    box-shadow:0 8px 24px rgba(0,0,0,0.35); max-width:92vw; text-align:center;
  }
  .pwa-update-banner{
    position:fixed; top:0; left:0; right:0; z-index:21000;
    background:var(--violet); color:#fff; font-size:13.5px; font-weight:600;
    padding:10px 14px; display:flex; align-items:center; justify-content:center; gap:10px;
    box-shadow:0 4px 14px rgba(0,0,0,0.25); padding-top:calc(10px + env(safe-area-inset-top, 0px));
  }
  .pwa-update-banner button{
    border:1px solid rgba(255,255,255,0.6); background:rgba(255,255,255,0.15); color:#fff;
    border-radius:8px; padding:5px 12px; font-size:13px; font-weight:700; cursor:pointer;
  }
  .pwa-update-banner button:hover{background:rgba(255,255,255,0.3);}
  .cpt-hidden-cont-popup-title{font-size:11.5px; color:var(--muted-2); margin-bottom:8px; line-height:1.5;}
  .cpt-hidden-cont-popup-list{display:flex; flex-wrap:wrap; gap:6px;}
  .cpt-hidden-cont-chip{
    display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--line);
    border-radius:20px; padding:3px 10px 3px 12px; font-size:11.5px; font-family:var(--mono);
  }
  .cpt-hidden-cont-restore{
    border:none; background:none; color:var(--teal); cursor:pointer; font-weight:700; font-size:12px; padding:0 2px;
  }
  .cpt-hidden-cont-restore:hover{text-decoration:underline;}
  tr.cpt-row-manual{background:rgba(110,79,224,0.12);}
  tr.cpt-row-manual:hover{background:rgba(110,79,224,0.2);}

  /* ================= Modal "Phiếu pick theo container" (xem trên màn hình + xuất Excel) ================= */
  .pick-slip-overlay{position:fixed; inset:0; z-index:10001; display:none; align-items:center; justify-content:center; padding:16px;}
  .pick-slip-overlay.show{display:flex;}
  .pick-slip-overlay::before{content:''; position:absolute; inset:0; background:rgba(10,14,22,0.6);}
  .pick-slip-box{position:relative; background:var(--panel); border-radius:14px; width:min(760px, 100%); max-height:92vh; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,0.35);}
  .pick-slip-toolbar{display:flex; justify-content:flex-end; gap:8px; padding:12px 16px; border-bottom:1px solid var(--line);}
  .pick-slip-content{overflow-y:auto; padding:24px 28px; font-family:var(--sans); color:#111;}
  .pick-slip-content, .pick-slip-content *{background:#fff;}
  .ps-header{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #111; padding-bottom:10px; margin-bottom:14px;}
  .ps-title{font-family:var(--disp); font-size:22px; font-weight:800;}
  .ps-cont{font-family:var(--disp); font-size:30px; font-weight:800; margin-top:2px;}
  .ps-meta{font-family:var(--mono); font-size:12px; color:#444; text-align:right; line-height:1.7;}
  .ps-kho-title{
    font-family:var(--disp); font-weight:800; font-size:15px; color:#fff;
    background:linear-gradient(135deg, var(--violet), #8b6ef0); padding:8px 12px; margin-top:16px;
    border-radius:6px; box-shadow:0 2px 6px rgba(110,79,224,0.35);
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .ps-kho-title *{background:transparent !important;}
  .ps-kho-title-main{color:#fff;}
  .ps-kho-title-main b{color:#fff;}
  .ps-kho-title-kh{
    font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,0.22) !important;
    padding:3px 10px; border-radius:20px; white-space:nowrap; flex:none;
  }
  .ps-kho-title.surplus{background:linear-gradient(135deg, #c9740a, #f0b429);}
  .ps-kho-title-surplus-badge{
    font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,0.18) !important;
    padding:3px 10px; border-radius:20px; white-space:nowrap; flex:none;
  }
  .ps-kho-title-multipo-badge{
    font-size:12px; font-weight:700; color:#fff; background:var(--red) !important;
    padding:3px 10px; border-radius:20px; white-space:nowrap; flex:none;
  }
  .ps-row-surplus td{background:#fff6e0 !important;}
  .ps-item-surplus-badge{
    display:inline-block; font-size:11px; font-weight:700; color:#8a5c00; background:#ffe8b0;
    padding:1px 8px; border-radius:10px; margin-left:6px; white-space:nowrap;
  }
  .ps-item-multipo-badge{
    display:inline-block; font-size:11px; font-weight:700; color:#fff; background:var(--red);
    padding:1px 8px; border-radius:10px; margin-left:6px; white-space:nowrap;
  }
  tr.row-scanned-extra{ background:rgba(214,57,75,0.06) !important; }
  .scanned-extra-badge{
    display:inline-block; font-size:10.5px; font-weight:700; color:#fff; background:var(--red);
    padding:1px 7px; border-radius:10px; margin-left:6px; white-space:nowrap; vertical-align:middle;
  }
  .scanned-extra-loc-select{
    border:1px dashed var(--red); border-radius:5px; padding:3px 6px; font-size:12px;
    font-family:var(--mono); background:#fff; max-width:140px;
  }
  .scanned-extra-wms-note{
    font-size:10px; color:var(--muted-2); margin-top:2px; font-family:var(--mono);
  }
  .ps-loc-header-row th{
    background:linear-gradient(135deg, #0e8f76, #1cb8a0) !important; color:#fff !important;
    font-weight:800; font-size:12.5px; padding:8px 10px;
  }
  .ps-kho-subrow td{background:#f6f6f6; font-weight:700; font-size:11.5px; text-transform:uppercase; color:#555;}
  .ps-note{font-size:12px; color:#555; background:#f6f4fd; border:1px solid #e1dbf7; border-radius:8px; padding:8px 12px; margin-bottom:6px;}
  .ps-row-suggested td{background:#f4faf8;}
  .ps-table{width:100%; border-collapse:collapse; margin-top:6px; font-size:12.5px;}
  .ps-table th, .ps-table td{border:1px solid #ccc; padding:6px 8px; text-align:left;}
  .ps-table th{background:#f3f3f3; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;}
  .ps-table td.num{text-align:right; font-weight:700;}
  .ps-total-row td{font-weight:800; background:#fafafa;}
  .ps-subtotal-row td{font-weight:700; background:#f0f0f0; font-size:12px;}
  .ps-shortage{margin-top:14px; padding:10px 14px; border:2px solid #d6394b; border-radius:8px; color:#d6394b; font-weight:700; font-size:13px;}
  .ps-multipo-warning{margin-bottom:12px; padding:10px 14px; border:2px solid #d68f00; border-radius:8px; background:#fff8e6; color:#8a5c00; font-weight:600; font-size:12.5px; line-height:1.7;}
  .ps-kho-subtotal-note{text-align:right; font-size:11.5px; font-weight:700; color:#666; padding:4px 4px 10px;}
  .ps-compact-header{display:flex; flex-direction:column; gap:2px; padding-bottom:10px; margin-bottom:8px; border-bottom:2px solid #111;}
  .ps-compact-header-top{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--disp);}
  .ps-cc-cont{font-size:20px; font-weight:800;}
  .ps-cc-time{font-family:var(--mono); font-size:13px; color:#444; font-weight:600;}
  .ps-compact-header-sub{display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:#888; margin-top:2px;}
  .ps-compact-kho{font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#ffffff; background:var(--violet); padding:4px 10px; border-radius:5px; margin-top:10px; opacity:0.88;}
  .ps-compact-loc{display:flex; justify-content:space-between; align-items:center; background:#f3f0fb; padding:6px 10px; font-weight:800; font-size:12.5px; border-left:3px solid var(--violet);}
  .ps-compact-loc.surplus{background:#fff2da; border-left-color:#c9740a;}
  .ps-cl-sub{font-weight:700; font-size:11px; color:#666; font-family:var(--mono);}
  /* Chế độ Mã hàng: đảo độ nhấn so với Locator — dòng MÃ là trọng tâm (nền đậm), dải KHO chỉ là bối
     cảnh phụ (nền nhạt hơn hẳn) — ngược lại với chế độ Locator (KHO đậm, Locator nhạt, giữ nguyên). */
  .ps-compact-item-head{display:flex; justify-content:space-between; align-items:center; background:var(--violet); color:#fff; padding:7px 10px; font-weight:800; font-size:13.5px; border-radius:5px; margin-top:10px;}
  .ps-compact-item-head.surplus{background:#c9740a;}
  .ps-compact-item-head .po{color:#e6ddfa; font-weight:500; font-size:12px; background:transparent;}
  .ps-compact-item-head .ps-cl-sub-light{font-weight:700; font-size:11px; color:#fff; font-family:var(--mono);}
  .ps-compact-item-head > span, .ps-compact-loc > span{background:transparent;}
  .ps-compact-item-head b, .ps-compact-loc b{background:transparent;}
  .ps-compact-kho-light{font-size:10px; font-weight:700; letter-spacing:.02em; color:#6b5a9e; background:#f3f0fb; padding:4px 10px; border-radius:5px; margin-top:10px; border:1px solid #e6def7;}
  .ps-compact-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 10px; border-bottom:1px solid #eee; flex-wrap:wrap;}
  .ps-compact-item.surplus{background:#fff8e6;}
  .ps-ci-name{font-size:13px; background:transparent;}
  .ps-ci-name .po{color:#888; font-weight:400; font-size:12px; background:transparent;}
  .ps-ci-name b{background:transparent;}
  .ps-ci-detail{font-size:11px; color:#888; margin-top:1px; font-family:var(--mono);}
  .ps-ci-qty{font-size:11px; color:#444; font-family:var(--mono); font-weight:800; text-align:left; white-space:nowrap; flex-shrink:0; margin-left:auto; width:175px; background:transparent;}
  .ps-compact-total{display:flex; justify-content:space-between; padding:10px; margin-top:8px; background:#fafafa; border-top:2px solid #111; font-weight:800; font-size:13px;}
  .ps-footer{margin-top:20px; font-family:var(--mono); font-size:11px; color:#666; display:flex; justify-content:space-between;}

  .wh3b-search-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:14px; flex-wrap:wrap;}
  .wh3b-search-input{
    flex:1; min-width:220px; resize:vertical; min-height:38px; max-height:120px;
    font-family:var(--mono); font-size:12.5px; color:var(--text);
    background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 11px; outline:none;
  }
  .wh3b-search-input:focus{border-color:var(--amber-bright);}
  .wh3b-oqc-toggle{display:flex; gap:12px; align-items:center; padding:8px 0; flex:0 0 auto;}
  .wh3b-oqc-toggle label{display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:12px; color:var(--muted); cursor:pointer; white-space:nowrap;}
  .wh3b-oqc-toggle input{width:15px; height:15px; cursor:pointer;}
  .wh3b-box.wh3b-dim{opacity:0.25; filter:grayscale(65%); transform:none !important;}
  .wh3b-box.wh3b-highlight{box-shadow:0 0 0 3px rgba(245,166,35,0.6), 0 4px 10px rgba(0,0,0,0.12); border-color:var(--amber-bright); z-index:1;}

  footer{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted-2); font-family:var(--mono); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

  .btn-update.btn-secondary{
    background:transparent; color:var(--text); border:1px solid var(--line);
  }
  .btn-update.btn-secondary:hover{background:var(--line-soft); filter:none;}
  .btn-update.btn-danger{
    background:transparent; color:var(--red); border:1px solid rgba(214,57,75,0.4);
  }
  .btn-update.btn-danger:hover{background:rgba(214,57,75,0.08); filter:none;}
  .autosave-note{font-size:10px; color:var(--muted-2); font-family:var(--mono); margin-top:4px; text-align:right;}

  #btn-save-cloud{position:relative;}
  .btn-save-dot{display:none; position:absolute; top:-4px; right:-4px; width:10px; height:10px; border-radius:50%; background:var(--red); box-shadow:0 0 0 2px var(--panel);}
  #btn-save-cloud.has-changes{animation:btnSavePulse 1.4s ease-in-out infinite;}
  #btn-save-cloud.has-changes .btn-save-dot{display:block;}
  @keyframes btnSavePulse{
    0%, 100%{ box-shadow:0 0 0 0 rgba(182,110,0,0.35); }
    50%{ box-shadow:0 0 0 5px rgba(182,110,0,0); }
  }

  /* modal 4 khu vực kho */
  #kho-modal-overlay{
    position:fixed; inset:0; background:rgba(6,10,16,0.78); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:60; padding:26px;
  }
  #kho-modal-overlay.show{display:flex;}
  .kho-modal{
    background:var(--panel); border:1px solid var(--line); border-radius:12px;
    width:100%; max-width:1080px; max-height:88vh; display:flex; flex-direction:column;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .kho-modal-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 22px; border-bottom:1px solid var(--line);
  }
  .kho-modal-head h2{font-family:var(--disp); font-size:17px; margin:0; font-weight:600;}
  .kho-modal-head .desc{font-size:12px; color:var(--muted); margin-top:4px;}
  .btn-close{
    background:transparent; border:1px solid var(--line); color:var(--muted);
    width:30px; height:30px; border-radius:7px; cursor:pointer; font-size:16px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .btn-close:hover{color:var(--text); border-color:var(--muted-2);}

  .modal-main-tabs{
    display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--line); background:var(--panel-2);
  }
  .modal-main-tab{
    font-family:var(--disp); font-size:13px; font-weight:600; padding:13px 16px;
    background:transparent; border:none; border-bottom:3px solid transparent;
    color:var(--muted); cursor:pointer; transition:color .15s ease;
  }
  .modal-main-tab:hover{color:var(--text);}
  .modal-main-tab.active{color:var(--text); border-bottom-color:var(--amber-bright);}
  .modal-view{display:flex; flex-direction:column; flex:1; min-height:0;}

  .kho-tabs{
    display:flex; gap:6px; padding:14px 22px 0; border-bottom:1px solid var(--line); flex-wrap:wrap;
  }
  .kho-tab{
    font-family:var(--mono); font-size:12px; font-weight:600; padding:9px 16px;
    background:transparent; border:1px solid var(--line); border-bottom:none;
    border-radius:8px 8px 0 0; color:var(--muted); cursor:pointer; letter-spacing:.03em;
    position:relative; top:1px;
  }
  .kho-tab.active{ color:var(--bg); background:var(--amber); border-color:var(--amber); }
  .kho-tab .cnt{opacity:.7; font-weight:500; margin-left:4px;}
  .kho-tab.disabled{opacity:.35; cursor:not-allowed;}

  .kho-modal-toolbar{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    padding:14px 22px; flex-wrap:wrap;
  }
  .kho-search{
    flex:1; min-width:200px; background:var(--bg); border:1px solid var(--line); border-radius:7px;
    padding:9px 12px; color:var(--text); font-family:var(--mono); font-size:12.5px; outline:none;
  }
  .kho-search:focus{border-color:var(--amber);}
  .kho-search:disabled{opacity:.4; cursor:not-allowed;}
  .kho-search::placeholder, #kho-multi-search::placeholder, #file-input::placeholder{color:var(--muted-2);}
  .kho-summary{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap;}
  .kho-summary b{color:var(--amber);}

  .th-filter-btn:hover{opacity:1 !important;}
  .tx-filter-dropdown label:hover{background:var(--bg);}
  .tx-filter-clear-link{font-size:11.5px; color:var(--blue); background:none; border:none; cursor:pointer; padding:0; white-space:nowrap;}
  .tx-filter-clear-link:hover{text-decoration:underline;}

  .gi-clickable{color:var(--blue); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; cursor:pointer; font-weight:600;}
  .gi-clickable:hover{color:var(--amber);}
  .gi-qr-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,12,16,0.55); backdrop-filter:blur(2px);
    z-index:10000; align-items:center; justify-content:center; padding:20px;
  }
  .gi-qr-overlay.show{display:flex;}
  .gi-qr-box{
    background:#fff; border-radius:16px; padding:24px 26px 20px; width:min(320px,92vw);
    box-shadow:0 24px 64px rgba(0,0,0,0.35); text-align:center; position:relative;
  }
  .gi-qr-close{
    position:absolute; top:10px; right:10px; border:none; background:var(--bg); border-radius:8px;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  }
  .gi-qr-close:hover{background:var(--line);}
  .gi-qr-title{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted); text-transform:uppercase; margin-bottom:4px;}
  .gi-qr-value{font-family:var(--mono); font-size:16px; font-weight:800; color:var(--text); margin-bottom:16px; word-break:break-all;}
  .gi-qr-canvas-wrap{display:flex; align-items:center; justify-content:center; padding:12px; background:#fff; border:1px solid var(--line); border-radius:10px; min-height:220px;}
  .gi-qr-hint{font-size:11px; color:var(--muted-2); margin-top:14px;}

  /* Overlay quét mã vạch/QR bằng camera (Kiểm tồn kho) */
  .qr-scan-overlay{
    display:none; position:fixed; inset:0; background:rgba(6,8,12,0.92);
    z-index:10500; align-items:center; justify-content:center; padding:14px;
  }
  .qr-scan-box{
    width:min(480px, 96vw); display:flex; flex-direction:column; gap:10px;
  }
  .qr-scan-topbar{
    display:flex; align-items:center; justify-content:space-between; color:#fff; font-family:var(--mono); font-size:13px;
  }
  .qr-scan-topbar .btn-update{background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); color:#fff;}
  .qr-scan-clear-history-btn{
    background:none; border:1px solid rgba(255,255,255,0.35); color:#fff; border-radius:8px;
    padding:4px 8px; font-size:11px; cursor:pointer; font-family:var(--mono); white-space:nowrap;
  }
  .qr-scan-clear-history-btn:hover, .qr-scan-clear-history-btn:active{background:rgba(255,255,255,0.18);}
  .qr-scan-locator-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:10px;
    padding:10px 12px;
  }
  .qr-scan-locator-badge{color:#fff; font-size:13px; font-weight:700; font-family:var(--mono); flex:1; min-width:0;}
  .qr-scan-reset-loc-btn{
    border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.14); color:#fff;
    border-radius:10px; padding:12px 20px; font-size:15px; font-weight:700; cursor:pointer;
    white-space:nowrap; min-height:48px; flex-shrink:0;
  }
  .qr-scan-reset-loc-btn:hover, .qr-scan-reset-loc-btn:active{background:rgba(255,255,255,0.26);}
  .qr-scan-oqc-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.14); border-radius:10px;
    padding:8px 12px;
  }
  .qr-scan-oqc-label{color:rgba(255,255,255,0.75); font-size:12px; font-weight:600; flex-shrink:0;}
  .qr-scan-oqc-btns{display:flex; gap:6px; flex-wrap:wrap;}
  .qr-scan-oqc-btn{
    border:1px solid rgba(255,255,255,0.35); background:transparent; color:#fff;
    border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer;
  }
  .qr-scan-oqc-btn.active{background:var(--amber-bright); border-color:var(--amber-bright); color:#3a2400;}
  .qr-scan-oqc-btn:not(.active):hover{background:rgba(255,255,255,0.14);}
  .qr-scan-video-wrap{
    position:relative; width:100%; aspect-ratio:1/1; background:#000; border-radius:12px; overflow:hidden;
  }
  .qr-scan-video-wrap video{width:100%; height:100%; object-fit:cover;}
  .qr-scan-frame{
    position:absolute; inset:12%; border:3px solid var(--teal); border-radius:14px;
    box-shadow:0 0 0 2000px rgba(0,0,0,0.35); pointer-events:none;
  }
  .qr-scan-status{
    text-align:center; color:#fff; font-size:13.5px; min-height:20px; font-weight:600;
  }
  .qr-scan-status.err{color:#ff8a8a;}
  .qr-scan-status.ok{color:#7be0c0;}
  .qr-scan-status.warn{color:#ffcf7a;}
  .qr-scan-manual-row{display:flex; gap:8px;}
  .qr-scan-manual-row input{
    flex:1; min-width:0; border:1px solid rgba(255,255,255,0.3); background:rgba(255,255,255,0.08);
    color:#fff; border-radius:10px; padding:10px 12px; font-size:14px; font-family:var(--mono);
  }
  .qr-scan-manual-row input::placeholder{color:rgba(255,255,255,0.5);}
  .qr-scan-manual-btn{
    border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.14); color:#fff;
    border-radius:10px; padding:10px 18px; font-size:14px; font-weight:700; cursor:pointer; flex-shrink:0;
  }
  .qr-scan-manual-btn:hover, .qr-scan-manual-btn:active{background:rgba(255,255,255,0.26);}
  .qr-scan-log{
    max-height:120px; overflow-y:auto; background:rgba(255,255,255,0.06); border-radius:10px; padding:8px 10px;
    font-family:var(--mono); font-size:11.5px; color:#ddd; display:flex; flex-direction:column-reverse; gap:4px;
  }
  .qr-scan-log-item.err{color:#ff8a8a;}
  .qr-scan-log-item.warn{color:#ffcf7a;}
  .qr-scan-log-item.ok{color:#7be0c0;}

  /* modal Cài đặt lưu trữ & đồng bộ (mở từ nút bánh răng trên sidebar) */
  .settings-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,12,16,0.6); backdrop-filter:blur(2px);
    z-index:10000; align-items:center; justify-content:center; padding:20px;
  }
  .settings-overlay.show{display:flex;}
  .settings-box{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; width:min(520px,94vw);
    max-height:88vh; overflow-y:auto; box-shadow:0 24px 64px rgba(0,0,0,0.4); position:relative;
  }
  .settings-head{
    display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
    padding:20px 22px 14px; border-bottom:1px solid var(--line); position:sticky; top:0;
    background:var(--panel); z-index:1;
  }
  .settings-head h2{font-family:var(--disp); font-size:16px; margin:0 0 4px; font-weight:700;}
  .settings-head .desc{font-size:11.5px; color:var(--muted);}
  .settings-close{
    position:relative; flex-shrink:0; border:none; background:var(--bg); border-radius:8px;
    width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text);
  }
  .settings-close:hover{background:var(--line);}
  .settings-body{padding:18px 22px 22px; display:flex; flex-direction:column; gap:20px;}
  .settings-section{display:flex; flex-direction:column; gap:8px;}
  .settings-section-label{
    font-family:var(--mono); font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em;
  }
  .settings-btn-row{display:flex; gap:8px; flex-wrap:wrap;}
  .settings-btn-row .btn-update{white-space:nowrap;}
  .settings-cloud-row{display:flex; gap:8px; flex-wrap:wrap;}
  .settings-cloud-row input{
    font-family:var(--mono); font-size:11px; padding:7px 9px; border:1px solid var(--line); border-radius:6px;
    background:var(--bg); color:var(--text); flex:1; min-width:140px;
  }
  .settings-status-block{display:flex; flex-direction:column; gap:4px;}
  .settings-status-block .upload-status{max-width:none; text-align:left;}
  .settings-status-block .autosave-note{text-align:left; margin-top:0;}

  /* modal Tự chọn danh sách kiểm (Mã hàng / Locator, chọn tay hoặc random) */
  .cc-custom-overlay{
    display:none; position:fixed; inset:0; background:rgba(10,12,16,0.6); backdrop-filter:blur(2px);
    z-index:10000; align-items:center; justify-content:center; padding:20px;
  }
  .cc-custom-overlay.show{display:flex;}
  .cc-custom-box{
    background:var(--panel); border:1px solid var(--line); border-radius:14px; width:min(480px,94vw);
    max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,0.4);
  }
  .cc-custom-body{padding:14px 20px; display:flex; flex-direction:column; gap:10px; overflow:hidden; flex:1; min-height:0;}
  .cc-custom-filter-input{
    font-family:var(--mono); font-size:12px; padding:8px 10px; border:1px solid var(--line); border-radius:7px;
    background:var(--bg); color:var(--text); width:100%; flex-shrink:0;
  }
  .cc-custom-random-row{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .cc-custom-random-row input[type=range]{flex:1; accent-color:var(--teal);}
  .cc-custom-btn-row{display:flex; gap:6px; flex-wrap:wrap; flex-shrink:0;}
  .cc-custom-list{
    flex:1; min-height:120px; overflow-y:auto; border:1px solid var(--line); border-radius:8px;
    background:var(--bg);
  }
  .cc-custom-item{
    display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line-soft);
    cursor:pointer; font-family:var(--mono); font-size:11.5px;
  }
  .cc-custom-item:last-child{border-bottom:none;}
  .cc-custom-item:hover{background:var(--panel-2, rgba(127,127,127,0.06));}
  .cc-custom-item input[type=checkbox]{accent-color:var(--teal); width:16px; height:16px; flex-shrink:0;}
  .cc-custom-item .cc-ci-main{color:var(--text); font-weight:700;}
  .cc-custom-item .cc-ci-sub{color:var(--muted-2); font-size:10px; margin-left:4px;}
  .cc-custom-empty{padding:20px; text-align:center; color:var(--muted-2); font-size:12px; font-style:italic;}
  .cc-custom-footer{
    display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 20px;
    border-top:1px solid var(--line); flex-shrink:0;
  }
  .cc-custom-footer span{font-family:var(--mono); font-size:11px; color:var(--muted);}

  .pallet-total-badge{
    display:inline-flex; align-items:baseline; gap:5px; margin-left:10px; padding:3px 11px;
    border-radius:999px; background:rgba(230,168,63,0.14); border:1px solid rgba(230,168,63,0.35);
    font-family:var(--mono); font-size:12px; font-weight:700; color:var(--amber); vertical-align:middle;
  }

  .kho-multi-wrap{
    padding:14px 22px 0; border-bottom:1px solid var(--line); padding-bottom:14px;
  }
  .kho-multi-label{
    font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.03em;
    display:flex; justify-content:space-between; align-items:center; margin-bottom:7px;
  }
  .kho-multi-label .badge-multi{
    font-family:var(--mono); font-size:9.5px; color:var(--bg); background:var(--violet);
    padding:2px 7px; border-radius:3px; font-weight:700; letter-spacing:.05em;
  }
  .btn-clear-multi{
    background:transparent; border:1px solid var(--line); color:var(--muted-2);
    font-family:var(--mono); font-size:10.5px; padding:2px 9px; border-radius:5px; cursor:pointer;
  }
  .btn-clear-multi:hover{color:var(--text); border-color:var(--muted-2);}
  #kho-multi-search{
    width:100%; resize:vertical; min-height:44px; max-height:110px;
    background:var(--bg); border:1px solid var(--line); border-radius:7px;
    padding:9px 12px; color:var(--text); font-family:var(--mono); font-size:12.5px; outline:none;
    box-sizing:border-box;
  }
  #kho-multi-search:focus{border-color:var(--violet);}
  #kho-multi-search.active{border-color:var(--violet); box-shadow:0 0 0 3px rgba(110,79,224,0.15);}

  .kho-modal-body{overflow-y:auto; padding:0 22px 22px; flex:1;}

  /* Panel thu gọn/mở rộng — dùng cho "Bảng tổng hợp" và "Dữ liệu gốc theo dòng" ở trang Tìm mã hàng */
  .cc-collapse-head{
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px;
    user-select:none;
  }
  .cc-collapse-head:hover .cc-collapse-chevron{color:var(--teal);}
  .cc-collapse-chevron{
    flex-shrink:0; width:26px; height:26px; border-radius:7px; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--muted); transition:transform 0.2s;
    background:var(--bg);
  }
  .cc-collapse-panel.open .cc-collapse-chevron{transform:rotate(180deg);}
  .cc-collapse-body{display:none;}
  .cc-collapse-panel.open .cc-collapse-body{display:block;}
  .cc-collapse-hint{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); white-space:nowrap;}
  .kho-detail-table{width:100%; border-collapse:collapse; font-size:12.5px;}
  .kho-detail-table thead th{
    position:sticky; top:0; background:var(--panel); text-align:left; font-family:var(--mono);
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2);
    font-weight:600; padding:8px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
  }
  .kho-detail-table thead th:hover{color:var(--text);}
  .kho-detail-table thead th .arrow{opacity:.5; margin-left:3px;}
  .kho-detail-table tbody td{padding:7px 8px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); color:var(--text);}
  .kho-detail-table tbody tr:hover{filter:brightness(0.97);}
  .kho-detail-table tbody tr.row-group-first td{border-top:2px solid rgba(22,32,46,0.14);}
  .kho-detail-table .loc-group-cell{border-left:4px solid transparent;}
  tr.kt-loc-header-row td{padding:8px 10px; width:100%;}
  .kt-loc-header-inner{display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; width:100%;}
  .kt-loc-header-name{font-family:var(--mono); font-size:13px; font-weight:800; color:var(--text);}
  .kt-confirm-locator-btn{
    border:1px solid var(--violet); background:var(--violet); color:#fff;
    border-radius:8px; padding:6px 14px; font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap;
    min-width:40px; text-align:center;
  }
  .kt-confirm-locator-btn:hover{background:#5a3fc0;}
  .kho-detail-table .num{text-align:right; font-weight:600; color:var(--amber);}
  .kho-detail-table .tx-total-col{background:rgba(230,168,63,0.10); border-left:2px solid var(--amber);}
  .kho-detail-table thead th.tx-total-col{background:rgba(230,168,63,0.18); color:var(--amber);}
  .kho-detail-table tbody td.tx-total-col{font-weight:800; font-size:14.5px; color:var(--amber);}
  .kho-detail-table tfoot td.tx-total-col{font-weight:900; font-size:15.5px; color:var(--amber); background:rgba(230,168,63,0.22);}
  /* Dòng đã tick (✓) ở bảng "Chuyển pallet (Transfer)" — tô màu nguyên dòng để dễ phân biệt đã kiểm
     tra xong, không đụng tới cột Total (vẫn giữ nổi bật riêng bằng màu amber). */
  .kho-detail-table tbody tr.tx-row-checked td{background:rgba(47,190,158,0.14);}
  .kho-detail-table tbody tr.tx-row-checked td.tx-total-col{background:rgba(47,190,158,0.20);}
  .kho-detail-table .col-kho{display:none;}
  .kho-detail-table.show-kho .col-kho{display:table-cell;}
  .kho-detail-table .col-plan{display:none; color:var(--violet);}
  .kho-detail-table.show-plan-row .col-plan-row{display:table-cell;}
  .kho-detail-table.show-plan-fc .col-plan-fc{display:table-cell;}
  .kho-detail-table.show-plan-hcp .col-plan-hcp{display:table-cell;}

  /* Cột Kho/Locator lặp lại thông tin đã có ở tiêu đề thẻ vị trí -> ẩn đi cho gọn, vẫn giữ trong DOM
     để các hàm đọc rowKey (Xác nhận / Mở khoá) hoạt động bình thường. */
  .kt-card-hide{display:none;}

  /* ================= THẺ VỊ TRÍ (chế độ Locator của "Đề xuất kiểm hôm nay") ================= */
  .cc-loc-cards{display:flex; flex-direction:column; gap:10px; margin-top:2px;}
  .cc-loc-card{border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel);}
  .cc-loc-card-head{padding:11px 14px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .cc-loc-card-head:hover{background:var(--panel-2, var(--bg));}
  .cc-loc-name{font-family:var(--mono); font-weight:700; font-size:13.5px; color:var(--violet); margin-right:10px;}
  .cc-loc-sub{font-family:var(--mono); font-size:11px; color:var(--muted-2);}
  .cc-loc-card .cc-collapse-body{padding:0 14px 12px;}
  .cc-loc-card .kt-mode-table{width:100%;}

  .cmp-head-summary{
    font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:5px;
    display:flex; flex-wrap:wrap; gap:4px 12px;
  }
  .cmp-head-summary b{font-weight:700; color:var(--text);}
  .cmp-head-summary .good{color:var(--teal, #2fa96b);}
  .cmp-head-summary .bad{color:var(--red, #d6394b);}

  /* ================= "Tổng quan sức chứa" (3 kho: 3B / 3A / 2B) ================= */
  .ov-wrap{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start;}
  .ov-wrap-head{grid-column:1 / -1; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:0; flex-wrap:wrap;}
  @media (max-width:1100px){ .ov-wrap{grid-template-columns:1fr;} }
  .ov-grid{display:flex; flex-direction:column; gap:20px; margin-top:14px;}
  .ov-col-title{font-family:var(--disp); font-weight:700; font-size:13px; color:var(--text); margin-bottom:2px;}
  .ov-col-sub{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); margin-bottom:10px;}

  .ov-ring-wrap{position:relative; width:150px; margin:0 auto;}
  .ov-ring-ng-badge{
    position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff;
    font-family:var(--mono); font-weight:700; font-size:11px; padding:3px 7px; border-radius:999px;
    box-shadow:0 2px 6px rgba(0,0,0,0.25); border:2px solid var(--panel);
  }
  .ov-ring-outer{width:150px; height:150px; border-radius:50%; margin:0 auto;
    background:conic-gradient(
      var(--red) 0% calc(var(--ng-pct,0)*1%),
      var(--ov-ring-color, var(--teal)) calc(var(--ng-pct,0)*1%) calc(var(--pct,0)*1%),
      var(--line-soft) calc(var(--pct,0)*1%) 100%
    );
    display:flex; align-items:center; justify-content:center;}
  .ov-ring-inner{width:76%; height:76%; border-radius:50%; background:var(--panel);
    display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px;
    box-shadow:inset 0 0 0 1px var(--line);}
  .ov-ring-value{font-family:var(--disp); font-size:22px; font-weight:800; color:var(--text);}
  .ov-ring-label{font-family:var(--mono); font-size:10px; color:var(--muted-2);}
  .ov-mini-kpis{display:flex; flex-direction:column; gap:6px; margin-top:12px;}
  .ov-mini-kpi{background:var(--panel-2); border:1px solid var(--line); border-radius:7px; padding:7px 10px;}
  .ov-mini-kpi .v{font-family:var(--disp); font-weight:800; font-size:14px; color:var(--text);}
  .ov-mini-kpi .l{font-family:var(--mono); font-size:9.5px; color:var(--muted-2);}

  .ov-dist-bar{display:flex; height:14px; border-radius:7px; overflow:hidden; border:1px solid var(--line); margin:6px 0 12px;}
  .ov-dist-bar span{height:100%; transition:width .3s;}
  .ov-dist-badges{display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 10px;}
  .ov-dist-badge{display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11.5px; color:var(--muted); cursor:pointer;}
  .ov-dist-badge i{width:9px; height:9px; border-radius:2px; flex:0 0 auto;}
  .ov-dist-badge b{font-family:var(--disp); font-size:14px; font-weight:800; color:var(--text); margin-right:2px;}

  .ov-cmp-wrap{display:flex; align-items:flex-end; justify-content:center; gap:32px; min-height:140px; padding-top:10px;}
  .ov-cmp-col{display:flex; flex-direction:column; align-items:center; gap:6px; width:64px;}
  .ov-cmp-bar-track{height:110px; width:100%; display:flex; align-items:flex-end; flex:0 0 auto;}
  .ov-cmp-bar{width:100%; border-radius:6px 6px 0 0; transition:height .3s; min-height:2px;}
  .ov-cmp-bar.used{background:var(--teal);}
  .ov-cmp-bar.free{background:var(--muted-2);}
  .ov-cmp-value{font-family:var(--disp); font-weight:800; font-size:14px; color:var(--text); white-space:nowrap;}
  .ov-cmp-label{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); text-align:center; white-space:nowrap;}
  .ov-formula-note{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); margin-top:14px; padding-top:10px; border-top:1px solid var(--line-soft); line-height:1.6;}

  .ov-config-tag{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; color:var(--violet); font-weight:700; margin-left:8px;}

  .ov-ng-section{margin-top:8px; padding-top:12px; border-top:1px solid var(--line-soft);}
  .ov-ng-head{cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; background:var(--red); border-radius:9px; padding:10px 12px;}
  .ov-ng-head .ov-col-title{margin-top:0 !important; color:#fff;}
  .ov-ng-summary{font-family:var(--mono); font-size:11.5px; color:rgba(255,255,255,0.85); margin-top:3px;}
  .ov-ng-summary b{color:#fff; font-weight:700;}
  .ov-ng-summary .warn{color:#fff; text-decoration:underline;}
  .ov-ng-head .cc-collapse-chevron{color:#fff;}
  .ov-ng-section .cc-collapse-body{padding-top:8px;}
  .ov-ng-list{display:flex; flex-direction:column; gap:6px; margin-top:8px;}
  .ov-ng-row{display:flex; align-items:center; flex-wrap:nowrap; gap:6px 8px; padding:6px 8px; background:rgba(214,57,75,0.06); border:1px solid rgba(214,57,75,0.18); border-radius:7px; font-family:var(--mono); font-size:11px; overflow:hidden; cursor:pointer;}
  .ov-ng-row:hover{background:rgba(214,57,75,0.13); border-color:rgba(214,57,75,0.32);}
  .ov-ng-item{color:var(--text); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:1 1 auto;}
  .ov-ng-po{color:var(--muted-2); font-weight:400;}
  .ov-ng-loc{color:var(--muted); flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:90px;}
  .ov-ng-qty{color:var(--red); font-weight:700; flex:0 0 auto; white-space:nowrap;}
  .ov-ng-pallet{color:var(--muted-2); font-weight:400; font-size:10px;}
  .ov-ng-plan-badge{flex:0 0 auto;}
  @media (max-width:480px){
    .ov-ng-row{font-size:10px; gap:5px 6px;}
    .ov-ng-loc{max-width:64px;}
  }
  .ov-ng-plan-badge{
    border:1px solid var(--amber-bright); background:rgba(245,166,35,0.12); color:var(--amber);
    border-radius:5px; padding:2px 7px; font-family:var(--mono); font-size:10.5px; font-weight:700;
    cursor:pointer; white-space:nowrap;
  }
  .ov-ng-plan-badge:hover{background:rgba(245,166,35,0.22);}

  /* ---- Modal tuỳ chỉnh locator ---- */
  .ov-config-modal{position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px;}
  .ov-config-backdrop{position:absolute; inset:0; background:rgba(10,14,22,0.55);}
  .ov-config-panel{
    position:relative; background:var(--panel); border-radius:14px; border:1px solid var(--line);
    width:min(720px, 100%); max-height:88vh; display:flex; flex-direction:column;
    box-shadow:0 24px 64px rgba(0,0,0,0.35);
  }
  .ov-config-header{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:18px 20px 12px;}
  .ov-config-header h2{font-family:var(--disp); font-size:17px; margin:0; color:var(--text);}
  .ov-config-close-btn{border:none; background:var(--panel-2); color:var(--muted); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; flex:0 0 auto;}
  .ov-config-close-btn:hover{background:var(--line-soft); color:var(--text);}
  .ov-config-tabs{display:flex; gap:6px; padding:0 20px; border-bottom:1px solid var(--line);}
  .ov-config-tab{border:none; background:none; padding:9px 14px; font-family:var(--mono); font-weight:700; font-size:12.5px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .ov-config-tab.active{color:var(--violet); border-bottom-color:var(--violet);}
  .ov-config-toolbar{display:flex; align-items:center; gap:10px; padding:12px 20px; flex-wrap:wrap;}
  .ov-config-toolbar input{flex:1; min-width:140px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-family:var(--mono); font-size:12px; color:var(--text); outline:none;}
  .ov-config-count{font-family:var(--mono); font-size:11px; color:var(--muted-2); white-space:nowrap;}
  .ov-config-mini-btn{font-family:var(--mono); font-size:11px; border:1px solid var(--line); background:var(--panel-2); color:var(--blue); border-radius:6px; padding:6px 9px; cursor:pointer; white-space:nowrap;}
  .ov-config-mini-btn:hover{background:var(--line-soft);}
  .ov-config-total-row{display:flex; align-items:center; gap:10px; padding:0 20px 12px; flex-wrap:wrap;}
  .ov-config-total-label{font-family:var(--mono); font-size:11.5px; color:var(--text); font-weight:700; white-space:nowrap;}
  .ov-config-total-row input{width:110px; background:var(--bg); border:1px solid var(--violet); border-radius:7px; padding:6px 9px; font-family:var(--mono); font-size:12.5px; color:var(--text); outline:none;}
  .ov-config-total-auto{font-family:var(--mono); font-size:11px; color:var(--muted-2); white-space:nowrap;}
  .ov-config-list-head{display:grid; grid-template-columns:26px 1fr 70px 90px; gap:8px; padding:0 20px 6px; font-family:var(--mono); font-size:10px; color:var(--muted-2); text-transform:uppercase;}
  .ov-config-list{flex:1; overflow-y:auto; padding:0 20px 8px; border-top:1px solid var(--line-soft);}
  .ov-config-row{display:grid; grid-template-columns:26px 1fr 70px 90px; gap:8px; align-items:center; padding:5px 0; border-bottom:1px solid var(--line-soft); font-family:var(--mono); font-size:12px;}
  .ov-config-row input[type="checkbox"]{width:15px; height:15px; cursor:pointer;}
  .ov-config-row .loc-name{color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ov-config-row .loc-qty{color:var(--muted-2); text-align:right;}
  .ov-config-row input.cap-input{width:100%; box-sizing:border-box; background:var(--bg); border:1px solid var(--line); border-radius:5px; padding:4px 6px; font-family:var(--mono); font-size:12px; color:var(--text); text-align:right;}
  .ov-config-row.extra .loc-name{color:var(--amber-bright);}
  .ov-config-footer{display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; border-top:1px solid var(--line);}

  /* ---- Ô "Kiểm thực tế" (phép tính nhập) — mặc định giữ nguyên 1 dòng như trước ---- */
  .kt-calc-cell{min-width:380px;}
  .kt-calc-row{display:flex; align-items:center; gap:2px; flex-wrap:nowrap; font-family:var(--mono); font-size:11px; color:var(--text);}
  .kt-calc-toggle{display:none;} /* chỉ hiện ở chế độ thẻ trên mobile */
  .kt-calc-inputs{display:contents;} /* desktop: các input/span chảy thẳng vào .kt-calc-row như cũ */

  /* ================= CHẾ ĐỘ THẺ (CARD) CHO MOBILE — chỉ áp dụng cho bảng Kiểm tồn kho ================= */
  @media (max-width:760px){
    .kt-mode-table thead{display:none;}
    .kt-mode-table, .kt-mode-table tbody{display:block; width:100%;}
    .kt-mode-table tbody tr{
      display:block; background:var(--panel); border:1px solid var(--line); border-radius:12px;
      padding:12px 14px 10px; margin-bottom:10px; box-shadow:0 1px 3px rgba(16,23,35,0.06);
    }
    .kt-mode-table tbody tr.row-group-first{margin-top:16px; border-color:rgba(0,0,0,0.14);}
    .kt-mode-table td{
      display:flex; justify-content:space-between; align-items:center; gap:12px;
      border-bottom:1px dashed var(--line-soft); padding:6px 0; width:100%;
    }
    .kt-mode-table td[data-label]::before{
      content:attr(data-label); font-family:var(--mono); font-size:9.5px; text-transform:uppercase;
      letter-spacing:.05em; color:var(--muted-2); flex-shrink:0;
    }
    .kt-mode-table td.col-kho{display:none;}
    .kt-mode-table.show-kho td.col-kho{display:flex;}
    .kt-mode-table td[data-label="Item No."]{font-weight:700; font-size:13.5px; color:var(--violet);}
    .kt-mode-table td.num{color:var(--amber); font-weight:700; font-size:14px;}
    .kt-mode-table td.loc-group-cell{border-left:4px solid var(--line); padding-left:8px;}

    /* Ô phép tính: gọn lại thành 1 dòng tóm tắt + nút "Nhập số liệu" để mở rộng */
    .kt-mode-table td.kt-calc-cell{display:block; border-bottom:none; padding:10px 0 0; min-width:0;}
    .kt-mode-table .kt-calc-row{flex-wrap:wrap; gap:8px 6px;}
    .kt-mode-table .kt-calc-toggle{
      display:inline-flex; align-items:center; gap:5px; margin-left:auto;
      background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:5px 11px;
      font-family:var(--mono); font-size:11px; font-weight:600; color:var(--violet); cursor:pointer;
    }
    .kt-mode-table .kt-calc-toggle-arrow{transition:transform .15s ease; display:inline-block;}
    .kt-mode-table .kt-calc-inputs{
      display:none; width:100%; flex-wrap:wrap; align-items:center; gap:6px 4px;
      margin-top:10px; padding-top:10px; border-top:1px dashed var(--line-soft);
    }
    .kt-mode-table .kt-calc-inputs .kt-input{width:44px !important; height:30px; font-size:13px !important;}
    .kt-mode-table .kt-confirm-btn{
      display:none; width:100%; margin:10px 0 0 !important; text-align:center;
      padding:9px !important; font-size:13px !important;
    }
    .kt-mode-table .kt-calc-cell.expanded .kt-calc-inputs{display:flex;}
    .kt-mode-table .kt-calc-cell.expanded .kt-confirm-btn{display:block;}
    .kt-mode-table .kt-calc-cell.expanded .kt-calc-toggle-arrow{transform:rotate(180deg);}
  }
  .oqc-badge{
    font-family:var(--mono); font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:4px;
    letter-spacing:.03em; display:inline-block;
  }
  .oqc-badge.pass{color:var(--teal); background:rgba(14,143,118,0.12);}
  .oqc-badge.ng{color:var(--red); background:rgba(214,57,75,0.12);}
  .oqc-badge.other{color:var(--muted); background:rgba(91,107,132,0.12);}
  .cc-reason-badge{
    font-family:var(--mono); font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:4px;
    letter-spacing:.02em; display:inline-block; margin:1px 3px 1px 0; white-space:nowrap;
  }
  .cc-reason-badge.aging{color:var(--amber); background:rgba(230,168,63,0.14);}
  .cc-reason-badge.fast{color:var(--blue); background:rgba(44,111,203,0.12);}
  .cc-reason-badge.mismatch{color:var(--red); background:rgba(214,57,75,0.12);}
  .cc-reason-badge.new{color:var(--muted-2); background:rgba(91,107,132,0.12);}
  .cc-reason-badge.abnormal{color:var(--violet); background:rgba(110,79,224,0.12);}
  .cc-score-bar-wrap{display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; width:100%;}
  .cc-score-bar{width:46px; height:6px; border-radius:4px; background:var(--line-soft); overflow:hidden; flex-shrink:0;}
  .cc-score-bar-fill{display:block; height:100%; border-radius:4px; background:var(--teal);}
  .cc-suggest-rank{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); text-align:center;}
  .cc-add-btn{
    font-family:var(--mono); font-size:10.5px; font-weight:700; color:var(--teal);
    background:rgba(14,143,118,0.1); border:1px solid rgba(14,143,118,0.35); border-radius:5px;
    padding:4px 9px; cursor:pointer; white-space:nowrap;
  }
  .cc-add-btn:hover{background:rgba(14,143,118,0.2);}
  .cc-clear-list-btn{color:var(--red); background:rgba(214,57,75,0.1); border-color:rgba(214,57,75,0.35);}
  .cc-clear-list-btn:hover{background:rgba(214,57,75,0.2);}
  .cc-kho-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;}
  @media (max-width:900px){ .cc-kho-grid{grid-template-columns:1fr;} }
  .cc-kho-card{
    background:var(--panel-2, var(--bg)); border:1px solid var(--line); border-radius:9px;
    padding:14px 16px; display:flex; flex-direction:column; gap:10px;
  }
  .cc-kho-card.cc-locked{ opacity:0.55; }
  .cc-kho-card.cc-locked .cc-mode-tabs, .cc-kho-card.cc-locked .cc-kho-slider-row{ pointer-events:none; }
  .cc-kho-card-head{display:flex; justify-content:space-between; align-items:baseline;}
  .cc-kho-name{font-family:var(--disp); font-size:14px; font-weight:700; color:var(--text);}
  .cc-kho-total{font-family:var(--mono); font-size:10.5px; color:var(--muted-2);}
  .cc-kho-slider-row{display:flex; flex-direction:column; gap:6px;}
  .cc-kho-slider{width:100%; accent-color:var(--teal); cursor:pointer;}
  .cc-kho-slider-label{font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right;}
  .cc-kho-result{border-top:1px dashed var(--line); padding-top:10px; margin-top:2px; display:flex; flex-direction:column; gap:8px;}
  .cc-kho-result-actions{display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;}
  .cc-kho-result-actions span{font-family:var(--mono); font-size:10.5px; color:var(--muted);}

  /* ================= Khối kết quả "Tạo danh sách" — full-width, tách riêng khỏi 3 thẻ điều khiển ================= */
  .cc-results-wrap{display:flex; flex-direction:column; gap:16px; margin-top:16px;}
  .cc-result-block{
    background:var(--panel-2, var(--bg)); border:1px solid var(--line); border-radius:9px; padding:14px 16px;
  }
  .cc-result-block-title{
    font-family:var(--disp); font-size:14px; font-weight:700; color:var(--text);
    margin-bottom:6px; padding-bottom:8px; border-bottom:1px solid var(--line);
  }
  .cc-result-block .cc-kho-result{border-top:none; padding-top:0; margin-top:0;}

  .cc-kho-mini-wrap{max-height:260px; overflow:auto; border:1px solid var(--line); border-radius:7px;}
  .cc-kho-mini-table{width:100%; border-collapse:collapse; font-size:11.5px;}
  .cc-kho-mini-table td{padding:6px 8px; border-bottom:1px solid var(--line-soft); font-family:var(--mono); color:var(--text); vertical-align:top;}
  .cc-kho-mini-table tr:last-child td{border-bottom:none;}
  .cc-kho-mini-table .cc-mi-item{font-weight:700; color:var(--violet);}
  .cc-kho-mini-table .cc-mi-loc{color:var(--muted);}
  .cc-kho-mini-table .cc-mi-score{text-align:right; font-weight:700; color:var(--teal); white-space:nowrap;}
  .cc-mode-tabs{display:flex; gap:4px; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:3px;}
  .cc-mode-tab{
    flex:1; text-align:center; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.02em;
    padding:5px 4px; border-radius:5px; border:none; background:transparent; color:var(--muted); cursor:pointer;
  }
  .cc-mode-tab.active{background:var(--teal); color:#fff;}
  .cc-kho-mini-table .cc-mi-sub{font-family:var(--mono); font-size:10px; color:var(--muted-2); margin-top:2px;}
  .kho-empty{padding:40px 0; text-align:center; color:var(--muted-2); font-size:13px; font-family:var(--mono);}
  .feature-subnav{display:flex; gap:8px; margin:14px 0 18px;}
  .feature-pill{
    font-family:var(--mono); font-size:12px; font-weight:700; padding:7px 14px; border-radius:999px;
    border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:default;
  }
  .feature-pill.active{background:#12161F; color:#fff; border-color:#12161F;}

  .chart-unavailable{
    padding:24px 12px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--muted);
    border:1px dashed var(--line); border-radius:8px; background:var(--panel-2);
  }

  /* biểu đồ thuần CSS/HTML, không cần Chart.js — luôn hiển thị được dù offline */
  .oqc-bar-outer{
    height:34px; border-radius:8px; overflow:hidden; display:flex; background:var(--line-soft);
    margin:10px 0 16px; box-shadow:inset 0 0 0 1px var(--line);
  }
  .oqc-bar-seg{display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11.5px; font-weight:700; color:#fff; transition:width .3s ease; white-space:nowrap; overflow:hidden;}
  .oqc-bar-seg.pass{background:var(--teal);}
  .oqc-bar-seg.ng{background:var(--red);}
  .oqc-legend-row{display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px;}
  .oqc-legend-row .item{display:flex; align-items:center; gap:7px;}
  .oqc-legend-row .sw2{width:10px; height:10px; border-radius:3px; display:inline-block;}
  .oqc-legend-row b{font-size:15px;}

  .simple-bar-list{display:flex; flex-direction:column; gap:9px;}
  .simple-bar-row{display:grid; grid-template-columns:88px 1fr 62px; align-items:center; gap:10px;}
  .simple-bar-label{font-family:var(--mono); font-size:11px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .simple-bar-track{height:14px; background:var(--line-soft); border-radius:4px; overflow:hidden;}
  .simple-bar-fill{height:100%; border-radius:4px; transition:width .3s ease;}
  .simple-bar-value{font-family:var(--mono); font-size:11px; text-align:right; color:var(--amber); font-weight:600;}

  .tx-chart-wrap{display:flex; align-items:flex-end; gap:28px; height:190px; padding:16px 24px 0; justify-content:center;}
  .tx-chart-bar-col{flex:0 1 140px; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
  .tx-chart-bar-value{font-family:var(--mono); font-weight:800; font-size:16px; margin-bottom:8px; white-space:nowrap;}
  .tx-chart-bar{width:64px; border-radius:9px 9px 3px 3px; transition:height .45s cubic-bezier(.4,0,.2,1); min-height:3px; box-shadow:0 4px 14px rgba(0,0,0,0.12);}
  .tx-chart-bar-label{margin-top:12px; font-family:var(--mono); font-size:12.5px; color:var(--text); text-align:center; font-weight:700;}
  .tx-chart-bar-sub{font-family:var(--mono); font-size:10.5px; color:var(--muted-2); margin-top:2px; font-weight:400;}

  /* Picking status bar */
  .picking-bar-wrap{display:flex; align-items:center; gap:8px; min-width:80px;}
  .picking-bar-track{flex:1; height:10px; background:var(--line-soft); border-radius:5px; overflow:hidden; min-width:40px;}
  .picking-bar-fill{height:100%; background:var(--teal); border-radius:5px; transition:width .3s ease;}
  .picking-bar-label{font-family:var(--mono); font-size:10px; color:var(--text); font-weight:700; min-width:36px; text-align:right;}

  #loading-overlay{
    position:fixed; inset:0; background:rgba(10,18,29,0.72); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:50; flex-direction:column; gap:12px;
  }
  #loading-overlay.show{display:flex;}
  .spinner{
    width:34px; height:34px; border-radius:50%;
    border:3px solid rgba(255,255,255,0.25); border-top-color:var(--amber-bright);
    animation:spin .8s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}
  #loading-overlay .msg{font-family:var(--mono); font-size:12.5px; color:#F3F5F9;}

  @media (max-width:1100px){
    .kpis{grid-template-columns:repeat(2,1fr);}
    .grid{grid-template-columns:1fr;}
    .row2, .row3{grid-column:span 1;}
    header{flex-direction:column; align-items:flex-start;}
    .header-right{width:100%; justify-content:space-between;}
  }
  @media (max-width:760px){
    .sidebar{
      padding:10px 12px; border-radius:14px; gap:8px;
    }
    .sidebar-logo{margin-right:8px;}
    .sidebar-nav{gap:6px;}
    .sidebar-nav-btn{width:42px; height:42px; border-radius:12px;}
    .sidebar-nav-btn svg{width:19px; height:19px;}
  }