/* Bảng màu đo bằng tỉ lệ tương phản WCAG + tham khảo GitHub Primer và Material.
   Ba điều rút ra và làm theo:
   1. KHÔNG dùng đen tuyền — nền tối vừa phải để chữ trắng không bị loé
      (Material khuyến nghị #121212, GitHub dùng #0d1117).
   2. Tách lớp bằng ĐỘ NỔI chứ không bằng viền đậm: nền < thẻ < vùng lồng <
      hộp thoại, mỗi bậc sáng dần. Viền chỉ là nét phụ, cố ý để tinh tế
      (GitHub để #30363d ~1.4:1). Ép viền lên 3:1 sẽ ra giao diện bạc và chói.
   3. Màu nhấn giảm bão hoà so với chế độ sáng; chữ không dùng trắng tuyệt đối.

   THANG CHỮ 3 CẤP (theo mức nhấn mạnh của Material):
   --text    chữ chính, đọc nhiều nhất
   --text-2  chữ phụ VẪN PHẢI ĐỌC: nhãn ô nhập, tiêu đề bảng, mô tả ô
   --muted   chữ gợi ý, ghi chú bên lề — mờ nhất
   Trước đây chỉ có một mức --muted dùng cho cả hai loại, nên nhãn và
   tiêu đề bảng bị mờ như ghi chú.

   --line         viền trang trí (thẻ, kẻ bảng) — tinh tế
   --line-strong  ranh giới CHỨC NĂNG (ô nhập, nút) — chuẩn 3:1
   --elev         mặt nổi cao nhất: hộp thoại, bảng thả xuống
   --on-accent    nền nút; màu link sáng đem làm nền thì chữ trắng sẽ chìm */
:root{
  --bg:#f4f5f7; --panel:#fff; --panel-2:#fafbfc; --elev:#fff;
  --line:#dfe1e6; --line-soft:#e8eaee; --line-strong:#c1c7d0;
  --text:#172b4d; --text-2:#6b778c; --muted:#6b778c;
  --accent:#0052cc; --accent-2:#0747a6;
  --on-accent:#0052cc; --on-accent-h:#0747a6; --on-err:#de350b;
  --ok:#00875a; --ok-bg:#e3fcef; --warn:#ff8b00; --warn-bg:#fffae6;
  --err:#de350b; --err-bg:#ffebe6; --warnbox-fg:var(--warn);
  --shadow:0 1px 3px rgba(9,30,66,.14);
  --side:#0747a6; --side-text:#deebff;
}
[data-theme=dark]{
  --bg:#0d1117; --panel:#161b22; --panel-2:#1f242c; --elev:#262c36;
  --line:#30363d; --line-soft:#242a31; --line-strong:#5f6b78;
  --text:#e8eef5; --text-2:#bcc6d2; --muted:#939eaa;
  --accent:#58a6ff; --accent-2:#79c0ff;
  --on-accent:#1f6feb; --on-accent-h:#1a63d8; --on-err:#da3633;
  --ok:#3fb950; --ok-bg:#12261a; --warn:#d29922; --warn-bg:#2b2310;
  --err:#f85149; --err-bg:#2d1516; --warnbox-fg:var(--text);
  --shadow:0 1px 0 rgba(255,255,255,.04);
  --side:#10151c; --side-text:#c9d1d9;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
  font:14px/1.5 -apple-system,"Segoe UI",Roboto,system-ui,sans-serif}
