/* ZodyOS — giao diện chung. Cùng họ ZodyHunt (thanh đen, cam #FF6A00, kiểu macOS).
   Quy tắc màu: cam CHỈ cho mục đang chọn, 1 nút chính mỗi màn, số thông báo. Còn lại trắng/xám. */
:root{
  --bar:#141414;--bar2:#232323;--bar-line:#2c2c2c;--bar-fg:#ECECEC;--bar-mut:#9B9B9B;
  --acc:#FF6B1A;--acc-t:#E25500;--acc-w:rgba(255,106,0,.12);
  --bg:#F3F3F4;--side:#ECECEE;--surface:#FFFFFF;--surface2:#FAFAFB;--fg:#1D1D1F;--fg2:#3A3A3C;--mut:#6E6E73;
  --line:#E2E2E5;--line2:#F0F0F2;--hover:rgba(0,0,0,.04);--shadow:0 10px 30px rgba(0,0,0,.08);
  --ok:#15803D;--ok-w:#DCFCE7;--warn:#A16207;--warn-w:#FEF3C7;--bad:#B91C1C;--bad-w:#FEE2E2;--info:#1D4ED8;--info-w:#DBEAFE;
  --c-zalo:#0068FF;--c-msg:#8B5CF6;--c-tg:#229ED9;--c-mail:#6E6E73;--c-web:#0F766E;
  --side-w:232px;--r:12px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1C1C1E;--side:#202022;--surface:#2A2A2C;--surface2:#262628;--fg:#F2F2F7;--fg2:#D1D1D6;--mut:#98989D;
  --line:#3A3A3C;--line2:#313133;--hover:rgba(255,255,255,.05);--shadow:0 10px 30px rgba(0,0,0,.4);--acc-w:rgba(255,106,0,.16);--acc-t:#FF8A3D;
  --ok:#4ADE80;--ok-w:#052E16;--warn:#FBBF24;--warn-w:#3A2E0A;--bad:#F87171;--bad-w:#3B1212;--info:#93C5FD;--info-w:#172554;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1C1C1E;--side:#202022;--surface:#2A2A2C;--surface2:#262628;--fg:#F2F2F7;--fg2:#D1D1D6;--mut:#98989D;
  --line:#3A3A3C;--line2:#313133;--hover:rgba(255,255,255,.05);--shadow:0 10px 30px rgba(0,0,0,.4);--acc-w:rgba(255,106,0,.16);--acc-t:#FF8A3D;
  --ok:#4ADE80;--ok-w:#052E16;--warn:#FBBF24;--warn-w:#3A2E0A;--bad:#F87171;--bad-w:#3B1212;--info:#93C5FD;--info-w:#172554;
  color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:400 13.5px/1.5 "Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
b,strong,h1,h2,h3,h4,th{font-weight:600}
h1{font-size:20px;margin:0;letter-spacing:-.01em}
h2{font-size:15px;margin:0}
h3{font-size:13.5px;margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;font-size:13px;color:inherit}
.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
svg:not([width]){width:16px;height:16px;flex:none;vertical-align:-3px}
.bdg svg,.mut svg,.up svg{width:13px;height:13px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- logo ---------- */
.zlogo{display:inline-flex;align-items:center;gap:.42em;line-height:1;white-space:nowrap}
.zlogo .zmark{flex:none;display:block}
.zword{font-weight:800;letter-spacing:-.025em;color:var(--zfg)}
.zsuf{background:linear-gradient(135deg,#FFA126,#FF4D00);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:.04em}
.zlogo.zo .zword,.zlogo[style*="--zacc"] .zword{font-family:"Poppins","Be Vietnam Pro",sans-serif;font-weight:700;letter-spacing:-.03em}
.zlogo[style*="--zacc"] .zsuf{background:none;color:var(--zacc);margin-left:0}
.zapp{display:inline-grid;place-items:center;flex:none}

/* ---------- nút / ô nhập ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:5px 12px;border:1px solid var(--line);background:var(--surface);border-radius:8px;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.2}
.btn:hover{border-color:color-mix(in srgb,var(--fg) 28%,var(--line))}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.btn.pri:hover{background:var(--acc-t);border-color:var(--acc-t)}
.btn.dk{background:var(--fg);border-color:var(--fg);color:var(--bg);font-weight:600}
.btn.sm{min-height:26px;padding:2px 9px;font-size:12px;border-radius:7px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover)}
.btn svg{width:15px;height:15px}
input.in,select.in,textarea.in{min-height:32px;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);width:100%}
textarea.in{min-height:70px;resize:vertical}
:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 60%,transparent);outline-offset:1px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg button{all:unset;white-space:nowrap;padding:5px 11px;cursor:pointer;font-size:12.5px;color:var(--mut)}
.seg button.on{background:var(--fg);color:var(--bg);font-weight:600}

/* ---------- nhãn ---------- */
.bdg{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:99px;background:var(--line2);color:var(--fg2);white-space:nowrap}
.bdg.ok{background:var(--ok-w);color:var(--ok)}
.bdg.warn{background:var(--warn-w);color:var(--warn)}
.bdg.bad{background:var(--bad-w);color:var(--bad)}
.bdg.info{background:var(--info-w);color:var(--info)}
.bdg.acc{background:var(--acc-w);color:var(--acc-t)}
.tag{display:inline-block;font-size:11.5px;padding:0 7px;border:1px solid var(--line);border-radius:6px;color:var(--fg2);margin:1px 3px 1px 0;white-space:nowrap}
.ch{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:5px;color:#fff;font-size:10px;font-weight:700;flex:none}
.ch.zalo{background:var(--c-zalo)}.ch.msg{background:var(--c-msg)}.ch.tg{background:var(--c-tg)}.ch.mail{background:var(--c-mail)}.ch.web{background:var(--c-web)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mut)}
.dot.ok{background:#22C55E}.dot.warn{background:#F59E0B}.dot.bad{background:#EF4444}

/* ---------- khung app ---------- */
.top{position:sticky;top:0;z-index:40;height:52px;background:var(--bar);color:var(--bar-fg);display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #000}
.top .logo-link{text-decoration:none;display:inline-flex}
.ws{all:unset;display:inline-flex;align-items:center;gap:8px;padding:4px 10px 4px 6px;border:1px solid var(--bar-line);background:var(--bar2);border-radius:8px;cursor:pointer;font-size:13px;max-width:240px}
.ws:hover{border-color:#444}
.ws .wsav{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-weight:700;font-size:11px;background:#3a3a3c;color:#fff;flex:none}
.ws .wsn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws svg{width:14px;height:14px;color:var(--bar-mut)}
.region{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--bar-mut);border:1px solid var(--bar-line);border-radius:5px;padding:0 5px}
.sp{flex:1}
.search{display:flex;align-items:center;gap:7px;background:var(--bar2);border:1px solid var(--bar-line);border-radius:8px;padding:0 9px;height:32px;width:min(340px,30vw);color:var(--bar-mut)}
.search input{all:unset;flex:1;min-width:0;color:#fff;font-size:13px}
.search input::placeholder{color:#8a8a8a}
.search svg{width:15px;height:15px}
.kbd{font-size:11px;border:1px solid var(--bar-line);border-radius:4px;padding:0 4px;color:#8a8a8a}
.ib{all:unset;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--bar-fg);cursor:pointer;position:relative}
.ib:hover{background:#2a2a2a}
.ib svg{width:17px;height:17px}
.ib .n{position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:8px;background:var(--acc);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 3px}
.av{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#3A3A3C;color:#fff;font-weight:600;font-size:12.5px;flex:none}
.lang{all:unset;cursor:pointer;font-size:12px;font-weight:700;color:var(--bar-mut);border:1px solid var(--bar-line);border-radius:6px;padding:3px 7px}
.lang:hover{color:#fff}
#menuBtn{display:none}

.shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:calc(100vh - 52px)}
.side{background:var(--side);border-right:1px solid var(--line);padding:12px 10px;position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.side .grp{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:12px 10px 4px}
.side a{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--fg2);font-size:13.5px}
.side a svg{width:17px;height:17px;color:var(--mut);flex:none}
.side a:hover{background:var(--hover)}
.side a.on{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.side a.on svg{color:var(--acc)}
.side a .cnt{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:var(--acc);border-radius:99px;padding:0 6px}
.side a .soon{margin-left:auto;font-size:10px;color:var(--mut);border:1px solid var(--line);border-radius:5px;padding:0 5px}
.side .foot{margin-top:auto;padding:10px;border-top:1px solid var(--line);font-size:12px;color:var(--mut)}
.side .foot .bar{height:6px;border-radius:3px;background:var(--line);margin:6px 0 4px;overflow:hidden}
.side .foot .bar i{display:block;height:100%;background:var(--acc)}

.main{padding:22px 26px 60px;min-width:0}
.ph{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ph .sub{color:var(--mut);margin-top:3px}
.ph .act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- thẻ / lưới ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.card.flush{padding:0;overflow:hidden}
.card .hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.card .hd .r{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.card .hd .r{margin-left:auto}
.grid{display:grid;gap:14px}
.grid>*,.split>*,.shell>*{min-width:0}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g21{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.kpi .l{color:var(--mut);font-size:12.5px;display:flex;align-items:center;gap:6px}
.kpi .v{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:4px 0 2px}
.kpi .d{font-size:12px}
.up{color:var(--ok)}.down{color:var(--bad)}
.note{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--warn-w);color:var(--warn);font-size:12.5px}
.note.info{background:var(--info-w);color:var(--info)}
.note svg{width:16px;height:16px;flex:none;margin-top:1px}
.list{display:flex;flex-direction:column}
.li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line2)}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;background:var(--fg2);border-radius:3px}
.meter i.ok{background:#22C55E}.meter i.warn{background:#F59E0B}.meter i.bad{background:#EF4444}

/* biểu đồ cột nhỏ */
.bars{display:flex;align-items:flex-end;gap:6px;height:120px;padding-top:6px}
.bars div{flex:1;background:var(--line);border-radius:4px 4px 0 0;position:relative;min-width:6px}
.bars div.hi{background:var(--acc)}
.bars div:hover::after{content:attr(data-v);position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:11px;background:var(--fg);color:var(--bg);padding:1px 6px;border-radius:5px;white-space:nowrap;margin-bottom:4px}
.bars-x{display:flex;gap:6px;font-size:11px;color:var(--mut);margin-top:4px}
.bars-x span{flex:1;text-align:center}

/* ---------- bảng ---------- */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-size:12px;color:var(--mut);text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface2);position:sticky;top:0}
.tbl td{padding:9px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
.tbl tr.click{cursor:pointer}
.tbl td.num{white-space:nowrap}
.chs{display:inline-flex;gap:3px}
.tbl tr.click:hover td{background:var(--hover)}
.tbl td.r,.tbl th.r{text-align:right}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .av{width:30px;height:30px;font-size:12px;background:var(--line);color:var(--fg2)}
.who .nm{font-weight:600}
.who .em{font-size:12px;color:var(--mut)}

.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px;border-bottom:1px solid var(--line)}
.toolbar .in{width:auto}
.toolbar .q{position:relative;flex:1 1 300px;min-width:200px;max-width:420px}
.toolbar .q input{padding-left:30px}
.toolbar .q svg{position:absolute;left:9px;top:8px;width:15px;height:15px;color:var(--mut)}

/* ---------- 2 cột có thanh phân nhóm ---------- */
.split{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}
.seglist a{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;border-radius:8px;text-decoration:none;color:var(--fg2);cursor:pointer}
.seglist a:hover{background:var(--hover)}
.seglist a.on{background:var(--acc-w);color:var(--acc-t);font-weight:600}
.seglist .c{font-size:12px;color:var(--mut)}

/* ---------- ngăn trượt (drawer) ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:80;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--surface);z-index:90;box-shadow:-10px 0 40px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .22s ease;display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer .dh{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer .db{padding:16px 18px;overflow-y:auto;flex:1}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 12px;font-size:13px}
.kv dt{color:var(--mut)}
.kv dd{margin:0}
.tl{position:relative;padding-left:24px}
.tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl .ev{position:relative;padding:4px 0 10px}
.tl .ev::before{content:"";position:absolute;left:-23px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--mut)}
.tl .ev.acc::before{border-color:var(--acc)}
.tl .ev .t{font-size:11.5px;color:var(--mut)}
.consent{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.consent div{border:1px solid var(--line);border-radius:9px;padding:8px;font-size:12px}
.consent b{display:block;font-size:12.5px;margin-top:2px}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{all:unset;padding:8px 12px;cursor:pointer;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--fg);font-weight:600;border-bottom-color:var(--acc)}

/* ---------- pipeline (kanban) ---------- */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:12px;overflow-x:auto;padding-bottom:10px}
.col{background:var(--side);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:420px}
.col .ch-h{padding:10px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.col .ch-h .sum{margin-left:auto;font-size:12px;color:var(--mut)}
.col .cards{padding:8px;display:flex;flex-direction:column;gap:8px;flex:1}
.col.over{outline:2px dashed var(--acc);outline-offset:-4px}
.deal{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 11px;cursor:grab;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.deal:active{cursor:grabbing}
.deal.rot{border-color:color-mix(in srgb,#EF4444 55%,var(--line));box-shadow:inset 3px 0 0 #EF4444}
.deal .t{font-weight:600}
.deal .m{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--mut)}
.deal .m .v{margin-left:auto;font-weight:600;color:var(--fg)}
.deal .nx{margin-top:7px;font-size:12px;padding-top:7px;border-top:1px dashed var(--line);display:flex;gap:6px;align-items:center}
.deal .nx svg{width:13px;height:13px;color:var(--mut)}
.deal.drag{opacity:.4}

/* ---------- luồng tự động ---------- */
.flow{display:flex;flex-direction:column;align-items:center;gap:0;padding:10px 0}
.node{width:min(380px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:10px;align-items:center;cursor:pointer}
.node:hover{border-color:color-mix(in srgb,var(--fg) 30%,var(--line))}
.node.sel{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-w)}
.node .ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:var(--line2)}
.node .ic svg{width:16px;height:16px}
.node.trigger .ic{background:var(--acc-w);color:var(--acc-t)}
.node.wait .ic{background:var(--info-w);color:var(--info)}
.node.cond .ic{background:var(--warn-w);color:var(--warn)}
.node.send .ic{background:var(--ok-w);color:var(--ok)}
.node .k{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em}
.node .st{margin-left:auto;font-size:12px;color:var(--mut);text-align:right}
.flow .link{width:2px;height:22px;background:var(--line);position:relative}
.flow .link::after{content:"";position:absolute;bottom:-1px;left:-4px;border:5px solid transparent;border-top-color:var(--line)}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(780px,100%)}
.branch>div{display:flex;flex-direction:column;align-items:center}
.branch .lbl{font-size:11.5px;font-weight:600;margin-bottom:4px}
.addnode{all:unset;cursor:pointer;width:26px;height:26px;border-radius:50%;border:1px dashed var(--mut);display:grid;place-items:center;color:var(--mut)}
.addnode:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- hộp thư ---------- */
.inbox{display:grid;grid-template-columns:320px minmax(0,1fr) 280px;height:calc(100vh - 52px - 120px);min-height:520px}
.inbox .pane{border-right:1px solid var(--line);overflow-y:auto;min-width:0}
.inbox .pane:last-child{border-right:0}
.conv{display:flex;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line2);cursor:pointer}
.conv:hover{background:var(--hover)}
.conv.on{background:var(--acc-w)}
.conv .nm{font-weight:600;display:flex;gap:6px;align-items:center}
.conv .pv{font-size:12.5px;color:var(--mut)}
.conv .tm{margin-left:auto;font-size:11px;color:var(--mut);white-space:nowrap}
.conv .unread{width:8px;height:8px;border-radius:50%;background:var(--acc);margin-top:6px;flex:none}
.thread{display:flex;flex-direction:column;height:100%}
.thread .th{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--surface2)}
.bub{max-width:72%;padding:8px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:13.5px}
.bub.me{align-self:flex-end;background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bub .tm{display:block;font-size:10.5px;opacity:.6;margin-top:2px}
.bub.sys{align-self:center;background:transparent;border:0;color:var(--mut);font-size:12px}
.ai{margin:0 16px 8px;padding:9px 12px;border:1px dashed var(--acc);border-radius:10px;font-size:13px;display:flex;gap:10px;align-items:flex-start;background:var(--acc-w)}
.ai .lb{font-size:11px;font-weight:700;color:var(--acc-t);white-space:nowrap}
.compose{display:flex;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}
.compose input{flex:1}

/* ---------- cài đặt ---------- */
.dns{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;word-break:break-all}
.brandprev{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.brandprev .bt{height:46px;background:var(--bar);display:flex;align-items:center;padding:0 14px;gap:10px}
.brandprev .bb{padding:14px;display:flex;gap:8px;align-items:center}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{all:unset;width:28px;height:28px;border-radius:8px;cursor:pointer;border:2px solid transparent}
.swatches button.on{border-color:var(--fg)}
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:12.5px;color:var(--mut)}
.form label>span{color:var(--fg2);font-weight:600}

.empty{text-align:center;padding:40px 20px;color:var(--mut)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--fg);color:var(--bg);padding:9px 16px;border-radius:10px;font-size:13px;opacity:0;transition:.2s;z-index:100;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%)}

/* menu chọn workspace */
.pop{position:absolute;top:46px;left:0;width:300px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:60;display:none}
.pop.on{display:block}
.pop .ph2{font-size:11px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.05em;padding:8px 8px 4px}
.pop button.it{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;width:100%;padding:7px 8px;border-radius:8px;cursor:pointer}
.pop button.it:hover{background:var(--hover)}
.pop button.it.on{background:var(--acc-w)}
.pop .wsav{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-weight:700;font-size:11px;background:var(--line);flex:none}

/* trình soạn email: 2 cột trên máy tính, 1 cột (xem trước ở dưới) trên điện thoại */
.edgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.pvcol{position:sticky;top:66px}
@media (max-width:1000px){.edgrid{grid-template-columns:1fr}.pvcol{position:static}}

/* ---------- di động ---------- */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.inbox{grid-template-columns:280px minmax(0,1fr)}.inbox .pane.info{display:none}}
@media (max-width:860px){
  #menuBtn{display:inline-grid}
  .search,.top .kbd,.region{display:none}
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:52px;bottom:0;width:260px;z-index:70;transform:translateX(-100%);transition:transform .2s;height:auto}
  .side.on{transform:none;box-shadow:var(--shadow)}
  .main{padding:16px 16px 60px}
  .g3,.g2,.g21,.split{grid-template-columns:1fr}
  .inbox{grid-template-columns:1fr;height:auto}
  .inbox .pane.list-pane{max-height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .thread{min-height:460px}
  .consent{grid-template-columns:repeat(2,1fr)}
  .ws{max-width:150px}
  /* hàng nút / nhãn tự xuống dòng trên điện thoại (lỗi tràn mép phải ở Cài đặt → Thương hiệu, Tên miền gửi) */
  .main [style*="display:flex"]{flex-wrap:wrap}
  #taskForm,#inviteForm{grid-template-columns:1fr !important}
  .card .hd .r{margin-left:0}
  .dns{font-size:11px}
}
@media (max-width:520px){.g4{grid-template-columns:1fr 1fr}.kpi .v{font-size:20px}
  .top{gap:8px;padding:0 10px}.top .lang,#themeBtn,.top .ib[title="Thông báo"]{display:none}.ws{max-width:130px}
  .top .zlogo .zword{display:none}.ph .act{margin-left:0}}

/* Kết nối: thẻ chọn nền tảng */
.plat{border:1px solid var(--line);transition:border-color .15s,transform .15s}.plat:hover{border-color:var(--acc);transform:translateY(-1px)}