/* ================================================================
Agent Desk — CẦU NỐI sang bộ nhận diện
File này KHÔNG định nghĩa màu. Mọi giá trị lấy từ /css/thuong-hieu.css.
Ở đây chỉ ánh xạ tên biến cũ (--bg, --ai, --bl...) sang token thương hiệu,
để 200 dòng CSS thành phần bên dưới không phải sửa.
Chủ đề: ứng dụng mặc định NỀN SÁNG. Nhân viên trực chat ngồi nhìn 8 tiếng,
nền tối bão hoà cả ngày gây mỏi mắt. Trang công khai mới dùng tông tối.
thuong-hieu.css tự đổi token theo [data-th], nên chỉ cần một khối ánh xạ.
================================================================ */
:root{
--bg:var(--nen);
--p1:var(--be-mat);
--p2:var(--be-mat);
--p3:var(--be-mat-2);
--p4:var(--be-mat-2);
--ln:var(--vien);
--ln2:var(--vien-2);
--t0:var(--chu);
--t1:var(--chu-2);
--t2:var(--chu-3);
/* --ai TRUOC DAY ganh hai vai: mau nhan chinh VA mau cua AI.
Bo nhan dien tach ra — nhan chinh la CAM, AI la AQUA.
Ten bien giu nguyen de khong phai sua thanh phan, nhung nghia doi:
--ai gio la NHAN CHINH. Thu cua AI dung --y-ai-* ben duoi. */
--ai:var(--orange);
--ai2:var(--cam-hover);
--aid:var(--cam-mo);
--aib:rgba(255,106,0,.30);
--aitx:var(--orange);
/* Tin do NGUOI gui */
--bl:var(--iris);
--bl2:var(--cam-hover);
--gr:var(--aqua);
--grd:var(--aqua-mo);
--grtx:var(--aqua-chu);
--am:var(--ember);
--amd:var(--ember-mo);
--amtx:var(--ember-chu);
--rd:var(--do);
--rdd:var(--do-mo);
--rdtx:var(--do);
--sh:var(--bong);
--shl:var(--bong-lon);
--rc:var(--r-lon);
/* Mau bong bong khai trong thuong-hieu.css theo tung chu de (--bb-*).
File nay KHONG dat mau — day la cau noi, khong phai nguon. */
}
/* ---------------- nen ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
/* Inter, tu host (public/css/font.css) — mot ho font cho ca he thong, xem
phan Font trong thuong-hieu.css.
`line-height:1.6` la SO DO DUOC tu chinh file Inter, khong phai uoc luong:
tieng Viet xep hai dau tren mot nguyen am (ệ ữ ằ ộ), Inter can 1.35 de dau
khong cham net dong tren, 1.6 la muc de chiu. Ban truoc de 1.5 — dat, nhung
sat muc san. Bang du lieu thi 1.5 (khai rieng o duoi). */
body{font-family:var(--font-than);background:var(--bg);color:var(--t0);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden;
transition:background .18s,color .18s}
svg{display:block;flex-shrink:0}
/* Bang du lieu: 1.5 chu khong 1.6 — dong thua ra thi bang dai them nua man hinh.
Chu so xep thang cot: Inter co san figure tabular, khong phai doi sang mono. */
table{line-height:1.5;font-variant-numeric:tabular-nums}
/* MA DINH DANH (SKU, ma don, MST, so dien thoai) — JetBrains Mono, `slashed-zero`
de 0 khong doc nham thanh O. Doc nham mot ky tu o cho nay la mat tien. */
.mono{font-family:var(--font-ma);font-size:14px;
font-variant-numeric:tabular-nums slashed-zero}
button{font:inherit;font-size:var(--cc-3);font-weight:500;cursor:pointer;border:1px solid var(--ln);
background:var(--p1);color:var(--t0);border-radius:var(--bk-2);padding:0 var(--kc-3);height:32px;
line-height:1;display:inline-flex;align-items:center;gap:var(--kc-2);transition:.11s}
button.sm{height:28px;padding:0 10px;font-size:12px;border-radius:6px}
button:focus-visible{outline:2px solid var(--nhan-nut);outline-offset:2px}
button:disabled{opacity:.45;cursor:default}
button:hover:not(:disabled){background:var(--p3);border-color:var(--ln2)}
/* Nut chinh mau THAN. Cam chuyen sang vai dau nhan dien AI — xem --nhan-nut
trong thuong-hieu.css. */
button.pri{background:var(--nhan-nut);border-color:var(--nhan-nut);color:var(--nhan-nut-chu);
font-weight:600;box-shadow:none}
button.pri:hover:not(:disabled){background:var(--nhan-nut-hover);border-color:var(--nhan-nut-hover)}
button.gr{background:var(--aqua);border-color:var(--aqua);color:var(--tren-cam);font-weight:600}
button.fb{background:#1877F2;border-color:#1877F2;color:#fff;font-weight:600}
button.fb:hover:not(:disabled){background:#1465D8;border-color:#1465D8}
button.gh{border-color:transparent;background:transparent;color:var(--t1);padding:5px 8px}
/* `.gh` cung duoc dung tren the (56 cho, vi du so dien thoai `tel:` o man
Khieu nai). Luat tren chi nham `button.gh` nen the roi ve MAU LIEN KET
MAC DINH cua trinh duyet — #0000EE, xanh duong tuoi giua mot ung dung xanh
la, va o tong toi thi 1,87:1. Do that 27/08/2026. */
a.gh{color:var(--t1);text-decoration:none}
a.gh:hover{text-decoration:underline}
button.gh:hover{background:var(--p3)}
button.sm{font-size:14px;padding:4px 9px}
button:disabled{opacity:.4;cursor:not-allowed}
:focus-visible{outline:2px solid var(--ai);outline-offset:1px}
/* CHECKBOX VA RADIO PHAI RA NGOAI luat nay. Truoc 14/08/2026 chung cung dinh
`width:100%;height:32px;padding:0 10px;border` — tuc mot o tich bi keo dai
bang ca o luoi (do duoc: 219px), day nhan ra xa han va nhin nhu bo cuc vo.
Loi co tu truoc, anh huong MOI o tich trong app; chi lo ra khi mot khoi co
nhieu o tich xep luoi (man Cach tinh luong). */
input:not([type=checkbox]):not([type=radio]),textarea,select{
font:inherit;font-size:14px;width:100%;border:1px solid var(--ln);border-radius:8px;
padding:0 10px;height:32px;background:var(--p1);color:var(--t0);resize:none;line-height:1.5}
input[type=checkbox],input[type=radio]{
width:16px;height:16px;flex:none;margin:0;accent-color:var(--qt-g700);cursor:pointer}
textarea{height:auto;padding:8px 10px;line-height:1.55}
input:focus,textarea:focus,select:focus{border-color:var(--nhan-nut);outline:none;
box-shadow:0 0 0 3px var(--cam-mo)}
input::placeholder,textarea::placeholder{color:var(--t2)}
kbd{font-family:var(--font-so);font-size:12px;background:var(--p3);
border:1px solid var(--ln2);border-bottom-width:2px;border-radius:4px;padding:1px 4px;color:var(--t1)}
/* ---------------- khung ----------------
Hang 1: thanh ngang (muc chinh). Hang 2: thanh doc muc con + noi dung.
Ba kieu bo cuc, tuy muc chinh dang mo:
.app-inbox loc · danh sach · chat · cot phai
.app-sub muc con · noi dung
.app-1 chi noi dung (muc chinh khong co muc con) */
.app{display:grid;grid-template-rows:60px minmax(0,1fr);height:100vh;height:100dvh}
.app > .tn{grid-column:1/-1}
.app-inbox{grid-template-columns:52px 320px minmax(0,1fr) 330px}
.app-sub{grid-template-columns:214px minmax(0,1fr)}
.app-1{grid-template-columns:minmax(0,1fr)}
/* Man hep dan thi bo cot phai truoc — bo loc va danh sach dung ca ngay, giu den cuoi */
@media(max-width:1620px){.app-inbox{grid-template-columns:52px 300px minmax(0,1fr) 292px}}
@media(max-width:1380px){.app-inbox{grid-template-columns:52px 286px minmax(0,1fr)}
.app .pn{display:none}}
/* ---- thanh ngang: MUC CHINH ----
Muc chinh len ngang de co cho hien CHU. Ban truoc de tat ca theo doc, thu lai
con 54px thi chi con icon — nho, kho bam, va phai ro chuot tung cai moi doan
duoc no la gi. Thanh doc gio chi con muc con, xem .rp ben duoi. */
.tn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
padding:0 14px;background:var(--p1);border-bottom:1px solid var(--ln);min-width:0}
.tn-lg{display:flex;align-items:center}
.tn-lg img{width:26px;height:26px}
.tn-nav{display:flex;gap:3px;justify-content:center;min-width:0;overflow-x:auto;
scrollbar-width:none}
.tn-nav::-webkit-scrollbar{display:none}
.tn-m{border:0;background:transparent;color:var(--t1);font-size:16px;font-weight:600;
padding:10px 16px;border-radius:8px;white-space:nowrap;gap:8px;letter-spacing:-.005em;
position:relative}
.tn-m:hover{background:var(--p3);color:var(--t0)}
.tn-m.on{background:var(--cam-mo);color:var(--orange)}
.tn-m svg{width:17px;height:17px;opacity:.9}
.tn-l{min-width:0}
.tn-bg{font-family:var(--font-so);font-size:12px;font-weight:700;
background:var(--p3);color:var(--t1);border-radius:8px;padding:1px 6px;min-width:19px;
text-align:center}
.tn-m.on .tn-bg{background:var(--orange);color:var(--tren-cam)}
/* "Can ban xu ly" co so > 0 la viec dang cho nguoi — phai doi mat ngay */
.tn-m.hot .tn-bg{background:var(--rd);color:#fff}
.tn-phai{display:flex;align-items:center;gap:4px;min-width:0}
.tn-tron{border:0;background:transparent;padding:6px;border-radius:8px;color:var(--t2)}
.tn-tron:hover{background:var(--p3);color:var(--t0)}
.tn-toi{border:0;background:transparent;gap:8px;padding:4px 8px 4px 4px;border-radius:16px;
max-width:190px}
.tn-toi:hover{background:var(--p3)}
.tn-av{width:26px;height:26px;border-radius:50%;background:var(--p3);color:var(--t1);
flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.tn-ten{font-size:14px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- thanh doc: MUC CON cua muc chinh dang mo ----
Trong Hoi thoai, muc con chinh la bo loc hop thu, nen cho do de .rl lam —
khong dung hai thanh doc canh nhau. */
.rp{background:var(--p1);border-right:1px solid var(--ln);overflow-y:auto;padding:10px 8px}
.rp-dau{font-size:12px;font-weight:700;color:var(--t2);padding:4px 9px 8px}
.rp-n{display:flex;width:100%;align-items:center;gap:7px;border:0;background:transparent;
padding:10px 11px;border-radius:8px;font-size:16px;color:var(--t1);text-align:left;
justify-content:flex-start;line-height:1.3}
.rp-n:hover{background:var(--p3);color:var(--t0)}
.rp-n.on{background:var(--cam-mo);color:var(--orange);font-weight:600}
.rp-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-mini{font-style:normal;font-size:12px;font-weight:600;flex-shrink:0;
border-radius:4px;padding:1px 5px;background:var(--p3);color:var(--t2)}
.rp-mini.do{background:var(--rdd);color:var(--rdtx)}
.rp-mini.vang{background:var(--amd);color:var(--amtx)}
.rail{background:var(--p1);border-right:1px solid var(--ln);display:flex;flex-direction:column;
align-items:center;padding:11px 0;gap:3px}
.rail .lg{width:30px;height:30px;display:block;margin-bottom:10px}
.ri{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
color:var(--t2);cursor:pointer;position:relative;border:0;background:transparent;padding:0}
.ri:hover{background:var(--p3);color:var(--t1)}
.ri.on{background:var(--aid);color:var(--ai)}
.ri .bg{position:absolute;top:3px;right:3px;min-width:15px;height:15px;border-radius:8px;background:var(--rd);
color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0 3px}
.rail .sp{flex:1}
.me{width:28px;height:28px;border-radius:50%;background:var(--p3);display:flex;align-items:center;
justify-content:center;font-size:12px;font-weight:600;color:var(--t1)}
.list{background:var(--p1);border-right:1px solid var(--ln);display:flex;flex-direction:column;min-width:0}
.lh{padding:9px 11px;border-bottom:1px solid var(--ln)}
.srch{position:relative;margin-bottom:8px}
.srch svg{position:absolute;left:9px;top:8px;color:var(--t2)}
.srch input{padding-left:29px;background:var(--p3);border-color:transparent;font-size:14px}
.pgs{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
.pgc{display:flex;align-items:center;gap:5px;font-size:14px;padding:3px 8px;border-radius:16px;
background:var(--p2);border:1px solid var(--ln);color:var(--t1);cursor:pointer;white-space:nowrap}
.pgc.on{background:var(--aid);border-color:var(--aib);color:var(--aitx);font-weight:500}
.pgc i{width:14px;height:14px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-style:normal}
.fl{display:flex;gap:2px;padding:6px 8px;border-bottom:1px solid var(--ln);overflow-x:auto}
.fl button{border:0;background:transparent;padding:4px 8px;font-size:14px;color:var(--t2);border-radius:8px;white-space:nowrap}
.fl button.on{background:var(--p3);color:var(--t0);font-weight:500}
.fl .n{font-size:12px;opacity:.7;margin-left:3px}
.cvs{flex:1;overflow-y:auto}
/* ---- khung chat ----
Nen am (khong trang) de bong bong TRANG cua khach noi len duoc — dung cach
Pancake va Messenger lam. Nen trang thi bong bong khach chim vao nen. */
.ch{display:flex;flex-direction:column;min-width:0;background:var(--thr-nen)}
.chh{min-height:52px;background:var(--p1);border-bottom:1px solid var(--ln);display:flex;
align-items:center;gap:10px;padding:6px 13px;flex-shrink:0}
.chh-i{flex:1;min-width:0}
.chh-r1{display:flex;align-items:center;gap:9px;min-width:0}
.chh .nm{font-weight:700;font-size:16px;line-height:1.2;flex-shrink:0}
.chh-nho{display:inline-flex;align-items:center;gap:3px;font-size:14px;color:var(--t2);
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chh-r2{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--t2);margin-top:2px}
.chh-xem{display:inline-flex;align-items:center;gap:4px;color:var(--iris)}
.chh-xem.chua{color:var(--t2)}
.chh-cham{opacity:.5}
/* Doc that tu agent_runs/funnel_state, khong tinh gi o client — xem AiInsight
trong app.js. An han khi khong co du lieu, khong hien dong trong. */
.ains{display:flex;align-items:center;gap:14px;padding:7px 13px;background:var(--aid);
border-bottom:1px solid var(--ln);flex-shrink:0;font-size:12px;color:var(--aitx);
overflow-x:auto}
.ains svg{flex-shrink:0;opacity:.85}
.ains span{white-space:nowrap}
.ains b{font-weight:600;margin-right:3px}
.ains-chan{color:var(--rdtx)}
.thr{flex:1;overflow-y:auto;padding:12px 16px 16px}
.pn{background:var(--p1);border-left:1px solid var(--ln);display:flex;flex-direction:column;min-width:0}
.pt{display:flex;border-bottom:1px solid var(--ln);flex-shrink:0}
.pt button{flex:1;border:0;border-radius:0;padding:9px 0;font-size:14px;color:var(--t2);background:transparent;
border-bottom:2px solid transparent;justify-content:center}
.pt button.on{color:var(--t0);font-weight:500;border-bottom-color:var(--ai)}
.pb{flex:1;overflow-y:auto;padding:12px}
.pf{border-top:1px solid var(--ln);padding:10px 12px;flex-shrink:0}
.pf button{width:100%;justify-content:center}
/* ---------------- manh ghep dung chung ---------------- */
.sect{font-size:var(--cc-1);font-weight:600;color:var(--t2);
margin:var(--kc-6) 0 var(--kc-3);padding-bottom:var(--kc-2);border-bottom:1px solid var(--ln)}
.sect:first-child{margin-top:0}
/* Cham tron dan dau: trang thai doc duoc o khoang cach mot sai tay, va nguoi
mu mau van dung duoc. Mau mot minh khong bao gio du. */
.lb{font-size:12px;padding:2px 9px 2px 7px;border-radius:99px;font-weight:600;white-space:nowrap;
display:inline-flex;align-items:center;gap:6px;line-height:1.5;border:1px solid transparent}
.lb::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.l-ai{background:var(--aid);color:var(--aitx)}
.l-rd{background:var(--rdd);color:var(--rdtx)}
.l-am{background:var(--amd);color:var(--amtx)}
.l-gr{background:var(--grd);color:var(--grtx)}
.l-n{background:var(--p3);color:var(--t2)}
.ln{display:flex;gap:6px;align-items:center;padding:6px 0;border-bottom:1px solid var(--ln)}
.ln .nm{flex:1;min-width:0;font-size:14px}
.ln .nm small{display:block;color:var(--t2);font-size:12px}
.ln .pr{font-size:14px;font-weight:500;width:72px;text-align:right}
.kv{display:flex;justify-content:space-between;font-size:14px;padding:3px 0}
.kv span:first-child{color:var(--t2)}
/* Gio hang tam trong tab "Tao don" — chi de nguoi truc thay dang chon gi
truoc khi bam; con so THAT lay tu response taoDonNhap(), khong tu day. */
.gio{border:1px solid var(--ln);border-radius:8px;padding:4px 10px;margin-top:4px}
.gio-d{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--ln);font-size:14px}
.gio-d:last-of-type{border-bottom:none}
.gio-ten{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gio-sl{display:flex;align-items:center;gap:5px;flex-shrink:0}
.gio-sl button{width:24px;height:24px;padding:0;justify-content:center}
.gio-tong{display:flex;justify-content:space-between;font-weight:600;font-size:14px;
padding:8px 0 2px;margin-top:2px;border-top:1px solid var(--ln2)}
.warn{display:flex;gap:7px;background:var(--amd);color:var(--amtx);border-left:3px solid var(--am);
border-radius:8px;padding:8px 10px;font-size:14px;line-height:1.45;margin:8px 0}
.blkd{display:flex;gap:9px;background:var(--rdd);border-left:3px solid var(--rd);border-radius:8px;
padding:9px 11px;font-size:14px;color:var(--rdtx);margin-bottom:6px}
.blkd b{display:block;font-weight:600;margin-bottom:1px}
.trong{padding:28px 14px;color:var(--t2);font-size:14px;text-align:center;line-height:1.6}
.spin{width:30px;height:30px;border-radius:50%;border:2.5px solid var(--p3);border-top-color:var(--ai);
animation:sp .7s linear infinite;margin:0 auto 12px}
@keyframes sp{to{transform:rotate(360deg)}}
.tst{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--t0);
color:var(--bg);padding:9px 17px;border-radius:8px;font-size:14px;opacity:0;transition:.16s;
pointer-events:none;z-index:70;box-shadow:var(--shl)}
.tst.on{opacity:1;transform:translateX(-50%)}
/* ---------------- man hinh khai bao org (chua co dang nhap that) ---------------- */
.setup{height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.setup .box{width:100%;max-width:400px;background:var(--p1);border:1px solid var(--ln);
border-radius:12px;padding:24px;box-shadow:var(--shl)}
.setup :is(h1,h2){font-size:18px;font-weight:600;margin-bottom:6px;letter-spacing:-.015em}
.setup p{font-size:14px;color:var(--t1);margin-bottom:16px;line-height:1.5}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---------------- modal ket noi trang ---------------- */
.veil{position:fixed;inset:0;background:rgba(16,20,32,.55);backdrop-filter:blur(3px);z-index:50;
display:flex;align-items:center;justify-content:center;padding:24px}
.mod{width:100%;max-width:520px;background:var(--p1);border:1px solid var(--ln2);border-radius:12px;
overflow:hidden;box-shadow:var(--shl);max-height:86vh;display:flex;flex-direction:column}
.mod-h{display:flex;align-items:center;gap:10px;padding:14px 17px;border-bottom:1px solid var(--ln)}
.mod-h b{font-size:16px;font-weight:600}
.mod-h .sp{flex:1}
.mod-b{padding:18px;overflow-y:auto}
.mod-f{padding:13px 17px;border-top:1px solid var(--ln);display:flex;gap:8px;align-items:center}
.mod-f .sp{flex:1}
.pgm{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid var(--ln);border-radius:12px;
margin-bottom:6px;cursor:pointer;text-align:left;width:100%;background:var(--p1)}
.pgm:hover:not(:disabled){border-color:var(--ln2);background:var(--p2)}
.pgm.on{border-color:var(--ai);background:var(--aid)}
.pgm:disabled{opacity:.45;cursor:not-allowed}
.pgm .i{flex:1;min-width:0}
.pgm .i b{display:block;font-size:16px;font-weight:600}
.pgm .i small{font-size:14px;color:var(--t2)}
.ckb{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--ln2);flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:14px}
.pgm.on .ckb{background:var(--orange);border-color:var(--orange);color:var(--tren-cam)}
/* ---------------- hop thu: hang hoi thoai ----------------
Ba tang trong mot hang: ten + gio · trich dan mot dong · hang nhan.
Cao ~64px nen mot man 900px vua 13-14 hang, dung nhu Pancake. */
.l-dau{display:flex;align-items:center;gap:9px;padding:8px 13px;border-bottom:1px solid var(--ln);
background:var(--p3)}
.l-dau b{font-size:14px;font-weight:700;flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.l-dau>span{font-size:12px;color:var(--t2);font-family:var(--font-so)}
/* ---------------- o chon nhan de loc (buoc 5 NHAN.md) ----------------
Luoi ben trong xep GIONG HET bang nhan duoi khung chat: nhan vien tim nhan
bang vi tri va mau, hai cho xep khac nhau la moi lan loc phai doc lai 24 o. */
.cn{position:relative;display:flex;align-items:center;gap:2px}
.cn-nut{display:flex;align-items:center;gap:4px;height:20px;padding:0 7px;cursor:pointer;
border:1px dashed var(--vien-2);border-radius:4px;background:transparent;color:var(--t2);
font-size:12px;font-weight:600;font-family:inherit;white-space:nowrap}
.cn-nut:hover{color:var(--t1);border-color:var(--t2)}
.cn-nut.on{border-style:solid;border-color:transparent;background:var(--c);color:#14121A}
.cn-cham{width:6px;height:6px;border-radius:50%;background:#14121A;flex-shrink:0}
.cn-bo{width:18px;height:18px;padding:0;cursor:pointer;border:0;border-radius:4px;
background:transparent;color:var(--t2);font-size:14px;line-height:1;font-family:inherit}
.cn-bo:hover{background:var(--p1);color:var(--t1)}
.cn-bang{position:absolute;top:calc(100% + 5px);left:0;z-index:40;width:520px;
display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:8px;
background:var(--p3);border:1px solid var(--vien-2);border-radius:8px;
box-shadow:0 10px 30px rgba(0,0,0,.4)}
.cn-nhom{min-width:0;display:flex;flex-direction:column;gap:1px}
.cn-ten{font-size:12px;font-weight:700;color:var(--t2);
padding:0 0 2px}
.cn-o{display:flex;align-items:center;gap:5px;height:19px;padding:0 5px;cursor:pointer;
border:0;border-radius:4px;background:var(--c);color:#14121A;
font-size:12px;font-weight:700;font-family:inherit;text-align:left;opacity:.9}
.cn-o i{width:5px;height:5px;border-radius:50%;background:#14121A;flex-shrink:0;opacity:0}
.cn-o span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-o b{font-family:var(--font-so);font-size:12px;opacity:.72}
/* Nhan chua gan cho hoi thoai nao van hien MAU, chi mo di — giu duoc cach tim
theo mau, va cho biet luon la bam vao se ra danh sach rong. */
.cn-o.rong{opacity:.34}
.cn-o:hover{opacity:1;box-shadow:inset 0 0 0 1.5px #14121A}
.cn-o.on{opacity:1;box-shadow:inset 0 0 0 2px #14121A}
.cn-o.on i{opacity:1}
/* ---------------- anh dai dien khach ----------------
Anh chong LEN chu cai dau, khong thay the no. URL cua Meta het han sau vai
ngay va phan lon khach khong bao gio co anh, nen chu cai dau moi la lop nen
thuong truc; tai duoc anh thi no phu len. */
.cv .av img,.chh-av img,.cum-av img{position:absolute;inset:0;width:100%;height:100%;
border-radius:50%;object-fit:cover}
.cv{display:flex;gap:11px;padding:10px 13px;cursor:pointer;border-left:2px solid transparent;
position:relative;border-bottom:1px solid var(--ln)}
.cv:hover{background:var(--p2)}
.cv.on{background:var(--cam-mo);border-left-color:var(--orange)}
.cv .av{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:14px;font-weight:700;background:var(--p3);color:var(--t1);
position:relative}
/* Huy hieu kenh o goc avatar — mot man co ca Messenger lan Instagram */
.av-kenh{position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-radius:50%;
display:flex;align-items:center;justify-content:center;border:1.5px solid var(--p1)}
.av-kenh.fb{background:#1877F2}.av-kenh.ig{background:#C13584}
.cv .in{flex:1;min-width:0}
.cv .r1{display:flex;align-items:center;gap:5px}
.cv .nm{font-weight:500;font-size:14px;flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.cv .tm{font-size:12px;color:var(--t2);flex-shrink:0;font-family:var(--font-so)}
.cv-sdt{color:var(--aqua);flex-shrink:0;display:flex}
.cv .sn{font-size:14px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;margin-top:1px}
.sn-ra{color:var(--t2);font-weight:400;margin-right:2px}
.cv.un .nm{font-weight:700}
.cv.un .sn{color:var(--t0)}
/* Chua doc: mot vach cam manh ben trai, khong dung nen dam — nen dam va hang
dang chon trong giong nhau la nhan vien bam nham suot. */
.cv.un::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--orange)}
.cv.on::after{display:none}
.win{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--t1);background:var(--p2);
border:1px solid var(--ln);padding:3px 9px;border-radius:16px;white-space:nowrap}
.win.out{color:var(--rdtx);background:var(--rdd);border-color:transparent}
.drf{padding:8px 12px 10px}
.dh{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--t2);margin-bottom:6px}
.dh b{color:var(--aqua);font-weight:600;display:inline-flex;align-items:center;gap:4px}
.dh .sp{flex:1}
.db{background:var(--aid);border:1px solid var(--aib);border-radius:12px;padding:8px 12px;margin-bottom:5px;
font-size:16px;white-space:pre-wrap;color:var(--aitx);line-height:1.45;position:relative}
.da{display:flex;gap:6px;align-items:center;margin-top:7px}
/* ---------------- man khong phai hop thu (Trang, Cai dat) ---------------- */
.man{background:var(--bg);overflow-y:auto;display:flex;flex-direction:column}
/* KHONG dat flex+gap o day: moi khoi con ben trong van giu margin-bottom rieng
(27 cho), nen gap se CONG THEM vao margin — khoang cach doi len va moi khoi
mot kieu. Mot nguon khoang cach duy nhat: margin cua tung khoi. */
.man-in{flex:1;max-width:800px;width:100%;margin:0 auto;
padding:var(--kc-8) var(--kc-6) var(--kc-12)}
.man-in h1{font-family:var(--font-tieu-de);font-size:var(--cc-7);font-weight:650;
letter-spacing:-.015em;margin:0 0 var(--kc-2);line-height:1.25}
.man-d{color:var(--t1);font-size:var(--cc-3);line-height:1.6;margin:0 0 var(--kc-4);max-width:70ch}
.man-nut{display:flex;gap:9px;margin-top:20px;flex-wrap:wrap}
/* ================================================================
"Chuan SaaS quoc te" — khung dung CHUNG cho Tong quan VA Hoi thoai
(chat.gauux.com sau nay). Port pixel-doi-pixel tu gauux.com.html /
chat.gauux.com.html — file HTML that chu shop gui, khong phai doan tu
anh chup. Mau qua bien --qt-* (thuong-hieu.css), khong hex thang.
Rieng voi phan con lai cua app: KHONG theo [data-th], ban dac ta khong
co ban toi. Xem ManTongQuan (va sau nay man Hoi thoai moi) trong app.js.
================================================================ */
/* Mau chu than va line-height lay tu /giaodien: #334155 / 1.6 (app truoc do
la #0F172A / 1.5). Do la khac biet nam tren MOI chu cua MOI man — chu app
dam va toi hon han ban thiet ke. Tieu de van dung --qt-ink. */
.qt{font-family:var(--qt-font);color:var(--qt-than);font-size:14px;line-height:1.6}
.qt h1,.qt h2,.qt h3,.qt h4,.qt b,.qt strong{color:var(--qt-ink)}
/* BAC tieu de la NGU NGHIA, CO CHU la kieu dang — hai truc khac nhau, nhung
trinh duyet tron chung lam mot: doi h3 thanh h2 cho dung bac thi chu to len
1,5 lan tu con so mac dinh cua trinh duyet. Nen khoa co chu mac dinh cua hai
bac ve cung mot muc, roi khoi nao muon khac thi dat bang LOP cua no
(.set-card h2, .card-h h2, .man-in h2.man-h...). Thieu luat nay thi moi lan
sua bac tieu de cho dung chuan tiep can lai la mot lan bo cuc doi theo — va
nguoi sua se lui lai. Do that 28/08/2026: hai tieu de vua nang bac nhay tu
16px len 21px ma khong ai co y do. */
.qt h2, .qt h3{font-size:var(--cc-5);font-weight:700}
/* Reset toan bo button ve trang trong roi tu dinh nghia lai tung lop — thua ke
button{height:32px;padding:...;border:1px solid...} cua he thong cu se lam
vo moi kich thuoc/khoang cach da port dung tu ban dac ta. */
.qt button{font-family:inherit;font-size:inherit;height:auto;padding:0;margin:0;
border:0;border-radius:0;background:transparent;color:inherit;line-height:inherit;
display:flex;align-items:center;gap:0;cursor:pointer}
.qt button:disabled{opacity:1;cursor:default}
/* KHOI PHUC NUT CHO CAC MAN DUNG BO STYLE CU (.man / .man-in).
Luat `.qt button` ngay tren co y lam phang moi nut cua khung ERP. Nhung tu
09/08/2026 cac man Dao tao AI bi boc trong KhungChat — tuc nam TRONG `.qt` —
trong khi chung van viet theo bo style cu (.pri, .ttb-b, .gh...). Ket qua:
"Thêm thông tin" / "Thêm bảng giá" / "Tắt Sửa Xoá" hien ra thanh CHU TRAN
dinh nhau, khong con la nut. Khong test nao bat duoc — chi thay khi chup man.
`.man` chi co o cac man cu; khung ERP dung .set-page/.hs-shell nen khong dinh. */
.qt .man button{font-size:var(--cc-3);font-weight:500;border:1px solid var(--ln);
background:var(--p1);color:var(--t0);border-radius:var(--bk-2);
padding:var(--kc-2) var(--kc-3);min-height:32px;line-height:1.25;
display:inline-flex;align-items:center;gap:var(--kc-2)}
.qt .man button:disabled{opacity:.45;cursor:not-allowed}
.qt .man button:hover:not(:disabled){background:var(--p3);border-color:var(--ln2)}
.qt .man button.pri{background:var(--nhan-nut);border-color:var(--nhan-nut);
color:var(--nhan-nut-chu);font-weight:600}
.qt .man button.pri:hover:not(:disabled){background:var(--nhan-nut-hover);
border-color:var(--nhan-nut-hover)}
.qt .man button.gr{background:var(--aqua);border-color:var(--aqua);
color:var(--tren-cam);font-weight:600}
.qt .man button.gh{border-color:transparent;background:transparent;color:var(--t1);
padding:5px 8px;height:auto}
.qt .man button.gh:hover:not(:disabled){background:var(--p3);border-color:transparent}
.qt .man button.sm{min-height:28px;padding:5px 10px;font-size:12px;border-radius:6px}
/* Nut chi la chu (link) trong man cu — khong duoc an khung nut vao. */
.qt .man button.lk,
.qt .man button.nho,
.qt .man .ct-nut button{border:0;background:transparent;height:auto;padding:0}
.qt input{font-family:inherit;font-size:inherit}
/* MA DINH DANH (`.ma` cua ban thiet ke): JetBrains Mono 11px mau chu mo. Truoc
day chi dat font-family, nen co chu roi ve 14px cua luat `.mono` toan cuc. */
.qt .mono{font-family:var(--qt-mono);font-size:12px;color:var(--qt-ink3)}
.qt svg.ic{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.qt svg.ic.sm{width:14px;height:14px}
.qt svg.ic.xs{width:12px;height:12px}
.qt.shell{display:flex;height:100vh;height:100dvh;overflow:hidden;background:var(--qt-paper)}
.qt .sidebar{width:236px;background:var(--qt-white);border-right:1px solid var(--qt-line);
display:flex;flex-direction:column;flex-shrink:0}
.qt .sb-top{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 14px}
.qt .brand{display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer}
/* Mark chinh thuc: gau muc tren o xanh bo goc — anh PNG tu bo nhan dien
(design/bo-nhan-dien.html), khong ve lai bang CSS */
.qt .brand .mark{width:32px;height:32px;border-radius:22%;display:block;flex-shrink:0}
.qt .brand .tx b{display:block;font-size:14px;font-weight:800;line-height:1.15;letter-spacing:-.2px}
.qt .brand .tx span{display:block;font-size:10px;color:var(--qt-ink3);font-weight:500}
.qt .sb-nav{flex:1;overflow-y:auto;padding:2px 10px}
.qt .sb-item{display:flex;align-items:center;gap:11px;width:100%;height:auto;padding:8px 10px;
border-radius:8px;color:var(--qt-ink2);font-weight:500;font-size:14px;margin-bottom:1px;
text-align:left;justify-content:flex-start;background:transparent;border:0}
.qt .sb-item:hover:not(:disabled){background:var(--qt-paper);color:var(--qt-ink)}
.qt .sb-item.active{background:var(--qt-g100);color:var(--qt-g800-chu);font-weight:600}
.qt .sb-item .chev{margin-left:auto;color:var(--qt-ink3)}
.qt .sb-item .badge2{margin-left:auto;font-size:10px;font-weight:700;background:var(--qt-g600);
color:#fff;padding:1.5px 6px;border-radius:5px;letter-spacing:.03em}
.qt .sb-item .cnt{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;
color:var(--qt-ink3);background:var(--qt-paper);border:1px solid var(--qt-line);min-width:19px;
height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.qt .sb-item.active .cnt{background:var(--qt-g600);border-color:var(--qt-g600);color:#fff}
/* modul "sap co": mo, khoa, khong bam duoc — tu khai la chua xong, khong bia ly do */
.qt .sb-item.soon{opacity:.5;cursor:default}
/* accordion submenu — mo TAI CHO, khong dieu huong (muc 4.3-4.4 GAUUX-UI-SPEC):
chevron CHI hien o muc co submenu that; bam chevron chi mo/dong, bam label
moi di. Chep tu design/ui-kit/gauux.com.html, mau doi sang token --qt-*. */
.qt .sb-group{margin-bottom:1px}
.qt .sb-item-row{display:flex;align-items:stretch;border-radius:8px}
.qt .sb-item-row:hover{background:var(--qt-paper)}
.qt .sb-item-row .sb-item{flex:1;border-radius:8px;margin-bottom:0}
.qt .sb-item-row:hover .sb-item:not(:disabled){background:transparent}
.qt .sb-chev-btn{width:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
border-radius:8px;color:var(--qt-ink3);cursor:pointer}
.qt .sb-chev-btn:hover{color:var(--qt-ink)}
.qt .sb-chev-btn span{display:flex;transition:transform .18s cubic-bezier(.4,0,.2,1)}
.qt .sb-chev-btn.open span{transform:rotate(90deg)}
.qt .sb-sub{max-height:0;overflow:hidden;transition:max-height .22s cubic-bezier(.4,0,.2,1)}
.qt .sb-sub.open{max-height:260px}
.qt .sb-subitem{display:flex;align-items:center;gap:9px;width:100%;height:auto;
padding:6px 10px 6px 38px;border-radius:7px;font-size:12px;color:var(--qt-ink3);
font-weight:500;text-align:left;cursor:pointer}
.qt .sb-subitem:hover{background:var(--qt-paper);color:var(--qt-ink2)}
.qt .sb-subitem.on{background:var(--qt-g100);color:var(--qt-g800-chu);font-weight:600}
/* Nut loc tren dau danh sach hoi thoai — trong .qt bi mat khoang cach giua
nhan va so dem ("Tất cả hội thoại26"), ep lai inline-flex + gap o day */
.qt .lt-nut{display:inline-flex;width:auto;gap:6px;align-items:center}
.qt .lt-nut b{font-weight:700}
/* Anh dai dien THAT cua khach (Meta tra ve): phai ghim vao dung hinh tron,
khong co khoi nay la anh render kich thuoc goc va de thanh vet dai len
khung chat — xay ra dung nhu vay khi khach co avatar (09/08/2026). */
.qt .hc-av,.qt .av2,.qt .cust-av{position:relative;overflow:hidden}
.qt .hc-av img,.qt .av2 img,.qt .cust-av img{position:absolute;inset:0;
width:100%;height:100%;border-radius:50%;object-fit:cover}
/* huy hieu nen tang phai NOI tren anh — nam ngoai vong tron cat */
.qt .hc-av{overflow:visible}
.qt .hc-av img{border-radius:50%}
/* Menu con DAI (Dao tao AI: 15 muc + 4 tieu de nhom) — tran cua .sb-sub goc
la 260px, du cho 4-5 muc; thieu lop nay la nhom dai bi cat cut o muc thu 7 */
.qt .sb-sub-dai.open{max-height:720px}
.qt .sb-sub-nhom{font-size:10px;font-weight:800;
color:var(--qt-ink3);padding:10px 10px 4px 38px}
.qt .sb-subitem::before{content:'';width:4px;height:4px;border-radius:50%;
background:currentColor;flex-shrink:0;opacity:.5}
/* The gauux AI o chan sidebar — MOT HANG, cao ~64px.
Doi thu do dac hieu o day la `.qt button` (0,1,1) chu KHONG phai `.qt .man
button`: the nay nam ngoai moi khung `.man`. Nen `.qt .sidebar .sb-ai`
(0,3,0) thang thoai mai. Da mac bay nay bon lan, lan nao cung phai do
computed style trong trinh duyet moi thay. */
.qt .sidebar .sb-ai{display:flex;align-items:center;gap:10px;width:calc(100% - 24px);
margin:8px 12px 12px;padding:10px 12px;border:0;border-radius:var(--qt-rlg);
background:linear-gradient(160deg,var(--qt-g900),var(--qt-g700));color:#fff;
text-align:left;cursor:pointer;position:relative;overflow:hidden;height:auto}
.qt .sidebar .sb-ai::before{content:'';position:absolute;top:-30px;right:-30px;width:90px;height:90px;
border-radius:50%;background:rgba(255,255,255,.08)}
.qt .sidebar .sb-ai .ic-wrap{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.15);
display:grid;place-items:center;flex-shrink:0;position:relative}
.qt .sidebar .sb-ai .tx{position:relative;min-width:0;flex:1}
/* `color:#fff` cua .sb-ai bi mot luat khac de mat tren the . Do that
27/08/2026: chu "gauux AI" ra #0F172A tren nen gradient #105434 — 1,98:1,
gan nhu khong doc duoc. Khai lai ngay tai day. */
.qt .sidebar .sb-ai b{font-size:14px;display:block;font-weight:700;line-height:1.5;color:#fff}
.qt .sidebar .sb-ai small{display:block;font-size:12px;line-height:1.5;color:var(--qt-g100-tx);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Con so la SO THAT (hoi thoai dang cho) — dat ben phai de doc duoc ma khong
phai doc het cau. */
.qt .sidebar .sb-ai .sb-ai-so{position:relative;flex-shrink:0;min-width:22px;padding:2px 7px;
/* Vien thuoc nay co nen TRANG CO DINH o ca hai tong (no nam tren mang
gradient toi), nen chu tren no phai la xanh DAM o ca hai — nguoc chieu
voi phan con lai. `--qt-g800-chu` la ban danh cho NEN TOI: o tong toi no
thanh #8BDDB4 va dat len trang chi con 1,6:1. */
border-radius:999px;background:#fff;color:var(--qt-g800);font-size:12px;font-weight:700;
line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.qt .topbar{height:60px;background:var(--qt-white);border-bottom:1px solid var(--qt-line);
display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0}
/* Chua noi voi tim kiem that — hien de dung layout, tat tuong tac de khong
gia vo la mot o tim dung duoc. */
.qt .tb-search{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;
background:var(--qt-paper);border:1px solid var(--qt-line);border-radius:9px;padding:8px 12px;
color:var(--qt-ink3)}
.qt .tb-search input{border:0;background:transparent;outline:none;flex:1;color:var(--qt-ink);
width:auto;height:auto;padding:0;border-radius:0}
.qt .kbd{font-family:var(--qt-mono);font-size:10px;background:var(--qt-white);
border:1px solid var(--qt-line);border-radius:5px;padding:1px 6px;color:var(--qt-ink3)}
.qt .tb-right{display:flex;align-items:center;gap:14px;margin-left:auto}
.qt .tb-icon{position:relative;width:34px;height:34px;border-radius:9px;display:grid;
place-items:center;color:var(--qt-ink2);border:0;background:transparent}
.qt .tb-icon:hover{background:var(--qt-paper)}
.qt .tb-icon .dot{position:absolute;top:5px;right:5px;background:var(--qt-red);color:#fff;
font-size:10px;font-weight:700;min-width:15px;height:15px;border-radius:8px;display:grid;
place-items:center;padding:0 3px;border:2px solid #fff}
.qt .tb-user{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px;border-radius:10px;
border:0;background:transparent}
.qt .tb-user:hover{background:var(--qt-paper)}
.qt .qt-avatar{width:32px;height:32px;border-radius:999px;background:var(--qt-g700);color:#fff;
font-weight:700;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.qt .tb-user .nm{font-size:14px;font-weight:700;line-height:1.2;text-align:left}
.qt .tb-user .rl{font-size:12px;color:var(--qt-ink3)}
.qt .page{flex:1;overflow-y:auto;display:flex}
.qt .page-in{padding:24px 26px;flex:1;min-width:0}
.qt .dash-head{display:flex;align-items:flex-end;justify-content:space-between;
margin-bottom:20px;gap:16px;flex-wrap:wrap}
.qt .dash-head :is(h1,h2){font-size:20px;font-weight:800;letter-spacing:-.4px}
.qt .dash-head .sub{color:var(--qt-ink3);font-size:14px;margin-top:4px}
.qt .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}
.qt .kpi{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:var(--qt-rlg);
padding:18px 20px;box-shadow:var(--qt-sh)}
.qt .kpi .lb{font-size:12px;color:var(--qt-ink3);font-weight:500}
/* TIEN VA SO DEM DUNG INTER, KHONG DUNG MONO. Bo nhan dien noi ro: mono
danh cho MA DINH DANH; cot tien bang mono rong hon 11% o cung co chu ma
khong duoc them gi — Inter da co chu so xep thang cot (tabular-nums). */
.qt .kpi .vv{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:9px 0 6px;
font-family:var(--qt-font);font-variant-numeric:tabular-nums}
.qt .kpi .dl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--qt-ink3)}
/* Mau so cua mot o KPI dang "N/M" — nho va mo hon tu so, de mat doc con so
CUA MINH truoc roi moi doc cai tran. Khai thanh lop chu khong go noi dong:
ratchet `style=` dang ep moi khuon moi ve style.css, va bon o nay dung
chung dung mot kieu. */
/* Dai KPI nam THANG trong khung `.man` (cac man Dao tao AI) — o do khong co
`.man-khoi` lo le, nen dai tu chua khoang cach duoi. */
.qt .man .kpi-dai{margin-bottom:var(--kc-4)}
/* O KPI mang con so DANG CHAN viec — to do de mat bat duoc ngay. Chi dung cho
thu that su phai xu ly (ho so chua noi tai khoan, hop dong sap het han),
khong dung lam nhan manh chung: to do moi o thi khong o nao noi bat. */
.qt .kpi .vv.vv-do{color:var(--qt-red-chu)}
.qt .kpi .vv-tran{font-size:14px;color:var(--qt-ink3);font-weight:500}
/* O KPI chua CHU (moc thoi gian) chu khong chua so: cung o do nhung chu dai
hon nen phai nho lai, khong thi no tran ra khoi the. */
.qt .kpi .vv.vv-chu{font-size:18px}
.qt .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:16px;margin-bottom:16px}
.qt .card{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:var(--qt-rlg);
box-shadow:var(--qt-sh)}
.qt .card-h{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 4px}
.qt .card-h h3{font-size:14px;font-weight:700}
.qt .card-h a,.qt .card-h span.a{font-size:12px;color:var(--qt-g700-chu);font-weight:600}
.qt .shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:16px 20px 20px}
.qt .sc-item{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 4px;
border-radius:11px;border:0;background:transparent;width:100%}
.qt .sc-item:hover{background:var(--qt-paper)}
.qt .sc-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center}
.qt .sc-item span{font-size:12px;font-weight:600;color:var(--qt-ink2);text-align:center}
.qt .auto-row{display:flex;align-items:center;gap:14px;padding:13px 20px;
border-bottom:1px solid var(--qt-line2)}
.qt .auto-row:last-child{border-bottom:none}
.qt .auto-ic{width:38px;height:38px;border-radius:10px;background:var(--qt-g100);
color:var(--qt-g700-chu);display:grid;place-items:center;flex-shrink:0}
.qt .auto-row .tt{font-size:14px;font-weight:700}
.qt .auto-row .ds{font-size:12px;color:var(--qt-ink3);margin-top:1px}
.qt .run-badge{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;
font-weight:700;color:var(--qt-g700-chu);background:var(--qt-g100);padding:4px 11px;
border-radius:999px;flex-shrink:0;white-space:nowrap}
.qt .run-badge .dt{width:6px;height:6px;border-radius:50%;background:var(--qt-g600);
animation:qtblink 1.6s infinite}
.qt .run-badge.off{color:var(--qt-ink3);background:var(--qt-paper)}
.qt .run-badge.off .dt{background:var(--qt-ink3);animation:none}
@keyframes qtblink{50%{opacity:.3}}
.qt .integ{display:flex;align-items:center;gap:12px;padding:18px 20px;flex-wrap:wrap}
.qt .integ-chip{display:flex;align-items:center;gap:8px;border:1px solid var(--qt-line);
border-radius:9px;padding:8px 14px;font-weight:600;font-size:14px;color:var(--qt-ink2)}
.qt .integ-dot{width:18px;height:18px;border-radius:5px;display:grid;place-items:center;flex-shrink:0}
.qt .right-rail{width:290px;flex-shrink:0;border-left:1px solid var(--qt-line);
background:var(--qt-paper);overflow-y:auto;padding:20px 16px}
.qt .rr-card{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:var(--qt-rlg);
margin-bottom:16px;box-shadow:var(--qt-sh)}
.qt .rr-h{display:flex;align-items:center;justify-content:space-between;padding:15px 16px 2px}
.qt .rr-h h4{font-size:14px;font-weight:700}
.qt .notif{display:flex;gap:10px;padding:10px 16px}
.qt .notif .di{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
flex-shrink:0;background:var(--qt-g100);color:var(--qt-g700-chu)}
.qt .notif .tx{font-size:12px;color:var(--qt-ink2);line-height:1.4}
.qt .notif time{display:block;font-size:10px;color:var(--qt-ink3);margin-top:2px}
.qt .rr-empty{padding:16px;font-size:12px;color:var(--qt-ink3);line-height:1.5}
.qt .qt-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 26px;
border-top:1px solid var(--qt-line);font-size:12px;color:var(--qt-ink3);flex-shrink:0}
.qt .btn{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:14px;
height:34px;padding:0 16px;border-radius:9px;transition:.15s;border:0}
.qt .btn-g{background:var(--qt-g700);color:#fff}
.qt .btn-g:hover{background:var(--qt-g800)}
/* `.qt .man button` (0,2,1) o dong ~460 THANG `.qt .btn` (0,2,0): mot
`