/* ============================================================================
   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: var(--gx-space-2); padding: 0 var(--gx-space-4);
  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); }
/* `canh` LA TEN KHAC CUA `cho` — mot so man goi bang canh bao la "canh".
   DO THAT 23/10/2026: `.n-bao` khai `border: 1px solid` KHONG kem mau, nen mot
   kieu khong co dang ve roi ve `currentColor` — bang canh bao hien ra voi VIEN
   DEN TRAN tren nen trang, nhin nhu mot o input hong. Them bi danh o day thay
   vi doi 11 man: ca hai ten deu dang duoc dung that, va doi tay 11 cho la 11
   cho de sot. */
.n-bao.canh { background: var(--gx-warn-bg); border-color: var(--gx-warn-border);
  color: var(--gx-warn-strong); }

/* 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; }

/* `max-height` + `overflow: hidden` — do that 16/10/2026 tren man 29 kho dien
   thoai: hop chon cot nhieu nhom cao 1126px, vuot han 844px cua man hinh ma
   khong co gi chan. `.n-lop-than` da khai `overflow-y: auto` tu truoc, nhung
   khong cuon duoc vi khong co gi bo gioi han chieu cao CHA — mot flex item
   voi `overflow` khac `visible` tu co `min-height: 0` theo dac ta, nen chi can
   cho `.n-hop` mot `max-height` la than hop cuon dung, dau/chan dung yen
   (ca hai da `flex: none`). */
.n-hop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px));
  overflow: hidden; 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.

   PHAI GO `position: fixed` CUA `.n-banh` RA. `HopXacNhan` ve cau loi bang
   `class="n-banh hong n-hop-loi"` de dung lai hinh thuc cua banh mi (nen toi +
   vach do), nhung `.n-banh` la MOT BANH MI THAT: `position: fixed; left: 50%;
   bottom: 24px; transform: translateX(-50%); z-index: 60`. Truoc ban nay
   `.n-hop-loi` chi dat `margin-top`, tuc KHONG go mot khai nao trong so do —
   nen cau loi khong nam trong hop ma bay xuong GIUA DAY MAN HINH va DE LEN
   chinh hai nut cua hop. Chup lai o 1440x900 va 390x844: khoi loi phu len ca
   nut "Quay lại" lan nut chinh, va o 390 thi phu luon ca dong "vi sao nut dang
   khoa". Tuc dung luc may chu tu choi — dung luc nguoi dung can bam tiep — hai
   cai nut bi che.

   Dinh da viet dung trong chu thich tu dau; chi phan CSS la thieu. Loi nay
   thuoc ve MOI hop co cau loi may chu, khong rieng man nao.

   `box-sizing` + `width:100%`: `.n-banh` von la mot pill tu co theo chu, trong
   hop thi no phai chiem du be ngang than hop. `align-items: flex-start` va
   `padding` doc: cau loi cua may chu dai nhieu dong, ma `.n-banh` canh giua va
   khong co padding doc — nhieu dong se tran ra ngoai vien. */
/* `.n-banh.n-hop-loi`, KHONG `.n-hop-loi` mot minh — VA DAY LA GOC CUA LOI.
   Hai ben deu la mot lop don, tuc CUNG DO DAC HIEU, nen cai viet SAU thang. Ma
   `.n-banh` nam o dong 680, con `.n-hop-loi` o dong 658: ban "sua trong hop"
   bi chinh `.n-banh` ghi de, am tham, du da viet dung y dinh. Neo bang hai lop
   thi thu tu trong tep khong con quyet dinh gi nua. */
.n-banh.n-hop-loi { position: static; left: auto; bottom: auto; transform: none;
  z-index: auto; margin-top: var(--gx-space-3); width: 100%;
  box-sizing: border-box; align-items: flex-start;
  padding: var(--gx-space-3) 14px; }
/* 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. */

