/* ================================================================
   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);

  --am:var(--ember);
  --amd:var(--ember-mo);
  --amtx:var(--ember);

  --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}
/* Ngan xep font he thong, giong het Facebook va Messenger.
   Windows -> Segoe UI · macOS -> SF Pro · Android -> Roboto
   Khong tai font ngoai nen hien ngay, va dau tieng Viet render dung tren moi may. */
body{font-family:var(--font-than);background:var(--bg);color:var(--t0);
  font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden;
  transition:background .18s,color .18s}
svg{display:block;flex-shrink:0}
.mono{font-family:var(--font-so);font-size:13px;letter-spacing:-.02em}

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}
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}

input,textarea,select{font:inherit;font-size:13px;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}
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}
.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;letter-spacing:.09em;text-transform:uppercase;
  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:11px;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:11px;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:13px;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:13px;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:13px;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:12.5px;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;letter-spacing:.08em;text-transform:uppercase;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:13px}
.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:13px;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 h1{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:13px;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:13px}
.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:13px;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:11px;font-weight:700;letter-spacing:.06em;color:var(--t2);
  text-transform:uppercase;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:11px;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:11px;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:13px;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:13px;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:13px;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.
   ================================================================ */
.qt{font-family:var(--qt-font);color:var(--qt-ink);font-size:13.5px;line-height:1.5}
/* 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}
.qt input{font-family:inherit;font-size:inherit}
.qt .mono{font-family:var(--qt-mono)}
.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;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:9px;display:block;flex-shrink:0}
.qt .brand .tx b{display:block;font-size:14.5px;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:8.5px 10px;
  border-radius:8px;color:var(--qt-ink2);font-weight:500;font-size:13.5px;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);font-weight:600}
.qt .sb-item .chev{margin-left:auto;color:var(--qt-ink3)}
.qt .sb-item .badge2{margin-left:auto;font-size:9.5px;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-family:var(--qt-mono);font-size:11px;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:12.5px;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::before{content:'';width:4px;height:4px;border-radius:50%;
  background:currentColor;flex-shrink:0;opacity:.5}
.qt .sb-ai{margin:12px;padding:14px;border-radius:var(--qt-rlg);
  background:linear-gradient(160deg,var(--qt-g900),var(--qt-g700));color:#fff;
  position:relative;overflow:hidden}
.qt .sb-ai::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;
  border-radius:50%;background:rgba(255,255,255,.08)}
.qt .sb-ai .ic-wrap{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;margin-bottom:10px;position:relative}
.qt .sb-ai b{font-size:13px;display:block;font-weight:700;position:relative}
.qt .sb-ai p{font-size:11.5px;color:var(--qt-g100-tx);margin:3px 0 12px;line-height:1.4;position:relative}
.qt .sb-ai a,.qt .sb-ai button{width:100%;background:#fff;color:var(--qt-g800);font-weight:700;
  font-size:12.5px;padding:8px 0;border-radius:8px;text-align:center;display:block;
  text-decoration:none;cursor:pointer;border:none;position:relative}

.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:10.5px;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:9px;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:34px;height:34px;border-radius:50%;background:var(--qt-g700);color:#fff;
  font-weight:700;font-size:12px;display:grid;place-items:center;flex-shrink:0}
.qt .tb-user .nm{font-size:13px;font-weight:700;line-height:1.2;text-align:left}
.qt .tb-user .rl{font-size:11px;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 h1{font-size:22px;font-weight:800;letter-spacing:-.4px}
.qt .dash-head .sub{color:var(--qt-ink3);font-size:13px;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:12.5px;color:var(--qt-ink3);font-weight:500}
.qt .kpi .vv{font-size:23px;font-weight:800;letter-spacing:-.4px;margin:9px 0 6px;
  font-family:var(--qt-mono)}
.qt .kpi .dl{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--qt-ink3)}

.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:14.5px;font-weight:700}
.qt .card-h a,.qt .card-h span.a{font-size:12.5px;color:var(--qt-g700);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:11.5px;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);display:grid;place-items:center;flex-shrink:0}
.qt .auto-row .tt{font-size:13.5px;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);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:13px;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:13.5px;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)}
.qt .notif .tx{font-size:12px;color:var(--qt-ink2);line-height:1.4}
.qt .notif time{display:block;font-size:10.5px;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:13px;
  padding:9px 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)}

/* ================================================================
   Man Hoi thoai (AI Chatbot) — port tu chat.gauux.com.html.
   Xem ManHoiThoai trong app.js. Dung chung .qt/.shell/.sidebar/.topbar/
   .sb-item/.tb-* voi man Tong quan o tren. */
.qt .itool{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;
  color:var(--qt-ink3);border:1px solid var(--qt-line);background:transparent}
.qt .itool:hover{background:var(--qt-paper)}

/* Topbar cao dung 60px — cell phai tu can giua va CAT bang ellipsis, khong
   duoc xuong dong: xuong dong la tran khoi 60px va bi che mat nua duoi
   (loi chu shop bao 09/08/2026). */
.qt .ht-topstrip{display:flex;flex:1;height:100%;overflow:hidden}
.qt .strip-cell{flex:1;padding:0 16px;border-right:1px solid var(--qt-line2);min-width:0;
  display:flex;flex-direction:column;justify-content:center}
.qt .strip-cell:last-child{border-right:none}
.qt .strip-cell .lb{font-size:11px;color:var(--qt-ink3);font-weight:600;display:flex;
  align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt .strip-cell .lb svg{flex-shrink:0}
.qt .strip-cell .vv{font-size:15px;font-weight:800;margin-top:3px;display:flex;align-items:center;
  gap:8px;font-family:var(--qt-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* O Doanh thu mang mau ho phach nhu ban chot */
.qt .strip-cell.vang .lb,.qt .strip-cell.vang .vv{color:var(--qt-amber)}
.qt .strip-cell .vv small{font-size:11px;font-weight:700;color:var(--qt-g700);background:var(--qt-g100);
  padding:1px 6px;border-radius:5px;font-family:var(--qt-font)}
.qt .strip-status{display:flex;flex-direction:column;justify-content:center;gap:5px}
.qt .strip-status .on{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13px;color:var(--qt-g700)}
.qt .strip-status .on .dt{width:7px;height:7px;border-radius:50%;background:var(--qt-g600);animation:qtblink 1.6s infinite}
.qt .strip-status .off{color:var(--qt-ink3)}
.qt .strip-status .off .dt{background:var(--qt-ink3);animation:none}
.qt .strip-status .sm{font-size:11.5px;color:var(--qt-ink3)}

.qt .ht-body{display:flex;flex:1;overflow:hidden}
.qt .ht-list{width:308px;border-right:1px solid var(--qt-line);background:var(--qt-white);
  display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.qt .ht-list-h{padding:14px 16px 0}
.qt .ht-list-h .row1{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.qt .ht-list-h h2{font-size:16px;font-weight:800}
.qt .ht-list-h .tools{display:flex;gap:4px}
.qt .ht-list-h .srch2{margin:10px 0}
.qt .pgs2{display:flex;gap:4px;overflow-x:auto;padding-bottom:10px}
.qt .pgpill{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;
  border-radius:999px;background:var(--qt-paper);border:1px solid var(--qt-line);color:var(--qt-ink2);
  white-space:nowrap;height:auto}
.qt .pgpill.on{background:var(--qt-g100);border-color:var(--qt-g100-vien);color:var(--qt-g800)}
.qt .pgpill i{width:14px;height:14px;border-radius:4px;display:grid;place-items:center;flex-shrink:0}
.qt .ht-scroll{flex:1;overflow-y:auto}
.qt .hc{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--qt-line2);
  cursor:pointer;position:relative;width:100%;text-align:left}
.qt .hc:hover{background:var(--qt-paper)}
.qt .hc.sel{background:var(--qt-g50)}
.qt .hc.sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--qt-g600)}
.qt .hc-m{flex:1;min-width:0}
.qt .hc-t{display:flex;justify-content:space-between;gap:8px}
.qt .hc-t b{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qt .hc-t time{font-size:11px;color:var(--qt-ink3);flex-shrink:0}
.qt .hc .pv{font-size:12px;color:var(--qt-ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:2px;display:flex;align-items:center;gap:6px}
.qt .hc .unread-dot{width:9px;height:9px;border-radius:50%;background:var(--qt-g600);flex-shrink:0;
  align-self:center}
/* Avatar tron mau tim co dinh (khong dung bang mau ngau nhien nhu ban dac ta,
   don gian hoa cho dot nay) — dung chung cho danh sach, dau khung chat, panel */
.qt .hc-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;position:relative;
  color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;background:var(--qt-violet)}
/* border-top:none + padding:0 de trung hoa lop .pf CO (theme cu, khong scope,
   dong ~231) — thieu hai dong do la huy hieu nen tang phinh meo tren moi avatar */
.qt .hc-av .pf{position:absolute;bottom:-2px;right:-2px;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--qt-white);border-top:2px solid var(--qt-white);padding:0;
  display:grid;place-items:center;color:#fff;background:#1877F2}
.qt .av2{width:36px;height:36px;border-radius:50%;background:var(--qt-violet);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:12px;flex-shrink:0}

.qt .ht-chat{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--qt-paper);min-width:0}
.qt .hch-head{padding:12px 20px;background:var(--qt-white);border-bottom:1px solid var(--qt-line);
  display:flex;align-items:center;gap:12px}
.qt .hch-head b{font-size:14.5px;font-weight:700}
.qt .vip{font-size:10px;font-weight:700;background:var(--qt-amber-bg);color:var(--qt-amber);padding:1px 7px;
  border-radius:999px;margin-left:5px}
.qt .hch-head .meta2{font-size:12px;color:var(--qt-ink3);display:flex;align-items:center;gap:8px;margin-top:1px}
.qt .tagpill{background:var(--qt-paper);border:1px solid var(--qt-line);font-size:11px;font-weight:600;
  padding:1px 8px;border-radius:999px;color:var(--qt-ink2)}
.qt .hch-head .acts{margin-left:auto;display:flex;gap:4px}

.qt .hch-scroll{flex:1;overflow-y:auto;padding:20px 24px}
.qt .hmsg-row{display:flex;gap:9px;margin-bottom:14px;max-width:72%}
.qt .hmsg-row.out{margin-left:auto;flex-direction:row-reverse}
.qt .hmsg-row .aiav{width:26px;height:26px;border-radius:8px;background:var(--qt-g700);color:#fff;
  display:grid;place-items:center;flex-shrink:0;margin-top:2px}
.qt .hmsg-row .aiav.nguoi{background:var(--qt-violet)}
.qt .hmsg-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.qt .hmsg-row.out .hmsg-col{align-items:flex-end}
.qt .hname{font-size:11.5px;font-weight:700;color:var(--qt-g700);margin-bottom:1px}
.qt .hname.nguoi{color:var(--qt-violet)}
.qt .hbub{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:4px 12px 12px 12px;
  padding:10px 13px;font-size:13.5px;line-height:1.55;white-space:pre-wrap}
.qt .hmsg-row.out .hbub{background:var(--qt-g50);border-color:var(--qt-g100-vien);border-radius:12px 4px 12px 12px}
.qt .htime{font-size:10.5px;color:var(--qt-ink3);display:flex;align-items:center;gap:4px}
.qt .htime .rd2{color:var(--qt-g600)}
.qt .ngay2{text-align:center;font-size:11.5px;color:var(--qt-ink3);font-weight:600;margin:6px 0 14px}

.qt .quick-acts{display:flex;gap:7px;flex-wrap:wrap;padding:0 24px 12px}
.qt .qa{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 12px;
  border-radius:999px;border:1px solid;background:transparent}
.qt .qa-g{background:var(--qt-g100);color:var(--qt-g800);border-color:var(--qt-g100-vien)}
.qt .qa-w{background:var(--qt-white);color:var(--qt-ink2);border-color:var(--qt-line)}
.qt .qa:disabled{opacity:.4;cursor:default}

.qt .hch-input{background:var(--qt-white);border-top:1px solid var(--qt-line);padding:12px 24px}
.qt .hinp-row{display:flex;align-items:center;gap:8px;border:1px solid var(--qt-line);border-radius:10px;
  padding:6px 8px 6px 14px}
.qt .hinp-row input{flex:1;border:0;outline:none;background:transparent;width:auto;height:auto;padding:0}
.qt .hinp-row .send{width:32px;height:32px;background:var(--qt-g700);color:#fff;border-radius:8px;
  display:grid;place-items:center;flex-shrink:0}
.qt .hinp-row .send:disabled{opacity:.5}
.qt .hinp-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--qt-ink3);
  margin-top:6px;padding:0 4px}

