/* LOP RIENG CUA KHUNG v2 — nhung thu chi khung dung, khong thuoc thu vien.
   Tien to `v-` de khong dam vao `n-` (thu vien) hay lop cua ban dang chay.
   Van chi tieu thu token, khong go cung mau nao. */

body { margin: 0; background: var(--gx-background); }

.v-hieu { font-size: 17px; font-weight: 800; letter-spacing: -.02em;
  color: var(--gx-brand-700); }
.v-nho  { height: 24px; padding: 0 9px; font-size: var(--gx-fs-min); }
.v-mo   { color: var(--gx-neutral-300); }
.v-dan  { flex: 1; min-width: 0; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-hang { display: flex; align-items: center; gap: var(--gx-space-2); flex-wrap: wrap; }
.v-tren { margin-top: var(--gx-space-2); }
.v-ds   { display: flex; flex-direction: column; gap: var(--gx-space-3); }
.v-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--gx-space-3); }

/* Man "Them" va danh sach nhom: muc trong the thi khong can nen khi ro chuot,
   nhung van phai cao 44px tren dien thoai — `n-muc` lo viec do. */
.n-the > .v-ds > .n-muc { border-radius: var(--gx-radius-md); }

@media (max-width: 900px) {
  .v-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   MAN ĐƠN CHỜ DUYỆT
   --------------------------------------------------------------------------
   MOT bo ma cho ca hai kho. Tren may tinh moi don la mot HANG BANG (luoi 6 cot);
   duoi 900px cung dong do gap thanh mot THE. Khong viet hai ban — hai ban la
   mot ngay sua mot ben quen ben kia.
   ========================================================================== */

.dn-dau { display: flex; align-items: flex-start; gap: var(--gx-space-3); }

.dn-bang { overflow: hidden; }
.dn-dong { display: grid; align-items: center; gap: var(--gx-space-3);
  grid-template-columns: 150px 1fr 1.2fr 130px 68px auto;
  padding: var(--gx-space-3) var(--gx-space-4);
  border-top: 1px solid var(--gx-neutral-100); }
.dn-dong:first-child { border-top: 0; }
.dn-mo { background: var(--gx-brand-50); }

.dn-tieu { font-size: var(--gx-fs-min); font-weight: 700; color: var(--gx-neutral-500);
  background: var(--gx-background); padding-top: 9px; padding-bottom: 9px; }

.dn-ma    { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.dn-khach { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.dn-mon   { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.dn-chip  { height: 24px; padding: 0 9px; font-size: var(--gx-fs-min); }
.dn-tien  { display: flex; flex-direction: column; align-items: flex-end;
  font-variant-numeric: tabular-nums; }
.dn-luc   { font-size: 12px; }
.dn-nut   { display: flex; gap: var(--gx-space-2); justify-content: flex-end; }

@media (max-width: 900px) {
  .dn-dau { flex-direction: column; }
  .dn-tieu { display: none; }        /* the khong can dong tieu de cot */
  .dn-bang { background: none; border: 0; box-shadow: none;
    display: flex; flex-direction: column; gap: var(--gx-space-3); }
  .dn-dong { grid-template-columns: 1fr auto; gap: var(--gx-space-2);
    background: var(--gx-surface); border: 1px solid var(--gx-border);
    border-radius: 14px; box-shadow: var(--gx-elevation-1);
    padding: var(--gx-space-4); }
  .dn-ma    { flex-direction: row; align-items: center; gap: var(--gx-space-2); }
  .dn-tien  { align-items: flex-end; }
  .dn-khach { grid-column: 1 / -1; }
  .dn-mon   { grid-column: 1 / -1; }
  .dn-luc   { grid-column: 1; }
  .dn-nut   { grid-column: 2; }
  /* Nut Duyet la viec chinh cua man — cho no rong het phan con lai. */
  .dn-nut .n-nut { flex: 1; }
}

/* Thanh tren la NGUON h1 DUY NHAT cua trang; tieu de rieng cua tung man ha
   xuong `<h2 class="v2-h">`. Kho da tra gia cho luat nay o khung cu: hai the h1
   tren mot trang lam trinh doc man hinh doc ra hai tieu de cho mot cho. */
.v2-tieu { font-size: 15px; font-weight: 700; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* TIEU DE TRANG — 24/700, dung hai token `--gx-fs-page` / `--gx-fw-page`.
   Truoc day o day la 20/800 tren may tinh va 26 tren dien thoai, tuc BA con so
   cho mot vai tro. Ban ve ghi 24/700 o ca s05 · s10 · s11 · s44, va 26 chi xuat
   hien o m83-dang-nhap.html — mot man khong co tieu de trang. Mot so, mot cho. */
.v2-h { font-size: var(--gx-fs-page); font-weight: var(--gx-fw-page);
  letter-spacing: -.02em; margin: 0; }

/* ==========================================================================
   KHUNG DANH SACH DUNG CHUNG
   --------------------------------------------------------------------------
   Bo cuc lay tu `design/gauux-handoff/screens/s05-don-hang.html`:

     dau trang (ngoai the)      h1 24/700 + mot dong phu + nut ben phai
     MOT THE boc tat ca         vien 1px · bo 12 · bong nhe · cat trong
       hang tab                 cao 44, dem 0 16, vach duoi
       thanh loc                dem 12 16, vach duoi
       bang                     dau bang cao 40 nen #F8F9FF, hang cao 48
       dong chan                cao 50, dem 0 16

   Duoi 900px BANG THANH DANH SACH THE, va viec do do `Bang` + `nen.css` lam.
   Ban truoc cua khoi nay giu mot luoi `bg-hang` RIENG lam dung viec ay — tuc
   hai ban bang trong mot kho, hai bo luat "duoi 900px thi lam gi", va hai co
   hoi de chung lech nhau. Gio o day chi con VO cua bang.
   ========================================================================== */

.bg-dau { display: flex; align-items: flex-end; gap: var(--gx-space-3); }

/* THE boc ca khoi. `overflow: hidden` de vach duoi cua hang tab va cua thanh
   loc khong tran ra ngoai goc bo. */
.bg-khung { background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg); box-shadow: var(--gx-elevation-1);
  overflow: hidden; display: flex; flex-direction: column; }

/* Hang tab va thanh loc deu thut vao 16 nhu ban ve. Hang tab tu mang vach duoi
   (`.n-tab-hang` trong nen.css) nen o day chi them dem ngang. */
.bg-cong-cu > .n-tab-hang { padding: 0 var(--gx-space-4); }
.bg-loc { display: flex; gap: var(--gx-space-2); align-items: center;
  flex-wrap: wrap; padding: var(--gx-space-3) var(--gx-space-4);
  border-bottom: 1px solid var(--gx-border); }
.bg-tim { width: 280px; max-width: 100%; }

.bg-than { min-width: 0; }

/* Bon trang thai du lieu nam trong MOT O CO VIEN (DS-thanh-phan muc 10) chu
   khong tha noi giua the — `.n-trong` tu mang vien, o day chi cho no khoang
   thut va mot chieu cao toi thieu de no khong dep lai thanh mot dai chu. */
.bg-trong-boc { padding: var(--gx-space-4); }
.bg-trong-boc > .n-trong { min-height: 180px; justify-content: center; }

/* DONG CHAN — no noi so dong dang hien, KHONG ve nut so trang.
   Ban ve co "1–10 trên 248" kem nut 1 · 2 · 3 · … · 25; chua co route nao nhan
   so trang, nen ve nut do la ve mot cai bam vao khong doi gi. */
.bg-chan { display: flex; align-items: center; gap: var(--gx-space-3);
  min-height: 50px; padding: 0 var(--gx-space-4);
  border-top: 1px solid var(--gx-border); }
.bg-chan-so { font-size: var(--gx-fs-table); color: var(--gx-text-2);
  font-variant-numeric: tabular-nums; }

/* KHUNG XUONG — mot vach xam, KHONG vong xoay (HANDOFF muc 3). Be rong doi theo
   bon lop de mot bang 10 hang khong trong nhu mot khoi chu nhat deu tap. */
.bg-xuong { display: block; height: 10px; border-radius: var(--gx-radius-pill);
  background: var(--gx-fill); }
.bg-xuong-1 { width: 45%; }
.bg-xuong-2 { width: 68%; }
.bg-xuong-3 { width: 56%; }
.bg-xuong-4 { width: 78%; }
/* Trong o so, vach nam sat phai cho khop voi con so that se thay cho no. */
.n-so > .bg-xuong { margin-left: auto; width: 64px; }

@media (max-width: 900px) {
  .bg-dau { flex-direction: column; align-items: stretch; }
  /* Nut ve BEN PHAI nhu tren may tinh. De no dinh le trai thi no trong nhu mot
     cai nut mo coi duoi tieu de, khong nhu hanh dong cua chinh man nay. */
  .bg-dau > .v-hang { justify-content: flex-end; }
  .bg-tim { width: 100%; }
  .bg-loc { padding: var(--gx-space-3); }
  .bg-cong-cu > .n-tab-hang { padding: 0 var(--gx-space-3); }

  /* Duoi 900px bang da thanh danh sach THE, nen cai vo the ben ngoai chung tro
     thanh mot vien long mot vien. Bo vo di, giu lai hang tab va thanh loc. */
  .bg-khung { background: none; border: 0; box-shadow: none; overflow: visible; }
  .bg-cong-cu { background: var(--gx-surface); border: 1px solid var(--gx-border);
    border-radius: var(--gx-radius-lg); overflow: hidden; }
  .bg-loc:last-child { border-bottom: 0; }
  .bg-than { padding-top: var(--gx-space-3); }
  .bg-trong-boc { padding: var(--gx-space-3) 0 0; }
  .bg-chan { padding: 0; border-top: 0; }
}

/* Danh sach dong luat AI — so thu tu ben trai de chu shop chi duoc "dong thu 3". */
.dt-luat { display: flex; flex-direction: column; }
.dt-dong { display: flex; gap: var(--gx-space-3); align-items: flex-start;
  padding: var(--gx-space-3) var(--gx-space-4);
  border-top: 1px solid var(--gx-neutral-100); font-size: 14px;
  line-height: var(--gx-leading-body); }
.dt-dong:first-child { border-top: 0; }
.dt-so { flex: none; width: 22px; height: 22px; border-radius: var(--gx-radius-full);
  background: var(--gx-brand-50); color: var(--gx-brand-800);
  display: grid; place-items: center; font-size: var(--gx-fs-min); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.dt-dong .v-dan { white-space: normal; }

/* Man CAU HINH — bay mot BO cai dat, khong phai mot danh sach. */
.ch-bang { display: flex; flex-direction: column; }
.ch-dong { display: grid; grid-template-columns: 220px 1fr; gap: var(--gx-space-4);
  align-items: start; padding: var(--gx-space-3) var(--gx-space-4);
  border-top: 1px solid var(--gx-neutral-100); font-size: 13px; }
.ch-dong:first-child { border-top: 0; }
.ch-ten { font-weight: 700; color: var(--gx-neutral-600);
  font-family: var(--gx-font-mono); font-size: 12px; word-break: break-all; }
.ch-gia { min-width: 0; }
.ch-con { display: flex; flex-direction: column; gap: 4px; }
.ch-dong-con { display: flex; gap: var(--gx-space-2); align-items: baseline; }
.ch-khoa { font-family: var(--gx-font-mono); font-size: var(--gx-fs-min);
  color: var(--gx-neutral-500); flex: none; min-width: 110px; }

@media (max-width: 900px) {
  .ch-dong { grid-template-columns: 1fr; gap: 4px; font-size: 15px; }
  .ch-khoa { min-width: 0; }
}

/* ==========================================================================
   MAN HỘI THOẠI — ba kho, ba hinh. Ban ve: s01 (may tinh) · t01 (may tinh bang)
   · m01-danh-sach + m01-hoi-thoai + m01-hoi-thoai-ho-so (dien thoai).

     >= 1200px   BA COT: danh sach 340 · khung chat · ho so 320      (s01)
     900–1199    HAI COT. Ho so thanh Ngan, mo bang nut "Ho so"      (t01)
     < 900px     MOT MAN MOT LUC. Ho so thanh Phieu truot tu duoi    (m01)

   Lop `da-chon` tren khung quyet dinh ben nao hien duoi 900px.
   ========================================================================== */

/* MAN NAY KHOA VAO CHIEU CAO MAN HINH. Cac cot cuon RIENG ben trong; ca trang
   khong bao gio cuon.
   `.n-khung` trong `nen.css` dat `min-height: 100vh` — MIN, khong phai `height`
   — nen mac dinh no PHINH ra theo noi dung. Dung cho moi man dang trang, va sai
   cho mot man nhan tin.
   Do that 29/09/2026: mo mot cuoc o kho 1440x1024 thi trang cao 1376px, tuc
   thanh cuon dang chay la cua CA TRANG chu khong phai cua luong tin — nguoi truc
   cuon xuong doc tin thi thanh tren va o soan tin troi mat.
   `:has` chu khong mot lop go tay o `App()`: dieu kien la "trong nay co man Hoi
   thoai", va no thuoc ve CSS. Kho da dung `:has` san (`.n-o-tien:has(...)`). */
/* HAI MOC, khong mot: `.ht-khung` la man Hoi thoai cu (`v2-hop-thu.js`, nay la
   duong lui), con `.ht-khoa-man-hinh` la MOC THUAN cho man dang chay
   (`man-that/inbox.js`) — tep do ve bang kieu noi dong nen khong mang lop bo
   cuc nao, va dan `.ht-khung` vao no la ap luon mot luoi ba cot de len mot bo
   cuc flex.

   DO THAT 05/10/2026 tren ban chay thu, truoc khi co moc thu hai: mo mot cuoc
   262 tin o kho 1440x900 thi khung tin cao **15.564px** va `scrollHeight ==
   clientHeight` — tuc no KHONG CUON, no NO RA. Nguoi truc chi doc duoc man
   cuoi cung cua cuoc, va khong co cach nao len xem doan truoc.

   Goc: `height: 100%` cua man chi giai duoc khi TO TIEN co chieu cao that.
   `.n-khung` chi co `min-height: 100vh` — MIN, nen no phinh theo noi dung.
   Dung cho moi man dang trang, va sai cho mot man nhan tin. */
.n-khung:has(> .n-chinh > .ht-khung),
.n-khung:has(> .n-chinh > .ht-khoa-man-hinh) {
  height: 100vh; height: 100dvh; overflow: hidden; }
.n-khung:has(> .n-chinh > .ht-khung) > .n-chinh,
.n-khung:has(> .n-chinh > .ht-khoa-man-hinh) > .n-chinh { min-height: 0; }

/* CHUA CHO CHO THANH TAB DUOI — chi o kho dien thoai, va chi cho man nay.
   `.n-thanh-duoi` la `position: fixed; bottom: 0; z-index: 30`, tuc no NOI
   TREN noi dung chu khong day noi dung len. Moi man khac cuon duoc nen nguoi
   dung keo tiep la thay het; con man nay KHOA chieu cao man hinh
   (`height: 100dvh; overflow: hidden` o ngay tren) de luong tin cuon rieng —
   nen 57px cuoi cung cua no bi thanh tab phu VINH VIEN, khong cach nao keo ra.
   Do that tren ban chay thu 06/10/2026, kho 390x844: thanh tab chiem 787–844,
   con hang soan tin cua man nam o 788 — tuc o nhap va nut "Gửi" nam DUOI no.
   Tren dien thoai, do la ca duong tra loi khach.
   DOC BIEN, KHONG GO SO. Do that hom nay la 57px = 56 (`.n-tab-duoi
   { min-height: 56px }`) + 1 (`border-top`) — nhung ban ve `TabBar.dc.html` ve
   thanh do cao 76px, va PR "DUNG CHUNG: vo o kho 390" (#387) da sua no ve dung
   76. Go 57 vao day thi cho chua thieu 19px va nut "Gửi" lai bi phu — dung cai
   loi nay, lan thu hai. Nen cho nay doc `--gx-thanh-duoi-h`, KHONG so du phong:
   `ds.css` khai token do (`--gx-thanh-duoi-h: 76px`) va `v2.html` nap `ds.css`
   TRUOC `v2.css`, nen khong co luc nao token thieu. Mot so du phong o day la so
   thu hai cho cung mot chieu cao — dung cai hai so khong khop ai da gay ra loi
   nay — va `test/vo-dien-thoai-dau-trang.test.js` cua #387 khoa dung dieu do:
   trong mot `padding-bottom: calc(... env(safe-area-inset-bottom))` khong duoc
   co 57/72/76px go tay.
   `env(safe-area-inset-bottom)` cong them vi chinh thanh tab cung cong no. */
@media (max-width: 900px) {
  .ht-khoa-man-hinh { box-sizing: border-box;
    padding-bottom: calc(var(--gx-thanh-duoi-h) + env(safe-area-inset-bottom)); }
}

/* Mac dinh la HAI COT (900–1199). Cot ho so chi hien tu 1200px — khai bang
   `grid-template-columns` o mot cho, khong `display:none` cot roi de grid giu
   mot ranh trong.
   `grid-template-rows: minmax(0, 1fr)` la BAT BUOC: hang `auto` lay chieu cao
   theo cot CAO NHAT, nen mot cot co `overflow-y: auto` van keo ca luoi dai ra. */
.ht-khung { flex: 1; min-height: 0; display: grid; overflow: hidden;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); }
.ht-hs-cot { display: none; }

@media (min-width: 1200px) {
  .ht-khung { grid-template-columns: 340px minmax(0, 1fr) 320px; }
  .ht-hs-cot { display: block; overflow-y: auto; min-height: 0;
    background: var(--gx-surface); border-left: 1px solid var(--gx-border); }
  /* Tu 1200px ho so da la mot cot luon thay — nut "Ho so" trong khung chat khi
     do la mot nut mo lai cai dang mo san. An no o day chu khong o JS: cung MOT
     cay DOM cho ca ba kho, khong ve hai cay. */
  .ht-nut-hs { display: none; }
}

/* ---------- cot danh sach ---------- */

.ht-ds { border-right: 1px solid var(--gx-border); background: var(--gx-surface);
  display: flex; flex-direction: column; min-height: 0; }

/* Thanh trang thai AI. Duoi 900px chan cot trai bien mat, va chan cot trai la cho
   duy nhat co nut Tat AI — nen tren dien thoai no ra day. Tu 900px tro len thi
   an, khong thi mot man co HAI nut tat AI va chung co the noi hai dieu khac nhau.
   Mo mot cuoc thi phan danh sach an di nhung THANH NAY O LAI — xem chot
   `.ht-khung.da-chon` trong khoi 900px o duoi. */
.ht-ai-thanh { display: none; }
@media (max-width: 900px) {
  .ht-ai-thanh { display: flex; align-items: center; gap: var(--gx-space-2);
    padding: var(--gx-space-2) var(--gx-space-4);
    border-bottom: 1px solid var(--gx-border-subtle); }
}
.ht-den { width: 8px; height: 8px; flex: none; border-radius: var(--gx-radius-pill);
  background: var(--gx-icon-muted); }
.ht-den.bat { background: var(--gx-brand); }
.ht-ai-chu { font-size: var(--gx-fs-table); color: var(--gx-brand); }

/* `align-items: flex-end` de nut Tim va nut Tai lai thang hang voi O NHAP, khong
   thang hang voi NHAN nam tren o. `O` cua nen.js tu boc mot <div>, nen cai boc do
   la thu phai gian ra. */
.ht-ds-dau { display: flex; align-items: flex-end; gap: var(--gx-space-2);
  padding: var(--gx-space-3) var(--gx-space-4) var(--gx-space-2); }
.ht-ds-dau > div { flex: 1; min-width: 0; }

/* Thanh tab cuon ngang duoc: bon nhan tieng Viet co dau khong vua 340px o mot
   so co chu, va xuong dong thi thanh hai hang cao gap doi. Cuon ngang trong MOT
   thanh khong phai "cuon ngang ca trang" — phep do chi bat cai thu hai. */
.ht-tab { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--gx-space-2); border-bottom: 1px solid var(--gx-border); }
.ht-tab::-webkit-scrollbar { display: none; }
.ht-tab .n-tab { flex: none; }

.ht-bao { padding: var(--gx-space-3) var(--gx-space-4); }
.ht-cuon { flex: 1; min-height: 0; overflow-y: auto; }

/* `min-height: 44px` o day khong de lam hang cao len — hang nay von da ~72px.
   No de KHAI RA rang day la mot vung bam, de phep kiem doc duoc thay vi phai
   doan tu padding. Mot vung bam khong khai la mot vung bam khong ai gac. */
.ht-dong { display: flex; gap: 10px; width: 100%; text-align: left; min-height: 44px;
  padding: 11px var(--gx-space-4); border: 0; background: none;
  border-top: 1px solid var(--gx-border-subtle); cursor: pointer;
  font-family: inherit; align-items: flex-start; }
.ht-dong:hover { background: var(--gx-brand-50); }
.ht-dong:active { background: var(--gx-brand-100); }
.ht-dong:focus-visible { outline: none; box-shadow: var(--gx-focus); }
/* DANG CHON (bang DS-thanh-phan): nen brand-50 + VACH TRAI 3px + chu 600.
   Rieng vach trai la thu phan biet duoc "dong dang mo" voi "dong dang re
   chuot" — hai cai truoc day cung mot mau nen, nen cuon chuot qua danh sach la
   mat dau dong dang doc. Dung `box-shadow inset` chu khong `border-left`: mot
   duong vien that day hang sang phai 3px, tuc ca danh sach giat ngang moi lan
   doi cuoc. */
.ht-dong.on { background: var(--gx-brand-50);
  box-shadow: inset 3px 0 0 var(--gx-brand); }
.ht-dong.on .ht-ten { font-weight: 600; }
.ht-dong .n-anh { width: 38px; height: 38px; background: var(--gx-brand-100);
  color: var(--gx-brand); font-size: var(--gx-fs-table); }
.ht-dong.on .n-anh { background: var(--gx-brand); color: var(--gx-surface); }
.ht-giua { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  align-items: flex-start; }
.ht-hang1 { display: flex; width: 100%; gap: 6px; align-items: baseline; }
.ht-ten { font-size: 13.5px; }
.ht-hang2 { width: 100%; font-size: 12.5px; }
.ht-hang3 { display: flex; align-items: center; gap: var(--gx-space-2);
  flex-wrap: wrap; }
.ht-luc { font-size: var(--gx-fs-min); flex: none; }
/* "chờ 14 phút" — do tu `last_inbound_at`, khong phai so tu nghi ra. Mau canh
   bao vi day la thu dang tinh nguoc cho nguoi truc. */
.ht-cho { display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--gx-fs-min); font-weight: 700; color: var(--gx-warn); }

/* ---------- khung chat ---------- */

/* `position: relative` la MOC cho nut "↓ N tin mới" noi ben tren o soan. */
.ht-chat { position: relative; display: flex; flex-direction: column;
  min-height: 0; background: var(--gx-background); }
.ht-trong { display: grid; place-items: center; padding: var(--gx-space-6); }
.ht-dau { flex: none; display: flex; flex-direction: column; gap: var(--gx-space-2);
  padding: var(--gx-space-3) var(--gx-space-4); background: var(--gx-surface);
  border-bottom: 1px solid var(--gx-border); }
.ht-dau-hang { display: flex; align-items: center; gap: 10px; }
.ht-dau-chip { display: flex; align-items: center; gap: var(--gx-space-2);
  flex-wrap: wrap; }
.ht-dau-ten { font-size: 15px; }
.ht-dau .n-anh { width: 36px; height: 36px; background: var(--gx-brand-100);
  color: var(--gx-brand); font-size: var(--gx-fs-table); }
/* Nut quay lai va anh dai dien: nut CHI hien duoi 900px (tren may tinh hai cot
   cung hien nen khong co gi de "quay lai"), anh CHI hien tu 900px (duoi do cho
   ngang phai danh cho ten khach va chip cua so). */
.ht-lui { display: none; }
@media (max-width: 900px) {
  .ht-lui { display: inline-grid; }
  .ht-dau .n-anh { display: none; }
  .ht-dau-ten { font-size: 16px; }
}

.ht-tin { flex: 1; min-height: 0; overflow-y: auto; padding: var(--gx-space-4);
  display: flex; flex-direction: column; gap: 10px; }
/* Ban ve: bong rong toi da 360–380px o may tinh, 290–300px o dien thoai. Gioi han
   theo PX chu khong theo % vi cot chat gian ra rat rong o man 1440 — mot dong
   chu dai 900px thi mat khong doc theo duoc. */
.ht-tin .n-bong { max-width: 380px; }
@media (max-width: 900px) { .ht-tin .n-bong { max-width: 300px; } }
.ht-dinh { display: flex; align-items: center; gap: 5px; margin-top: 4px;
  font-size: var(--gx-fs-min); }

/* ---------- dinh kem trong bong bong ---------- */
/* Anh/video hien THUMBNAIL bam mo lon. Truoc 05/10/2026 moi loai tep doc ra
   cung mot dong chu "2 tệp đính kèm", va de xem anh khach gui thi nguoi truc
   phai mo Pancake. */
.ht-dk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ht-dk:empty { display: none; }

/* 120px: ba tam vua mot bong 380px o may tinh, hai tam o dien thoai 300px.
   `aspect-ratio` giu o vuong de mot album khong nhay bo cuc khi tung tam tai
   xong — anh chua tai co chieu cao 0 thi ca luong tin truot len. */
/* `min-height: 44px` o day khong de lam thumbnail cao len — no von 120px. No
   de KHAI RA rang day la mot vung bam, de phep kiem 44px doc duoc thay vi phai
   suy ra tu `aspect-ratio`. Mot vung bam khong khai la mot vung bam khong ai
   gac. */
.ht-dk-anh { position: relative; width: 120px; min-height: 44px; aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  overflow: hidden; background: var(--gx-fill); cursor: pointer;
  transition: box-shadow 140ms ease-out, transform 140ms ease-out; }
.ht-dk-anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ht-dk-anh:hover { box-shadow: var(--gx-shadow-2); }
.ht-dk-anh:active { transform: scale(.98); }
.ht-dk-anh:focus-visible { outline: none; box-shadow: var(--gx-focus); }
.ht-dk-nen { position: absolute; inset: 0; background: var(--gx-neutral-100); }
.ht-dk-phat { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 22px; color: #FFFFFF; text-shadow: 0 1px 6px rgba(15, 23, 42, .6);
  background: rgba(15, 23, 42, .18); }

/* TIN THOAI phat NGAY TRONG BONG — 260/286 tep khach gui qua `file_url` la
   audio, va mot nut tai ve thay cho mot nut phat la bat nguoi truc roi man. */
.ht-dk-tieng { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.ht-dk-tieng audio { width: 100%; max-width: 280px; height: 36px; }

.ht-dk-tep { display: inline-flex; align-items: center; gap: 5px;
  min-height: 32px; padding: 4px 8px; border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm); background: var(--gx-surface);
  font-size: var(--gx-fs-min); color: var(--gx-brand); text-decoration: none;
  transition: background 140ms ease-out; }
a.ht-dk-tep:hover { background: var(--gx-brand-50); }
a.ht-dk-tep:focus-visible { outline: none; box-shadow: var(--gx-focus); }
/* Carousel / bien lai: KHONG co tep de mo. Khong mau nut, khong con tro tay —
   mot thu trong nhu nut ma khong bam duoc la mot loi hua khong giu. */
.ht-dk-khong { color: var(--gx-text-2); cursor: default; }

.ht-dk-lon { display: block; max-width: 100%; max-height: 70vh;
  margin: 0 auto; border-radius: var(--gx-radius); }

/* ---------- tin cu hon ---------- */
.ht-cu-dang, .ht-cu-het { text-align: center; padding: var(--gx-space-2) 0;
  font-size: var(--gx-fs-min); }
.ht-cu-nut { display: flex; justify-content: center; padding-bottom: var(--gx-space-2); }

/* ---------- "↓ N tin mới" ---------- */
/* NOI tren luong tin, khong chen vao bo cuc: chen vao thi ca khung chat nhay
   len mot nac moi lan khach nhan tin — dung luc nguoi truc dang doc. */
/* 44px o CA HAI kho, khong chi dien thoai: nut nay noi tren luong tin va
   nguoi ta bam no trong luc dang cuon, tuc con tro dang di chuyen. Khai o muc
   goc chu khong trong `@media` — phep kiem 44px doc selector dung truoc `{`
   dau tien, nen mot khai bao nam trong `@media` no khong thay. */
.ht-tin-moi { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 118px; z-index: 2; min-height: 44px; padding: 6px 14px; border: 0;
  border-radius: var(--gx-radius-pill); background: var(--gx-brand);
  color: var(--gx-surface); font: inherit; font-size: var(--gx-fs-min);
  font-weight: 600; box-shadow: var(--gx-shadow-3); cursor: pointer;
  transition: background 140ms ease-out, transform 140ms ease-out; }
.ht-tin-moi:hover { background: var(--gx-brand-hover); }
.ht-tin-moi:active { transform: translateX(-50%) scale(.98); }
.ht-tin-moi:focus-visible { outline: none; box-shadow: var(--gx-focus); }
@media (max-width: 900px) {
  /* Tranh thanh tab duoi man dien thoai. */
  .ht-tin-moi { padding: 0 16px; bottom: 150px; }
}

/* ---------- o soan cao dan ---------- */
/* `resize: none` vi chieu cao do noi dung quyet (`caoLai()`), toi da sau dong.
   De nguoi dung keo tay nua thi hai nguon cung dat mot thuoc tinh, va lan go
   tiep theo xoa mat cai ho vua keo. */
.ht-o-soan { resize: none; overflow-y: hidden; min-height: 40px; }

/* TRANG THAI MOT TIN DI RA — chi ve khi co chuyen de noi ('blocked_window',
   'failed', 'pending'). Tin da 'sent' KHONG deo nhan: dan nhan len moi bong thi
   nhan mat tac dung. */
.ht-tin-tt { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px;
  padding-top: 5px; border-top: 1px solid var(--gx-border-subtle);
  font-size: var(--gx-fs-min); font-weight: 600; }
.ht-tin-tt.hong { color: var(--gx-danger); }
.ht-tin-tt.cho  { color: var(--gx-warn); }

/* Vach ngay: "Hôm nay · 29/09/2026". Tu can giua, khong dinh ve mot ben. */
.ht-vach { align-self: center; padding: 2px 10px; border-radius: var(--gx-radius-pill);
  background: var(--gx-fill); color: var(--gx-text-2);
  font-size: var(--gx-fs-min); font-weight: 600; }

/* ---------- the don nhap trong luong tin ---------- */

.ht-don { align-self: flex-end; width: min(100%, 340px); overflow: hidden;
  background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg); }
.ht-don-dau { display: flex; align-items: center; gap: var(--gx-space-2);
  padding: 10px var(--gx-space-3); font-size: var(--gx-fs-table);
  border-bottom: 1px solid var(--gx-border-subtle); }
.ht-don-than { padding: var(--gx-space-2) var(--gx-space-3);
  display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.ht-don-dong { display: flex; gap: var(--gx-space-2); }
.ht-don-tong { font-weight: 700; padding-top: 4px;
  border-top: 1px solid var(--gx-border-subtle); }
.ht-don-chan { display: flex; align-items: center; gap: var(--gx-space-2);
  padding: var(--gx-space-2) var(--gx-space-3); background: var(--gx-bg);
  border-top: 1px solid var(--gx-border-subtle); }
/* Nut "Mo o Don cho duyet" la mot lien ket dang nut — de no muot hon nut chinh
   de khong canh tranh voi nut Gui o duoi. */
.ht-don-lk { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
@media (max-width: 900px) { .ht-don-lk { min-height: 44px; } }

/* ---------- ban AI da soan, chua gui ---------- */

/* Phai NHIN RA duoc khac han mot tin da gui: vien xanh net va nen trang. Mot khoi
   trong y het tin da gui thi nguoi truc tuong khach da doc no. */
.ht-soan-ai { align-self: flex-end; width: min(100%, 420px);
  display: flex; flex-direction: column; gap: var(--gx-space-2);
  padding: var(--gx-space-3); background: var(--gx-surface);
  border: 1.5px solid var(--gx-brand); border-radius: var(--gx-radius-lg); }
.ht-soan-ai-dau { display: flex; align-items: center; gap: var(--gx-space-2);
  font-size: var(--gx-fs-min); }

/* ---------- chan: o soan tin ---------- */

/* Nhac "day la lenh hen" (xanh) va canh "ngoac vuong ma may chu khong doc ra"
   (do) la HAI dieu khac nhau — mot cai la viec dung y, mot cai la sap gui nham
   ca cap ngoac cho khach. Hai mau, khong mot. */
.ht-soan-canh { display: flex; align-items: flex-start; gap: 5px;
  font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-danger); }

.ht-chan { flex: none; padding: var(--gx-space-3) var(--gx-space-4);
  background: var(--gx-surface); border-top: 1px solid var(--gx-border);
  display: flex; flex-direction: column; gap: var(--gx-space-2); }

/* ---------- cot / ngan / phieu ho so ---------- */

.ht-hs { display: flex; flex-direction: column; }
.ht-hs-khoi { display: flex; flex-direction: column; gap: var(--gx-space-2);
  padding: var(--gx-space-4) var(--gx-space-4);
  border-bottom: 1px solid var(--gx-border-subtle); }
.ht-hs-khoi:last-child { border-bottom: 0; }
.ht-hs-ten { display: flex; align-items: center; gap: var(--gx-space-3); }
.ht-anh-to { width: 46px; height: 46px; background: var(--gx-brand-100);
  color: var(--gx-brand); font-size: 16px; }
.ht-hs-h { font-size: 15px; }
.ht-hs-hang { display: flex; align-items: center; gap: var(--gx-space-2);
  font-size: 13.5px; }
/* 01.goi — vung bam >=44px tren dien thoai: mot so dien thoai cao 18px la mot
   duong goi bam ba lan moi trung mot lan. */
.ht-hs-goi { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--gx-brand); text-decoration: none;
  transition: color 140ms ease-out; }
.ht-hs-goi:hover { color: var(--gx-brand-hover); text-decoration: underline; }
.ht-hs-goi:focus-visible { outline: none; box-shadow: var(--gx-focus);
  border-radius: var(--gx-radius-sm); }
.ht-hs-hop { display: flex; flex-direction: column; gap: 4px;
  padding: 10px var(--gx-space-3); border-radius: var(--gx-radius-md);
  background: var(--gx-warn-bg); border: 1px solid var(--gx-warn-border); }
.ht-hs-ly-do { font-size: 12.5px; color: var(--gx-warn); }
.ht-hs-qc { font-size: var(--gx-fs-table); }
.ht-hs-don { display: flex; align-items: center; gap: var(--gx-space-2);
  padding: var(--gx-space-2) 0; border-top: 1px solid var(--gx-border-subtle); }
.ht-hs-don-ngay { display: block; font-size: var(--gx-fs-min); }
.ht-hs-don-tien { display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; font-size: var(--gx-fs-table); }
.ht-hs-trong { padding: var(--gx-space-4); }

@media (max-width: 900px) {
  /* Mot cot: hoac danh sach, hoac khung chat — khong bao gio ca hai.
     Day la luat quy doi "ba cot -> danh sach roi chi tiet", va la lenh cua viec
     nay ("duoi 900px phai theo ban ve m01"). Ban ve t01 ve HAI cot o 834px; cho
     lech do ghi trong dau `v2-hop-thu.js`. */
  .ht-khung { grid-template-columns: 1fr; }
  .ht-khung .ht-chat { display: none; }
  .ht-khung.da-chon .ht-chat { display: flex; }
  /* NUT TAT AI PHAI LUON THAY, TOI DA 2 CHAM — va chan cot trai la cho duy nhat
     co no. Ban truoc an CA cot trai khi mo mot cuoc (`.da-chon .ht-ds`), nen
     tren dien thoai mo mot hoi thoai la nut Tat AI bien mat: cau tuyen bo trong
     `v2.js` noi nguoc lai voi man hinh.
     Nen an DANH SACH chu khong an ca cot, va giu thanh trang thai AI lam mot
     hang mong tren dau. Hai hang thi luoi phai khai hai dong: hang dau `auto`
     (dung bang chieu cao thanh AI), hang sau nuot phan con lai. */
  .ht-khung.da-chon { grid-template-rows: auto minmax(0, 1fr); }
  .ht-khung.da-chon .ht-ds { border-right: 0; }
  .ht-khung.da-chon .ht-ds-dau,
  .ht-khung.da-chon .ht-tab,
  .ht-khung.da-chon .ht-cuon { display: none; }
  .ht-dong { min-height: 64px; }
  .ht-dong .n-anh { width: 40px; height: 40px; font-size: var(--gx-fs-body); }
  .ht-ten { font-size: 15px; }
  .ht-hang2 { font-size: 13.5px; }
  /* Chua thanh 5 tab duoi day + le an toan cua may. Chieu cao lay tu
     `--gx-thanh-duoi-h` (ban ve TabBar: 76px) chu khong go tay — go tay la
     cai lam nut "Gui" nam duoi thanh tab hoi 05/10/2026. */
  .ht-chan { padding-bottom: calc(var(--gx-space-3) + var(--gx-thanh-duoi-h) + env(safe-area-inset-bottom)); }
  .ht-cuon { padding-bottom: calc(var(--gx-thanh-duoi-h) + env(safe-area-inset-bottom)); }
}

/* Icon trong menu — kich thuoc va mau lay tu chinh muc, nen muc dang chon thi
   icon doi mau theo. Ban ve de icon 18px, muc cao 38px. */
.v2-ic { display: inline-flex; flex: none; color: currentColor; }
.v2-ic svg { display: block; }
.n-muc { min-height: 38px; }
.n-canh-dau .v2-ic { color: var(--gx-brand-700); }

/* O soan tin. Nut Gui nam duoi phai, dong nhac lenh hen nam duoi trai. */
.ht-soan { display: flex; flex-direction: column; gap: var(--gx-space-2); }
.ht-soan-mach { font-size: var(--gx-fs-min); }
.ht-soan-duoi { display: flex; align-items: center; gap: var(--gx-space-3); }
.ht-soan-duoi > span { flex: 1; min-width: 0; font-size: var(--gx-fs-min); }
/* Khi cau go la LENH HEN thi dong nhac doi mau — nguoi go phai thay ngay rang
   bam Gui se KHONG gui gi cho khach. Mot dong chu xam noi dieu do thi bi doc
   luot qua. */
.ht-soan-nhac { display: inline-flex; align-items: center; gap: 5px;
  font-weight: 600; color: var(--gx-info); }
@media (max-width: 900px) {
  .ht-soan-duoi { flex-direction: column; align-items: stretch; }
  .ht-soan-duoi .n-nut { width: 100%; }
}

/* ==========================================================================
   MAN TONG QUAN — dung theo ban ve `screens/s66-tong-quan.html`.
   Moi mau deu la token; khong mot ma mau nao o day.
   ========================================================================== */

.tq-dau { display: flex; align-items: flex-start; gap: var(--gx-space-4); }

/* Hai cot 2:1 nhu ban ve. Duoi 900px xep chong — mot bieu do 13 cot o 390px
   thi khong doc duoc theo chieu ngang nua. */
.tq-hai-cot { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gx-space-4);
  align-items: start; }

