/* ============================================================================
   KIT GIAO DIEN — sinh TU DONG tu <style> cua public/giaodien.html
   Chay lai: node scripts/xuat-kit-giaodien.js   (DUNG sua tay file nay)

   VI SAO: chu shop chot 24/08/2026 "dua toan bo len chinh va chi dau noi so
   thoi" — tuc UI/UX lay tu ban mau, gauux chi thay du lieu gia bang du lieu
   that. Chinh dan ban cu la cach da thu bon lan va lan nao cung con lech.

   Moi selector duoc them tien to .qt  de nam trong khung ung dung; body
   va html doi thanh .qt; khoi :root BO DI vi token da nam trong
   public/css/thuong-hieu.css va hai ben trung gia tri.

   18 lop TRUNG TEN voi app duoc GIU BAN CUA APP — xem TRUNG trong script.

   ---------------------------------------------------------------------------
   NGUONG DIEN THOAI = 900px, MOT SO DUY NHAT CHO CA HE. Dung doi le mot ben.

   Truoc 28/08/2026 co HAI so: kit cat o 820px, style.css cat o 900px. Do la
   CUNG MOT cong tac bi khai o hai cho, va no bi tach lam doi vi cach sinh tep
   nay: lop app, sidebar, topbar nam trong TRUNG (giu ban cua app), nen
   (khong dau nhay nguoc trong khoi nay: ca doan nam trong mot template
    literal, mot dau backtick la dong chuoi som va ca tep thanh loi cu phap)
   NUA VO cua cong tac trong ban mau —
       .app{display:block}  .sidebar{display:none}  .topbar{height:58px}
   — bi loai het khoi kit.css, chi con lai NUA NOI DUNG (luoi gap lai mot cot,
   bang cuon ngang, vung bam 44px) o 820px. App thi cung cap nua vo o 900px.

   Ket qua la mot khe rong 80px, 821-900px, khong ai thiet ke cho no:
   vo da sang che do dien thoai (sidebar an, thanh tab duoi hien) trong khi
   noi dung van con o che do may tinh (luoi nhieu cot, chua co boc cuon ngang,
   vung bam con 32px). Do khong phai mot khoang hiem: iPad Air / iPad Pro 11"
   doc la dung 834px, va no roi vao giua khe.

   Chon 900 chu khong phai 820, ly do do duoc chu khong phai so thich:
     - Ha app xuong 820 la phai viet lai 130 luat / 14 khoi cua style.css roi
       kiem lai tung man; nang kit len 900 la doi mot so o ban mau.
     - Va 820 lam KHO MAN TRUNG GIAN TE HON: o 834px sidebar van hien, cot noi
       dung chi con 834-272=562px o ban mau (834-264=570px o app). Bang nhieu
       cot khong vua, ma boc cuon ngang thi phai duoi 820 moi bat. Tuc dung
       khoang do la vua khong du cho vua khong co duong cuon.
   900 thi 768px va 834px (ca hai kho iPad doc) deu duoc doi xu nhu nhau.
   ---------------------------------------------------------------------------
   ============================================================================ */

.qt{
  /* --- xanh thuong hieu: NEN va CHU la HAI VAI, tach lam hai bien --- */
  --brand:var(--qt-g700); --brand-hover:var(--qt-g600); --brand-pressed:var(--qt-g800);
  --brand-soft:var(--qt-g50); --accent:var(--qt-g500);
  /* --brand-chu: xanh thuong hieu khi no lam MAU CHU. --brand (#146C43) la mau
     NEN cua nut chinh; dem chinh no dat len be mat toi thi chi con 2,58:1. Ban
     -chu co bac nhat cho tong toi. Do that 27/08/2026 tren .link-btn,
     .alert-item button va .eyebrow.
     (Khong dau nhay nguoc trong chu thich nay: ca khoi nam trong mot template
     literal, mot dau backtick la dong chuoi som va ca tep thanh loi cu phap.) */
  --brand-chu:var(--qt-g700-chu);
  --brand-fill:var(--qt-g100); --brand-line:var(--qt-g200);
  --ink:var(--qt-ink); --text:var(--qt-than); --muted:var(--qt-ink3);
  /* --muted-2: chu phu tren NEN CO MAU. --muted (#64748B) chi dat 4,76:1 tren
     trang — khong con du du de chiu mot lop nen nhat: do that 27/08/2026, chu
     phu trong .alert-item nam tren nen amber 11% chi con 4,16:1, truot AA. */
  /* Qua --qt-ink2 chu KHONG go thang --gx-neutral-600: hai ben BANG NHAU o tong
     sang, nhung dai --gx-* khong co ban toi — de nguyen thi o tong toi day la
     chu #475569 tren nen #1B1726, do duoc 2,31:1. */
  --muted-2:var(--qt-ink2);
  --line:var(--qt-line); --line-strong:var(--gx-neutral-300);
  /* Vach chia va mang xam NHAT nhat — cung mot bac trung tinh, hai vai. Giu hai
     ten de ngay nao chung phai tach ra thi khong phai di doc lai tung cho. */
  --line-2:var(--qt-line2); --fill-2:var(--qt-line2);
  --bg:var(--qt-paper); --surface:var(--qt-white);
  /* The hero TOI o ca hai tong, nen chu tren no khong lat theo --ink. */
  --hero-bg:var(--qt-hero); --tren-hero:var(--qt-tren-hero);
  --tren-hero-2:var(--qt-g100-tx); --tren-xanh:var(--qt-tren-xanh);
  /* Vang / do cung mot luat: *-chu la CHU, *-fill la NEN va VIEN.
     --warning truoc day tro toi --qt-amber (#F59E0B) trong khi ban mau khai
     #92400E — mot mau lech han. --qt-amber-chu la dung ma mau do, va no co
     ban toi. */
  --warning:var(--qt-amber-chu); --warning-fill:var(--qt-amber); --warning-bg:var(--qt-amber-bg);
  --error:var(--qt-red-chu); --error-fill:var(--qt-red); --error-bg:var(--qt-red-bg);
  --info:var(--qt-blue); --success:var(--gx-success);
  /* THANG NHIET — CO Y KHONG LAT THEO TONG. Ba bac phai giu dung thu tu dam
     dan; bo token chi co ban toi cho g100 va g200, khong co g300. Lat hai bac
     dau ma bac ba dung yen la thang doc nguoc — mot ban do nhiet noi sai con
     te hon mot ban do nhiet hoi choi. Xanh nhat tren nen toi van doc duoc. */
  --heat-1:var(--gx-brand-100); --heat-2:var(--gx-brand-200); --heat-3:var(--gx-brand-300);
  /* Hai gia tri duoi GIU NGUYEN dang rgba, khong co token tuong duong:
     - focus-ring: vien sang mau xanh 32%, dung o CA HAI tong (no nam tren mau
       gi cung noi). Bo token khong co bien nao cho vien tieu diem.
     - scrim: man che sau hop thoai. Toi o ca hai tong theo dinh nghia — mot
       man che sang la mot man che khong che gi.
     De o day thay vi rai trong luat: mot cho sua, va test biet ma mien. */
  --focus-ring:rgba(32,165,103,.32);
  --scrim:rgba(15,23,42,.45);
  --kinh:var(--qt-kinh);
  --chart-1:var(--qt-g700); --chart-2:var(--qt-g500); --chart-3:var(--qt-blue);
  --chart-4:var(--gx-neutral-400);
}