.qt .insight{background:var(--qt-white);border-top:1px solid var(--qt-line);padding:14px 24px}
.qt .insight-h{display:flex;align-items:center;justify-content:center;gap:7px;font-size:12.5px;
  font-weight:700;color:var(--qt-g700);margin-bottom:12px}
.qt .insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}
.qt .ins-item{display:flex;gap:10px}
.qt .ins-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex-shrink:0}
.qt .ins-item .tt{font-size:11.5px;color:var(--qt-ink3);font-weight:600}
.qt .ins-item .dd{font-size:13px;font-weight:700;margin-top:1px}

.qt .ht-detail{width:300px;border-left:1px solid var(--qt-line);background:var(--qt-white);
  overflow-y:auto;flex-shrink:0}
.qt .det-tabs{display:flex;border-bottom:1px solid var(--qt-line)}
.qt .det-tabs button{flex:1;padding:12px 0;font-size:12.5px;font-weight:700;color:var(--qt-ink3);
  border-bottom:2px solid transparent;justify-content:center}
.qt .det-tabs button.on{color:var(--qt-g700);border-color:var(--qt-g700)}
.qt .det-pad{padding:18px 16px}
.qt .cust-card{text-align:center;padding-bottom:16px;border-bottom:1px solid var(--qt-line2);margin-bottom:16px}
.qt .cust-av{width:58px;height:58px;border-radius:50%;background:var(--qt-violet);color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:18px;margin:0 auto 10px}
.qt .cust-card b{font-size:14.5px;font-weight:800}
.qt .info-row{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--qt-ink2);padding:6px 0}
.qt .stat3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;text-align:center;
  margin:12px 0;padding:12px 0;border-top:1px solid var(--qt-line2);border-bottom:1px solid var(--qt-line2)}
.qt .stat3 .v{font-size:15px;font-weight:800;color:var(--qt-ink)}
.qt .stat3 .l{font-size:10.5px;color:var(--qt-ink3);margin-top:2px}
.qt .info-row svg{color:var(--qt-ink3)}
.qt .sec-lb{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;
  margin:16px 0 10px}
.qt .sec-lb a,.qt .sec-lb span.a{font-size:11.5px;color:var(--qt-g700);font-weight:600}
.qt .cart-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--qt-line2)}
.qt .cart-thumb{width:36px;height:36px;border-radius:8px;background:var(--qt-g100);flex-shrink:0}
.qt .cart-item .nm{font-size:12.5px;font-weight:600}
.qt .cart-item .pr{font-size:11.5px;color:var(--qt-ink3);margin-top:1px}
.qt .qty{display:flex;align-items:center;gap:7px;margin-left:auto}
.qt .qty button{width:20px;height:20px;border:1px solid var(--qt-line);border-radius:5px;
  display:grid;place-items:center;font-size:12px;justify-content:center}
.qt .qty b{font-size:12.5px;min-width:12px;text-align:center}
.qt .sumrow{display:flex;justify-content:space-between;font-size:12.5px;color:var(--qt-ink2);padding:5px 0}
.qt .sumrow.total{font-weight:800;font-size:14.5px;color:var(--qt-ink);border-top:1px solid var(--qt-line);
  margin-top:6px;padding-top:10px}
.qt .sumrow.total .n{color:var(--qt-g700)}
.qt .btnfull{width:100%;background:var(--qt-g700);color:#fff;font-weight:700;padding:11px 0;
  border-radius:9px;margin-top:12px;font-size:13.5px;justify-content:center}
.qt .btnfull:disabled{opacity:.5}
.qt .channels{display:flex;align-items:center;gap:8px;margin-top:12px}
.qt .ch-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff}
.qt .rr-empty2{font-size:12px;color:var(--qt-ink3);line-height:1.6;padding:8px 0}

/* ================================================================
   Man Cai dat — khung kit cai-dat.html: thanh muc trai + pane phai */
.qt .set-card{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:var(--qt-rlg);
  box-shadow:var(--qt-sh);padding:20px 22px;margin-bottom:14px}
.qt .set-card h3{font-size:15px;font-weight:700;letter-spacing:-.2px;margin-bottom:4px}
.qt .set-card .mo{font-size:13px;color:var(--qt-ink3);margin-bottom:14px;line-height:1.55}
.qt .lk{color:var(--qt-g700);font-weight:600;cursor:pointer;font-size:inherit}
.qt .lk:hover{text-decoration:underline}
.qt .btn-nhat{border:1px solid var(--qt-line);background:var(--qt-white);color:var(--qt-ink2)}
.qt .btn-nhat:hover{border-color:var(--qt-ink3)}
.qt .kenh-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--qt-line2)}
.qt .kenh-row img{width:38px;height:38px;border-radius:10px;flex-shrink:0}
.qt .kenh-row .ka{width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:var(--qt-g100);color:var(--qt-g800);display:grid;place-items:center;font-weight:700}
.qt .kenh-row .ki{flex:1;min-width:0}
.qt .kenh-row .ki b{display:block;font-size:13.5px}
.qt .kenh-row .ki small{font-family:var(--qt-mono);font-size:11px;color:var(--qt-ink3)}
.qt .chip-tt{font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;flex-shrink:0}
.qt .chip-tt.bat{background:var(--qt-g100);color:var(--qt-g700)}
.qt .chip-tt.tat{background:var(--qt-paper);color:var(--qt-ink3)}
.qt .chip-tt.hong{background:var(--qt-red-bg);color:var(--qt-red)}
.qt .set-form{display:flex;gap:8px;flex-wrap:wrap}
.qt .set-form input,.qt .set-form select{height:36px;padding:0 11px;border:1px solid var(--qt-line);
  border-radius:8px;font:inherit;font-size:13px;color:var(--qt-ink);background:var(--qt-white)}
.qt .set-form input{flex:1;min-width:200px}
.qt .set-form input:focus{outline:none;border-color:var(--qt-g600);box-shadow:0 0 0 3px var(--qt-g100)}
.qt .nv-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--qt-line2);font-size:13px}
.qt .nv-row .av2{flex-shrink:0}
.qt .nv-row .nv-t{flex:1;min-width:0}
.qt .nv-row .nv-t b{display:block;font-size:13.5px}
.qt .nv-row .nv-t small{color:var(--qt-ink3);font-size:12px}
.qt .link-mot-lan{background:var(--qt-amber-bg);border-left:3px solid var(--qt-amber);
  border-radius:10px;padding:13px 14px;margin-top:12px;font-size:13px}