/* ==================== DONG BAM DUOC CUA MAN CAY 1:1 ====================
 *
 * `.n-bang` co san bon trang thai cho bang dung `<table>` (xem khoi `.n-bang`
 * o tren). Nhung 83 man "cay 1:1 tu ban ve" khong dung `.n-bang`: moi hang la
 * mot `<div style="display: grid">` dung kieu inline cua chinh ban ve, nen
 * chung KHONG an theo mot dong nao cua khoi do — va bang DS-thanh-phan doi
 * hang bam duoc phai co re chuot, dang nhan, vong focus, dang chon.
 *
 * Nen mot CLASS cho dung viec do, de moi man chi phai them `class="n-dong-bam"`
 * vao hang cua minh. Lam o day chu khong o tung man: lenh dem muc "TRANG THAI
 * TUONG TAC" ghi "khong sua tung man le — sua o thanh phan dung chung de moi
 * man an theo".
 *
 * NEN KHONG KHAI O DAY. Mau nen cua hang (ke ca `--gx-brand-50` cua hang dang
 * chon) van do man dat inline: ban ve dat nen rieng cho hang canh bao va hang
 * tong, va mot luat `background` o day se de len chung. O day chi khai nhung gi
 * man KHONG the tu dat dung: con tro, vong focus, va chuyen dong. */
.n-dong-bam { cursor: pointer; transition: background-color 120ms ease-out; }
.n-dong-bam:focus-visible { outline: 0;
  box-shadow: var(--gx-focus), inset 3px 0 0 var(--gx-brand); }
.n-dong-bam:active { transform: scale(.998); }
.n-dong-bam[aria-disabled="true"], .n-dong-bam:disabled { cursor: not-allowed; }

/* 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; }

/* ==================== MAN "Đề xuất khai thông tin" (`dt-de-xuat`) ==========
   Bon lop, tat ca mang tien to `n-dx-` nen khong man nao khac an theo. */

/* `.n-the` KHONG tu co dem — dem nam o `.n-the-than`, ma dong de xuat dung the
   THANG (khong qua thanh phan `The`, vi no se bay ra mot dau de rong). Nen phai
   tu khai dem o day; thieu no thi chu dinh sat vien. */
.n-dx { padding: var(--gx-space-4); display: flex; flex-direction: column;
  gap: var(--gx-space-2); }
.n-dx-ht { padding: var(--gx-space-3); }

/* CAU SINH RA DE XUAT trong doan chat. KHONG chi to mau: mau mot minh thi nguoi
   khong phan biet duoc mau khong doc ra duoc cau nao la cau dang noi toi
   (WCAG 1.4.1). Vach trai + chu dam la hai dau hieu khong phu thuoc mau. */
.n-dx-khop { border-left: 3px solid var(--gx-brand); padding-left: var(--gx-space-2);
  font-weight: 600; }

/* Doan nguoi dung vua go, xem lai o buoc soat. `pre-wrap` vi ho xuong dong THAT
   trong o nhap — gop het thanh mot doan la cho ho duyet mot ban KHAC voi ban se
   luu, va bang chung ho doc de quyet lai khong phai thu se vao prompt. */
.n-dx-truoc { white-space: pre-wrap; }

/* ==================== MAN "Khai thông tin cho AI" (`dt-tt-khai`) ==========
   Bon lop, tat ca mang tien to `n-tt-` tru `.n-an` — xem ghi chu cua no. */

/* `.n-the` KHONG tu co dem (dem nam o `.n-the-than`), ma mot muc Thong tin dung
   the THANG — khong qua thanh phan `The`, vi no se bay ra mot dau de rong. Nen
   phai tu khai dem o day; thieu no thi chu dinh sat vien. */
.n-tt { padding: var(--gx-space-4); display: flex; flex-direction: column;
  gap: var(--gx-space-2); }
.n-tt-dau { flex-wrap: wrap; }

/* NOI DUNG MUC. `pre-wrap` vi chu shop xuong dong THAT trong o nhap — mot bang
   gia go thanh mot dong moi mon la mot bang gia khong ai soat lai duoc, va cai
   hien o day phai dung thu da luu.
   Cat con 6 dong: mot muc dai 4.000 ky tu day het moi nut Xoa xuong duoi tam
   man; bam vao the de xem het thi thuoc ban sau, chua co. */
