/* ============================================================================
   NEN GIAO DIEN gauux — lop component dung chung cho 83 man.
   Dot 1 chot 28/09/2026. Keo ve dung BAN VE goi ban giao v1.0 (29/09/2026):
   `design/gauux-handoff/screens/DS-thanh-phan.html`.

   ==================== BA LUAT CUA TEP NAY ====================

   1. TEP NAY KHONG KHAI MOT MAU NAO — KHONG CO KHOI `:root`.
      Moi mau/khoang cach/bo goc deu la `var(--gx-*)` doc tu `ds.css` (ban chep
      nguyen van token ban thiet ke). Truoc 29/09 tep nay con tu khai 8 ma mau
      vi ban token cu thieu; ban ve moi co du nen chung da bi go het.
      Co phep kiem quet.

   2. NGUONG DIEN THOAI = 900px. MOT SO DUY NHAT CHO CA HE.
      Dung doi le mot ben — `kit.css` da co mot lan bi tach lam doi (820 va 900)
      va de lai mot khe 80px khong ai thiet ke cho, dung vao khoang iPad doc
      834px. Ly do day du trong dau `kit.css`.

   3. KHONG DUNG CHUNG TEN LOP VOI `style.css` HAY `kit.css`.
      Moi lop o day mang tien to `n-`. Hai tep kia da co `.card`, `.btn`, `.chip`
      voi nghia khac; trung ten la mot man an ca hai ban va khong ai biet ban nao
      thang.

   ==================== VUNG BAM 44px TREN DIEN THOAI ====================

   Moi thu BAM DUOC deu phai >= 44x44 duoi 900px. Dat mot lan o `@media` cuoi
   tep, co phep kiem quet.

   Chip TRANG THAI thi KHONG — no la mot nhan, khong bam duoc, va ban ve ve no
   cao 20px ngay trong hang bang. Chip bam duoc la `.n-chip-bam`, va cai do co
   44px. Nhoi 44px cho ca chip tinh la mot hang bang cao gap doi ban ve.

   ==================== CHU TOI THIEU 12px ====================

   Ban ve: "12px — toi thieu moi noi". Truoc 29/09 tep nay con 11px o bon cho va
   10px o thanh tab duoi. Da nang het. Co phep kiem quet ca tep.
   ========================================================================== */

/* ==========================================================================
   1. KHUNG — may tinh va dien thoai
   ========================================================================== */

/* VO LA MOT KHUNG NHIN, KHONG PHAI MOT TRANG DAI — doi 05/10/2026.
 *
 * Truoc do: `min-height: 100vh`, tuc CA TRANG cuon. Hau qua, va ca ba deu la
 * chuan bat buoc chu khong phai y thich:
 *   1. "Thanh loc + tieu de cot dinh tren, bang cuon trong khung" (chuan DANH
 *      SACH/BANG) la KHONG LAM DUOC: `position: sticky` can mot to cuon co
 *      bien, con day to cuon la ca cua so.
 *   2. Hop thu/chat (chuan man 01) doi "trang khong cuon, chi vung tin cuon".
 *   3. Thanh ben va thanh tren troi di khi cuon bang 50 dong.
 *
 * Nay: vo cao DUNG mot khung nhin va khong cuon; `.n-than` la to cuon. Man nao
 * dai thi van cuon — chi la cuon TRONG `.n-than` thay vi trong cua so, tuc
 * thanh ben + thanh tren dung yen.
 *
 * `100dvh` chu khong `100vh`: tren dien thoai `100vh` tinh theo cua so KHI
 * THANH DIA CHI AN, nen day chan trang (o nhap, thanh tab) xuong duoi vung
 * thay duoc. `dvh` la chieu cao DONG — dung cai dang thay. */
.n-khung { display: flex; height: 100dvh; overflow: hidden; background: var(--gx-bg);
  color: var(--gx-text);
  font-family: var(--gx-font); font-size: var(--gx-fs-body); line-height: var(--gx-leading-body); }

/* TIEU DE DUNG `--gx-leading-heading`.
   Token nay duoc KHAI o BA tep — `ds.css`, `public/css/thuong-hieu.css`,
   `design/brand/gauux-tokens.css` — va truoc 06/10/2026 KHONG CHO NAO DOC. Tuc
   moi tieu de trong app an leading cua THAN BAI (1,6) thua tu `.n-khung`, trong
   khi bo nhan dien tu khai rieng mot con so 1,2 cho tieu de. Dung lop loi
   CLAUDE.md muc 4b goi ten: "ghi vao DB ma khong ai doc ra cung la loi".

   DO THAT — man 64, ban chay thu, kho 1440, phong da nap (`document.fonts.size`
   = 4), do bang `scripts/do-giao-dien/so-khung.cjs`:
     · `<h1>` 24px cao 38px, buc ve `s64-doanh-nghiep` cao 29px  -> lech 9px
     · cau mo ta 13px cao 21px, buc ve cao 16px                  -> lech 5px
   Cong 14px, va 14px do DAY MOI THU BEN DUOI xuong: the "Phap ly" lech y14,
   o nhap lech y24, nut Luu lech y14. KHONG moc nao lech x hay w mot pixel —
   bo cuc dung, chi hop chu cao hon.

   Sau ban nay: 1,2 x 24 = 28,8 ~ 29px, dau trang lech 0px, va do day xuong con
   5px (phan cua cau mo ta, 13px x 1,6 — do la leading THAN BAI, dung theo
   token, nen KHONG dong vao).

   Pham vi: moi tieu de trong vo v2 (`.n-khung`). KHONG dat len `html`/`body` —
   trang landing va trang phap ly dung bo kieu khac. */
.n-khung :is(h1, h2, h3, h4, h5, h6) { line-height: var(--gx-leading-heading); }

/* Cot trai 236px va thanh tren 60px — hai so lay thang tu token bo cuc cua
   ban ve (`--gx-sidebar-w`, `--gx-topbar-h`), khong go lai o day. */
.n-canh { width: var(--gx-sidebar-w); flex: none; background: var(--gx-surface);
  border-right: 1px solid var(--gx-border); display: flex; flex-direction: column; }
.n-canh-dau { height: var(--gx-topbar-h); flex: none; display: flex; align-items: center;
  gap: var(--gx-space-3); padding: 0 var(--gx-space-4);
  border-bottom: 1px solid var(--gx-border); }
.n-canh-than { flex: 1; padding: var(--gx-space-3) 10px; display: flex; flex-direction: column;
  gap: 2px; overflow-y: auto; }
/* 12px la SAN, khong phai mot lua chon. Nhan nhom truoc day 11px mau
   `--gx-icon-muted` (#94A3B8, 2,56:1) — vua nho vua mo, hong ca hai dau. */
.n-canh-nhom { font-size: var(--gx-fs-min); font-weight: 700; color: var(--gx-text-2);
  padding: 9px 10px 3px; letter-spacing: .02em; }

.n-muc { display: flex; align-items: center; gap: 10px; min-height: var(--gx-control-h);
  padding: 0 10px; border-radius: var(--gx-radius); color: var(--gx-text-3);
  font-size: var(--gx-fs-table); text-decoration: none; border: 0; background: none;
  width: 100%; cursor: pointer; text-align: left; font-family: inherit;
  transition: background var(--gx-duration-micro) var(--gx-ease); }
.n-muc:hover { background: var(--gx-border-subtle); }
.n-muc.on { background: var(--gx-brand-50); color: var(--gx-brand); font-weight: 600; }
.n-muc-dem { margin-left: auto; font-size: var(--gx-fs-min); font-weight: 700;
  font-variant-numeric: tabular-nums; }