h1{font-size:20px;margin:0}h2{font-size:14px;margin:0;font-weight:600}
h3{margin:0 0 8px}a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted);font-size:12px}.hidden{display:none!important}
.right{text-align:right}.app{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sidebar{width:230px;flex:none;background:var(--side);color:var(--side-text);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:10px;align-items:center;padding:18px 16px;color:#fff}
.brand small{display:block;opacity:.7;font-size:11px}
.logo{width:32px;height:32px;border-radius:8px;background:#fff;color:#0052cc;
  display:grid;place-items:center;font-weight:800}
nav{display:flex;flex-direction:column;padding:8px;gap:2px}
nav a{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:6px;
  color:var(--side-text);cursor:pointer;font-weight:500}
nav a i{font-style:normal;opacity:.8;width:16px;text-align:center}
nav a:hover{background:rgba(255,255,255,.1)}
nav a.active{background:rgba(255,255,255,.18);color:#fff}
.side-foot{margin-top:auto;padding:14px 16px;font-size:12px;border-top:1px solid rgba(255,255,255,.12)}
.side-foot .muted{color:rgba(255,255,255,.6)}

/* ---------- layout ---------- */
main{flex:1;min-width:0;padding:0 24px 32px}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 0;position:sticky;top:0;background:var(--bg);z-index:5}
.actions{display:flex;gap:8px;align-items:center}
.view{display:flex;flex-direction:column;gap:16px}
.grid{display:grid;gap:16px}
.grid.stats{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:1fr 1fr}
@media(max-width:1050px){.grid.stats{grid-template-columns:repeat(2,1fr)}.grid.two{grid-template-columns:1fr}}

/* ---------- card ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:16px;box-shadow:var(--shadow)}
.card-h{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:12px;flex-wrap:wrap}
.stat .label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-2)}
.stat b{display:block;font-size:26px;margin:6px 0 4px;font-weight:600}
.bar{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:var(--accent);width:0;transition:width .4s}

/* ---------- kanban ---------- */
.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.col{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:10px;min-height:110px}
.col h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;color:var(--text-2);letter-spacing:.04em}
.col-body{max-height:300px;overflow-y:auto;padding-right:2px}
.tick{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:4px;padding:8px;margin-bottom:8px;font-size:12px}
.tick b{display:block;font-size:12px}
.tick.pinned{border-left-color:var(--warn);background:var(--warn-bg)}
.btn.pin{padding:2px 7px;font-size:14px;line-height:1.2}
.btn.pin.on{background:var(--warn-bg);border-color:var(--warn)}

/* ---------- hướng dẫn ---------- */
.guide{line-height:1.7}
.guide h2{font-size:15px}
.guide ol,.guide ul{margin:0;padding-left:20px}
.guide li{margin-bottom:8px}
.guide p{margin:0 0 10px}
.guide td{vertical-align:top}
.guide td:first-child{white-space:nowrap;padding-right:14px}
.guide code{background:var(--panel-2);border:1px solid var(--line);padding:1px 6px;
  border-radius:4px;font-size:12px}

/* ---------- chart ---------- */
.chart{display:flex;align-items:flex-end;gap:8px;height:170px;padding-top:10px}
.chart .cbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;gap:6px;height:100%}
.chart .cbar span{width:100%;background:var(--accent);border-radius:4px 4px 0 0;min-height:2px;
  transition:height .4s}
.chart .cbar.weekend span{background:var(--line)}
.chart .cbar small{color:var(--text-2);font-size:11px}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-2);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
td{padding:9px 8px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
.scroll-y{max-height:280px;overflow:auto}
.empty{padding:22px;text-align:center;color:var(--text-2)}

/* ---------- form ---------- */
input,select,button,textarea{font:inherit;color:inherit}
input,select{background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;
  padding:7px 9px;width:100%}
input:focus,select:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--text-2)}
label input,label select{color:var(--text)}
.form{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.form{grid-template-columns:1fr}}
.form .wide{grid-column:1/-1}
.form-row,.inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.form-row input{flex:1}
.inline input{width:auto}
.chk{flex-direction:row;align-items:center;gap:6px;color:var(--text)}
.chk input{width:auto}
.cron-help{font-size:12px;color:var(--text-2)}
.cron-help code{background:var(--panel-2);border:1px solid var(--line);
  padding:1px 6px;border-radius:4px}

/* ---------- button / pill ---------- */
.btn{background:var(--panel);border:1px solid var(--line-strong);border-radius:5px;
  padding:7px 12px;cursor:pointer;font-weight:500}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--on-accent);border-color:var(--on-accent);color:#fff}
