/* Hệ thiết kế Bình Dân Học Vụ Tài Chính (dùng chung: trang bán, trang chờ, chính sách, cổng học /hoc, Ban Liên Lạc).
   Bảng màu D51 (15/10, tông trang Quốc khánh: giấy kem #FBF8E6, nâu sepia #33281D, đỏ son đậm #9E3B2C cho chữ đỏ nhỏ, vàng
   rơm #E0C381 trên nền nâu) sửa bởi D56 (cùng ngày, Quỳnh chọn bản B): đỏ tươi #C73824 cho chữ lớn trên giấy kem và NỀN NÚT,
   đỏ son đất #C05543 chỉ trên dải nâu; bỏ #B84F3E. D51 THẮNG D50 (xanh than) và bảng thử V2 8.2. Tên biến cũ
   (--giay, --kem, --muc, --do, --moc, --lua, --vang, --dong, --xanh-sau...) GIỮ NGUYÊN, chỉ đổi giá trị, để mọi trang đang đọc
   chúng không vỡ; biến mới (--giay-da, --son, --nau-do, --rom...) theo docs/thiet-ke/v2-thi-giac.md mục 2.2. Màu chỉ khai báo ở
   đây: trang nào cần sắc riêng thì đặt biến cục bộ trỏ về các biến này, không rải mã hex.
   Nút chính đỏ son (--nut-nen, --nut-chu). --lua, --vang, --rom là vàng rơm cho điểm nhấn, liên kết và vòng tiêu điểm TRÊN NỀN
   NÂU, không bao giờ là chữ trên giấy. --vang-muc chỉ để dẫn mắt (đường kẻ, mảng).
   Chữ: Hubot Sans cho thân (400), menu và nút (500 tới 700), tiêu đề (600, 700); chữ số 0 tới 9 từ Bricolage Grotesque (họ
   "So BDHV"); Bricolage nguyên họ CHỈ cho một câu nhấn (--f-nhan); phông đơn cách của máy (--f-may) chỉ cho số mục, ngày, mã.
   Phông tự lưu ở /fonts (giấy phép OFL kèm theo), không Google Fonts, không CDN. Ghi chú lựa chọn: docs/thiet-ke/v2-phong-mau.md. */

/* Phông thật. font-display swap: chữ hiện ngay bằng phông dự phòng đo khớp bên dưới, phông thật tới thì thay mà trang không xô.
   Trang nào cần 400 và 700 ở màn đầu thì preload hai tệp đó trong <head> (đúng đường dẫn dưới đây, có crossorigin).
   "So BDHV" (D51): chỉ chữ số 0 tới 9 (unicode-range U+0030-0039) của Bricolage Grotesque, đứng đầu --f-chu, --f-tieu-de,
   --f-may; trục độ đậm theo chữ quanh nó. Không chứa dấu cách nên không phải "phông đầu tiên" của dòng: chiều cao
   dòng vẫn tính theo Hubot. Lưu ý: đơn vị ch (bề rộng số 0) nay đo theo số 0 Bricolage, hẹp hơn số 0 Hubot 8 tới 15%; bề rộng
   đoạn chữ ghi bằng em, không bằng ch. Chữ số Bricolage thấp hơn chữ hoa Hubot 7,7% (đo 15/10); giữ nguyên cỡ như bản mẫu
   Quỳnh đã xem (thử size-adjust 108% thì số cao bằng chữ hoa nhưng rộng hơn số Hubot 1 tới 2% ở cỡ chữ thân, trang đơn 360px
   xô 0,045 tới 0,16 khi phông tới muộn, nên chưa dùng).
   Tệp cắt bằng fontTools (16/10, lệnh ở docs/thiet-ke/v2-phong-mau.md mục 2.1), nét chữ đúng bản gốc: ChuSo chỉ 10 chữ số (6,5 KB
   thay 204,6 KB; giữ trục wght 200..800 và opsz 12..96, giữ tnum cho số đều và kern); CauNhan chỉ 53 ký tự của câu cảm hứng
   trang bán, họ "Bricolage Grotesque" của --f-nhan (12,9 KB, cùng trục). Cả hai ghim wdth 100 vì không trang nào dùng
   font-stretch. Đổi chữ câu cảm hứng thì cắt lại CauNhan (phép thử phong-mau báo ký tự thiếu). Tên tệp mang 8 ký tự đầu sha256
   của chính tệp: cắt lại thì tên đổi, bộ nhớ đệm một năm không giữ bản cũ. Bản gốc BricolageGrotesque-Variable.woff2 nằm lại
   /fonts làm nguồn cắt (bản mẫu trong docs/ trỏ tới nó), không trang nào tải. Bricolage OFL không có tên dành riêng nên được
   cắt và giữ tên, giấy phép kèm theo. Không cắt gọn Hubot: giấy phép OFL giữ tên "Hubot" cho bản gốc, bản đã sửa phải đổi tên. */