.n-tt-mo-ta { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden; }

/* XEM TRUOC ANH KEM trong hop. `max-height` co dinh vi hop tu cao theo noi
   dung: mot anh doc 3.000px day hai nut cua hop ra khoi tam nhin, va nguoi ta
   khong con cho nao bam. `object-fit: contain` de khong cat anh — day la ban
   duyet, cat no la cho ho duyet mot ban khac voi ban se luu. */
.n-tt-xem { display: block; max-width: 100%; max-height: 220px; object-fit: contain;
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  background: var(--gx-fill); }

/* LY DO KHOA hien BANG CHU canh nut (lenh dem, cong A). Khong cho no gian ra
   chiem ca hang nut. */
.n-tt-vi-sao { align-self: center; }

/* O NHAP AN — khong `display:none`: the <input type=file> that van phai o trong
   cay de `.click()` cua nut mo duoc hop chon tep, va `display:none` o mot so
   trinh duyet lam `.click()` khong bat. Clip 1px la cach vo nay da dung o
   `man-that/inbox.js` (o dinh kem cua khung chat); khai o day MOT LAN de ban
   thu ba khong lai di viet inline nua. Nut that mang nhan, nen o nay
   `aria-hidden` + `tabindex=-1` o phia goi. */
.n-an { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

/* ==================== LUOI THE · DAI 24 GIO · KHOI XO RA ====================
 *
 * DUNG CHUNG: ba nhom class duoi day them 22/10/2026 cho man Cong thuc (kho
 * cong thuc), nhung khong co gi rieng cua man do — man nao bay mot LUOI THE
 * hay mot LICH TRONG NGAY cung dung duoc.
 *
 * VI SAO THEM: kho khong co class luoi the nao, nen man Cong thuc boc danh sach
 * the trong `.n-phan` — ma `.n-phan` la mot NHOM NUT NAM NGANG (`inline-flex`,
 * dong 373). Ket qua: cac the bi nhoi vao mot dai ngang thay vi xep thanh luoi,
 * va chu shop doc ra la "giao dien van nhu cu". Do that 22/10/2026.
 *
 * CHI THEM CLASS MOI, khong sua class cu: tep nay moi man deu nap. */

/* Luoi the tu xep so cot theo be rong — khong ghim so cot, nen cung mot luoi
   chay duoc tu dien thoai (mot cot) den man rong (ba-bon cot). */
.n-luoi-the { display: grid; gap: var(--gx-space-4);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Hang so nho trong mot the: dung `tabular-nums` de hai the canh nhau thang hang. */
.n-the-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 1px; background: var(--gx-border); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius); overflow: hidden; }
.n-the-so > div { background: var(--gx-surface); padding: 7px 9px; min-width: 0; }
.n-the-so b { display: block; font-size: var(--gx-fs-card); font-variant-numeric: tabular-nums; }
.n-the-so span { font-size: var(--gx-fs-min); color: var(--gx-text-2); }

/* ---- DAI 24 GIO: mot ngay nhin mot lan ----
   Moc dat theo % cua ngay (gio*60+phut)/1440, nen khong can tinh lai o CSS. */