.qt .link-mot-lan b{display:block;margin-bottom:4px}
.qt .link-mot-lan p{color:var(--qt-ink2);font-size:12.5px;margin-bottom:9px}
.qt .link-mot-lan .lo{display:flex;gap:8px}
.qt .link-mot-lan input{flex:1;height:34px;padding:0 10px;border:1px solid var(--qt-line);
  border-radius:7px;font-family:var(--qt-mono);font-size:12px;background:var(--qt-white)}
.qt .chua-ds{margin:0;padding-left:20px}
.qt .chua-ds li{font-size:13px;color:var(--qt-ink2);line-height:1.6;margin-bottom:6px}

/* bang ton kho POS (Cai dat › Kho hang) — so that doc thang tu Pancake */
.qt .pos-bang{width:100%;border-collapse:collapse;font-size:13px}
.qt .pos-bang th{text-align:left;padding:8px 10px;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;color:var(--qt-ink3);
  border-bottom:1px solid var(--qt-line)}
.qt .pos-bang td{padding:9px 10px;border-bottom:1px solid var(--qt-line);color:var(--qt-ink)}
.qt .pos-bang tr:last-child td{border-bottom:none}
.qt .pos-bang td:nth-child(3),.qt .pos-bang td:nth-child(4),
.qt .pos-bang th:nth-child(3),.qt .pos-bang th:nth-child(4){text-align:right}
.qt .mono-nho{font-family:var(--qt-mono);font-size:12px;color:var(--qt-ink2)}
.qt .het{color:var(--qt-red);font-weight:600}

.qt .cuon-ngang{overflow-x:auto}
.qt .dc-ngan{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--qt-ink2);font-size:12.5px}

/* ==== khung man danh sach hs-* — port tu design/ui-kit/don-hang.html =======
   Dung chung cho Don hang, Khach hang: rail "danh sach da luu" ben trai,
   obj-tabs, toolbar, bang sticky header, footer phan trang. Mau chi lay tu
   token --qt-*, khong hex — test giao-dien khoa. */
.qt .hs-shell{display:flex;flex:1;overflow:hidden}
.qt .hs-views{width:220px;border-right:1px solid var(--qt-line);background:var(--qt-white);
  flex-shrink:0;overflow-y:auto;padding:14px 10px}
.qt .hs-views h5{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--qt-ink3);padding:8px 8px 6px}
.qt .hs-view-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;
  border:none;background:none;border-radius:7px;font-size:13px;color:var(--qt-ink2);
  cursor:pointer;font-family:inherit;text-align:left}
.qt .hs-view-item:hover{background:var(--qt-paper)}
.qt .hs-view-item.on{background:var(--qt-g100);color:var(--qt-g800);font-weight:600}
.qt .hs-view-item .n{margin-left:auto;font-size:11px;color:var(--qt-ink3)}
.qt .hs-view-item:disabled{cursor:default;opacity:.55}
.qt .hs-main{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--qt-white)}
.qt .obj-tabs{display:flex;align-items:center;gap:2px;background:var(--qt-white);
  border-bottom:1px solid var(--qt-line);padding:0 20px}
.qt .obj-tab{display:flex;align-items:center;gap:7px;padding:13px 14px;font-size:13.5px;
  font-weight:600;color:var(--qt-ink3);border:none;background:none;font-family:inherit;
  border-bottom:2px solid transparent;cursor:pointer}
.qt .obj-tab.on{color:var(--qt-ink);border-bottom-color:var(--qt-g700)}
.qt .obj-tab .n2{font-size:11px;color:var(--qt-ink3);font-weight:500}
.qt .hs-toolbar{display:flex;align-items:center;gap:8px;padding:12px 20px;
  background:var(--qt-white);border-bottom:1px solid var(--qt-line);flex-wrap:wrap}
.qt .hs-toolbar .search{display:flex;align-items:center;gap:7px;flex:1;max-width:280px;
  height:34px;padding:0 10px;border:1px solid var(--qt-line);border-radius:8px;
  background:var(--qt-white);color:var(--qt-ink3)}
.qt .hs-toolbar .search input{border:none;outline:none;flex:1;font-size:13px;
  background:transparent;font-family:inherit;color:var(--qt-ink)}
.qt .hbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:8px;
  border:1px solid var(--qt-line);background:var(--qt-white);font-size:12.5px;font-weight:600;
  color:var(--qt-ink2);cursor:pointer;font-family:inherit}
.qt .hbtn:hover{border-color:var(--qt-ink3)}
.qt .hbtn:disabled{opacity:.6;cursor:default}
.qt .hbtn-primary{background:var(--qt-g700);color:var(--qt-white);border-color:var(--qt-g700)}
.qt .hbtn-primary:hover{background:var(--qt-g800)}
.qt .hs-body{flex:1;overflow:auto;background:var(--qt-white)}
.qt .hstable{width:100%;border-collapse:collapse;font-size:12.5px}
.qt .hstable th{position:sticky;top:0;background:var(--qt-paper);border-bottom:1px solid var(--qt-line);
  border-right:1px solid var(--qt-line2);padding:9px 12px;text-align:left;font-weight:600;
  color:var(--qt-ink2);white-space:nowrap;z-index:2}
.qt .hstable td{border-bottom:1px solid var(--qt-line2);border-right:1px solid var(--qt-line2);
  padding:9px 12px;white-space:nowrap;color:var(--qt-ink2)}
.qt .hstable tbody tr:hover{background:var(--qt-g50)}
.qt .hs-name{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--qt-g700);
  cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;padding:0}
.qt .hs-name:hover{text-decoration:underline}
.qt .stage-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:5px}
.qt .stage-lead{background:var(--qt-blue-bg);color:var(--qt-blue)}
.qt .stage-sql{background:var(--qt-amber-bg);color:var(--qt-amber)}
.qt .stage-cust{background:var(--qt-g100);color:var(--qt-g700)}
.qt .stage-churn{background:var(--qt-red-bg);color:var(--qt-red)}
.qt .stage-gray{background:var(--qt-paper);color:var(--qt-ink3)}
.qt .chn-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--qt-ink2)}
.qt .chn-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.qt .hs-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;
  border-top:1px solid var(--qt-line);background:var(--qt-white);font-size:12px;color:var(--qt-ink3)}
.qt .hs-footer .lo{display:flex;gap:8px;align-items:center}

/* cai dat — set-page theo design/ui-kit/cai-dat.html (rail dung hs-views) */
.qt .set-page{flex:1;overflow-y:auto;padding:24px 28px;background:var(--qt-paper)}
.qt .set-page > h1{font-size:20px;font-weight:800;letter-spacing:-.3px}
.qt .set-page > .sub{color:var(--qt-ink3);font-size:13px;margin:4px 0 18px}

/* bao cao — thu vien bao cao (report-grid) theo kit bao-cao.html */
.qt .report-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.qt .report-card{background:var(--qt-white);border:1px solid var(--qt-line);
  border-radius:var(--qt-rlg);padding:20px;box-shadow:var(--qt-sh);text-align:left}
.qt .report-card.mo-duoc{cursor:pointer;transition:box-shadow .18s,transform .18s}
.qt .report-card.mo-duoc:hover{transform:translateY(-2px);box-shadow:var(--qt-sh-lg)}
.qt .report-card.chua{opacity:.6}
.qt .rc-ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:14px}
.qt .report-card b{font-size:14px;font-weight:700;display:block;margin-bottom:5px}
.qt .report-card span{font-size:12.5px;color:var(--qt-ink3);line-height:1.5;display:block;margin-bottom:12px}
.qt .report-card .di{font-size:12.5px;font-weight:700;color:var(--qt-g700)}

/* cong viec — kanban khung theo kit cong-viec.html, cot RONG trung thuc */
.qt .kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:start}
.qt .kb-col{background:var(--qt-paper);border:1px solid var(--qt-line);border-radius:12px;
  padding:10px;min-height:220px}
.qt .kb-col-h{display:flex;justify-content:space-between;font-size:12px;font-weight:700;
  padding:4px 6px 10px;color:var(--qt-ink2)}
.qt .kb-col-h .n{color:var(--qt-ink3);font-weight:600}
.qt .kb-trong{border:1px dashed var(--qt-line);border-radius:9px;padding:18px 10px;
  text-align:center;font-size:11.5px;color:var(--qt-ink3);background:var(--qt-white)}

/* okr — bo cuc the muc tieu theo kit okr-kpi.html. The "vi-du" la BAN MAU
   bo cuc de nguoi dung hinh dung, mo + gan nhan ro, khong mang so nao. */
.qt .okr-quarter{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.qt .okr-quarter button{padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:600;
  color:var(--qt-ink2);border:1px solid var(--qt-line);background:var(--qt-white)}
.qt .okr-quarter button.on{background:var(--qt-ink);color:var(--qt-white);border-color:var(--qt-ink)}
.qt .okr-quarter button:disabled{cursor:default;opacity:.7}
.qt .okr-card{background:var(--qt-white);border:1px solid var(--qt-line);border-radius:14px;
  padding:20px 22px;margin-bottom:14px;box-shadow:var(--qt-sh);max-width:980px}
.qt .okr-card.vi-du{border-style:dashed;opacity:.75}
.qt .okr-top{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.qt .okr-ring{width:40px;height:40px;flex-shrink:0}
.qt .okr-title{flex:1;min-width:0}
.qt .okr-title b{font-size:14.5px;font-weight:700;display:block}
.qt .okr-title span{font-size:12px;color:var(--qt-ink3)}
.qt .okr-pct{font-size:18px;font-weight:800;color:var(--qt-ink3)}
.qt .kr-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--qt-line2)}
.qt .kr-row .kr-txt{flex:1;font-size:13px;color:var(--qt-ink2)}
.qt .kr-row .kr-bar{width:120px;height:6px;background:var(--qt-paper);border-radius:3px;
  overflow:hidden;flex-shrink:0}