/* `min-height: 0` LA PHAN LAM CA VO CUON DUOC — doc truoc khi go no ra.
 *
 * `.n-khung` cao `100dvh` va `overflow: hidden`, tuc vo khong cuon; cho cuon la
 * `.n-than` (`flex: 1; min-height: 0; overflow: auto`) ngay duoi day. NHUNG mot
 * phan tu flex mac dinh co `min-height: auto`, nghia la no KHONG CO THUA xuong
 * duoi chieu cao noi dung minh. Nen khong co dong nay thi `.n-chinh` tu phinh
 * ra theo noi dung, `.n-than` ben trong khong bao gio bi ep nho lai, khong bao
 * gio can cuon — va phan vuot qua `100dvh` bi `.n-khung` CAT, khong duong nao
 * toi duoc.
 *
 * DO THAT 07/10/2026 — man 05, ban chay thu, 100 don mot trang:
 *   kho 1440: `.n-chinh` cao 12.993px trong mot `.n-khung` cao 900px, va
 *             `document.querySelectorAll` khong tim ra MOT phan tu cuon duoc nao
 *             tren ca trang (`scrollHeight - clientHeight > 20` + `overflow-y`
 *             la auto/scroll => tap RONG). Chan trang ("1-100 tren 300", ba nut
 *             sang trang) nam trong DOM, o duoi diem cat, va khong cuon toi duoc.
 *   kho 390:  y the, va thanh hanh dong duoi bi day xuong y12.753.
 * Tuc cong A cham ba nut phan trang la "chay" — chung CO goi mang that — trong
 * khi chu shop khong bam duoc chung bang chuot.
 *
 * KHONG MAN NAO XAU DI VI DONG NAY: man dung `.n-than` thi nay cuon THAT thay vi
 * phinh ra roi bi cat; man tu dung khung rieng (markup ban ve, nhu s05/m05) thi
 * duoc ep ve dung chieu cao khung nhin, dung cai `flex-grow: 1; min-height: 0`
 * cua chinh chung dang cho doi. */
.n-chinh { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.n-tren { height: var(--gx-topbar-h); flex: none; background: var(--gx-surface);
  border-bottom: 1px solid var(--gx-border); display: flex; align-items: center;
  gap: var(--gx-space-3); padding: 0 var(--gx-space-6); }
/* `overflow: auto` o DAY la doi ve cua `height: 100dvh` o `.n-khung`: vo khong
   cuon thi phai co MOT cho cuon, khong thi man dai bi cat mat phan duoi.
   `overscroll-behavior: contain` chan cu cuon den day roi keo tiep ca trang
   phia sau (chuoi cuon), vi trang phia sau nay khong cuon duoc nua. */
.n-than { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: var(--gx-space-6);
  display: flex; flex-direction: column; gap: var(--gx-space-4); }

.n-h1 { font-size: var(--gx-fs-page); font-weight: var(--gx-fw-page);
  letter-spacing: -.02em; margin: 0; }

/* ==========================================================================
   2. NUT — bon kieu x sau trang thai

   Ban ve: cao 36 (dien thoai 44) · bo 8 · chu 13/600 · nhan la dong tu cu the.

   VO HIEU DUNG MAU THAT, KHONG DUNG `opacity`. Ban ve ghi ro
   "Khong dung opacity de lam mo chu": opacity keo ca nen lan chu ve phia nen,
   nen mot nut vo hieu tren the trang va tren the xam ra hai do tuong phan khac
   nhau, va khong cai nao doan truoc duoc. Mau that thi doan duoc.
   ========================================================================== */

.n-nut { height: var(--gx-control-h); display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; padding: 0 14px;
  border-radius: var(--gx-radius); border: 1px solid transparent;
  background: var(--gx-brand); color: var(--gx-surface);
  font-size: var(--gx-fs-table); font-weight: 600; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background var(--gx-duration-micro) var(--gx-ease); }
.n-nut:hover, .n-nut[data-gia="hover"]  { background: var(--gx-brand-hover); }
.n-nut:active, .n-nut[data-gia="nhan"] { background: var(--gx-brand-900); }

/* Phu — vien. Viec khong phai viec chinh cua man. */
.n-nut.phu { background: var(--gx-surface); color: var(--gx-text);
  border-color: var(--gx-border); }
.n-nut.phu:hover, .n-nut.phu[data-gia="hover"]  { background: var(--gx-bg); }
.n-nut.phu:active, .n-nut.phu[data-gia="nhan"] { background: var(--gx-fill); }

/* Chi chu — viec phu ben trong mot the. */
.n-nut.mo { background: none; color: var(--gx-brand); }
.n-nut.mo:hover, .n-nut.mo[data-gia="hover"]  { background: var(--gx-brand-50); }
.n-nut.mo:active, .n-nut.mo[data-gia="nhan"] { background: var(--gx-brand-100); }

/* Nguy hiem — viec KHONG LUI DUOC. Ban ve ve no la CHU do tren nen trang,
   khong phai mot khoi do dac: mot khoi do dac trong giong nut chinh cua man va
   tay nguoi ta tu bam vao no. */
.n-nut.hiem { background: var(--gx-surface); color: var(--gx-danger);
  border-color: var(--gx-danger-border); }
.n-nut.hiem:hover, .n-nut.hiem[data-gia="hover"]  { background: var(--gx-danger-bg); }
.n-nut.hiem:active, .n-nut.hiem[data-gia="nhan"] { background: var(--gx-danger-bg); border-color: var(--gx-danger); }

.n-nut[disabled], .n-nut[aria-disabled="true"] {
  background: var(--gx-border-subtle); color: var(--gx-text-2);
  cursor: not-allowed; }
/* Nut vien VO HIEU van giu vien — bo vien di thi no truot thanh mot mang xam
   khong ranh gioi, va hang nut ben canh trong nhu bi thieu mot o. */
.n-nut.phu[disabled], .n-nut.hiem[disabled] { border-color: var(--gx-border); }
.n-nut[disabled]:not(.dang) { border-color: transparent; }

/* DANG XU LY KHAC VO HIEU. Nut van `disabled` (de khong bam duoc hai lan — voi
   viec dong bo don thi bam hai lan la hai don), nhung no GIU NGUYEN MAU cua
   minh. Ban ve ve hai trang thai nay thanh hai o rieng chinh vi chung phai nhin
   khac nhau: mot cai la "dang chay, doi di", mot cai la "khong bam duoc".
   Truoc 29/09/2026 ca hai deu ra xam. */
.n-nut.dang[disabled] { background: var(--gx-brand); color: var(--gx-surface);
  border-color: transparent; cursor: progress; }
.n-nut.phu.dang[disabled] { background: var(--gx-surface); color: var(--gx-text);
  border-color: var(--gx-border); }
.n-nut.mo.dang[disabled] { background: none; color: var(--gx-brand); }
.n-nut.hiem.dang[disabled] { background: var(--gx-surface); color: var(--gx-danger);
  border-color: var(--gx-danger-border); }

/* Dang cho: KHONG doi chu, chi them mot vong xoay 14px. Doi chu ("Dang luu...")
   lam nut doi be ngang va ca hang nut nhay mot cai. */
.n-nut.dang::before { content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: n-xoay .7s linear infinite; }
@keyframes n-xoay { to { transform: rotate(360deg); } }

.n-nut-icon { width: var(--gx-control-h); height: var(--gx-control-h); padding: 0;
  border-radius: var(--gx-radius); display: inline-grid; place-items: center;
  background: none; border: 0; color: var(--gx-text-2); cursor: pointer; }
.n-nut-icon:hover { background: var(--gx-border-subtle); color: var(--gx-text); }

/* ==========================================================================
   3. O NHAP

   Ban ve: nhan LUON nam tren o (khong dung placeholder thay nhan — placeholder
   bien mat ngay khi go chu dau tien, va nguoi dung khong con biet o nay hoi gi).
   ========================================================================== */

.n-o { height: var(--gx-control-h); width: 100%; padding: 0 var(--gx-space-3);
  border-radius: var(--gx-radius); border: 1px solid var(--gx-border);
  background: var(--gx-surface); color: var(--gx-text);
  font-size: var(--gx-fs-body); font-family: inherit; }
.n-o::placeholder { color: var(--gx-text-2); }
.n-o:hover { border-color: var(--gx-icon-muted); }
.n-o:focus-visible, .n-o[data-gia="focus"] { border-color: var(--gx-brand); }
textarea.n-o { height: auto; min-height: 84px; padding: var(--gx-space-2) var(--gx-space-3);
  line-height: var(--gx-leading-body); resize: vertical; }

.n-nhan { display: block; font-size: var(--gx-fs-min); font-weight: 600;
  color: var(--gx-text-strong-2); margin-bottom: 5px; }

/* Loi: VIEN + CHU, khong chi vien. Doi mau vien mot minh la nguoi khong phan
   biet duoc mau khong doc duoc no hong o dau (WCAG 1.4.1).
   Va chu loi phai noi CACH SUA, khong chi noi "khong hop le" — ban ve:
   "Thieu Phuong/Xa — Pancake se tu choi don. Chon trong danh sach." */
.n-o[aria-invalid="true"] { border-color: var(--gx-danger); }
.n-o-loi { font-size: var(--gx-fs-min); color: var(--gx-danger); margin-top: 4px;
  display: flex; align-items: flex-start; gap: 5px; }

/* Vo hieu: mau that, khong opacity — cung ly do nhu nut. */
.n-o[disabled] { background: var(--gx-border-subtle); color: var(--gx-text-2);
  cursor: not-allowed; }
/* Ban ve to xam ca NHAN cua truong vo hieu — nhan den tren o xam trong nhu o do
   van go duoc. `:has()` cho phep noi nguoc len cha ma khong phai them lop trong JS. */
div:has(> .n-o[disabled]) > .n-nhan { color: var(--gx-text-2); }

/* Chi doc: KHAC vo hieu. Noi dung van chon va chep duoc (ma don, ma van don) —
   nen nen sang hon va con o khoa de phan biet bang mat. */
.n-o[readonly] { background: var(--gx-bg); color: var(--gx-text); }
/* O co MOT DAU ben phai (o khoa cua truong chi doc, lich cua o ngay).
   Dau ve bang `<svg>` net chu khong bang emoji trong `content:` — emoji doi
   hinh theo he dieu hanh va khong to theo mau chu duoc. */
.n-o-khoa { position: relative; display: block; }
.n-o-khoa > .n-o { padding-right: 34px; }
.n-o-dau { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; color: var(--gx-text-2);
  pointer-events: none; }

/* O TIM — kinh lup nam TRONG vien, ben trai (ban ve s05 · s10 · s11).
   Vien van la vien cua `<input>`, hinh chi noi len tren no: bo vien cua input
   roi ve vien o boc ngoai thi vong `:focus-visible` bien mat. */
.n-o-tim { position: relative; display: block; }
.n-o-tim > .n-o { padding-left: 32px; }
.n-o-tim > svg { position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%); color: var(--gx-text-2); pointer-events: none; }