@font-face { font-family: "So BDHV"; src: url("/fonts/BricolageGrotesque-ChuSo-0b35003a.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "Hubot Sans"; src: url("/fonts/HubotSans-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("/fonts/HubotSans-Medium.woff2") format("woff2"); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("/fonts/HubotSans-SemiBold.woff2") format("woff2"); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: "Hubot Sans"; src: url("/fonts/HubotSans-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-CauNhan-da1ba88f.woff2") format("woff2"); font-style: normal; font-weight: 200 800; font-display: swap; }

/* Phông dự phòng đo khớp (thay hai họ dự phòng của bộ phông cũ): trong lúc Hubot Sans chưa tới, chữ hiện bằng
   Arial/Helvetica của máy, co giãn cho bằng bề rộng và thước dọc của Hubot nên dòng ngắt như cũ và chiều cao dòng không đổi.
   Đo 15/10 trên 391 câu thật của trang bán, trang chờ, chính sách, cổng học, Ban Liên Lạc (Chrome, canvas, cỡ 100px):
   Hubot so với Arial bằng 98,8% ở 400, 101,9% ở 500 (Arial thường); 98,2% ở 600, 101,1% ở 700 (Arial đậm). Thước dọc Hubot:
   ascent 1,09, descent 0,32, line gap 0 (Arial 0,905 / 0,212 / 0,033); các số override dưới đây đã chia cho size-adjust.
   Chỉnh lần hai (15/10 tối, đếm khối chữ đổi số dòng ở 9 trang, 71 khổ 320 tới 1440, trong 1,5 màn đầu): 400 hạ còn 97,8%
   (số trung bình 98,8% làm đoạn mô tả màn đầu trang bán thêm một dòng ở mọi khổ từ 544px, CLS 0,195 ở 768px khi phông tới
   trễ 1,5 giây); 97,8% bớt khối lệch từ 274 xuống 239 và cách xa vách 98,2% (lệch tăng vọt lên 401). 500, 600, 700 thử
   ±1,5% không đổi kết quả nên giữ số đo. Cách đo: docs/thiet-ke/v2-phong-mau.md mục 3.
   Máy không có Arial/Helvetica (nhiều máy Android) thì bỏ qua các mặt này, dùng phông hệ thống. Không tải gì thêm. */
@font-face { font-family: "Hubot du phong"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 1 450; size-adjust: 97.8%; ascent-override: 111.5%; descent-override: 32.7%; line-gap-override: 0%; }
@font-face { font-family: "Hubot du phong"; src: local("Arial"), local("ArialMT"), local("Helvetica"); font-weight: 451 550; size-adjust: 101.9%; ascent-override: 107%; descent-override: 31.4%; line-gap-override: 0%; }
@font-face { font-family: "Hubot du phong"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 551 650; size-adjust: 98.2%; ascent-override: 111%; descent-override: 32.6%; line-gap-override: 0%; }
@font-face { font-family: "Hubot du phong"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"); font-weight: 651 1000; size-adjust: 101.1%; ascent-override: 107.8%; descent-override: 31.7%; line-gap-override: 0%; }

:root {
  /* Bảng màu D51 (tông trang Quốc khánh, Quỳnh chọn bản A 15/10; THẮNG D50, D47 phần màu, V2 8.2). Tên biến cũ giữ nguyên,
     chỉ đổi giá trị; biến MỚI đánh dấu. Bảng đủ, số tương phản, giá trị cũ để quay về: docs/thiet-ke/v2-phong-mau.md. */
  /* Giấy */
  --giay: #FBF8E6;        /* giấy kem: nền chính; chữ trên nền nâu */
  --kem: #FBF8E6;         /* cùng --giay (tên của gói 10/10) */
  --giay-sang: #FFFCF1;   /* tờ đặt lên trang: phiếu, thẻ, hộp tự rà soát, ô nhập */
  --giay-da: #EFE7CF;     /* MỚI: giấy da, mảng giấy cũ xen giữa */
  --giay-cu: #EEE0B5;     /* MỚI: giấy cũ đậm. Trên nền này chữ đỏ dùng --do, không dùng --son */
  --chuyen-tren: #EFE5C7; /* MỚI: đầu dải chuyển nền */
  --chuyen-duoi: #F9F6E9; /* MỚI: cuối dải chuyển nền */
  --chuyen-sang: #F7F2DE; /* MỚI (D56): đầu dải chuyển màn đầu trang bán, sáng hơn --chuyen-tren cho ra lời hiệu triệu */
  /* Mực nâu sepia */
  --muc: #33281D;         /* chữ chính trên giấy (13,45:1); nền tối của đầu trang, chân trang, dòng biên niên */
  --xanh-sau: #33281D;    /* tên cũ của khoảng chuyển tối, nay trỏ nâu sepia (giữ tên để mã không vỡ) */
  --nau-sau: #281F16;     /* MỚI: dải trục giữa dòng biên niên, tối hơn nền nâu một bậc */
  --muc-2: #574C3F;       /* nâu trung: đoạn dẫn, chữ phụ đậm (7,83:1 trên kem) */
  --chu-phu: #59544D;     /* chữ phụ, chú thích, đơn vị (7,03:1 trên kem, 6,07 trên giấy da) */
  --muc-nhat: #938167;    /* CHỈ chữ trang trí từ 24px đậm (3,53:1 trên kem) */
  --nau-nhat: #B39E7C;    /* MỚI: viền chấm chặng CHƯA tới trên nền nâu (5,54:1) */
  --kem-mo: #CDBFA2;      /* chữ phụ trên nền nâu (7,91:1) */
  --yen-mach: #CDBFA2;    /* tên cũ, cùng --kem-mo */
  /* Đỏ son */
  --son: #C05543;         /* MỚI: đỏ son đất, D56: CHỈ trên dải nâu (số chặng, chấm, đoạn trục; 3,16:1 trên nâu, cho chữ lớn) */
  --do: #9E3B2C;          /* đỏ son đậm: MỌI chữ đỏ dưới 24px, nhãn, liên kết (6,31:1 trên kem, 5,46 giấy da) */
  --son-toi: #E8836E;     /* MỚI: chữ đỏ son trên nền nâu (5,41:1) */
  --do-tuoi: #C73824;     /* MỚI: đỏ tươi, D56: chữ LỚN trên giấy kem (H1, tuyên ngôn, giá, lời hiệu triệu; 4,89:1 trên kem) */
  --moc: #C73824;         /* mực dấu mộc (đỏ tươi, trang trí; 4,89:1 trên kem) */
  --nau-do: #65312E;      /* MỚI: H2 và chữ nhấn nhỏ trên giấy (9,68:1) */
  --dong: #9E3B2C;        /* liên kết và nút viền trên giấy (cùng --do) */
  --canh-bao: #9E3B2C;    /* báo lỗi (kèm viền 2px hoặc chữ đậm để không chỉ khác bằng màu) */
  --loi-nen: #FBEDE4;     /* nền ô lỗi (chữ đỏ trên nó 5,88:1) */
  --nen-o: #FFFDF7;       /* nền ô nhập */
  /* Vàng nghệ, vàng rơm */
  --nghe: #C9783A;        /* MỚI: mảng minh họa, không cho chữ */
  --cam-dat: #B6662C;     /* MỚI: mảng minh họa, không cho chữ */
  --rom: #E0C381;         /* MỚI: vàng rơm: tia cổ động; nhãn trên nền nâu (8,41:1) */
  --lua: #E0C381;         /* liên kết, điểm nhấn, vòng tiêu điểm TRÊN NỀN NÂU (cùng --rom). Không phải màu nút */
  --vang: #E0C381;        /* cùng --lua. Trên giấy chỉ 1,5:1: không dùng cho chữ trên giấy */
  --vang-muc: #D6B16E;    /* viền vàng: đường kẻ, trục trên NỀN NÂU (7,10:1). Trên giấy 1,9:1: không cho chữ */
  --chu-vang: #CCA783;    /* MỚI: chữ vàng nâu trên nền nâu (6,44:1) */

  /* Bộ ba số RGB để pha độ trong suốt: rgba(var(--muc-rgb), .16). Đổi màu thì đổi cả bộ ba tương ứng (phép thử canh). */
  --muc-rgb: 51, 40, 29;
  --kem-rgb: 251, 248, 230;
  --sang-rgb: 255, 252, 241;
  --do-rgb: 158, 59, 44;
  --son-rgb: 192, 85, 67;
  --vang-rgb: 224, 195, 129;
  --rom-rgb: 224, 195, 129;
  --vang-muc-rgb: 214, 177, 110;

  /* Nút chính: đỏ tươi (D56, bỏ #B84F3E của D51), chữ kem 4,89:1; rê chuột đỏ son đậm (6,31:1). Tắt: giấy sẫm, chữ phụ 5,40:1. */
  --nut-nen: #C73824;
  --nut-chu: #FBF8E6;
  --nut-nen-hover: #9E3B2C;
  --nut-tat-nen: #E4DAC2;
  --nut-tat-chu: #59544D;
  --nut-vien-toi: rgba(var(--kem-rgb), .62); /* viền nút đỏ trên nền nâu: đỏ trên nâu chỉ 2,75:1, viền này 6,13:1 */

  /* Vòng tiêu điểm: đỏ son đậm trên giấy (6,31:1), vàng rơm trên nền nâu (8,41:1) */
  --vong: #9E3B2C;
  --vong-toi: #E0C381;

  --vien: rgba(var(--muc-rgb), .16);
  --vien-dam: rgba(var(--muc-rgb), .32);  /* đường kẻ trang trí, khung thẻ (1,9:1 trên kem: không dùng làm mép ô nhập) */
  --vien-o: rgba(var(--muc-rgb), .62);    /* mép ô nhập: 4,15:1 trên kem, 4,21:1 trên nền ô (WCAG 1.4.11 cần 3:1) */
  --vien-toi: rgba(var(--vang-muc-rgb), .45); /* đường kẻ trên nền nâu */

  /* Chữ. Chữ số 0 tới 9 lấy từ Bricolage Grotesque (họ "So BDHV", unicode-range) vì số 0 của Hubot Sans có gạch giữa;
     chữ còn lại vẫn Hubot. "So BDHV" đứng đầu cả phông đơn cách (--f-may) vì số 0 của SF Mono, Menlo, Consolas cũng có gạch. */
  --f-chu: "So BDHV", "Hubot Sans", "Hubot du phong", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-tieu-de: "So BDHV", "Hubot Sans", "Hubot du phong", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-nhan: "Bricolage Grotesque", "Hubot Sans", "Hubot du phong", system-ui, sans-serif;
  --f-may: "So BDHV", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --c-nho: .8125rem;
  --c-phu: .9375rem;
  --c-than: 1rem;
  --c-dan: 1.125rem;
  --c-h3: 1.25rem;
  --c-h2: clamp(1.625rem, 1.05rem + 2.6vw, 2.5rem);
  --c-h1: clamp(2.25rem, 1.2rem + 5vw, 4.25rem);

  /* Khoảng cách, kích thước */
  --k1: 4px; --k2: 8px; --k3: 12px; --k4: 16px; --k5: 24px; --k6: 32px; --k7: 48px; --k8: 64px; --k9: 96px;
  --le: 16px;
  --tap: 48px;
  --bo: 4px;
  --rong: 1120px;
  --doc: 42rem;

  /* Thớ giấy và vết mực, vẽ bằng SVG nhúng, không tải ảnh, không bao giờ chuyển động. Hạt giấy pha nâu sepia #33281D
     (0,2 0,157 0,114), độ đậm hạ còn .34 -.14 để nhãn đỏ 13px giữ 4,5:1 ở chỗ thớ đậm nhất; hạt tối pha kem #FBF8E6
     (0,984 0,973 0,902), .26 -.11. Vết mực là mặt nạ (chỉ dùng kênh trong suốt) nên không mang màu. Số đo: v2-phong-mau.md. */
  --hat-giay: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .157 0 0 0 0 .114 0 0 0 .34 -.14'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --hat-toi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .984 0 0 0 0 .973 0 0 0 0 .902 0 0 0 .26 -.11'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --vet-muc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.6'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23m)'/%3E%3C/svg%3E");
}

@media (min-width: 700px) { :root { --le: 24px; } }
@media (min-width: 1100px) { :root { --le: 32px; } }

/* Nền tảng */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-chu);
  font-size: var(--c-than);
  line-height: 1.6;
  color: var(--muc);
  background-color: var(--giay);
  background-image: var(--hat-giay), radial-gradient(120% 60% at 15% 0%, rgba(var(--vang-muc-rgb), .08), transparent 70%);
  background-size: 180px 180px, 100% 100%;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* Nút, ô nhập, hộp chọn mặc định của trình duyệt dùng phông hệ thống: kéo về Hubot (V2 15.3: form, hộp thoại cùng hệ phông).
   Chỉ đổi họ phông, không đổi cỡ; lớp nào tự đặt font thì lớp đó thắng. */
button, input, select, textarea, optgroup { font-family: inherit; }
h1, h2, h3 { font-family: var(--f-tieu-de); font-weight: 700; line-height: 1.15; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--k4); text-wrap: pretty; }
a { color: var(--dong); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--vong); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--lua); color: var(--muc); }
[hidden] { display: none !important; }
.an-di { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Liên kết "Bỏ qua tới nội dung": hiện khi nhận tiêu điểm bàn phím */
a.an-di:focus { position: fixed !important; left: 12px; top: 12px; z-index: 100; width: auto; height: auto; clip: auto; overflow: visible; display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px; background: var(--lua); color: var(--muc); font-weight: 700; border: 2px solid var(--muc); border-radius: var(--bo); }

/* Khung và nhịp */
.khung { width: 100%; max-width: var(--rong); margin: 0 auto; padding-left: var(--le); padding-right: var(--le); }
.doan { padding: var(--k8) 0; }
@media (min-width: 900px) { .doan { padding: var(--k9) 0; } }
.doc { max-width: var(--doc); }
.dau-doan { max-width: var(--doc); margin-bottom: var(--k6); }
.dau-doan h2 { font-size: var(--c-h2); margin: var(--k3) 0 var(--k4); }
.dau-doan p { font-size: var(--c-dan); color: var(--muc-2); }

/* Nhãn điện tín: chữ máy, hoa, tối đa 4 từ */
.nhan {
  font-family: var(--f-may);
  font-weight: 500;
  font-size: var(--c-nho);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muc-2);
  margin: 0;
}
.so { font-family: var(--f-may); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.nho { font-size: var(--c-phu); color: var(--muc-2); }

/* Nền tối (màn đầu, thanh trên, chân trang) */
.nen-toi {
  background-color: var(--muc);
  background-image: var(--hat-toi);
  background-size: 180px 180px;
  color: var(--giay);
}
.nen-toi .nhan, .nen-toi .nho { color: var(--yen-mach); }
.nen-toi a { color: var(--lua); }
.nen-toi :focus-visible { outline-color: var(--vong-toi); }

/* Nút. Nút chính đỏ tươi (D56): đủ trạng thái thường, rê chuột (đỏ son đậm), nhấn, tiêu điểm bàn phím (vòng đỏ trên giấy,
   vòng vàng rơm trên nền nâu, cách nút 3px nên thấy rõ cả trên nút đỏ), tắt (nền giấy sẫm, chữ phụ đọc được, không mờ đục),
   đang xử lý (aria-busy="true": vòng quay nhỏ trước chữ, giữ màu đỏ thẫm dù nút đang tắt; giảm chuyển động thì vòng đứng yên).
   Trang dùng hệ nút riêng (.btn của hoc.css, trang-cho.css, trang bán) cũng nhận vòng quay đang xử lý ở cuối khối này. */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k2);
  min-height: var(--tap);
  padding: 0 22px;
  font: 600 var(--c-than)/1.2 var(--f-chu);
  letter-spacing: .005em;
  border: 1.5px solid transparent;
  border-radius: var(--bo);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.nut:active { transform: translateY(1px); }
