/* Layout: dark-green rail on the left, demo banner on top, warm-neutral workspace; gold-bronze is the brand accent */
:root{
  --bg:#F3F4EE; --surface:#FFFFFF; --surface-2:#ECEFE5; --line:#DCE1D2; --fg:#132219; --muted:#5E6C61;
  --green:#138A3A; --green-deep:#0B3D1E; --green-soft:#E3F2E7; --gold:#E8B23A; --bronze:#B8761C; --gold-soft:#FBF1D6; --gold-ink:#6B4708;
  --rail:#0B2A16; --rail-fg:#DDE8DF; --rail-muted:#8FA596; --rail-hover:#133D22;
  --danger:#C2412D; --danger-soft:#FBE7E3; --warn:#C47F0E; --warn-soft:#FDF0D8; --info:#2563A8; --info-soft:#E3EDF8; --ok:#138A3A;
  --shadow:0 1px 2px rgba(19,34,25,.06),0 4px 14px rgba(19,34,25,.05);
  --f-ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --r:10px; --r-sm:7px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1510; --surface:#132019; --surface-2:#192A20; --line:#26392C; --fg:#E6ECE5; --muted:#98A99C;
  --green:#36B862; --green-deep:#0B3D1E; --green-soft:#16301F; --gold:#EDBE52; --bronze:#D7973D; --gold-soft:#2C2412; --gold-ink:#F2D08A;
  --rail:#07140C; --rail-fg:#DDE8DF; --rail-muted:#7F9586; --rail-hover:#10301B;
  --danger:#E8705C; --danger-soft:#3A1D18; --warn:#E6A63A; --warn-soft:#352812; --info:#6CA6E8; --info-soft:#15263A; --ok:#36B862;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1510; --surface:#132019; --surface-2:#192A20; --line:#26392C; --fg:#E6ECE5; --muted:#98A99C;
  --green:#36B862; --green-deep:#0B3D1E; --green-soft:#16301F; --gold:#EDBE52; --bronze:#D7973D; --gold-soft:#2C2412; --gold-ink:#F2D08A;
  --rail:#07140C; --rail-fg:#DDE8DF; --rail-muted:#7F9586; --rail-hover:#10301B;
  --danger:#E8705C; --danger-soft:#3A1D18; --warn:#E6A63A; --warn-soft:#352812; --info:#6CA6E8; --info-soft:#15263A; --ok:#36B862;
  --shadow:0 1px 2px rgba(0,0,0,.3); color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:14px;line-height:1.45;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:linear-gradient(90deg,var(--bronze),var(--gold))}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* banner */