/* --- Bieu do doanh thu theo gio --- */
.tq-do { display: flex; flex-direction: column; gap: var(--gx-space-2); }
.tq-chu-thich { display: flex; align-items: center; gap: var(--gx-space-4);
  justify-content: flex-end; font-size: var(--gx-fs-min); color: var(--gx-text-2); }
.tq-ct { display: inline-flex; align-items: center; gap: 6px; }
.tq-o { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.tq-o-ai    { background: var(--gx-brand); }
.tq-o-nguoi { background: var(--gx-brand-300); }
/* `preserveAspectRatio="none"` trong SVG nen chieu cao o day la chieu cao THAT
   cua bieu do — doi so nay la doi bieu do, khong phai doi ty le. */
.tq-svg { width: 100%; height: 220px; display: block; }
.tq-cot-ai    { fill: var(--gx-brand); }
.tq-cot-nguoi { fill: var(--gx-brand-300); }
.tq-truc { display: flex; font-size: var(--gx-fs-min); color: var(--gx-text-2);
  border-top: 1px solid var(--gx-border); padding-top: 6px; }
.tq-truc > span { flex: 1; text-align: center; }
/* Nhan truc hien cach mot — dung nhu ban ve (08:00, 10:00 ... 20:00). Dung
   `visibility` chu khong `display: none` de o trong van chiem cho, nen cac nhan
   con lai van thang hang voi cot cua chung.

   KHONG them mot nguong man hinh thu hai o day: ca he chi co MOT nguong 900px
   (ly do o dau `nen.css`). Ban ve cung chi ghi moi hai gio mot nhan. */
.tq-truc > span.tq-an { visibility: hidden; }

/* --- Hoi thoai theo kenh --- */
.tq-kenh { display: flex; flex-direction: column; gap: var(--gx-space-3); }
.tq-kenh-dau { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--gx-space-2); font-size: var(--gx-fs-table); margin-bottom: 5px; }
.tq-kenh-dau > b { font-variant-numeric: tabular-nums; }