/* O chon — mui ten xuong ve bang CSS de khong phai nap mot tep anh cho mot tam
   giac. `appearance:none` de Safari khong ve them mui ten thu hai. */
/* Mui ten xuong: ban ve ve mot chevron NET (stroke 2), khong phai tam giac dac.
   Ghep bang hai vach xoay — mot tep anh cho mot dau v la khong dang. */
select.n-o { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image:
    linear-gradient(45deg,  transparent 47%, currentColor 47%, currentColor 60%, transparent 60%),
    linear-gradient(-45deg, transparent 47%, currentColor 47%, currentColor 60%, transparent 60%);
  background-position: right 17px center, right 11px center;
  background-size: 7px 7px, 7px 7px; background-repeat: no-repeat;
  color: var(--gx-text); }

/* O tien: can PHAI va don vi co dinh ben phai. Can trai thi cot tien trong mot
   bang khong xep thang hang, va mat dong nhin ra so lon nho. */
/* Ban ve: MOT hop vien chua hai ngan — o so (khong vien, can phai) va o don vi
   co nen rieng, ngan bang mot vach. Tha mot ky tu `₫` de len o thi no cham vao
   chu so khi so dai, va khong con ranh gioi giua "so" voi "don vi". */
.n-o-tien { display: flex; align-items: stretch; height: var(--gx-control-h);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  background: var(--gx-surface); overflow: hidden; }
.n-o-tien > .n-o { flex: 1; min-width: 0; width: auto; border: 0; border-radius: 0;
  height: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.n-o-tien > .n-o:focus-visible { outline-offset: -2px; }
.n-o-tien-dv { flex: none; display: grid; place-items: center; padding: 0 10px;
  background: var(--gx-bg); border-left: 1px solid var(--gx-border);
  color: var(--gx-text-strong-2); font-size: var(--gx-fs-table); }
.n-o-tien:has(> .n-o[disabled]) { background: var(--gx-border-subtle); }

/* ==========================================================================
   3b. CHON — hop kiem, nut tron, cong tac

   Ba thu nay deu la INPUT that, khong phai div gia. Duoc mien phi: ban phim,
   trinh doc man hinh, va trang thai `:checked` cua trinh duyet.

   Tren dien thoai chung phai 44x44. Dat bang VIEN TRONG SUOT 12px cong o ve
   20px o giua (`background-clip: content-box`) — vung bam 44, hinh ve 20.
   Nhoi `transform: scale()` thi vung bam KHONG to theo, va cong cu do van bat.
   ========================================================================== */

.n-chon { display: inline-flex; align-items: center; gap: var(--gx-space-2);
  font-size: var(--gx-fs-table); color: var(--gx-text-3); cursor: pointer; }
.n-chon[aria-disabled="true"] { color: var(--gx-text-2); cursor: not-allowed; }

/* `color` phai dat TAY: dieu khien bieu mau khong thua ke mau chu tu cha, no
   lay mau rieng cua he dieu hanh (#545454 tren Chromium) — mot mau khong nam
   trong bang mau, va khac nhau giua cac he. */
.n-chon-o { appearance: none; -webkit-appearance: none; box-sizing: border-box;
  color: var(--gx-text);
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 0;
  border-radius: var(--gx-radius-sm); cursor: pointer;
  background: var(--gx-surface) content-box;
  box-shadow: inset 0 0 0 1.5px var(--gx-text-2);
  transition: box-shadow var(--gx-duration-micro) var(--gx-ease); }
.n-chon-o[type="radio"] { border-radius: var(--gx-radius-pill); }

.n-chon-o:checked { background: var(--gx-brand) content-box;
  box-shadow: inset 0 0 0 1px var(--gx-brand); }
/* Dau tick / cham giua: ve bang bong trong, khong bang ky tu — ky tu doi theo
   font va co font khong co glyph do. */
.n-chon-o[type="checkbox"]:checked { background-image:
  linear-gradient(45deg, transparent 44%, var(--gx-surface) 44%, var(--gx-surface) 56%, transparent 56%),
  linear-gradient(-45deg, transparent 56%, var(--gx-surface) 56%, var(--gx-surface) 68%, transparent 68%);
  background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
/* Nut tron DA CHON: ban ve la VONG XANH DAY 5px, LOI GIUA TRANG — khong phai
   vien mong voi cham xanh o giua. Hai hinh nay nguoc nhau. */
.n-chon-o[type="radio"]:checked { background: var(--gx-surface) content-box;
  box-shadow: inset 0 0 0 5px var(--gx-brand); }
.n-chon-o[disabled] { background: var(--gx-border-subtle) content-box;
  box-shadow: inset 0 0 0 1px var(--gx-border); cursor: not-allowed; }

/* Cong tac. Duong ray ve bang `::before` chu khong bang chinh phan tu — de tren
   dien thoai phan tu to len 44px ma duong ray van 40x24 nhu ban ve. */
.n-cong-tac { position: relative; width: 40px; height: 24px; flex: none; padding: 0;
  border: 0; background: none; color: var(--gx-text); cursor: pointer; }
.n-cong-tac::before { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 36px; height: 20px;
  border-radius: var(--gx-radius-pill); background: var(--gx-text-2);
  transition: background var(--gx-duration-micro) var(--gx-ease); }
.n-cong-tac::after { content: ''; position: absolute; left: 50%; top: 50%;
  margin-left: -16px; width: 16px; height: 16px; border-radius: 50%;
  transform: translateY(-50%); background: var(--gx-surface);
  transition: transform var(--gx-duration-micro) var(--gx-ease); }
.n-cong-tac[aria-checked="true"]::before { background: var(--gx-brand); }
.n-cong-tac[aria-checked="true"]::after { transform: translateY(-50%) translateX(16px); }
.n-cong-tac { width: 36px; height: 20px; }
.n-cong-tac[disabled]::before { background: var(--gx-border); }

/* ==========================================================================
   3c. PHAN DOAN VA TAB

   Phan doan (`Hom nay · 7 ngay · 30 ngay`): mot nhom nut loai tru nhau, dung
   `aria-pressed` — nut dang chon co NEN TRANG + BONG, khong chi doi mau chu.
   Tab (`Tat ca · Do AI chot · Loi dong bo`): gach chan 2px brand, chu 600.
   ========================================================================== */

.n-phan { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--gx-radius);
  background: var(--gx-fill); }
/* Chi nut DANG CHON moi dam. Cho ca ba cung dam thi khong con gi phan biet
   ngoai cai nen trang — va tren man cham sang thap thi nen trang gan nhu bien mat. */
.n-phan-nut { height: 30px; padding: 0 14px; border: 0; background: none;
  border-radius: var(--gx-radius-sm); font-family: inherit; font-size: var(--gx-fs-table);
  font-weight: 400; color: var(--gx-text-strong-2); cursor: pointer; white-space: nowrap; }
.n-phan-nut[aria-pressed="true"] { background: var(--gx-surface); color: var(--gx-text);
  font-weight: 600; box-shadow: var(--gx-shadow-1); }

.n-tab-hang { display: flex; gap: var(--gx-space-1); border-bottom: 1px solid var(--gx-border);
  overflow-x: auto; }
/* Dem o TRONG tab (padding 12) chu khong sat chu: gach chan khi do chay het be
   ngang tab nhu ban ve, thay vi chi gach dung phan chu. */
/* Cao 44, khong 40: ban ve s05 · s10 ghi 44 o ca bon tab, va 44 la dung nguong
   vung bam cua HANDOFF muc 4 — mot con so dung cho ca hai kho thay vi hai. */
.n-tab { position: relative; min-height: 44px; padding: 0 var(--gx-space-3); border: 0;
  background: none; font-family: inherit; font-size: var(--gx-fs-table); font-weight: 500;
  color: var(--gx-text-3); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; }
.n-tab[aria-selected="true"] { color: var(--gx-text); font-weight: 600; }
.n-tab[aria-selected="true"]::after { content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gx-brand); }
.n-tab-dem { padding: 1px 7px; border-radius: var(--gx-radius-pill);
  background: var(--gx-fill); color: var(--gx-text-3);
  font-size: var(--gx-fs-min); font-weight: 600; font-variant-numeric: tabular-nums; }
