:root{
  --bg:#f7f8fa; --card:#fff; --ink:#1d2030; --muted:#8a90a2;
  --line:#eceef3; --pri:#3563e9; --pri-soft:#eaf0ff;
  --ok:#15a06a; --ok-soft:#e6f6ee; --warn:#d98a1f; --warn-soft:#fdf3e2;
  --pur:#7a5af8; --pur-soft:#f0ecfe; --radius:14px;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI","Be Vietnam Pro",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
.muted{color:var(--muted)}
h1{font-size:20px;margin:0 0 6px}h3{font-size:14px;margin:0 0 10px}

.topbar{display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border-bottom:1px solid var(--line);padding:0 24px;height:58px;position:sticky;top:0;z-index:10}
.brand{font-weight:700;font-size:16px}.brand span{color:var(--muted);font-weight:500}
.tabs{display:flex;gap:4px}
.userbox{display:flex;align-items:center;gap:8px}
.userbox #curUser{font-size:13px}
.tab{border:0;background:none;padding:8px 16px;border-radius:9px;cursor:pointer;color:var(--muted);font-size:14px;font-weight:500}
.tab.active{background:var(--pri-soft);color:var(--pri)}

main{max-width:1080px;margin:24px auto;padding:0 24px}
/* Tab Lịch sử nhiều cột -> cho rộng hết cỡ để xem toàn bộ không phải kéo ngang */
body.wide main{max-width:1600px}
#view-history .card,#view-orders .card{overflow:visible}
#historyTable,#ordersTable{width:100%;table-layout:auto}
#historyTable th,#historyTable td,#ordersTable th,#ordersTable td{white-space:nowrap}
#historyTable td.addr,#ordersTable td.addr{white-space:normal;max-width:260px}
.view{display:none}.view.active{display:block}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:18px}

.drop-card h1{margin-bottom:4px}
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:2px dashed #d4d8e3;border-radius:var(--radius);padding:44px;cursor:pointer;margin-top:16px;
  transition:.15s;text-align:center}