/* --- Cho nhan vien --- */
.tq-cho { display: flex; flex-direction: column; }
.tq-cho-dong { display: flex; align-items: center; gap: var(--gx-space-3);
  padding: 10px 0; border-top: 1px solid var(--gx-border-subtle); }
.tq-cho-dong:first-child { border-top: 0; }
/* Ly do cat mot dong — hai dong thi hang cao gap doi va danh sach mat nhip. */
.tq-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tq-kenh-ten { flex: none; }
.tq-cho-phut { flex: none; font-size: var(--gx-fs-min); font-weight: 600;
  color: var(--gx-warn); font-variant-numeric: tabular-nums; }

/* --- AI ban chay --- */
.tq-ban-chay { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; }
.tq-ban-chay > li { display: flex; align-items: center; gap: var(--gx-space-3);
  padding: 9px 0; border-top: 1px solid var(--gx-border-subtle);
  font-size: var(--gx-fs-table); }
.tq-ban-chay > li:first-child { border-top: 0; }
.tq-hang { flex: none; font-family: var(--gx-font-mono); font-size: var(--gx-fs-min);
  color: var(--gx-text-2); }
.tq-ban-chay b { flex: none; font-variant-numeric: tabular-nums; }

@media (max-width: 900px) {
  .tq-dau { flex-direction: column; }
  .tq-hai-cot { grid-template-columns: minmax(0, 1fr); }
  .tq-svg { height: 180px; }
  /* Hang cho nhan vien xep lai: ten + ly do mot dong, phan con lai xuong duoi. */
  .tq-cho-dong { flex-wrap: wrap; }
  .tq-cho-dong .n-dan { min-width: 60%; }
  .tq-cat { white-space: normal; }
}