.n-tab[aria-selected="true"] .n-tab-dem { background: var(--gx-brand-100);
  color: var(--gx-brand); }
/* Tab mang tin XAU (Loi dong bo) giu mau do KE CA khi khong duoc chon — con so
   do la ly do nguoi ta mo man nay, no khong duoc chim di. */
.n-tab.hong .n-tab-dem { background: var(--gx-danger-bg); color: var(--gx-danger); }

/* ==========================================================================
   4. CHIP / HUY HIEU

   Ban ve: 12/600 · bo 999 · dem 2x8. MOI chip mang CHU, khong chi mang mau —
   nguoi khong phan biet duoc mau van doc duoc trang thai (WCAG 1.4.1).
   ========================================================================== */

/* Ban ve: chip trang thai KHONG CO VIEN — nen + chu la du, va mot vong vien
   nua lam hang bang trong nhu day o luoi. Vien chi danh cho chip BAM DUOC. */
.n-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--gx-space-2);
  border-radius: var(--gx-radius-pill); border: 0;
  font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-text-3);
  background: var(--gx-fill); white-space: nowrap; line-height: 1.5; }

/* Nam mau trang thai. Bang 6.2 cua ban yeu cau, mau lay tu ban ve. */
.n-chip.thuong     { background: var(--gx-brand-50);  color: var(--gx-brand); }
.n-chip.thuong-dam { background: var(--gx-brand-100); color: var(--gx-brand); }
.n-chip.cho        { background: var(--gx-warn-bg);   color: var(--gx-warn); }
.n-chip.cho-dam    { background: var(--gx-warn-bg);   color: var(--gx-warn-strong); }
.n-chip.tin        { background: var(--gx-info-bg);   color: var(--gx-info); }
.n-chip.hong       { background: var(--gx-danger-bg); color: var(--gx-danger); }
.n-chip.trung      { background: var(--gx-fill);      color: var(--gx-text-3); }
.n-chip.trung-dam  { background: var(--gx-fill);      color: var(--gx-text-strong-2); }
/* The TOI — ban ve dung `--gx-brand-900` (xanh rat tham) chu khong `--gx-text`
   (xanh muc). Hai mau nay canh nhau thi phan biet duoc, va chip AI phai thuoc
   ho mau thuong hieu. */
.n-chip.dam        { background: var(--gx-brand-900); color: var(--gx-surface); }

/* Trong mot HANG DANG LOI (nen da do san), chip lay nen TRANG de con doc ra la
   mot chip. De nguyen nen do thi no chim vao hang. */
.n-bang tr.loi .n-chip.hong { background: var(--gx-surface); }

/* Chip BAM DUOC — bo loc, the chon. Khac chip trang thai o cho no la <button>,
   nen no phai theo luat 44px cua dien thoai. */
.n-chip-bam { min-height: var(--gx-control-h); padding: 0 13px; cursor: pointer;
  font-family: inherit; background: var(--gx-surface);
  border: 1px solid var(--gx-border); }
.n-chip-bam:hover { background: var(--gx-bg); }
.n-chip-bam.on { background: var(--gx-text); color: var(--gx-surface);
  border-color: var(--gx-text); }

/* Huy hieu AI — dung o tin do AI soan va o muc menu. */
.n-ai { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--gx-space-2);
  border-radius: var(--gx-radius-pill); background: var(--gx-brand-50);
  color: var(--gx-brand); font-size: var(--gx-fs-min); font-weight: 700; line-height: 1.5; }

.n-anh { width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--gx-brand); color: var(--gx-surface);
  display: grid; place-items: center; font-weight: 700; font-size: var(--gx-fs-table); }

/* ==========================================================================
   5. THE
   ========================================================================== */

.n-the { background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-lg); box-shadow: var(--gx-shadow-1); }
.n-the-dau { padding: var(--gx-space-4) var(--gx-space-4) 0;
  display: flex; align-items: center; gap: var(--gx-space-3); }
.n-the-than { padding: var(--gx-space-4); }

/* The toi — doanh thu AI, goi cuoc. Chu phu tren nen toi KHONG dung `--gx-text-2`
   (no la mau cho nen SANG); ban ve co rieng `--gx-on-dark-2` cho viec nay. */
.n-the.toi { background: var(--gx-brand-900); border-color: var(--gx-brand-900);
  color: var(--gx-surface); }
.n-the.toi .n-mo, .n-the.toi .n-cs-nhan { color: var(--gx-on-dark-2); }

.n-h2 { font-size: var(--gx-fs-card); font-weight: var(--gx-fw-card); margin: 0; }
.n-mo { font-size: var(--gx-fs-min); color: var(--gx-text-2); margin: 0; }

