/* =====================================================================
   Trợ lý ERP — UI Ting IQ (navy + teal + gold) · vanilla CSS, không build.
   Theme bằng CSS variables (đổi branding dễ). Light + Dark (tông navy).
   Gốc thiết kế: UI-Design/ ; bổ sung phần chat thật + Trợ lý chủ động.
   ===================================================================== */

/* ---------- THEME TOKENS (đổi branding tại đây) ---------- */
:root{
  --brand:#1F3864; --brand-2:#2E4A7A; --teal:#0F766E; --gold:#C9A227;
  --brand-soft:#E9EEF6; --brand-ink:#1F3864; --teal-soft:#E2F0ED; --gold-soft:#F7EFD6;
  --bg:#EFEEE9; --canvas:#EFEEE9; --surface:#FFFFFF; --surface-2:#E4E2DB; --rail:#EFEEE9;
  --text:#20242C; --text-dim:#6A6F78; --text-mute:#9A9EA6;
  --border:#E6E4DE; --border-strong:#D8D5CC;
  --user-bubble:#E9EEF6; --user-text:#1F3864;
  --ok:#15803D; --ok-soft:#E4F1E9; --ok-border:#C5E3CF;
  --cd-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6'/%3E%3Cpath d='M12 4.5v2.5'/%3E%3Ccircle cx='12' cy='14' r='7.5'/%3E%3Cpath d='M12 10.5V14l2.4 1.6'/%3E%3C/svg%3E");
  --warn:#B45309; --warn-soft:#FBF1DD;
  --err:#B23A2E; --err-soft:#F7E7E4;
  --shadow-card:0 18px 40px -24px rgba(31,56,100,.28),0 2px 6px -2px rgba(31,56,100,.06);
  --rail-text:#20242C; --rail-dim:#6A6F78; --rail-border:#E6E4DE; --rail-hover:#E7E5DE;
  --seam-v:linear-gradient(180deg,transparent,rgba(255,255,255,.95) 16%,rgba(255,255,255,.95) 84%,transparent);
  --seam-h:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  --seam-glow:0 0 7px rgba(255,255,255,.9);
  --radius:14px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
[data-theme="dark"]{
  --brand:#6E97D6; --brand-2:#84A8E0; --teal:#2DA597; --gold:#E0BC4E;
  --brand-soft:#22365C; --brand-ink:#AEC8EE; --teal-soft:#143430; --gold-soft:#2E2716;
  --bg:#101D36; --canvas:#101D36; --surface:#1A2C4C; --surface-2:#22375A; --rail:#101D36;
  --text:#EAEFF7; --text-dim:#A4B2CB; --text-mute:#6E7E9C;
  --border:#2A3F63; --border-strong:#385275;
  --user-bubble:#2A4675; --user-text:#DCE7F7;
  --ok:#4ADE80; --ok-soft:#0F2A1E; --ok-border:#1E4533;
  --warn:#E0BC4E; --warn-soft:#2E2716;
  --err:#F08A7E; --err-soft:#2C1A18;
  --shadow-card:0 24px 50px -26px rgba(0,0,0,.55),0 2px 6px -2px rgba(0,0,0,.4);
  --rail-text:#EAEFF7; --rail-dim:#A4B2CB; --rail-border:#23375A; --rail-hover:#19294A;
  --seam-v:linear-gradient(180deg,transparent,rgba(126,166,228,.5) 14%,rgba(150,184,236,.72) 50%,rgba(126,166,228,.5) 86%,transparent);
  --seam-h:linear-gradient(90deg,transparent,rgba(140,176,232,.62),transparent);
  --seam-glow:0 0 12px rgba(110,151,214,.45);
}

/* ---------- RESET ---------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:hidden}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
/* iOS Safari TỰ ZOOM khi focus input có font-size < 16px → mọi ô nhập ≥16px để KHÔNG zoom/lệch trên mobile. */
input,textarea,select{font-size:16px}
button{font-family:inherit;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}
input::placeholder,textarea::placeholder{color:var(--text-mute)}
.tnum{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* =====================================================================
   LOGIN
   ===================================================================== */
.auth{height:100dvh;width:100%;display:flex;background:var(--bg)}
.auth-panel{width:46%;max-width:560px;flex:none;display:none;flex-direction:column;justify-content:space-between;
  padding:38px 42px;position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(155deg,#284878 0%,#1d3661 52%,#15294b 100%)}
.auth-glow1{position:absolute;top:-120px;right:-100px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,188,78,.16),transparent 70%);pointer-events:none}
.auth-glow2{position:absolute;bottom:-140px;left:-120px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(120,160,230,.18),transparent 70%);pointer-events:none}
.auth-brand{display:flex;align-items:center;gap:12px;position:relative}
.auth-brand .mark{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);display:grid;place-items:center;
  border:1px solid rgba(224,188,78,.5);box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.auth-brand .mark svg{width:20px;height:20px;stroke:#E8C964}
.auth-brand .bn{font-size:17px;font-weight:700;letter-spacing:-.01em}
.auth-brand .bt{font-size:12px;color:#aebdd6;margin-top:1px}
.auth-mid{position:relative}
.auth-kicker{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:#e8eefb;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:999px;margin-bottom:14px}
.auth-kicker .d{width:6px;height:6px;border-radius:50%;background:#34d399}
.auth-mid h1{font-size:27px;line-height:1.2;font-weight:700;letter-spacing:-.022em;margin:0 0 16px;max-width:380px;text-wrap:balance}
.auth-bullets{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.auth-bullet{display:flex;align-items:center;gap:12px}
.auth-bullet .c{width:23px;height:23px;border-radius:50%;background:rgba(224,188,78,.18);display:grid;place-items:center;flex:none}
.auth-bullet .c svg{width:13px;height:13px;stroke:#E8C964}
.auth-bullet span{font-size:14px;color:#d7e0ef;line-height:1.4}
.auth-preview{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:16px;padding:14px;
  backdrop-filter:blur(8px);max-width:340px;box-shadow:0 26px 60px -26px rgba(0,0,0,.6)}
.auth-preview .pv-top{display:flex;gap:9px;align-items:flex-start;margin-bottom:11px}
.auth-preview .pv-ava{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none;border:1px solid rgba(224,188,78,.4)}
.auth-preview .pv-ava svg{width:13px;height:13px;stroke:#E8C964}
.auth-preview .pv-name{font-size:11px;color:#aebdd6;margin-bottom:2px}
.auth-preview .pv-msg{font-size:12.5px;color:#eaf0fb;line-height:1.4}
.auth-preview .pv-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 13px}
.auth-preview .pv-line{display:flex;justify-content:space-between;font-size:12.5px;color:#cdd8ec;margin-bottom:8px}
.auth-preview .pv-total{display:flex;justify-content:space-between;align-items:center;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}
.auth-preview .pv-total .k{font-size:11px;color:#aebdd6;font-weight:600;letter-spacing:.04em}
.auth-preview .pv-total .v{font-size:16px;font-weight:700;color:#E8C964}
.auth-trust{font-size:12px;color:#9fb0cc;display:flex;align-items:center;gap:8px;position:relative}
.auth-trust svg{width:14px;height:14px}

.auth-form{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px;overflow-y:auto;position:relative}
.auth-tools{position:absolute;top:20px;right:22px;display:flex;gap:8px}
.auth-card{width:100%;max-width:368px}
.auth-mobilebrand{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.auth-mobilebrand .mark{width:40px;height:40px;border-radius:11px;background:var(--brand);display:grid;place-items:center;flex:none}
.auth-mobilebrand .mark svg{width:20px;height:20px;stroke:var(--gold)}
.auth-mobilebrand .bn{font-size:17px;font-weight:700;color:var(--brand-ink);letter-spacing:-.01em}
.auth-mobilebrand .bt{font-size:12px;color:var(--text-dim)}
.auth-card h2{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin:0 0 7px}
.auth-card .sub{font-size:14px;color:var(--text-dim);line-height:1.5;margin:0 0 26px}
.fld-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:7px}
.fld{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--border-strong);border-radius:11px;padding:0 14px;height:48px;margin-bottom:16px;transition:border-color .15s}
.fld:focus-within{border-color:var(--brand)}
.fld svg{width:18px;height:18px;flex:none;stroke:var(--text-mute)}
.fld input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-family:inherit;font-size:16px;height:100%}
.fld .eye{border:none;background:transparent;color:var(--text-mute);cursor:pointer;display:flex;padding:4px}
.fld .eye svg{width:18px;height:18px}
.fld.pwd{margin-bottom:14px}
.auth-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.remember{display:flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;font-family:inherit;padding:0}
.remember .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border-strong);background:transparent;display:grid;place-items:center;transition:.15s}
.remember .box svg{width:12px;height:12px;stroke:#fff;opacity:0}
.remember.on .box{background:var(--brand);border-color:var(--brand)}
.remember.on .box svg{opacity:1}
.remember span{font-size:13px;color:var(--text-dim)}
.btn-login{width:100%;border:none;background:var(--brand);color:#fff;font-family:inherit;font-weight:600;font-size:15px;padding:14px;border-radius:11px;cursor:pointer;
  box-shadow:0 8px 20px -8px rgba(31,56,100,.5);display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s}
.btn-login:hover{filter:brightness(1.06)}
.btn-login svg{width:17px;height:17px}
.login-err{display:block;margin-top:14px;text-align:center;color:var(--err);font-size:13px;font-weight:600}
/* Chân form auth: dòng gợi ý + link chữ (đăng ký / gia hạn) — đồng nhất, tinh tế */
.auth-foot{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:18px;font-size:13px;color:var(--text-dim)}
.auth-foot-sep{margin-top:14px;padding-top:16px;border-top:1px solid var(--border)}
.link{border:none;background:none;padding:2px;margin:0;font-family:inherit;font-size:13px;font-weight:600;color:var(--brand-ink);cursor:pointer;border-radius:6px;transition:color .15s}
.link:hover{color:var(--brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* Màn gia hạn dùng .reg nhưng h2/sub nằm trực tiếp (không trong .reg-step) → style tương đương */
.reg>h2{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0 0 6px}
.reg>.sub{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin:0 0 24px}
/* Khi vào subdomain tenant: hiện tên cửa hàng thay ô "Mã cửa hàng" */
.tenant-ctx{display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:11px 13px;border-radius:11px;background:var(--brand-soft);color:var(--brand-ink);font-size:13.5px}
.tenant-ctx svg{width:16px;height:16px;flex:none;stroke:currentColor}
.tenant-ctx b{font-weight:700}
/* Popup GIA HẠN (tenant hết hạn) — overlay giữa màn, khoá thao tác nền, đồng bộ design-system */
.renew-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(16,29,54,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:renew-fade .2s ease}
.renew-modal[hidden]{display:none}
.renew-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:34px 30px 26px;box-shadow:0 30px 80px -20px rgba(16,29,54,.5);text-align:center;animation:renew-rise .25s ease both}
.renew-ic{width:60px;height:60px;margin:0 auto 18px;border-radius:16px;display:grid;place-items:center;
  color:var(--gold);background:var(--gold-soft);border:1px solid rgba(201,162,39,.3)}
.renew-ic svg{width:30px;height:30px}
.renew-card h2{font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0 0 9px}
.renew-sub{font-size:14px;color:var(--text-dim);line-height:1.55;margin:0 0 22px}
.renew-card .fld{margin-bottom:14px}
.renew-modal-foot{margin-top:16px;padding-top:15px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-mute);line-height:1.55}
.renew-modal-foot .link{font-size:12.5px;margin-top:6px;display:inline-block}
.renew-card{position:relative}
.renew-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;background:transparent;border-radius:9px;
  color:var(--text-mute);cursor:pointer;display:grid;place-items:center;transition:.15s}
.renew-x:hover{background:var(--rail-hover);color:var(--text)}
.renew-x svg{width:18px;height:18px}
#renewModalForm[hidden]{display:none}
/* Congrats (vĩnh viễn) — theme VÀNG quý tộc + vương miện */
.renew-congrats{border-color:rgba(201,162,39,.45);
  background:linear-gradient(180deg,var(--gold-soft) 0%,var(--surface) 42%);
  box-shadow:0 30px 80px -20px rgba(201,162,39,.4)}
.renew-congrats .renew-ic{color:#6B4E0A;border:none;
  background:linear-gradient(135deg,#FBF0C4 0%,#E9C158 52%,#C9992A 100%);
  box-shadow:0 6px 18px -6px rgba(201,162,39,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.renew-congrats h2{background:linear-gradient(90deg,#C9992A,#9A7315);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes renew-fade{from{opacity:0}to{opacity:1}}
@keyframes renew-rise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* =====================================================================
   APP SHELL
   ===================================================================== */
.app{height:100dvh;width:100%;display:flex}

/* Sidebar */
.sidebar{width:262px;flex:none;background:var(--rail);color:var(--rail-text);display:none;flex-direction:column;
  padding:14px 12px;position:relative}
.sidebar::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:var(--seam-v);box-shadow:var(--seam-glow);pointer-events:none}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.sb-brand .mark{width:34px;height:34px;border-radius:9px;background:var(--brand);display:grid;place-items:center;flex:none}
.sb-brand .mark svg{width:18px;height:18px;stroke:var(--gold)}
.sb-brand .bn{font-size:15px;font-weight:700;color:var(--brand-ink);letter-spacing:-.01em;line-height:1.1}
.sb-brand .bt{font-size:11px;color:var(--rail-dim);margin-top:1px}
.new-btn{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;margin-bottom:14px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:10px;font-size:13.5px;font-weight:500;color:var(--brand-ink)}
.new-btn:hover{border-color:var(--brand);color:var(--brand)}
.new-btn svg{width:16px;height:16px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:500;
  color:var(--rail-dim);border:none;background:none;text-align:left;width:100%}
.nav-item svg{width:18px;height:18px;flex:none}
.nav-item:hover{background:var(--rail-hover);color:var(--rail-text)}
.nav-item.active{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.nav-item .badge{margin-left:auto;background:var(--gold);color:#3a2c00;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}
.sb-label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-mute);padding:18px 11px 7px}
.recent{display:flex;flex-direction:column;gap:1px;max-height:30vh;overflow-y:auto}
.recent:empty::after{content:attr(data-empty);font-size:12px;color:var(--text-mute);padding:2px 11px}
.recent-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 11px;border-radius:8px;border:none;background:none;width:100%;text-align:left}
.recent-item:hover{background:var(--rail-hover)}
.recent-item .code{font-family:var(--mono);font-size:12px;color:var(--brand-ink);font-weight:500;white-space:nowrap}
.recent-item .amt{font-size:11px;color:var(--rail-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-spacer{flex:1}
.sb-foot{padding-top:12px;border-top:1px solid var(--rail-border)}
.sb-foot .row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.btn-theme{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);font-size:12.5px;font-weight:600}
.btn-theme .theme-ic{display:flex}
.lang{display:flex;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;font-size:12px;font-weight:700;height:38px}
.lang button{border:none;padding:0 12px;background:transparent;color:var(--text-mute)}
.lang button.on{background:var(--brand);color:#fff}
.logout-chip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:9px;border:none;background:transparent;text-align:left}
.logout-chip:hover{background:var(--rail-hover)}
.logout-chip .ava{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.logout-chip .n{font-size:13px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-chip .p{font-size:11px;color:var(--rail-dim)}
.logout-chip svg{width:16px;height:16px;stroke:var(--text-mute);margin-left:auto;flex:none}
/* Hồ sơ: div (không clickable) + nút icon đăng xuất riêng + dòng thời hạn sử dụng */
.user-chip{cursor:default;flex-direction:column;align-items:stretch;gap:9px;padding:10px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.user-chip:hover{background:var(--surface)}
.user-row{display:flex;align-items:center;gap:10px;width:100%}
.user-row .n{flex:1;min-width:0}
#shopName[role=button]{cursor:pointer}
#shopName[role=button]:hover{text-decoration:underline;text-underline-offset:2px}
#shopName[role=button]:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.logout-ic{flex:none;margin-left:auto;border:none;background:transparent;padding:6px;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:var(--text-mute);transition:.15s}
.logout-ic:hover{color:var(--err);background:var(--err-soft)}
.logout-ic svg{width:17px;height:17px;stroke:currentColor;margin:0}
/* Chip thời hạn: chấm màu + NGÀY hết hạn + số ngày còn lại (không dùng tooltip) */
.exp-chip{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:6px 11px;border-radius:10px;font-size:11.5px;line-height:1.5;border:1px solid transparent;cursor:pointer;transition:filter .15s,box-shadow .15s,transform .1s}
.exp-chip:hover{filter:brightness(.97)}
.exp-chip:active{transform:scale(.99)}
.exp-chip.exp-unlim:hover{filter:brightness(1.03)}
.exp-chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.exp-chip .ex-l{display:inline-flex;align-items:center;gap:6px;font-weight:600;opacity:.9;flex:none}
.exp-chip .ex-v{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exp-chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.exp-chip svg{width:14px;height:14px;flex:none;margin:0}
.exp-chip.exp-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border)}
.exp-chip.exp-soon{background:var(--warn-soft);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}
.exp-chip.exp-warn{background:var(--err-soft);color:var(--err);border-color:color-mix(in srgb,var(--err) 30%,transparent)}
/* Unlimited — badge vàng "quý tộc" + vương miện */
.exp-chip.exp-unlim{color:#5A420C;font-weight:700;letter-spacing:.01em;border-color:rgba(150,110,20,.5);background:linear-gradient(135deg,#FBF0C4 0%,#E9C158 52%,#C9992A 100%);box-shadow:0 3px 10px -3px rgba(201,162,39,.55),inset 0 1px 0 rgba(255,255,255,.45)}
.exp-chip.exp-unlim svg{color:#6B4E0A}
/* Modal đổi mật khẩu: nhãn canh trái (khung renew-card mặc định căn giữa) */
#pwModal .fld-label{display:block;text-align:left;margin-top:10px}
#pwModal .fld-label:first-of-type{margin-top:2px}

/* Main */
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--canvas)}
.view{flex:1;min-height:0;display:flex;flex-direction:column}

/* Mobile header */
.mhead{display:flex;flex-direction:column;flex:none;background:transparent;position:relative}
.mhead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--seam-h);box-shadow:var(--seam-glow);pointer-events:none}
.mhead-row{display:flex;align-items:center;gap:11px;padding:13px 16px}
.mhead .mark{width:36px;height:36px;border-radius:10px;background:var(--brand);display:grid;place-items:center;flex:none}
.mhead .mark svg{width:18px;height:18px;stroke:var(--gold)}
.mhead .bn{font-size:15px;font-weight:700;color:var(--brand-ink);line-height:1.1;letter-spacing:-.01em}
.mhead .st{display:flex;align-items:center;gap:6px;margin-top:2px}
.mhead .st span:last-child{font-size:11.5px;color:var(--text-dim)}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);display:grid;place-items:center;flex:none}
.icon-btn svg{width:18px;height:18px}
#mNavBtn{display:flex}
.dot{width:7px;height:7px;border-radius:50%;background:var(--text-mute);flex:none}
.dot.online{background:var(--ok);animation:breathe 2.4s ease-in-out infinite}
.dot.offline{background:var(--err)}

/* Desktop topbar */
.topbar{display:none;align-items:center;gap:12px;padding:13px 28px;background:var(--canvas);flex:none;position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--seam-h);box-shadow:var(--seam-glow);pointer-events:none}
.topbar .ava{width:30px;height:30px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.topbar .nm{font-size:15px;font-weight:600;color:var(--text);letter-spacing:-.01em}
.topbar .st{display:flex;align-items:center;gap:6px;margin-top:1px}
.topbar .st span:last-child{font-size:12px;color:var(--text-dim)}
.btn-ghost{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);font-size:12.5px;font-weight:600}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn-ghost svg{width:16px;height:16px}

/* Conversation */
.scroll{flex:1;overflow-y:auto;overflow-x:hidden}
.scroll::-webkit-scrollbar{width:8px}
.scroll::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
.convo{max-width:760px;margin:0 auto;padding:24px 16px 28px;display:flex;flex-direction:column;gap:16px}

/* Welcome */
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;padding:46px 8px 12px}
.welcome .mark{width:58px;height:58px;border-radius:17px;background:var(--brand);display:grid;place-items:center;box-shadow:0 16px 34px -16px rgba(31,56,100,.45);margin-bottom:24px}
.welcome .mark svg{width:28px;height:28px;stroke:var(--gold)}
.welcome h2{font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.025em;margin:0 0 9px}
.welcome p{font-size:14.5px;line-height:1.62;color:var(--text-dim);max-width:392px;margin:0 0 26px;text-wrap:pretty}
.welcome-chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;max-width:476px}
.wchip{border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13.5px;font-weight:500;padding:10px 16px;border-radius:12px;box-shadow:0 1px 2px rgba(16,29,54,.04);transition:transform .15s}
.wchip:hover{border-color:var(--border-strong);transform:translateY(-1px)}
.modes{display:flex;align-items:center;gap:16px;margin-top:32px;color:var(--text-mute);flex-wrap:wrap;justify-content:center}
.mode{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:500}
.mode svg{width:15px;height:15px}

/* Messages */
.msg{display:flex;gap:11px;align-items:flex-start}
.msg.user{justify-content:flex-end}
.avatar{width:30px;height:30px;border-radius:8px;background:var(--brand);display:grid;place-items:center;flex:none;margin-top:2px}
.avatar svg{width:15px;height:15px;stroke:var(--gold)}
.bot-col{max-width:90%;min-width:0}
.ai-name{font-size:12px;color:var(--text-dim);font-weight:500;margin-bottom:4px}
.bubble{font-size:14px;line-height:1.55;max-width:100%;word-wrap:break-word;overflow-wrap:anywhere}
.bubble.user{max-width:80%;background:var(--user-bubble);color:var(--user-text);padding:11px 15px;border-radius:14px 14px 4px 14px;font-weight:500;white-space:pre-wrap}
.bubble.bot{color:var(--text)}
.bubble.err{background:var(--err-soft);color:var(--err);padding:11px 15px;border-radius:14px;border:1px solid var(--err)}
.bubble img{max-width:200px;border-radius:10px;display:block;margin-bottom:6px}
.bubble .cap{font-size:12px;color:var(--text-dim)}

/* Markdown (renderMd) */
.bubble.md>div{margin:0}
.bubble.md .md-sp{height:7px}
.bubble.md .md-h{font-weight:700;color:var(--text);margin:8px 0 2px}
.bubble.md strong{font-weight:600;color:var(--text)}
.bubble.md em{font-style:italic}
.bubble.md ul,.bubble.md ol{margin:5px 0;padding-left:20px}
.bubble.md li{margin:3px 0}
.bubble.md code,.bubble code{font-family:var(--mono);font-size:.86em;background:var(--teal-soft);color:var(--teal);padding:2px 7px;border-radius:6px;font-weight:600}
.bubble .doc{font-family:var(--mono);font-weight:600;font-size:.9em;background:var(--gold-soft);color:#8a6d12;border:1px solid var(--border-strong);border-radius:6px;padding:1px 7px}
[data-theme="dark"] .bubble .doc{color:var(--gold)}
.bubble.md .md-tbl{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0 2px}
.bubble.md .md-tbl th{text-align:left;padding:7px 10px;color:var(--text-mute);font-weight:600;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--border-strong)}
.bubble.md .md-tbl td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);color:var(--text);font-weight:600}
.bubble.md .md-tbl th.is-num,.bubble.md .md-tbl td.is-num{text-align:right;font-variant-numeric:tabular-nums}
.bubble.md .md-tbl th.is-text,.bubble.md .md-tbl td.is-text{text-align:left}
.bubble.md .md-tbl td:first-child{font-weight:400}

@media (max-width:640px){
  .bubble.md .md-tbl.is-wide{display:block}
  .bubble.md .md-tbl.is-wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .bubble.md .md-tbl.is-wide tbody,.bubble.md .md-tbl.is-wide tr{display:block}
  .bubble.md .md-tbl.is-wide tr{border:0.5px solid var(--border);border-radius:12px;padding:8px 12px;margin:8px 0;background:var(--surface)}
  .bubble.md .md-tbl.is-wide td{display:flex;justify-content:space-between;gap:12px;border:none;padding:4px 0;text-align:right}
  .bubble.md .md-tbl.is-wide td::before{content:attr(data-label);color:var(--text-mute);font-weight:500;text-align:left;flex:0 0 auto}
  .bubble.md .md-tbl.is-wide td:first-child{font-weight:600;font-size:14px;padding-bottom:6px;margin-bottom:4px;border-bottom:0.5px solid var(--border)}
  .bubble.md .md-tbl.is-wide td:first-child::before{content:none}
}

/* Khung GỢI Ý ƯU ĐÃI (upsell) — tách biệt, tông vàng ấm theo theme */
.upsell{margin:10px 0 1px;border:1px solid var(--gold);border-left:4px solid var(--gold);border-radius:12px;
  background:var(--gold-soft);padding:10px 14px}
.upsell-h{display:flex;align-items:center;gap:6px;font-weight:700;color:#8a6d12;font-size:13px;margin-bottom:4px}
[data-theme="dark"] .upsell-h{color:var(--gold)}
.upsell ul{margin:2px 0 0;padding-left:18px;list-style:none}
.upsell li{position:relative;margin:5px 0;font-size:13.5px;line-height:1.5;color:var(--text)}
.upsell li::before{content:"•";position:absolute;left:-13px;color:var(--gold);font-weight:700}
.upsell li strong{color:#8a6d12;font-weight:700}
[data-theme="dark"] .upsell li strong{color:var(--gold)}

/* Typing */
.typing{display:inline-flex;align-items:center;gap:10px;background:var(--surface);padding:12px 15px;border-radius:14px;border:1px solid var(--border)}
.typing .dots{display:flex;gap:4px}
.typing .dots i{width:7px;height:7px;border-radius:50%;background:var(--text-mute);animation:dots 1.2s infinite}
.typing .dots i:nth-child(2){animation-delay:.18s}
.typing .dots i:nth-child(3){animation-delay:.36s}
.typing .lbl{font-size:12.5px;color:var(--text-dim);font-weight:500}

/* Composer */
.composer{flex:none;background:var(--canvas);position:relative}
.composer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--seam-h);box-shadow:var(--seam-glow);pointer-events:none;z-index:1}
.composer-in{max-width:800px;margin:0 auto;padding:11px 16px 15px}
.quick{display:flex;gap:8px;margin-bottom:10px;overflow-x:auto;padding-bottom:1px}
.quick button{flex:none;font-size:12.5px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);padding:6px 14px;border-radius:999px;font-weight:500;box-shadow:0 1px 2px rgba(16,29,54,.04);white-space:nowrap}
.quick button:hover{border-color:var(--border-strong);color:var(--text)}
.input-row{display:flex;align-items:flex-end;gap:9px;background:var(--surface);border:1px solid var(--border-strong);border-radius:15px;padding:6px 6px 6px 8px;box-shadow:0 1px 2px rgba(16,29,54,.04),0 6px 16px -12px rgba(16,29,54,.18);transition:border-color .15s}
.input-row:focus-within{border-color:var(--brand)}
.io-btn{width:38px;height:38px;border-radius:10px;border:none;background:transparent;color:var(--text-dim);display:grid;place-items:center;flex:none}
.io-btn:hover{background:var(--surface-2);color:var(--brand)}
.io-btn svg{width:20px;height:20px}
.io-btn.rec{background:var(--err);color:#fff;animation:micpulse 1.4s ease-out infinite}
.input-row textarea{flex:1;border:none;outline:none;resize:none;background:transparent;color:var(--text);font-family:inherit;font-size:16px;line-height:1.45;padding:9px 0;max-height:120px;align-self:center}
.send{width:42px;height:42px;border-radius:11px;border:none;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 4px 12px -6px rgba(31,56,100,.5);transition:filter .15s}
.send:hover{filter:brightness(1.08)}
.send:disabled{opacity:.5}
.send svg{width:19px;height:19px}
.composer-hint{text-align:center;margin-top:9px;font-size:11px;color:var(--text-mute)}

/* Toggle "Trợ lý mới (beta)" — opt-in, mặc định TẮT */
.beta-row{display:flex;justify-content:center;margin-bottom:8px}
.beta-toggle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);
  color:var(--text-dim);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;transition:border-color .15s,color .15s}
.beta-toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--text-mute);flex:none;transition:background .15s}
.beta-toggle:hover{border-color:var(--border-strong)}
.beta-toggle.on{border-color:var(--gold);color:var(--brand-ink)}
.beta-toggle.on .beta-toggle-dot{background:var(--gold)}

/* Thẻ xác nhận có cấu trúc (card v2 — /v1/chat2) */
/* Thẻ báo cáo / danh mục (QC-UI beautify) — card polish + summary hero + dòng breakdown sạch */
.report-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:13px 16px;margin:6px 0;max-width:100%;box-shadow:var(--shadow-card)}
.rc-title{font-weight:700;font-size:15px;color:var(--brand-ink);letter-spacing:-.01em}
.rc-period{display:inline-block;font-size:11.5px;color:var(--text-dim);margin:3px 0 8px;
  background:var(--surface-2);border-radius:7px;padding:2px 9px}
.rc-summary{font-weight:700;font-size:16px;color:var(--brand-ink);margin:2px 0 8px;
  font-variant-numeric:tabular-nums;padding-bottom:8px;border-bottom:1px solid var(--border)}
.rc-line{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text);
  padding:6px 0;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.rc-line:last-child{border-bottom:none}
.rc-k{color:var(--text-dim)}
.rc-v{font-weight:600;color:var(--text);text-align:right;white-space:nowrap}
.confirm-card{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);
  padding:0;max-width:100%;overflow:hidden;box-shadow:var(--shadow-card)}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:13px 16px;background:linear-gradient(180deg,var(--brand-soft),transparent);border-bottom:1px solid var(--border)}