/* ---------------------------------------------------------------------------
   TONG TOI

   Phan lon kit tu lat duoc va KHONG can mot dong nao o day: moi mau da tro toi
   --qt-*, ma --qt-* co san ban toi trong thuong-hieu.css. Do la cach
   dung — khai tong toi MOT CHO, khong phai hai ban song song roi mot ngay lech.

   Khoi duoi chi cho nhung bien con tro toi dai --gx-*, va dai do KHONG CO
   BAN TOI. De nguyen thi:
     --line-strong  #CBD5E1  vien xam CHOI 11,8:1 tren #1B1726 — mot vien nhan
                             manh khong duoc sang hon ca chu
     --success      #16A34A  cham xanh 5,3:1, con doc duoc nhung lech ton so voi
                             xanh thuong hieu da lat
     --info/-chart-3 #2563EB net ve xanh duong 3,7:1 — mo di gan het
     --chart-1      #146C43  net ve xanh la 3,0:1 — gan bien mat tren #0F0D15
   Ba thu duoi la NET VE, chung phai SANG LEN. Rieng --line-strong nguoc lai:
   phai TOI DI, nhung khong duoc toi qua — neutral-600 chi con 2,31:1, duoi
   nguong 3:1 cua thanh phan phi van ban, ma cai keo cua menu Them chinh la mot
   thanh phan nhu vay. neutral-500 do 3,69:1. --chart-2 (#20A567) va --chart-4 (#94A3B8) van du tuong
   phan tren nen toi nen khong dong vao.

   [data-th="toi"] .qt co do dac hieu (0,2,0), thang .qt (0,1,0) o tren.
   --------------------------------------------------------------------------- */
[data-th="toi"] .qt{
  --line-strong:var(--gx-neutral-500);
  --success:var(--qt-g700-chu);
  --info:var(--qt-blue-chu);
  --chart-1:var(--qt-g700-chu);
  --chart-3:var(--qt-blue-chu);
}