/* The chi so. `delta` mang CA mui ten CA mau — mau mot minh khong du. */
.n-cs { display: flex; flex-direction: column; gap: 5px; padding: var(--gx-space-4); }
.n-cs-nhan { font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-text-2); }
.n-cs-so { font-size: var(--gx-fs-page); font-weight: var(--gx-fw-page);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.n-cs-delta { font-size: var(--gx-fs-min); font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px; }
.n-cs-delta.len   { color: var(--gx-brand); }
.n-cs-delta.xuong { color: var(--gx-danger); }

/* ==========================================================================
   6. BANG

   Ban ve: hang cao 48 · chu 13 · dau bang nen #F8F9FF.
   Hang LOI ghi ly do NGAY TRONG HANG va co nut sua — khong chi to do. To do
   mot minh la nguoi dung thay no do, khong biet vi sao, va khong biet lam gi.
   ========================================================================== */

.n-boc-bang { overflow-x: auto; }
/* `table-layout: fixed` la DIEU KIEN de cat ba cham chay duoc. Voi layout `auto`
   (mac dinh) trinh duyet tinh be rong cot theo NOI DUNG va bo qua `max-width` cua
   o, nen `text-overflow` khong bao gio kich hoat: mot ten chien dich kieu
   `MESSCACAO_HOANGHA` khong co cho ngat dong (trinh duyet KHONG ngat o `_`) se keo
   bang rong ra cho tan khi `.n-boc-bang` phai cuon ngang.
   Ban truoc cua khung nay (`v2.css`, luoi `.bg-hang`) dung
   `repeat(N, minmax(0,1fr))` + cat ba cham — cung la chia deu, cung la cat. Day la
   dung cach do, dat dung MOT cho cho ca bang lan khung xuong. */
.n-bang { width: 100%; border-collapse: collapse; table-layout: fixed; }
.n-bang th, .n-bang td { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* Cot SO khong can phan deu: mot so tien dai nhat khoang 12 ky tu, con cot ten thi
   cang rong cang doc duoc. Dat tren `<th>` vi voi layout `fixed` be rong cot lay
   tu hang dau tien. */
.n-bang th.n-so { width: 10rem; }
/* Hang phu (ly do loi + nut sua) la mot cau GIAI THICH, khong phai mot o bang —
   cat ba cham o day la cat dung cai nguoi dung can doc. */
.n-bang td.n-bang-duoi { white-space: normal; overflow: visible;
  text-overflow: clip; }
.n-bang th { font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-text-2);
  height: 40px; padding: 0 14px; text-align: left; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em;
  background: var(--gx-bg); border-bottom: 1px solid var(--gx-border); }
.n-bang td { font-size: var(--gx-fs-table); height: 48px; padding: 0 14px;
  border-top: 1px solid var(--gx-border-subtle); line-height: var(--gx-leading-table); }
.n-bang tbody tr:hover td { background: var(--gx-bg); }
.n-bang tr.chon td { background: var(--gx-brand-50); }
.n-bang tr.loi  td { background: var(--gx-danger-bg); }
.n-bang tr.loi:hover td { background: var(--gx-danger-bg); }
.n-bang-ly-do { display: flex; align-items: center; gap: var(--gx-space-2);
  font-size: var(--gx-fs-min); color: var(--gx-danger); }
/* Hang phu di LIEN sau hang chinh: bo vach ngan giua hai cai de mat doc ra la
   MOT hang, khong phai hai. */
.n-bang-duoi { height: auto; padding-top: 0; }
.n-bang tr.n-duoi-hang td { border-top: 0; }
.n-bang tr.bam { cursor: pointer; }
.n-so { text-align: right; font-variant-numeric: tabular-nums; }
/* TEN COT SO cung can phai. `.n-bang th` khai `text-align: left` va co do dac
   hieu cao hon `.n-so`, nen khong co dong nay thi chu "TỔNG" nam ben trai con
   cac con so nam ben phai — mat phai bat cheo ca bang moi noi duoc cot nao la
   cua ai. Ban ve s05 ve tieu de cot so o `justify-content: flex-end`. */
.n-bang th.n-so { text-align: right; }
/* Ma dinh danh (ma don, SKU, ma van don): 13px va mau CHU CHINH. Day la thu
   nguoi ta doc de doi chieu voi Pancake — lam no nho va mo la bat nguoi dung
   phong to trinh duyet. */
.n-ma { font-family: var(--gx-font-mono); font-size: var(--gx-fs-table);
  font-weight: 500; color: var(--gx-text); }

/* ==========================================================================
   7. BANG BAO / THANH DO / CHU GIAI
   ========================================================================== */

.n-bao { display: flex; gap: 10px; padding: 10px var(--gx-space-3);
  border-radius: var(--gx-radius-md); border: 1px solid;
  font-size: var(--gx-fs-table); align-items: flex-start; }
.n-bao.tin  { background: var(--gx-info-bg);   border-color: var(--gx-info-border);
  color: var(--gx-info); }
.n-bao.cho  { background: var(--gx-warn-bg);   border-color: var(--gx-warn-border);
  color: var(--gx-warn-strong); }
.n-bao.hong { background: var(--gx-danger-bg); border-color: var(--gx-danger-border);
  color: var(--gx-danger); }

/* The <progress> THAT, khong phai hai the div long nhau. Duoc ba thu mien phi:
   vai tro progressbar, gia tri doc duoc bang trinh doc man hinh, va be rong tu
   trinh duyet tinh — nen KHONG can `style=` noi dong. */
.n-muc-do { -webkit-appearance: none; appearance: none; border: 0;
  display: block; width: 100%; height: 8px; border-radius: var(--gx-radius-pill);
  background: var(--gx-border-subtle); overflow: hidden; }
.n-muc-do::-webkit-progress-bar { background: var(--gx-border-subtle); }
.n-muc-do::-webkit-progress-value { background: var(--gx-brand);
  border-radius: var(--gx-radius-pill);
  transition: width var(--gx-duration-standard) var(--gx-ease); }
.n-muc-do::-moz-progress-bar { background: var(--gx-brand);
  border-radius: var(--gx-radius-pill); }
.n-muc-do.sap::-webkit-progress-value { background: var(--gx-warn); }
.n-muc-do.sap::-moz-progress-bar { background: var(--gx-warn); }

/* Chu giai. Mo khi HOVER VA KHI FOCUS — chi mo khi hover la nguoi dung ban phim
   khong bao gio doc duoc no. */
.n-giai { position: relative; display: inline-flex; }
.n-giai-noi { position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); z-index: 20; width: max-content;
  max-width: min(260px, 60vw);
  background: var(--gx-text); color: var(--gx-surface);
  padding: var(--gx-space-2) 10px; border-radius: var(--gx-radius);
  font-size: var(--gx-fs-min); font-weight: 500; line-height: 1.45;
  box-shadow: var(--gx-shadow-3); }

/* ==========================================================================
   8. HOI THOAI — bong chat
   ========================================================================== */

/* BA SUA THEO BAN VE s01/m01/t01 (29/09/2026) — ban truoc lech ca ba:

   1. Bong cua shop la XANH NHAT co vien, khong phai xanh dam chu trang. Ban ve
      dung `#EFF9F4` (brand-50) + vien `#DCEFE5` + chu `#0F172A`. Xanh dam chu
      trang doc duoc, nhung no lam moi tin cua shop nang bang nhau voi nut chinh,
      va trong mot luong 40 tin thi ca khung thanh mot khoi xanh.
   2. Bong cua khach la nen TRANG co vien, khong phai nen xam. Tren nen trang cua
      khung chat thi `#F1F5F9` gan nhu khong thay vien.
   3. Goc nhon nam o TREN, khong o duoi — ban ve: khach `4px 14px 14px 14px`
      (goc tren-trai), shop `14px 4px 14px 14px` (goc tren-phai). Goc nhon la de
      chi VE PHIA nguoi noi; dat o duoi thi no chi xuong tin ke tiep. */
.n-bong { max-width: 72%; padding: 9px var(--gx-space-3); border-radius: 14px;
  font-size: var(--gx-fs-body); line-height: var(--gx-leading-body);
  border: 1px solid var(--gx-border); }