.cc-title{font-weight:700;font-size:15px;color:var(--brand-ink);letter-spacing:-.01em}
.beta-badge{font-size:11px;font-weight:700;color:#8a6d12;background:var(--gold-soft);border:1px solid var(--gold);
  border-radius:999px;padding:3px 11px}
[data-theme="dark"] .beta-badge{color:var(--gold)}
.cc-partner-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 0}
.cc-partner{font-size:13.5px;font-weight:600;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Chip bảng giá NỔI BẬT (canh phải, cùng dòng tên khách) */
.cc-pl-chip{display:inline-flex;align-items:center;flex:0 0 auto;max-width:60%;gap:2px;
  padding:3px 10px;border-radius:999px;font-size:11.5px;line-height:1.5;
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.cc-pl-chip .cc-pl-k{color:var(--brand-ink);font-weight:600}
.cc-pl-chip .cc-pl-v{color:var(--brand);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-pl-chip.cc-pl-chip-override{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.cc-pl-chip.cc-pl-chip-override .cc-pl-k,.cc-pl-chip.cc-pl-chip-override .cc-pl-v{color:var(--warn)}
.cc-table-wrap{margin:10px 14px;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.cc-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
.cc-table th{text-align:left;color:var(--text-mute);font-weight:700;font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;background:var(--surface-2);padding:8px 12px;border-bottom:1px solid var(--border-strong)}
.cc-table th:nth-child(n+3),.cc-table td:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text)}
.cc-table tbody tr:last-child td{border-bottom:none}
.cc-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.cc-summary{font-weight:700;font-size:15px;color:var(--brand-ink);padding:2px 16px 0;font-variant-numeric:tabular-nums}
/* Tóm tắt tiền — căn PHẢI kiểu hoá đơn, cân đối với cột THÀNH TIỀN của bảng */
.cc-sum{margin:12px 16px 0 auto;max-width:300px;font-variant-numeric:tabular-nums}
.cc-sum-row{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:13px;line-height:1.3}
.cc-sum-k{color:var(--text-mute)}
.cc-sum-v{font-weight:600;color:var(--text-dim);white-space:nowrap}
.cc-sum-total{margin-top:3px;padding-top:9px;border-top:1.5px solid var(--border-strong)}
.cc-sum-total .cc-sum-k{color:var(--brand-ink);font-weight:700;font-size:14px}
.cc-sum-total .cc-sum-v{color:var(--brand);font-weight:800;font-size:16.5px}
/* A5: chip bảng giá đang áp dụng — nằm sau khối cc-sum, trước footer thanh toán */
.cc-pl-tag{color:var(--warn);font-weight:700}
.cc-pl-note{color:var(--text-mute);font-style:italic;font-weight:500}
/* Footer cân đối: thanh toán bên TRÁI · hết hạn/đếm ngược bên PHẢI */
.cc-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  margin:13px 16px 0;padding-top:11px;border-top:1px solid var(--border)}
.cc-foot-left{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.cc-foot-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.cc-pay-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;min-width:0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  padding:4px 11px;font-size:12px;color:var(--text-dim)}
.cc-pay-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cc-pay-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.cc-pay-dot.bank{background:var(--brand)} .cc-pay-dot.credit{background:var(--warn)}
.cc-warnings{margin:8px 0 0;padding:0 16px 0 34px;color:var(--warn)}
.cc-warnings li{font-size:12.5px;margin:3px 0}
.cc-warnings li.cc-warn-dup{font-weight:700;list-style:none;margin-left:-18px;
  padding:6px 8px;border-radius:8px;border:1px solid var(--warn);background:var(--warn-soft)}
/* Chip Hết hạn + ĐẾM NGƯỢC (1 pill trên header): vòng tròn KHUYẾT DẦN (conic theo --pct) + đồng hồ
   ở tâm; MÀU ĐÈN GIAO THÔNG (xanh: còn nhiều · amber: sắp hết <60s · đỏ: hết) — sinh động, dễ nhận biết. */
.cc-head-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:0 0 auto}
.cc-cd-wrap{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;border-radius:999px;
  padding:3px 10px 3px 7px;background:var(--ok-soft);border:1px solid var(--ok-border);
  --cd-c:var(--ok); --cd-bg:var(--ok-soft); --cd-track:color-mix(in srgb,var(--ok) 20%,transparent)}
.cc-cd-ring{position:relative;width:18px;height:18px;flex:0 0 auto;border-radius:50%;
  background:conic-gradient(var(--cd-c) calc(var(--pct,100)*1%), var(--cd-track) 0)}
.cc-cd-ring::before{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--cd-bg)}
.cc-cd-ring::after{content:"";position:absolute;inset:4.5px;background-color:var(--cd-c);
  -webkit-mask:var(--cd-clock) center/contain no-repeat;mask:var(--cd-clock) center/contain no-repeat}