.btn.primary:hover{background:var(--on-accent-h);border-color:var(--on-accent-h)}
.btn.danger{background:var(--on-err);border-color:var(--on-err);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:4px 8px;font-size:12px}
.pill{background:var(--panel);border:1px solid var(--line);border-radius:99px;
  padding:5px 12px;font-size:12px}
.side-foot .pill{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.tag{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--panel-2);
  border:1px solid var(--line);color:var(--text-2)}
.badge{font-size:11px;padding:2px 8px;border-radius:99px;font-weight:600}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.skip{background:var(--warn-bg);color:var(--warn)}
.badge.error{background:var(--err-bg);color:var(--err)}
.tpl-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tpl-row .btn{font-size:12px;padding:5px 10px}
.paths{font-size:12px;color:var(--text-2);word-break:break-all;line-height:1.9}

/* ---------- helpdesk / chat ---------- */
input.mini{width:70px;display:inline-block;padding:4px 6px;text-align:right}
.chat{display:flex;flex-direction:column;gap:10px;max-height:52vh;overflow:auto;
  padding:12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:6px;margin-bottom:12px;min-height:180px}
.msg{padding:9px 12px;border-radius:8px;max-width:82%;white-space:pre-wrap;
  word-break:break-word;font-size:13px;border:1px solid var(--line);background:var(--panel)}
.msg .who{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}
.msg.user{align-self:flex-end;background:var(--on-accent);color:#fff;border-color:transparent}
.msg.user .who{color:rgba(255,255,255,.75)}
.msg.wait{align-self:flex-start;color:var(--muted);font-style:italic}

/* ---------- worklog / report ---------- */
.stat.clickable{cursor:pointer;transition:border-color .15s,transform .15s}
.stat.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
.stat b.up{color:var(--err)}.stat b.down{color:var(--ok)}
select.issue-picker{max-width:100%}
#dowRow{gap:14px}
tr.fresh td{background:var(--ok-bg);font-weight:600}
tr.od td:nth-child(5){color:var(--err)}
#feedCard{border-left:3px solid var(--accent)}
tr.junk td{background:var(--err-bg)}
tr.junk:hover td{filter:brightness(.97)}
/* Chế độ TỐI trước đây tô cả đoạn bằng màu cảnh báo -> khối chữ vàng rất khó đọc.
   Nay chữ đọc bằng màu thường, màu cảnh báo dồn vào viền trái + nền.
   Chế độ SÁNG giữ nguyên như cũ vì đang dùng tốt. */
.warnbox{margin-top:10px;padding:10px 12px;border-radius:6px;font-size:12px;
  background:var(--warn-bg);color:var(--warnbox-fg);
  border:1px solid var(--warn);border-left:3px solid var(--warn)}
[data-theme=dark] .warnbox b{color:var(--warn)}
.okbox{margin-top:10px;padding:10px 12px;border-radius:6px;font-size:12px;
  background:var(--ok-bg);color:var(--text);
  border:1px solid var(--ok);border-left:3px solid var(--ok)}
.okbox b{color:var(--ok)}
#rpKinds .bar{width:90px;display:inline-block;vertical-align:middle}
#rpEntries,#rpTickets{max-height:330px}

/* ---------- đang xử lý ---------- */
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes sp{to{transform:rotate(360deg)}}
.working{display:flex;align-items:center;gap:4px;padding:10px 12px;margin-top:10px;
  border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;
  background:var(--panel-2);font-size:13px}
.working b{font-weight:600}
.btn[disabled]{opacity:.55;cursor:progress}
/* Nút đang chạy: mờ nhẹ nhưng spinner phải rõ, và giữ chữ ở giữa như cũ. */
.btn[data-busy]{opacity:.8;cursor:progress}
.btn[data-busy] .spin{border-top-color:currentColor;margin-right:6px}
.btn.primary[data-busy] .spin,.btn.danger[data-busy] .spin{border-color:rgba(255,255,255,.45);
  border-top-color:#fff}

/* Thanh tiến trình mạng trên đỉnh trang */
#netbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  pointer-events:none;opacity:0;transition:opacity .15s}
#netbar.on{opacity:1}
#netbar span{display:block;height:100%;width:35%;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,transparent,var(--accent));
  animation:netslide 1.1s ease-in-out infinite}
@keyframes netslide{0%{margin-left:-35%}100%{margin-left:100%}}
body.net-busy{cursor:progress}

/* Trang đang nạp dữ liệu: làm mờ nội dung cũ để thấy rõ là chưa phải số mới */
.view.view-loading{opacity:.45;transition:opacity .15s;pointer-events:none}

/* ---------- thanh thông báo ---------- */
.notif-wrap{position:relative}
#btnBell{position:relative;font-size:15px;line-height:1}
.bell-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--on-err);color:#fff;font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--bg)}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(390px,88vw);z-index:70;
  background:var(--elev);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(0,0,0,.28);overflow:hidden}