.qt *{box-sizing:border-box}
.qt .skip-link{position:fixed;left:12px;top:8px;z-index:100;transform:translateY(-140%);padding:10px 14px;border-radius:8px;background:var(--brand);color:var(--tren-xanh)}
.qt .skip-link:focus{transform:none}
.qt button{font:inherit}
.qt button, .qt a{transition:background .18s,color .18s,border .18s,transform .18s}
.qt button:focus-visible, .qt a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.qt [tabindex="-1"]:focus{outline:none}
.qt .shop{width:calc(100% - 8px);margin:0 4px 22px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:left;cursor:pointer}
.qt .shop small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.qt .shop strong{display:flex;align-items:center;justify-content:space-between;color:var(--ink);font-size:12px}
.qt .nav-label{padding:0 10px 8px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:0}
.qt .nav{display:grid;gap:4px}
.qt .nav button{display:flex;align-items:center;gap:11px;width:100%;border:0;border-radius:8px;background:transparent;padding:10px 11px;color:var(--text);cursor:pointer;text-align:left;font-size:14px;font-weight:500}
.qt .nav button:hover{background:var(--bg)}
.qt .nav button.active{color:var(--brand-chu);background:var(--brand-soft);font-weight:700}
.qt .nav svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.qt .nav .count{margin-left:auto;min-width:22px;padding:2px 6px;border-radius:999px;background:var(--fill-2);color:var(--muted);font-size:12px;text-align:center}
.qt .nav .active .count{background:var(--brand-fill);color:var(--brand-chu)}
.qt .sidebar-bottom{margin-top:auto}
.qt .more-phap{display:flex;flex-wrap:wrap;gap:8px 14px;padding:14px 4px 4px;margin-top:6px;border-top:1px solid var(--line)}
.qt .more-phap a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font-size:12px;line-height:1.5;text-decoration:none}
.qt .more-phap a:hover{color:var(--brand-chu)}
.qt .side-phap{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 4px 12px;padding-top:12px;border-top:1px solid var(--line)}
.qt .side-phap a{color:var(--muted);font-size:12px;line-height:1.5;text-decoration:none;border-bottom:1px solid transparent}
.qt .side-phap a:hover{color:var(--brand-chu);border-bottom-color:currentColor}
.qt .help{margin:0 4px 12px;padding:14px;border:1px solid var(--brand-line);border-radius:16px;background:var(--brand-soft)}
.qt .help strong{display:block;color:var(--ink);font-size:12px;margin-bottom:4px}
.qt .help p{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--muted)}
.qt .help a{color:var(--brand-chu);font-size:12px;font-weight:700;text-decoration:none}
.qt .user{display:flex;align-items:center;gap:10px;padding:10px}
.qt .avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-fill);color:var(--brand-chu);font-size:12px;font-weight:800}
.qt .user strong{display:block;color:var(--ink);font-size:12px}
.qt .user small{color:var(--muted);font-size:12px}
.qt main{min-width:0}
.qt .mobile-brand{display:none;align-items:center;flex:0 0 auto}
.qt .mobile-brand img{display:block;width:78px;height:auto}
.qt .top-actions{display:flex;align-items:center;gap:9px}
.qt .icon-btn{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.qt .icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.qt .icon-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.qt .primary{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:8px;background:var(--brand);color:var(--tren-xanh);padding:10px 14px;font-size:12px;font-weight:700;cursor:pointer}
.qt .primary:hover{background:var(--brand-hover)}
.qt .content{max-width:1500px;margin:0 auto;padding:32px}
.qt .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.qt .eyebrow{display:flex;align-items:center;gap:8px;color:var(--brand-chu);font-size:12px;font-weight:700;margin-bottom:7px}
.qt .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.qt h1{margin:0;color:var(--ink);font-size:28px;line-height:1.2;letter-spacing:-.7px}
.qt .page-head p{margin:7px 0 0;color:var(--muted);font-size:14px}
.qt .date{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:9px 12px;color:var(--text);font-size:12px;font-weight:600}
.qt .up{color:var(--brand-chu);font-weight:700}
.qt .section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 12px}
.qt .section-head h2{margin:0;color:var(--ink);font-size:16px;letter-spacing:-.2px}
.qt .section-head p{margin:3px 0 0;color:var(--muted);font-size:12px}
.qt .link-btn{border:0;background:transparent;color:var(--brand-chu);font-size:12px;font-weight:700;cursor:pointer}
.qt .agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.qt .agent{position:relative;overflow:hidden;padding:17px;border:1px solid var(--line);border-radius:16px;background:var(--surface);cursor:pointer;text-align:left}
.qt .agent:hover{transform:translateY(-2px);border-color:var(--brand-line);}
.qt .agent.selected{border-color:var(--brand-chu)}
.qt .agent-top{display:flex;align-items:center;gap:11px}
.qt .agent-icon{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--brand-soft);color:var(--brand-chu)}
.qt .agent-icon.ads, .qt .agent-icon.hr, .qt .agent-icon.care{background:var(--brand-soft);color:var(--brand-chu)}
.qt .agent-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.qt .agent-title{min-width:0}
.qt .agent-title strong{display:block;color:var(--ink);font-size:12px}
.qt .agent-title small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;margin-top:2px}
.qt .dot{width:6px;height:6px;border-radius:50%;background:var(--success)}
.qt .agent-score{margin-left:auto;color:var(--ink);font-family:Inter,system-ui,-apple-system,"Segoe UI","Noto Sans",sans-serif;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700}
.qt .agent-task{margin:15px 0 13px;min-height:38px;color:var(--text);font-size:12px;line-height:1.55}
.qt .progress{display:block;height:4px;border-radius:999px;background:var(--fill-2);overflow:hidden}
.qt .progress i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.qt .agent.ads .progress i, .qt .agent.hr .progress i, .qt .agent.care .progress i{background:var(--brand)}
.qt .agent-meta{display:flex;justify-content:space-between;margin-top:9px;color:var(--muted);font-size:12px}
.qt .workspace{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);gap:16px}
.qt .panel{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.qt .panel-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 17px;border-bottom:1px solid var(--line)}
.qt .panel-head h2{margin:0;color:var(--ink);font-size:14px}
.qt .panel-head span{color:var(--muted);font-size:12px}
.qt .filters{display:flex;gap:5px}
.qt .filter{border:1px solid transparent;border-radius:8px;background:transparent;padding:6px 8px;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.qt .toolbar .filter{flex:0 0 auto;white-space:nowrap}
.qt .filter.active{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-chu)}
.qt .decision{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;padding:15px 17px;border-bottom:1px solid var(--line);align-items:start}
.qt .decision:last-child{border-bottom:0}
.qt .risk{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--warning-bg);color:var(--warning)}
.qt .risk.high{background:var(--error-bg);color:var(--error)}
.qt .risk.low{background:var(--brand-soft);color:var(--brand-chu)}
.qt .risk svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.qt .decision strong{display:block;color:var(--ink);font-size:12px;margin-bottom:4px}
.qt .decision p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.qt .source{display:inline-flex;margin-top:8px;padding:3px 6px;border-radius:4px;background:var(--fill-2);color:var(--muted);font:12px/1.5 Inter,system-ui,sans-serif}
.qt .decision-actions{display:flex;gap:6px}
.qt .approve, .qt .reject{border-radius:8px;padding:7px 9px;font-size:12px;font-weight:700;cursor:pointer}
.qt .approve{border:0;background:var(--brand);color:var(--tren-xanh)}
.qt .reject{border:1px solid var(--line);background:var(--surface);color:var(--text)}
.qt .decision.done{opacity:.48}
.qt .decision.done .decision-actions{display:none}
.qt .activity{padding:3px 17px 8px}
.qt .event{position:relative;display:grid;grid-template-columns:25px 1fr auto;gap:9px;padding:13px 0}
.qt .event:not(:last-child):after{content:"";position:absolute;left:12px;top:38px;bottom:-5px;width:1px;background:var(--line)}
.qt .event-icon{z-index:1;display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--brand-soft);color:var(--brand-chu)}
.qt .event-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.qt .event strong{display:block;color:var(--ink);font-size:12px}
.qt .event p{margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.qt .event time{color:var(--muted);font:12px/1.5 Inter,system-ui,sans-serif}
.qt .bottom-nav{display:none}
.qt .toast{position:fixed;right:24px;bottom:24px;z-index:20;display:flex;align-items:center;gap:10px;max-width:420px;padding:12px 14px;border:1px solid var(--brand-line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:12px;transform:translateY(120px);opacity:0;pointer-events:none}
.qt .toast.show{transform:none;opacity:1;pointer-events:auto}
.qt .toast svg{width:17px;height:17px;fill:none;stroke:var(--brand-chu);stroke-width:2.2}
.qt .toast-action{display:none;min-height:44px;border:0;border-radius:8px;background:var(--brand);color:var(--tren-xanh);padding:8px 10px;font-weight:700}
.qt .toast.has-action .toast-action{display:inline-flex;align-items:center}
.qt .more-dialog{width:min(420px,calc(100% - 32px));padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--text)}
.qt .more-dialog::backdrop{background:var(--scrim)}
.qt .more-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}
.qt .more-head h2{margin:0;font-size:18px}
.qt .more-close{min-width:44px;min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:20px}
.qt .more-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px}
.qt .more-links button{min-height:48px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;text-align:left;padding:12px}
.qt .more-links button:hover{border-color:var(--brand-chu);background:var(--brand-soft)}
.qt .post{padding:16px 0;border-top:1px solid var(--line)}
.qt .post:first-of-type{border-top:0;padding-top:0}
.qt .post-head{display:flex;align-items:center;gap:10px}
.qt .post-head>div{min-width:0;flex:1}
.qt .post-head p{margin:2px 0 0;color:var(--muted);font-size:12px}
.qt .post>p{margin:12px 0;color:var(--text);font-size:12px;line-height:1.6}
.qt .post-actions{display:flex;gap:8px;flex-wrap:wrap}
.qt .post-actions button{min-height:44px}
.qt .review-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .review-head{display:block}
  .qt .review-head .review-actions{margin-top:12px}
}
.qt .review-head h1{margin-bottom:7px}
.qt .review-head p{margin:0;color:var(--muted);font-size:12px}
.qt .review-actions{display:flex;gap:8px}
.qt .secondary{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);padding:9px 12px;font-size:12px;font-weight:700;cursor:pointer}
.qt .secondary:hover{border-color:var(--line-strong);background:var(--bg)}
.qt .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.qt .review-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(290px,.7fr);gap:14px}
.qt .review-grid.equal{grid-template-columns:repeat(2,minmax(0,1fr))}
.qt .card-pad{padding:17px}
.qt .card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.qt .card-title h2{margin:0;color:var(--ink);font-size:14px}
.qt .card-title span{color:var(--muted);font-size:12px}
.qt .toolbar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.qt .kpi-meta{display:block;margin-top:4px;color:var(--muted);font-style:normal;font-size:12px;line-height:1.5}
.qt .data-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.5}
.qt .data-table th{padding:11px 13px;background:var(--bg);color:var(--muted);font-size:12px;text-align:left;font-weight:700}
.qt .data-table td{padding:12px 13px;border-top:1px solid var(--line-2);color:var(--text);font-variant-numeric:tabular-nums}
.qt .data-table td strong{display:block;color:var(--ink);font-size:12px}
.qt .data-table td small{display:block;margin-top:3px;color:var(--muted);font-size:12px}
.qt .money{font-family:Inter,system-ui,-apple-system,"Segoe UI","Noto Sans",sans-serif;font-variant-numeric:tabular-nums;color:var(--ink);font-weight:700}
.qt .row-action{min-height:44px;border:0;background:transparent;color:var(--brand-chu);font-size:12px;font-weight:700;cursor:pointer}
.qt .mini-list{display:grid}
.qt .mini-item{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.qt .mini-item:last-child{border:0}
.qt .mini-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:var(--brand-soft);color:var(--brand-chu);font-size:12px;font-weight:800}
.qt .mini-item div{min-width:0;flex:1}
.qt .mini-item strong{display:block;color:var(--ink);font-size:12px}
.qt .mini-item p{margin:3px 0 0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt .mini-item time{color:var(--muted);font-size:12px}
.qt .bar-row{margin:12px 0}
.qt .bar-row header{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--muted);font-size:12px}
.qt .bar-row header strong{color:var(--ink)}
.qt .bar{height:7px;border-radius:999px;background:var(--fill-2);overflow:hidden}
.qt .bar i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.qt .inbox{display:grid;grid-template-columns:260px minmax(0,1fr) 250px;min-height:590px}
.qt .conversation-list{border-right:1px solid var(--line)}
.qt .conversation{display:flex;gap:9px;padding:12px;border-bottom:1px solid var(--line-2)}
.qt .conversation.active{background:var(--brand-soft)}
.qt .conversation .avatar{flex:0 0 auto;width:32px;height:32px}
.qt .conversation div{min-width:0}
.qt .conversation strong{display:block;color:var(--ink);font-size:12px}
.qt .conversation p{margin:3px 0;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt .conversation time{color:var(--muted);font-size:12px}
.qt .chat-pane{display:flex;flex-direction:column;background:var(--bg)}
.qt .chat-head{padding:13px;border-bottom:1px solid var(--line);background:var(--surface)}
.qt .chat-head strong{display:block;color:var(--ink);font-size:12px}
.qt .chat-head span{color:var(--muted);font-size:12px}
.qt .messages{flex:1;padding:18px}
.qt .bubble{max-width:74%;margin-bottom:9px;padding:9px 11px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12px;line-height:1.5}
.qt .bubble.me{margin-left:auto;background:var(--brand);border-color:var(--brand);color:var(--tren-xanh)}
.qt .composer{margin:12px;padding:11px;border:1px solid var(--brand-line);border-radius:12px;background:var(--surface)}
.qt .composer small{display:block;color:var(--brand-chu);font-size:12px;font-weight:700;margin-bottom:5px}
.qt .composer p{margin:0;color:var(--text);font-size:12px}
.qt .profile-pane{padding:15px;border-left:1px solid var(--line);background:var(--surface)}
.qt .profile-pane h3{margin:0 0 14px;color:var(--ink);font-size:12px}
.qt .field{padding:9px 0;border-bottom:1px solid var(--line-2)}
.qt .field small{display:block;color:var(--muted);font-size:12px}
.qt .field strong{display:block;margin-top:3px;color:var(--ink);font-size:12px}
.qt .settings-layout{display:grid;grid-template-columns:210px 1fr;gap:14px}
.qt .settings-nav{padding:8px}
.qt .settings-nav button{display:block;width:100%;min-height:40px;border:0;border-radius:8px;background:transparent;padding:9px 10px;color:var(--text);font-size:12px;text-align:left}
.qt .settings-nav button.active{background:var(--brand-soft);color:var(--brand-chu);font-weight:700}
.qt .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.qt .form-field label{display:block;margin-bottom:6px;color:var(--text);font-size:12px;font-weight:700}
.qt .form-field input, .qt .form-field select, .qt .form-field textarea{width:100%;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:10px 11px;color:var(--ink);font:14px/1.5 Inter}
.qt .form-field input:focus-visible, .qt .form-field select:focus-visible, .qt .form-field textarea:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.qt .form-field textarea{min-height:82px;resize:vertical}
.qt .form-field.full{grid-column:1/-1}
.qt .empty-action{display:grid;place-items:center;min-height:300px;padding:30px;text-align:center}
.qt .empty-action .agent-icon{margin-bottom:13px}
.qt .empty-action h2{margin:0 0 7px;color:var(--ink);font-size:18px}
.qt .empty-action p{max-width:380px;margin:0 0 15px;color:var(--muted);font-size:14px;line-height:1.6}
.qt .platform-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.qt .platform-card{padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.qt .platform-card h2{margin:0 0 7px;color:var(--ink);font-size:14px}
.qt .platform-card p{min-height:42px;margin:0 0 14px;color:var(--muted);font-size:12px;line-height:1.55}
.qt .platform-meta{display:flex;flex-wrap:wrap;gap:7px}
.qt .scope-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding:11px 13px;border:1px solid var(--brand-line);border-radius:12px;background:var(--brand-soft);font-size:12px}
.qt .scope-line b{color:var(--ink)}
.qt .layer-stack{display:grid;gap:9px}
.qt .layer{display:grid;grid-template-columns:160px 1fr auto;gap:14px;align-items:center;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .layer strong{color:var(--ink);font-size:12px}
.qt .layer p{margin:3px 0 0;color:var(--muted);font-size:12px}
.qt .state-flow{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}
.qt .state-node{padding:11px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);font-size:12px;text-align:center}
.qt .state-node.active{border-color:var(--brand-chu);background:var(--brand-soft);color:var(--brand-chu);font-weight:700}
.qt .state-node.fail{border-color:var(--error-fill);background:var(--bg);color:var(--error)}
.qt .policy-grid, .qt .connector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qt .policy-card, .qt .connector{padding:15px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .policy-card header, .qt .connector header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.qt .policy-card h3, .qt .connector h3{margin:0;color:var(--ink);font-size:14px}
.qt .policy-card p, .qt .connector p{margin:6px 0 12px;color:var(--muted);font-size:12px;line-height:1.55}
.qt .matrix{overflow:auto;border:1px solid var(--line);border-radius:12px}
.qt .matrix .data-table th, .qt .matrix .data-table td{text-align:center;white-space:nowrap}
.qt .matrix .data-table th:first-child, .qt .matrix .data-table td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
.qt .allow{color:var(--brand-chu);font-weight:800}
.qt .deny{color:var(--error);font-weight:800}
.qt .inherited{color:var(--muted)}
.qt .builder{display:grid;grid-template-columns:210px minmax(360px,1fr) 270px;min-height:490px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.qt .builder-side{padding:14px;border-right:1px solid var(--line)}
.qt .builder-side:last-child{border:0;border-left:1px solid var(--line)}
.qt .node{margin-bottom:9px;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:12px}
.qt .canvas{padding:26px;background:var(--bg)}
.qt .canvas .node{max-width:260px;margin:0 auto 28px;position:relative}
.qt .canvas .node:not(:last-child):after{content:"↓";position:absolute;left:50%;bottom:-24px;color:var(--muted)}
.qt .demo-state{padding:12px;border-left:3px solid var(--warning-fill);background:var(--warning-bg);color:var(--warning);font-size:12px;line-height:1.55}
.qt .action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .action-bar small{color:var(--muted)}
.qt .golden-path{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.qt .golden-step{padding:12px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);text-align:center;font-size:12px;color:var(--muted)}
.qt .golden-step strong{display:block;margin-bottom:5px;color:var(--ink)}
.qt .demo-banner{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 18px;border-bottom:1px solid var(--warning-fill);background:var(--warning-bg);color:var(--warning);font-size:12px;font-weight:600}
.qt .demo-banner strong{color:var(--warning)}
.qt .operating-model{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.qt .mode-card{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .mode-card.active{border-color:var(--brand-chu)}
.qt .mode-card strong{display:block;color:var(--ink);font-size:14px}
.qt .mode-card p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55}
.qt .mode-card .chip{margin-top:10px}
.qt .filter, .qt .source, .qt .agent-title small, .qt .agent-meta, .qt .panel-head span, .qt .event p, .qt .event time, .qt .mini-item p, .qt .mini-item time, .qt .field small, .qt .conversation p, .qt .conversation time, .qt .chat-head span, .qt .composer small, .qt .object-row small, .qt .object-row time, .qt .timeline-item p, .qt .timeline-item time, .qt .kanban-card p, .qt .kanban-meta, .qt .step, .qt .cal-cell, .qt .tree-row, .qt .queue-nav button, .qt .approval-inspector p{font-size:12px;line-height:1.5}
.qt .agent-title strong, .qt .decision strong, .qt .event strong, .qt .mini-item strong, .qt .field strong, .qt .conversation strong, .qt .chat-head strong, .qt .object-row strong, .qt .timeline-item strong, .qt .kanban-card strong, .qt .kanban-head, .qt .step b, .qt .tree-row{font-size:12px;line-height:1.5}
.qt .decision p, .qt .composer p{font-size:12px;line-height:1.6}
.qt .icon-btn, .qt .filter, .qt .row-action, .qt .object-row, .qt .queue-nav button, .qt .link-btn, .qt .settings-nav button{min-width:44px;min-height:44px}
.qt .filter{padding:10px 12px}
.qt .agent-score{font-family:Inter,system-ui,-apple-system,"Segoe UI","Noto Sans",sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.qt .object-shell{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:620px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.qt .object-list{border-right:1px solid var(--line);background:var(--surface)}
.qt .object-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;width:100%;padding:13px 14px;border:0;border-bottom:1px solid var(--line-2);background:var(--surface);text-align:left;cursor:pointer}
.qt .object-row:hover, .qt .object-row.active{background:var(--brand-soft)}
.qt .object-row strong{display:block;color:var(--ink);font-size:12px}
.qt .object-row small{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.55}
.qt .object-row time{color:var(--muted);font-size:12px}
.qt .object-detail{min-width:0;background:var(--bg)}
.qt .object-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px;border-bottom:1px solid var(--line);background:var(--surface)}
.qt .object-header h2{margin:0 0 5px;color:var(--ink);font-size:18px}
.qt .object-header p{margin:0;color:var(--muted);font-size:12px}
.qt .object-actions{display:flex;gap:7px}
.qt .object-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:0}
.qt .object-main{padding:20px}
.qt .inspector{padding:18px;border-left:1px solid var(--line);background:var(--surface)}
.qt .inspector h3{margin:0 0 12px;color:var(--ink);font-size:12px}
.qt .timeline{display:grid}
.qt .timeline-item{position:relative;display:grid;grid-template-columns:28px 1fr;gap:10px;padding:0 0 18px}
.qt .timeline-item:not(:last-child):before{content:"";position:absolute;left:13px;top:27px;bottom:0;width:1px;background:var(--line)}
.qt .timeline-dot{z-index:1;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:var(--brand-soft);color:var(--brand-chu);font-size:12px;font-weight:800}
.qt .timeline-item strong{display:block;color:var(--ink);font-size:12px}
.qt .timeline-item p{margin:3px 0;color:var(--muted);font-size:12px;line-height:1.5}
.qt .timeline-item time{color:var(--muted);font-size:12px}
.qt .kanban{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:12px;overflow-x:auto}
.qt .kanban-col{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--fill-2)}
.qt .kanban-head{display:flex;justify-content:space-between;margin-bottom:10px;color:var(--ink);font-size:12px;font-weight:700}
.qt .kanban-head span{color:var(--muted)}
.qt .kanban-card{margin-bottom:9px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
.qt .kanban-card strong{display:block;color:var(--ink);font-size:12px}
.qt .kanban-card p{margin:5px 0 9px;color:var(--muted);font-size:12px;line-height:1.5}
.qt .kanban-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.qt .stepper{display:grid;grid-template-columns:repeat(5,1fr);margin-bottom:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.qt .step{position:relative;padding:13px 12px;border-right:1px solid var(--line);color:var(--muted);font-size:12px}
.qt .step:last-child{border:0}
.qt .step b{display:block;margin-bottom:4px;color:var(--ink);font-size:12px}
.qt .step.done{background:var(--brand-soft)}
.qt .step.done b{color:var(--brand-chu)}
.qt .step.active{border-bottom:3px solid var(--brand)}
.qt .calendar{display:grid;grid-template-columns:86px repeat(7,1fr);border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}
.qt .cal-cell{min-height:74px;padding:9px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:12px}
.qt .cal-cell.head{min-height:auto;background:var(--bg);color:var(--muted);font-weight:700}
.qt .cal-cell.person{background:var(--surface);color:var(--ink);font-weight:700}
.qt .shift{display:block;margin:3px 0;padding:5px;border-radius:8px;background:var(--brand-soft);color:var(--brand-chu);font-weight:700}
.qt .shift.leave{background:var(--warning-bg);color:var(--warning)}
.qt .tree-row{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(4,minmax(90px,.55fr));gap:8px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line-2);font-size:12px;min-width:620px}
.qt .tree-card{overflow-x:auto}
.qt .tree-row.head{background:var(--bg);color:var(--muted);font-size:12px;font-weight:700}
.qt .tree-row strong{color:var(--ink)}
.qt .tree-row.selected{background:var(--brand-soft)}
.qt .tree-indent{padding-left:18px}
.qt .decision-center{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;min-height:620px}
.qt .queue-nav{padding:10px;border-right:1px solid var(--line)}
.qt .queue-nav button{display:flex;justify-content:space-between;width:100%;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--text);font-size:12px;text-align:left}
.qt .queue-nav button.active{background:var(--brand-soft);color:var(--brand-chu);font-weight:700}
.qt .queue-list{border-right:1px solid var(--line)}
.qt .approval-inspector{padding:18px}
.qt .approval-inspector h2{margin:7px 0;color:var(--ink);font-size:16px}
.qt .approval-inspector p{color:var(--muted);font-size:12px;line-height:1.6}
.qt .chart-svg{width:100%;height:210px;overflow:visible}
.qt .chart-gridline{stroke:var(--line);stroke-width:1}
.qt .chart-line{fill:none;stroke:var(--brand-chu);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qt .chart-area{fill:var(--brand-soft)}
.qt .chart-dot{fill:var(--surface);stroke:var(--brand-chu);stroke-width:3}
.qt .chart-label{fill:var(--muted);font:12px Inter}
.qt .funnel{display:grid;justify-items:center;gap:3px;max-width:400px;margin:0 auto;padding:2px 0 4px}
.qt .funnel-step{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;min-height:30px;padding:5px 12px;border:1px solid var(--brand-line);border-radius:5px 5px 12px 12px;background:var(--brand-soft);color:var(--ink);font-size:12px;line-height:1.2;text-align:left}
.qt .funnel-step:not(:last-child):after{content:"";position:absolute;left:50%;bottom:-4px;width:1px;height:4px;background:var(--line-strong)}
.qt .funnel-step span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qt .funnel-step b{font-size:12px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.qt .funnel-step:nth-child(1){background:var(--heat-1);border-color:var(--heat-3)}
.qt .funnel-step:nth-child(2){background:var(--brand-soft);border-color:var(--heat-2)}
.qt .funnel-step:nth-child(3){background:var(--bg);border-color:var(--line-strong)}
.qt .funnel-step:nth-child(4){background:var(--surface);border-color:var(--line-strong)}
.qt .notice-list{display:grid;gap:10px}
.qt .notice{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.qt .notice.urgent{border-left:4px solid var(--error)}
.qt .notice.warn{border-left:4px solid var(--warning-fill)}
.qt .notice.info{border-left:4px solid var(--brand)}
.qt .notice strong{display:block;color:var(--ink);font-size:12px}
.qt .notice p{margin:3px 0 7px;color:var(--muted);font-size:12px;line-height:1.5}
.qt .notice button{padding:0;border:0;background:transparent;color:var(--brand-chu);font-size:12px;font-weight:700}
.qt .chart-foot{margin-top:12px;color:var(--muted);font-size:12px;line-height:1.55}
.qt .dashboard-insights{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin:24px 0 32px}
.qt .viz-card{grid-column:span 6;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .viz-card.wide{grid-column:span 8}
.qt .viz-card.side{grid-column:span 4}
.qt .viz-card.full{grid-column:1/-1}
.qt .viz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.qt .viz-head h2{margin:0;color:var(--ink);font-size:18px}
.qt .viz-head p{margin:4px 0 0;color:var(--muted);font-size:12px}
.qt .line-viz{width:100%;height:220px}
.qt .axis{fill:none;stroke:var(--line);stroke-width:1}
.qt .series-primary{fill:none;stroke:var(--brand-chu);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.qt .series-secondary{fill:none;stroke:var(--info);stroke-width:2;stroke-dasharray:6 5}
.qt .viz-label{fill:var(--muted);font:12px Inter}
.qt .hbars{display:grid;gap:14px}
.qt .hbar-row{display:grid;grid-template-columns:minmax(110px,1fr) 2fr auto;align-items:center;gap:12px;font-size:12px}
.qt .hbar-track{height:12px;border-radius:999px;background:var(--fill-2);overflow:hidden}
.qt .hbar-fill{display:block;height:100%;border-radius:999px;background:var(--brand)}
.qt .heatmap{display:grid;grid-template-columns:90px repeat(7,1fr);gap:5px;align-items:center}
.qt .heatmap span{min-height:30px;display:grid;place-items:center;border-radius:8px;background:var(--brand-soft);color:var(--text);font-size:12px}
.qt .heatmap .heat-label{justify-content:start;background:transparent;color:var(--muted)}
.qt .heatmap .l2{background:var(--heat-1)}
.qt .heatmap .l3{background:var(--heat-2)}
.qt .heatmap .l4{background:var(--heat-3)}
.qt .flow-viz{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.qt .flow-node{position:relative;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.qt .flow-node:not(:last-child):after{content:"→";position:absolute;right:-18px;top:50%;color:var(--brand-chu);font-weight:700}
.qt .flow-node small{display:block;color:var(--muted);font-size:12px}
.qt .flow-node strong{display:block;margin-top:5px;color:var(--ink);font-size:20px}
.qt .ring-viz{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:24px}
.qt .ring-viz svg{width:180px;height:180px}
.qt .ring-copy strong{display:block;color:var(--ink);font-size:28px}
.qt .ring-copy span{color:var(--muted);font-size:12px}
.qt .alert-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.qt .alert-item{padding:14px;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:8px}
.qt .alert-item.high{border-left-color:var(--error-fill)}
.qt .alert-item.warn{border-left-color:var(--warning-fill)}
.qt .alert-item strong{display:block;color:var(--ink);font-size:14px}
.qt .alert-item p{margin:5px 0 9px;color:var(--muted-2);font-size:12px}
.qt .alert-item button{padding:0;border:0;background:transparent;color:var(--brand-chu);font-size:12px;font-weight:700}
.qt .golden-step.done{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand-chu)}
.qt .golden-step.active{border-color:var(--brand-chu);color:var(--brand-chu);outline:2px solid var(--brand-fill);outline-offset:1px}
.qt /* Visual refresh v6 — brand-led operational shell */
    body{background:var(--bg);font-size:14px;line-height:1.6}
.qt .shop{padding:14px;background:var(--surface);border-color:var(--line)}
.qt .nav{gap:6px}
.qt .nav button{min-height:44px;padding:11px 13px;border-radius:8px;font-size:14px}
.qt .nav button.active{border-left:3px solid var(--brand);padding-left:10px}
.qt .demo-banner{padding:10px 20px;background:var(--warning-bg)}
.qt .content{width:100%;max-width:1600px;padding:32px}
.qt .page-head{margin-bottom:30px}
.qt .eyebrow{font-size:12px;margin-bottom:10px}
.qt h1{font-size:36px;line-height:1.2;letter-spacing:-.02em;font-variation-settings:"opsz" 28}
.qt .page-head p{max-width:760px;margin-top:10px;font-size:14px;line-height:1.65}
.qt .section-head{margin:32px 0 15px}
.qt .section-head h2{font-size:18px}
.qt .section-head p{font-size:12px}
.qt .agents{gap:16px}
.qt .agent{padding:20px;border-radius:12px}
.qt .agent:hover{transform:none;border-color:var(--brand-chu)}
.qt .agent-task{font-size:12px}
.qt .panel, .qt .object-shell, .qt .platform-card, .qt .policy-card, .qt .connector{border-color:var(--line);border-radius:12px}
.qt .card-pad{padding:22px}
.qt .card-title h2, .qt .panel-head h2{font-size:16px}
.qt .primary{min-height:44px;padding:11px 16px;border-radius:8px;font-size:14px}
.qt .secondary{min-height:44px;padding:10px 14px;border-radius:8px;font-size:12px}
.qt .data-table{font-size:14px}
.qt .data-table th{padding:13px 15px;font-size:12px}
.qt .data-table td{padding:14px 15px}
.qt .data-table td strong{font-size:14px}
.qt .field{padding:12px 0}
.qt .field small{font-size:12px}
.qt .field strong{font-size:14px}
.qt .object-header{padding:24px}
.qt .object-header h2{font-size:20px}
.qt .object-header p{font-size:12px}
.qt .object-main, .qt .inspector, .qt .approval-inspector{padding:22px}
.qt .decision{padding:18px 20px}
.qt .decision strong{font-size:14px}
.qt .decision p{font-size:12px}
.qt .filter, .qt .source{font-size:12px}
.qt .conversation strong, .qt .chat-head strong, .qt .object-row strong, .qt .timeline-item strong, .qt .kanban-card strong{font-size:14px}
.qt .conversation p, .qt .chat-head span, .qt .object-row small, .qt .timeline-item p, .qt .kanban-card p{font-size:12px}
.qt .platform-grid{gap:16px}
.qt .platform-card{padding:22px}
.qt .platform-card h2{font-size:16px}
.qt .platform-card p{font-size:14px}
@media(max-width:1150px){
  .qt .platform-grid{grid-template-columns:repeat(2,1fr)}
  .qt .builder{grid-template-columns:170px 1fr}
  .qt .builder-side:last-child{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .qt .golden-path{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1150px){
  .qt .agents{grid-template-columns:repeat(2,1fr)}
  .qt .workspace{grid-template-columns:1fr}
  .qt .inbox{grid-template-columns:230px 1fr}
  .qt .profile-pane{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .qt .kpis{grid-template-columns:repeat(2,1fr)}
  .qt .object-body{grid-template-columns:1fr}
  .qt .inspector{border-left:0;border-top:1px solid var(--line)}
  .qt .decision-center{grid-template-columns:180px 1fr}
  .qt .approval-inspector{grid-column:1/-1;border-top:1px solid var(--line)}
  .qt .operating-model{grid-template-columns:1fr}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .demo-banner{align-items:flex-start;padding:8px 14px;font-size:12px}
  .qt .top-actions .primary{display:none}
  .qt .content{padding:20px 20px 104px}
  .qt .page-head{align-items:flex-start}
  .qt .date{display:none}
  .qt .agents{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .qt .agent{min-width:275px;scroll-snap-align:start}
  .qt .section-head{margin-top:22px}
  .qt .decision{grid-template-columns:auto 1fr}
  .qt .decision-actions{grid-column:2;justify-content:flex-start}
  .qt .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:repeat(5,1fr);padding:8px 6px max(8px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--kinh);backdrop-filter:blur(10px)}
  .qt .bottom-nav button{display:grid;min-height:48px;justify-items:center;align-content:center;gap:4px;border:0;background:transparent;color:var(--muted);font-size:12px}
  .qt .bottom-nav button.active{color:var(--brand-chu);font-weight:700}
  .qt .bottom-nav svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8}
  .qt .review-grid, .qt .review-grid.equal, .qt .settings-layout{grid-template-columns:1fr}
  .qt .inbox{grid-template-columns:1fr}
  .qt .conversation-list{display:block;max-height:none;overflow:visible}
  .qt .profile-pane{display:block}
  .qt .review-actions{display:flex;position:sticky;bottom:78px;z-index:4;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
  .qt .data-table{min-width:650px}
  .qt .object-shell{grid-template-columns:1fr}
  .qt .object-list{display:block;max-height:none;overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
  .qt:not(.mobile-detail) .object-shell .object-detail, .qt:not(.mobile-detail) .inbox .chat-pane, .qt:not(.mobile-detail) .inbox .profile-pane{display:none}
  .qt.mobile-detail .object-shell .object-list, .qt.mobile-detail .inbox .conversation-list{display:none}
  .qt .mobile-back{display:inline-flex;align-items:center;min-height:44px;margin:0 0 12px;border:0;background:transparent;color:var(--brand-chu);font:700 14px Inter;cursor:pointer}
  .qt .object-header{padding:15px}
  .qt .object-main{padding:15px}
  .qt .inspector{display:block}
  .qt .decision-center{grid-template-columns:1fr}
  .qt .queue-nav{display:flex;gap:5px;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line)}
  .qt .queue-nav button{min-width:max-content}
  .qt .approval-inspector{display:block}
  .qt .kanban{padding-bottom:8px}
  .qt .stepper{overflow-x:auto;grid-template-columns:repeat(5,150px)}
  .qt .calendar{min-width:760px}
  .qt .calendar-wrap{overflow-x:auto}
  .qt .primary, .qt .secondary, .qt .approve, .qt .reject{min-height:44px}
  .qt .object-actions{position:static;padding:0;border:0;background:transparent;flex-wrap:wrap}
}
@media(max-width:1024px){
  .qt .dashboard-insights{grid-template-columns:1fr 1fr}
  .qt .viz-card, .qt .viz-card.wide, .qt .viz-card.side{grid-column:span 1}
  .qt .viz-card.full{grid-column:1/-1}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .dashboard-insights{grid-template-columns:1fr}
  .qt .viz-card, .qt .viz-card.wide, .qt .viz-card.side, .qt .viz-card.full{grid-column:1}
  .qt .alert-strip{grid-template-columns:1fr}
  .qt .flow-viz{grid-template-columns:1fr 1fr}
  .qt .ring-viz{grid-template-columns:130px 1fr}
  .qt .ring-viz svg{width:130px;height:130px}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .chart-svg{height:180px}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .platform-grid, .qt .policy-grid, .qt .connector-grid{grid-template-columns:1fr}
  .qt .layer{grid-template-columns:1fr}
  .qt .builder{grid-template-columns:1fr}
  .qt .builder-side{border-right:0;border-bottom:1px solid var(--line)}
  .qt .canvas{padding:18px}
  .qt .golden-path{grid-template-columns:1fr 1fr}
  .qt .action-bar{align-items:flex-start;flex-direction:column}
  .qt .state-flow{display:flex;overflow-x:auto}
  .qt .state-node{min-width:120px}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .filter, .qt .row-action, .qt .queue-nav button, .qt .settings-nav button{min-height:44px}
  .qt .object-row{min-height:52px}
  .qt .field strong, .qt .decision p, .qt .composer p, .qt .platform-card p{font-size:12px}
}
@media(max-width:430px){
  .qt h1{font-size:24px}
  .qt .page-head p{font-size:12px}
  .qt .panel-head{align-items:flex-start;flex-direction:column}
  .qt .decision{padding:14px}
  .qt .filters{width:100%;overflow-x:auto}
  .qt .toast{left:16px;right:16px;bottom:78px}
}
@media(max-width:600px){
  .qt .data-table{min-width:0}
  .qt .data-table thead{display:none}
  .qt .data-table, .qt .data-table tbody, .qt .data-table tr, .qt .data-table td{display:block;width:100%}
  .qt .data-table tr{margin:10px 0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
  .qt .data-table td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:10px;padding:9px 0;border:0}
  .qt .data-table td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700}
  .qt .data-table td[data-label="Đối tượng"] strong{font-size:14px}
  .qt .data-table td[data-label="Thao tác"]{align-items:center}
  .qt .kanban{grid-template-columns:repeat(4,82vw);scroll-snap-type:x mandatory}
  .qt .kanban-col{scroll-snap-align:start}
  .qt .calendar-wrap::before{content:"Bảng tuần — kéo ngang để xem thêm";display:block;margin-bottom:8px;color:var(--muted);font-size:12px}
}
@media(max-width:900px)/* NGUONG CHUNG cua ca he giao dien — xem dau kit.css. Doi mot khoi le la mo lai khe lech. */{
  .qt .main{background:var(--bg)}
  .qt .mobile-brand{display:flex;margin-right:10px}
  .qt .mobile-brand img{width:72px}
  .qt .top-actions{gap:4px}
  .qt .top-actions .icon-btn{min-width:44px;min-height:44px}
  .qt .content{padding:18px 16px calc(116px + env(safe-area-inset-bottom))}
  .qt .page-head{padding:2px 2px 4px;margin-bottom:20px}
  .qt .page-head h1{letter-spacing:-.015em}
  .qt .page-head p{max-width:42rem;margin-top:7px}
  .qt .section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:24px 2px 12px}
  .qt .section-head h2{margin:0;font-size:16px}
  .qt .section-head p{margin:0;text-align:right;font-size:12px}
  .qt .panel, .qt .platform-card, .qt .policy-card, .qt .connector{border-radius:14px}
  .qt .card-pad{padding:16px}
  .qt .object-shell{border:1px solid var(--line);border-radius:16px;background:var(--surface)}
  .qt .object-list{background:var(--surface)}
  .qt .object-row{padding:14px 15px;min-height:64px}
  .qt .object-detail{background:var(--bg)}
  .qt .object-header{padding:16px;background:var(--surface)}
  .qt .object-main{padding:16px}
  .qt .inspector{margin:0 16px 16px;padding:16px;border:1px solid var(--line);border-radius:12px}
  .qt .decision-center{margin:0 -2px}
  .qt .queue-nav{padding:8px 4px;background:var(--surface)}
  .qt .queue-nav button{border:1px solid transparent;padding:8px 12px;border-radius:999px}
  .qt .queue-nav button.active{border-color:var(--brand-line)}
  .qt .review-actions{bottom:calc(72px + env(safe-area-inset-bottom));margin:0 -2px}
  .qt .review-actions button{flex:1}
  .qt .primary, .qt .secondary, .qt .approve, .qt .reject, .qt .filter, .qt .settings-nav button{border-radius:10px}
  .qt .input, .qt .select, .qt input, .qt select, .qt textarea{border-radius:10px}
  .qt .more-dialog{align-self:end;margin:0;width:100%;max-width:none;border:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0}
  .qt .more-dialog::backdrop{background:var(--scrim)}
  .qt .more-head{position:relative;padding:12px 16px 10px}
  .qt .more-head:before{content:"";position:absolute;top:7px;left:50%;width:34px;height:4px;transform:translateX(-50%);border-radius:99px;background:var(--line-strong)}
  .qt .more-head h2{padding-top:8px;font-size:16px}
  .qt .more-links{grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px calc(18px + env(safe-area-inset-bottom))}
  .qt .more-links button{min-height:52px;padding:12px 13px;border-radius:12px;font-size:12px}
  .qt .chart-card, .qt .panel{overflow:hidden}
  .qt .chart-card .card-pad, .qt .panel .card-pad{padding:16px}
}
@media(max-width:430px){
  .qt .content{padding-left:14px;padding-right:14px}
  .qt .funnel-step{grid-template-columns:minmax(0,1fr) auto}
  .qt .funnel-step span{white-space:normal;line-height:1.3}
  .qt .more-links{grid-template-columns:1fr;padding:14px}
}
.qt .section-tabs{display:flex;gap:6px;overflow-x:auto;margin:-10px 0 18px;padding:4px 0 6px;border-bottom:1px solid var(--line)}
.qt .section-tabs button{min-height:44px;padding:9px 13px;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font-weight:700;white-space:nowrap}
.qt .section-tabs button.active{border-color:var(--brand-line);background:var(--brand-soft);color:var(--brand-chu)}
@media(prefers-reduced-motion:reduce){
  .qt *, .qt *:before, .qt *:after{transition:none!important;scroll-behavior:auto!important}
}
@media(max-width:600px){
  .qt .funnel{max-width:100%;gap:5px}
  .qt .funnel-step{min-height:32px;padding:6px 10px;font-size:12px;gap:8px}
  .qt .funnel-step b{font-size:12px}
}