.n-dai-ngay { position: relative; height: 66px; margin: var(--gx-space-2) 0 var(--gx-space-4);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  background: var(--gx-fill); }
.n-dai-vach { position: absolute; top: 0; bottom: 20px; width: 1px; background: var(--gx-border); }
.n-dai-gio { position: absolute; bottom: 2px; font-size: var(--gx-fs-min);
  color: var(--gx-text-3); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.n-moc { position: absolute; top: 8px; transform: translateX(-50%); display: flex;
  flex-direction: column; align-items: center; gap: 3px; background: none; border: 0;
  padding: 0; cursor: pointer; font: inherit; }
.n-moc i { width: 3px; height: 24px; border-radius: 2px; background: var(--gx-brand); }
.n-moc.tat i { background: var(--gx-danger); }
.n-moc.ns i { background: var(--gx-info); }
.n-moc.bat i { background: var(--gx-brand); }
.n-moc.nghi i { background: var(--gx-border); }
.n-moc b { font-size: var(--gx-fs-min); background: var(--gx-surface);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  padding: 1px 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.n-moc:focus-visible { outline: 2px solid var(--gx-focus); outline-offset: 2px; }
.n-chu-giai { display: flex; flex-wrap: wrap; gap: var(--gx-space-3);
  font-size: var(--gx-fs-min); color: var(--gx-text-2); }
.n-chu-giai span { display: inline-flex; align-items: center; gap: 6px; }
.n-chu-giai i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- KHOI XO RA: mac dinh dong, mo khi can ---- */
.n-xo { border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  margin-bottom: var(--gx-space-2); background: var(--gx-surface); }
.n-xo-dau { display: flex; flex-wrap: wrap; gap: var(--gx-space-3); align-items: center;
  padding: 10px 12px; }
.n-xo-than { border-top: 1px solid var(--gx-border); padding: 12px; }

/* ---- THE CONG THUC: dau · than · chan, hai nut chan BANG NHAU ----
   DUNG CHUNG cho moi the co hang nut o chan. Do that 22/10/2026: hai nut chan
   dai ngan khac nhau doc ra la "nut k chuan", vi moi nut tu co theo do dai chu
   ben trong. `flex: 1 1 0` cho chung bang nhau bat ke chu dai ngan. */
.n-the-ct { display: flex; flex-direction: column; overflow: hidden; }
.n-the-ct .n-the-than { flex: 1; display: flex; flex-direction: column;
  gap: var(--gx-space-2); }
.n-the-ten { display: block; font-size: var(--gx-fs-card); font-weight: var(--gx-fw-card);
  line-height: var(--gx-leading-heading); color: var(--gx-text); }
/* Ma cong thuc la mot DONG RIENG tren ten, khong dung lien sau ten: do that
   22/10/2026 tren anh chup, "GX-01Serum phuc hoi" doc ra nhu mot cum chu. */
.n-the-ct .n-ma { display: block; margin-bottom: 2px; color: var(--gx-text-3); }
.n-the-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--gx-space-3);
  margin: 0; font-size: var(--gx-fs-min); }
.n-the-dl dt { color: var(--gx-text-3); }
.n-the-dl dd { margin: 0; color: var(--gx-text); overflow-wrap: anywhere; }
.n-the-chan { display: flex; gap: var(--gx-space-2); padding: 0 var(--gx-space-4)
  var(--gx-space-4); }
.n-the-chan > .n-nut { flex: 1 1 0; justify-content: center; }

/* ---- HANG DAI THI CUON, DUNG DAY MAN DAI RA ----
   DUNG CHUNG. Do that 22/10/2026: shop co 11 tai khoan quang cao, hang nut tich
   chon trai het ra lam khoi "Tai khoan" cao gan bang ca man, va chu shop doc ra
   la "an vao tk thi hien dai to ra". Gioi han chieu cao roi cuon: so tai khoan
   la con so CUA SHOP, man khong duoc dai ra theo no. */
.n-cuon-doc { max-height: 168px; overflow-y: auto; align-content: flex-start;
  padding: 2px; border: 1px solid var(--gx-border); border-radius: var(--gx-radius); }

/* ---- LUOI O NHAP: nhan tren, o duoi, hai cot ----
   DUNG CHUNG. Do that 22/10/2026 tren anh chup man that: man Cong thuc boc cac
   o nhap trong `.n-phan` — ma `.n-phan` la mot NHOM NUT NAM NGANG
   (`inline-flex`, dong 373), nen "Ten goi · Muc tieu · <ca mot cau giai thich
   dai> · Ma chien dich · Ngan sach" dinh thanh mot hang chen chuc, va cau giai
   thich chen vao giua hai o nhap.
   Cung lop loi voi `.n-chinh` (vung bo cuc) va `.n-ngan` (ngan keo): ten class
   doc nhu mot tinh tu nhung thuc ra la mot VAI BO CUC. */