.notif-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:11px 13px;border-bottom:1px solid var(--line)}
.notif-list{max-height:min(62vh,460px);overflow-y:auto}
.notif-item{display:flex;gap:9px;padding:11px 13px;border-bottom:1px solid var(--line-soft);
  cursor:pointer}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--panel-2)}
.notif-item.unseen{background:var(--panel-2)}
.notif-item.unseen .n-title::before{content:"";display:inline-block;width:7px;height:7px;
  border-radius:50%;background:var(--on-accent);margin-right:7px;vertical-align:1px}
.n-ico{font-size:16px;line-height:1.3;flex:none}
.n-body{flex:1;min-width:0}
.n-title{font-size:13px;font-weight:600;display:block}
.n-text{font-size:12px;color:var(--text-2);display:block;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.n-time{font-size:11px;color:var(--muted);margin-top:3px;display:block}
.n-del{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:15px;padding:0 2px;line-height:1;border-radius:4px}
.n-del:hover{color:var(--err);background:var(--err-bg)}

/* ---------- trang tổng quan dạng ô ---------- */
.hub-bar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hub-search{flex:1;min-width:240px;position:relative}
.hub-search input{width:100%;height:38px;padding:0 12px 0 34px;font-size:14px}
.hub-search::before{content:"⌕";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  font-size:19px;color:var(--muted);pointer-events:none}

.tile-grid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:14px 15px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  transition:border-color .12s,box-shadow .12s,transform .12s}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-1px)}
.tile-ico{font-size:20px;line-height:1}
.tile-t{font-size:14px;font-weight:600}
.tile-d{font-size:12.5px;color:var(--text-2);line-height:1.45}
.tile-hit:empty{display:none}
.tile-hit{font-size:11.5px;color:var(--accent);font-weight:600}
mark.hl{background:var(--warn-bg);color:inherit;border-radius:3px;padding:0 2px}