.cc-countdown{display:inline-flex;align-items:center;font-weight:800;font-size:11.5px;
  color:var(--cd-c);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.cc-exp-abs{font-size:10.5px;color:var(--text-mute);padding-left:7px;border-left:1px solid var(--border)}
.cc-cd-wrap.exp-soon{background:var(--warn-soft);border-color:var(--warn);
  --cd-c:var(--warn); --cd-bg:var(--warn-soft); --cd-track:color-mix(in srgb,var(--warn) 22%,transparent)}
.cc-cd-wrap.exp-soon .cc-cd-ring{animation:cd-pulse 1.1s ease-in-out infinite}
.cc-cd-wrap.exp-over{background:var(--err-soft);border-color:var(--err);
  --cd-c:var(--err); --cd-bg:var(--err-soft); --cd-track:color-mix(in srgb,var(--err) 22%,transparent)}
@keyframes cd-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.cc-actions{display:flex;gap:8px;padding:12px 16px 14px;flex-wrap:wrap}
/* Số dư đầu kỳ (D5): ô nhập kho trên bảng chọn hạng mục của file .xlsx */
.cc-opening-wh{width:100%;margin-top:6px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text);
  font-size:13px;font-weight:400}
.cc-btn{flex:1;padding:10px 10px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-2);
  color:var(--text);font-weight:600;font-size:13px;cursor:pointer;transition:filter .12s,background .12s}