.n-luoi-o { display: grid; gap: var(--gx-space-3) var(--gx-space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.n-luoi-o > p, .n-luoi-o > .n-mo { grid-column: 1 / -1; }

/* Hang nut dai thi cuon — KHONG duoc nen chieu cao nut.
   `align-items: flex-start` + `align-content: flex-start`: thieu cai dau thi
   flex keo cac nut theo chieu cao dong va o 11 nut chung bi bop con mot vet
   mong (do that cung ngay: khoi tai khoan cao 6px). */
.n-cuon-doc { align-items: flex-start; }
.n-cuon-doc > * { flex: 0 0 auto; }

/* ==========================================================================
   22. GIAN HANG CONG THUC — theo ban ve duyet 22/10/2026
   (`https://claude.ai/artifact/8ZLeuFev8xTPbpfxGXYWsT`)

   Chu shop mo ta mo hinh: "tung cong thuc la tung o san pham giong nhu 1 shop
   my pham, an vao tung cong thuc thi la chi tiet cong thuc". Nen o phai co
   KHUNG ANH nhu o san pham, ba so, va cong tac ngay o chan — chu khong phai
   bon dong chu.

   TAT CA deu la lop DUNG CHUNG, tien to `n-`, khong mot ma mau nao.
   ========================================================================== */

/* ---- KHUNG ANH TREN O (ti le 4:3 nhu anh san pham) ----
   Chua co anh that thi la mot o mau thuong hieu, khong phai o xam trong: o
   trong doc ra la "anh bi loi". Ba nhan dat o ba goc de khong bao giờ de nhau. */
/* TEN LOP LA `.n-o-anh` CHU KHONG PHAI `.n-anh`: `.n-anh` DA CO tu truoc va la
   ANH DAI DIEN TRON 32px (dong 451). Do that 22/10/2026: dung trung ten thi
   khung anh cua o gian hang bi ep con 32x32, ba nhan absolute bay ra ngoai the
   va de len hang tab — dung cai bay `CLAUDE.md` muc 6 noi den.

   CHIEU CAO KHUNG ANH DAT BANG `::before` CHU KHONG BANG `aspect-ratio`:
   khung nay la mot FLEX ITEM trong the (cot doc), ma trong flex thi chieu cao
   van tinh theo NOI DUNG — do that 22/10/2026: `aspect-ratio: 4/3` cho ra mot
   vet cao 32px (dung bang chieu cao cai nhan ben trong) va ba nhan absolute
   bay ra ngoai the, de len ca hang tab. */
.n-o-anh { width: 100%; max-width: 100%; align-self: stretch; flex: 0 0 auto;
  position: relative; display: grid; place-items: center;
  border-bottom: 1px solid var(--gx-border);
  background: linear-gradient(135deg, var(--gx-brand-50), var(--gx-brand-100)); }
.n-o-anh::before { content: ''; grid-area: 1 / 1; display: block;
  padding-top: 75%; width: 0; }
.n-o-anh > * { grid-area: 1 / 1; }
.n-o-anh > .tren-trai  { position: absolute; top: 10px; left: 10px; }
.n-o-anh > .duoi-trai  { position: absolute; bottom: 10px; left: 10px; }
.n-o-anh > .duoi-phai  { position: absolute; bottom: 10px; right: 10px; }
.n-o-anh-chu { font-size: var(--gx-fs-min); font-weight: 650; color: var(--gx-brand);
  background: var(--gx-surface); border: 1px solid var(--gx-brand-100);
  border-radius: 999px; padding: 4px 12px; }
.n-o-anh-khuon { font-size: var(--gx-fs-min); font-weight: 650; color: var(--gx-text);
  background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm); padding: 3px 8px; }
.n-the-ct.nghi .n-o-anh { filter: grayscale(0.65); opacity: 0.7; }

/* ---- CHIP MOC GIO TREN O: dot mau + chu, doc duoc ca khi nhieu moc ---- */
.n-gio-ds { display: flex; flex-wrap: wrap; gap: 6px; }
.n-gio-chip { display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--gx-fs-min); font-weight: 600; border-radius: var(--gx-radius-sm);
  padding: 3px 8px; border: 1px solid var(--gx-border); background: var(--gx-surface);
  color: var(--gx-text); }