/* ==========================================================================
   VO UNG DUNG — dung theo ban ve `screens/Sidebar.png` · `Topbar.png` · `TabBar.png`
   ========================================================================== */

/* --- O doi shop, ngay duoi logo --- */
.v2-shop { display: flex; align-items: center; gap: 10px; flex: none;
  margin: var(--gx-space-3) 10px 0; padding: 9px 10px;
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius-md);
  background: var(--gx-bg); min-width: 0; }
.v2-shop-ten { font-size: var(--gx-fs-table); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Nhom menu (accordion) --- */
.v2-nhom { font-weight: 600; color: var(--gx-text); }
.v2-nhom.mo { color: var(--gx-brand); }
/* Mui ten xoay khi nhom mo. Dung CHUNG mot icon cho ca hai trang thai — hai
   icon khac nhau thi mot ngay chung lech nhip xoay. */
.v2-mui { display: inline-grid; place-items: center; color: var(--gx-icon-muted);
  transition: transform var(--gx-duration-micro) var(--gx-ease); }
.v2-mui.mo { transform: rotate(90deg); }

/* Muc con: thut vao cho ngang voi chu cua nhom cha (icon 16 + khe 10). */
.v2-con { padding-left: 36px; font-weight: 400; }
.v2-con.on { font-weight: 600; }

/* --- Huy hieu so --- */
.v2-hh { min-width: 18px; padding: 0 5px; border-radius: var(--gx-radius-pill);
  background: var(--gx-danger); color: var(--gx-surface);
  font-size: var(--gx-fs-min); font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums; }
.n-muc .v2-hh { margin-left: auto; }

/* Huy hieu tren icon (chuong o thanh tren, tab o thanh duoi): nam goc tren phai. */
.v2-tab-ic { position: relative; display: inline-grid; place-items: center; }
.v2-tab-ic > .v2-hh { position: absolute; top: -6px; left: 9px; }

/* --- Chan cot trai: trang thai AI --- */
.v2-chan { flex: none; display: flex; align-items: center; gap: var(--gx-space-2);
  padding: var(--gx-space-2) var(--gx-space-4);
  border-top: 1px solid var(--gx-border); font-size: var(--gx-fs-table); }
.v2-den { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--gx-icon-muted); }
.v2-den.bat { background: var(--gx-dot); }
/* Nut chu: van la mot NUT that, nen van phai du 44px. Do that 29/09/2026 —
   chinh phep kiem cua kho bat duoc no thieu. */