.cc-btn:hover:not(:disabled){filter:brightness(.98)}
.cc-btn:disabled{opacity:.55;cursor:default}
.cc-btn-confirm{background:var(--brand);color:#fff;border-color:var(--brand)}
.cc-btn-cancel{background:var(--surface);}
/* Task 5 Pha A — Kiểu C (ripple): nháy ĐÚNG nút Hủy/Xác nhận trên ĐÚNG đơn khi engine nhắc bấm nút.
   Vầng sáng LAN RA rồi tan (2 lần) qua ::after — không đổi layout, tinh tế; amber cho Hủy, brand cho
   Xác nhận. Nút phải position:relative để ::after phủ đúng. */
.cc-btn-blink{position:relative}
.cc-btn-blink::after{content:"";position:absolute;inset:-2px;border-radius:12px;pointer-events:none;
  animation:cc-ripple-warn 1.1s ease-out 2}
.cc-btn-confirm.cc-btn-blink::after{animation-name:cc-ripple-brand}
@keyframes cc-ripple-warn{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--warn) 45%,transparent)}
  100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--warn) 0%,transparent)}
}
@keyframes cc-ripple-brand{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}
  100%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 0%,transparent)}
}
@media (prefers-reduced-motion:reduce){.cc-btn-blink::after{animation:none;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 40%,transparent)}
  .cc-btn-confirm.cc-btn-blink::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 40%,transparent)}}