.demo-bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-block:7px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(90deg,var(--bronze),var(--gold) 55%,#F3CB63);color:#2A1A02;font-size:12.5px}
.demo-bar b{letter-spacing:.06em}
.demo-bar .sp{flex:1}
.demo-bar select,.demo-bar button{border:1px solid rgba(42,26,2,.35);background:rgba(255,255,255,.55);color:#2A1A02;border-radius:6px;padding:3px 8px;font-size:12.5px;font-weight:600;cursor:pointer}
.demo-bar .hide-s{opacity:.85}

.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100% - 38px)}
/* rail */
.rail{background:var(--rail);color:var(--rail-fg);position:sticky;top:calc(env(safe-area-inset-top,0px) + 38px);height:calc(100vh - 38px);overflow-y:auto;display:flex;flex-direction:column;padding:14px 10px 12px;padding-left:max(10px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px}
.brand img{width:54px;height:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.brand .nm{font-family:var(--f-display);font-size:21px;color:#F3D27A;line-height:1}
.brand .sub{font-size:10.5px;letter-spacing:.22em;color:var(--rail-muted);margin-top:4px}
.nav-g{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-muted);padding:12px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--rail-fg);text-decoration:none;font-size:13.5px}
.nav a:hover{background:var(--rail-hover)}
.nav a.on{background:linear-gradient(90deg,var(--gold),#F0C75E);color:#2A1A02;font-weight:600}
.nav a .ic{width:18px;text-align:center;opacity:.9;font-size:13px}
.nav a .ct{margin-left:auto;font-size:11px;font-weight:700;min-width:22px;text-align:center;padding:1px 6px;border-radius:999px;background:#C2412D;color:#fff}
.nav a .ct.y{background:var(--gold);color:#2A1A02}
.nav a .ct.b{background:#2E7BD6}
.nav a.on .ct{background:#2A1A02;color:#F3D27A}
.me{margin-top:auto;padding:12px 8px 0;border-top:1px solid rgba(255,255,255,.08)}
.me .n{font-weight:700}
.me .r{color:var(--rail-muted);font-size:12px}
.me .row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.me button{background:transparent;border:1px solid rgba(255,255,255,.18);color:var(--rail-fg);border-radius:7px;padding:5px 9px;font-size:12px;cursor:pointer}
.me .ver{font-size:11px;color:var(--rail-muted);margin-top:8px}

/* main */
.main{min-width:0;padding-block:20px 80px;padding-left:max(16px,2.2vw);padding-right:max(16px,env(safe-area-inset-right,0px),2.2vw)}
.ph{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ph h1{font-size:22px;margin:0;font-weight:800;letter-spacing:-.01em}
.ph .sp{flex:1}
.ph .note{color:var(--muted);font-size:12.5px;width:100%}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--bronze)}
.btn.pri{background:var(--green-deep);border-color:var(--green-deep);color:#F3D27A}
:root[data-theme="dark"] .btn.pri{background:var(--green);border-color:var(--green);color:#06120A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn.pri{background:var(--green);border-color:var(--green);color:#06120A}}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#2A1A02}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{white-space:nowrap;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip .n{font-size:11px;font-weight:700;padding:0 6px;border-radius:999px;background:var(--danger);color:#fff}
.chip .n.y{background:var(--gold);color:#2A1A02}
.chip .n.g{background:var(--surface-2);color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:14px 16px}
.card h3{margin:0 0 10px;font-size:15px;font-weight:700}
.card .hint{color:var(--muted);font-size:12px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sp{flex:1}
.muted{color:var(--muted)}
.small{font-size:12px}
.b{font-weight:700}
.kpi{padding:12px 14px}
.kpi .l{color:var(--muted);font-size:12px;display:flex;gap:6px;align-items:center}
.kpi .v{font-size:22px;font-weight:800;margin-top:2px;letter-spacing:-.01em}
.kpi .d{font-size:11.5px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kpi.accent{border-left:3px solid var(--gold)}
.kpi.alert{border-left:3px solid var(--danger)}
.up{color:var(--ok);font-weight:700}.down{color:var(--danger);font-weight:700}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:var(--muted)}
.pill.g{background:var(--green-soft);color:var(--green)}
.pill.y{background:var(--gold-soft);color:var(--gold-ink)}
.pill.r{background:var(--danger-soft);color:var(--danger)}
.pill.b{background:var(--info-soft);color:var(--info)}
.pill.o{background:var(--warn-soft);color:var(--warn)}
.pill.ai{background:linear-gradient(90deg,var(--gold),#F3CB63);color:#2A1A02}
.tbl-wrap{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
.t th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t td.num,.t th.num{text-align:right;white-space:nowrap}
.t tr.click{cursor:pointer}.t tr.click:hover td{background:var(--surface-2)}
.code{font-weight:700;color:var(--fg);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.alert-box{border:1px solid var(--danger);background:var(--danger-soft);border-radius:var(--r);padding:12px 14px}
.alert-box .it{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer;max-width:420px}
.bignum{font-size:20px;font-weight:800;color:var(--danger);min-width:28px}
.search{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:9px 12px}
input.in,select.in,textarea.in{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 10px;width:100%}
label.fl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
label.fl > *{color:var(--fg);font-size:13.5px}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;flex:none;background:var(--green-deep);color:#F3D27A}
.av.s{width:28px;height:28px;font-size:11px}
.empty{padding:40px 10px;text-align:center;color:var(--muted)}
.sec-t{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:6px 0}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.spark{display:block;width:100%;height:30px}

/* conversations */
.inbox{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:12px;height:calc(100vh - 150px);min-height:540px}
.inbox > .card{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.cl-head{padding:10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.cl-list{overflow-y:auto;flex:1}
.ci{display:flex;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-left:3px solid transparent}
.ci:hover{background:var(--surface-2)}
.ci.on{background:var(--gold-soft);border-left-color:var(--gold)}
.ci .nm{font-weight:700;display:flex;gap:6px;align-items:center;min-width:0}
.ci .nm span.t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .last{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.ci .tm{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.ci .meta{display:flex;gap:5px;align-items:center;margin-top:3px}
.unread{background:var(--danger);color:#fff;border-radius:999px;font-size:10.5px;font-weight:700;padding:0 6px}
.chat-h{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ai-band{margin:10px 14px 0;border:1px solid var(--gold);background:var(--gold-soft);border-radius:9px;padding:9px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}
.ai-band.wait{border-color:var(--info);background:var(--info-soft)}
.ai-band.human{border-color:var(--line);background:var(--surface-2)}
.ai-band .cd{font-weight:800;font-size:15px}
.msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--bg)}
.m{max-width:76%;padding:8px 12px;border-radius:12px;font-size:13.5px;white-space:pre-wrap}
.m.in{background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.m.out{background:var(--green-deep);color:#F1EEDD;align-self:flex-end;border-bottom-right-radius:4px}
.m.ai{background:var(--gold-soft);color:var(--fg);border:1px solid var(--gold);align-self:flex-end;border-bottom-right-radius:4px}
.m.sys{align-self:center;background:transparent;color:var(--muted);font-size:12px;border:1px dashed var(--line)}
.who{font-size:11px;color:var(--muted);align-self:flex-end}
.who.l{align-self:flex-start}
.composer{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.composer textarea{resize:none;height:58px}
.prof{overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.box-y{border:1px solid var(--gold);background:var(--gold-soft);border-radius:9px;padding:10px 12px}
.oc{border:1px solid var(--line);border-radius:9px;padding:8px 10px;display:flex;flex-direction:column;gap:2px}

/* kanban */
.kb{display:grid;grid-template-columns:repeat(3,minmax(260px,1fr)) 220px;gap:12px;overflow-x:auto;align-items:start}
.kcol{background:var(--surface-2);border-radius:var(--r);padding:8px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.kcol .h{display:flex;align-items:center;font-weight:700;padding:4px 6px}
.lead{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:9px;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.lead.hot{border-left-color:var(--danger)}
.lead .ph-n{font-weight:800;font-size:14px}

/* modal */
.ov{position:fixed;inset:0;background:rgba(6,14,9,.55);z-index:80;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:max(30px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 30px max(12px,env(safe-area-inset-left,0px))}
.modal{background:var(--surface);border-radius:14px;width:min(760px,100%);box-shadow:0 20px 60px rgba(0,0,0,.35);border:1px solid var(--line)}
.modal .mh{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal .mh h2{margin:0;font-size:17px}
.modal .mb{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.modal .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.lines .ln{display:grid;grid-template-columns:minmax(0,1fr) 90px 110px 30px;gap:8px;align-items:center;padding:6px 0;border-bottom:1px dashed var(--line)}
.sum{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:13.5px;background:var(--surface-2);border-radius:9px;padding:10px 14px}
.sum .tot{font-size:17px;font-weight:800;color:var(--green)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--green-deep);color:#F3D27A;padding:10px 16px;border-radius:10px;z-index:90;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100% - 32px)}
.fab{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;background:var(--gold);color:#2A1A02;border:0;border-radius:999px;padding:10px 16px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.25);cursor:pointer}
.bell{position:relative}
.bell .n{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;font-size:10px;border-radius:999px;padding:0 5px;font-weight:700}
.notif{position:absolute;right:0;top:40px;width:320px;max-width:calc(100vw - 32px);z-index:70;padding:6px}
.notif .it{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:13px}
.notif .it:hover{background:var(--surface-2)}
.heat{display:grid;gap:3px}
.heat i{display:block;height:22px;border-radius:4px;font-size:10.5px;font-style:normal;display:grid;place-items:center;font-weight:700}
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.acc summary{padding:12px 14px;font-weight:700;cursor:pointer}
.acc .in{padding:0 14px 12px 32px;color:var(--fg)}
.toggle{display:flex;align-items:center;gap:10px}
.sw{width:40px;height:22px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;border:0;flex:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:var(--green)}.sw.on::after{left:21px}
.menu-btn{display:none}
.mob-nav{display:none}

@media (max-width:1180px){.inbox{grid-template-columns:290px minmax(0,1fr)}.inbox .prof-card{display:none}.g6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .app{grid-template-columns:minmax(0,1fr)}
  .rail{position:fixed;left:0;top:0;bottom:0;height:auto;width:260px;z-index:75;transform:translateX(-105%);transition:transform .2s;padding-top:max(14px,env(safe-area-inset-top,0px))}
  .rail.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .menu-btn{display:inline-flex}
  .g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2{grid-template-columns:minmax(0,1fr)}
  .inbox{grid-template-columns:minmax(0,1fr);height:auto}
  .inbox.chat-open .list-card{display:none}
  .inbox:not(.chat-open) .chat-card{display:none}
  .inbox .chat-card{height:calc(100vh - 140px);min-height:480px}
  .demo-bar .hide-s{display:none}
  .main{padding-bottom:110px}
  .mob-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--rail);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));justify-content:space-around}
  .mob-nav a{color:var(--rail-fg);text-decoration:none;font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-radius:8px;position:relative}
  .mob-nav a.on{color:#F3D27A}
  .mob-nav a .ic{font-size:16px}
  .mob-nav a .ct{position:absolute;top:0;right:0;background:#C2412D;color:#fff;font-size:9.5px;border-radius:999px;padding:0 4px}
  .fab{bottom:calc(70px + env(safe-area-inset-bottom,0px));padding:10px 13px}
  .fab .t{display:none}
  .lines .ln{grid-template-columns:minmax(0,1fr) 70px 90px 28px}
}
@media (max-width:520px){.g4,.g3,.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi .v{font-size:18px}.ph h1{font-size:19px}}

/* login */
.auth{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 20% 0%, #134d27 0%, var(--rail) 55%);padding-inline:max(16px,env(safe-area-inset-left,0px))}
.auth .box{width:min(400px,100%);background:var(--surface);border-radius:16px;padding:26px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:12px}
.auth .box img{width:84px;align-self:center}
.auth h1{margin:0;text-align:center;font-size:20px}
.auth .err{color:var(--danger);font-size:13px;min-height:18px}
.loading{padding:60px;text-align:center;color:var(--muted)}
.app{min-height:100vh}
.rail{top:0;height:100vh}
/* hội thoại thật: 2 cột */
.inbox.two{grid-template-columns:320px minmax(0,1fr)}
.chat-card .menu-btn{display:none}
@media (max-width:900px){.inbox.two{grid-template-columns:minmax(0,1fr)}.chat-card .menu-btn{display:inline-flex}}
.ci .meta .small{overflow:hidden;text-overflow:ellipsis}
/* ảnh sản phẩm */
.pthumb{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;border:1px solid var(--line);background:var(--surface-2)}
.pthumb.none{display:inline-grid;place-items:center;color:var(--muted)}
.pimgs{display:flex;flex-wrap:wrap;gap:8px}
.pimg{position:relative;width:92px}
.pimg img{width:92px;height:92px;object-fit:cover;border-radius:8px;border:1px solid var(--line);display:block}
.pimg .pill{position:absolute;left:4px;top:4px;font-size:10px}
.pimg .btn{position:absolute;top:2px;right:2px;padding:0 6px;min-height:22px;background:var(--surface)}
.pimg [data-first]{right:30px}