.qt .kr-row .kr-bar i{display:block;height:100%;background:var(--qt-g600)}
.qt .kr-row .kr-val{font-size:12px;font-weight:600;color:var(--qt-ink2);width:70px;
  text-align:right;flex-shrink:0}
.qt .nhan-vi-du{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--qt-ink3);border:1px dashed var(--qt-line);
  border-radius:5px;padding:2px 8px;margin-bottom:10px}
.qt .kb-col-h .cham{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.qt .cnt2{margin-left:auto;font-size:11px;font-weight:700;color:var(--qt-ink3);
  background:var(--qt-white);border:1px solid var(--qt-line);min-width:20px;height:20px;
  border-radius:10px;display:grid;place-items:center;padding:0 6px}

/* bao cao — bc-page + bieu do cot thuan CSS theo kit */
.qt .bc-page{padding:24px 28px;overflow-y:auto;flex:1;background:var(--qt-paper)}
.qt .bc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
  gap:16px;flex-wrap:wrap}
.qt .bc-head h1{font-size:22px;font-weight:800;letter-spacing:-.4px}
.qt .bc-head .sub{color:var(--qt-ink3);font-size:13px;margin-top:4px}
.qt .bc-bars{display:flex;align-items:flex-end;gap:10px;height:180px;padding:6px 4px 0}
.qt .bc-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.qt .bc-bar{width:100%;max-width:34px;height:100%;background:var(--qt-g100);
  border-radius:6px 6px 0 0;display:flex;align-items:flex-end;overflow:hidden}
.qt .bc-bar .fl{width:100%;background:var(--qt-g600)}
.qt .bc-col span{font-size:10.5px;color:var(--qt-ink3);font-family:var(--qt-mono)}
.qt .csub{color:var(--qt-ink3);font-size:12.5px;margin:2px 0 12px}

/* empty-state dung chung (muc 7 GAUUX-UI-SPEC) — man module chua noi backend
   dung cai nay, khong bay so mau gia lam that */
.qt .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:56px 24px}
.qt .empty-state .es-ic{width:52px;height:52px;border-radius:14px;background:var(--qt-paper);
  border:1px solid var(--qt-line);color:var(--qt-ink3);display:grid;place-items:center;
  margin-bottom:16px}
.qt .empty-state b{font-size:14px;font-weight:700;color:var(--qt-ink)}
.qt .empty-state span{font-size:12.5px;color:var(--qt-ink3);margin-top:5px;max-width:320px;
  line-height:1.5}

@media(max-width:1400px){.qt .ht-detail{display:none}}
@media(max-width:1024px){.qt .grid2{grid-template-columns:1fr}.qt .grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.qt .sidebar{display:none}.qt .right-rail{display:none}}
@media(max-width:640px){.qt .grid4{grid-template-columns:1fr}}

.trang-the{display:flex;align-items:center;gap:11px;padding:12px;
  border:1px solid var(--ln);border-radius:12px;margin-bottom:8px;background:var(--p1)}
.trang-the.tat{opacity:.55}
.trang-i{width:30px;height:30px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.trang-the .nm{flex:1;min-width:0;font-size:16px;font-weight:500}
.trang-the .nm small{display:block;color:var(--t2);font-size:13px;font-weight:400}

.moi-hang{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.moi-hang input{flex:1;min-width:180px}
.moi-hang select{width:auto;min-width:110px}

.link-moi{background:var(--aid);border:1px solid var(--aib);border-radius:12px;
  padding:14px;margin-bottom:16px}
.link-moi b{display:block;font-size:16px;margin-bottom:4px;color:var(--t0)}
.link-moi p{font-size:14px;color:var(--t1);margin-bottom:10px;line-height:1.5}
.link-o{display:flex;gap:7px}
.link-o input{flex:1;font-size:14px}

.av-nv{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--p3);
  color:var(--t1);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-so);font-weight:700;font-size:13px}

/* ---------------- man chon trang: buoc huong dan ---------------- */
.man-hep{max-width:520px}

.chon-tat{margin-bottom:12px;font-size:14px;border-style:dashed}

.tt-ds{display:flex;flex-direction:column;gap:8px}

/* The trang: anh 44px, ten, trang thai, o tich. Bam ca the chu khong chi o tich —
   vung bam lon thi it truot tay hon, nhat la tren dien thoai. */
.tt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 13px;border:1px solid var(--ln);border-radius:12px;background:var(--p1);
  cursor:pointer;transition:.12s}
.tt:hover:not(:disabled){border-color:var(--ln2);background:var(--p2)}
.tt.on{border-color:var(--orange);background:var(--cam-mo);box-shadow:0 0 0 1px var(--orange)}
.tt:disabled{cursor:default}
.tt.xong{opacity:.6}
.tt.tinh{cursor:default}
.tt.tat{opacity:.5}

.tt-a{width:44px;height:44px;border-radius:12px;flex-shrink:0;object-fit:cover;display:block;
  background:var(--p3)}
.tt-a-trong{display:flex;align-items:center;justify-content:center;
  font-family:var(--font-tieu-de);font-weight:700;font-size:18px;color:var(--t2)}

.tt-i{flex:1;min-width:0}
.tt-i b{display:block;font-size:16px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tt-i small{display:block;font-size:14px;color:var(--t2);margin-top:2px}

.tt-ck{width:22px;height:22px;border-radius:8px;flex-shrink:0;border:1.5px solid var(--ln2);
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;
  color:transparent;transition:.12s}
.tt.on .tt-ck{background:var(--orange);border-color:var(--orange);color:var(--tren-cam)}
.tt-ck.xong{background:var(--aqua);border-color:var(--aqua);color:var(--tren-cam)}

/* Thanh hanh dong dinh day — nut chinh luon trong tam mat, khong phai cuon tim */
.man-day{position:sticky;bottom:0;background:var(--p1);border-top:1px solid var(--ln);
  flex-shrink:0;box-shadow:0 -8px 24px -12px rgba(0,0,0,.25)}
.man-day-in{max-width:520px;margin:0 auto;padding:13px 28px;
  display:flex;align-items:center;gap:9px}
.man-day-t{flex:1;font-size:14px;color:var(--t1)}

.nut-lk{display:inline-flex;align-items:center;padding:8px 16px;border-radius:var(--r);
  background:var(--orange);color:var(--tren-cam);font-weight:600;font-size:14px;
  text-decoration:none}

/* ---------------- khung chat ---------------- */
.chh-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--p3);color:var(--t1);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-so);font-weight:700;font-size:13px;position:relative}

.win.low{color:var(--amtx);background:var(--amd);border-color:transparent}

/* Nhan ngay: duong ke mo co chu o giua */
.ngay{text-align:center;font-size:13px;color:var(--t2);margin:14px 0 10px;position:relative}
.ngay::before{content:none}
.ngay span{background:var(--p1);border:1px solid var(--ln);border-radius:16px;
  padding:2px 12px;position:relative;font-size:12px}

/* Cum tin: nhieu bong bong lien tiep cua cung nguoi, chi mot moc gio o cuoi.
   Bo goc 6px chu khong 16px — bo goc lon nhin nhu ung dung nhan tin ca nhan;
   day la cong cu lam viec, va bo goc nho cho phep bong bong xep sat nhau hon. */
.cum{display:flex;gap:8px;margin-bottom:9px;align-items:flex-end}
.cum.k{justify-content:flex-start}
.cum.s{justify-content:flex-end}
.cum-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;background:var(--p1);color:var(--t1);
  display:flex;align-items:center;justify-content:center;border:1px solid var(--ln);
  font-family:var(--font-so);font-weight:700;font-size:12px;margin-bottom:2px;position:relative}
.cum-bb{max-width:62%;display:flex;flex-direction:column;gap:2px;min-width:0}
.cum.s .cum-bb{align-items:flex-end}

.bb{padding:7px 11px;border-radius:8px;font-size:16px;line-height:1.42;white-space:pre-wrap;
  word-break:break-word;width:fit-content;max-width:100%}
/* Khach gui: trang tren nen am */
.k .bb{background:var(--bb-khach);color:var(--bb-khach-chu);border:1px solid var(--bb-khach-vien)}
/* AI gui: nen ngoc NHAT — chiem phan lon man hinh nen phai diu */
.s .bb{background:var(--bb-ai);color:var(--bb-ai-chu);border:1px solid var(--bb-ai-vien)}
/* NGUOI gui: nen tim DAM. Hiem, va la luc dang can chu y nhat. */
.s .bb.bynguoi{background:var(--bb-nguoi);color:var(--bb-nguoi-chu);border-color:var(--bb-nguoi-vien)}