/* Vấn đề #1: thẻ cũ/đã hủy/đã ghi sổ — vô hiệu toàn thẻ (mờ) + nhãn lý do. */
.confirm-card.cc-disabled{opacity:.55;filter:grayscale(.3);pointer-events:none}
.cc-stale-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px;white-space:nowrap;
  background:var(--warn-soft);color:var(--warn)}
.cc-result{margin:0 16px 14px;font-size:12.5px;font-weight:600;color:var(--ok);
  background:var(--ok-soft);border:1px solid var(--ok-border);border-radius:9px;padding:9px 12px}
.cc-result.err{color:var(--err);background:var(--err-soft);border-color:var(--err)}
@media (max-width:560px){.cc-actions{flex-direction:column}}

/* ==== Thẻ tra cứu chứng từ (QC #4 redesign) — header + lưới key-value + bảng ==== */
.doc-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);
  padding:0;margin:6px 0;max-width:100%;overflow:hidden;box-shadow:var(--shadow-card)}
.dc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px 16px;background:linear-gradient(180deg,var(--brand-soft),transparent);
  border-bottom:1px solid var(--border)}
.dc-title-wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.dc-title{font-weight:700;font-size:15px;color:var(--brand-ink);letter-spacing:-.01em}
.dc-code{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--brand-ink);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:7px;padding:2px 8px;white-space:nowrap}
.dc-pill{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 11px;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.dc-pill-ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-border)}
.dc-pill-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn)}
.dc-pill-err{background:var(--err-soft);color:var(--err);border-color:var(--err)}
.dc-pill-muted{background:var(--surface-2);color:var(--text-dim);border-color:var(--border-strong)}
.dc-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:10px 16px 4px}
.dc-field{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--border);min-width:0}
.dc-field-label{font-size:12.5px;color:var(--text-dim);white-space:nowrap}
.dc-field-value{font-size:13px;color:var(--text);font-weight:500;text-align:right;
  overflow-wrap:anywhere}
.dc-money{color:var(--brand-ink);font-weight:700;font-variant-numeric:tabular-nums}
.dc-table-wrap{margin:10px 14px 14px;border:1px solid var(--border);border-radius:10px;
  overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dc-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:360px}
.dc-table thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-mute);background:var(--surface-2);
  padding:8px 12px;border-bottom:1px solid var(--border-strong)}
.dc-table td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.dc-table tbody tr:last-child td{border-bottom:none}
.dc-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--brand-soft) 45%,transparent)}
.dc-table .dc-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc-table .dc-code-cell{font-family:var(--mono);font-size:11.5px;color:var(--text-dim);white-space:nowrap}
@media (max-width:560px){.dc-fields{grid-template-columns:1fr;gap:0}}

/* Voice overlay */
.voice{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -16px 40px -20px rgba(31,56,100,.3);border-radius:18px 18px 0 0;animation:sheetUp .26s ease both;z-index:5}
.voice-in{max-width:800px;margin:0 auto;padding:20px 20px 18px}
.voice-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.voice-head .rec{width:9px;height:9px;border-radius:50%;background:var(--err);animation:breathe 1.3s ease-in-out infinite}
.voice-head .t{font-size:13.5px;font-weight:600;color:var(--text)}
.voice-head .sp{flex:1}
.voice-cancel{border:none;background:transparent;color:var(--text-mute);font-size:13px;font-weight:600}
.transcript{min-height:46px;font-size:16px;line-height:1.5;color:var(--text);font-weight:500;margin-bottom:18px;text-wrap:pretty}
.transcript .ph{color:var(--text-mute);font-weight:400}
.caret{display:inline-block;width:2px;height:18px;background:var(--brand);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
.voice-bottom{display:flex;align-items:center;gap:16px}
.wave{flex:1;display:flex;align-items:center;gap:3px;height:38px}
.wave i{flex:1;height:100%;background:linear-gradient(180deg,var(--brand-2),var(--brand));border-radius:3px;transform-origin:center;animation:wave .9s ease-in-out infinite}
.voice-stop{width:60px;height:60px;border-radius:50%;border:none;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none;animation:micpulse 1.6s ease-out infinite}
.voice-stop svg{width:24px;height:24px}

/* =====================================================================
   FILE: web-ui/public/style.css  —  (XÓA khối cũ ~dòng 317–384:
   .agents-*, .sum-card, .agent-card, .ac-*, .agents-config, .cfg-*, .switch
   rồi DÁN khối này vào thay thế.)

   Quy tắc:
   • CHỈ dùng biến token có sẵn (mục 3). KHÔNG khai báo lại :root /
     [data-theme="dark"] — dark tự chạy nhờ token.
   • Không hex tùy tiện (chỉ #fff cho chữ trên nền --brand, giống .btn-primary
     sẵn có).
   • Không rò rỉ view khác: mọi selector nằm dưới .agents-view hoặc dùng
     tiền tố agents- / ac- / sum- / cfg-.
   ==== TRỢ LÝ CHỦ ĐỘNG — REDESIGN · START ==== */

.agents-view{max-width:1080px;margin:0 auto;padding:26px 4px 44px;color:var(--text)}

/* ---- Header ---- */
.agents-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.agents-title{font-size:26px;font-weight:800;letter-spacing:-.022em;margin:0 0 5px}
.agents-sub{font-size:14px;color:var(--text-dim);margin:0;max-width:520px;line-height:1.5}
.agents-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.agents-tools .btn-ghost .ic{display:flex}
.agents-tools .btn-ghost .ic svg{width:16px;height:16px}

/* ---- Lời chào (trợ lý “nói”) ---- */
.agents-greet{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:15px 18px;box-shadow:var(--shadow-card);margin-bottom:18px}
.agents-greet-ava{width:40px;height:40px;border-radius:11px;background:var(--brand);display:grid;place-items:center;flex:none}
.agents-greet-ava svg{width:20px;height:20px;stroke:var(--gold)}
.agents-greet-body{flex:1;min-width:0}
.agents-greet-meta{font-size:11.5px;color:var(--text-mute);font-weight:500;margin-bottom:2px}
.agents-greet-msg{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.35}
.agents-greet-msg .hi{color:var(--err)}
.agents-live{display:flex;align-items:center;gap:8px;background:var(--teal-soft);border:1px solid var(--border);
  border-radius:999px;padding:7px 13px;flex:none}
.agents-live .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:agBreathe 2.4s ease-in-out infinite}
.agents-live span{font-size:12px;font-weight:600;color:var(--teal)}

/* ---- Dải tóm tắt ---- */
.sum-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:26px}
.sum-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 16px;
  box-shadow:0 2px 6px -2px rgba(31,56,100,.06)}
.sum-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-mute);margin-bottom:9px}
.sum-label svg{width:15px;height:15px}
.sum-value{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.05}
.sum-hint{font-size:12px;font-weight:600;margin-top:3px;color:var(--text-dim)}
.sum-hint.is-crit{color:var(--err)} .sum-hint.is-ok{color:var(--ok)}

/* ---- Tiêu đề khu vực ---- */
.agents-secthead{display:flex;align-items:center;gap:10px;margin:0 0 13px}
.agents-secthead .dot{width:8px;height:8px;border-radius:50%;flex:none}
.agents-secthead .dot.is-crit{background:var(--err)} .agents-secthead .dot.is-info{background:var(--brand-2)}
.agents-secthead .dot.is-run{background:var(--teal)}
.agents-secthead svg{width:16px;height:16px;stroke:var(--teal);flex:none}
.agents-secthead .ttl{font-size:13px;font-weight:700;letter-spacing:.02em}
.agents-secthead .cnt{font-size:12px;color:var(--text-mute);font-weight:500}
.agents-secthead .rule{flex:1;height:1px;background:var(--border)}

/* ---- Rail trạng thái trợ lý ---- */
.ac-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-bottom:28px}
.ac-agent{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 14px;
  box-shadow:0 2px 6px -2px rgba(31,56,100,.06);display:flex;flex-direction:column;min-height:112px}