.v2-lk { min-height: 44px; padding: 0 var(--gx-space-2); border: 0; background: none;
  font-family: inherit; font-size: var(--gx-fs-table); font-weight: 600;
  color: var(--gx-brand); text-decoration: underline; cursor: pointer; }
.v2-lk:hover { color: var(--gx-brand-hover); }
.v2-lk:focus-visible { outline: 2px solid var(--gx-brand); outline-offset: 2px; }

/* --- Thanh tren: duong dan nhom > man --- */
.v2-duong { display: flex; align-items: baseline; gap: var(--gx-space-2);
  min-width: 0; }
.v2-duong .v2-tieu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  /* Tren dien thoai chi giu ten man — them ten nhom nua thi het cho cho chinh
     no. Cot trai da an, nen nguoi dung khong mat manh moi nao. */
  .v2-duong > .n-mo { display: none; }
}

/* ==================== s43 · SƠ ĐỒ TỔ CHỨC (cây) ====================

   BAN VE DUNG TOA DO TUYET DOI + MOT THE <svg> ve san duong noi cho dung 1 chu
   shop · 4 phong · 15 nguoi. Khong be nguyen duoc: so phong va so nguoi la du
   lieu, va toa do tuyet doi thi o kho 390px no de len nhau.

   Nen cay o day ve bang CSS: mot cot doc cho moi phong, duong noi la VIEN cua
   chinh the boc (`::before` / `::after`), nen no dung voi moi so phong. Duoi
   900px cac cot xep thanh mot cot — duong noi ngang tat di, chi con duong doc.
   Moi mau lay tu token, khong mot ma mau nao viet cung o day. */

