/* NGUYÊN TẮC TRÌNH BÀY N1–N5 (chủ chốt 24/10/2026; docs/CHUAN-GIAO-DIEN.md §20) — lớp sửa GỐC dùng chung.
   Nạp sau mọi tệp v3, trước các tệp mobile. Mỗi quy tắc ghi rõ nguyên tắc; ui-audit.js kiểm (mix-size, left-edge, gap-wide, center-misuse, top-align, icon-align).
   Khác demo (đã ghi docs/thiet-ke-trang-chu-v3/KHAC-DEMO.json): chủ yêu cầu N1–N5. */

/* N1/tương phản: chữ phụ không nhạt hơn ink-500 theo §13c; ink-400 dùng cho chữ chỉ còn ~3,4:1 (trước 2,6:1) */
:root, body.home-v2 { --ds-ink-400: #80879a; }

/* N1 — chân trang: ≤ 3 cỡ chữ mỗi khối (banner 20/17/12 · about 17/13/12 · từ khoá 12) */
.v3f-bns .tx > b em, .v3f-bns .bn2 .tx > b em, .v3f-bns .bn3 .tx > b em { font-size: var(--ds-fs-20); }
.v3f-bns .tx small, .v3f-bns .eb { font-size: var(--ds-fs-12); }
.v3f .kws a { font-size: var(--ds-fs-12); }
.v3f .about .l1, .v3f .about span:not([class]) { font-size: var(--ds-fs-12); }

/* N1 — hộp bên "Nha khoa đồng hành" (tài trợ): tiêu đề hộp 16/700, tên mục 14/700 (không 15 vs 14 cùng đậm) */
.pb.pq-b header h2, .pb.pq-b > header > h2 { font-size: var(--t-box, 16px); font-weight: var(--fw-bold, 700); }

/* N5 — hàng [ảnh/logo + chữ nhiều dòng][nút] canh theo mép TRÊN */
.pq .pq-row, .pq .pq-main { align-items: flex-start; }

/* N1 — chân trang: ≤ 3 độ đậm (800 · 600 · 400) */
.v3f-bns .lk a, .v3f .about .ct a { font-weight: var(--ds-fw-400); }
.v3f .about .l1 { font-weight: var(--ds-fw-400); }
.v3f .about .ct b { font-weight: var(--ds-fw-600); }

/* N5 — thẻ việc làm / ứng viên: logo/avatar + khối chữ nhiều dòng canh mép TRÊN, không canh giữa dọc */
.v3-card.v3-jb, .v3-rs { align-items: flex-start; }
.v3-jb .emp { font-weight: var(--ds-fw-400); }

/* N1 — thẻ nha khoa: nhãn/giờ mở/“Từ” cùng cỡ 12 với dòng meta (không 11 chen 12) */
.v3-place .v3-open, .v3-place .v3-from, .v3-place .v3-mau, .dm-fc .fr { font-size: var(--ds-fs-12); }
.dm-fc .fr + b, .dm-fc .pr b { font-size: var(--ds-fs-14); }
.nha-si .dc .work, .dc .work { font-size: var(--ds-fs-12); }

/* N1/N5 — thẻ tuyển dụng (/tuyen-dung) */
.td3-job { align-items: flex-start; }
.td3-job small, .td3-job .v3-mau { font-size: var(--ds-fs-12); }
/* N1 — vé voucher: số tiền nổi 26 · tên 14 · meta 12 (không 11 chen 12) */
.tk small, .tk b { font-size: var(--ds-fs-12); }

/* N3/N5 — ghi chú có icon (.jnote): nhiều dòng thì icon căn theo DÒNG ĐẦU */
.jnote { align-items: flex-start; }
.jnote > i { margin-top: 2px; }
/* N1 — thẻ bài viết hồ sơ (.ppc) và thẻ E-Voucher: meta cùng 12, không 11 chen 12 */
.ppc-b em, .ppc-cat { font-size: var(--ds-fs-12); }
.v3-ev small, .v3-ev s, .v3-ev .hsd, .v3-ev > * span:not(.pc) { font-size: var(--ds-fs-12); }
body .v3-ev small, body .v3-ev .v3-ev-sub { font-size: var(--ds-fs-12); }
.dm-lay .v3-ev .info small, .dm-lay .v3-ev .row { font-size: var(--ds-fs-12); }
.lb3-ph-note, .lb3-note, .lb3-km { font-size: var(--ds-fs-12); }
/* N1 — danh sách tin tức (.nrow): 16 tên · 14 tóm tắt · 12 meta/chuyên mục */
.nrow .cat { font-size: var(--ds-fs-12); }
.nrow p { font-size: var(--ds-fs-14); }

/* N4 — thẻ nha sĩ dạng lưới dọc (điện thoại): chữ canh TRÁI (không canh giữa khối nhiều dòng) */
.ns3 .dgrid .dc { align-items: flex-start; text-align: left; }
.ns3 .dgrid .dc .dav { margin-left: 0; }

/* N3 — .jnote: icon + chữ luôn CÙNG HÀNG (trước: flex-wrap đẩy chữ xuống dưới icon) */
.jnote { flex-wrap: nowrap; }
.jnote > span { flex: 1 1 0; min-width: 0; }
/* N3/N5 — số liệu "Về chúng tôi": icon căn theo dòng đầu (số lớn), khối canh mép trên */
.ab-stats > div { align-items: flex-start; }
.ab-stats i { line-height: 27px; }
/* N5 — danh sách "gần đây/liên quan" (.near .it): logo + chữ nhiều dòng canh mép trên */
.near .it { align-items: flex-start; }

/* Lỗi cứng /ung-vien (≤ 768): lưới thẻ ứng viên bị luật dải ngang của trang chủ biến thành 5 cột hẹp, chữ đè nhau → xếp dọc 1 cột */
@media (max-width: 860px) {
  body.home-v2 .v3-cgrid { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .v3-cgrid .v3-cand { grid-template-columns: 42px minmax(0, 1fr); }
  .v3-cgrid .v3-cand .ex { grid-column: 2; justify-items: start; grid-auto-flow: column; justify-content: space-between; align-items: end; gap: 8px; }
}

/* N1 — thẻ nổi bật danh mục (.dm-fc): tên 14 · giá 14 · meta/ưu đãi 12 (trước 14/13/12/11) */
body .dm-fc .fr b { font-size: var(--ds-fs-14); }
body .dm-fc .dl, body .dm-fc .dl span { font-size: var(--ds-fs-12); }
/* N1 — vé voucher (.tk): số tiền 26 · tên 14 · meta 12 */
body .tk small, body .tk b, body .tk li { font-size: var(--ds-fs-12); }

/* Tương phản: chữ ink-4 (#a9b0bd ≈ 2:1) không dùng cho chữ đọc được → #858ea0 (≈ 3,4:1); .lockmini/.cm-ghost dùng ink-3 (4,5:1) */
:root { --ink-4: #858ea0; }
.lockmini span, .lockmini i, .cm-ghost-t { color: var(--ink-3); }

/* N3/N5 — khối đầu mục/thẻ có icon + tiêu đề + mô tả (nhiều dòng): icon căn theo dòng đầu */
body .v3f-strip .it, body .cl3-ng .it, body .cl3-near .it, .sec-hd.tt3-hd, .vc3-hd.vc3-hd-sec, .claim { align-items: flex-start; }

/* N1 — khối nha sĩ tài trợ (.v3-sp): ≤ 3 độ đậm (700 · 600 · 400) */
.v3-sp small, .v3-sp .tx, .v3-sp .pt { font-weight: var(--ds-fw-400); }
/* N1 — giá E-Voucher: 34 giá · 12 phụ; ≤ 3 độ đậm */
.ev-stub s, .ev-stub b + s, .ev-stub .ev-lab { font-size: var(--ds-fs-12); }
.ev-stub .ev-save { font-weight: var(--ds-fw-600); }

/* ===== Bản chốt (đủ độ ưu tiên thắng luật cũ; chỉ ≥ 761px — điện thoại theo thang §13d) ===== */
@media (min-width: 761px) {
  body.theme-dental .v3-ev .info small, body.theme-dental .v3-ev .info .row, body.theme-dental .v3-ev .info .hsd { font-size: var(--ds-fs-12); }
  body.theme-dental .tk small, body.theme-dental .tk b, body.theme-dental .tk li, body.theme-dental .tk .ft * { font-size: var(--ds-fs-12); }
  body.theme-dental .tt3 .nrow p { font-size: var(--ds-fs-14); }
  body.theme-dental .tt3 .nrow .cat, body.theme-dental .tt3 .nrow .by, body.theme-dental .tt3 .nrow .by * { font-size: var(--ds-fs-12); }
  body.theme-dental .v3-sp .sp, body.theme-dental .v3-sp small, body.theme-dental .v3-sp .tx, body.theme-dental .v3-sp .pt, body.theme-dental .v3-sp .nm + * { font-size: var(--ds-fs-12); }
  body.theme-dental .v3-sp .nm { font-size: var(--ds-fs-14); }
  body.theme-dental .v3-rs .m small, body.theme-dental .v3-rs .sp, body.theme-dental .v3-rs .m b + span { font-size: var(--ds-fs-12); }
}
/* N5 — hàng avatar/logo + khối chữ nhiều dòng, nhãn "ai đăng", ô tham gia: canh mép TRÊN */
body .superbox, body .lab, body .who, body .join, body .v3-cta, body .v3-us { align-items: flex-start; }

/* LỖI CỨNG (/quan-ly/nha-khoa @1024): thẻ số liệu KPI hẹp — nhãn rớt từng chữ, mũi tên xu hướng đè lên số.
   Dưới 1280px: icon | [số + nhãn] và xu hướng nằm DƯỚI chữ (không tranh ngang với số) */
@media (min-width: 761px) and (max-width: 1280px) {
  body .acct .kpi { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: start; }
  body .acct .kpi > .tr { grid-column: 2; margin-left: 0; justify-self: start; align-self: start; }
}

/* N1 — thẻ nha sĩ nhỏ (.v3-dc / .v3-sp): tên 14 · phụ 12 (số bài/câu trả lời cùng 12) · ≤ 3 độ đậm */
@media (min-width: 761px) {
  body.theme-dental .v3-dc span:not([class]), body.theme-dental .v3-sp span:not([class]), body.theme-dental .v3-dc b, body.theme-dental .v3-sp .gm b { font-size: var(--ds-fs-12); }
  body.theme-dental .v3-sp small, body.theme-dental .v3-sp .tx, body.theme-dental .v3-sp .pt { font-weight: var(--ds-fw-400); }
}

/* ============================================================================================
   ĐỢT 2 rà N1–N5 (24/10/2026) — sửa gốc theo lớp CSS thủ phạm của ui-audit
   ============================================================================================ */

/* N4 — /gioi-thieu: tiêu đề từng phần canh TRÁI, cùng lề với nội dung dưới nó (canh giữa chỉ cho hero) */
body.theme-dental .ab-center { margin-inline: 0; text-align: left; }
body.theme-dental .ab-center .ab-eye::before { display: revert; }
body.theme-dental .ab-vs-h { font-size: 16px; font-weight: var(--fw-bold, 700); }
/* N5 — hộp CTA: chữ nhiều dòng + cụm nút canh theo mép trên */
body.theme-dental .ab-cta { align-items: start; }
/* N2 — cột chữ + trích dẫn xếp dọc (≤ 980): khe 20px thay vì khoảng trống lớn */
@media (max-width: 980px) { .ab-split { gap: 20px; } body .ab-quote { position: relative; top: auto; } }

/* N4/N5 — /bang-gia: hộp giá (.sb-r) canh trái; hộp "Các bước nâng cấp" thẳng lề; dòng phương thức thanh toán canh mép trên */
body.theme-dental .superbox .sb-r { text-align: left; align-self: start; }
body.theme-dental .superbox .sb-r .tbd { justify-content: flex-start; }
body.theme-dental .superbox .sb-r .y3 { justify-items: start; text-align: left; }
body.theme-dental .pm { align-items: flex-start; }
body.theme-dental .pm .rd { margin-top: 2px; }
body.theme-dental .order > .btn { margin: 10px 14px 14px; justify-content: center; }

/* N1 — khung đặt hẹn bk3: tối đa 3 cỡ — 13 (giá trị chính, đậm, ink-900) · 12 (câu giải thích, ink-700, thường) · 11 (meta, ink-500) */
body.theme-dental .bk3-intro b, body.theme-dental .bk3-per b, body.theme-dental .bk3-offer b, body.theme-dental .bk3-offer .am, body.theme-dental .bk3-tg b, body.theme-dental .bk3-tl b, body.theme-dental .bk3-opt .pr, body.theme-dental .bk3-offers-h { font-size: var(--ds-fs-13); }
body.theme-dental .bk3-offers-h { font-weight: var(--ds-fw-600); }

/* N1 — Trung tâm trợ giúp: tên 15 · mô tả 12 · meta 12 (cùng cỡ, khác màu/đậm) */
body.theme-dental .hc-cat em { font-size: var(--ds-fs-12); }

/* N4 — vé voucher: thanh còn lại + nút trong chân vé xuống dòng riêng khi hẹp (thanh không còn bị ép về 0px, chữ thẳng lề trái) */
body.theme-dental .tk .bt { flex-wrap: wrap; }
body.theme-dental .tk .bt .bar { flex: 1 1 100%; }
body.theme-dental .tk .bt small { margin-left: 0 !important; }
body.theme-dental .tk .bt .sv { margin-left: auto; }
/* N4 — hộp "Cần hỗ trợ?" của E-Voucher: nội dung cùng lề 16 với tiêu đề */
body.theme-dental .vc3 .ev-help > .bb { padding-inline: 16px; }

/* Tương phản — nhãn "Tài trợ · Mẫu" trên banner: nền đặc ink thay vì đen 50% */
body.theme-dental .v3-bn .tag { background: var(--ds-ink-900, #14213d); }
body.theme-dental .ab-eye::before { display: none; }
/* N3/N5 — ba cam kết trong khung đặt hẹn hẹp: icon ở dòng đầu, không canh giữa khối 2 dòng */
@container (max-width: 360px) { .bk3-pledge > div { align-items: flex-start; } }
/* N1 — bảng giá: thẻ gói ≤ 3 cỡ (giá 26 · tên 16 · mô tả 13) */
body.theme-dental .plan .fit, body.theme-dental .plan small, body.theme-dental .plan .pr small { font-size: var(--ds-fs-13, 13px); }
@media (max-width: 760px) {
  body.theme-dental .hc-hero a, body.theme-dental .hc-hero b { font-size: var(--ds-fs-13, 13px); }
}

/* N5 — dòng [logo + tên nhiều dòng + nhãn] trong hộp bên, hộp liên hệ trợ giúp, hộp Super VIP, ghi chú "không thấy?" canh mép TRÊN */
body.theme-dental .pb-emp a, body.theme-dental .pb-off a, body.theme-dental .hc-contact, body.theme-dental section.superbox, body.theme-dental .newcta, body.theme-dental .hd2, body.theme-dental .v3-hd, body .who { align-items: flex-start; }

/* N1 — thẻ trên trang chủ: "Nha khoa trong bài" (14 tên · 14 giá · 12 phụ), bài cộng đồng (14 · 13 · 12), chân trang .about (800 · 600 · 400) */
body.theme-dental .cl .lbl, body.theme-dental .cl .v3-open { font-size: var(--ds-fs-12); }
body.theme-dental .v3-fixed .cl .v3-pf { font-size: var(--ds-fs-14); }
body.theme-dental .v3-post small, body.theme-dental .v3-post .v3-spon, body.theme-dental .v3-post .v3-lv, body.theme-dental .v3-post .pt { font-size: var(--ds-fs-11); }
body.theme-dental .v3-post b, body.theme-dental .v3-post span:not([class]) { font-size: var(--ds-fs-13); }
body.theme-dental .v3-post h3 { font-size: var(--ds-fs-15); }
body.theme-dental .v3-fixed .cl .lbl, body.theme-dental .v3-fixed .cl .v3-open { font-size: var(--ds-fs-12); }
body.theme-dental .about span { font-weight: var(--ds-fw-400); }

/* N1 — thẻ việc làm / rao vặt / nha khoa (điện thoại): chỉ 3 độ đậm 400 · 600 · 700 (bỏ 500 chen giữa) */
body.theme-dental .v3-jb .emp, body.theme-dental .v3-place .v3-open, body.theme-dental .v3-place .v3-from, body.theme-dental .v3-tl .v3-tag { font-weight: var(--ds-fw-400); }
body.theme-dental .v3-tl b { font-weight: var(--ds-fw-600); }
body.theme-dental .v3-jb .m small .emp, body.theme-dental .v3-place .v3-open, body.theme-dental .v3-place .v3-from, body.theme-dental .v3-tl .v3-tag { font-weight: var(--ds-fw-400); }
body.theme-dental .v3-jb .v3-sal b { font-weight: var(--ds-fw-700); }
body.theme-dental .v3-place .v3-mau, body.theme-dental .v3-tl > b, body.theme-dental .v3-tl .m > b, body.theme-dental .v3-tl b { font-weight: var(--ds-fw-600); }

/* /ung-vien (điện thoại): đầu trang xếp dọc, nút không bị cắt chữ; thanh lọc 2 cột — ô tìm trọn hàng, icon không đè chữ, vùng bấm 44 */
@media (max-width: 760px) {
  body.theme-dental .v3-hd { flex-direction: column; align-items: stretch; gap: 10px; }
  body.theme-dental .v3-hd > .t + .ds-btn { align-self: stretch; justify-content: center; }
  body.theme-dental .v3-cfilter { overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
  body.theme-dental .v3-cfilter .v3-fi { height: 44px; min-width: 0; padding: 0 12px; gap: 8px; }
  body.theme-dental .v3-cfilter .v3-fi:first-child { grid-column: 1 / -1; }
  body.theme-dental .v3-cfilter .v3-fi i { flex: none; font-size: 16px; }
  body.theme-dental .v3-cfilter .v3-fi input, body.theme-dental .v3-cfilter .v3-fi select { flex: 1 1 0; min-width: 0; width: 100%; font-size: 14px; }
  body.theme-dental .v3-cfilter > .ds-btn { grid-column: 1 / -1; height: 44px; justify-content: center; }
  body.theme-dental .v3-cfilter .v3-count { align-self: center; padding-left: 0; border-left: 0; }
}

/* N2 — trang chủ (điện thoại): hero ôm vừa nội dung. Luật tl-h của trợ lý đặt cứng chiều cao 385px + header → thừa ~100px dưới ba điểm tin cậy.
   Khối kế tiếp cách hero 16px (8 + 8). */
@media (max-width: 767px) {
  html:not(.tl-off) body.home-v2 .ds-hero:has(.tl-h) { height: auto; min-height: 0; padding-bottom: 14px; margin-bottom: 8px; }
}

/* Đợt 2 (tiếp) — N1 trọng số/cỡ */
body.theme-dental .path small { font-weight: var(--ds-fw-400); }
body.theme-dental .findhero p { font-size: var(--ds-fs-14); }
body.theme-dental .dk-hero .eyebrow { font-weight: var(--ds-fw-600); }
body.theme-dental .dk-hero .dk-kinds a.on, body.theme-dental .dk-hero a.on { font-weight: var(--ds-fw-700); }
body.theme-dental section.superbox, body.theme-dental .who { align-items: flex-start; }
body.theme-dental .v3-fixed .cl .v3-pf { font-weight: var(--ds-fw-700); }
body.theme-dental .v3-post h2 { font-size: var(--ds-fs-15); }
body.theme-dental .v3f .about span:not([class]), body.theme-dental .v3f .about span[class=""] { font-weight: var(--ds-fw-400); }
body.theme-dental .ltx-c small { font-size: var(--ds-fs-12); }
body.theme-dental .ltx-c a, body.theme-dental .ltx-c b { font-size: var(--ds-fs-13); }
body.theme-dental .nbig .cat { font-size: var(--ds-fs-12); }
body.theme-dental .v3-q .r { font-weight: var(--ds-fw-600); }
body.theme-dental .lo-pv-empty { font-size: var(--ds-fs-13); }
body.theme-dental .pb.pq-b span:not([class]) { font-size: var(--ds-fs-13); }