.n-bong.khach { background: var(--gx-surface); border-top-left-radius: 4px;
  align-self: flex-start; }
.n-bong.shop { background: var(--gx-brand-50); border-color: var(--gx-brand-100);
  border-top-right-radius: 4px; align-self: flex-end; }
.n-bong-ten { font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-text-2);
  margin-bottom: 3px; display: flex; align-items: center; gap: 5px; }

.n-dang-go { display: inline-flex; gap: 4px; padding: 11px var(--gx-space-3);
  background: var(--gx-border-subtle); border-radius: 14px; align-self: flex-start; }
.n-dang-go > i { width: 6px; height: 6px; border-radius: 50%;
  background: var(--gx-icon-muted); animation: n-nhay 1.2s infinite; }
.n-dang-go > i:nth-child(2) { animation-delay: .2s; }
.n-dang-go > i:nth-child(3) { animation-delay: .4s; }
@keyframes n-nhay { 0%, 60%, 100% { opacity: .35; } 30% { opacity: 1; } }

/* ==========================================================================
   9. BON TRANG THAI DU LIEU — dang tai · rong · hong · khong co quyen

   Thieu mot cai la nguoi dung nhin man trang va khong biet vi sao.
   `Khong co quyen` CO Y khong co nut Thu lai: bam lai khong bao gio doi ket qua,
   va mot nut khong bao gio chay lam nguoi ta bam mai.
   ========================================================================== */

/* Ban ve boc ca bon trang thai trong MOT O co vien va bo goc, khong tha noi
   giua the. Co vien thi nguoi dung biet "cho nay dang rong", khong vien thi
   trong nhu trang chua tai xong. */
.n-trong { display: flex; flex-direction: column; align-items: center;
  gap: var(--gx-space-2); padding: var(--gx-space-6); text-align: center;
  color: var(--gx-text-2); font-size: var(--gx-fs-min);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius-md);
  background: var(--gx-surface); }
.n-trong.hong { border-color: var(--gx-danger-border); }
.n-trong.cam { background: var(--gx-bg); }
.n-trong-h { font-size: var(--gx-fs-body); font-weight: var(--gx-fw-card);
  color: var(--gx-text); }
/* Huy hieu tron 30px — dau hieu nhin thay truoc khi doc chu. */
.n-trong-dau { width: 30px; height: 30px; flex: none; display: grid;
  place-items: center; border-radius: 50%;
  background: var(--gx-brand-50); color: var(--gx-brand); }
.n-trong.hong .n-trong-dau { background: var(--gx-danger-bg); color: var(--gx-danger); }
.n-trong.cam  .n-trong-dau { background: var(--gx-fill); color: var(--gx-text-3); }

/* Khung xuong, KHONG vong xoay: vong xoay khong noi duoc sap hien ra cai gi,
   con khung xuong thi noi duoc — va no khong nhay khi du lieu ve. */
.n-xuong { background: linear-gradient(90deg, var(--gx-border-subtle) 25%,
  var(--gx-fill) 37%, var(--gx-border-subtle) 63%);
  background-size: 400% 100%; animation: n-truot 1.4s ease infinite;
  border-radius: var(--gx-radius-sm); height: 14px; width: 100%; }
/* Be rong le dan theo dong — dat bang nth-child chu khong tinh trong JS roi do
   qua `style=`. Do dai la co dinh theo vi tri, khong phai du lieu. */
.n-cot-8 > .n-xuong:nth-child(2) { width: 88%; }
.n-cot-8 > .n-xuong:nth-child(3) { width: 76%; }
.n-cot-8 > .n-xuong:nth-child(4) { width: 64%; }
.n-cot-8 > .n-xuong:nth-child(5) { width: 52%; }
@keyframes n-truot { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==========================================================================
   10. LOP PHU — ngan keo, phieu duoi, hop thoai, thong bao ngan
   ========================================================================== */

.n-nen-mo { position: fixed; inset: 0; background: var(--gx-text); opacity: .45; z-index: 40; }

.n-ngan { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  background: var(--gx-surface); box-shadow: var(--gx-shadow-4); z-index: 50;
  display: flex; flex-direction: column; }

.n-phieu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--gx-surface); border-radius: 18px 18px 0 0;
  box-shadow: var(--gx-shadow-4); padding-bottom: env(safe-area-inset-bottom);
  max-height: 88vh; display: flex; flex-direction: column; }
.n-phieu-tay { width: 36px; height: 4px; border-radius: var(--gx-radius-pill);
  background: var(--gx-icon-muted); margin: 10px auto 2px; flex: none; }

.n-hop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); background: var(--gx-surface);
  border-radius: var(--gx-radius-lg); box-shadow: var(--gx-shadow-5); z-index: 50;
  display: flex; flex-direction: column; }
/* HOP RONG — chi cho hop mang mot BANG. 480px khong du cho ba cot tien: `.n-bang
   td` cat ba cham nen hop khoe nhung so DOC KHONG RA, ngay truoc mot nut khong
   lui lai duoc. Do bang anh chup 1440x900 ngay 06/10/2026.
   Van la `calc(100vw - 32px)` o ve sau, nen o kho dien thoai no khong rong hon
   hop thuong mot diem anh nao — duoi 900px bang da gap thanh the roi. */
.n-hop.n-hop-rong { width: min(760px, calc(100vw - 32px)); }

.n-lop-dau { display: flex; align-items: center; gap: 10px;
  padding: var(--gx-space-4); border-bottom: 1px solid var(--gx-border); flex: none; }
.n-lop-than { padding: var(--gx-space-4); overflow-y: auto; }
/* Cau loi cua MAY CHU, hien NGAY TRONG hop — khong phai mot banh mi bay qua
   o goc man. Nguoi dung dang nhin vao hop; day la cho ho vua bam. */
.n-hop-loi { margin-top: var(--gx-space-3); }
/* Cau "vi sao nut chinh dang khoa" — day sang le TRAI cua chan hop. */
.n-hop-vi-sao { margin-right: auto; }
/* Mot khoi nhap them duoi phan hau qua (vi du o chon thoi han). */
.n-hop-them { margin-top: var(--gx-space-3); }

/* HOP "CHON KHOANG NGAY" — hai o ngay xep doc, mot hang loi tat o tren.
   Khai o day chu khong inline trong man 28: hop la thanh phan DUNG CHUNG, va
   man thu hai can mot hop chon khoang ngay (man 05, 07, 33, 34, 50 deu co nut
   ky) thi dung lai duoc ngay. Mau lay tu token, khong go ma mau. */
.n-hop-khoang { display: flex; flex-direction: column; gap: var(--gx-space-3); }
/* Loi tat "Hom nay · Hom qua · 7 ngay · 30 ngay · Thang nay" — xuong dong duoc,
   vi o kho 390 nam nut 44px khong vua mot hang. */
.n-hop-loi-tat { display: flex; flex-wrap: wrap; gap: var(--gx-space-2); }
/* Dong ghi chu duoi hai o: mui gio + tran do dai khoang. Mot cau, khong phai
   mot cau loi — nen mau chu phu, khong mau canh bao. */
.n-hop-ghi-chu { margin: 0; font-size: var(--gx-fs-table); color: var(--gx-text-3); }

.n-lop-chan { display: flex; gap: var(--gx-space-2); justify-content: flex-end;
  padding: var(--gx-space-4); border-top: 1px solid var(--gx-border); flex: none; }

/* Hop xac nhan liet ke HAU QUA — moi hau qua mot dong, khong gop thanh mot cau.
   Tieu de la DONG TU + DOI TUONG ("Dong bo 3 don toi Pancake"), khong phai
   "Ban chac chu?" — cau do khong noi len viec gi sap xay ra. */
.n-hau-qua { margin: var(--gx-space-3) 0 0; padding-left: var(--gx-space-5);
  font-size: var(--gx-fs-table); color: var(--gx-text-3); }
