:root { --bg:#f6f7f9; --fg:#1b1f24; --muted:#5b6672; --card:#fff; --line:#dfe3e8; --accent:#1f6feb; --ok:#1a7f37; --warn:#9a6700; --bad:#d1242f; --chip:#eef1f5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg:#14171b; --fg:#e8ebee; --muted:#9aa5b1; --card:#1d2227; --line:#2d343b; --accent:#58a6ff; --ok:#3fb950; --warn:#d29922; --bad:#f85149; --chip:#2a3138; color-scheme:dark; } }
:root[data-theme=dark] { --bg:#14171b; --fg:#e8ebee; --muted:#9aa5b1; --card:#1d2227; --line:#2d343b; --accent:#58a6ff; --ok:#3fb950; --warn:#d29922; --bad:#f85149; --chip:#2a3138; color-scheme:dark; }
:root[data-theme=light] { color-scheme:light; }
* { box-sizing: border-box; }
[hidden] { display:none !important; }
body { margin:0; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
h1 { font-size:20px; margin:0; }
p { margin:6px 0; color:var(--muted); }
.gate { max-width:560px; margin:12vh auto 0; padding:0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
.shell { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
.side { background:var(--card); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:12px; }
.brand { font-weight:700; font-size:16px; padding:0 8px; }
nav { display:flex; flex-direction:column; gap:2px; flex:1; }
nav a { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; color:var(--fg); text-decoration:none; cursor:pointer; }
nav a.on { background:var(--chip); font-weight:600; }
nav .grp { margin:12px 0 2px; padding:4px 10px; width:100%; display:flex; align-items:center; gap:6px; justify-content:space-between; border:0; background:none; border-radius:6px; font-size:11px; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }
nav .grp:hover { background:var(--chip); }
nav .grp .chev { margin-left:auto; }
nav a .lbl { flex:1; } nav a .ico { width:20px; text-align:center; }
.pill { background:var(--bad); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:0 7px; min-width:20px; text-align:center; line-height:18px; }
.burger { display:inline-block; padding:5px 10px; }
.bottomnav { display:none; }
.themebtn { margin-left:auto; } .themebtn + .themebtn { margin-left:0; }
.top h1 { margin-right:auto; }
:root[data-nav=hidden] .shell { grid-template-columns:1fr; }
:root[data-nav=hidden] .side { display:none; }
.side { position:sticky; top:0; height:100vh; overflow-y:auto; }
nav a.soon { color:var(--muted); cursor:default; }
.who { padding:0 8px; font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.main { padding:20px; min-width:0; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; }
button, select, input, textarea { font:inherit; color:var(--fg); }
button { padding:7px 12px; border-radius:8px; border:1px solid var(--line); background:var(--card); cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger { color:var(--bad); }
button.link { border:0; background:none; padding:0; color:var(--accent); text-align:left; }
input, select, textarea { padding:7px 9px; border-radius:8px; border:1px solid var(--line); background:var(--bg); width:100%; }
textarea { min-height:70px; resize:vertical; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.kpi b { display:block; font-size:24px; }
.kpi span { color:var(--muted); font-size:12px; }
.kpi.warn b { color:var(--warn); }
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.filters input { max-width:260px; } .filters input[type=checkbox] { width:auto; max-width:none; } .filters label { display:flex; align-items:center; gap:5px; color:var(--fg); } .filters select { width:auto; }
.tablewrap { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow-x:auto; }
table { border-collapse:collapse; width:100%; min-width:760px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
tr:last-child td { border-bottom:0; }
td small, .muted { color:var(--muted); font-size:12px; display:block; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:var(--chip); }
.badge.online { color:var(--ok); } .badge.session_error, .badge.blocked { color:var(--bad); } .badge.pending_login, .badge.offline { color:var(--warn); }
.chip { display:inline-block; background:var(--chip); padding:1px 8px; border-radius:999px; font-size:12px; margin:0 4px 4px 0; }
.chip.def { outline:1px solid var(--accent); }
.warn { color:var(--warn); } .bad { color:var(--bad); }
.row { display:flex; gap:6px; flex-wrap:wrap; }
.empty { padding:28px; text-align:center; color:var(--muted); }
.toast { position:fixed; right:16px; bottom:16px; background:var(--fg); color:var(--bg); padding:10px 14px; border-radius:10px; z-index:10; max-width:80vw; }
.toast.err { background:var(--bad); color:#fff; }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--fg); padding:0; width:min(520px,94vw); }
dialog::backdrop { background:rgba(0,0,0,.45); }
#dlgForm { padding:16px; display:flex; flex-direction:column; gap:10px; max-height:88vh; overflow:auto; }
#dlgForm h2 { margin:0; font-size:17px; }
#dlgForm > * { flex-shrink:0; } /* ô cuộn (tablewrap…) không bị ép xẹp khi nội dung dài */
dialog.wide { width:min(1040px,96vw); }
#dlgForm .foot { position:sticky; bottom:-16px; background:var(--card); padding:10px 0 4px; margin:4px 0 -16px; border-top:1px solid var(--line); z-index:1; }
.scard { border:1px solid var(--line); border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; background:var(--bg, transparent); }
.scard > b { font-size:13px; }
.sgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sgrid .span2 { grid-column:1 / -1; }
.sgrid textarea { min-height:84px; resize:vertical; }
@media (max-width:700px) { .sgrid { grid-template-columns:1fr; } }
.f label { display:block; font-size:12px; color:var(--muted); margin-bottom:3px; }
.f .hint { font-size:12px; color:var(--muted); margin-top:3px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.checks { display:flex; flex-wrap:wrap; gap:6px 12px; }
.checks label { display:flex; align-items:center; gap:5px; color:var(--fg); font-size:13px; margin:0; }
.checks input { width:auto; }
.foot { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
@media (max-width: 760px) {
  .main { padding:14px 16px; } .two { grid-template-columns:1fr; }
}
textarea.big { min-height:180px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
select.mini { width:auto; padding:3px 6px; font-size:12px; }
.light { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; }
.light i { width:11px; height:11px; border-radius:50%; background:var(--muted); display:inline-block; }
.light.on { color:var(--ok); } .light.on i { background:var(--ok); box-shadow:0 0 6px var(--ok); }
.light.off { color:var(--bad); } .light.off i { background:var(--bad); box-shadow:0 0 6px var(--bad); }
.light.unk { color:var(--muted); font-weight:400; }
.inbox { display:grid; grid-template-columns:minmax(240px,340px) 1fr; gap:12px; margin-top:12px; min-height:420px; }
.convlist { background:var(--card); border:1px solid var(--line); border-radius:8px; overflow:auto; max-height:70vh; }
.conv { padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; } .conv.on, .conv:hover { background:var(--chip); }
.thread { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.msgs { flex:1; overflow:auto; max-height:55vh; display:flex; flex-direction:column; gap:6px; }
.msg { max-width:75%; padding:6px 10px; border-radius:10px; background:var(--chip); white-space:pre-wrap; word-break:break-word; }
.msg.out { align-self:flex-end; background:var(--accent); color:#fff; } .msg.out small { color:#fff; opacity:.8; }
.msgimg { display:block; max-width:260px; max-height:260px; background:#000; border-radius:8px; margin-bottom:4px; }
.chip.plat-telegram { background:#e6f4ff; } .chip.plat-whatsapp { background:#e6f9ec; } .chip.plat-facebook { background:#e8eefc; } .chip.plat-x { background:#eee; } .chip.plat-youtube { background:#fde8e8; } .chip.plat-threads { background:#ececec; }
.thread textarea { flex:1; }
@media (max-width:700px) { .inbox { grid-template-columns:1fr; } }
@media (max-width:820px) {
  .bottomnav { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:15; background:var(--card); border-top:1px solid var(--line); padding:4px 4px calc(4px + env(safe-area-inset-bottom)); }
  .bottomnav a, .bottomnav button { flex:1; display:flex; flex-direction:column; align-items:center; gap:0; padding:4px 2px; border:0; background:none; color:var(--muted); text-decoration:none; position:relative; border-radius:8px; font:inherit; }
  .bottomnav a.on { color:var(--accent); font-weight:600; }
  .bottomnav .ico { font-size:18px; } .bottomnav small { font-size:10px; } .bottomnav .pill { position:absolute; top:0; right:18%; }
  .main { padding-bottom:72px; }
  .shell { grid-template-columns:1fr; }
  .side { position:fixed; inset:0 30% 0 0; max-width:300px; z-index:20; transform:translateX(-102%); transition:transform .18s; box-shadow:0 0 24px rgba(0,0,0,.3); }
  body.navopen .side { transform:none; }
  body.navopen::after { content:""; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:10; }
  :root[data-nav=hidden] .side { display:flex; }
  .main { padding:12px; }
}
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.card + .card { margin-top:12px; }
.avatar-prev { width:72px; height:72px; border-radius:50%; object-fit:cover; display:block; margin-top:8px; }
.sugg .card { padding:10px; margin-top:6px; } .sugg p { margin:6px 0; white-space:pre-wrap; }

.kpi.link { cursor:pointer; } .kpi.link:hover { border-color:var(--accent, #4a7); }
.panel { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:16px; }
.panel h3 { margin:0 0 8px; font-size:15px; }
.todos, .steps { list-style:none; margin:0; padding:0; }
.todos li, .steps li { padding:8px 4px; border-top:1px solid var(--line); cursor:pointer; }
.todos li:first-child, .steps li:first-child { border-top:0; }
.todos li.bad b { color:#d33; } .todos li.warn b { color:var(--warn); } .todos .go { color:var(--muted); }
.steps li.done { color:var(--muted); text-decoration:line-through; cursor:default; }
.bar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--line); margin:6px 0; } .bar i.ok { background:#3a8; } .bar i.err { background:#d44; }

.palette { width:min(560px,92vw); padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--fg); margin-top:12vh; }
.palette::backdrop { background:rgba(0,0,0,.4); }
.palette input { width:100%; }
.plist { max-height:50vh; overflow-y:auto; margin-top:8px; }
.pitem { display:flex; gap:8px; align-items:baseline; padding:7px 10px; border-radius:8px; cursor:pointer; }
.pitem.on, .pitem:hover { background:var(--chip); }
.ptag { font-size:11px; text-transform:uppercase; color:var(--muted); min-width:74px; }

.chip.on { outline:2px solid var(--accent); } .chip.off { opacity:.75; cursor:pointer; }
.lbl-gray { background:var(--chip); } .lbl-red { background:#f8514933; } .lbl-orange { background:#f0883e44; } .lbl-yellow { background:#d2992244; } .lbl-green { background:#3fb95033; } .lbl-blue { background:#58a6ff33; } .lbl-purple { background:#a371f744; }
.metabox { border:1px solid var(--line); border-radius:8px; padding:6px 10px; margin:6px 0; } .metabox summary { cursor:pointer; color:var(--muted); font-size:12px; }
.note { padding:3px 0; border-top:1px dashed var(--line); font-size:13px; }

nav a.locked, .bottomnav a.locked { opacity:.55; }

.checklist{max-height:220px;overflow:auto;border:1px solid var(--line,#ddd);border-radius:8px;padding:6px 8px;margin:6px 0}
.checklist label{padding:3px 0}

.steps { margin:6px 0 10px 0; padding-left:4px; list-style:none; } .steps li { padding:3px 0; }
.prov { margin:8px 0 0; } .prov .row { margin:4px 0; align-items:center; }
.head { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:6px; } .head h2 { margin:0; }
label.ck { display:flex; align-items:center; gap:8px; margin:8px 0; } label.ck input { width:auto; }

.viewtenant{padding:8px 12px;border-bottom:1px solid var(--line,#ddd);display:flex;flex-direction:column;gap:4px}.viewtenant select{width:100%}

.settabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}details.fold{padding:0}details.fold>summary{cursor:pointer;padding:12px 14px;font-weight:600;list-style:none}details.fold>summary::before{content:'▸ ';}details.fold[open]>summary::before{content:'▾ ';}details.fold>*:not(summary){margin-left:14px;margin-right:14px}details.fold[open]{padding-bottom:12px}

/* menu: chế độ thu gọn chỉ còn biểu tượng */
:root[data-nav-rail] .shell { grid-template-columns:60px 1fr; }
:root[data-nav-rail] .side { padding:12px 6px; align-items:center; overflow-x:hidden; }
:root[data-nav-rail] .brand, :root[data-nav-rail] nav .lbl, :root[data-nav-rail] nav .grp, :root[data-nav-rail] .viewtenant, :root[data-nav-rail] .who { display:none; }
:root[data-nav-rail] nav a { justify-content:center; padding:8px 0; position:relative; } :root[data-nav-rail] nav a .pill { position:absolute; top:0; right:2px; padding:0 4px; min-width:16px; line-height:16px; font-size:10px; }
:root[data-nav-rail] .railbtn { padding:4px; }
.railbtn { align-self:flex-start; font-size:12px; color:var(--muted); }
@media (max-width:820px) { .railbtn { display:none; } :root[data-nav-rail] .shell { grid-template-columns:1fr; } :root[data-nav-rail] .side { align-items:stretch; padding:16px 12px; } :root[data-nav-rail] .brand, :root[data-nav-rail] nav .lbl, :root[data-nav-rail] nav .grp, :root[data-nav-rail] .who { display:revert; } }
/* danh sách tài khoản thu/mở */
.acctlist { display:flex; flex-direction:column; gap:8px; }
details.acct { background:var(--card); border:1px solid var(--line); border-radius:10px; }
details.acct > summary { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:10px 14px; cursor:pointer; list-style:none; }
details.acct > summary::before { content:'▸'; color:var(--muted); } details.acct[open] > summary::before { content:'▾'; }
details.acct .nm { font-weight:600; min-width:180px; } details.acct .meta { font-size:13px; color:var(--muted); display:inline-flex; gap:4px; align-items:center; flex-wrap:wrap; } details.acct .qa { margin-left:auto; }
.acctbody { padding:4px 14px 14px; border-top:1px solid var(--line); } .acctbody h4 { margin:12px 0 6px; font-size:13px; color:var(--muted); }
.acctgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:4px 24px; }
.kv2 { display:flex; gap:8px; padding:2px 0; font-size:14px; } .kv2 .k { color:var(--muted); min-width:96px; } .acctbody > .row { margin-top:12px; flex-wrap:wrap; }
.vs-health .ok { color:var(--ok); } .vs-health .bad { color:var(--bad); }
.vs-prog { display:flex; flex-direction:column; gap:2px; font-size:13px; }
a.btn { display:inline-block; padding:6px 12px; border:1px solid var(--line, #ccc); border-radius:6px; text-decoration:none; color:inherit; }
#dlgForm video { flex-shrink:0; }

/* Threads: ô soạn chuỗi */
.thparts { display:flex; flex-direction:column; gap:.6rem; margin:.4rem 0; }
.thpart { border:1px solid var(--line, #ddd); border-radius:8px; padding:.5rem .6rem; }
.thpart textarea { width:100%; box-sizing:border-box; margin-top:.3rem; }
.thalt { display:block; text-align:left; margin:.25rem 0; white-space:normal; }

.thread.loading { opacity:.55; transition:opacity .15s; }

/* Kho KOC TikTok: thanh tiến trình, trạng thái, bảng gọn để ít vỡ trên màn nhỏ */
.koc-head { display:flex; flex-direction:column; gap:6px; }
.koc-state { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-weight:600; }
.koc-dot { width:10px; height:10px; border-radius:50%; background:var(--muted); display:inline-block; flex:none; }
.koc-dot.on { background:var(--ok); } .koc-dot.bad { background:var(--bad); }
.koc-dot.live { background:var(--accent); animation:kocpulse 1.2s ease-in-out infinite; }
@keyframes kocpulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.35; transform:scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .koc-dot.live { animation:none; } }
.koc-bar { height:10px; border-radius:999px; background:var(--chip); overflow:hidden; }
.koc-bar > i { display:block; height:100%; width:0; background:var(--ok); border-radius:999px; transition:width .4s; }
.koc-meta { display:flex; gap:4px 18px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.koc-table table { min-width:560px; }
.koc-table td.num { white-space:nowrap; }
.koc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:12px 0; }
.koc-steps { list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:4px; }
.chip.ok { color:var(--ok); } .chip.warn { color:var(--warn); } .chip.bad { color:var(--bad); }
.ok { color:var(--ok); }
.filters select, .filters input { min-width:0; }
@media (max-width: 720px) { .filters input { max-width:none; flex:1 1 140px; } .filters select { flex:1 1 160px; } }

/* Live Hub */
.lv-feed{height:55vh;overflow-y:auto;border:1px solid var(--line,#ddd);border-radius:8px;padding:8px;margin-top:8px}
.lv-msg{padding:3px 0;word-break:break-word}.lv-msg button{opacity:.4;padding:0 6px}.lv-msg:hover button{opacity:1}
.lv-q{background:rgba(255,193,7,.18);border-radius:6px;padding-left:4px}.lv-k{opacity:.8}

/* ---- Hộp thoại 3 cột: danh sách | khung chat | ghi chú & việc ---- */
.inbox3 { grid-template-columns:minmax(260px,320px) minmax(0,1fr) minmax(260px,320px); gap:12px; align-items:stretch; height:calc(100vh - 190px); min-height:520px; }
.inbox3 .inbox-l { display:flex; flex-direction:column; gap:8px; min-height:0; }
.inbox3 .ltop { display:flex; flex-direction:column; gap:6px; } .inbox3 .ltop input { width:100%; } .inbox3 .ltop .tabs { display:flex; gap:6px; flex-wrap:wrap; }
.inbox3 .filtbox { border:1px solid var(--line); border-radius:8px; padding:4px 10px; background:var(--card); } .inbox3 .filtbox summary { cursor:pointer; color:var(--muted); font-size:12px; padding:2px 0; }
.inbox3 .filtbox .filters { flex-direction:column; align-items:stretch; margin:6px 0; } .inbox3 .filtbox select { width:100%; max-width:none; }
.inbox3 .convlist { flex:1; max-height:none; min-height:0; }
.inbox3 .thread { min-width:0; min-height:0; overflow:hidden; }
.inbox3 .msgs { max-height:none; min-height:0; flex:1; padding:4px 2px; }
.avatar { flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
.conv { display:flex; gap:10px; align-items:flex-start; }
.conv .cbody { flex:1; min-width:0; } .conv .cname { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .conv .row { flex-wrap:nowrap; align-items:center; gap:6px; }
.conv .ctime { margin-left:auto; font-size:11px; white-space:nowrap; } .conv .cprevtxt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conv .cfoot { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin-top:2px; } .conv.unread .cname { font-weight:800; } .conv.on { border-left:3px solid var(--accent); }
.thead { display:flex; align-items:center; gap:10px; padding-bottom:8px; border-bottom:1px solid var(--line); } .thead .tname { flex:1; min-width:0; } .thead h3 { margin:0; font-size:16px; } .thead .sidebtn { display:none; }
.composer { display:flex; gap:8px; align-items:flex-end; border-top:1px solid var(--line); padding-top:8px; } .composer textarea { flex:1; resize:none; } .composer .cbtns { display:flex; flex-direction:column; gap:6px; }
.dlgside { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px; overflow:auto; min-height:0; }
.dside { display:flex; flex-direction:column; gap:14px; } .dsec h4 { margin:0 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); } .dsec select, .dsec textarea, .dsec input { width:100%; }
.dsec.grow textarea { margin:6px 0; } .seg { display:flex; gap:4px; background:var(--chip); padding:3px; border-radius:8px; } .seg button { flex:1; border:0; background:none; padding:6px 8px; border-radius:6px; cursor:pointer; color:var(--fg); }
.seg button.on { background:var(--card); font-weight:600; box-shadow:0 1px 2px #0002; } .seg .pill { margin-left:6px; } .trow { display:flex; flex-direction:column; gap:6px; margin:6px 0; } .trow .row { gap:6px; flex-wrap:wrap; } .trow input, .trow select { flex:1 1 130px; min-width:0; }
.nlist { display:flex; flex-direction:column; gap:6px; margin-top:8px; } .nlist .note { background:var(--chip); border:0; border-radius:8px; padding:8px 10px; }
.task { display:flex; gap:8px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); } .task input { margin-top:3px; width:auto; }
.task .tbody { flex:1; min-width:0; } .task .ttext { word-break:break-word; } .task .tmeta { display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px; margin-top:3px; align-items:center; }
.task.done .ttext { text-decoration:line-through; color:var(--muted); } .task.late { border-color:var(--bad); background:#f8514910; } .due { color:var(--warn); } .due.late { color:var(--bad); font-weight:700; }
.tgroup { margin:14px 0; } .tgroup h3 { margin:0 0 6px; font-size:14px; } .tgroup.late h3 { color:var(--bad); } .tgroup .task { margin-bottom:6px; }
.chip.bad { background:#f8514933; color:var(--bad); font-weight:600; } .kpi.bad b { color:var(--bad); }
/* Bảng giám sát (quản lý) */
.supgrid { display:grid; grid-template-columns:minmax(0,2fr) minmax(260px,1fr); gap:16px; align-items:start; margin-top:12px; } .supgrid h3 { margin:6px 0; font-size:15px; }
.supwarn { border-color:var(--bad); display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.suptable th.sortable { cursor:pointer; } .suptable th.on { color:var(--accent); } .suprow { cursor:pointer; } .suprow:hover, .suprow.open { background:var(--chip); } .supdet td { background:var(--chip); } .suptasks { display:flex; flex-direction:column; gap:6px; }
.bars { display:flex; align-items:flex-end; gap:6px; height:110px; padding:6px 0; } .bar { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:14px; } .bar i { display:block; width:100%; background:var(--accent); border-radius:4px 4px 0 0; } .bar small { font-size:10px; color:var(--muted); margin-top:2px; }
@media (max-width:1279px) {
  .inbox3 { grid-template-columns:minmax(240px,300px) minmax(0,1fr); } .inbox3 .dlgside { display:none; } .inbox3.showside .dlgside { display:block; position:fixed; right:0; top:0; bottom:0; width:min(360px,92vw); z-index:30; border-radius:0; box-shadow:-8px 0 24px #0005; } .thead .sidebtn { display:inline-flex; }
}
@media (max-width:820px) { .inbox3 { grid-template-columns:1fr; height:auto; } .inbox3 .convlist { max-height:40vh; } .inbox3 .thread { min-height:60vh; } .supgrid { grid-template-columns:1fr; } }
/* Hướng dẫn */
.gd-search { display:flex; gap:8px; margin:0 0 10px; } .gd-search input { flex:1; font-size:15px; padding:10px 12px; }
.gd-cats { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 12px; } .gd-cats button { border-radius:999px; padding:5px 12px; font-size:13px; } .gd-cats button.on { background:var(--accent); border-color:var(--accent); color:#fff; } .gd-cats button small { opacity:.75; margin-left:4px; }
.gd-bar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }
.gd-list { display:grid; gap:10px; } .gd-item { text-align:left; display:block; width:100%; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; } .gd-item:hover { border-color:var(--accent); }
.gd-item h3 { margin:0 0 2px; font-size:15px; } .gd-item p { margin:2px 0 0; } .gd-item .meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px; font-size:12px; color:var(--muted); }
mark { background:#ffe58a; color:inherit; border-radius:3px; padding:0 1px; } :root[data-theme=dark] mark { background:#6b5400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) mark { background:#6b5400; } }
.gd-article { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 22px; max-width:900px; } .gd-article .back { margin-bottom:10px; }
.md { line-height:1.65; } .md h1 { font-size:22px; margin:0 0 10px; } .md h2 { font-size:18px; margin:22px 0 8px; } .md h3 { font-size:15px; margin:16px 0 6px; } .md p { color:var(--fg); margin:8px 0; }
.md ul, .md ol { margin:6px 0 8px 22px; padding:0; } .md li { margin:2px 0; } .md code { background:var(--chip); padding:1px 5px; border-radius:4px; font-size:13px; } .md pre { background:var(--chip); padding:10px 12px; border-radius:8px; overflow-x:auto; } .md pre code { background:none; padding:0; }
.md blockquote { margin:10px 0; padding:6px 12px; border-left:3px solid var(--accent); background:var(--chip); border-radius:0 8px 8px 0; } .md blockquote p { margin:4px 0; } .md hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.md table { border-collapse:collapse; margin:10px 0; display:block; overflow-x:auto; max-width:100%; } .md th, .md td { border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top; } .md th { background:var(--chip); }
.md a { color:var(--accent); cursor:pointer; }
.gd-edit textarea.big { min-height:340px; font-family:ui-monospace,Consolas,monospace; font-size:13px; }

/* Chuông cảnh báo (góc phải trên) */
.bellwrap { position:relative; }
.bellbtn { position:relative; padding:5px 10px; font-size:16px; line-height:1.2; }
.bellbtn .pill { position:absolute; top:-6px; right:-6px; }
.bellpanel { position:absolute; right:0; top:calc(100% + 8px); width:min(380px, 92vw); max-height:70vh; overflow-y:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px; box-shadow:0 8px 28px rgba(0,0,0,.25); z-index:30; }
.bellpanel[hidden] { display:none; }
.bellpanel .bitem { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:8px 4px; border-bottom:1px solid var(--line); }
.bellpanel .bitem:last-of-type { border-bottom:0; }
.bellpanel .bitem p { margin:0; grid-column:1 / -1; overflow-wrap:anywhere; }
.bellpanel .bfoot { display:block; text-align:center; padding:8px 0 2px; }
@media (max-width:820px) { .bellpanel { position:fixed; left:8px; right:8px; top:56px; width:auto; } }
/* Trang Hệ thống: bảng chọn tính năng */
.syshub { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.syscard { display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:inherit; text-decoration:none; position:relative; }
.syscard:hover, .syscard:focus-visible { border-color:var(--accent, currentColor); }
.syscard .ico { font-size:22px; }
.syscard b { font-size:15px; }
.syscard small { color:var(--muted); }
.syscard .pill { position:absolute; top:10px; right:10px; }
.backlink { font-size:13px; font-weight:400; margin-right:8px; }

/* Chỉ tiêu công việc */
.wkrow { padding:8px 0; border-bottom:1px solid var(--line); }
.wkrow:last-child { border-bottom:0; }
.wkhead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.wkbar { height:8px; border-radius:99px; background:var(--line); overflow:hidden; margin:6px 0 4px; }
.wkbar i { display:block; height:100%; background:var(--accent, #3a7); }
.wkrow.late .wkbar i { background:var(--bad); }
.wkrow.done .wkbar i { background:var(--ok, #2a8); }
.wkfoot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13px; }
.wkfoot button { padding:2px 8px; font-size:12px; }
.wkstaff { margin:10px 0 14px; } .wkstaff h4 { margin:0 0 4px; }
.chip.ok { background:#2a82; color:var(--ok, #2a8); font-weight:600; }
.wknum { width:90px; }
.wkpreview { margin-top:10px; }
input.wkpick, .wkpickbar input { width:20px; height:20px; padding:0; margin:0; cursor:pointer; flex:none; }
.wkpickbar { align-items:center; gap:14px; margin:8px 0; }
.wkpreview th:first-child, .wkpreview td:first-child { width:56px; text-align:center; }
label.chk { white-space:nowrap; display:inline-flex; align-items:center; gap:4px; margin-right:12px; }

/* ô ngày: Safari iPad/iPhone hay tràn khỏi hộp và hiện ô trống */
input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance:none; appearance:none; min-width:0; max-width:100%; min-height:38px; box-sizing:border-box; }

/* ===== Giao diện di động / iPad dọc (≤820px): kiểu ứng dụng ===== */
@media (max-width:820px) {
  html { -webkit-text-size-adjust:100%; }
  body { overscroll-behavior-y:none; }
  .shell { grid-template-columns:minmax(0,1fr); }
  .main { min-width:0; padding:0 12px calc(76px + env(safe-area-inset-bottom)); }
  #view { min-width:0; max-width:100%; }
  /* thanh trên: gọn một hàng (tiêu đề + tìm + chuông + giao diện), nút thao tác cuộn ngang ở hàng dưới */
  .top { position:sticky; top:0; z-index:12; background:var(--bg); margin:0 -12px 10px; padding:calc(8px + env(safe-area-inset-top)) 12px 8px; gap:8px; border-bottom:1px solid var(--line); flex-wrap:wrap; align-items:center; }
  .top h1 { order:1; flex:1 1 0; min-width:0; margin:0; font-size:18px; line-height:1.2; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; }
  .top h1 .backlink { font-size:12px; font-weight:500; color:var(--accent); text-decoration:none; line-height:1.1; }
  .burger { display:none; }
  #searchBtn, #themeBtn, .bellbtn { order:2; min-width:40px; min-height:40px; padding:0 10px; margin:0; display:inline-flex; align-items:center; justify-content:center; }
  #searchBtn .lbl, #themeBtn .lbl { display:none; }
  .bellwrap { order:3; }
  .actions { order:5; flex:1 0 100%; display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:2px 0 4px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .actions::-webkit-scrollbar { display:none; }
  .actions > * { flex:none; white-space:nowrap; }
  /* thanh điều hướng đáy: 5 tab nằm ngang */
  .bottomnav { flex-direction:row; align-items:stretch; gap:0; flex:none; padding:0 4px env(safe-area-inset-bottom); min-height:58px; box-shadow:0 -2px 12px rgba(0,0,0,.06); }
  .bottomnav a, .bottomnav button { min-width:0; justify-content:center; padding:6px 2px; gap:1px; }
  .bottomnav .ico { font-size:21px; line-height:1.1; }
  .bottomnav small { font-size:10.5px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bottomnav a.on::before { content:""; position:absolute; top:0; left:25%; right:25%; height:3px; border-radius:0 0 3px 3px; background:var(--accent); }
  .bottomnav a.on { background:none; }
  /* ngăn kéo menu đầy đủ */
  .side { inset:0 18% 0 0; max-width:320px; padding:calc(16px + env(safe-area-inset-top)) 12px calc(16px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  nav a { padding:11px 10px; }
  /* ô nhập: chữ 16px để iOS không tự phóng to; vùng chạm ≥40px */
  input, select, textarea { font-size:16px; min-height:40px; }
  input[type=checkbox], input[type=radio] { min-height:0; width:20px; height:20px; }
  button { min-height:40px; }
  .filters { gap:8px; } .filters select, .filters input { flex:1 1 140px; max-width:none; width:auto; } .filters select { height:auto; }
  details.filtbox .filters { flex-direction:row; align-items:stretch; } details.filtbox .filters > * { flex:1 1 140px; min-height:0; }
  /* các hàng chip/tab: một hàng cuộn ngang */
  .tabs { flex-wrap:nowrap; overflow-x:auto; margin:10px -12px; padding:0 12px 4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .tabs::-webkit-scrollbar { display:none; } .tabs > * { flex:none; white-space:nowrap; }
  /* bảng, lưới: không làm tràn trang */
  .tablewrap { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .supgrid, .two { grid-template-columns:minmax(0,1fr); }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .card, .panel { min-width:0; }
  h2 { font-size:17px; } h3 { font-size:15px; }
  /* hộp thoại: bảng trượt từ đáy, rộng hết màn */
  dialog, dialog.wide { width:100vw; max-width:100vw; margin:auto 0 0; border-radius:16px 16px 0 0; border-width:1px 0 0; max-height:92dvh; }
  #dlgForm { max-height:92dvh; padding:16px 14px calc(16px + env(safe-area-inset-bottom)); }
  #dlgForm .foot { bottom:calc(-16px - env(safe-area-inset-bottom)); padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
  #dlgForm .foot button { flex:1; }
  .toast { left:12px; right:12px; bottom:calc(70px + env(safe-area-inset-bottom)); max-width:none; text-align:center; }
  .bellpanel { top:calc(56px + env(safe-area-inset-top)); }
}
@media (min-width:821px) { #searchBtn .ico { margin-right:2px; } }

.thead .backlist { display:none; font-size:22px; line-height:1; padding:0 12px; }
@media (max-width:820px) {
  .inbox3 { grid-template-columns:minmax(0,1fr); height:auto; min-height:0; gap:8px; margin-top:6px; }
  .inbox3 .filtbox .filters > * { flex:none; width:100%; }
  .inbox3 .convlist { max-height:none; }
  .inbox3 .thread { display:none; }
  .inbox3.hasthread .thread { display:flex; min-height:calc(100dvh - 150px); }
  .inbox3.hasthread .inbox-l { display:none; }
  .inbox3 .ltop .tabs { flex-wrap:nowrap; }
  .thead .backlist { display:inline-flex; align-items:center; }
  .thead { position:sticky; top:62px; z-index:5; background:var(--card); }
  .msg { max-width:86%; }
  .composer { position:sticky; bottom:calc(60px + env(safe-area-inset-bottom)); background:var(--card); padding-top:6px; }
}

@media (max-width:820px) {
  .filters label, .inbox3 .filtbox .filters label { width:auto; justify-content:flex-start; flex:none; padding:4px 0; }
  .filters label input[type=checkbox] { margin:0; }
}

/* ---- Dashboard gọn: dải số liệu, phễu, chip lối tắt ---- */
.dashv .panel { border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.dashv .panel h3 { font-size:14px; margin:0 0 6px; }
.kstrip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden; }
.kcell { display:flex; flex-direction:column; gap:1px; padding:10px 14px; color:inherit; text-decoration:none; border-left:1px solid var(--line); min-width:0; }
.kcell:first-child { border-left:0; }
.kcell:hover, .kcell:focus-visible { background:var(--chip); }
.kcell .lb, .kcell .sub { font-size:12px; color:var(--muted); }
.kcell .bg { font-size:22px; font-weight:600; line-height:1.25; }
.kcell .bg small { display:inline; font-size:13px; font-weight:400; color:var(--muted); }
.kcell.warn .bg { color:var(--warn); }
.kcell .sub.bad { color:var(--bad); font-weight:600; }
.kbar { display:block; height:4px; border-radius:2px; background:var(--line); margin-top:5px; overflow:hidden; }
.kbar i { display:block; height:100%; border-radius:2px; background:var(--accent); }
.kcell .kbar i { background:var(--ok); } .kcell.warn .kbar i { background:var(--warn); }
.dash2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:12px; }
.dash2 .panel { margin-bottom:12px; }
.frow { margin:6px 0 8px; } .frow .ft { display:flex; justify-content:space-between; font-size:13px; color:var(--muted); } .frow .ft b { color:var(--fg); font-weight:600; }
.dgl { margin:8px 0 5px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.dgrp:first-of-type .dgl { margin-top:2px; }
.dchips { display:flex; flex-wrap:wrap; gap:6px; }
.dchip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); text-decoration:none; font-size:13px; }
.dchip:hover, .dchip:focus-visible { border-color:var(--accent); }
.dchip.locked { opacity:.55; }
.dchip .dico { display:inline-flex; color:var(--muted); font-size:14px; line-height:1; }
.dchip .dico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dchip:hover .dico { color:var(--accent); }
.dchip .pill { line-height:16px; min-width:16px; padding:0 5px; font-size:10px; }
@media (max-width:820px) {
  .kstrip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kcell:nth-child(odd) { border-left:0; } .kcell:nth-child(n+3) { border-top:1px solid var(--line); }
  .dash2 { grid-template-columns:minmax(0,1fr); gap:0; }
}

/* ---- Hộp thoại gọn: dải tài khoản, bộ lọc, tab ---- */
.accbar { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin:0 0 8px; }
.accbar > .muted { flex:none; font-size:12px; white-space:nowrap; padding-top:5px; }
details.accs { flex:1; min-width:0; }
details.accs > summary { list-style:none; display:inline-flex; align-items:center; gap:8px; max-width:100%; padding:4px 11px; border:1px solid var(--line); border-radius:999px; background:var(--card); font-size:13px; font-weight:600; cursor:pointer; }
details.accs > summary::-webkit-details-marker { display:none; }
details.accs .asum { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
details.accs .dot { flex:none; width:9px; height:9px; border-radius:50%; background:var(--muted); }
details.accs.ok .dot { background:var(--ok); box-shadow:0 0 6px var(--ok); } details.accs.part .dot { background:var(--warn); } details.accs.bad .dot { background:var(--bad); box-shadow:0 0 6px var(--bad); }
details.accs.ok > summary { color:var(--ok); } details.accs.part > summary { color:var(--warn); } details.accs.bad > summary { color:var(--bad); }
details.accs .caret { flex:none; color:var(--muted); font-size:11px; transition:transform .15s; } details.accs[open] .caret { transform:rotate(180deg); }
.acclist { margin-top:8px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
.accg { margin:2px 0 5px; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.accg:not(:first-child) { margin-top:10px; }
.accrow { display:flex; flex-wrap:wrap; gap:6px; }
.accrow .light { padding:2px 9px; border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:500; background:var(--bg); }
.accrow .light i { width:8px; height:8px; box-shadow:none !important; }
.inbox3 .filtbox summary { display:flex; align-items:center; gap:6px; }
.fcount { background:var(--accent); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:0 6px; line-height:16px; }
.inbox3 .filtbox .filters { gap:6px; }
.inbox3 .filtbox .filters label { padding:2px 0; }
.filters input[type=checkbox] { flex:none; width:auto; min-height:0; margin:0; }
.tabs button .chip { display:inline-block; margin:0 0 0 6px; padding:0 7px; line-height:18px; font-size:11px; vertical-align:baseline; }
.tabs button { white-space:nowrap; }
.inbox3 .scopebar { flex-wrap:nowrap; overflow-x:auto; margin:0; padding-bottom:2px; scrollbar-width:none; } .inbox3 .scopebar::-webkit-scrollbar { display:none; }
.inbox3 .scopebar button, .inbox3 .ltop .tabs button { flex:none; padding:5px 11px; font-size:13px; }
@media (max-width:820px) {
  .accbar { margin-bottom:6px; }
  details.filtbox .filters > * { flex:none; }
  .inbox3 .filtbox .filters label { width:auto; }
}

.accbar > .muted { max-width:40%; overflow:hidden; text-overflow:ellipsis; }

/* ---- Menu dưới chân điện thoại: kiểu Telegram (icon đường nét, tab đang chọn có nền tròn, huy hiệu gọn) ---- */
@media (max-width:820px) {
  .bottomnav { background:var(--card); background:color-mix(in srgb, var(--card) 86%, transparent); -webkit-backdrop-filter:saturate(1.6) blur(16px); backdrop-filter:saturate(1.6) blur(16px); border-top:1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow:none; padding:6px 6px calc(6px + env(safe-area-inset-bottom)); min-height:0; gap:2px; }
  .bottomnav a, .bottomnav button { gap:3px; padding:0; min-height:50px; justify-content:center; border-radius:12px; color:var(--muted); font-weight:500; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
  .bottomnav a:active, .bottomnav button:active { transform:scale(.94); }
  .bottomnav .ico { display:flex; align-items:center; justify-content:center; width:54px; height:28px; border-radius:14px; font-size:20px; line-height:1; transition:background .18s ease, color .18s ease; }
  .bottomnav .ico svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:fill .18s ease; }
  .bottomnav small { font-size:11px; line-height:1.1; letter-spacing:.01em; }
  .bottomnav a.on { color:var(--accent); font-weight:600; }
  .bottomnav a.on .ico { background:color-mix(in srgb, var(--accent) 15%, transparent); }
  .bottomnav a.on .ico svg { stroke-width:2; fill:color-mix(in srgb, currentColor 16%, transparent); }
  .bottomnav a.on::before { content:none; }
  .bottomnav .pill { top:1px; right:auto; left:calc(50% + 6px); min-width:18px; padding:0 5px; line-height:17px; font-size:10.5px; font-weight:700; box-shadow:0 0 0 2px var(--card); }
}