.v-cay { position: relative; padding: var(--gx-space-4);
  /* Luoi diem cua ban ve: radial-gradient 20px. Trang tri, aria-hidden. */
  background-image: radial-gradient(var(--gx-border) 1px, transparent 1px);
  background-size: 20px 20px; border-radius: var(--gx-radius-md);
  border: 1px solid var(--gx-border); overflow-x: auto; }

/* Chu giai bon mau — goc tren trai cua ban ve, nhung o day nam TREN cay chu
   khong noi len: mot hop tuyet doi de len the goc o kho hep. */
.v-cay-giai { display: flex; flex-wrap: wrap; gap: var(--gx-space-3);
  align-items: center; margin-bottom: var(--gx-space-4);
  padding: var(--gx-space-2) var(--gx-space-3); background: var(--gx-surface);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius-sm);
  font-size: var(--gx-fs-min); color: var(--gx-text-3); width: fit-content; }
.v-cay-giai > span { display: flex; align-items: center; gap: 6px; }
.v-cay-o { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v-cay-o.chu { background: var(--gx-brand-900); }
.v-cay-o.tp { background: var(--gx-brand); }
.v-cay-o.nv { border: 1px solid var(--gx-icon-muted); box-sizing: border-box; }
.v-cay-o.nghi { width: 8px; height: 8px; border-radius: 99px;
  background: var(--gx-warn-border); }

/* --- Tang 1: the chu shop --- */
.v-cay-goc { display: flex; justify-content: center; }
.v-cay-the { display: flex; align-items: center; gap: var(--gx-space-2);
  box-sizing: border-box; min-height: 64px; padding: var(--gx-space-2) var(--gx-space-3);
  border-radius: var(--gx-radius-md); background: var(--gx-surface);
  border: 1px solid var(--gx-border); text-align: left; }
.v-cay-the.chu { background: var(--gx-brand-900); border-color: var(--gx-brand-900);
  color: var(--gx-surface); width: 220px; }
.v-cay-the.chu .n-mo { color: var(--gx-on-dark-2); }
.v-cay-the.tp { border: 1.5px solid var(--gx-brand); width: 260px; min-height: 72px; }
.v-cay-the.nv { min-height: 56px; }
.v-cay-ten { font-size: var(--gx-fs-body); font-weight: 600; }
.v-cay-ql { font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-brand); }

