/* VTransOps — main styles */

  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --nav-w:220px;
    --hdr-h:56px;
    --bg0:#0d1117;
    --bg1:#161b22;
    --bg2:#21262d;
    --bg3:#2d333b;
    --border:#30363d;
    --text1:#e6edf3;
    --text2:#8b949e;
    --text3:#58626b;
    --blue:#58a6ff;
    --blue-dim:#1f3a5f;
    --green:#3fb950;
    --green-dim:#1a3a1f;
    --amber:#d29922;
    --amber-dim:#3a2e0a;
    --red:#f85149;
    --red-dim:#3a1414;
    --teal:#79c0ff;
    --accent:#1f6feb;
    --glass:rgba(31,55,90,.6);
    --glass-border:rgba(88,166,255,.35);
    /* ── CHUYỂN ĐỘNG MƯỢT (mặc định toàn hệ thống) ──
       Mọi nút/popup/trang dùng chung easing + thời lượng này. Bản cập nhật sau
       chỉ cần tạo phần tử thường, sẽ TỰ thừa hưởng độ mượt — không cần làm thêm. */
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);   /* easing mềm, sang trọng */
    --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
    --dur:   .35s;    /* thời lượng chuẩn (mượt chậm, cao cấp) */
    --dur-sm: .22s;   /* cho tương tác nhỏ (hover nút) */
  }

  /* ═══ LỚP MƯỢT TOÀN CỤC — áp cho mọi phần tử tương tác ═══ */
  /* Nút, link, ô nhập, thẻ bấm được: chuyển màu/viền/bóng/biến hình đều mượt. */
  button, a, input, select, textarea,
  .nav-item, .tab, .kpi-pill, .hdr-btn, .map-expand-btn,
  .edit-addr-btn, [role="button"] {
    transition: background-color var(--dur-sm) var(--ease-soft),
                border-color var(--dur-sm) var(--ease-soft),
                color var(--dur-sm) var(--ease-soft),
                box-shadow var(--dur-sm) var(--ease-soft),
                transform var(--dur-sm) var(--ease-smooth),
                opacity var(--dur-sm) var(--ease-soft);
  }
  /* Nhấn xuống: thụt nhẹ (cảm giác bấm thật). CHỈ áp cho NÚT/THẺ bấm thật —
     KHÔNG dùng [onclick] vì các overlay/panel/nền lớn cũng có onclick, khiến
     bấm chuột vào trong làm CẢ cửa sổ co lại (nháy màn hình + đẩy nút ✕ lệch
     khỏi con trỏ nên không đóng được). */
  button:active, .nav-item:active, .tab:active, .kpi-pill:active,
  .hdr-btn:active, .map-expand-btn:active, [role="button"]:active,
  .cfg-btn:active, .btn-xs:active, .panel-btn:active {
    transform: scale(0.97);
  }
  /* Overlay/panel/nền có onclick: TUYỆT ĐỐI không nhún khi bấm. */
  .panel-overlay:active, .panel-float:active, .form-overlay:active,
  .intake-overlay:active, .orders-overlay:active, .mgmt-overlay:active,
  .panel-body:active, .panel-content:active, .panel-nav:active {
    transform: none !important;
  }
  button:disabled { transform: none !important; }

  /* Popup/overlay/modal: hiện ra mượt (fade + scale nhẹ) thay vì bật cụp. */
  @keyframes overlayIn { from{opacity:0} to{opacity:1} }
  @keyframes modalIn   { from{opacity:0; transform:translateY(12px) scale(.98)}
                         to{opacity:1; transform:translateY(0) scale(1)} }
  .overlay, .form-overlay, .modal-overlay,
  [class*="overlay"] {
    animation: overlayIn var(--dur) var(--ease-soft);
  }
  .modal, .form-modal, .modal-box,
  [class*="overlay"] > div:first-child {
    animation: modalIn var(--dur) var(--ease-smooth);
  }

  /* Đổi tab/cảnh nội dung: nội dung mới trôi lên nhẹ. */
  @keyframes contentIn { from{opacity:0; transform:translateY(8px)}
                         to{opacity:1; transform:translateY(0)} }
  .content { animation: contentIn var(--dur) var(--ease-smooth); }

  /* Tôn trọng người dùng tắt hiệu ứng (thiết bị yếu / nhạy cảm chuyển động). */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
  body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg0);color:var(--text1);font-size:13px;height:100vh;overflow:hidden;display:flex;flex-direction:column}

  /* HEADER */
  .hdr{height:var(--hdr-h);background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0;z-index:100}
  .logo{display:flex;align-items:center;gap:10px;width:var(--nav-w);flex-shrink:0}
  .logo-mark{width:28px;height:28px;background:none;border-radius:6px;object-fit:cover;display:block;box-shadow:0 2px 8px rgba(255,150,40,.3)}
  .logo-text{font-size:12px;font-weight:700;background:linear-gradient(135deg,#ffd24a,#ff8a00);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.2}
  .logo-sub{font-size:10px;color:var(--text2);font-weight:400}
  .hdr-kpis{display:flex;gap:6px;flex:1}
  .kpi-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:6px;background:var(--bg2);border:1px solid var(--border);cursor:pointer;transition:border-color .15s}
  .kpi-pill:hover{border-color:var(--blue)}
  .kpi-n{font-size:18px;font-weight:600;line-height:1}
  .kpi-l{font-size:10px;color:var(--text2);line-height:1.3;margin-top:1px}
  .kpi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  .hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto}
  .hdr-btn{padding:5px 10px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s}
  .hdr-btn:hover{background:var(--bg2);color:var(--text1)}
  .hdr-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .hdr-btn.primary:hover{background:#1a5ecb}
  .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff}

  /* BODY */
  .body{display:flex;flex:1;overflow:hidden}

  /* SIDEBAR */
  .sidebar{width:var(--nav-w);background:var(--bg1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
  .nav-section{padding:16px 10px 8px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.8px}
  .nav-item{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:6px;margin:1px 6px;cursor:pointer;color:var(--text2);transition:all .15s;font-size:12px}
  .nav-item:hover{background:var(--bg2);color:var(--text1)}
  .nav-item.active{background:var(--blue-dim);color:var(--blue)}
  .nav-icon{width:16px;text-align:center;flex-shrink:0}
  .nav-badge{margin-left:auto;padding:1px 6px;border-radius:10px;font-size:10px;font-weight:600}
  .badge-blue{background:var(--blue-dim);color:var(--blue)}
  .badge-amber{background:var(--amber-dim);color:var(--amber)}
  .badge-red{background:var(--red-dim);color:var(--red)}
  .badge-green{background:var(--green-dim);color:var(--green)}
  .nav-divider{height:1px;background:var(--border);margin:8px 12px}

  /* MAIN */
  .main{flex:1;display:flex;flex-direction:column;overflow:hidden}
  .toolbar{height:42px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0}
  .tab{padding:5px 12px;border-radius:5px;font-size:12px;cursor:pointer;color:var(--text2);border:1px solid transparent;transition:all .15s}
  .tab:hover{color:var(--text1)}
  .tab.active{background:var(--bg3);color:var(--text1);border-color:var(--border)}
  .sep{width:1px;height:20px;background:var(--border);margin:0 4px}
  .toolbar-right{margin-left:auto;display:flex;gap:6px;align-items:center}
  .search{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:4px 10px;color:var(--text1);font-size:11px;width:180px;outline:none}
  .search:focus{border-color:var(--blue)}

  /* CONTENT GRID */
  .content{flex:1;display:grid;grid-template-columns:1fr 340px;overflow:hidden}
  .panel{overflow-y:auto;padding:16px}
  .panel-right{background:var(--bg1);border-left:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}

  /* MAP */
  .map-wrap{background:var(--bg2);border-radius:8px;border:1px solid var(--border);overflow:hidden;height:200px;position:relative;margin-bottom:14px;transition:height .3s ease}
  .map-wrap.expanded{position:fixed;inset:0;z-index:7000;height:100vh!important;border-radius:0;margin:0}
  .map-svg{width:100%;height:100%}
  .map-overlay-tl{position:absolute;top:10px;left:10px;display:flex;gap:6px}
  .map-overlay-tr{position:absolute;top:10px;right:10px;display:flex;gap:6px}
  .map-chip{background:rgba(13,17,23,.85);border:1px solid var(--border);border-radius:5px;padding:4px 9px;font-size:10px;color:var(--text1);cursor:pointer}
  .map-chip:hover{border-color:var(--blue)}
  .map-chip.active{border-color:var(--blue);color:var(--blue)}
  .map-expand-btn{background:rgba(13,17,23,.9);border:1px solid var(--border);border-radius:5px;padding:5px 9px;font-size:11px;color:var(--text1);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;white-space:nowrap}
  .map-expand-btn:hover{border-color:var(--blue);color:var(--blue)}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  .sim-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);animation:fadeIn .3s ease both}
  .sim-vehicle-tag{background:var(--blue-dim);border:1px solid var(--blue);border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--blue);font-family:monospace;white-space:nowrap;flex-shrink:0}
  .sim-stop{display:flex;align-items:center;gap:5px;padding:3px 0}
  .sim-stop-num{width:18px;height:18px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);font-size:9px;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .sim-metric{display:flex;gap:4px;align-items:center;padding:3px 8px;border-radius:4px;background:var(--bg3);font-size:10px;color:var(--text2)}
  .tbl td .edit-addr-btn{display:none;padding:2px 7px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--blue);font-size:10px;cursor:pointer;margin-left:6px;transition:all .15s;vertical-align:middle}
  .tbl tbody tr:hover .edit-addr-btn{display:inline-block}
  .edit-addr-btn:hover{background:var(--blue-dim);border-color:var(--blue)}

  /* ─── ROUTE TEXT ─── */
  .route-text-card{background:var(--bg1);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:0}
  .route-text-header{padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
  .route-text-body{padding:12px 14px}
  .step-row{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid #21262d;align-items:flex-start}
  .step-row:last-child{border-bottom:none}
  .step-icon{width:26px;height:26px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;flex-shrink:0;font-weight:700;color:var(--text2)}
  .step-icon.origin{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}
  .step-icon.dest{background:var(--green-dim);border-color:var(--green);color:var(--green)}
  .step-turn{font-size:11px;color:var(--text1);line-height:1.5}
  .step-dist{font-size:10px;color:var(--text3);margin-top:2px}
  .route-detail-card{background:var(--bg1);border:1px solid var(--border);border-radius:8px;overflow:hidden}
  .route-detail-hdr{padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
  .vc-mini{background:var(--bg1);border:1px solid var(--border);border-radius:7px;padding:10px 12px;cursor:pointer;transition:all .18s;overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.18),0 0 0 1px rgba(255,255,255,.4) inset}
  .vc-mini:hover{border-color:var(--blue);background:var(--bg2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.25)}
  .vc-mini.selected{border-color:var(--blue);background:var(--blue-dim);box-shadow:0 0 0 1px var(--blue)}
  .vc-mini.status-prog{border-left:3px solid var(--amber)}
  .vc-mini.status-wait{border-left:3px solid var(--green)}
  .vc-mini.status-fail{border-left:3px solid var(--red);opacity:.7}
  .vc-mini.status-off{border-left:3px solid var(--text3)}
  .al-tab{border-radius:6px 6px 0 0;border-bottom:2px solid transparent;opacity:.6}
  .al-tab.active{opacity:1;border-bottom-color:var(--blue);color:var(--blue)}
  .vc-mini-id{font-weight:700;color:var(--blue);font-family:monospace;font-size:11px}
  .vc-mini-name{font-size:10px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vc-mini-badge{margin-top:5px;display:flex;align-items:center;gap:5px}
  .vc-mini-pulse{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .vc-mini-pulse.prog{background:var(--amber);animation:pulse 1.5s infinite}
  .vc-mini-pulse.wait{background:var(--green)}
  .vc-mini-pulse.fail{background:var(--red)}

  /* ─── ORDER TRACKING ─── */
  .track-card{background:var(--bg1);border:1px solid var(--border);border-radius:8px;overflow:hidden}
  .track-header{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
  .track-body{padding:12px 14px;display:flex;gap:16px;flex-wrap:wrap}
  .track-meta{font-size:11px;color:var(--text2);display:flex;flex-direction:column;gap:3px}
  .track-meta strong{color:var(--text1)}
  .eta-badge{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700}

  /* ─── CREW CARDS ─── */
  .crew-card{background:var(--bg1);border:1px solid var(--border);border-radius:8px;overflow:visible;min-height:auto}
  .crew-header{padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .crew-body{padding:10px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .crew-member{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px;text-align:center;position:relative}
  .crew-member.empty{border-style:dashed;cursor:pointer;transition:all .15s}
  .crew-member.empty:hover{border-color:var(--blue);background:var(--blue-dim)}
  .crew-role{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
  .crew-name{font-size:12px;font-weight:600;color:var(--text1)}
  .crew-phone{font-size:10px;color:var(--teal);font-family:monospace;margin-top:2px}
  .crew-edit-btn{position:absolute;top:4px;right:4px;background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:11px;padding:2px;opacity:0;transition:opacity .15s}
  .crew-member:hover .crew-edit-btn{opacity:1}

  /* ─── MANUAL DISPATCH ─── */
  .mv-card{border:1px solid var(--border);border-radius:6px;padding:10px;cursor:pointer;transition:all .15s;margin-bottom:8px;background:var(--bg2)}
  .mv-card:hover{border-color:var(--blue)}
  .mv-card.selected{border-color:var(--blue);background:var(--blue-dim)}
  .mv-card.disabled{opacity:.4;cursor:not-allowed}
  .mo-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:5px;cursor:pointer;border:1px solid transparent;transition:all .15s;margin-bottom:5px}
  .mo-item:hover{background:var(--bg3);border-color:var(--border)}
  .mo-item.selected{background:var(--green-dim);border-color:var(--green)}
  .mo-item.assigned{opacity:.5;cursor:not-allowed;text-decoration:line-through}
  /* Ô vuông rỗng khi chưa chọn; chọn rồi thành HUY HIỆU TRÒN mang SỐ ĐIỂM DỪNG
     (1,2,3…) — số này là thứ tự giao thật sẽ đẩy lên app, không phải dấu tick. */
  .mo-checkbox{width:20px;height:20px;border-radius:4px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;font-size:11px;line-height:1}
  .mo-item.selected .mo-checkbox{background:var(--green);border-color:var(--green);color:#fff;border-radius:50%;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
  /* Hai dòng chặng của cùng một đơn nằm sát nhau, thụt vào dưới dòng tải/thể tích. */
  .mo-leg{margin-bottom:2px;padding:5px 8px}
  /* Chặng GIAO còn KHOÁ vì chưa xếp chặng LẤY — mờ đi nhưng KHÔNG gạch ngang.
     Gạch ngang (.assigned) mang nghĩa "đơn xe khác đang giữ", đọc nhầm là mất công. */
  .mo-leg.locked{opacity:.45;cursor:not-allowed}
  /* Chip CA LÀM VIỆC trên thẻ xe (cả giỏ lớn lẫn giỏ mini). Mờ khi chưa cài,
     sáng xanh khi đã có trần — nhìn lướt là biết xe nào đang bị giới hạn. */
  .ca-chip{display:inline-flex;align-items:center;gap:2px;font-size:9px;line-height:1;padding:2px 6px;
    border-radius:9px;border:1px solid var(--border);color:var(--text3);background:transparent;
    cursor:pointer;white-space:nowrap;transition:all .15s}
  .ca-chip:hover{border-color:var(--blue);color:var(--blue)}
  .ca-chip.on{border-color:var(--blue);color:var(--blue);background:var(--blue-dim,rgba(88,166,255,.12));font-weight:700}

  /* SECTION */
  .section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .section-title{font-size:12px;font-weight:600;color:var(--text1)}
  .section-actions{display:flex;gap:6px;flex-wrap:wrap}
  .btn-xs{padding:3px 8px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;transition:all .15s}
  .btn-xs:hover{background:var(--bg3);color:var(--text1)}
  .btn-xs.active{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}

  /* TABLE */
  .tbl{width:100%;border-collapse:collapse}
  .tbl thead th{text-align:left;padding:7px 10px;font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
  .tbl tbody tr{transition:background .1s;cursor:pointer}
  .tbl tbody tr:hover td{background:var(--bg3)}
  .tbl tbody tr.selected td{background:var(--blue-dim)}
  .tbl td{padding:8px 10px;border-bottom:1px solid var(--border);font-size:12px;vertical-align:middle}
  .order-id{font-weight:600;color:var(--blue);font-family:monospace;font-size:11px}
  .addr{color:var(--text2);font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .meta{color:var(--text3);font-size:10px}
  .status-badge{padding:2px 8px;border-radius:10px;font-size:10px;font-weight:600;white-space:nowrap}
  .s-wait{background:var(--blue-dim);color:var(--blue)}
  .s-prog{background:var(--amber-dim);color:var(--amber)}
  .s-fail{background:var(--red-dim);color:var(--red)}
  .s-done{background:var(--green-dim);color:var(--green)}

  /* RIGHT PANEL */
  .rp-section{padding:14px 14px 0}
  .rp-title{font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}

  /* DISPATCH */
  .dispatch-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}
  .dm-card{border:1px solid var(--border);border-radius:7px;padding:10px;cursor:pointer;transition:all .15s;background:var(--bg2)}
  .dm-card:hover{border-color:var(--blue);background:var(--bg3)}
  .dm-card.active{border-color:var(--blue);background:var(--blue-dim)}
  .dm-icon{font-size:20px;margin-bottom:5px}
  .dm-title{font-size:15px;font-weight:700;color:var(--text1);margin-bottom:2px}
  .dm-desc{font-size:10px;color:var(--text2);line-height:1.35}

  /* VEHICLES right-panel compact list */
  .vehicle-card{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:5px;border:1px solid var(--border);margin-bottom:5px;cursor:pointer;transition:all .15s;background:var(--bg2)}
  .vehicle-card:hover{border-color:var(--blue);background:var(--bg3)}
  .vehicle-card.selected{border-color:var(--blue);background:var(--blue-dim)}
  .vc-icon{width:26px;height:26px;border-radius:5px;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
  .vc-id{font-weight:600;font-size:10px;font-family:monospace;color:var(--blue)}
  .vc-name{font-size:10px;color:var(--text1);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
  .vc-cap{font-size:9px;color:var(--text3);margin-top:1px}
  .vc-status{margin-left:auto;text-align:right;flex-shrink:0}
  .vehicle-list-wrap{max-height:420px;overflow-y:auto;padding-right:2px}
  .vehicle-list-wrap::-webkit-scrollbar{width:3px}
  .vehicle-list-wrap::-webkit-scrollbar-track{background:transparent}
  .vehicle-list-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

  /* ROUTE RESULT */
  .route-card{margin:14px 14px 0;background:var(--bg2);border:1px solid var(--border);border-radius:7px;overflow:hidden}
  .route-header{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
  .route-vehicle{font-size:11px;font-weight:600;color:var(--blue)}
  .route-meta{font-size:10px;color:var(--text2)}
  .route-stops{padding:8px 12px 12px}
  .stop-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;position:relative}
  .stop-row:not(:last-child)::after{content:'';position:absolute;left:10px;top:22px;bottom:0;width:1px;background:var(--border)}
  .stop-num{width:20px;height:20px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:600;color:var(--text2);flex-shrink:0;z-index:1}
  .stop-num.origin{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}
  .stop-id{font-weight:600;color:var(--blue);font-family:monospace;font-size:10px}
  .stop-addr{color:var(--text2);font-size:10px}

  ::-webkit-scrollbar{width:4px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

  /* LEAFLET DARK THEME */
  .leaflet-container{background:#1a1f2e!important;font-family:'Segoe UI',system-ui,sans-serif}
  .leaflet-popup-content-wrapper{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
  .leaflet-popup-content{margin:0!important}
  .leaflet-popup-tip-container{display:none}
  .leaflet-control-zoom a{background:var(--bg2)!important;color:var(--text1)!important;border-color:var(--border)!important}
  .leaflet-control-zoom a:hover{background:var(--bg3)!important}
  .leaflet-tooltip{background:var(--bg2);border:1px solid var(--border);color:var(--text1);font-size:11px;border-radius:5px;padding:4px 8px}
  .leaflet-tooltip::before{border-top-color:var(--border)!important}
  .leaflet-attribution-flag{display:none!important}
  .leaflet-control-attribution{background:rgba(13,17,23,.45)!important;color:var(--text3)!important;font-size:8px!important;padding:0 4px!important;line-height:13px!important;opacity:.6;border-radius:3px 0 0 0!important}
  .leaflet-control-attribution:hover{opacity:1}
  .leaflet-control-attribution a{color:var(--text2)!important}

  /* AI ASSISTANT */
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
  .ai-fab{position:fixed;bottom:22px;right:22px;width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#1f6feb,#6e40c9);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 20px rgba(31,111,235,.45);z-index:9999;transition:transform .2s,box-shadow .2s}
  .ai-fab:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(31,111,235,.65)}
  .ai-fab .ai-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2px solid var(--bg0);animation:pulse 2s infinite}
  .ai-panel{position:fixed;bottom:84px;right:22px;width:370px;height:530px;background:var(--bg1);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.65);z-index:9998;display:flex;flex-direction:column;overflow:hidden;transform:scale(.9) translateY(20px);opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.4,0,.2,1)}
  .ai-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
  .ai-header{padding:12px 14px;background:linear-gradient(135deg,#1f6feb22,#6e40c922);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}
  .ai-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1f6feb,#6e40c9);display:flex;align-items:center;justify-content:center;font-size:16px}
  .ai-title{font-size:13px;font-weight:600;color:var(--text1)}
  .ai-subtitle{font-size:10px;color:var(--green);margin-top:1px}
  .ai-close{margin-left:auto;background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:2px 6px;border-radius:4px}
  .ai-close:hover{color:var(--text1);background:var(--bg3)}
  .ai-messages{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
  .ai-msg{max-width:92%;display:flex;flex-direction:column;gap:3px}
  .ai-msg.user{align-self:flex-end;align-items:flex-end}
  .ai-msg.bot{align-self:flex-start;align-items:flex-start}
  .ai-bubble{padding:9px 12px;border-radius:10px;font-size:12px;line-height:1.55;white-space:pre-wrap}
  .ai-msg.user .ai-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:3px}
  .ai-msg.bot .ai-bubble{background:var(--bg2);color:var(--text1);border:1px solid var(--border);border-bottom-left-radius:3px}
  .ai-time{font-size:9px;color:var(--text3)}
  .ai-typing{display:flex;gap:4px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;border-bottom-left-radius:3px;width:fit-content}
  .ai-typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:typing .9s infinite}
  .ai-typing span:nth-child(2){animation-delay:.2s}
  .ai-typing span:nth-child(3){animation-delay:.4s}
  @keyframes typing{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
  .ai-quick{padding:8px 12px;display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--border);flex-shrink:0}
  .ai-chip{padding:4px 10px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:10px;cursor:pointer;transition:all .15s;white-space:nowrap}
  .ai-chip:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-dim)}
  .ai-input-row{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:7px;flex-shrink:0}
  .ai-input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;color:var(--text1);font-size:12px;outline:none;resize:none;height:36px;font-family:inherit}
  .ai-input:focus{border-color:var(--blue)}
  .ai-send{width:36px;height:36px;border-radius:8px;background:var(--accent);border:none;color:#fff;cursor:pointer;font-size:15px;flex-shrink:0;transition:background .15s;display:flex;align-items:center;justify-content:center}
  .ai-send:hover{background:#1a5ecb}
  .ai-send:disabled{background:var(--bg3);cursor:not-allowed}

  /* ═══ MANAGEMENT PANEL (DRAWER) ═══ */
  .mgmt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:8000;opacity:0;pointer-events:none;transition:opacity .25s}
  .mgmt-overlay.open{opacity:1;pointer-events:all}
  .mgmt-drawer{position:fixed;top:0;right:0;bottom:0;width:820px;max-width:95vw;background:var(--bg0);border-left:1px solid var(--border);z-index:8001;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1)}
  .mgmt-drawer.open{transform:translateX(0)}
  .mgmt-header{height:56px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
  .mgmt-title{font-size:15px;font-weight:700;color:var(--text1)}
  .mgmt-subtitle{font-size:11px;color:var(--text2)}
  .mgmt-header-right{margin-left:auto;display:flex;gap:8px;align-items:center}
  .mgmt-close{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--text2);cursor:pointer;padding:5px 10px;font-size:12px;transition:all .15s}
  .mgmt-close:hover{background:var(--bg2);color:var(--text1)}
  .mgmt-toolbar{padding:12px 20px;background:var(--bg1);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
  .mgmt-search{flex:1;max-width:260px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:6px 12px;color:var(--text1);font-size:12px;outline:none}
  .mgmt-search:focus{border-color:var(--blue)}
  .btn-add{padding:6px 14px;border-radius:6px;background:var(--accent);border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .15s}
  .btn-add:hover{background:#1a5ecb}
  .mgmt-body{flex:1;overflow-y:auto;padding:20px}
  .mgmt-table{width:100%;border-collapse:collapse;background:var(--bg1);border-radius:8px;overflow:hidden;border:1px solid var(--border)}
  .mgmt-table thead th{padding:10px 14px;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;background:var(--bg2);border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}
  .mgmt-table tbody tr{transition:background .1s;border-bottom:1px solid var(--border)}
  .mgmt-table tbody tr:last-child{border-bottom:none}
  .mgmt-table tbody tr:hover td{background:var(--bg2)}
  .mgmt-table td{padding:10px 14px;font-size:12px;vertical-align:middle}
  .mgmt-actions{display:flex;gap:6px;white-space:nowrap}
  .btn-edit{padding:3px 10px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--blue);font-size:11px;cursor:pointer;transition:all .15s}
  .btn-edit:hover{background:var(--blue-dim);border-color:var(--blue)}
  .btn-del{padding:3px 10px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--red);font-size:11px;cursor:pointer;transition:all .15s}
  .btn-del:hover{background:var(--red-dim);border-color:var(--red)}
  .empty-state{text-align:center;padding:60px 20px;color:var(--text3)}
  .empty-state div:first-child{font-size:36px;margin-bottom:10px}
  .empty-state div:last-child{font-size:12px}

  /* ═══ FORM MODAL ═══ */
  .form-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
  .form-overlay.open{opacity:1;pointer-events:all}
  .form-modal{background:var(--bg1);border:1px solid var(--border);border-radius:12px;width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.7);transform:scale(.95) translateY(-10px);transition:transform .2s}
  .form-overlay.open .form-modal{transform:scale(1) translateY(0)}
  .form-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .form-title{font-size:14px;font-weight:700;color:var(--text1)}
  .form-close{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:18px;padding:2px 6px;border-radius:4px;line-height:1}
  .form-close:hover{color:var(--text1);background:var(--bg3)}
  .form-body{padding:20px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-grid.full{grid-template-columns:1fr}
  .field{display:flex;flex-direction:column;gap:5px}
  .field label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
  .field input,.field select,.field textarea{background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 12px;color:var(--text1);font-size:12px;outline:none;font-family:inherit;transition:border-color .15s;width:100%}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue)}
  .field select option{background:var(--bg2)}
  .field textarea{resize:vertical;min-height:70px}
  .form-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
  .btn-cancel{padding:7px 16px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:12px;cursor:pointer;transition:all .15s}
  .btn-cancel:hover{background:var(--bg2);color:var(--text1)}
  .btn-save{padding:7px 20px;border-radius:6px;background:var(--accent);border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
  .btn-save:hover{background:#1a5ecb}

  /* ═══ CONFIRM DIALOG ═══ */
  .confirm-box{background:var(--bg1);border:1px solid var(--border);border-radius:10px;width:340px;padding:20px;box-shadow:0 12px 40px rgba(0,0,0,.6);transform:scale(.95);transition:transform .2s}
  .form-overlay.open .confirm-box{transform:scale(1)}
  .confirm-icon{font-size:32px;margin-bottom:10px}
  .confirm-title{font-size:14px;font-weight:700;color:var(--text1);margin-bottom:6px}
  .confirm-msg{font-size:12px;color:var(--text2);line-height:1.5;margin-bottom:16px}
  .confirm-footer{display:flex;gap:8px;justify-content:flex-end}
  .btn-confirm-del{padding:7px 16px;border-radius:6px;background:var(--red);border:none;color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
  .btn-confirm-del:hover{background:#d03030}
  
  /* Toast */
  .toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 18px;font-size:12px;color:var(--text1);z-index:2147483647;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.4)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* ═══ NẠP ĐƠN SYSTEM ═══ */
  .intake-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
  .intake-card{background:var(--bg1);border:1px solid var(--border);border-radius:10px;padding:20px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
  .intake-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;transition:opacity .2s}
  .intake-card.excel::before{background:linear-gradient(90deg,#3fb950,#2ea043)}
  .intake-card.email::before{background:linear-gradient(90deg,#58a6ff,#1f6feb)}
  .intake-card.ocr::before{background:linear-gradient(90deg,#d29922,#b08800)}
  .intake-card.manual::before{background:linear-gradient(90deg,#bc8cff,#8957e5)}
  .intake-card:hover{border-color:var(--blue);background:var(--bg2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
  .intake-card-icon{font-size:32px;margin-bottom:10px}
  .intake-card-title{font-size:13px;font-weight:700;color:var(--text1);margin-bottom:4px}
  .intake-card-desc{font-size:11px;color:var(--text2);line-height:1.5}

  /* Draft review list */
  .draft-list{display:flex;flex-direction:column;gap:8px;max-height:500px;overflow-y:auto;padding-right:4px}
  .draft-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;transition:border-color .15s}
  .draft-item:hover{border-color:var(--blue)}
  .draft-item-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .draft-source-tag{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
  .src-excel{background:var(--green-dim);color:var(--green)}
  .src-email{background:var(--blue-dim);color:var(--blue)}
  .src-ocr{background:var(--amber-dim);color:var(--amber)}
  .src-manual{background:#2d1f47;color:#bc8cff}
  .draft-id{font-family:monospace;font-weight:700;color:var(--blue);font-size:11px}
  .draft-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:11px}
  .draft-field{display:flex;flex-direction:column;gap:2px}
  .draft-field-label{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;font-weight:600}
  .draft-field-val{color:var(--text1)}
  .draft-actions{display:flex;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--border)}
  .btn-approve{padding:4px 12px;border-radius:5px;background:var(--green-dim);border:1px solid var(--green);color:var(--green);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
  .btn-approve:hover{background:var(--green);color:#fff}
  .btn-reject-draft{padding:4px 12px;border-radius:5px;background:var(--red-dim);border:1px solid var(--red);color:var(--red);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s}
  .btn-reject-draft:hover{background:var(--red);color:#fff}
  .btn-edit-draft{padding:4px 12px;border-radius:5px;background:var(--bg3);border:1px solid var(--border);color:var(--text2);font-size:11px;cursor:pointer;transition:all .15s}
  .btn-edit-draft:hover{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}

  /* SQL Duplicate check overlay */
  .dup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:9500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
  .dup-overlay.open{opacity:1;pointer-events:all}
  .dup-modal{background:var(--bg1);border:1px solid var(--border);border-radius:14px;width:620px;max-width:96vw;max-height:88vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.8)}
  .dup-header{padding:18px 20px;border-bottom:1px solid var(--border)}
  .dup-step{display:flex;align-items:center;gap:8px;margin-bottom:14px}
  .dup-step-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
  .dup-step-dot.sql{background:var(--amber-dim);border:2px solid var(--amber);color:var(--amber)}
  .dup-step-dot.ai{background:#2d1f47;border:2px solid #8957e5;color:#bc8cff}
  .dup-step-dot.done{background:var(--green-dim);border:2px solid var(--green);color:var(--green)}
  .dup-step-dot.warn{background:var(--red-dim);border:2px solid var(--red);color:var(--red)}
  .dup-step-line{flex:1;height:1px;background:var(--border)}
  .sql-result-box{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:14px;margin-bottom:12px}
  .sql-code{font-family:monospace;font-size:10px;color:var(--teal);background:var(--bg0);padding:8px 10px;border-radius:5px;margin-top:6px;line-height:1.6;overflow-x:auto;white-space:pre}
  .match-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bg3);border-radius:6px;margin-top:6px;border-left:3px solid var(--amber)}
  .similarity-bar{flex:1;height:6px;background:var(--bg0);border-radius:3px;overflow:hidden}
  .similarity-fill{height:100%;border-radius:3px;transition:width .8s ease}
  .ai-analysis-box{background:linear-gradient(135deg,#1a1525,#0d1117);border:1px solid #8957e5;border-radius:8px;padding:14px;margin-bottom:12px}
  .ai-analysis-thinking{display:flex;align-items:center;gap:8px;color:#bc8cff;font-size:11px;margin-bottom:8px}
  .force-confirm-box{background:var(--red-dim);border:2px solid var(--red);border-radius:8px;padding:14px;margin-top:10px}
  .force-confirm-title{font-size:12px;font-weight:700;color:var(--red);margin-bottom:8px;display:flex;align-items:center;gap:6px}
  .force-confirm-input{background:var(--bg0);border:1px solid var(--red);border-radius:5px;padding:8px 12px;color:var(--text1);font-size:12px;outline:none;font-family:monospace;width:100%;margin-top:8px;letter-spacing:2px}
  .force-confirm-input:focus{border-color:#ff6b6b;box-shadow:0 0 0 2px rgba(248,81,73,.2)}

  /* Upload drop zone */
  .drop-zone{border:2px dashed var(--border);border-radius:10px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg2)}
  .drop-zone:hover,.drop-zone.dragover{border-color:var(--blue);background:var(--blue-dim)}
  .drop-zone-icon{font-size:36px;margin-bottom:10px}
  .drop-zone-text{font-size:12px;color:var(--text2);line-height:1.6}
  .drop-zone-hint{font-size:10px;color:var(--text3);margin-top:6px}
  .upload-progress{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:10px}
  .progress-bar{height:4px;background:var(--bg3);border-radius:4px;overflow:hidden;margin-top:6px}
  .progress-fill{height:100%;background:var(--green);border-radius:4px;transition:width .4s ease}

  /* Intake sub-tabs */
  .intake-subtabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border);padding-bottom:12px}
  .intake-stab{padding:5px 14px;border-radius:5px;font-size:12px;cursor:pointer;color:var(--text2);border:1px solid transparent;transition:all .15s}
  .intake-stab:hover{color:var(--text1);background:var(--bg3)}
  .intake-stab.active{background:var(--bg3);color:var(--text1);border-color:var(--border)}
  .intake-page{display:none}
  .intake-page.active{display:block}


  /* ═══ SETTINGS ═══ */
  .cfg-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;margin:1px 6px;cursor:pointer;color:var(--text2);transition:all .15s;font-size:11px}
  .cfg-item:hover{background:var(--bg2);color:var(--text1)}
  .cfg-item.active{background:var(--blue-dim);color:var(--blue)}
  .cfg-num{width:17px;height:17px;border-radius:50%;background:var(--bg3);border:1px solid var(--border);font-size:9px;font-weight:700;color:var(--text3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .cfg-item.active .cfg-num{background:var(--blue-dim);border-color:var(--blue);color:var(--blue)}
  .cfg-section{background:var(--bg1);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px}
  .cfg-sh{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
  .cfg-st{font-size:12px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:8px}
  .cfg-sb{padding:14px 16px}
  .cfg-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border)}
  .cfg-row:last-child{border-bottom:none}
  .cfg-rl{flex:1;min-width:0}
  .cfg-rl-lbl{font-size:12px;color:var(--text1);font-weight:500}
  .cfg-rl-desc{font-size:10px;color:var(--text3);margin-top:2px;line-height:1.4}
  .cfg-rr{flex-shrink:0;margin-left:14px}
  .tgl{width:34px;height:18px;border-radius:9px;background:var(--bg3);border:1px solid var(--border);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
  .tgl.on{background:var(--green);border-color:var(--green)}
  .tgl::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
  .tgl.on::after{transform:translateX(16px)}
  .cfg-inp{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:5px 9px;color:var(--text1);font-size:11px;outline:none;font-family:inherit;transition:border-color .15s}
  .cfg-inp:focus{border-color:var(--blue)}
  .cfg-sel{background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:5px 9px;color:var(--text1);font-size:11px;outline:none;cursor:pointer}
  .cfg-btn{padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--text2);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
  .cfg-btn:hover{background:var(--bg3);color:var(--text1)}
  .cfg-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
  .cfg-btn.pri:hover{background:#1a5ecb}
  .cfg-btn.dan{border-color:var(--red);color:var(--red)}
  .cfg-btn.dan:hover{background:var(--red-dim)}
  .cfg-btn.ok{border-color:var(--green);color:var(--green)}
  .cfg-btn.ok:hover{background:var(--green-dim)}
  .cfg-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .cfg-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .ptbl{width:100%;border-collapse:collapse;font-size:11px}
  .ptbl th{padding:6px 10px;background:var(--bg2);font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);text-align:left}
  .ptbl td{padding:7px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
  .ptbl tr:hover td{background:var(--bg2)}
  .log-row{display:flex;align-items:flex-start;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:11px}
  .log-t{font-family:monospace;color:var(--text3);font-size:10px;margin-top:1px;flex-shrink:0;width:135px}
  .log-bdg{padding:1px 5px;border-radius:4px;font-size:9px;font-weight:700;text-transform:uppercase;flex-shrink:0;margin-top:2px}
  .li{background:var(--blue-dim);color:var(--blue)} .lw{background:var(--amber-dim);color:var(--amber)}
  .le{background:var(--red-dim);color:var(--red)} .ls{background:var(--green-dim);color:var(--green)}
  .log-m{color:var(--text2);flex:1;line-height:1.4} .log-u{color:var(--text3);font-size:10px;flex-shrink:0}
  .akey{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:5px;padding:5px 10px}
  .akey-v{font-family:monospace;font-size:11px;color:var(--teal);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ═══ TMS v2.0 — Additional Styles ═══ */

/* .vc-mini.dnd-active đã gỡ cùng tính năng DND ("Đóng cửa"). */
/* Delivery type stripes */
/* .order-stripe-HOA_TOC đã gỡ cùng tính năng hoả tốc. */
.order-stripe-NHANH   { border-left:3px solid var(--amber)!important; }
/* Chat */
.chat-bubble-self  { background:var(--accent);color:#fff;border-radius:12px 12px 3px 12px;padding:8px 12px;max-width:80%;word-break:break-word;font-size:12px;line-height:1.5 }
.chat-bubble-other { background:var(--bg2);color:var(--text1);border:1px solid var(--border);border-radius:12px 12px 12px 3px;padding:8px 12px;max-width:80%;word-break:break-word;font-size:12px;line-height:1.5 }
/* Blacklist row */
.bl-row { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:6px;border:1px solid var(--border);margin-bottom:6px;background:var(--bg2);transition:border-color .15s }
.bl-row:hover { border-color:var(--red) }
/* Account table */
.acct-row:hover td { background:var(--bg2)!important }
.acct-row td { padding:10px 14px;border-bottom:1px solid var(--border);vertical-align:middle;font-size:12px }
.acct-badge-active  { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:var(--green-dim);color:var(--green);border:1px solid var(--green) }
.acct-badge-locked  { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:var(--red-dim);color:var(--red);border:1px solid var(--red) }
.acct-badge-mustpw  { padding:2px 8px;border-radius:10px;font-size:10px;font-weight:700;background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber) }
.acct-action-btn { padding:3px 9px;border-radius:5px;border:1px solid var(--border);background:transparent;font-size:10px;cursor:pointer;font-weight:600;transition:all .15s;margin-right:3px }


/* ═══════════════════════════════════════════════
   LOGIN OVERLAY
═══════════════════════════════════════════════ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #050608;
  background-image: url("../uploads/login-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.login-overlay.hidden { display: none; }

.login-card {
  position: relative;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 32px 36px;
  width: 100%; max-width: 380px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);
}

.login-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 24px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,180,80,.25);
}
.login-logo-mark {
  width: 46px; height: 46px; border-radius: 10px;
  object-fit: cover; object-position: center;
  display: block;
  box-shadow: 0 4px 14px rgba(255,150,40,.35);
  border: 1px solid rgba(255,190,90,.3);
}
.login-logo-text {
  font-size: 16px; font-weight: 800;
  background: linear-gradient(135deg,#ffd24a,#ff8a00);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.login-logo-sub  { font-size: 10px; color: rgba(255,225,200,.85); margin-top: 2px; }

.login-title {
  font-size: 20px; font-weight: 800;
  color: #fff; margin-bottom: 22px;
  text-shadow: 0 1px 8px rgba(0,0,0,.7);
}

.login-error {
  background: var(--red-dim); border: 1px solid var(--red);
  border-radius: 8px; padding: 10px 14px;
  font-size: 12px; color: var(--red);
  margin-bottom: 14px;
}

.login-field  { margin-bottom: 16px; }
.login-label  { display: none; }
.login-input  {
  width: 100%; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px; padding: 14px 18px;
  font-size: 15px; color: #fff;
  outline: none;
  transition: border-color .15s;
}
.login-input::placeholder { color: rgba(255,255,255,.55); }
.login-input:focus {
  border-color: rgba(255,210,120,.7);
}
/* Chống nền trắng do autofill của trình duyệt → giữ ô trong suốt */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.001) inset;
}
/* Ẩn icon clear thừa của Edge, GIỮ icon hiện mật khẩu mặc định của trình duyệt */
.login-input::-ms-clear { display: none; }

.login-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 28px;
  background: linear-gradient(135deg,#ff9a1f,#ff6a00);
  border: none; border-radius: 10px;
  color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; margin-top: 14px;
  box-shadow: 0 6px 18px rgba(255,120,20,.4);
  transition: filter .15s, transform .1s;
}
.login-btn:hover   { filter: brightness(1.08); }
.login-btn:active  { transform: scale(.98); }
.login-btn:disabled { background: rgba(255,255,255,.12); color: rgba(255,255,255,.4); box-shadow: none; cursor: not-allowed; }

/* ═══════════════════════════════════════════════
   DRAGGABLE CHAT WINDOWS
═══════════════════════════════════════════════ */
.draggable-header {
  cursor: grab;
  user-select: none;
}
.draggable-header:active { cursor: grabbing; }

/* Override AI panel positioning when dragged */
.ai-panel.dragged {
  bottom: auto !important;
  right: auto !important;
  transition: opacity .22s, transform .22s !important;
}

/* Override chat drawer when dragged */
#chat-drawer.dragged {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 380px !important;
  height: 560px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  transform: none !important;
  transition: opacity .2s !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.65) !important;
}

/* ═══════════════════════════════════════════════
   GLOBAL SCROLLBAR — tất cả panel đều cuộn được
═══════════════════════════════════════════════ */
.panel, .content > div, #crew-list, #order-tracking-list,
#chat-messages, #ai-messages, .mgmt-body, .intake-body {
  scrollbar-width: thin;
  scrollbar-color: var(--blue) var(--bg2);
}
.panel::-webkit-scrollbar,
#chat-messages::-webkit-scrollbar,
#ai-messages::-webkit-scrollbar { width: 5px; }
.panel::-webkit-scrollbar-thumb,
#chat-messages::-webkit-scrollbar-thumb,
#ai-messages::-webkit-scrollbar-thumb {
  background: var(--blue); border-radius: 4px;
}

/* Sidebar — nút có nền đậm, dễ nhận biết. Mặc định cỡ vừa (15px). */
.nav-item {
  font-size: 17px !important;
  padding: 11px 12px !important;
  gap: 10px !important;
  margin: 3px 8px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
  color: var(--text1) !important;
}
.nav-item:hover { background: var(--bg3) !important; border-color: var(--blue) !important; }
.nav-item.active { background: var(--blue-dim) !important; color: var(--blue) !important; border-color: var(--blue) !important; }
.nav-icon { width: 22px !important; font-size: 18px !important; }
/* 2 nút chính giữ cỡ TO nổi bật */
#nav-0, #nav-chat {
  font-size: 18px !important;
  padding: 14px 14px !important;
  font-weight: 700 !important;
}
#nav-0 .nav-icon, #nav-chat .nav-icon { font-size: 20px !important; width: 24px !important; }
.nav-section { font-size: 11px !important; padding: 14px 10px 6px !important; }
.nav-badge { font-size: 11px !important; }
.logo-text { font-size: 12px !important; }
.logo-sub  { font-size: 9px !important; }

  /* ═══ NẠP ĐƠN — cửa sổ nổi giữa màn hình (giống Quản lý xe) ═══ */
  .intake-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:8500;display:none}
  .intake-overlay.open{display:block}
  .intake-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:760px;max-width:94vw;height:600px;max-height:90vh;
    background:var(--bg0);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:8600;display:none;flex-direction:column;overflow:hidden}
  .intake-modal.open{display:flex}
  .intake-modal-head{padding:14px 18px;background:var(--bg1);border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
  .intake-modal-close{background:none;border:none;color:var(--text2);font-size:16px;cursor:pointer;
    width:28px;height:28px;border-radius:6px;transition:all .15s}
  .intake-modal-close:hover{background:var(--bg3);color:var(--text1)}
  .intake-modal-body{padding:18px;overflow-y:auto;flex:1}

  /* ═══ QUẢN LÝ ĐƠN — cửa sổ giữa màn hình (overview 4 cột → chi tiết) ═══ */
  .orders-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:8500;display:none}
  .orders-overlay.open{display:block}
  .orders-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    width:920px;max-width:94vw;height:80vh;max-height:88vh;
    background:var(--bg0);border:1px solid var(--border);border-radius:12px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);z-index:8600;display:none;flex-direction:column;overflow:hidden}
  .orders-modal.open{display:flex}
  .orders-head{padding:14px 18px;background:var(--bg1);border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
  .orders-head-left{display:flex;align-items:center;gap:10px}
  .orders-back{background:var(--bg3);border:1px solid var(--border);color:var(--text1);
    width:30px;height:30px;border-radius:7px;cursor:pointer;font-size:15px;transition:all .15s}
  .orders-back:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
  .orders-close{background:none;border:none;color:var(--text2);font-size:16px;cursor:pointer;
    width:28px;height:28px;border-radius:6px;transition:all .15s}
  .orders-close:hover{background:var(--bg3);color:var(--text1)}
  .orders-body{padding:18px;overflow-y:auto;flex:1}

  /* Lớp 2: danh sách chi tiết */
  .odetail-list{display:flex;flex-direction:column;gap:10px}
  .ocard{background:var(--bg1);border:1px solid var(--border);border-radius:9px;padding:12px 14px}
  .ocard-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
  .ocard-addr{color:var(--text1);font-size:12px;margin-bottom:8px}
  .ocard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
  .ocard-cell{background:var(--bg2);border-radius:6px;padding:7px 9px}
  .ocard-cell .lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
  .ocard-cell .val{font-size:12px;color:var(--text1);font-weight:600}
  .odetail-empty{text-align:center;padding:50px 20px;color:var(--text3);font-size:13px}

  /* ═══ Submenu trượt cho "Quản lý đơn" trên sidebar ═══ */
  .nav-caret{margin-left:auto;font-size:10px;color:var(--text3);transition:transform .2s}
  .nav-item.open .nav-caret{transform:rotate(90deg)}
  .nav-submenu{max-height:0;overflow:hidden;transition:max-height .25s ease;margin:0 6px}
  .nav-submenu.open{max-height:240px}
  .nav-suboption{display:flex;align-items:center;gap:7px;padding:6px 9px 6px 22px;margin:1px 0;
    border-radius:6px;cursor:pointer;color:var(--text2);font-size:11px;transition:all .15s}
  .nav-suboption:hover{background:var(--bg2);color:var(--text1)}
  .nav-suboption .so-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
  .nav-suboption.wait .so-dot{background:var(--blue)}
  .nav-suboption.prog .so-dot{background:var(--amber)}
  .nav-suboption.fail .so-dot{background:var(--red)}
  .nav-suboption.done .so-dot{background:var(--green)}
  .nav-suboption .so-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav-suboption .so-count{padding:0 6px;border-radius:9px;font-size:10px;font-weight:700;background:var(--bg3)}
  .nav-suboption.wait .so-count{color:var(--blue)}
  .nav-suboption.prog .so-count{color:var(--amber)}
  .nav-suboption.fail .so-count{color:var(--red)}
  .nav-suboption.done .so-count{color:var(--green)}

  /* ═══ Bản đồ & Lộ trình — sheet đè lên bản đồ (map full, không resize) ═══ */
  /* Panel trái làm khung định vị; map full luôn, sheet đè lên trên */
  #page-0 > .panel{position:relative;display:flex;flex-direction:column;padding:16px;overflow:hidden}

  /* Map LUÔN full panel, không bao giờ đổi kích thước → không khựng */
  #page-0 #map-wrap{flex:1 1 auto;min-height:200px;margin-bottom:0}

  /* Sheet lộ trình là lớp ĐÈ lên map, định vị tuyệt đối ở đáy panel */
  .route-sheet{position:absolute;left:16px;right:16px;bottom:16px;top:60px;
    background:var(--bg2);
    border:1px solid var(--border);border-radius:12px 12px 0 0;
    display:flex;flex-direction:column;
    box-shadow:0 -6px 30px rgba(0,0,0,.25);z-index:600;
    transition:transform .3s ease;will-change:transform}
  .route-sheet-handle{position:relative;display:flex;align-items:center;gap:10px;padding:11px 16px 9px;cursor:pointer;
    border-bottom:1px solid rgba(128,128,128,.25);user-select:none;flex-shrink:0}
  .route-sheet-handle:hover{background:rgba(128,128,128,.12)}
  .rsh-grip{width:36px;height:4px;border-radius:3px;background:var(--text3);opacity:.5;
    position:absolute;left:50%;top:5px;transform:translateX(-50%)}
  .rsh-label{font-size:12px;font-weight:600;color:var(--text1)}
  .rsh-caret{margin-left:auto;color:var(--text2);font-size:13px;transition:transform .3s}
  .route-sheet-inner{padding:10px 4px 6px;overflow-y:auto;flex:1 1 auto;min-height:0}

  /* KHI HẠ: chỉ trượt sheet xuống (transform), map vẫn nguyên → mượt, không khựng */
  #page-0.sheet-down .route-sheet{transform:translateY(calc(100% - 44px))}
  #page-0.sheet-down .rsh-caret{transform:rotate(180deg)}

  /* ═══ Bảng thông báo hệ thống (dạng chat) — panel phải ═══ */
  .notif-feed-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
    margin:0 14px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .notif-feed-head{flex-shrink:0;padding:9px 13px;font-size:11px;font-weight:700;color:var(--text2);
    text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between}
  .notif-feed-clear{background:transparent;border:none;color:var(--text3);cursor:pointer;font-size:13px;
    padding:2px 6px;border-radius:5px;transition:all .15s}
  .notif-feed-clear:hover{background:var(--bg3);color:var(--red)}
  .notif-feed{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 12px;
    display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
  .nf-item{display:flex;gap:8px;align-items:flex-start;animation:nfIn .25s ease}
  @keyframes nfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .nf-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;background:var(--text3)}
  .nf-item.done .nf-dot{background:var(--green)}
  .nf-item.prog .nf-dot{background:var(--amber)}
  .nf-item.warn .nf-dot{background:var(--red)}
  .nf-item.info .nf-dot{background:var(--blue)}
  .nf-bubble{flex:1;background:var(--bg1);border:1px solid var(--border);border-radius:9px;padding:8px 11px}
  .nf-msg{font-size:11px;color:var(--text1);line-height:1.45;word-break:break-word}
  .nf-time{font-size:9px;color:var(--text3);margin-top:3px}
  .nf-empty{text-align:center;color:var(--text3);font-size:11px;padding:30px 10px}

/* ════════════════════════════════════════════════════════════════════
   THEME PRESETS (đồng bộ với app tài xế) — chọn qua html[data-theme="..."]
   Mặc định (không data-theme) = :root ở trên = Dark Pro (giữ giao diện cũ).
   Lớp white-label: js/theme.js có thể ghi đè --accent/--blue bằng màu hãng.
   ════════════════════════════════════════════════════════════════════ */

/* 1. Corporate Blue (sáng) */
html[data-theme="blue"]{
  --bg0:#f5f7fa; --bg1:#ffffff; --bg2:#eaeef3; --bg3:#dde3ea; --border:#d5dce4;
  --text1:#1a2230; --text2:#5b6573; --text3:#8a93a1;
  --blue:#3b82f6; --blue-dim:#dbeafe; --green:#16a34a; --green-dim:#dcfce7;
  --amber:#d97706; --amber-dim:#fef3c7; --red:#dc2626; --red-dim:#fde8e8;
  --teal:#0ea5e9; --accent:#1f6feb;
  --glass:rgba(59,130,246,.6); --glass-border:rgba(59,130,246,.5);
}

/* 2. Logistics Orange (sáng) */
html[data-theme="orange"]{
  --bg0:#fbf7f2; --bg1:#ffffff; --bg2:#f0e7dd; --bg3:#e7dccd; --border:#e2d5c7;
  --text1:#231b14; --text2:#6b5e52; --text3:#9a8c7e;
  --blue:#0ea5e9; --blue-dim:#e0f2fe; --green:#16a34a; --green-dim:#dcfce7;
  --amber:#d97706; --amber-dim:#fef3c7; --red:#dc2626; --red-dim:#fde8e8;
  --teal:#0f766e; --accent:#f97316;
  --glass:rgba(249,115,22,.55); --glass-border:rgba(249,115,22,.5);
}

/* 3. Dark Pro (tối) — trùng :root */
html[data-theme="dark"]{
  --bg0:#0d1117; --bg1:#161b22; --bg2:#21262d; --bg3:#2d333b; --border:#30363d;
  --text1:#e6edf3; --text2:#8b949e; --text3:#58626b;
  --blue:#58a6ff; --blue-dim:#1f3a5f; --green:#3fb950; --green-dim:#1a3a1f;
  --amber:#d29922; --amber-dim:#3a2e0a; --red:#f85149; --red-dim:#3a1414;
  --teal:#79c0ff; --accent:#1f6feb;
  --glass:rgba(31,55,90,.6); --glass-border:rgba(88,166,255,.35);
}

/* 4. Green Logistics (sáng) */
html[data-theme="green"]{
  --bg0:#f3f8f4; --bg1:#ffffff; --bg2:#e4efe7; --bg3:#d6e7da; --border:#cfe3d5;
  --text1:#14241a; --text2:#566b5d; --text3:#84998c;
  --blue:#0ea5e9; --blue-dim:#e0f2fe; --green:#22c55e; --green-dim:#dcfce7;
  --amber:#d97706; --amber-dim:#fef3c7; --red:#dc2626; --red-dim:#fde8e8;
  --teal:#0d9488; --accent:#16a34a;
  --glass:rgba(34,197,94,.55); --glass-border:rgba(34,197,94,.5);
}

/* 5. Black Gold (tối sang) */
html[data-theme="gold"]{
  --bg0:#0b0b0d; --bg1:#17171b; --bg2:#26262c; --bg3:#33333b; --border:#3a3a42;
  --text1:#f4f1e8; --text2:#a8a299; --text3:#6f6a61;
  --blue:#e8c964; --blue-dim:#2e2716; --green:#3fb950; --green-dim:#1a3a1f;
  --amber:#d4af37; --amber-dim:#3a2e0a; --red:#f85149; --red-dim:#3a1414;
  --teal:#c0a062; --accent:#d4af37;
  --glass:rgba(60,50,20,.6); --glass-border:rgba(212,175,55,.4);
}

/* ════════════════════════════════════════════════════════════════════
   HIỆU ỨNG 3D NHẸ (bật bằng body.ui-3d) — nút nổi/ấn lún, thẻ & cửa sổ có chiều sâu.
   Dùng bóng đổ + highlight nên ăn theo mọi theme (sáng/tối). Không WebGL.
   ════════════════════════════════════════════════════════════════════ */
body.ui-3d{
  --d-up:    0 2px 4px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.07);
  --d-up-h:  0 5px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10);
  --d-press: inset 0 2px 4px rgba(0,0,0,.28);
  --d-card:  0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ── Nút: nổi lên, hover nhấc cao, nhấn lún xuống ── */
body.ui-3d button:not(.ai-fab):not(.tgl),
body.ui-3d :is(.cfg-btn,.btn-add,.btn-edit,.btn-del,.btn-cancel,.btn-save,.btn-confirm-del,.btn-approve,.btn-reject-draft,.btn-edit-draft,.btn-xs){
  box-shadow: var(--d-up);
  transition: transform .08s ease, box-shadow .12s ease, background .15s;
}
body.ui-3d button:not(.ai-fab):not(.tgl):hover,
body.ui-3d :is(.cfg-btn,.btn-add,.btn-save,.btn-approve,.btn-edit,.btn-del,.btn-cancel,.btn-xs):hover{
  transform: translateY(-1px);
  box-shadow: var(--d-up-h);
}
body.ui-3d button:not(.ai-fab):not(.tgl):active,
body.ui-3d :is(.cfg-btn,.btn-add,.btn-save,.btn-confirm-del,.btn-approve,.btn-reject-draft,.btn-edit-draft,.btn-edit,.btn-del,.btn-cancel,.btn-xs):active{
  transform: translateY(1px) scale(.985);
  box-shadow: var(--d-press);
}

/* Nút nền đặc (primary/accent) thêm chút ánh sáng trên → khối hơn */
body.ui-3d :is(.btn-add,.btn-save,.btn-confirm-del,.btn-approve,.cfg-btn.pri){
  background-image: linear-gradient(to bottom, rgba(255,255,255,.14), rgba(0,0,0,.07));
}

/* ── Tab / mục điều hướng: nhấc khi hover, lún khi nhấn ── */
body.ui-3d :is(.nav-item,.cfg-item){ transition: transform .08s ease, box-shadow .12s ease, background .15s; }
body.ui-3d :is(.nav-item,.cfg-item):hover{ transform: translateY(-1px); }
body.ui-3d :is(.nav-item,.cfg-item):active{ transform: translateY(1px); }
body.ui-3d :is(.nav-item.active,.cfg-item.active){ box-shadow: var(--d-up); }

/* ── Thẻ & cửa sổ: chiều sâu nổi khối ── */
body.ui-3d :is(.cfg-section,.intake-card,.vc-mini,.panel-right){ box-shadow: var(--d-card); }
body.ui-3d :is(.form-modal,.dup-modal,.confirm-box,.ai-panel){ box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }

/* ── Ô nhập: hơi lõm xuống cho cảm giác chiều sâu ── */
body.ui-3d :is(.cfg-inp,.cfg-sel,input[type="text"],input[type="password"],input[type="number"],select,textarea){
  box-shadow: inset 0 1px 2px rgba(0,0,0,.14);
}

/* ── Bong bóng chat & badge nổi nhẹ ── */
body.ui-3d :is(.chat-bubble-self,.chat-bubble-other){ box-shadow: 0 2px 6px rgba(0,0,0,.18); }

/* Tôn trọng "giảm chuyển động" của hệ thống */
@media (prefers-reduced-motion: reduce){
  body.ui-3d *{ transition: none !important; }
  body.ui-3d button:active, body.ui-3d .nav-item:active, body.ui-3d .cfg-item:active{ transform: none !important; }
}

/* ═══════════ PANEL NỔI (Cài đặt + Nhật ký hoạt động) ═══════════ */
.panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8800;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .18s}
.panel-overlay.open{display:flex;opacity:1}
.panel-float{
  background:var(--bg1);border:1px solid var(--border);border-radius:12px;
  width:880px;max-width:94vw;height:78vh;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:scale(.96) translateY(-8px);transition:transform .18s,width .18s,height .18s
}
.panel-overlay.open .panel-float{transform:scale(1) translateY(0)}
/* Khi mở rộng toàn màn hình */
.panel-float.full{width:100vw;max-width:100vw;height:100vh;max-height:100vh;border-radius:0;border:none}
/* Đầu panel */
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border);background:var(--bg1);flex-shrink:0;position:relative;z-index:2}
.panel-title{font-size:13px;font-weight:700;color:var(--text1)}
.panel-actions{display:flex;gap:6px}
.panel-btn{background:var(--bg2);border:1px solid var(--border);color:var(--text1);width:30px;height:30px;border-radius:7px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.panel-btn:hover{background:var(--bg3)}
.panel-close{color:var(--red);border-color:var(--red)}
/* Nút đóng ✕ LUÔN hiển thị (mọi chế độ). Trước đây bị ẩn khi không full nên
   lúc mở rộng toàn màn hình người dùng tưởng X "không đóng được". */
.panel-actions{z-index:2}
/* Thân panel */
.panel-body{display:flex;flex:1;overflow:hidden}
.panel-nav{width:200px;flex-shrink:0;background:var(--bg1);border-right:1px solid var(--border);overflow-y:auto;display:flex;flex-direction:column}
.panel-content{flex:1;overflow-y:auto;padding:20px;background:var(--bg0)}
/* Thanh trượt rõ ràng để kéo chuột */
.panel-content::-webkit-scrollbar,.panel-nav::-webkit-scrollbar{width:12px}
.panel-content::-webkit-scrollbar-thumb,.panel-nav::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:6px;border:3px solid var(--bg1)}
.panel-content::-webkit-scrollbar-thumb:hover,.panel-nav::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.panel-content::-webkit-scrollbar-track,.panel-nav::-webkit-scrollbar-track{background:var(--bg1)}

/* ═══════════ ĐỒNG HỒ 4D XANH (điểm nhấn header) ═══════════ */
#rt-clock{
  font-family:'Courier New',ui-monospace,monospace;
  font-size:26px;font-weight:800;letter-spacing:2px;
  color:#7cc4ff;
  padding:2px 12px;border-radius:12px;
  background:transparent;
  border:none;
  text-shadow:
    0 0 8px rgba(88,166,255,.95),
    0 0 18px rgba(88,166,255,.6),
    0 1px 0 #0b4da8,
    0 2px 0 #083a80,
    0 3px 5px rgba(0,0,0,.85);
  box-shadow:none;
  line-height:1;white-space:nowrap;
  transform:perspective(340px) rotateX(8deg);
  user-select:none;
  display:inline-flex;
  align-items:center;
}
#rt-clock .dg{display:inline-flex;align-items:center;justify-content:center;min-width:.62em;line-height:1;transform-origin:center center}
#rt-clock .sep{display:inline-flex;align-items:center;justify-content:center;line-height:1;opacity:.7}
#rt-clock .pop{animation:digPop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes digPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.6);
      text-shadow:0 0 14px rgba(88,166,255,1),0 0 26px rgba(88,166,255,.8)}
  100%{transform:scale(1)}
}
@media (max-width:1200px){ #rt-clock{font-size:22px;padding:2px 10px} }

/* ═══════════ LỊCH GHI CHÚ + NHẮC HẸN ═══════════ */
.cal-pop{position:fixed;z-index:9200;background:var(--bg1);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 16px 50px rgba(0,0,0,.6);padding:12px;width:280px;animation:calIn .15s ease}
@keyframes calIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-mtitle{font-size:13px;font-weight:700;color:var(--text1)}
.cal-nav{background:var(--bg2);border:1px solid var(--border);color:var(--text1);width:26px;height:26px;border-radius:6px;cursor:pointer;font-size:15px;line-height:1}
.cal-nav:hover{background:var(--bg3)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cal-dow{margin-bottom:4px}
.cal-dowlbl{text-align:center;font-size:10px;color:var(--text3);font-weight:600;padding:2px 0}
.cal-cell{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--text1);border-radius:6px;cursor:pointer;background:var(--bg2);border:1px solid transparent;transition:all .12s}
.cal-cell:hover{background:var(--accent);color:#fff}
.cal-empty{background:transparent;cursor:default}
.cal-today{border-color:#ff2d2d;color:#ff5a5a;font-weight:700}
.cal-dot{position:absolute;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--amber)}
.cal-foot{margin-top:10px;font-size:10px;color:var(--text3);text-align:center}
/* Bảng ghi chú công việc */
.worknote-pop{width:300px}
.wn-list{max-height:220px;overflow-y:auto;margin-bottom:10px;display:flex;flex-direction:column;gap:5px}
.wn-empty{text-align:center;color:var(--text3);font-size:12px;padding:20px 0}
.wn-item{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:7px 9px}
.wn-done{opacity:.5;text-decoration:line-through}
.wn-time{font-family:monospace;font-size:12px;color:var(--amber);font-weight:700;flex-shrink:0}
.wn-txt{flex:1;font-size:12px;color:var(--text1);word-break:break-word}
.wn-del{background:transparent;border:none;cursor:pointer;font-size:13px;opacity:.6;flex-shrink:0}
.wn-del:hover{opacity:1}
.wn-add{display:flex;gap:6px;align-items:center}
.wn-input{background:var(--bg2);border:1px solid var(--border);border-radius:6px;color:var(--text1);padding:6px 8px;font-size:12px}
.wn-addbtn{background:var(--accent);border:none;color:#fff;border-radius:6px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
/* Bong bóng nhắc hẹn */
#remind-bubble-wrap{position:fixed;z-index:9600;display:flex;flex-direction:column;gap:8px;max-width:300px}
.remind-bubble{display:flex;align-items:center;gap:8px;background:linear-gradient(145deg,#3a1010,#241414);
  border:1px solid #ff2d2d;border-radius:10px;padding:9px 12px;cursor:pointer;
  box-shadow:0 6px 24px rgba(255,45,45,.35),0 0 0 1px rgba(255,45,45,.2);
  animation:rbPop .35s cubic-bezier(.2,1.4,.4,1);max-width:300px}
@keyframes rbPop{from{opacity:0;transform:scale(.7) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
.remind-bubble:hover{border-color:#ff6a6a}
.rb-ico{font-size:16px;animation:rbRing 1s ease infinite}
@keyframes rbRing{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.rb-txt{font-size:12px;color:#ffd7d7;line-height:1.3}
.rb-confirm{border-color:var(--amber);box-shadow:0 6px 24px rgba(210,153,34,.4)}

/* ═══════════ NÚT MINI TRÊN BẢN ĐỒ (tile + GPS) — gọn, theo theme ═══════════ */
.map-mini-btn{
  display:flex;align-items:center;gap:4px;
  background:var(--bg1);border:1px solid var(--border);border-radius:6px;
  padding:4px 9px;font-size:11px;color:var(--text1);cursor:pointer;
  white-space:nowrap;transition:all .15s;line-height:1.4;
  box-shadow:0 2px 6px rgba(0,0,0,.25)
}
.map-mini-btn:hover{border-color:var(--blue);color:var(--blue)}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — tự cân bằng cho tablet & điện thoại (Phương án "vừa đủ")
   Chỉ áp cho màn nhỏ; desktop giữ nguyên hoàn toàn.
   ══════════════════════════════════════════════════════════════════ */

/* Nút mở menu (hamburger) — chỉ hiện trên màn nhỏ */
.nav-toggle{
  display:none; background:var(--bg2); border:1px solid var(--border);
  color:var(--text1); width:38px; height:38px; border-radius:8px;
  font-size:18px; cursor:pointer; flex-shrink:0; align-items:center; justify-content:center;
}

/* ───────── TABLET (≤1024px): thu gọn panel phải, padding nhỏ lại ───────── */
@media (max-width:1024px){
  .content{ grid-template-columns:1fr 280px; }   /* panel phải hẹp hơn */
  .hdr-kpis{ gap:6px; overflow-x:auto; }
  .kpi-pill{ padding:5px 10px; }
  .kpi-n{ font-size:16px; }
}

/* ───────── ĐIỆN THOẠI & MÀN NHỎ (≤768px) ───────── */
@media (max-width:768px){
  /* Hiện nút hamburger, ẩn sidebar mặc định */
  .nav-toggle{ display:flex; }

  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:9000;
    width:260px; max-width:85vw;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.4);
  }
  .sidebar.open{ transform:translateX(0); }

  /* Lớp nền tối khi mở menu */
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:8999;
  }
  .sidebar-backdrop.open{ display:block; }

  /* Bố cục chính: xếp DỌC thay vì ngang (bản đồ trên, panel dưới) */
  .content{ grid-template-columns:1fr !important; grid-template-rows:auto auto; overflow-y:auto; }
  .panel-right{ border-left:none; border-top:1px solid var(--border); }

  /* Header gọn lại */
  .logo{ width:auto; }
  .logo-text-wrap, .logo-sub{ display:none; }   /* ẩn chữ phụ logo cho gọn */
  .hdr{ padding:0 10px; gap:8px; }
  .hdr-kpis{ gap:5px; }
  .kpi-pill{ padding:4px 8px; }
  .kpi-n{ font-size:14px; }
  .kpi-l{ font-size:9px; }

  /* Bản đồ cao vừa phải trên điện thoại */
  .map-wrap{ height:55vh !important; min-height:300px; }

  /* Bảng: cho cuộn ngang thay vì tràn vỡ */
  .mgmt-table, .ptbl{ display:block; overflow-x:auto; white-space:nowrap; }

  /* Lưới 2-3 cột → 1 cột cho dễ đọc */
  .form-grid, .intake-grid, .dispatch-grid, .cfg-g2, .draft-fields{
    grid-template-columns:1fr !important;
  }
  .crew-body{ grid-template-columns:1fr !important; }

  /* Popup/panel chiếm gần full màn hình điện thoại */
  .panel-float, .form-modal, .mgmt-drawer, .dup-modal{
    width:96vw !important; max-width:96vw !important;
    height:auto !important; max-height:92vh !important;
  }
  .panel-body{ flex-direction:column; }     /* nav + nội dung panel xếp dọc */
  .panel-nav{ width:100% !important; flex-direction:row; overflow-x:auto; }

  /* Route sheet (bảng lộ trình) full bề ngang */
  .route-sheet{ left:8px; right:8px; }

  /* Chữ và nút đủ to để bấm bằng ngón tay */
  .nav-item{ padding:12px 14px; font-size:15px; }
  .cfg-btn{ padding:8px 12px; }
}

/* ───────── MÀN RẤT NHỎ (≤480px): tinh chỉnh thêm ───────── */
@media (max-width:480px){
  .kpi-l{ display:none; }            /* chỉ hiện số, ẩn nhãn KPI cho gọn */
  .hdr-kpis{ gap:4px; }
  .map-wrap{ height:48vh !important; }
}