.n-gio-chip i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gx-brand); }
.n-gio-chip.tat i  { background: var(--gx-danger); }
.n-gio-chip.ns i   { background: var(--gx-info); }
.n-gio-chip.bat i  { background: var(--gx-brand); }

/* ---- KHOI CO TIEU DE: dau (tieu de + nut) / than (noi dung) ----
   Thay cho `<h3>` + chu troi tren mot dai doc dai: ban ve bo moi muc vao mot
   khoi rieng co vien, nen mat biet muc nao het muc nao bat dau. */
.n-khoi { background: var(--gx-surface); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius); box-shadow: var(--gx-shadow-1); min-width: 0; }
.n-khoi-dau { display: flex; flex-wrap: wrap; gap: var(--gx-space-3);
  align-items: center; justify-content: space-between;
  padding: 13px var(--gx-space-4); border-bottom: 1px solid var(--gx-border); }
.n-khoi-dau > div { min-width: 0; }
.n-khoi-than { padding: var(--gx-space-4); min-width: 0; }
.n-khoi-than + .n-khoi-than { border-top: 1px solid var(--gx-border); }

/* ---- CHI TIET HAI COT: noi dung ben trai dinh lai, phan set ben phai ----
   Giong trang chi tiet san pham: anh/nội dung o cot hep ben trai dinh theo man
   hinh, phan dai cuon o cot rong ben phai. Duoi 900px thi xep mot cot. */
.n-hai-cot { display: grid; grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--gx-space-4); align-items: start; }
.n-cot-dinh { position: sticky; top: 0; display: flex; flex-direction: column;
  gap: var(--gx-space-3); min-width: 0; }
.n-cot-doc { display: flex; flex-direction: column; gap: var(--gx-space-4); min-width: 0; }

/* ---- MOT TEP NOI DUNG trong cot trai ---- */
.n-tep { display: flex; gap: 10px; align-items: center; border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm); padding: 8px 10px; background: var(--gx-surface); }
.n-tep-hinh { width: 44px; height: 44px; border-radius: var(--gx-radius-sm);
  display: grid; place-items: center; font-size: var(--gx-fs-min); font-weight: 700;
  color: var(--gx-brand); flex: 0 0 auto;
  background: linear-gradient(135deg, var(--gx-brand-50), var(--gx-brand-100)); }
.n-tep-ten { font-size: var(--gx-fs-min); color: var(--gx-text); min-width: 0;
  overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .n-hai-cot { grid-template-columns: 1fr; }
  .n-cot-dinh { position: static; }
}

/* ---- XEM TRUOC TEN SE SINH RA: cap | ten, ten chu mono ----
   Ban ve 22/10/2026. Truoc do man bay ba ten nhom bang ba doan chu `.n-mo`
   giong het nhau, nen khong doc ra duoc dau la ten camp dau la ten nhom — ma
   day DUNG LA buoc xac nhan truoc khi tien bat dau chay. */
.n-xem-truoc { display: grid; gap: 1px; background: var(--gx-border);
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius-sm);
  overflow: hidden; margin-bottom: var(--gx-space-3); }
.n-ten-dong { display: flex; flex-wrap: wrap; gap: 4px var(--gx-space-3);
  align-items: baseline; background: var(--gx-surface); padding: 9px 12px; }
.n-ten-dong.camp { background: var(--gx-fill); }
.n-ten-dong > span { font-size: var(--gx-fs-min); font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gx-text-3);
  min-width: 118px; }
.n-ten-dong > b { font-family: var(--gx-font-mono); font-size: var(--gx-fs-table);
  color: var(--gx-text); word-break: break-all; font-weight: 500; }