/* ---------- phân trang ---------- */
.pager{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pager .pg-nums{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.pg-n{min-width:30px;height:28px;padding:0 8px;background:var(--panel);
  border:1px solid var(--line);border-radius:5px;cursor:pointer;
  font:inherit;font-size:13px;color:inherit}
.pg-n:hover:not([disabled]):not(.on){background:var(--panel-2)}
.pg-n.on{background:var(--on-accent);border-color:var(--on-accent);color:#fff;font-weight:600}
.pg-n[disabled]{opacity:.4;cursor:default}
.pg-gap{padding:0 2px;align-self:center;color:var(--muted)}
.pager .pg-size{height:28px;padding:0 4px}
.pager label{display:flex;align-items:center;gap:6px}

/* ---------- toast / modal ---------- */
#toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;
  gap:8px;z-index:50}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:6px;padding:10px 14px;box-shadow:var(--shadow);max-width:400px;
  animation:in .2s ease}
.toast.ok{border-left-color:var(--ok)}.toast.err{border-left-color:var(--err)}
@keyframes in{from{opacity:0;transform:translateY(6px)}}
.modal{position:fixed;inset:0;background:rgba(9,30,66,.55);display:grid;place-items:center;z-index:60}
.modal-box{background:var(--elev);border-radius:8px;padding:20px;width:min(440px,92vw)}
.modal-box .right{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}

/* ---------- đề xuất AI cho ticket ---------- */
.modal-box.wide-box{width:min(820px,94vw)}
.advice-body{max-height:min(66vh,640px);overflow-y:auto;margin:4px 0 10px;
  font-size:14px;line-height:1.6}
.advice-body h4{margin:14px 0 4px;font-size:14px;color:var(--accent)}
.advice-body h4:first-child{margin-top:2px}
.advice-body ul{margin:4px 0 4px 20px}
.advice-body li{margin:2px 0}
.advice-body p{margin:6px 0}
.advice-body code{background:var(--panel-2);border-radius:4px;padding:1px 5px;font-size:13px}
.advice-body .src{background:var(--ok-bg);color:var(--ok);border-radius:5px;
  padding:6px 10px;margin:6px 0;font-size:13px}
.advice-body .guess{background:var(--warn-bg);color:var(--warn);border-radius:5px;
  padding:6px 10px;margin:6px 0;font-size:13px}
.btn.ai{border-color:var(--accent);color:var(--accent)}
.btn.ai.has{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}

/* ---------- biểu đồ báo cáo OKR ---------- */
.donut-wrap{display:flex;justify-content:center;padding:6px 0 2px}
.donut{transform:rotate(-90deg)}
.donut .seg{transition:stroke-dasharray .5s}
.donut-mid{transform:rotate(90deg);transform-origin:center}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;
  vertical-align:-1px}