/* Tên trợ lý: giữ tối đa 2 dòng để mọi thẻ cân đối (tên ngắn/dài) */
.ac-agent-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-agent-top{display:flex;align-items:flex-start;gap:11px}
.ac-agent-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none}
.ac-agent-ic svg{width:17px;height:17px}
.ac-agent-ic.is-crit{background:var(--err-soft);color:var(--err)}
.ac-agent-ic.is-warn{background:var(--gold-soft);color:var(--warn)}
.ac-agent-ic.is-info{background:var(--brand-soft);color:var(--brand-2)}
.ac-agent-ic.is-ok{background:var(--ok-soft);color:var(--ok)}
.ac-agent-tx{flex:1;min-width:0}
.ac-agent-name{font-size:13px;font-weight:700;line-height:1.2}
.ac-agent-watch{font-size:11.5px;font-weight:600;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-agent-watch.is-crit{color:var(--err)} .ac-agent-watch.is-warn{color:var(--warn)} .ac-agent-watch.is-info{color:var(--brand-2)} .ac-agent-watch.is-ok{color:var(--ok)}
.ac-agent-status{display:flex;align-items:center;gap:7px;margin-top:auto;padding-top:10px;border-top:1px solid var(--border)}
.ac-agent-status .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ok)}
.ac-agent-status .dot.is-run{background:var(--gold);animation:agBreathe 1.3s ease-in-out infinite}
.ac-agent-status .lbl{font-size:11.5px;color:var(--text-dim);font-weight:500}

/* nút chạy lại (icon + tooltip) */
.ac-rerun{position:relative;width:30px;height:30px;border-radius:9px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text-dim);display:grid;place-items:center;flex:none;transition:border-color .15s,color .15s}
.ac-rerun svg{width:15px;height:15px}
.ac-rerun:hover{border-color:var(--brand);color:var(--brand)}
.ac-rerun[data-busy="1"]{background:var(--brand-soft);border-color:transparent;color:var(--brand-ink);cursor:default}
.ac-rerun[data-busy="1"] svg{animation:agSpin .8s linear infinite}
.ac-tip{position:absolute;bottom:calc(100% + 8px);right:0;background:var(--text);color:var(--surface);
  font-size:11px;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;
  box-shadow:0 8px 20px -8px rgba(0,0,0,.4);opacity:0;transform:translateY(3px);pointer-events:none;
  transition:opacity .14s,transform .14s;z-index:5}
.ac-rerun:hover .ac-tip{opacity:1;transform:none}

/* ---- Feed ưu tiên + lưới thống kê ---- */
.ac-feed{display:flex;flex-direction:column;gap:12px;margin-bottom:28px}
.ac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:8px}

.ac-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-card)}
.ac-grid .ac-card{box-shadow:0 2px 6px -2px rgba(31,56,100,.06)}
.ac-accent{position:absolute;left:0;top:0;bottom:0;width:4px;z-index:1}
.ac-card--crit .ac-accent{background:var(--err)}
.ac-card--warn .ac-accent{background:var(--gold)}
.ac-card--ok   .ac-accent{background:var(--ok)}
.ac-card--info .ac-accent{background:var(--brand-2)}
.ac-card-body{padding:18px 20px 18px 22px}
.ac-card-main{display:flex;gap:15px;flex-wrap:wrap}
.ac-card-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.ac-card-ic svg{width:21px;height:21px}
.ac-card--crit .ac-card-ic{background:var(--err-soft);color:var(--err)}
.ac-card--warn .ac-card-ic{background:var(--gold-soft);color:var(--warn)}
.ac-card--ok   .ac-card-ic{background:var(--ok-soft);color:var(--ok)}
.ac-card--info .ac-card-ic{background:var(--brand-soft);color:var(--brand-2)}
.ac-card-content{flex:1;min-width:230px}
.ac-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px 12px;margin-bottom:3px;flex-wrap:wrap}
.ac-head-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.ac-name{font-size:15px;font-weight:700}
.ac-tag{font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:999px}
.ac-card--crit .ac-tag{color:var(--err);background:var(--err-soft)}
.ac-card--warn .ac-tag{color:var(--warn);background:var(--gold-soft)}
.ac-card--ok   .ac-tag{color:var(--ok);background:var(--ok-soft)}
.ac-card--info .ac-tag{color:var(--brand-2);background:var(--brand-soft)}
.ac-summary{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin-bottom:12px}

.ac-items{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}
.ac-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;background:var(--surface-2);border-radius:9px}
.ac-item-k{font-size:13px;color:var(--text);font-weight:500}
.ac-item-k small{color:var(--text-mute);font-weight:400}
.ac-item-v{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text-dim)}
.ac-item-v.is-crit{color:var(--err)} .ac-item-v.is-warn{color:var(--warn)} .ac-item-v.is-ok{color:var(--ok)}

.ac-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.ac-metric{background:var(--surface-2);border-radius:10px;padding:10px 12px}
.ac-metric-label{font-size:11px;color:var(--text-mute);font-weight:600;letter-spacing:.03em;margin-bottom:4px}
.ac-metric-value{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}

/* biểu đồ phẳng (bar) */
.ac-chart{display:flex;flex-direction:column;gap:11px;margin-bottom:12px}
.ac-bar-row .ac-bar-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.ac-bar-row .ac-bar-top span:first-child{color:var(--text);font-weight:500}
.ac-bar-row .ac-bar-top span:last-child{color:var(--text-dim);font-weight:600}
.ac-bar-track{height:7px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ac-bar-fill{height:100%;border-radius:4px}
/* biểu đồ donut phẳng */
.ac-donut{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.ac-donut-ring{width:92px;height:92px;border-radius:50%;flex:none;
  -webkit-mask:radial-gradient(circle 27px at 50% 50%,transparent 98%,#000 100%);
  mask:radial-gradient(circle 27px at 50% 50%,transparent 98%,#000 100%)}
.ac-donut-legend{display:flex;flex-direction:column;gap:6px}
.ac-donut-legend .row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-dim)}
.ac-donut-legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.ac-donut-legend b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}

/* chip dự báo / thói quen (tuỳ chọn) */
.ac-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ac-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px}
.ac-chip svg{width:13px;height:13px}
.ac-chip--forecast{background:var(--teal-soft);color:var(--teal)}
.ac-chip--habit{background:var(--brand-soft);color:var(--brand-ink)}

/* hộp đề xuất */
.ac-proposal{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--gold-soft);
  border:1px solid var(--border-strong);border-radius:11px;margin-bottom:2px}
.ac-proposal svg{width:17px;height:17px;stroke:var(--warn);flex:none}
.ac-proposal span{font-size:13px;color:var(--text);line-height:1.4}

/* “Vì sao?” + panel lập luận (tuỳ chọn) */
.ac-why-btn{display:inline-flex;align-items:center;gap:6px;margin-top:11px;border:none;background:transparent;
  color:var(--brand-ink);font-size:12.5px;font-weight:600;font-family:inherit;padding:0;cursor:pointer}
.ac-why-btn svg{width:14px;height:14px}
.ac-why{margin-top:10px;padding:12px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:11px}
.ac-why-head{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.ac-why-head svg{width:14px;height:14px;stroke:var(--brand-2)}
.ac-why-head span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-2)}
.ac-why-body{font-size:12.5px;color:var(--text-dim);line-height:1.6}

/* cột hành động */
.ac-actions{display:flex;flex-direction:row;gap:8px;flex:0 0 auto;align-items:center;margin-left:auto}
.ac-btn-primary{height:34px;padding:0 14px;border:none;border-radius:9px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:600;
  font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;box-shadow:0 4px 12px -6px rgba(31,56,100,.5);transition:filter .15s}
.ac-btn-primary:hover{filter:brightness(1.08)}
.ac-btn-primary svg{width:15px;height:15px}
.ac-btn-sec{height:34px;padding:0 14px;border:1px solid var(--border-strong);border-radius:9px;background:var(--surface);color:var(--text-dim);
  font-size:12.5px;font-weight:600;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.ac-btn-sec svg{width:15px;height:15px}

/* footer card: giờ chạy + nút chạy lại */
.ac-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 16px 12px 22px;border-top:1px solid var(--border)}
.ac-foot-time{font-size:11.5px;color:var(--text-mute);font-family:var(--mono)}

/* ---- Nhật ký tự hành (tuỳ chọn) ---- */
.ac-log{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:20px 22px 4px;box-shadow:0 2px 6px -2px rgba(31,56,100,.06)}
.ac-log-line{position:absolute;left:84px;top:26px;bottom:34px;width:2px;background:var(--border)}
.ac-log-item{display:flex;align-items:flex-start}
.ac-log-time{width:52px;text-align:right;padding-right:14px;flex:none;font-family:var(--mono);font-size:11px;color:var(--text-mute);padding-top:1px}
.ac-log-mark{width:24px;position:relative;flex:none}
.ac-log-dot{position:absolute;left:5px;top:2px;width:12px;height:12px;border-radius:50%;
  border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border)}
.ac-log-body{flex:1;min-width:0;padding-bottom:18px}
.ac-log-title{font-size:13px;font-weight:600;line-height:1.35}
.ac-log-detail{font-size:12px;color:var(--text-dim);margin-top:2px}

/* ---- Trạng thái rỗng / loading / lỗi ---- */
.ac-state{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:46px 28px;text-align:center;box-shadow:0 2px 6px -2px rgba(31,56,100,.06);margin-bottom:26px}
.ac-state .ic{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.ac-state.is-empty .ic{background:var(--teal-soft)} .ac-state.is-empty .ic svg{stroke:var(--teal)}
.ac-state.is-error .ic{border-radius:16px;background:var(--err-soft)} .ac-state.is-error .ic svg{stroke:var(--err)}
.ac-state .ic svg{width:30px;height:30px}
.ac-state .t{font-size:18px;font-weight:700;margin-bottom:7px;letter-spacing:-.01em}
.ac-state .d{font-size:14px;color:var(--text-dim);line-height:1.55;max-width:400px;margin:0 auto}
.ac-state .btn-retry{margin-top:22px}
.ac-skel{border-radius:14px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));
  background-size:200% 100%;animation:agShimmer 1.3s linear infinite}