.n-hau-qua li { margin-bottom: 4px; }

/* Thong bao ngan. Ba kieu, va CHUNG KHONG GIONG NHAU O THOI GIAN SONG:
   thanh cong tu an sau 5s · co Hoan tac giu 8s · LOI thi KHONG tu an va co nut
   Thu lai. Mot loi tu bien mat la mot loi khong ai kip doc. */
/* Thong bao ngan LUON nen toi, KE CA khi bao loi. Ban ve co y the: mot dai do
   truot len giua man trong nhu he thong vua sap, con nen toi + mot dong chu do
   la "co viec can xu ly". Mau do o day danh cho CHU, khong cho nen. */
.n-banh { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 60; background: var(--gx-text); color: var(--gx-surface);
  min-height: 44px; padding: 0 var(--gx-space-2) 0 14px;
  border-radius: var(--gx-radius-md);
  font-size: var(--gx-fs-table); box-shadow: var(--gx-shadow-4);
  display: flex; align-items: center; gap: var(--gx-space-3); }
.n-banh.hong { box-shadow: var(--gx-shadow-4), inset 3px 0 0 var(--gx-danger-border); }
/* Nut trong thong bao: mau `--gx-on-dark-2` (ban mau danh rieng cho chu phu tren
   nen toi). Khong gach chan — gach chan tren nen toi doc nang mat hon. */
.n-banh-nut { border: 0; background: none; padding: 0 var(--gx-space-2);
  font-family: inherit; font-size: var(--gx-fs-table); font-weight: 700;
  color: var(--gx-on-dark-2); cursor: pointer; white-space: nowrap; }

/* ==========================================================================
   10b. TIEN ICH — thay cho style noi dong

   Kho khoa so cho `style=` noi dong bang mot RATCHET chi cho GIAM
   (`test/he-thong-giao-dien.test.js`). Chot 17/08/2026 sau khi do duoc 1.015
   cho thuoc 305 khuon khac nhau. Mot THU VIEN DUNG CHUNG ma con style noi dong
   thi 83 man sau se chep lai.
   ========================================================================== */

.n-dan      { flex: 1; min-width: 0; }
.n-cot      { display: flex; flex-direction: column; }
.n-cot-8    { display: flex; flex-direction: column; gap: 8px; }
.n-hang     { display: flex; align-items: center; gap: var(--gx-space-2); flex-wrap: wrap; }
.n-phai     { align-items: flex-end; }
.n-trai     { align-items: flex-start; }
.n-khong-le { margin: 0; }
.n-tren-4   { margin-top: 4px; }

/* ==========================================================================
   11. DIEN THOAI — duoi 900px
   ========================================================================== */

.n-thanh-duoi { display: none; }