.dropzone:hover,.dropzone.drag{border-color:var(--pri);background:var(--pri-soft)}
.dz-icon{font-size:34px}.dz-text{font-size:15px}
.status{margin-top:14px;font-size:13px}
.status.err{color:#d23b3b}.status.ok{color:var(--ok)}

.rules-hint ul{margin:0;padding-left:18px;color:var(--muted)}
.rules-hint li{margin:4px 0}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stats-row:empty{display:none}
/* Biểu đồ cột thống kê */
.stat-chart{margin:8px 0 16px}
.chart-head{font-size:14px;margin-bottom:10px}
.stat-chart .bars{display:flex;align-items:flex-end;gap:10px;min-height:180px;padding:10px 4px;border-bottom:2px solid var(--line);overflow-x:auto}
.stat-chart .barcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:38px;flex:1}
.stat-chart .barnum{font-size:12px;font-weight:700;margin-bottom:4px}
.stat-chart .bar{width:70%;min-width:22px;border-radius:5px 5px 0 0;transition:height .3s}
.stat-chart .barlbl{font-size:11px;color:var(--muted);margin-top:6px;white-space:nowrap}
.bar-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-size:12px;color:var(--muted);align-items:center}
.bar-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pctbar{background:var(--line);border-radius:4px;height:10px;width:140px;overflow:hidden}
.pctbar>div{height:100%;border-radius:4px}
/* Chuyển chế độ Tạo Đơn */
.mode-switch{display:flex;gap:8px;margin-bottom:16px}
.mode-btn{padding:10px 20px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius);cursor:pointer;font-size:14px;font-weight:600;color:var(--muted)}
.mode-btn.active{background:var(--pri);color:#fff;border-color:var(--pri)}
/* Form đơn lẻ */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:16px}
.form-grid .field{display:flex;flex-direction:column;gap:5px}
.form-grid .field-wide{grid-column:1/-1}
.form-grid label{font-size:12px;color:var(--muted)}
.form-grid input{padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.form-grid input:focus{outline:none;border-color:var(--pri)}
/* Scan xuất kho */
.scan-input{width:100%;box-sizing:border-box;padding:18px 20px;font-size:22px;font-weight:600;border:2px solid var(--pri);border-radius:12px;margin-top:14px;text-align:center;letter-spacing:1px}
.scan-input:focus{outline:none;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
.scan-result{margin-top:16px;min-height:40px}
.scan-ok{background:#e8f8ee;border:1px solid #16a34a;border-radius:10px;padding:14px 18px;font-size:15px}
.scan-ok b{color:#0a7a3a}
.scan-dup{background:#fff7e6;border:1px solid #d19a00;border-radius:10px;padding:14px 18px;font-size:15px}
.scan-dup-big{background:#fdecec;border:2px solid #d23b3b;color:#b91c1c;font-size:17px;padding:18px 20px;animation:dupflash .5s ease}
@keyframes dupflash{0%{transform:scale(1.04);background:#ffd6d6}100%{transform:scale(1)}}
.scan-err{background:#fdecec;border:1px solid #d23b3b;border-radius:10px;padding:14px 18px;font-size:15px;color:#b91c1c}
.scan-box{border-top:3px solid var(--pri)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.kpi .v{font-size:26px;font-weight:700}.kpi .l{font-size:12px;color:var(--muted);margin-top:2px}
.kpi.ok .v{color:var(--ok)}.kpi.warn .v{color:var(--warn)}.kpi.pur .v{color:var(--pur)}.kpi.eu .v{color:var(--pri)}

.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.filters{display:flex;gap:6px}
.chip{border:1px solid var(--line);background:var(--card);padding:7px 14px;border-radius:20px;cursor:pointer;color:var(--muted);font-size:13px}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap}

.btn{display:inline-block;border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:8px 14px;border-radius:9px;cursor:pointer;font-size:13px;text-decoration:none;font-weight:500}
.btn:hover{border-color:#c9cedd}
.btn-primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn-primary:hover{background:#2a51c4}
.btn-danger{background:#fff;color:#d23b3b;border-color:#f0c4c4}
.btn-danger:hover{background:#fdecec;border-color:#e88}
.btn-del{color:#d23b3b;border-color:#f0c4c4}
.btn-del:hover{background:#fdecec}
.btn-buy{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-buy:hover{background:#118a5a}
.btn-buy:disabled{background:#cdd2dd;border-color:#cdd2dd;cursor:not-allowed}
.btn-sm{padding:5px 10px;font-size:12px}
.search-inp{padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:13px;min-width:220px}
.search-inp:focus{outline:none;border-color:var(--pri)}
.btn-ghost{background:none;border:0;color:var(--pri);cursor:pointer;font-size:13px}

.table-wrap{overflow-x:auto;padding:0}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#fafbfc;color:var(--muted);font-weight:600;position:sticky;top:0}
td.addr{white-space:normal;max-width:240px;color:var(--muted)}
tr:last-child td{border-bottom:0}

.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;font-weight:600}
.badge.ready{background:var(--ok-soft);color:var(--ok)}
.badge.pending{background:var(--warn-soft);color:var(--warn)}
.badge.purchased{background:var(--pur-soft);color:var(--pur)}
.badge.eu{background:var(--pri-soft);color:var(--pri);margin-left:5px}
.stuck-alert{margin-top:4px;display:inline-block;background:#fdecec;color:#d23b3b;
  font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid #f0c4c4}
.alert-banner{background:#fdecec;border:1px solid #f0c4c4;color:#d23b3b;border-radius:12px;
  padding:12px 16px;margin-bottom:14px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.codes{margin-top:6px;font-size:12px;line-height:1.6}
.codes .ck{color:var(--muted);display:inline-block;min-width:64px}
.codes b{font-family:ui-monospace,Menlo,monospace}

.modal-bg{position:fixed;inset:0;background:rgba(20,22,34,.45);display:flex;align-items:center;justify-content:center;z-index:50}
.modal{position:relative;max-width:440px;width:92%}
.modal-close{position:absolute;top:14px;right:16px;border:0;background:none;font-size:18px;cursor:pointer;color:var(--muted)}
.field{margin:12px 0}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.field input,.field select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.hidden{display:none!important}

.tl-head{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tl-head>div{margin:3px 0}
.timeline{max-height:340px;overflow:auto;padding-left:4px}
.tl-item{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line)}
.tl-item:last-child{border-left-color:transparent}
.tl-dot{position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:#cdd2dd;border:2px solid #fff}
.tl-item.cur .tl-dot{background:var(--ok)}
.tl-content{font-size:13px;font-weight:500}
.tl-item.cur .tl-content{color:var(--ok)}
.tl-meta{font-size:12px;color:var(--muted);margin-top:2px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.2)}

/* ==== Đối chiếu cước ==== */
.stat-kpi{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:14px 16px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.stat-kpi .k-val{font-size:22px;font-weight:700;color:#111}
.stat-kpi .k-lbl{font-size:12px;color:#6b7280;margin-top:4px}
.stat-kpi.bad{border-color:#fca5a5;background:#fef2f2}
.stat-kpi.bad .k-val{color:#dc2626}
.stat-kpi.warn{border-color:#fcd34d;background:#fffbeb}
.stat-kpi.warn .k-val{color:#d97706}
.stat-kpi.good{border-color:#86efac;background:#f0fdf4}
.stat-kpi.good .k-val{color:#16a34a}
.rec-block{margin-bottom:22px}
.rec-h{font-size:15px;margin:0 0 8px;padding:8px 12px;border-radius:8px;background:#f3f4f6;color:#111}
.rec-h.bad{background:#fef2f2;color:#b91c1c;border-left:4px solid #dc2626}
.rec-h.warn{background:#fffbeb;color:#b45309;border-left:4px solid #d97706}
.rec-h.muted{background:#f3f4f6;color:#4b5563;border-left:4px solid #9ca3af}
.rec-cnt{font-weight:600;opacity:.7}