.cum-ct{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t2);padding:1px 2px 0}
.do-ai{font-family:var(--font-so);font-size:11px;color:var(--aqua);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.do-nguoi{font-family:var(--font-so);font-size:11px;color:var(--iris);font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.tt-gui{font-family:var(--font-so);letter-spacing:-.06em}
.tt-gui.xau{color:var(--rd);font-weight:700}
.bb-loi{font-size:13px;color:var(--rdtx);background:var(--rdd);border-radius:4px;
  padding:3px 8px;margin-top:2px}

/* Man hinh trong: noi ro lam gi tiep, khong de mot dong chu cut lun */
.ch-trong{max-width:300px;margin:60px auto;text-align:center;color:var(--t2);font-size:14px;line-height:1.6}
.ch-trong-i{width:44px;height:44px;margin:0 auto 12px;color:var(--t2);opacity:.5}
.ch-trong-i svg{width:44px;height:44px}
.ch-trong b{display:block;color:var(--t1);font-size:16px;font-weight:600;margin-bottom:5px}
.ch-trong p{margin:0}


/* ---------------- nhan ----------------
   Mat do lay tu anh Pancake dang chay that: nhan cao 16px, chu 10px, bo goc 3px,
   cach nhau 3px. Thua hon thi danh sach chi vua 8-9 dong thay vi 14. */

.chip{display:inline-flex;align-items:center;gap:3px;height:17px;padding:0 6px;
  border-radius:4px;font-size:12px;font-weight:700;letter-spacing:.01em;
  white-space:nowrap;background:var(--c);color:#14121A;line-height:1}
.chip.nho{height:16px;font-size:11px;padding:0 5px}
.chip.bam{cursor:pointer}
/* AI de xuat: vien dut va mo, cho nguoi xac nhan */
.chip.cho{background:transparent;color:var(--c);border:1px dashed var(--c);font-weight:600}
.chip-x{cursor:pointer;opacity:.55;font-weight:700}
.chip-x:hover{opacity:1}

.chip-hang{display:flex;gap:3px;margin-top:4px;flex-wrap:nowrap;overflow:hidden}
.chip-du{font-size:11px;color:var(--t2);align-self:center;flex-shrink:0;font-weight:600}

/* Cham bao AI da soan san — thay cho nhan "N goi y" chiem cho */
.cham-ai{width:6px;height:6px;border-radius:50%;background:var(--aqua);flex-shrink:0}

/* Trich dan cat dung mot dong, khong xuong dong */
.cv .sn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- Bang nhan duoi khung chat ----
   Dung theo design/pancake-hopthu.png. Hai dieu quan trong:

   1. O nhan LUC NAO CUNG mang mau cua no. Nhan vien tim nhan bang mau va vi tri,
      khong doc chu — lam xam het thi moi lan gan phai doc ca 24 o.
   2. Bang LUON HIEN, khong giau vao menu. Giau di la cham han.

   Sau nhom xep ngang, moi nhom mot luoi 2x2. */
.bn{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;
  border-top:1px solid var(--ln);flex-shrink:0;background:var(--p1)}
.bn-nhom{min-width:0;display:flex;flex-direction:column}
.bn-ten{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#14121A;text-align:center;padding:4px 2px;background:var(--c);
  filter:saturate(.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bn-o{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:1px 0 0;flex:1}

.bn-n{position:relative;height:19px;padding:0 4px 0 9px;border:0;border-radius:0;
  font-size:11px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer;justify-content:center;gap:0;
  background:var(--c);color:#14121A;opacity:.62;transition:.1s}
.bn-n span{overflow:hidden;text-overflow:ellipsis}
.bn-n:hover:not(:disabled){opacity:1;box-shadow:inset 0 0 0 1.5px #14121A}
/* Da gan: to day + cham o mep trai, dung dau hieu Pancake dung */
.bn-n.co{opacity:1}
.bn-cham{position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:#14121A}
/* AI de xuat: cham RONG va o ke dut — nhin la biet may doan hay nguoi gan */
.bn-n.cho{opacity:.85;box-shadow:inset 0 0 0 1px #14121A}
.bn-n.cho .bn-cham{background:transparent;border:1.5px solid #14121A;width:6px;height:6px}

@media(max-width:1500px){.bn{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- o soan tin ---- */
.cmp{background:var(--p1);border-top:1px solid var(--ln);flex-shrink:0}
.inp{display:flex;gap:8px;align-items:center;padding:9px 12px}
.inp input{border:0;background:transparent;padding:4px 0;font-size:16px}
.inp input:focus{border:0;outline:none}
/* Anh dai dien Trang o dau o soan — nhan vien luon biet dang tra loi TU trang nao,
   quan trong khi mot nguoi truc nhieu trang cung luc. */
.inp-tr{width:24px;height:24px;border-radius:8px;flex-shrink:0;background:var(--p3);
  color:var(--t1);display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700}
.inp button.pri{padding:7px 11px;flex-shrink:0}
.qr{display:flex;gap:5px;padding:8px 12px 0;overflow-x:auto}
.qr button{font-size:13px;padding:3px 10px;border-radius:16px;color:var(--t1);
  white-space:nowrap;background:var(--p3);border-color:transparent}

/* Man chua dung: liet ke viec that con vuong, khong phai "dang phat trien" */
.chua-ds{list-style:none;margin:0 0 4px}
.chua-ds li{position:relative;padding:7px 0 7px 20px;font-size:14px;color:var(--t1);
  line-height:1.55;border-bottom:1px solid var(--ln)}
.chua-ds li::before{content:'';position:absolute;left:5px;top:14px;width:5px;height:5px;
  border-radius:50%;background:var(--orange)}

/* ---------------- đào tạo ----------------
   Ba bước phải nhìn ra ngay đang ở đâu: xong / đang làm / chưa tới. */
.dt-buoc{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 4px}
.dt-b{border:1px solid var(--ln);border-radius:12px;padding:10px 12px;background:var(--p1)}
.dt-b b{display:block;font-size:14px;font-weight:600;margin:5px 0 2px}
.dt-b small{display:block;font-size:13px;color:var(--t2);line-height:1.45}
.dt-so{width:20px;height:20px;border-radius:50%;background:var(--p3);color:var(--t2);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.dt-b.xong{border-color:var(--aqua)}
.dt-b.xong .dt-so{background:var(--aqua);color:var(--tren-cam)}
.dt-b.dang{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange)}
.dt-b.dang .dt-so{background:var(--orange);color:var(--tren-cam)}

.dt-the{border:1px solid var(--ln);border-radius:12px;padding:13px;background:var(--p1)}
.dt-the-r1{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dt-the-r1 b{font-size:16px;font-weight:600}
.dt-sp{flex:1}
.dt-nho{font-size:14px;color:var(--t2)}

.dt-kq{display:flex;align-items:center;gap:12px;border-radius:12px;padding:11px 13px;
  border:1px solid var(--ln);background:var(--p1)}
.dt-kq.qua{border-color:var(--aqua);background:var(--aqua-mo)}
.dt-kq.hong{border-color:var(--do);background:var(--do-mo)}
.dt-kq-so{flex:1;display:flex;align-items:baseline;gap:9px}
.dt-kq-so b{font-family:var(--font-so);font-size:22px;font-weight:700}
.dt-kq-so span{font-size:14px;color:var(--t1)}

.dt-ds{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.dt-hong{border-left:3px solid var(--do);background:var(--p1);border-radius:0 8px 8px 0;padding:9px 12px}
.dt-hong b{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
.dt-loi{font-size:13px;color:var(--t2);font-family:var(--font-so);line-height:1.6;
  word-break:break-word}

.dt-trang{display:flex;align-items:center;gap:11px;padding:11px 13px;border:1px solid var(--ln);
  border-radius:12px;background:var(--p1)}
.dt-trang-i{flex:1;min-width:0}
.dt-trang-i b{display:block;font-size:16px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dt-trang-i small{display:block;font-size:13px;color:var(--t2);margin-top:2px}
.dt-trang .ckb{cursor:pointer;background:transparent;padding:0}
.dt-trang .ckb.on{background:var(--orange);border-color:var(--orange);color:var(--tren-cam)}

/* Nút áp và LÝ DO vì sao đang mờ, nằm cạnh nhau. Nút mờ không nói lý do thì
   người dùng bấm mãi rồi tưởng hỏng. */
.dt-ap{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px;
  border:1px solid var(--ln);border-radius:12px;background:var(--p3);flex-wrap:wrap}
.dt-vi-sao{flex:1;min-width:200px;font-size:14px;color:var(--t1);line-height:1.5}

/* ---- danh sach kich ban trong man Dao tao ----
   Chu shop doc khoi nay de tin duoc con bot, nen no phai hien NGUYEN VAN cau
   tra loi, chia dung bubble, va chi ro cho nao chen anh. Tom tat lai la mat
   tac dung: khong ai duyet duoc thu minh khong doc duoc. */
.kb-ds{display:flex;flex-direction:column;gap:7px}
.kb{border:1px solid var(--ln);border-radius:12px;background:var(--p1);overflow:hidden}
.kb.mo{border-color:var(--ln2)}
.kb-dau{display:flex;width:100%;align-items:center;gap:8px;border:0;background:transparent;
  padding:10px 12px 6px;text-align:left;justify-content:flex-start}
.kb-dau:hover{background:transparent}
.kb-mui{display:flex;color:var(--t2);flex-shrink:0}
.kb-mui svg{width:13px;height:13px;transform:rotate(90deg);transition:transform .13s}
.kb.mo .kb-mui svg{transform:rotate(270deg)}
.kb-ten{flex:1;min-width:0;font-size:16px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.kb-tool{font-style:normal;font-size:11px;font-weight:600;flex-shrink:0;border-radius:4px;
  padding:1px 6px;background:var(--grd);color:var(--grtx);font-family:var(--font-so)}
.kb-ut{font-family:var(--font-so);font-size:12px;color:var(--t2);flex-shrink:0}

.kb-tk{display:flex;flex-wrap:wrap;gap:3px;padding:0 12px 10px 33px}
.kb-t{font-size:12px;color:var(--t1);background:var(--p3);border-radius:4px;padding:1px 6px;
  white-space:nowrap}
.kb-t.du{color:var(--t2)}

.kb-than{padding:2px 12px 12px 33px;border-top:1px solid var(--ln);margin-top:2px}
.kb-hoi{margin:9px 0;font-size:13px;color:var(--t2)}
.kb-tl{margin:9px 0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
/* Ve dung hinh bong bong AI, de doc la hinh dung duoc khach se thay gi */
.kb-bb{max-width:min(100%,520px);background:var(--bb-ai);color:var(--bb-ai-chu);
  border:1px solid var(--bb-ai-vien);border-radius:8px;padding:7px 10px;font-size:14px;
  line-height:1.45;white-space:pre-wrap}
.kb-anh{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-so);font-size:13px;
  color:var(--t1);background:var(--p3);border:1px dashed var(--ln2);border-radius:8px;padding:5px 9px}
.kb-anh svg{width:13px;height:13px;color:var(--t2)}
.kb-gc{font-size:13px;color:var(--t2);margin-top:3px;padding-left:2px;border-left:2px solid var(--ln2)}

/* ---- man "Thong tin cua ban" ---- */
.ttb-form{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ln);
  border-radius:12px;padding:18px 20px;background:var(--p1);max-width:900px}
.ttb-ds{display:flex;flex-direction:column;gap:8px}
.ttb-m{border:1px solid var(--ln);border-radius:12px;padding:13px 16px;background:var(--p1)}
/* Muc dang tat van hien, chi mo di — xoa han thi shop mat cai da viet cong phu */
.ttb-m.tat{opacity:.5}
.ttb-m-dau{display:flex;align-items:center;gap:7px;margin-bottom:5px;cursor:pointer}
.ttb-m-dau b{font-size:16px}
.ttb-m-mo{font-size:14px;color:var(--t1);line-height:1.5;white-space:pre-wrap}

/* ---- nut "Loc theo" (hoc tu Pancake) ----
   Bo loc la mot NUT canh o tim, khong phai mot cot rieng. Cot rieng an 158px be
   ngang ma khung chat moi la thu nhan vien nhin ca ngay. */
.lt{position:relative;flex:1;min-width:0}
.lt-nut{display:flex;width:100%;align-items:center;gap:7px;height:30px;padding:0 10px;
  border:1px solid var(--ln2);border-radius:8px;background:var(--p1);color:var(--t0);
  font-size:13px;font-weight:600}
.lt-nut:hover{background:var(--p3)}
.lt-nut.on{border-color:var(--orange);color:var(--orange);background:var(--cam-mo)}
.lt-nut svg{width:14px;height:14px;flex-shrink:0}
.lt-nut span:nth-child(2){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;text-align:left}
.lt-nut b{font-family:var(--font-so);font-size:12px;flex-shrink:0}
.lt-bang{position:absolute;top:calc(100% + 5px);left:0;z-index:40;min-width:260px;
  padding:6px;background:var(--p3);border:1px solid var(--vien-2);border-radius:8px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);max-height:70vh;overflow-y:auto}
.lt-nhom + .lt-nhom{margin-top:5px;padding-top:6px;border-top:1px solid var(--ln)}
.lt-ten{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--t2);padding:3px 9px 5px}
.lt-m{display:flex;width:100%;align-items:center;gap:8px;border:0;background:transparent;
  padding:8px 9px;border-radius:8px;font-size:14px;color:var(--t1);text-align:left;
  justify-content:flex-start}
.lt-m:hover{background:var(--p1);color:var(--t0)}
.lt-m.on{background:var(--cam-mo);color:var(--orange);font-weight:600}
.lt-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lt-s{font-family:var(--font-so);font-size:12px;font-weight:700;flex-shrink:0;
  background:var(--p3);color:var(--t1);border-radius:8px;padding:1px 7px;min-width:22px;text-align:center}
.lt-m.on .lt-s{background:var(--orange);color:var(--tren-cam)}
.lt-s.khong{opacity:.4;font-weight:500}

/* ---- nut them thong tin ---- */
.ttb-nut{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.ttb-b{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:12px;
  border:1px dashed var(--ln2);background:var(--p1);color:var(--t0);font-size:14px;font-weight:600}
.ttb-b:hover{border-style:solid;border-color:var(--orange);color:var(--orange);background:var(--cam-mo)}
.ttb-form-dau{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--t2);margin-bottom:2px}
.ttb-form label{font-size:13px;font-weight:600;color:var(--t1);margin-top:4px}
.ttb-form label em{font-style:normal;font-weight:400;color:var(--t2)}
.ttb-xem{max-width:220px;max-height:150px;border-radius:8px;border:1px solid var(--ln);
  object-fit:cover;margin-top:6px}

/* ---- thanh loc doc dang icon (hoc tu Pancake) ----
   Mot cot MANH: 52px vua du o bam 38px cong le. Rong hon la an mat be ngang cua
   khung chat, ma khung chat moi la thu nhan vien nhin ca ngay. */
.rl{background:var(--p1);border-right:1px solid var(--ln);display:flex;flex-direction:column;
  align-items:center;gap:2px;padding:8px 0;overflow-y:auto}
.rl-i{position:relative;width:38px;height:38px;padding:0;justify-content:center;
  border:0;border-radius:12px;background:transparent;color:var(--t2);flex-shrink:0}
.rl-i:hover{background:var(--p3);color:var(--t0)}
.rl-i.on{background:var(--cam-mo);color:var(--orange)}
.rl-i svg{width:19px;height:19px}
.rl-bg{position:absolute;top:1px;right:0;min-width:16px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--orange);color:var(--tren-cam);border:2px solid var(--p1);
  font-family:var(--font-so);font-size:11px;font-weight:700;font-style:normal;
  display:flex;align-items:center;justify-content:center;line-height:1}

/* ---- luong chat 8 buoc ---- */
.lg{display:flex;flex-direction:column;gap:0}
.lg-b{display:flex;gap:13px;position:relative;padding-bottom:14px}
/* Duong noi giua cac buoc — de nhin ra day la mot CHUOI, khong phai danh sach */
.lg-b:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:0;
  width:2px;background:var(--ln2)}
.lg-b.thieu::before{background:repeating-linear-gradient(var(--ln2) 0 4px,transparent 4px 8px)}
.lg-so{width:32px;height:32px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-so);font-size:14px;font-weight:700;
  background:var(--orange);color:var(--tren-cam);z-index:1}
.lg-b.thieu .lg-so{background:var(--p3);color:var(--t2);border:2px dashed var(--ln2)}
.lg-noi{flex:1;min-width:0;padding-top:4px}
.lg-ten{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;margin-bottom:7px}
.lg-thieu{font-size:13px;color:var(--t2);line-height:1.5;padding:9px 12px;
  border:1px dashed var(--ln2);border-radius:8px}

/* ---- man rong hon cho danh sach dai ---- */
/* Man danh sach dai thi KHONG bo trong cot hep giua man hinh. 860px tren man
   PC rong la mot dai chu nhat nho lot thom giua hai khoang trong — nhin vua
   nhi nhi vua phi cho. Tran het be ngang, chi chua le. */
.man-rong{max-width:none;padding:34px 40px 80px}
.man-rong h1{font-size:28px}
.man-rong .man-d{font-size:16px;max-width:760px}
.sect-p{font-weight:400;color:var(--t2);font-size:12px;margin-left:8px}
/* Muc gap lai: 35 muc ma muc nao cung xo het thi trang dai le the va khong
   nhin ra cai gi o dau. Gap lai thi ca danh sach vua mot man. */
.ttb-mui{display:flex;color:var(--t2);flex-shrink:0}
.ttb-mui svg{width:13px;height:13px;transform:rotate(90deg);transition:transform .13s}
.ttb-m.xoe .ttb-mui svg{transform:rotate(270deg)}
.ttb-m-tt{font-size:14px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding-left:20px}
.ttb-m.xoe .ttb-m-mo{padding-left:20px;margin-top:4px}
.ttb-do{font-family:var(--font-so);font-size:11px;color:var(--t2);flex-shrink:0}
.ttb-lam{display:flex;gap:2px;flex-shrink:0}

/* ---- man Chat thu ----
   Dung LAI .thr/.cum/.bb cua khung chat that, khong ve bong bong rieng: nguoi
   dao tao phai thay dung thu khach se thay. Ve rieng thi hai noi lech nhau va
   duyet o day khong con nghia gi. */
.ct-khung{border:1px solid var(--ln);border-radius:12px;background:var(--p1);
  max-width:860px;overflow:hidden}
.ct-dau{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--ln)}
.ct-av{width:30px;height:30px;border-radius:50%;background:var(--p3);color:var(--t1);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.ct-thr{min-height:300px;max-height:52vh;padding:16px}
.ct-luot{display:flex;flex-direction:column;gap:3px}
.ct-llm{background:var(--amd) !important;color:var(--amtx) !important;
  border-color:transparent !important}
.ct-vet{display:flex;flex-wrap:wrap;gap:5px;align-items:center;font-size:11px;
  color:var(--t2);padding:2px 0 6px 38px}
.ct-vet em{font-style:normal;font-family:var(--font-so);background:var(--p3);color:var(--t1);
  border-radius:4px;padding:1px 6px}
.ct-vet em.tool{background:var(--grd);color:var(--grtx)}
.ct-vet em.cho{background:var(--amd);color:var(--amtx)}
.ct-vet em.xau{background:var(--rdd);color:var(--rdtx)}
.ct-go{display:flex;gap:8px;padding:11px 13px;border-top:1px solid var(--ln);background:var(--p1)}

/* Cham diem khi dong mot cuoc thu */
.ct-cham{padding:14px;border-top:1px solid var(--ln);display:flex;flex-direction:column;gap:8px}
.ct-cham-d{font-size:14px;font-weight:600}
.ct-sao{display:inline-flex;gap:2px;flex-shrink:0}
.ct-s{border:0;background:transparent;padding:0 2px;font-size:22px;line-height:1;
  color:var(--ln2);cursor:pointer}
.ct-s.on{color:var(--orange)}
.ct-s:disabled{cursor:default;font-size:14px}

.ct-ls{display:flex;flex-direction:column;gap:0;border:1px solid var(--ln);
  border-radius:var(--bk-3);overflow:hidden;background:var(--p1)}
.ct-ls-m{display:flex;align-items:center;gap:var(--kc-3);flex-wrap:wrap;
  border:0;border-bottom:1px solid var(--ln);border-radius:0;
  padding:var(--kc-3) var(--kc-4);background:var(--p1)}
.ct-ls-m:last-child{border-bottom:0}
.ct-ls-m:hover{background:var(--p3)}
.ct-ls-m b{font-size:14px}
.ct-ls-nx{flex-basis:100%;font-size:13px;color:var(--t2);line-height:1.5}

/* Ba cham "dang go" — cho thay AI dang soan, dung nhu Messenger that */
.ct-go3{display:inline-flex;gap:4px;align-items:center;padding:11px 13px !important}
.ct-go3 i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.45;
  animation:ctgo 1.1s infinite}
.ct-go3 i:nth-child(2){animation-delay:.18s}
.ct-go3 i:nth-child(3){animation-delay:.36s}
@keyframes ctgo{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:.9;transform:translateY(-3px)}}

/* AI xac nhan da nhan danh gia va neu phuong an — nam NGAY DUOI danh gia do,
   khong o mot man khac: gop y ma khong thay ai tra loi thi lan sau khong ai go. */
.ct-ph{flex-basis:100%;display:flex;gap:9px;align-items:flex-start;margin-top:4px;
  padding:10px 12px;border-radius:8px;background:var(--grd);font-size:13px;
  line-height:1.55;white-space:pre-wrap;color:var(--t0)}
.ct-ph.can_nguoi{background:var(--amd)}
.ct-ph-ai{flex-shrink:0;font-family:var(--font-so);font-size:11px;font-weight:700;
  background:var(--p1);color:var(--t1);border-radius:4px;padding:2px 6px}
.ct-ph-nut{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}

/* ---- man "Cai dat AI" ----

   Cong tac AI de RIENG tung trang nen no la mot HANG, khong phai mot o trong
   luoi: hang doc theo chieu ngang, mat luot tu ten trang sang trang thai sang
   cong tac — dung thu tu cau hoi "trang nao / dang the nao / bam vao dau". */
.cd-hang{display:flex;align-items:center;gap:11px;padding:11px 13px;
  border:1px solid var(--ln);border-radius:12px;background:var(--p1)}
.cd-i{flex:1;min-width:0}
.cd-i b{display:block;font-size:16px;font-weight:600;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cd-i small{display:block;font-size:13px;color:var(--t2);margin-top:2px}

/* Cong tac gat. To hon nut thuong (44px) vi day la thu tat ca kenh ban. */
.cd-cong{width:44px;height:25px;border-radius:12px;padding:0;flex-shrink:0;
  background:var(--p3);border:1px solid var(--ln2);position:relative;transition:.15s}
.cd-cong i{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:var(--t2);transition:.15s}
.cd-cong.on{background:var(--aqua);border-color:var(--aqua)}
.cd-cong.on i{left:21px;background:var(--tren-cam)}

.cd-y{font-size:14px;color:var(--t2);line-height:1.55;margin:7px 0 0}

.cd-chon{display:flex;flex-direction:column;gap:7px}
.cd-o{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:11px 13px;border:1px solid var(--ln);border-radius:12px;background:var(--p1)}
.cd-o:hover:not(:disabled){border-color:var(--ln2);background:var(--p2)}
.cd-o.on{border-color:var(--orange);background:var(--cam-mo);box-shadow:0 0 0 1px var(--orange)}
.cd-o:disabled{cursor:default;opacity:.6}
.cd-ck{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--ln2);display:flex;align-items:center;justify-content:center;
  font-size:12px}
.cd-o.on .cd-ck{background:var(--orange);border-color:var(--orange);color:var(--tren-cam)}
.cd-o-i{flex:1;min-width:0}
.cd-o-i b{display:block;font-size:16px;font-weight:600}
.cd-o-i small{display:block;font-size:13px;color:var(--t2);margin-top:2px;line-height:1.45}

.cd-the{border:1px solid var(--ln);border-radius:12px;padding:13px;background:var(--p1)}
.cd-bat{display:flex;align-items:center;gap:9px;font-size:16px;cursor:pointer}
.cd-bat input{width:17px;height:17px;flex-shrink:0;accent-color:var(--orange)}
.cd-gio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.cd-gio select{width:auto;font-family:var(--font-so)}
/* Tat gio truc thi hai o van hien, chi mo di — an han thi bat lai xong khong
   biet no dang dat may gio, phai bat len moi thay. */
.cd-gio.mo{opacity:.45}

.cd-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:9px}
.cd-so{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--t1)}
.cd-so span{flex:1;min-width:0;line-height:1.35}
.cd-so input{width:88px;flex-shrink:0;font-family:var(--font-so);text-align:right}

/* ---- man "Lich su" ----

   Cap TRUOC -> SAU la ly do man nay ton tai, nen no phai doc duoc bang mat
   thuong: gia tri cu lam mo va gach ngang, gia tri moi ro va dam. */
.ls-loc{display:flex;gap:var(--kc-2);flex-wrap:wrap;align-items:center;margin-bottom:var(--kc-4)}
.ls-chip{height:28px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:500;border:1px solid var(--ln);background:var(--p1);color:var(--t1);display:inline-flex;align-items:center}
.ls-chip.on{background:var(--t0);border-color:var(--t0);color:var(--p1);font-weight:600}

.ls-ds{display:flex;flex-direction:column;gap:7px}
.ls-ngay{display:flex;align-items:center;gap:10px;margin:12px 0 3px}
.ls-ngay::after{content:'';flex:1;height:1px;background:var(--ln)}
.ls-ngay span{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--t2);
  text-transform:uppercase}

.ls-m{border:1px solid var(--ln);border-radius:12px;padding:10px 13px;background:var(--p1)}
.ls-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ls-dau b{font-size:14px;font-weight:600}

.ls-doi{display:flex;flex-direction:column;gap:3px;margin-top:8px;
  border-top:1px solid var(--ln);padding-top:8px}
.ls-k{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:14px;line-height:1.5}
.ls-ten{color:var(--t2);min-width:150px}
.ls-tr{color:var(--t2);text-decoration:line-through}
.ls-mui{color:var(--t2);font-size:12px}
.ls-sau{font-weight:600;color:var(--t0)}

.ls-trong{padding:26px 14px;color:var(--t2);font-size:14px;text-align:center;line-height:1.65;
  border:1px dashed var(--ln2);border-radius:12px}

/* ---- man "Thu thap thong tin" ---- */
.tx-m{border:1px solid var(--ln);border-radius:12px;padding:12px 14px;background:var(--p1)}
.tx-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
/* Cum khach go ra: de font so cho no khac han chu cua giao dien — day la
   NGUYEN VAN loi khach, khong phai chu he thong viet. */
.tx-cum{font-family:var(--font-so);font-size:16px;font-weight:600;
  background:var(--p3);border-radius:8px;padding:2px 8px}
.tx-mo{font-size:14px;color:var(--t1);line-height:1.55}

.tx-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}
.tx-o{border:1px solid var(--ln);border-radius:8px;padding:10px 12px;background:var(--p2)}
.tx-o b{display:block;font-family:var(--font-so);font-size:22px;font-weight:700;line-height:1.1}
.tx-o span{display:block;font-size:13px;color:var(--t2);margin-top:3px}

.tx-nhan{display:flex;gap:6px;flex-wrap:wrap}
.tx-y{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  border:1px solid var(--ln2);border-radius:99px;padding:3px 10px}
.tx-y i{font-family:var(--font-so);font-style:normal;font-weight:700;color:var(--t2)}

/* ---- nhận xét trên từng câu AI (Chat thử) ----
   Nút để MỜ và nhỏ: nó nằm dưới mọi câu AI, mà phần lớn câu thì không ai nhận
   xét gì. Vẽ đậm là nó át cả nội dung cuộc chat. */
.nx-mo{align-self:flex-end;background:none;border:none;cursor:pointer;padding:1px 2px;
  font-size:12px;color:var(--t2);opacity:.65}
.nx-mo:hover{opacity:1;color:var(--t1);text-decoration:underline}
.nx-form{align-self:stretch;border:1px solid var(--ln);border-radius:8px;
  background:var(--p2);padding:8px;margin-top:3px;display:flex;flex-direction:column;gap:7px}
.nx-form textarea{width:100%;resize:vertical;font:inherit;font-size:13px;padding:6px 8px;
  border:1px solid var(--ln);border-radius:4px;background:var(--p1);color:var(--t1)}
.nx-nut{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.nx-loi{font-size:12px;color:var(--rdtx)}
.nx-da{align-self:stretch;border-radius:8px;padding:7px 9px;margin-top:3px;font-size:13px;
  display:flex;flex-direction:column;gap:5px;border:1px solid transparent}
.nx-da.tot{background:var(--grd);color:var(--grtx);border-color:var(--grd)}
.nx-da.xau{background:var(--rdd);color:var(--rdtx);border-color:var(--rdd)}
.nx-da b{font-size:13px}
.nx-chu{opacity:.85;font-style:italic}
/* Điều hệ thống hiểu được từ nhận xét — phần này mới là lý do người ta ghi tiếp */
.nx-ph{background:var(--p1);color:var(--t1);border-radius:4px;padding:5px 7px;line-height:1.45}
/* Nhận xét đã dùng để chạy lại. Dòng ghi chú cũ bị xoá theo tin cũ (CASCADE),
   nên đây là dấu vết duy nhất còn lại của việc vừa huấn luyện. */
.nx-lai{align-self:stretch;font-size:12px;color:var(--t2);line-height:1.45;
  border-left:2px solid var(--ln);padding:2px 0 2px 7px;margin-top:3px}
/* Câu hệ thống đọc hiểu được từ nhận xét. Vẽ rõ hơn dòng trích nhận xét —
   đây mới là thứ trả lời câu hỏi "nó có hiểu ý mình không". */
.nx-lai-h{margin-top:3px;color:var(--t1);background:var(--p2);border-radius:4px;
  padding:5px 7px;line-height:1.45;font-size:12px}
/* Phần ảnh trong Chat thử: chỉ hiện tên thẻ, vì thư viện ảnh còn trống URL.
   Vẽ khác bubble chữ để không ai tưởng AI đang nhắn nguyên chữ "[ảnh: ...]". */
.bb-anh{font-family:var(--font-so);font-size:13px;opacity:.8;border-style:dashed !important}

/* ---- sửa bubble AI soạn trước khi gửi ----
   Nút Sửa nằm trong bubble và chỉ hiện rõ khi rê chuột: nhân viên gửi thẳng là
   việc thường ngày, sửa mới là ngoại lệ. Bày nút to ngang nút Gửi thì mỗi lần
   trả lời khách lại phải bỏ qua nó một lần. */
.db-chu{white-space:pre-wrap}
.db-sua-nut{position:absolute;top:5px;right:7px;background:var(--p1);border:1px solid var(--ln);
  border-radius:4px;font-size:11px;padding:1px 7px;cursor:pointer;color:var(--t2);opacity:0;
  transition:opacity .12s}
.db:hover .db-sua-nut,.db-sua-nut:focus{opacity:1}
.db-sua-nut:hover{color:var(--t1);border-color:var(--t2)}
.db-sua textarea{width:100%;resize:vertical;font:inherit;font-size:14px;line-height:1.42;
  padding:6px 8px;border:1px solid var(--ln);border-radius:8px;background:var(--p1);color:var(--t1)}
.db-nut{display:flex;align-items:center;gap:6px;margin-top:6px}
/* Bubble thêm tay vẽ viền đứt — nó KHÔNG phải thứ AI soạn ra, và người xem lại
   hộp thư sau này phải phân biệt được ngay. */
.db-them{border-style:dashed}
.db-dau{font-size:11px;color:var(--t2);font-family:var(--font-so)}
/* Cặp (câu AI viết, câu đúng) trong bảng "Đã dạy cho AI". Xếp trên dưới chứ
   không cạnh nhau: câu chat thường dài, hai cột hẹp thì phải đọc kiểu zíc zắc. */
.dd-cu{color:var(--t2);padding:2px 0}
.dd-moi{color:var(--t1);border-left:2px solid var(--aqua);padding:2px 0 2px 8px;margin-top:3px}
/* Ô sửa câu AI trong Chat thử. Rộng bằng cả cụm chứ không bó trong bề ngang
   bong bóng (62%) — đang gõ lại nguyên một câu trả lời, không phải sửa một chữ. */
.ct-sua{width:100%;max-width:100%;display:flex;flex-direction:column;gap:var(--kc-2);
  border:1px solid var(--ln);border-radius:var(--bk-3);padding:var(--kc-4);
  background:var(--p1);margin-bottom:var(--kc-3)}
.ct-sua textarea{width:100%;resize:vertical;font:inherit;font-size:14px;line-height:1.45;
  padding:8px 10px;border:1px solid var(--ln);border-radius:8px;background:var(--p1);color:var(--t1)}
.ct-sua-y{font-size:12px;color:var(--t2);line-height:1.5}
.ct-sua-y code{font-family:var(--font-so);background:var(--p3);border-radius:4px;padding:0 4px}

/* ---- chọn / tải ảnh khi gõ câu đúng cho AI ---- */
.ca{border:1px solid var(--ln);border-radius:8px;background:var(--p2);padding:9px;
  display:flex;flex-direction:column;gap:8px}
.ca-d{font-size:12px;color:var(--t2);line-height:1.5}
.ca-d code{font-family:var(--font-so);background:var(--p3);border-radius:4px;padding:0 4px}
.ca-tai{font-size:12px;color:var(--t2);padding:6px}
.ca-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}
.ca-o{display:flex;flex-direction:column;gap:3px;min-width:0}
.ca-chen{display:flex;flex-direction:column;gap:2px;align-items:stretch;padding:5px;
  border:1px solid var(--ln);border-radius:8px;background:var(--p1);color:var(--t1);
  cursor:pointer;font:inherit;text-align:left;min-width:0}
.ca-chen:hover:not(:disabled){border-color:var(--aqua)}
.ca-chen:disabled{cursor:default;opacity:.65}
.ca-chen img{width:100%;height:56px;object-fit:cover;border-radius:4px;display:block}
.ca-ten{font-family:var(--font-so);font-size:11px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Số ảnh phải hiện, không bắt đoán: góp ý của chủ shop từng là
   "gửi 6 ảnh feedback nhé, không phải 1 ảnh". */
.ca-so{font-size:11px;color:var(--t2)}
.ca-o.trong .ca-chen{border-style:dashed}
.ca-tai-nut{font-size:11px;color:var(--t2);cursor:pointer;text-align:center;
  border:1px solid var(--ln);border-radius:4px;padding:2px}
.ca-tai-nut:hover{color:var(--t1);border-color:var(--t2)}

/* Khối cảnh báo VÀNG — nhắc chứ không phải lỗi. `.blkd` là đỏ, dùng cho lỗi thật;
   "3/9 thẻ chưa có ảnh" không phải lỗi, nó là việc còn phải làm. */
.blkc{display:flex;gap:9px;background:var(--amd);border-left:3px solid var(--am);
  border-radius:8px;padding:9px 12px;margin:10px 0;font-size:13px;color:var(--amtx);line-height:1.5}
.blkc svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}

/* ---- màn Thư viện ảnh ---- */
.tv{display:flex;flex-direction:column;gap:11px;margin-top:12px}
.tv-the{border:1px solid var(--ln);border-radius:12px;background:var(--p1);padding:10px 12px}
.tv-the.trong{border-style:dashed}
.tv-dau{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
/* Tên thẻ là thứ gõ vào câu trả lời — phải đọc và chép được, không phải nhãn trang trí */
.tv-ten{font-family:var(--font-so);font-size:14px;font-weight:700;color:var(--aqua);
  background:var(--p3);border-radius:4px;padding:2px 8px;user-select:all}
.tv-anh{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.tv-o{position:relative;width:92px;height:92px;border-radius:8px;overflow:hidden;border:1px solid var(--ln)}
.tv-o img{width:100%;height:100%;object-fit:cover;display:block}
/* Số thứ tự: khách nhận ảnh theo đúng thứ tự này, nên phải nhìn thấy */
.tv-stt{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.62);color:#fff;
  font-family:var(--font-so);font-size:11px;border-radius:4px;padding:0 5px}
.tv-xoa{position:absolute;right:3px;top:3px;width:19px;height:19px;border-radius:50%;
  border:none;background:rgba(0,0,0,.62);color:#fff;cursor:pointer;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0}
.tv-xoa:hover{background:var(--rd)}
.tv-trong{margin-top:7px;font-size:13px;color:var(--t2)}
.tv-moi{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.tv-moi input{flex:1;min-width:220px;font:inherit;font-family:var(--font-so);font-size:14px;
  padding:7px 10px;border:1px solid var(--ln);border-radius:8px;background:var(--p1);color:var(--t1)}
label.pri{cursor:pointer;display:inline-flex;align-items:center}
label.pri.tat{opacity:.45;cursor:not-allowed}

/* Tiêu đề nhóm trong thanh dọc mục con. Ba nhóm của Đào tạo AI xếp theo mức
   hậu quả khi sai: sự thật → cách nói → kiểm tra. */
.rp-nhom{
  padding:14px 12px 5px; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; opacity:.55;
}
.rp-nhom:first-child{padding-top:6px}

/* Ô "AI đang thấy gì": khối prompt theo mục nguồn */
.pr-th{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.pr-th b{font-variant-numeric:tabular-nums}
.pr-khoi{border:1px solid var(--vien);border-radius:var(--r);margin:8px 0;overflow:hidden}
.pr-khoi>summary{
  padding:9px 12px;cursor:pointer;display:flex;gap:10px;align-items:center;
  font-weight:600;font-size:14px;
}
.pr-khoi>summary::-webkit-details-marker{display:none}
.pr-khoi pre{
  margin:0;padding:10px 12px;white-space:pre-wrap;word-break:break-word;
  font-size:12px;line-height:1.5;max-height:340px;overflow:auto;
}
.pr-trong{opacity:.5;font-style:italic}

/* Form khai kiến thức shop: nhãn trên, ô nhập dưới, xuống một cột khi hẹp. */
.tt-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:10px 0 14px}
.tt-form label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}
.tt-form label:has(textarea){grid-column:1 / -1}
.tt-form input,.tt-form textarea{
  font:inherit;font-weight:400;padding:8px 10px;border-radius:8px;
  border:1px solid var(--vien);background:var(--be-mat);color:inherit;
  width:100%;box-sizing:border-box;
}
.tt-form textarea{resize:vertical;min-height:64px}
@media (max-width:720px){.tt-form{grid-template-columns:1fr}}