/* ---- Bảng cấu hình bật/tắt ---- */
.agents-config{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px;margin-bottom:24px;box-shadow:0 2px 6px -2px rgba(31,56,100,.06)}
.cfg-row{display:flex;align-items:center;gap:13px;padding:12px 12px}
.cfg-row + .cfg-row{border-top:1px solid var(--border)}
.cfg-ic{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);color:var(--brand-2);display:grid;place-items:center;flex:none}
.cfg-ic svg{width:17px;height:17px}
.cfg-tx{flex:1;min-width:0}
.cfg-name{font-size:13.5px;font-weight:600}
.cfg-desc{font-size:12px;color:var(--text-dim);margin-top:2px}
.ac-switch{width:42px;height:24px;border-radius:999px;border:none;background:var(--border-strong);position:relative;flex:none;cursor:pointer;transition:background .18s}
.ac-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.ac-switch[aria-checked="true"]{background:var(--brand)}
.ac-switch[aria-checked="true"]::after{transform:translateX(18px)}

/* ---- Chuyển động ---- */
@keyframes agBreathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.4}}
@keyframes agSpin{to{transform:rotate(360deg)}}
@keyframes agShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.agents-view *{animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* ---- Responsive (mobile) ---- */
@media (max-width:720px){
  .agents-view{padding:18px 2px 40px}
  .ac-card-main{gap:12px}
  .ac-actions{width:100%;flex-direction:row}
  .ac-actions .ac-btn-primary,.ac-actions .ac-btn-sec{flex:1;min-height:44px}
  .ac-metrics{grid-template-columns:1fr 1fr}
}
/* ==== TRỢ LÝ CHỦ ĐỘNG — REDESIGN · END ==== */

/* =====================================================================
   TRÒ CHUYỆN GẦN ĐÂY (history view)
   ===================================================================== */
.history-wrap{max-width:1040px;margin:0 auto;padding:22px 20px 40px}
.history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:20px}
.history-head h1{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px}
.history-head p{font-size:13.5px;color:var(--text-dim);margin:0;max-width:520px;line-height:1.5}
.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.hist-card{display:flex;align-items:center;gap:13px;text-align:left;width:100%;background:var(--surface);
  border:1px solid var(--border);border-radius:16px;padding:15px 16px;box-shadow:var(--shadow-card);
  transition:transform .15s,border-color .15s,box-shadow .15s;animation:slideUp .28s ease both}
.hist-card:hover{transform:translateY(-2px);border-color:var(--border-strong)}
.hist-card.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset,var(--shadow-card)}
.hist-ic{width:44px;height:44px;border-radius:13px;background:linear-gradient(155deg,var(--brand-soft),var(--teal-soft));
  display:grid;place-items:center;font-size:21px;flex:none}
.hist-ic svg{width:21px;height:21px;stroke:var(--brand-ink)}
.hist-body{flex:1;min-width:0}
.hist-title{font-size:14.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.01em}
.hist-card.active .hist-title{color:var(--brand-ink)}
.hist-meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-mute);margin-top:4px}
.hist-meta .dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-mute);flex:none}
.hist-meta .now{color:var(--ok);font-weight:600}
.hist-chev{color:var(--text-mute);flex:none;display:flex;transition:transform .15s,color .15s}
.hist-card:hover .hist-chev{transform:translateX(2px);color:var(--brand)}
.hist-chev svg{width:18px;height:18px}
.history-empty{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--text-mute)}
.history-empty .big{width:64px;height:64px;border-radius:18px;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto 16px}
.history-empty .big svg{width:30px;height:30px;stroke:var(--brand-ink)}
.history-empty .t{font-size:15px;font-weight:600;color:var(--text-dim)}
.history-empty .s{font-size:13px;margin-top:4px}

/* =====================================================================
   BÁO CÁO / DASHBOARD
   ===================================================================== */
.period{display:flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;overflow:hidden}
.period button{border:none;background:transparent;color:var(--text-dim);font-weight:600;font-size:12.5px;padding:8px 13px}
.period button:hover{color:var(--text)}
.period button.on{background:var(--brand);color:#fff}

/* Entrance + keyframes */
.msg,.welcome{animation:slideUp .28s ease both}
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.4}}
@keyframes slideUp{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}
@keyframes dots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes wave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
@keyframes micpulse{0%{box-shadow:0 0 0 0 rgba(31,56,100,.4)}100%{box-shadow:0 0 0 16px rgba(31,56,100,0)}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important}}

/* ---------- RESPONSIVE (desktop ≥ 880px) ---------- */
@media (min-width:880px){
  .sidebar{display:flex}
  .topbar{display:flex}
  .mhead{display:none}
  .convo{padding-left:28px;padding-right:28px}
  .auth-panel{display:flex}
  .auth-mobilebrand{display:none}
  #mNavBtn{display:none}
}
@media (max-width:879px){
  /* Sidebar dạng drawer trên mobile */
  .sidebar{display:flex;position:fixed;inset:0 auto 0 0;z-index:30;transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.3);width:280px}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open::after{content:"";position:fixed;inset:0;background:rgba(10,16,30,.45);z-index:20}
}

/* =====================================================================
   FILE: web-ui/public/style.css  —  DÁN khối này (không xóa gì; toàn bộ
   selector mới, không đè class auth cũ). Chỉ dùng token có sẵn (mục 3);
   KHÔNG khai báo lại :root / [data-theme="dark"].
   ==== ĐĂNG KÝ SAAS — START ==== */

/* ---- cột trái đổi giọng khi đăng ký (JS thêm .auth--register lên #loginScreen) ---- */
/* (Nội dung kicker/H1 do i18n; ở đây chỉ đảm bảo panel vẫn hiển thị bình thường.) */

/* ---- Đăng ký: progress + bước ---- */
.reg{width:100%}
.reg-progress{display:flex;align-items:center;gap:11px;margin-bottom:22px}
.reg-stepof{font-family:var(--mono);font-size:11px;color:var(--text-mute);white-space:nowrap}
.reg-stepof b{color:var(--text-dim);font-weight:600}
.reg-track{flex:1;height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.reg-track i{display:block;height:100%;background:var(--brand);border-radius:3px;transition:width .3s ease}
.reg-step{animation:reg-rise .25s ease both}
.reg-step h2{font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--text);margin:0 0 6px}
.reg-step .sub{font-size:13.5px;color:var(--text-dim);line-height:1.5;margin:0 0 24px}

.reg-slug{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);margin:-6px 0 24px;flex-wrap:wrap}
.reg-slug .mono{font-family:var(--mono);color:var(--teal);font-weight:500}
.reg-avail{display:inline-flex;align-items:center;gap:3px;color:var(--ok)}
.reg-avail svg{width:13px;height:13px}
.reg-avail.is-taken{color:var(--err)}

.reg-strength{display:flex;align-items:center;gap:9px;margin:-8px 0 24px}
.reg-bars{display:flex;gap:5px;flex:1}
.reg-bars i{flex:1;height:4px;border-radius:2px;background:var(--surface-2);transition:background .2s}
.reg-bars.s1 i:nth-child(-n+1){background:var(--err)}
.reg-bars.s2 i:nth-child(-n+2){background:var(--warn)}
.reg-bars.s3 i:nth-child(-n+3){background:var(--gold)}
.reg-bars.s4 i{background:var(--ok)}
.reg-strlabel{font-size:11.5px;color:var(--text-mute);white-space:nowrap}

.reg-actions{display:flex;gap:10px}
.reg-actions .btn-login{flex:1}
.btn-back{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);font-family:inherit;
  font-weight:600;font-size:15px;padding:0 18px;border-radius:11px;cursor:pointer;display:flex;align-items:center;gap:7px}
.btn-back svg{width:16px;height:16px}

/* gói */
.reg-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.reg-plan{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--border-strong);background:var(--surface);border-radius:13px;padding:15px 16px;cursor:pointer;transition:border-color .15s,background .15s}
.reg-plan.is-on{border:1.5px solid var(--brand);background:var(--brand-soft)}
.reg-plan-badge{position:absolute;top:-9px;left:14px;font-size:9.5px;font-weight:700;letter-spacing:.05em;color:#fff;
  background:var(--teal);padding:2px 9px;border-radius:999px}
.reg-plan-name{font-size:14.5px;font-weight:700;color:var(--text)}
.reg-plan.is-on .reg-plan-name{color:var(--brand-ink)}
.reg-plan-desc{font-size:12px;color:var(--text-dim);margin-top:2px}
.reg-radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none}
.reg-plan.is-on .reg-radio{border:6px solid var(--brand)}

.reg-terms{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:16px;font-size:11.5px;color:var(--text-mute)}
.reg-terms svg{width:13px;height:13px}
.reg-error{margin-top:14px;padding:11px 13px;background:var(--err-soft);border:1px solid var(--err);border-radius:10px;
  color:var(--err);font-size:12.5px;line-height:1.4}

/* ---- Xem trước mã ưu đãi (đăng ký / gia hạn) ---- */
.hint{display:block;margin:-8px 0 14px;font-size:12.5px;line-height:1.4;min-height:1em}
.hint.ok{color:var(--ok)}
.hint.warn{color:var(--warn)}