.nut-chinh { background: var(--nut-nen); color: var(--nut-chu); }
.nut-chinh:hover { background: var(--nut-nen-hover); color: var(--nut-chu); text-decoration: none; }
.nen-toi .nut-chinh, .thanh-day .nut-chinh { background: var(--nut-nen); color: var(--nut-chu); border-color: var(--nut-vien-toi); }
.nen-toi .nut-chinh:hover, .thanh-day .nut-chinh:hover { background: var(--nut-nen-hover); color: var(--nut-chu); border-color: var(--nut-chu); }
.nut-vien { background: transparent; color: var(--muc); border-color: var(--vien-dam); }
.nut-vien:hover { border-color: var(--muc); text-decoration: none; }
.nen-toi .nut-vien { color: var(--giay); border-color: rgba(var(--kem-rgb), .45); } /* 3,97:1 trên nâu; --vien-toi chỉ 2,4:1 */
.nen-toi .nut-vien:hover { border-color: var(--giay); }
.nut-rong { width: 100%; }
.nut-nho { min-height: 40px; padding: 0 14px; font-size: var(--c-phu); }
.nut:disabled, .nut[aria-disabled="true"] { cursor: not-allowed; transform: none; }
.nut-chinh:disabled, .nut-chinh[aria-disabled="true"], .nut-chinh:disabled:hover { background: var(--nut-tat-nen); color: var(--nut-tat-chu); border-color: var(--vien-dam); }
.nen-toi .nut-chinh:disabled, .nen-toi .nut-chinh[aria-disabled="true"], .thanh-day .nut-chinh:disabled { background: rgba(var(--kem-rgb), .14); color: var(--kem-mo); border-color: var(--vien-toi); }
.nut-vien:disabled, .nut-vien[aria-disabled="true"] { color: var(--chu-phu); border-style: dashed; }
.nen-toi .nut-vien:disabled { color: var(--kem-mo); }
/* Đang xử lý: JS đặt aria-busy="true" (thường kèm disabled) trong lúc chờ máy chủ */
:is(.nut, .btn)[aria-busy="true"] { cursor: progress; }
:is(.nut, .btn)[aria-busy="true"]::before {
  content: ""; flex: 0 0 auto; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: nut-quay .75s linear infinite;
}
.nut-chinh[aria-busy="true"], .nut-chinh[aria-busy="true"]:disabled { background: var(--nut-nen-hover); color: var(--nut-chu); border-color: transparent; }
@keyframes nut-quay { to { transform: rotate(1turn); } }

