:root{
  --app-bg:#f4f6f8;--panel:#fff;--ink:#1e2733;--muted:#6b7480;--faint:#98a1ad;
  --line:#e6e9ee;--line-strong:#d7dce3;--accent:#12855b;--accent-weak:#e7f5ee;
  --sel:#eaf6f0;--sel-line:#12855b;--danger:#c0392b;--danger-bg:#fdecea;--amber:#d69e2e;--amber-bg:#fff8e6;
  --rownum-bg:#f7f9fb;--head-bg:#f2f5f7;--sidebar:#0f2a22;--sidebar-ink:#c8d6cf;
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--app-bg);color:var(--ink);font-family:"Segoe UI",system-ui,Arial,sans-serif;font-size:13px;display:flex;height:100vh;overflow:hidden}
a{text-decoration:none;color:inherit}

/* Sidebar */
.sidebar{width:214px;flex:0 0 214px;background:var(--sidebar);color:var(--sidebar-ink);display:flex;flex-direction:column;padding:14px 12px}
.brand{display:flex;align-items:center;gap:9px;padding:4px 6px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .logo{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800}
.brand b{color:#fff;font-size:15px}.brand span{display:block;font-size:11px;opacity:.7}
nav{margin-top:12px;display:flex;flex-direction:column;gap:3px}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:8px;color:var(--sidebar-ink);cursor:pointer;font-size:13px}
.navitem .ic{width:17px;text-align:center}
.navitem:hover{background:rgba(255,255,255,.06)}
.navitem.active{background:var(--accent);color:#fff;font-weight:600}
.navitem.soon{opacity:.5;cursor:default}
.navitem .chip{margin-left:auto;font-size:10px;background:rgba(255,255,255,.14);padding:1px 7px;border-radius:20px}
.nav-group{margin-top:14px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.35);padding:0 8px 4px}
.side-foot{margin-top:auto;padding:8px 6px;font-size:12px;color:rgba(255,255,255,.55)}
.side-foot .me{margin-bottom:6px;color:#fff;font-weight:600}
.logout{background:none;border:1px solid rgba(255,255,255,.2);color:var(--sidebar-ink);border-radius:7px;padding:6px 10px;cursor:pointer;font-size:12px;width:100%}
.logout:hover{background:rgba(255,255,255,.08)}

.main{flex:1 1 auto;display:flex;flex-direction:column;min-width:0}
body.bare{display:block;background:linear-gradient(135deg,#0f2a22,#12855b)}
body.bare .main{height:100vh}

/* Login */
.login-wrap{height:100vh;display:grid;place-items:center;padding:20px}
.login-card{width:360px;background:#fff;border-radius:16px;padding:26px 26px 20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.login-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.login-brand .logo{width:38px;height:38px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.login-brand b{font-size:17px}.login-brand span{display:block;color:var(--muted);font-size:12px}
.login-form label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin:10px 0 4px}
.login-form input{width:100%;height:40px;border:1px solid var(--line-strong);border-radius:9px;padding:0 12px;font-size:14px}
.login-form input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.btn-login{width:100%;height:42px;margin-top:16px;border:0;border-radius:9px;background:var(--accent);color:#fff;font-weight:700;font-size:14px;cursor:pointer}
.btn-login:hover{background:#0f7350}
.login-error{color:var(--danger);background:var(--danger-bg);border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:4px}
.login-error:empty{display:none}
.login-foot{margin-top:14px;text-align:center;color:var(--faint);font-size:11.5px}

/* Topbar */
.topbar{height:52px;flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 14px}
.sheettab .name{font-weight:700;font-size:14px}.sheettab .sub{color:var(--muted);font-size:12px}
.savechip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--accent);background:var(--accent-weak);padding:3px 10px;border-radius:20px}
.savechip .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.savechip.saving{color:#b7791f;background:var(--amber-bg)}.savechip.saving .dot{background:var(--amber);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
.spacer{flex:1 1 auto}
.search{position:relative}
.search input{height:34px;width:230px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px 0 30px;font-size:13px;background:#fbfcfd}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.search .mag{position:absolute;left:9px;top:8px;color:var(--faint)}
.btn{height:34px;padding:0 13px;border:1px solid var(--line-strong);background:#fff;border-radius:8px;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.btn:hover{background:#f5f7f9}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn.primary:hover{background:#0f7350}
.btn:disabled{opacity:.55;cursor:default}

/* Filter bar */
.filterbar{flex:0 0 auto;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:8px 14px;flex-wrap:wrap}
.chips{display:inline-flex;gap:6px}
.chip-f{height:32px;padding:0 12px;border:1px solid var(--line-strong);background:#fff;border-radius:20px;cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.chip-f:hover{background:#f5f7f9}
.chip-f.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:600}
.chip-f .cnt{background:#eef1f4;border-radius:12px;padding:0 7px;font-size:11px;color:var(--muted);min-width:18px;text-align:center}
.chip-f .dot{width:8px;height:8px;border-radius:50%}
.fsep{width:1px;height:22px;background:var(--line)}
.fdrop{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.fdrop select{height:32px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;padding:0 8px;font-size:12.5px;color:var(--ink)}
.clearf{margin-left:auto;font-size:12px;color:var(--accent);cursor:pointer;background:none;border:0}

/* Grid */
.gridwrap{flex:1 1 auto;overflow:auto;background:var(--panel)}
table.sheet{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-variant-numeric:tabular-nums;table-layout:fixed}
/* tay kéo giãn cột */
.col-resize{position:absolute;top:0;right:0;width:7px;height:100%;cursor:col-resize;z-index:7}
.col-resize:hover{background:rgba(18,133,91,.28)}
body.col-resizing{cursor:col-resize;user-select:none}
body.col-resizing input,body.col-resizing select{pointer-events:none}
table.sheet th,table.sheet td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;height:32px}
table.sheet thead th{position:sticky;top:0;z-index:5;background:var(--head-bg);color:#43505e;font-weight:600;font-size:11px;letter-spacing:.4px;text-transform:uppercase;text-align:left;padding:0 9px;white-space:nowrap;border-bottom:1px solid var(--line-strong)}
.rownum{position:sticky;left:0;z-index:4;background:var(--rownum-bg);color:var(--faint);text-align:left;padding-left:8px;width:56px;min-width:56px;border-right:1px solid var(--line-strong);font-size:11px}
thead .rownum{z-index:6}
.rownum .st{display:inline-block;width:14px}
.rownum .del{display:none;position:absolute;right:3px;top:50%;transform:translateY(-50%);color:var(--danger);cursor:pointer;font-weight:800;font-size:15px;line-height:1;padding:1px 4px;border-radius:5px}
.rownum .del:hover{background:var(--danger-bg)}
tbody tr:hover .rownum .del{display:inline-block}
tr.st-saved .rownum{color:var(--accent)}tr.st-saved .st{color:var(--accent)}
tr.st-dirty .st{color:var(--amber)}tr.st-error .st{color:var(--danger)}
tbody tr:hover .rownum{background:#eef2f5}
td.cell{position:relative}
td.cell input,td.cell select{width:100%;height:100%;border:0;background:transparent;padding:0 9px;font:inherit;color:inherit;outline:none;appearance:none;-webkit-appearance:none}
td.cell.sel{box-shadow:inset 0 0 0 2px var(--sel-line);background:var(--sel);z-index:2}
td.cell.has-dd::after{content:"▾";position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:10px;pointer-events:none}
td.cell.invalid{background:var(--danger-bg)}td.cell.invalid input{color:var(--danger)}
td.cell.auto{background:#f3f9f6}
td.cell.readonly{background:#f7f9fb;color:var(--muted)}
td.cell.readonly input{color:var(--muted);cursor:default}
td.cell input::placeholder{color:#c3cad2}
.col-date{width:112px}.col-sale{width:110px}.col-name{width:150px}.col-country{width:150px}
.col-continent{width:122px}.col-region{width:150px}.col-email{width:190px}.col-phone{width:140px}
.col-source{width:190px}.col-product{width:160px}.col-note{width:150px}.col-ems{width:74px}.col-creator{width:130px}
.col-code{width:150px}

.statusbar{height:30px;flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 14px;color:var(--muted);font-size:12px}
.statusbar .ref{font-weight:600;color:var(--ink)}
.statusbar .kbd{margin-left:auto;color:var(--faint)}
.statusbar .kbd b{background:#eef1f4;border:1px solid var(--line-strong);border-radius:4px;padding:1px 6px;color:#556;font-weight:600;font-size:11px}

/* Toast thông báo */
.toast-wrap{position:fixed;top:64px;right:18px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{pointer-events:auto;min-width:250px;max-width:380px;background:#fff;border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:10px;box-shadow:0 12px 32px rgba(15,42,34,.18);padding:11px 12px;display:flex;align-items:flex-start;gap:10px;font-size:13px;opacity:0;transform:translateX(14px);transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:none}
.toast .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:12px;flex:0 0 20px;background:var(--accent)}
.toast .msg{flex:1 1 auto;color:var(--ink);line-height:1.35}
.toast .x{cursor:pointer;color:var(--faint);font-size:16px;line-height:1;flex:0 0 auto}
.toast .x:hover{color:var(--ink)}
.toast.error{border-left-color:var(--danger)}
.toast.error .ic{background:var(--danger)}
.toast.success{border-left-color:var(--accent)}
.toast.success .ic{background:var(--accent)}

/* ── Sidebar thu gọn ─────────────────────────── */
.sidebar{transition:width .18s ease, flex-basis .18s ease, padding .18s ease}
.side-toggle{align-self:flex-end;margin:-2px 0 6px;width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--sidebar-ink);cursor:pointer;display:grid;place-items:center;font-size:13px;line-height:1;padding:0}
.side-toggle:hover{background:rgba(255,255,255,.14);color:#fff}
.side-toggle::before{content:'\00AB'}                 /* « */

body.sidebar-collapsed .sidebar{width:58px;flex-basis:58px;padding:14px 8px}
body.sidebar-collapsed .side-toggle{align-self:center}
body.sidebar-collapsed .side-toggle::before{content:'\00BB'}   /* » */
body.sidebar-collapsed .brand{justify-content:center;padding:4px 0 12px}
body.sidebar-collapsed .brand > div:last-child{display:none}  /* ẩn tên + phụ đề */
body.sidebar-collapsed .nav-group{display:none}
body.sidebar-collapsed .navitem{font-size:0;justify-content:center;padding:10px 0;gap:0}
body.sidebar-collapsed .navitem .ic{font-size:16px}
body.sidebar-collapsed .navitem .chip{display:none}
body.sidebar-collapsed .side-foot .me{display:none}
body.sidebar-collapsed .side-foot .logout{font-size:0;padding:8px 0}
body.sidebar-collapsed .side-foot .logout::before{content:'\23FB';font-size:14px}  /* ⏻ */

/* ── Autocomplete ─────────────────────────── */
.ac-pop{position:absolute;z-index:10120;background:#fff;border:1px solid var(--line-strong);border-radius:9px;box-shadow:0 14px 34px rgba(15,42,34,.18);max-height:260px;overflow:auto;padding:4px;min-width:200px}
.ac-item{padding:7px 10px;border-radius:7px;cursor:pointer;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ac-item .lb{font-size:13px;color:var(--ink)}
.ac-item .sub{font-size:11px;color:var(--muted);margin-left:auto}
.ac-item.active,.ac-item:hover{background:var(--accent-weak)}
.ac-item.sel{background:#eef7f2}
.ac-item.sel .lb::before{content:"✓ ";color:var(--accent);font-weight:800}
.ac-empty{padding:8px 10px;color:var(--faint);font-size:12px}

/* chip multi-select (bộ lọc) */
.ms{display:inline-block}
.ms-wrap{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:32px;min-width:200px;max-width:340px;border:1px solid var(--line-strong);border-radius:8px;background:#fff;padding:3px 6px;cursor:text}
.ms-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.ms-chip{display:inline-flex;align-items:center;gap:5px;background:var(--accent-weak);color:var(--accent);border-radius:14px;padding:1px 6px 1px 9px;font-size:12px;font-weight:600}
.ms-chip b{cursor:pointer;font-weight:700;color:#0f7350}
.ms-chip b:hover{color:var(--danger)}
.ms-input{border:0;outline:none;flex:1 1 60px;min-width:60px;height:22px;font-size:12.5px;background:transparent}

/* ── Trạng thái dòng: trùng / bỏ qua ─────────── */
tr.st-dup .st{color:var(--amber)} tr.st-dup .rownum{color:var(--amber)}
tr.st-skip .st{color:var(--faint)}

/* ── Modal (dùng cho popup trùng) ────────────── */
.modal-back{position:fixed;inset:0;background:rgba(15,42,34,.4);display:none;align-items:center;justify-content:center;z-index:10050;padding:14px}
.modal-back.on{display:flex}
.modal{background:#fff;border-radius:14px;width:520px;max-width:94vw;max-height:92vh;overflow:auto;padding:20px;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.modal h3{margin:0 0 6px;font-size:16px}
.dup-sub{color:var(--muted);font-size:13px;margin-bottom:12px}
.dup-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.dup-grid > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.dup-grid .full{grid-column:1 / -1}
.dup-grid span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.dup-grid b{font-size:13px;color:var(--ink);word-break:break-word}
.dup-sale{margin-top:14px}
.dup-sale label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.dup-sale input{width:100%;height:38px;border:1px solid var(--line-strong);border-radius:8px;padding:0 10px;font-size:13px}
.dup-sale input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
.dup-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px}
.btn-sm{height:34px;padding:0 12px;border:1px solid var(--line-strong);background:#fff;border-radius:8px;cursor:pointer;font-size:13px}
.btn-sm:hover{background:#f5f7f9}
.btn-sm.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.btn-sm.primary:hover{background:#0f7350}

/* ── Điện thoại / màn nhỏ ───────────────────── */
@media (max-width: 820px){
  .topbar{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px}
  .topbar .search input{width:150px}
  .filterbar{gap:8px}
  .dup-grid{grid-template-columns:1fr}
  .dup-buttons{justify-content:stretch}
  .dup-buttons .btn-sm{flex:1 1 100%}
  .toast-wrap{left:10px;right:10px;top:auto;bottom:10px}
  .toast{max-width:none}
}