/* ---- DANH SACH KIEM: moi dong mot dau tron, chan/nhac/dat ---- */
.n-kiem { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 9px; }
.n-kiem li { display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--gx-fs-table); color: var(--gx-text); }
.n-kiem i { flex: 0 0 18px; height: 18px; border-radius: 50%; display: grid;
  place-items: center; font-size: var(--gx-fs-min); font-weight: 700;
  margin-top: 2px; font-style: normal; color: var(--gx-surface);
  background: var(--gx-text-3); }
.n-kiem i.dat  { background: var(--gx-brand); }
.n-kiem i.chan { background: var(--gx-danger); }
.n-kiem i.nhac { background: var(--gx-warn); }

/* ---- CHAN THE HAI VAI: cong tac ben trai, nut mo ben phai ----
   Khac `.n-the-chan` thuong (hai nut bang nhau): o gian hang co MOT cong tac +
   mot nut, nen chia hai dau hang va nut khong duoc gian ra. */
/* CHAN THE HAI HANG KHI CHAT, KHONG NEN CHU XUONG BA DONG.
 *
 * DO THAT 23/10/2026, chu shop nhin anh chup man that: *"con 7 viec nhin k
 * chuan, nut sat ben phai"*. Goc: mot hang duy nhat phai chua cong tac + cau
 * trang thai + HAI nut, trong mot the rong 320px. Flex nen cau chu lai, "Còn 7
 * việc" vo thanh ba dong chong len nhau, con nut cuoi bi day sat mep phai.
 *
 * Nen: cho hang XUONG DONG (`flex-wrap`), cau trang thai KHONG duoc nen
 * (`white-space: nowrap` + `flex: 0 0 auto`), va hai nut chia deu hang duoi. */
.n-the-chan.doi { flex-wrap: wrap; align-items: center; gap: var(--gx-space-2);
  border-top: 1px solid var(--gx-border); padding-top: var(--gx-space-3);
  margin-top: var(--gx-space-2); }
.n-the-chan.doi > .n-mo { flex: 0 0 auto; white-space: nowrap;
  font-size: var(--gx-fs-min); margin-right: auto; }
/* `flex: 1 1 0` chu khong `0 0 auto` hay `1 1 120px`: hai nut chia deu be ngang con lai va
   deu nhau bat ke chu dai ngan — "Xem cong thuc" dai hon "Chay voi…" nhung hai
   nut van bang nhau, va khong cai nao dinh mep. */
.n-the-chan.doi > .n-cong-tac { flex: 0 0 auto; }
/* HAI NUT LA MOT NHOM RIENG, chiem TRON mot hang.
   De chung lam con truc tiep cua chan thi flex xep chung vao hang con cho —
   do that 23/10/2026: nut "Xem cong thuc" nam cung hang voi cong tac, con
   "Chay voi…" roi xuong hang duoi mot minh, rong gap doi. Bo vao mot nhom thi
   nhom xuong hang truoc, roi hai nut trong nhom chia deu. */
.n-the-chan-nut { flex: 1 0 100%; display: flex; gap: var(--gx-space-2); }
.n-the-chan-nut > .n-nut { flex: 1 1 0; min-width: 0; justify-content: center; }

/* Mot tep trong cot hep: hinh · ten (xuong dong duoc) · o chon nhom · nut bo.
   Truoc 22/10/2026 day la mot `.n-chip` nam ngang chua ca mot `<select>` va
   mot nut — trong cot 300px no TRAN RA NGOAI va de len cot ben canh. */
.n-tep-ds { display: flex; flex-direction: column; gap: var(--gx-space-2);
  margin-top: var(--gx-space-3); }
.n-tep { flex-wrap: wrap; }
.n-tep .n-tep-hinh { order: 1; }
.n-tep .n-tep-ten { order: 2; flex: 1 1 60px; }
/* Nut bo di NGAY SAU ten (order 3) chu khong de `margin-left:auto` day xuong:
   o chon nhom xuong dong rieng thi nut bo roi theo va nam le loi duoi cung. */