/* --- Tang 2+3: hang cac phong --- */
/* `--v-noi` la chieu cao doan noi doc. Mot bien de ba cho dung cung mot so. */
.v-cay-hang { --v-noi: 30px; display: flex; gap: var(--gx-space-5);
  justify-content: center; align-items: flex-start;
  position: relative; padding-top: calc(var(--v-noi) * 2);
  min-width: fit-content; }
/* Duong doc tu the goc xuong, roi duong ngang noi cac cot. */
.v-cay-hang::before { content: ''; position: absolute; top: 0; left: 50%;
  width: 1.5px; height: var(--v-noi); background: var(--gx-icon-muted); }
.v-cay-cot { position: relative; padding-top: var(--v-noi);
  display: flex; flex-direction: column; gap: var(--gx-space-2); }
/* Doan noc doc cua tung cot. */
.v-cay-cot::before { content: ''; position: absolute; top: 0; left: 50%;
  width: 1.5px; height: var(--v-noi); background: var(--gx-icon-muted); }
/* Duong ngang: keo tu tam cot dau den tam cot cuoi. Dung ::after cua HANG, va
   bien `--v-le` do JS khong tinh duoc nen lay 50% cua cot dau/cuoi bang cach
   cho no chay het be ngang tru nua cot moi ben. */
.v-cay-hang::after { content: ''; position: absolute; top: var(--v-noi);
  left: 0; right: 0; height: 1.5px; background: var(--gx-icon-muted); }
.v-cay-hang.mot-cot::after { display: none; }

/* --- Nhanh nhan vien duoi moi phong --- */
.v-cay-nhanh { position: relative; margin-left: var(--gx-space-5);
  padding-left: var(--gx-space-4); display: flex; flex-direction: column;
  gap: var(--gx-space-2); }