/* Ô nhập */
.truong { margin-bottom: 18px; }
.truong label, .nhan-o { display: block; font-weight: 700; font-size: var(--c-phu); margin-bottom: 6px; }
.tuy-chon { font-weight: 400; color: var(--muc-2); }
.o-nhap {
  display: block; width: 100%;
  min-height: var(--tap);
  padding: 11px 14px;
  font: 400 1rem/1.4 var(--f-chu); /* 16px để iOS không tự phóng */
  color: var(--muc);
  background: rgba(var(--muc-rgb), .035);
  border: 1px solid var(--vien-o);
  border-radius: var(--bo);
  appearance: none; -webkit-appearance: none;
}
.o-nhap::placeholder { color: var(--chu-phu); opacity: 1; } /* 6,60:1 trên ô nhập; bản cũ mực phụ mờ 55% chỉ 3,4:1 */
.o-nhap:focus { outline: 3px solid var(--vong); outline-offset: 1px; border-color: var(--vong); }
select.o-nhap {
  background-image: linear-gradient(45deg, transparent 50%, var(--muc) 50%), linear-gradient(135deg, var(--muc) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px;
}
.o-nhap[aria-invalid="true"] { border-color: var(--canh-bao); border-width: 2px; }
.goi-y { font-size: .875rem; color: var(--muc-2); margin: 6px 0 0; }
.loi-o { font-size: .9375rem; font-weight: 700; color: var(--canh-bao); margin: 6px 0 0; }
.o-tick { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--c-phu); line-height: 1.5; cursor: pointer; }
.o-tick input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--dong); cursor: pointer; }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bao-loi {
  border-left: 3px solid var(--canh-bao);
  padding: 10px 14px;
  font-weight: 700; color: var(--canh-bao);
  background: rgba(var(--do-rgb), .07);
  margin: 0 0 var(--k4);
}