.n-tep-bo { order: 3; flex: 0 0 auto; margin-left: auto; }
/* `OChon` boc `<select>` trong mot `<div>` khong class, nen phai neo theo CON
   TRUC TIEP cua `.n-tep` — neo vao `.n-o` (chinh cai `<select>`) la neo nham
   mot phan tu CHAU, va `order` khong co tac dung qua mot cap. */
.n-tep > div { order: 4; flex: 1 1 100%; min-width: 0; }

/* ==========================================================================
   23. "CHẠY VỚI…" — bon buoc tu cong thuc toi chien dich (SPEC 22/10/2026)
   ========================================================================== */

/* ---- HANG BON BUOC ---- */
.n-buoc { list-style: none; margin: 0 0 var(--gx-space-4); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--gx-space-3); }
.n-buoc-o { display: flex; align-items: center; gap: 10px; flex: 1 1 180px;
  padding: 12px 14px; border-radius: var(--gx-radius); border: 1px solid var(--gx-border);
  background: var(--gx-surface); min-width: 0; }
.n-buoc-o.dang { border: 2px solid var(--gx-brand); }
.n-buoc-o.bo-qua { opacity: 0.6; }
.n-buoc-so { width: 28px; height: 28px; border-radius: 999px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700;
  font-size: var(--gx-fs-min); background: var(--gx-fill); color: var(--gx-text-2);
  border: 1px solid var(--gx-border); flex: none; }
.n-buoc-o.dang .n-buoc-so { background: var(--gx-brand-50); color: var(--gx-brand);
  border-color: var(--gx-brand); }

/* ---- LUOI BAI DE TICH ----
   Mot the bai la mot `<button aria-pressed>` THAT, khong phai `div onClick`:
   bam bang phim Tab phai toi duoc, va trinh doc man hinh phai doc ra duoc no
   dang bat hay tat. */
.n-luoi-bai { display: grid; gap: var(--gx-space-3);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin: var(--gx-space-3) 0; }
.n-the-bai { display: flex; flex-direction: column; gap: 0; padding: 0;
  border: 1px solid var(--gx-border); border-radius: var(--gx-radius);
  background: var(--gx-surface); cursor: pointer; overflow: hidden;
  font-family: inherit; text-align: left; color: var(--gx-text); }
.n-the-bai.chon { border: 2px solid var(--gx-brand); background: var(--gx-brand-50); }
.n-the-bai-anh { aspect-ratio: 4 / 3; width: 100%; display: grid; place-items: center;
  background: var(--gx-fill); overflow: hidden; }
.n-the-bai-anh img { width: 100%; height: 100%; object-fit: cover; }
.n-the-bai-chu { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px;
  font-size: var(--gx-fs-min); min-width: 0; }
.n-the-bai-chu b { font-weight: 600; overflow-wrap: anywhere; }

/* ---- MOT DONG CHON (radio + hai dong chu) ---- */
.n-chon-hang { display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--gx-fs-table); border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius-sm); padding: 10px 12px; background: var(--gx-surface);
  cursor: pointer; margin-bottom: var(--gx-space-2); }
.n-chon-hang input { margin-top: 3px; accent-color: var(--gx-brand);
  width: 16px; height: 16px; flex: 0 0 auto; }

/* Bien the: VUNG CHINH ben trai, cot phu ben phai. `.n-hai-cot` goc dat cot
   HEP truoc (noi dung quang cao dinh ben trai, nhu trang chi tiet san pham);
   "Chay voi…" nguoc lai — viec dang lam o giua, tom tat o ria. */
.n-hai-cot.chinh-truoc { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 900px) { .n-hai-cot.chinh-truoc { grid-template-columns: 1fr; } }

/* Bang rong hon be ngang thi CUON TRONG KHUNG CUA NO, khong keo ca trang di
   ngang. `.n-bang` co `table-layout: fixed` nen cot bi nen chu khong tran —
   voi bang nhieu cot (vd Luot chay gan day) thi nen qua, phai cho cuon. */
.n-cuon-ngang { overflow-x: auto; }
.n-cuon-ngang .n-bang { table-layout: auto; min-width: 640px; }