/* Thanh doc chay het chieu cao nhanh, dung o tam the cuoi (nen `bottom` la nua
   the cuoi — ban ve ket thuc duong doc dung o dong cuoi, khong cham day). */
.v-cay-nhanh::before { content: ''; position: absolute; left: 0; top: 0;
  bottom: 28px; width: 1.5px; background: var(--gx-neutral-200); }
.v-cay-nhanh > .v-cay-the { position: relative; }
.v-cay-nhanh > .v-cay-the::before { content: ''; position: absolute;
  left: calc(var(--gx-space-4) * -1); top: 50%; width: var(--gx-space-4);
  height: 1.5px; background: var(--gx-neutral-200); }

/* Dau "nghi phep hom nay" — mot diem tren the, khong phai mot chip: ban ve de
   no la dau hieu nho nhat doc duoc trong mot cay 20 the. */
.v-cay-nghi { width: 8px; height: 8px; border-radius: 99px; flex: none;
  background: var(--gx-warn-border); margin-left: auto; }

@media (max-width: 900px) {
  /* Mot cot: duong ngang khong con nghia gi khi cac cot xep doc. */
  .v-cay-hang { flex-direction: column; align-items: stretch;
    padding-top: var(--v-noi); }
  .v-cay-hang::after, .v-cay-hang::before { display: none; }
  .v-cay-cot { padding-top: 0; }
  .v-cay-cot::before { display: none; }
  .v-cay-goc { justify-content: stretch; }
  .v-cay-the.chu, .v-cay-the.tp { width: auto; }
  .v-cay-nhanh { margin-left: var(--gx-space-3); }
}
/* Dong "Chưa ai trong phòng này đang làm." — thang hang voi nhanh nhan vien
   nhung KHONG mang thanh doc: mot thanh noi di xuong cho ro rang khong co gi la
   ve mot nhanh rong. */
.v-cay-khong { margin: 0 0 0 calc(var(--gx-space-5) + var(--gx-space-4)); }
.v-cay-the > .n-anh { width: 38px; height: 38px; }

/* O anh trong Thu vien anh (s25). Tung la `style=` noi dong — dot 3 them vao roi
   RATCHET cua `he-thong-giao-dien.test.js` bat duoc (369 -> 370). Mot lop that
   thi con sua duoc o mot cho cho ca luoi anh. */
.v-anh-o { aspect-ratio: 1; object-fit: cover; width: 100%;
  border-radius: var(--gx-radius-md); }

/* --- O TIM KIEM O THANH TREN — theo `source/Topbar.dc.html` ---
   Ban ve: rong 320px, cao 36px, vien 1px, bo goc 9px, nen `--gx-bg`, chu 13px,
   kem phim tat `Ctrl K` trong mot o chu don khong co lai.
   Duoi 900px AN HAN: thanh tren dien thoai cua ban ve (`m*`) khong co o tim —
   tung man tu co o tim rieng trong than man. */
.v2-tim { width: 320px; height: 36px; flex: none; box-sizing: border-box;
  display: flex; align-items: center; gap: var(--gx-space-2);
  padding: 0 var(--gx-space-3); border: 1px solid var(--gx-border);
  border-radius: 9px; background: var(--gx-bg); color: var(--gx-text-2);
  font-size: var(--gx-fs-table); }
.v2-tim input { flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  color: var(--gx-text); outline: none; }
.v2-tim:focus-within { border-color: var(--gx-brand);
  box-shadow: var(--gx-focus); }
.v2-tim-phim { flex: none; font-family: var(--gx-font-mono); font-size: var(--gx-fs-min);
  border: 1px solid var(--gx-border); border-radius: 5px; padding: 1px 6px;
  background: var(--gx-surface); }
@media (max-width: 900px) { .v2-tim { display: none; } }
/* Mui ten doi shop o hop shop — ban ve `Sidebar`: 16px, mau chu phu, sat le phai. */
.v2-shop-doi { flex: none; display: inline-grid; place-items: center;
  color: var(--gx-text-2); }

/* --- HOP SHOP BAM DUOC — doi shop ---
   Ban ve `Sidebar`: hop cao 44px, vien 1px, bo goc 10px, nen `--gx-bg`.
   Danh sach shop xo xuong la phan ban ve khong ve (ban ve chi ve hop dong);
   dung dung token va dung khoang cach cua the. */
.v2-shop-boc { position: relative; }
.v2-shop { width: 100%; min-height: 44px; box-sizing: border-box; display: flex;
  align-items: center; gap: var(--gx-space-2); padding: 0 var(--gx-space-2);
  border: 1px solid var(--gx-border); border-radius: 10px; background: var(--gx-bg);
  font: inherit; color: var(--gx-text); text-align: left; cursor: pointer; }
.v2-shop:hover { border-color: var(--gx-brand); }
.v2-shop:focus-visible { outline: 2px solid var(--gx-brand); outline-offset: 2px; }
.v2-shop-ds { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: 10px; box-shadow: var(--gx-shadow-3); overflow: hidden; }
.v2-shop-muc { width: 100%; min-height: 44px; box-sizing: border-box; display: flex;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  padding: var(--gx-space-2) var(--gx-space-3); border: 0; background: none;
  font: inherit; color: var(--gx-text); text-align: left; cursor: pointer; }
.v2-shop-muc:hover { background: var(--gx-brand-50); }
.v2-shop-muc:focus-visible { outline: 2px solid var(--gx-brand); outline-offset: -2px; }
.v2-shop-muc.dang { background: var(--gx-brand-50); color: var(--gx-brand); }
.v2-shop-mot { padding: var(--gx-space-2) var(--gx-space-3); }
/* Loi cua lenh doi shop — nam NGAY DUOI dong shop vua bam, trong chinh menu.
   Truoc 06/10/2026 cho nay la `alert()` cua trinh duyet. Mau tu tokens.css,
   khong go ma mau: --gx-danger-bg / --gx-danger la mot cap da do tuong phan. */
.v2-shop-loi { display: flex; align-items: flex-start; gap: var(--gx-space-2);
  padding: var(--gx-space-2) var(--gx-space-3); font-size: 13px; line-height: 1.4;
  background: var(--gx-danger-bg); color: var(--gx-danger);
  border-top: 1px solid var(--gx-border); }
/* 44px chieu cao bam — vung bam dien thoai cua lenh dem. `text-decoration` chu
   khong chi mau: mot nut chi khac nhau o mau thi nguoi khong phan biet duoc mau
   khong thay no la nut (WCAG 1.4.1). */
.v2-shop-lai { flex-shrink: 0; min-height: 44px; padding: 0 var(--gx-space-2);
  border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--gx-danger); text-decoration: underline; cursor: pointer; }
.v2-shop-lai:focus-visible { outline: 2px solid var(--gx-brand); outline-offset: -2px; }
.v2-shop-muc[disabled] { cursor: not-allowed; color: var(--gx-text-2); }

/* Logo o vuong bo goc — cung bieu tuong voi trang dang nhap va khung cu.
   `border-radius: 22%` lay y nguyen tu `khung.js`. */
.v-logo{width:26px;height:26px;flex-shrink:0;display:block;border-radius:22%}

/* Nut anh dai dien o thanh tren — dac ta `shell.tai-khoan` (interactions/
   _global.json) khai no la mot hanh dong dieu huong, nen no phai la mot
   <button> that chu khong phai mot <span aria-hidden>. 44px la chuan diem
   cham cua repo (`test/nen-giao-dien.test.js`), khong phai so chon tay. */
.v2-tk {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}