/* ---- Màn "đang khởi tạo" & các trạng thái ---- */
.prov{width:100%;text-align:left}
.prov-ic{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px}
.prov-ic svg{width:28px;height:28px}
.prov-ic.is-warn{background:var(--gold-soft)} .prov-ic.is-warn svg{stroke:var(--warn)}
.prov-ic.is-err{background:var(--err-soft)}  .prov-ic.is-err svg{stroke:var(--err)}
.prov-ic.is-ok{background:var(--ok-soft);border-radius:50%} .prov-ic.is-ok svg{stroke:var(--ok)}
/* provisioning: vòng nhịp sáng */
.prov-ring{position:relative;width:66px;height:66px;margin-bottom:22px}
.prov-ring .halo{position:absolute;inset:0;border-radius:50%;background:var(--brand-soft);animation:reg-pulse 1.6s ease-in-out infinite}
.prov-ring .db{position:absolute;inset:0;display:grid;place-items:center}
.prov-ring .db svg{width:31px;height:31px;stroke:var(--brand)}
.prov-kicker{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.prov-kicker.is-warn{color:var(--warn)} .prov-kicker.is-err{color:var(--err)} .prov-kicker.is-ok{color:var(--ok)} .prov-kicker.is-run{color:var(--gold)}
.prov h3{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--text);margin:0 0 8px}
.prov p{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin:0 0 20px}
.prov-bar{height:5px;border-radius:3px;background:var(--surface-2);overflow:hidden;position:relative}
.prov-bar i{position:absolute;top:0;left:0;height:100%;width:30%;border-radius:3px;
  background:linear-gradient(90deg,var(--brand-2),var(--brand));animation:reg-slide 1.5s ease-in-out infinite}
.prov-steps{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.prov-steps .row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text)}
.prov-steps .row.todo{color:var(--text-mute)}
.prov-steps .dot{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex:none}
.prov-steps .dot.done{background:var(--ok-soft)} .prov-steps .dot.done svg{width:11px;height:11px;stroke:var(--ok)}
.prov-steps .dot.now{background:var(--brand-soft)} .prov-steps .dot.now i{width:7px;height:7px;border-radius:50%;background:var(--brand);animation:reg-pulse 1.2s ease-in-out infinite}
.prov-steps .dot.wait{border:1.5px solid var(--border-strong)}
.prov .btn-login{margin-top:2px}
.prov .btn-retry{width:100%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);
  font-family:inherit;font-weight:600;font-size:14px;padding:12px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.prov .btn-retry svg{width:15px;height:15px}

/* input mono (mã cửa hàng) */
.fld input.mono{font-family:var(--mono);font-size:13.5px}

@keyframes reg-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes reg-pulse{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.05)}}
@keyframes reg-slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
@media (prefers-reduced-motion:reduce){.reg-step,.prov-ring .halo,.prov-bar i,.prov-steps .dot.now i{animation:none!important}}

/* mobile: cột trái ẩn nhờ .auth-panel{display:none} sẵn có; form full-width tự chịu */
@media (max-width:520px){ .reg-actions{flex-wrap:wrap} .reg-actions .btn-back,.reg-actions .btn-login{min-height:48px} }
/* ==== ĐĂNG KÝ SAAS — END ==== */


/* =====================================================================
   ==== ADMIN NỀN TẢNG — START ====
   (Chọn cách B: đặt CSS admin trong style.css chung, tiền tố adm-. admin.html
   link cùng style.css. Nếu muốn tách, chuyển khối này vào <style> của admin.html.)
   ===================================================================== */
.adm{min-height:100dvh;background:var(--bg);color:var(--text);font-family:var(--font)}
.adm-top{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--brand);color:#fff}
.adm-brand{display:flex;align-items:center;gap:11px}
.adm-brand .mark{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.1);display:grid;place-items:center;border:1px solid rgba(224,188,78,.5)}
.adm-brand .mark svg{width:16px;height:16px;stroke:#E8C964}
.adm-brand b{font-size:15px;font-weight:700}
.adm-brand span{font-size:12px;color:#AEC8EE;font-weight:500}
.adm-user{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#AEC8EE}
.adm-user .on{width:7px;height:7px;border-radius:50%;background:#4ADE80}
.adm-wrap{max-width:1080px;margin:0 auto;padding:24px;display:grid;grid-template-columns:1fr 300px;gap:16px}
.adm-col{display:flex;flex-direction:column;gap:16px;min-width:0}
.adm-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft)}
.adm-card-head{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--border)}
.adm-card-head svg{width:16px;height:16px}
.adm-card-head b{font-size:13.5px;font-weight:700}
.adm-count{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px}
.adm-count.warn{color:var(--warn);background:var(--gold-soft)}
.adm-count.mute{color:var(--text-mute);font-weight:500;background:transparent}
.adm-scroll{overflow-x:auto}
.adm-table{width:100%;border-collapse:collapse;font-size:12.5px}
.adm-table.wide{min-width:560px} .adm-table.narrow{min-width:520px}
.adm-table thead tr{background:var(--bg);color:var(--text-mute)}
.adm-table th{text-align:left;font-weight:600;padding:9px 16px;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.adm-table th:last-child,.adm-table td:last-child{text-align:right}
.adm-table td{padding:11px 8px;color:var(--text)}
.adm-table td:first-child{padding-left:16px}
.adm-table tbody tr{border-top:1px solid var(--border)}
.adm-mono{font-family:var(--mono);color:var(--text-dim);font-weight:500}
.adm-dim{color:var(--text-dim)} .adm-mute{color:var(--text-mute)} .adm-tnum{font-variant-numeric:tabular-nums}
.chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px}
.chip.active{color:var(--ok);background:var(--ok-soft)}
.chip.suspended{color:var(--err);background:var(--err-soft)}
.chip.expired{color:var(--warn);background:var(--gold-soft)}
.chip.paused{color:var(--warn);background:var(--gold-soft)}
.chip.revoked{color:var(--err);background:var(--err-soft)}
.adm-btn{border:none;background:var(--brand);color:#fff;font-family:inherit;font-size:12px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;margin-left:6px}
.adm-btn.ghost{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim)}
.adm-btn.danger{border:1px solid var(--border-strong);background:var(--surface);color:var(--err)}
.adm-btn.brand{border:1px solid var(--border-strong);background:var(--surface);color:var(--brand-ink)}
.adm-config{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:var(--shadow-soft);align-self:flex-start}
.adm-config-head{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.adm-config-head svg{width:16px;height:16px;stroke:var(--text-dim)}
.adm-config-head b{font-size:13.5px;font-weight:700}
.adm-config label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:8px}
.adm-modes{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.adm-mode{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--border);border-radius:9px;cursor:pointer}
.adm-mode.is-on{border:1.5px solid var(--brand);background:var(--brand-soft)}
.adm-mode .r{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none}
.adm-mode.is-on .r{border:5px solid var(--brand)}
.adm-mode span{font-size:12.5px;color:var(--text)}
.adm-mode.is-on span{color:var(--brand-ink);font-weight:600}
.adm-days{display:flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--border-strong);border-radius:9px;padding:0 12px;height:44px;margin-bottom:18px}
.adm-days input{flex:1;border:none;outline:none;background:transparent;color:var(--text);font-family:inherit;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.adm-days span{font-size:12px;color:var(--text-mute)}
.adm-save{width:100%;border:none;background:var(--brand);color:#fff;font-family:inherit;font-weight:600;font-size:13.5px;padding:12px;border-radius:10px;cursor:pointer}
/* admin login gate */
.adm-login{min-height:100dvh;display:grid;place-items:center;background:var(--bg);padding:24px}
.adm-login-card{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow-card)}
.adm-empty{padding:40px 20px;text-align:center;color:var(--text-dim);font-size:13px}
.adm-skel{height:44px;border-radius:9px;margin:8px 16px;background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2));background-size:200% 100%;animation:reg-shimmer 1.3s linear infinite}
@keyframes reg-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (max-width:820px){ .adm-wrap{grid-template-columns:1fr} }
/* ---- điều hướng tab (dashboard/voucher) + tab Voucher — additive ---- */
.adm-nav{max-width:1080px;margin:0 auto;padding:16px 24px 0;display:flex;gap:8px}
.adm-nav-btn{border:1px solid var(--border-strong);background:var(--surface);color:var(--text-dim);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:9px;cursor:pointer}
.adm-nav-btn.is-on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.adm-wrap-1col{grid-template-columns:1fr}
.adm-vform{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-bottom:1px solid var(--border)}
.adm-vform input{flex:1 1 140px;min-width:0;border:1px solid var(--border-strong);background:var(--bg);color:var(--text);font-family:inherit;font-size:12.5px;padding:8px 10px;border-radius:8px}
.adm-vform button{flex:none}
.adm-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-dim);white-space:nowrap;flex:none}
.adm-check input{width:16px;height:16px;flex:none}
#voucherBatchMsg{padding:0 16px;margin-top:10px}
#voucherBatchTable td:last-child{white-space:nowrap}
#voucherBatchTable a{color:var(--brand-ink);font-size:12px;font-weight:600;text-decoration:none;margin-right:8px}
#voucherBatchTable a:hover{text-decoration:underline}
/* ==== ADMIN NỀN TẢNG — END ==== */