@media (max-width: 900px) {
  .n-canh { display: none; }
  .n-khung { flex-direction: column; }
  .n-tren { padding: 0 var(--gx-space-3); padding-top: env(safe-area-inset-top); }

  /* HAI DAU TRANG CHONG NHAU — sua 06/10/2026.
     Moi ban ve dien thoai (`m01-danh-sach`, `m05-don-hang`, `m10-khach-hang`) mo
     bang dau trang CUA CHINH MAN: nut Quay lai + ten man + dong phu + nut cua man,
     cao 60px. Khong mot ban ve nao ve `header.n-tren` cua vo (duong dan "Vi tri" +
     o tim + Thong bao + Tai khoan) o kho 390. Man nao da dung dau trang rieng theo
     ban ve thi o 390 dang co HAI dau trang xep nhau, va moi moc do cua man lech
     dung +60px — do that man 01, ca 2 shop, 05:40 06/10/2026.

     AN THEO MAN, KHONG AN CA LOAT: 83 man chua ve dau trang rieng het. Man nao da
     ve thi danh dau goc cua no bang `n-dau-trang-rieng`, man con lai giu thanh tren
     cua vo lam cho duy nhat hien ten man. An ca loat bay gio la lay mat ten man
     tren 82 man khac.
     Thong bao + Tai khoan KHONG mat duong vao: Thong bao la tab thu 4 cua thanh
     duoi (dung ban ve TabBar), Tai khoan nam trong trang "Them". */
  .n-chinh:has(> .n-dau-trang-rieng) > .n-tren { display: none; }
  .n-than { padding: var(--gx-space-4); gap: var(--gx-space-3);
    padding-bottom: calc(var(--gx-thanh-duoi-h) + env(safe-area-inset-bottom)); }

  /* Khoi chu cap 1 cua dien thoai: to hon may tinh mot bac. */
  .n-h1 { font-size: 26px; font-weight: 800; }

  /* VUNG BAM 44px — dat MOT LAN o day, khong nhoi rai rac tung lop.
     Danh sach nay la MOI THU BAM DUOC cua nen. Them mot thanh phan bam duoc moi
     ma quen them vao day thi phep kiem do. */
  .n-nut, .n-o, .n-muc, .n-chip-bam, .n-tab, .n-phan-nut,
  .n-banh-nut { min-height: 44px; }
  /* `Hoan tac` la nut THAT trong mot thong bao ngan, nen no cung phai 44px.
     Day la cho de sot nhat: no trong nhu mot duong link chu khong nhu mot nut. */
  .n-banh-nut { padding: 0 var(--gx-space-2); }
  /* CHU NUT GIU 13/600 tren dien thoai. Luat 16px cua HANDOFF muc 4 la cho
     O NHAP (duoi 16px iOS tu phong to trang khi bam vao o) — nut khong co hanh
     vi do, nen nhoi 16px cho nut chi lam nhan dai ra va vo hang. */
  .n-nut { padding: 0 var(--gx-space-4); }
  .n-nut-icon { width: 44px; height: 44px; }
  .n-o { font-size: var(--gx-fs-input-mobile); }   /* 16px: duoi so nay iOS tu phong to trang */
  .n-phan-nut { height: 44px; }

  /* Hop kiem / nut tron: vung bam 44, hinh ve van 20 (vien trong suot 12px).
     Bo goc phai to len 18 de goc TRONG con lai dung 6 — bo goc tinh tren vien
     ngoai, nen giu 6 o day se ra mot o vuong sac canh. */
  .n-chon-o { width: 44px; height: 44px; border: 12px solid transparent;
    border-radius: 18px; }
  .n-chon-o[type="radio"] { border-radius: var(--gx-radius-pill); }

  /* Cong tac: phan tu to len 44 nhung `::before`/`::after` ve theo so co dinh
     nen duong ray van 40x24 dung nhu ban ve. */
  .n-cong-tac { width: 44px; height: 44px; }

  /* Thanh tab duoi — 5 muc, chi hien tren dien thoai.

     SO DO LAY TU BAN VE, KHONG GO TAY: `design/gauux-handoff/source/TabBar.dc.html`
     ve `height: 76px; box-sizing: border-box; padding: 6px 8px 18px`, moi tab la
     mot khoi cao 52px, icon 22, chu 12px — dang chon 700, khong chon 500.
     6 + 52 + 18 = 76. Truoc 06/10/2026 cho nay la `min-height: 56px` khong padding,
     tuc 57px ke ca vien: thap hon ban ve 19px, va 19px do day MOI THU o kho 390
     cua MOI MAN len mot doan khong mot ban ve nao ve.

     `--gx-thanh-duoi-h` la nguon duy nhat cua con so nay: man nao can chua cho
     cho thanh (o soan tin cua Hoi thoai, CTA dinh day) phai doc bien do chu khong
     go lai 76 — go tay la mot ngay doi chieu cao thanh thi 4 cho chua do lech. */
  .n-thanh-duoi { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; box-sizing: border-box;
    height: calc(var(--gx-thanh-duoi-h) + env(safe-area-inset-bottom));
    background: var(--gx-surface); border-top: 1px solid var(--gx-border);
    padding: 6px var(--gx-space-2) calc(18px + env(safe-area-inset-bottom)); }
  .n-tab-duoi { height: 52px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; border: 0;
    background: none; color: var(--gx-text-2); font-family: inherit; cursor: pointer; }
  .n-tab-duoi.on { color: var(--gx-brand); }
  .n-tab-duoi span { font-size: var(--gx-fs-min); font-weight: 500; }
  .n-tab-duoi.on span { font-weight: 700; }
  /* Nhan tab KHONG duoc xuong dong. O tab rong 390/5 = 78px va cao 52px: mot
     nhan hai dong day icon cua rieng o do len ~9px, nen bon icon thang hang
     con mot cai thi khong — va dong thu hai tran ra ngoai o. `tenTab` trong
     `v2-man.js` lo phan dat ten cho vua; dong nay la cai luoi do: ten moi nao
     van qua dai thi bi cat bang `…` chu khong lam lech ca thanh tab. */
  .n-tab-duoi .n-tab-ten { max-width: 100%; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
  /* Icon bo `IC` ve 18px mac dinh; ban ve TabBar ve 22. Go o day chu khong sua
     `IC` — 18px la dung cho muc menu va cho nut. */
  .n-tab-duoi .v2-tab-ic svg { width: 22px; height: 22px; }

  /* CTA chinh cua trang cap 2 dinh day man. */
  .n-chan-dinh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--gx-surface); border-top: 1px solid var(--gx-border);
    padding: 10px var(--gx-space-4) calc(10px + env(safe-area-inset-bottom));
    display: flex; gap: var(--gx-space-2); }
  .n-chan-dinh .n-nut { flex: 1; height: 50px; }

  .n-bong { max-width: 86%; }
  .n-ngan { width: 100%; }
  /* BANG -> DANH SACH THE (HANDOFF muc 4). Mot bang 5 cot o 390px thi hoac
     tran ra ngoai man, hoac phai cuon ngang — ca hai deu lam nguoi dung mat
     dau dong. Moi hang thanh mot the, moi o mang nhan cot cua chinh no. */
  .n-bang, .n-bang tbody, .n-bang tr, .n-bang td { display: block; width: auto; }
  .n-bang thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; }
  /* Tung `<th>` cung phai thu ve 1px. `overflow:hidden` cua `<thead>` chi cat
     PHAN VE, khong cat HOP: cac `<th>` ben trong van la table-cell nen chung tu
     dung mot bang an va keo hop ra rong bang tong do dai nhan cot — do that o
     390px la 437px, tuc TRAN NGANG THAT du mat khong thay gi. Van giu chu trong
     `<th>` (khong `display:none` ca thead) de trinh doc man hinh con doc duoc
     ten cot; nhan nhin thay di theo `data-nhan` cua tung o. */
  .n-bang thead th { display: block; width: 1px; height: 1px; padding: 0;
    overflow: hidden; }
  .n-bang tr { border: 1px solid var(--gx-border); border-radius: var(--gx-radius-md);
    background: var(--gx-surface); padding: var(--gx-space-2) var(--gx-space-3);
    margin-bottom: var(--gx-space-2); }
  .n-bang tr.chon { border-color: var(--gx-brand-300); background: var(--gx-brand-50); }
  /* Hang phu phai DINH vao the cua hang chinh, khong tach thanh mot the thu hai
     — mot ly do loi noi mot minh trong mot the rieng thi khong con biet no noi
     ve don nao. */
  .n-bang tr:has(+ .n-duoi-hang) { margin-bottom: 0;
    border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
  .n-bang tr.n-duoi-hang { margin-top: 0; padding-top: 0;
    border-top-left-radius: 0; border-top-right-radius: 0; border-top: 0; }
  .n-bang tr.n-duoi-hang td::before { display: none; }
  .n-bang tr.loi  { border-color: var(--gx-danger-border); background: var(--gx-danger-bg); }
  .n-bang td { height: auto; min-height: 0; padding: 3px 0; border: 0;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--gx-space-3); text-align: left;
    /* THE thi XUONG DONG, khong cat ba cham: o kho hep the cao them mot dong la
       doc duoc, con chu bi cat trong y nhu mot gia tri that bi thieu mot phan.
       Cung quyet dinh voi `.bg-hang > div { white-space: normal }` cua ban truoc. */
    white-space: normal; overflow: visible; text-overflow: clip; }
  /* `.n-bang th.n-so` dat `width: 10rem` cho kho may tinh; o kho the thi `<th>`
     phai thu ve 1px nhu moi `<th>` khac, va no can do dac hieu cao hon de de len. */
  .n-bang thead th.n-so { width: 1px; }
  /* Nhan cot di THEO o — khong con hang tieu de nao de ngo len. */
  .n-bang td::before { content: attr(data-nhan); flex: none;
    font-size: var(--gx-fs-min); font-weight: 600; color: var(--gx-text-2);
    text-transform: uppercase; letter-spacing: .05em; }
  .n-bang td:empty, .n-bang td.n-bang-duoi::before { display: none; }
  .n-bang tbody tr:hover td, .n-bang tr.chon td, .n-bang tr.loi td { background: none; }

  /* COT PHU — an di duoi 900px. Mot bang 9 cot (ban ve s05) gap thanh the thi
     the cao gan bang ca man hinh va cot dau tien bi day len tren nep gap. An
     cot doc duoc bo qua, KHONG cat chu: chu bi cat trong nhu mot gia tri that
     bi thieu mot phan. */
  .n-bang .n-cot-phu { display: none; }

  /* COT CHINH — dong DAU cua the: to hon va khong mang nhan cot. Nhan "MA ĐƠN"
     ngo tren chinh ma don la mot dong chu thua o kho hep nhat. */
  .n-bang td.n-cot-chinh { font-size: var(--gx-fs-card); font-weight: 700;
    color: var(--gx-text); }
  .n-bang td.n-cot-chinh::before { display: none; }

  /* Hang tab: cho XUONG DONG thay vi cuon ngang. Cuon ngang o day giau mat tab
     cuoi, va tab cuoi thuong la tab mang tin xau ("Loi dong bo"). */
  .n-tab-hang { flex-wrap: wrap; overflow-x: visible; }

  /* O tien: vo ngoai phai cao theo o ben trong (44px), khong thi chu bi cat. */
  .n-o-tien { height: auto; min-height: 44px; }
}

/* ==========================================================================
   12. BAN PHIM VA CHUYEN DONG
   ========================================================================== */

/* Vien bam ban phim: 2px, cach 2px. Dung `:focus-visible` chu khong `:focus` —
   `:focus` ve vien ca khi bam chuot, va nguoi ta se di xoa no, roi nguoi dung
   ban phim mat luon dau chi. Danh sach nay phai phu MOI thanh phan bam duoc. */
.n-muc:focus-visible, .n-nut:focus-visible, .n-o:focus-visible,
.n-chip-bam:focus-visible, .n-cong-tac:focus-visible, .n-nut-icon:focus-visible,
.n-tab-duoi:focus-visible, .n-chon-o:focus-visible, .n-tab:focus-visible,
.n-phan-nut:focus-visible, .n-banh-nut:focus-visible,
[data-gia="focus"] {
  outline: 2px solid var(--gx-brand); outline-offset: 2px; }

/* `data-gia` = trang thai BAY RA de BANG THANH PHAN chup duoc hover / dang nhan /
   vong focus tren mot trang tinh. No dung CHUNG mot dong khai voi trang thai
   that (xem cac selector o tren) — khong chep lai mau, nen khong the lech.
   Chi trang `nen.html` dung no; man that khong bao gio dat thuoc tinh nay. */

/* Chu giai mo khi CHA no duoc focus bang ban phim, khong chi khi hover. */
.n-giai-noi { display: none; }
.n-giai:hover > .n-giai-noi,
.n-giai:focus-within > .n-giai-noi { display: block; }

@media (prefers-reduced-motion: reduce) {
  .n-nut.dang::before, .n-dang-go > i, .n-xuong { animation: none; }
  * { transition-duration: 1ms !important; }
}