.legend span{font-size:12px;color:var(--text-2)}
.krbar{margin-bottom:11px}
.krbar-h{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:4px}
.krbar-h b{font-weight:600}
.krbar-t{height:8px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.krbar-t i{display:block;height:100%;border-radius:99px;transition:width .5s}

/* ---------- riêng bản cloud ---------- */
.pill.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.warn-text{color:var(--warn)}
td.nowrap,.nowrap{white-space:nowrap}
table.kv td{padding:6px 10px;vertical-align:top}
table.kv td:first-child{color:var(--muted);white-space:nowrap;width:1%}
#btnLogout{display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;line-height:1}
#admUsers td:last-child button{margin-left:4px}

/* ---------- trang đăng nhập / đăng ký ----------
   Hai trang này chạy TRƯỚC khi có phiên nên không dùng lại khung .app ở trên;
   viết riêng, ngắn, và tự đủ. */
body.giua{display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:var(--bg);padding:20px}
.the{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:26px 24px;width:100%}
.the.hep{max-width:380px}
.the h1{margin:0 0 4px;font-size:20px;color:var(--text)}
.the .mo{margin:0 0 18px;font-size:13px;color:var(--text-2);line-height:1.5}
.the label{display:block;margin-bottom:12px;font-size:12px;font-weight:600;
  color:var(--text-2)}
.the label input{display:block;width:100%;margin-top:5px;padding:9px 11px;
  border:1px solid var(--line-strong);border-radius:6px;background:var(--panel-2);
  color:var(--text);font-size:14px;box-sizing:border-box}
.the label input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.the .chinh{width:100%;padding:10px;border:0;border-radius:6px;cursor:pointer;
  background:var(--on-accent);color:#fff;font-size:14px;font-weight:600}
.the .chinh:hover{background:var(--on-accent-h)}
.the .loi{background:var(--err-bg);color:var(--err);padding:9px 11px;
  border-radius:6px;font-size:13px;margin-bottom:14px}
.the .tot{background:var(--ok-bg);color:var(--ok);padding:9px 11px;
  border-radius:6px;font-size:13px;margin-bottom:14px}
.the .canh-bao{background:var(--warn-bg);color:var(--warnbox-fg);padding:9px 11px;
  border-radius:6px;font-size:12px;margin:14px 0 0;line-height:1.5}
.the .duoi{margin:16px 0 0;font-size:13px;text-align:center;color:var(--text-2)}
.the .duoi a{color:var(--accent);text-decoration:none}
.the .duoi a:hover{text-decoration:underline}

/* Toast lặp: đếm số lần thay vì xếp chồng nhiều dòng giống nhau. */
.toast[data-lap]::after{content:' d7' attr(data-lap);opacity:.75;font-weight:700}

/* ---------- màn hình hẹp (điện thoại, cửa sổ nhỏ) ----------
   Bản cloud mở được từ điện thoại nên bố cục hai cột cố định 230px không còn
   dùng được: nó đẩy nội dung tràn ngang và người đọc phải kéo qua kéo lại mới
   thấy hết một dòng. Dưới 820px, thanh bên nằm ngang thành dải cuộn ở đỉnh và
   mọi bảng tự cuộn trong khung của nó. */
@media(max-width:820px){
  .app{display:block}
  .sidebar{width:auto;height:auto;position:sticky;top:0;z-index:20}
  .brand{padding:12px 14px}
  .sidebar nav{flex-direction:row;overflow-x:auto;gap:4px;padding:0 8px 8px;
    scrollbar-width:none;-ms-overflow-style:none}
  .sidebar nav::-webkit-scrollbar{display:none}
  .sidebar nav a{white-space:nowrap;padding:8px 11px}
  .side-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
    margin-top:0;padding:0 12px 10px;border-top:0}
  main{padding:0 12px 24px}
  .topbar{flex-direction:column;align-items:stretch;gap:8px;padding:12px 0}
  .actions{flex-wrap:wrap}
  .grid.stats{grid-template-columns:1fr 1fr}
  .kanban{grid-template-columns:1fr}
  .card{padding:12px}
  .modal-box{width:auto;max-width:calc(100vw - 24px)}
  /* Bảng viết thẳng trong HTML (hướng dẫn, bảng khoá–giá trị) không đi qua hàm
     table() nên phải cho cuộn ở đây. */
  .guide table,table.kv{display:block;overflow-x:auto;max-width:100%}
}

/* Bảng do hàm table() dựng luôn nằm trong khung này để cuộn ngang riêng, thay
   vì đẩy cả trang tràn ra. */
.tbl-wrap{overflow-x:auto;max-width:100%}

/* Con của grid/flex mặc định là min-width:auto, nghĩa là chúng KHÔNG chịu co
   nhỏ hơn nội dung rộng nhất bên trong. Một bảng rộng nằm trong thẻ sẽ kéo cả
   cột grid rộng ra và đẩy tràn cả trang — thanh cuộn ngang mọc ở <body> chứ
   không phải ở cái bảng. Đặt min-width:0 để phần cuộn xảy ra đúng chỗ: trong
   .tbl-wrap của chính bảng đó. */
.view > *,.grid > *,.card{min-width:0}

/* Chữ dài trong ô: cắt bằng CSS nên có dấu …, di chuột ra cả câu, và bôi đen
   chép vẫn được nguyên văn. Trước đây cắt bằng JS ở 16 chỗ — cắt im lặng giữa
   câu, nhìn hệt như dữ liệu bị thiếu. */
.cut{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:bottom}

/* Cột cách nhau xa mà không có ranh giới thì mắt không ghép được ô với tiêu đề
   của nó — đọc ra một dãy chữ rời rạc chứ không ra bảng. */
th + th,td + td{border-left:1px solid var(--line-soft)}
thead th{border-bottom:2px solid var(--line);background:var(--panel-2)}
/* border-collapse:collapse bỏ qua border-radius, nên đừng đặt radius ở đây
   cho nó thành CSS chết — chỉ cần khung ngoài để bảng tách khỏi nền thẻ. */
.tbl-wrap table{border:1px solid var(--line)}

/* Chấm trạng thái: đủ để nói "ổn" mà không chiếm một dòng chữ. */
.cham{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px;
  vertical-align:middle;flex:none}
.cham.ok{background:var(--ok)}
.cham.err{background:var(--err)}
#connPill{display:inline-flex;align-items:center}