/* Thẻ giấy (phiếu, biên nhận) */
.the { border: 1px solid var(--vien); border-radius: var(--bo); padding: var(--k5); }
.to-giay {
  background-color: var(--giay);
  background-image: var(--hat-giay);
  background-size: 180px 180px;
  border: 1px solid var(--vien-dam);
  border-radius: 2px;
  box-shadow: 0 1px 0 var(--vien), 0 18px 36px -24px rgba(var(--muc-rgb), .55);
}
.nen-toi .the { border-color: var(--vien-toi); background: var(--muc-2); }

/* Dấu mộc: con dấu văn thư chữ nhật, một màu đỏ mộc, vết mực không đều */
.dau-moc {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7px 14px 6px;
  color: var(--moc);
  border: 2.5px solid currentColor;
  box-shadow: inset 0 0 0 2px var(--giay), inset 0 0 0 3.5px currentColor;
  border-radius: 3px;
  font: 700 .875rem/1.15 var(--f-chu);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-5deg);
  -webkit-mask-image: var(--vet-muc); mask-image: var(--vet-muc);
  -webkit-mask-size: 140px 140px; mask-size: 140px 140px;
  user-select: none;
}
.dau-moc small { display: block; font: 500 .6875rem/1.3 var(--f-may); letter-spacing: .08em; margin-top: 3px; }
.dau-moc-lon { font-size: 1.5rem; padding: 12px 22px 10px; border-width: 3.5px; box-shadow: inset 0 0 0 3px var(--giay), inset 0 0 0 5px currentColor; }
.dau-moc-lon small { font-size: .8125rem; }
.dong-dau { animation: dong-dau .42s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes dong-dau {
  0% { opacity: 0; transform: rotate(-5deg) scale(1.6); }
  60% { opacity: 1; transform: rotate(-5deg) scale(.96); }
  100% { opacity: 1; transform: rotate(-5deg) scale(1); }
}

/* Chỗ chờ ảnh thật (không dựng ảnh giả) */
.cho-anh {
  display: grid; place-items: center;
  padding: var(--k4);
  border: 1.5px dashed var(--vien-dam);
  border-radius: var(--bo);
  font: 500 var(--c-nho)/1.5 var(--f-may);
  color: var(--muc-2);
  text-align: center;
  background: rgba(var(--muc-rgb), .03);
}
.cho-dien { color: inherit; border-bottom: 1.5px dashed var(--cam-dat); } /* cam đất 3,99:1 trên kem (vàng viền D51 chỉ 1,9:1, gần như không thấy) */

/* Thanh trên */
.thanh-tren { position: relative; z-index: 10; }
.thanh-tren .khung { display: flex; align-items: center; justify-content: space-between; gap: var(--k4); min-height: 60px; }
.chu-hieu { display: inline-flex; flex-direction: column; justify-content: center; min-height: var(--tap); text-decoration: none; color: var(--giay); line-height: 1.1; }
.chu-hieu b { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.chu-hieu span { font: 500 .6875rem/1.4 var(--f-may); letter-spacing: .12em; text-transform: uppercase; color: var(--yen-mach); margin-top: 3px; }
.nen-toi .chu-hieu, .nen-toi .chu-hieu:hover { color: var(--giay); text-decoration: none; }
.lk-dang-nhap { display: inline-flex; align-items: center; min-height: 48px; padding: 0 4px; font-size: var(--c-phu); font-weight: 700; }

/* Hỏi đáp */
.hoi-dap { max-width: var(--doc); border-top: 1.5px solid var(--muc); }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary {
  list-style: none; cursor: pointer; position: relative;
  min-height: var(--tap); padding: 15px 44px 15px 0;
  font-weight: 700; font-size: 1.0625rem; line-height: 1.4;
}
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font: 500 1.5rem/1 var(--f-may); color: var(--dong); }
.hoi-dap details[open] summary::after { content: "\2212"; }
.hoi-dap details > div { padding: 0 0 18px; max-width: 41.2em; } /* 62ch cũ đo theo số 0 của Hubot; ch nay theo số 0 Bricolage (D51) */
.hoi-dap details > div p:last-child { margin-bottom: 0; }

/* Thanh dính đáy: đồng ý đo lường và nút mua trên điện thoại. Không che nội dung: body được đệm đáy bằng đúng chiều cao. */
.thanh-day { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; }
.thanh-day > div { background: var(--muc); color: var(--giay); border-top: 1px solid var(--vien-toi); }
.thanh-day .khung { display: flex; align-items: center; gap: var(--k3); padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* Thanh đồng ý đo lường theo bản vẽ (khối .dyl): giấy kem, viền mực, hai nút viền ngang nhau (không nút nào nổi hơn) */
.thanh-day > .thanh-dong-y { background: var(--kem); color: var(--muc); border-top: 2px solid var(--muc); }
.thanh-dong-y .khung { flex-wrap: wrap; justify-content: space-between; padding-top: 12px; }
.thanh-dong-y p { margin: 0; font-size: .875rem; line-height: 1.45; flex: 1 1 260px; color: var(--muc); }
.thanh-dong-y a { color: var(--do); font-weight: 700; }
.thanh-dong-y .hang { display: flex; gap: var(--k2); flex: 0 0 auto; }
.thanh-dong-y .nut { min-height: var(--tap); min-width: 120px; padding: 0 16px; font-size: .875rem; color: var(--muc); background: transparent; border: 2px solid var(--muc); }
.thanh-dong-y .nut:hover { background: var(--giay-sang); }
.thanh-dong-y .nut:focus-visible { outline: 3px solid var(--vang); outline-offset: 2px; box-shadow: 0 0 0 5px var(--muc); }
.thanh-mua .khung { justify-content: space-between; }
.thanh-mua .gia-day { display: flex; flex-direction: column; line-height: 1.25; }
.thanh-mua .gia-day .so { font-size: 1.125rem; color: var(--giay); }
.thanh-mua .gia-day small { font-size: .75rem; color: var(--yen-mach); }
.thanh-mua .nut { min-height: 46px; }
@media (min-width: 900px) { .thanh-mua { display: none !important; } }

/* Chân trang pháp nhân dùng chung (chan-trang.js vẽ), theo bản vẽ (khối .ft) */
.chan-trang { padding: var(--k7) 0 var(--k6); font-size: .875rem; line-height: 1.6; min-height: 320px; color: var(--kem-mo); }
.chan-trang .luoi { display: grid; gap: 28px; }
@media (min-width: 760px) { .chan-trang .luoi { grid-template-columns: 1.4fr 1fr; } }
@media (min-width: 960px) { .chan-trang .luoi { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--k6); } }
.chan-trang h2 { font: 700 .875rem/1.4 var(--f-chu); letter-spacing: 0; text-transform: none; color: var(--kem); margin: 0 0 10px; }
.chan-trang ul { list-style: none; margin: 0; padding: 0; }
.chan-trang li a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--kem); text-decoration: underline; text-decoration-color: rgba(var(--kem-rgb), .35); text-underline-offset: 4px; }
.chan-trang li a:hover { color: var(--vang); text-decoration-color: currentColor; }
/* Mọi chỗ nhắc Ban Liên Lạc phải có câu chuẩn (D38 mục 5), kể cả dòng link ở chân trang */
.chan-trang .ghi-bll { display: block; font-size: .8125rem; line-height: 1.45; color: var(--kem-mo); margin: -6px 0 4px; }
.chan-trang .phap-nhan p { margin: 0 0 6px; color: var(--kem-mo); }
.chan-trang .phap-nhan strong { color: var(--kem); }
/* .phap-nhan .ten-trang: luật ".phap-nhan p" (chữ phụ) từng thắng vì độ ưu tiên cao hơn, tên chương trình ra màu chữ phụ */
.chan-trang .ten-trang, .chan-trang .phap-nhan .ten-trang { font: 700 1.3125rem/1.15 var(--f-tieu-de); color: var(--kem); margin: 0 0 4px; }
.chan-trang .ten-trang + p { margin-bottom: 16px; }
/* "Một chương trình của" + logo ĐTV gốc (chữ trắng, nền trong suốt) đặt thẳng trên nền nâu, cao 24px, giữ tỷ lệ 400:64 */
.chan-trang .cua-dtv { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.chan-trang .logo-dtv { display: block; height: 24px; width: auto; aspect-ratio: 692 / 110; } /* dtv-logo.svg gốc 692x110 */
.chan-trang .mien { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(var(--kem-rgb), .2); color: var(--kem-mo); }
.chan-trang .mien p { margin: 0 0 6px; }
.chan-trang .nguon-khoi, .chan-trang .nguon-khoi p { font-size: .75rem; font-style: italic; line-height: 1.5; color: var(--kem-mo); }
.chan-trang .nguon-khoi h2 { font-size: .75rem; font-style: italic; font-weight: 600; color: var(--kem-mo); margin: 0 0 4px; }
/* Điện thoại: đoạn nguồn số liệu dài 139 ký tự ở 12px nghiêng khó đọc (soát 15/10); lên 13,5px */
@media (max-width: 759px) { .chan-trang .nguon-khoi, .chan-trang .nguon-khoi p, .chan-trang .nguon-khoi h2 { font-size: .84375rem; } }
.chan-trang .bieu-tuong-tb { margin-top: 20px; }
.chan-trang .bieu-tuong-tb img { width: 160px; height: auto; }
.chan-trang :focus-visible { outline: 3px solid var(--vong-toi); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}