/* ==========================================================================
   phat-dark · NỀN — token, luật phần tử, keyframes, đèn rọi con trỏ.
   Nguồn: designs/assets/dark.css + phần cần dùng của hệ Organic
   (designs/_ds/organic-.../styles.css). Chỉ chép giá trị, không chép runtime.

   Quy ước độ ưu tiên (để thắng global styles của theme khối `:root :where(x)`
   = 0,1,0 mà vẫn để thành phần thắng luật phần tử):
     luật phần tử     .pd h1          (0,1,1)
     thành phần       .pd .pd-x       (0,2,0)
     hover liên kết   :where(.pd) a:hover (0,1,1) — thua mọi thành phần
   ========================================================================== */

:root {
  /* Organic — dải trung tính, bo góc, bóng */
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;
  --font-body: "Be Vietnam Pro", system-ui, sans-serif; /* vá vòng 3: thay Figtree (không có subset vietnamese) */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);

  /* dark.css — một sắc cam */
  --font-heading: "Bitter", Georgia, serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --o-100: #fff1e3; --o-200: #ffd9b8; --o-300: #ffbe85; --o-400: #ff9e4d;
  --o-500: #ff8a2b; --o-600: #f06a0f; --o-700: #b54b07; --o-800: #6e2c05; --o-900: #2e1103;
  --o-grad: linear-gradient(135deg, #ffa24d 0%, #ff8a2b 45%, #f06a0f 100%);
  --o-grad-flat: linear-gradient(90deg, #ff9e4d 0%, #ff8a2b 50%, #f06a0f 100%);
  --o-glow: 0 12px 34px rgba(255, 138, 43, 0.42);
  --o-glow-lg: 0 18px 48px rgba(255, 138, 43, 0.6);
  --ground: #16140f;
}

/* chuyển trang mờ dần — chỉ khi người đọc không bật giảm chuyển động */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Việc 7 B3(c): bấm liên kết mục lục #… cuộn mượt thay vì nhảy cộc — chỉ khi
   người đọc không bật giảm chuyển động (media query lo hết, khỏi cần JS). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

html { background: #16140f; }

body.pd {
  margin: 0;
  overflow-x: clip;
  background: #16140f;
  color: var(--color-bg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: normal;
}
body.pd, body.pd *, body.pd *::before, body.pd *::after { box-sizing: border-box; }

/* vòng 17 (Anh Phát 22/09 — "tối ưu thanh cuộn hệ thống"): thanh cuộn TRANG (html — chế độ không-JS
   hoặc bản in) VÀ mọi `.pd-man` KHÔNG PHẢI màn 7/8 theo nhận diện thay vì mặc định xám hệ điều hành.
   Rãnh trùng nền (--ground), tay nắm cam trầm (--o-700, 3,48:1 trên nền — qua mốc 3:1 WCAG cho thành
   phần đồ hoạ), sáng lên --o-500 (7,82:1) khi rê/kéo. Firefox dùng scrollbar-width/-color; Chrome/
   Edge/Safari dùng ::-webkit-scrollbar*. Điện thoại (cảm ứng) giữ mặc định hệ điều hành.
   Vá 22/09 23:5x: BAN ĐẦU đổi cả `.pd-man` nói chung sang mép-mờ+nút (vòng 18) — lộ ra màn 5 "Bài đang
   có" (lưới 6 thẻ 2 hàng, cũng tràn khung ở nhiều khổ) làm dải mờ + nút tròn đè lên giữa hàng thẻ thứ
   2, trông như phần tử thừa (Anh Phát bắt được qua ảnh chụp site sống). Mép-mờ+nút hợp với màn dạng
   khối chữ đơn giản (7/8) nhưng đè xấu lên lưới ảnh dày (5) — THU HẸP LẠI đúng phạm vi Anh yêu cầu ban
   đầu: chỉ màn 7/8. Màn 5 (và mọi màn khác lỡ tràn khung) quay về thanh cuộn cam như cũ. */
html, .pd .pd-man:not(.pd-man--7):not(.pd-man--8) {
  scrollbar-width: thin;
  scrollbar-color: var(--o-700) var(--ground);
}
@media (hover: hover) and (pointer: fine) {
  html::-webkit-scrollbar, .pd .pd-man:not(.pd-man--7):not(.pd-man--8)::-webkit-scrollbar { width: 8px; height: 8px; }
  html::-webkit-scrollbar-track, .pd .pd-man:not(.pd-man--7):not(.pd-man--8)::-webkit-scrollbar-track { background: var(--ground); }
  html::-webkit-scrollbar-thumb, .pd .pd-man:not(.pd-man--7):not(.pd-man--8)::-webkit-scrollbar-thumb {
    background: var(--o-700); border-radius: 999px; border: 2px solid var(--ground);
  }
  html::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:active,
  .pd .pd-man:not(.pd-man--7):not(.pd-man--8)::-webkit-scrollbar-thumb:hover,
  .pd .pd-man:not(.pd-man--7):not(.pd-man--8)::-webkit-scrollbar-thumb:active { background: var(--o-500); }
}

/* vòng 18 (Anh Phát 22/09 — "ghét cả màu lẫn cảm giác cuộn-lồng-trong-khung-nhỏ"): bỏ hẳn thanh cuộn
   hiện ra bên trong .pd-man (dù màu gì cũng vẫn là "hộp có cuộn riêng" trong lòng màn hình) — thay
   bằng mép mờ dần (báo còn nội dung) + mũi tên gợi ý cuộn tiếp, đúng khuôn "dải cuộn UIUX ẩn scrollbar"
   đã dùng cho băng ảnh ngang (`.pd-nav__cuon` phía trên, nhatlinh.vn). Nội dung vẫn cuộn được y hệt
   (overflow-y:auto giữ nguyên ở trinh-chieu.css) — chỉ đổi CÁCH BÁO còn nội dung, không đổi cơ chế
   cuộn/bàn phím/WCAG 2.1.1 đã có (tabindex, focus-visible ở trên). data-cuon-tren/data-cuon-duoi do
   trinh-chieu.js gắn theo vị trí cuộn thật (không suy đoán bằng CSS). */
.pd .pd-man {
  scrollbar-width: none;
}
.pd .pd-man::-webkit-scrollbar { display: none; }
.pd .pd-man { position: relative; }
.pd .pd-man::before, .pd .pd-man::after {
  content: ""; position: absolute; left: 0; right: 0; height: 64px;
  pointer-events: none; z-index: 5; opacity: 0; transition: opacity .25s ease;
}
.pd .pd-man::before { top: 0; background: linear-gradient(to bottom, var(--ground), transparent); }
.pd .pd-man::after { bottom: 0; background: linear-gradient(to top, var(--ground), transparent); }
.pd .pd-man[data-cuon-tren]::before { opacity: 1; }
.pd .pd-man[data-cuon-duoi]::after { opacity: 1; }

.pd .pd-man__goi-y {
  position: absolute; left: 50%; bottom: 14px; z-index: 6;
  transform: translateX(-50%); display: none;
  width: 34px; height: 34px; border-radius: 999px; place-items: center;
  border: 1px solid var(--o-700); background: color-mix(in srgb, var(--ground) 78%, transparent);
  color: var(--o-400); cursor: pointer; opacity: 0; transition: opacity .25s ease;
}
.pd .pd-man[data-cuon-duoi] .pd-man__goi-y { display: grid; opacity: 1; }
.pd .pd-man__goi-y:hover { color: var(--o-300); border-color: var(--o-500); }
@media (prefers-reduced-motion: no-preference) {
  .pd .pd-man__goi-y svg { animation: pd-goi-y-nhun 1.6s ease-in-out infinite; }
}
@keyframes pd-goi-y-nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@media (hover: none) { .pd .pd-man__goi-y { display: none !important; } }
/* .pd-man nhận bàn phím để cuộn được (WCAG 2.1.1 scrollable-region-focusable) — bỏ viền lấy nét mặc
   định (đã có hiệu ứng data-o riêng khi chuyển màn), giữ lại khi Tab tới để không mất dấu vết bàn phím
   hoàn toàn: viền mảnh cùng tông cam, lùi vào trong (không che nội dung sát mép). */
.pd .pd-man:focus-visible { outline: 2px solid var(--o-500); outline-offset: -2px; }

.pd h1, .pd h2, .pd h3, .pd h4, .pd h5, .pd h6 {
  font-family: var(--font-heading);
  color: inherit;
  margin: 0 0 8.8px;
}
.pd h1, .pd h2, .pd h3, .pd h4 { font-weight: 800; letter-spacing: -0.01em; line-height: 1.22; }
.pd h5, .pd h6 { font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; }
.pd h1 { font-size: 42px; line-height: 1.18; }
.pd h2 { font-size: 32px; }
.pd h3 { font-size: 25px; }
.pd h4 { font-size: 20px; }
.pd h5 { font-size: 16px; }
.pd h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
/* Dấu tiếng Việt cần khoảng đứng — không bao giờ để tiêu đề thấp hơn mức này */
.pd h1, .pd h2, .pd h3, .pd h4, .pd h5 { padding-block: 0.04em; }
/* Từ dài (URL, tên file) ở màn 320px không được đẩy tràn ngang — kể cả tiêu đề dựng bằng div */
.pd h1, .pd h2, .pd h3, .pd h4, .pd h5, .pd h6,
.pd .pd-m4__t, .pd .pd-th-cua-ban__t, .pd .pd-tc-kq__t, .pd .pd-bv-mo__t { overflow-wrap: anywhere; }

.pd p { margin: 0 0 13.2px; }
.pd img { display: block; max-width: 100%; }
.pd figure { margin: 0; }

.pd a {
  color: var(--o-400);
  text-decoration: underline;
  text-decoration-thickness: auto !important; /* theme cha ép 1px !important */
  text-underline-offset: 3px;
}
:where(.pd) a:hover { color: var(--o-300); text-decoration: underline; }

.pd :focus { outline: none; }
.pd :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
/* Viền focus bên trong bề mặt cam (vá vòng 3, P3 #9). Viền mặc định #c67139 chỉ 1,16–1,81:1
   trên chuyển sắc cam và 2,87:1 trên --o-800 → không thấy vòng focus.
   · cam đậm --o-800 (khối kêu gọi, ô cột phải bài viết, khối kết màn 9) → --o-200: 7,83:1
     (4,09:1 ở chỗ đốm cam trang trí đậm nhất)
   · cam sáng (--o-500 / --o-grad; gắn data-spot="cam", hoặc thẻ bậc đang chọn — lớp này
     do JS bật, khi giảm chuyển động data-spot không được đổi) → --o-900: 5,66–8,79:1
   Chỉ đổi viền của phần tử NẰM TRONG bề mặt; chính nút cam thì viền vẽ ra ngoài, trên nền tối. */
.pd .pd-keu :focus-visible, .pd .pd-m9__keu :focus-visible,
.pd .pd-bv-mo :focus-visible, .pd .pd-prose .pd-cam-dam :focus-visible { outline-color: var(--o-200); }
.pd [data-spot="cam"] :focus-visible,
.pd .pd-th-bac.is-chon :focus-visible { outline-color: var(--o-900); }
.pd ::selection { background: var(--o-700); color: var(--color-bg); }

/* `hidden` luôn thắng — nhiều khối có display riêng mà vẫn cần ẩn bằng JS */
.pd [hidden] { display: none !important; }

/* Ô nhập — Organic .input + lớp tối */
.pd .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--color-neutral-400); } /* 24/09: bỏ --color-text sót theme sáng */
.pd .input {
  width: 100%;
  min-height: 36px;
  padding: 6px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--color-bg);
  caret-color: var(--color-accent);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-700);
  border-radius: 999px;
}
.pd .input:hover { border-color: var(--color-neutral-600); } /* 24/09: bỏ --color-text sót */
.pd .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

/* Bỏ qua, vào thẳng nội dung */
.pd .pd-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--o-grad); color: var(--o-900); font-weight: 700; text-decoration: none;
}
.pd .pd-skip:focus { top: 12px; }

/* ---------- Keyframes ---------- */
@keyframes morphA {
  0%, 100% { border-radius: 58% 42% 38% 62% / 45% 52% 48% 55%; }
  33% { border-radius: 38% 62% 60% 40% / 60% 38% 62% 40%; }
  66% { border-radius: 50% 50% 34% 66% / 38% 62% 38% 62%; }
}
@keyframes morphB {
  0%, 100% { border-radius: 44% 56% 62% 38% / 56% 40% 60% 44%; transform: rotate(0deg); }
  50% { border-radius: 62% 38% 40% 60% / 38% 62% 38% 62%; transform: rotate(8deg); }
}
@keyframes reveal { from { opacity: 0; transform: translateY(30px) } to { opacity: 1; transform: translateY(0) } }
@keyframes floaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
@keyframes drift { 0%, 100% { transform: translate3d(0,0,0) scale(1) } 50% { transform: translate3d(26px,-32px,0) scale(1.14) } }

/* ---------- Đánh máy — vòng 20 (23/09/2026): Anh Phát chê bản vòng 19 (lớp phủ lộ dần/wipe) không
   phải "gõ từng chữ". Làm lại thành gõ ký tự thật, theo đúng nhịp mẫu `nhatlinh.vn` (#nl-hero-name,
   mổ bằng Playwright — script tự viết, không phải Elementor Pro, không copy nguyên script, chỉ học
   nhịp — xem `_qc/phat-dark/vong-20/dac_ta_nhip_nhatlinh.md`):
   - JS (trinh-chieu.js) bọc SẴN từng ký tự (grapheme) thành span .pd-ky-tu NGAY khi trang tải — ký
     tự chiếm chỗ layout đầy đủ từ đầu (opacity, KHÔNG đổi width/display) nên trình duyệt tính ngắt
     dòng trên chữ ĐẦY ĐỦ ngay từ đầu → không thể lặp lại lỗi mồ côi dấu câu của vòng 18.
   - Hiện dần bằng opacity 0→1 (transition 80ms, giống mẫu — mềm hơn bật/tắt cứng).
   - Con trỏ "|" gắn CỐ ĐỊNH 1 lần ngay sau khối chữ, KHÔNG di chuyển theo từng ký tự (đúng như mẫu:
     ký tự ẩn vẫn chiếm chỗ nên chữ "hiện dần từ trái" trong khi con trỏ đứng yên ở cuối khối).
   - Cụm màu cam dùng gradient (.pd-grad-chu, background-clip:text) hiện ra như 1 KHỐI, không tách
     từng ký tự bên trong nó — tách ra sẽ vỡ gradient thành sọc (khác "Linh" của mẫu dùng màu đặc). */
.pd-danh-may { position: relative; }
/* .pd-ky-tu CHỈ tồn tại khi JS đã chạy và tự tạo ra nó (bọc từ text node) — không có JS thì phần
   tử này không hề xuất hiện, chữ gốc hiển thị bình thường ngay, không phụ thuộc CSS ở đây.
   .pd-grad-chu thì NGƯỢC LẠI đã có sẵn trong HTML tĩnh — cố tình KHÔNG đặt opacity:0 ở đây (tránh
   kẹt vô hình nếu JS lỗi/bị chặn); JS tự đặt style.opacity='0' bằng inline style ngay trước khi
   chạy hiệu ứng, nên mặc định (không JS) luôn hiện đủ, an toàn theo kiểu "tăng cường dần". */
.pd-danh-may .pd-ky-tu { opacity: 0; transition: opacity .08s linear; }
.pd-danh-may .pd-ky-tu.hien, .pd-danh-may .pd-grad-chu.hien { opacity: 1 !important; }
.pd-danh-may .pd-grad-chu { transition: opacity .08s linear; }
/* vòng 22 (Anh Phát chốt 23/09: "gõ đến đâu có dấu | đến đó"): con trỏ là 1 vạch position:absolute,
   JS (datViTriContro trong trinh-chieu.js) tự tính left/top/height bám theo ký tự VỪA hiện ra mỗi
   lần gõ 1 ký tự — position:absolute nên KHÔNG chiếm chỗ trong dòng chữ (giữ đúng bài học vòng 20:
   con trỏ từng làm lệch số dòng ở man2 600px/man3 768px vì khi đó nó còn là hộp inline-block thật). */
.pd-danh-may__contro {
  position: absolute; top: 0; left: 0; width: 2px; height: 1em;
  background: var(--o-500); opacity: 0; pointer-events: none;
}
.pd-danh-may__contro.nhap-nhay { animation: pd-contro-nhap-nhay 1s steps(1, end) infinite; }
.pd-danh-may__contro.tat { display: none; }
@keyframes pd-contro-nhap-nhay { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pd-danh-may .pd-ky-tu, .pd-danh-may .pd-grad-chu { opacity: 1 !important; }
}

/* Việc mới (23/09, Anh Phát: "tiêu đề Blog/Thang 5 bậc bổ sung hiệu ứng gì thú vị" — Ngọc chọn tô
   sáng, không gõ chữ, vì 2 trang này là trang ĐỌC ĐỂ LÀM VIỆC, không nên bắt chờ). Mảng cam quét
   qua cụm chữ rồi DỪNG LẠI ở trạng thái đã nhấn (nền cam nhạt) — không phải chớp rồi biến mất.
   Mặc định (không class .pd-ts-cho, hoặc tắt JS, hoặc reduced-motion): nền cam đã hiện sẵn, KHÔNG
   chờ gì — đúng luật "chữ hiển thị đầy đủ ngay từ đầu". Chỉ khi JS chạy VÀ không giảm chuyển động,
   JS mới tự thêm .pd-ts-cho (giấu đi bằng clip-path) rồi sau 350ms thêm .pd-ts-hien để mảng cam
   quét ra — đúng khuôn :not() đã dùng cho Việc 6/B2, tránh tranh chấp độ ưu tiên giữa 2 lớp.
   KHÔNG dùng padding (cấm xô chữ) — chỉ background, không đổi kích thước hộp chữ. */
.pd-nhan-sang { background: color-mix(in srgb, var(--o-500) 24%, transparent); }
html.js .pd-nhan-sang.pd-ts-cho:not(.pd-ts-hien) { clip-path: inset(0 100% 0 0); }
.pd-nhan-sang.pd-ts-cho { transition: clip-path .7s cubic-bezier(.2,.7,.3,1); }

/* ---------- Đèn rọi con trỏ — lớp sáng nằm trên nền, dưới chữ ----------
   data-spot=""     nền tối                  → đốm cam (đúng thiết kế gốc)
   data-spot="cam"  nền cam / chuyển sắc cam → đốm KEM (đốm cam trên nền cam là vô hình)
   Gắn tường minh trong khuôn (templates/, parts/, inc/). den-roi.js chỉ gắn thêm cho
   nội dung CMS và đổi loại khi thẻ đổi trạng thái (hàng thang được chọn: tối → cam).
   isolation + z-index:-1: lớp đốm nằm trên nền nhưng DƯỚI cả chữ trần (nút, chip số). */
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  opacity: var(--spot, 0);
  transition: opacity .35s ease;
  background:
    radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 138, 43, 0.16), transparent 62%),
    radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 190, 133, 0.13), transparent 70%);
}
/* Số chỉnh bằng mắt 11/09/2026 (rê chuột thật trên thẻ bậc đang chọn): điểm xuất phát
   .28/.22 gần như không thấy trên chuyển sắc cam; .70/.55 thấy rõ, chữ --o-900 vẫn sắc
   (tương phản tại tâm đốm ≥ 9:1 — xem _qc/phat-dark/dom-sang/). */
[data-spot="cam"]::before {
  background:
    radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 241, 227, 0.70), transparent 60%),
    radial-gradient(100px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 70%);
  mix-blend-mode: soft-light;
}
[data-spot] > * { position: relative; z-index: 1; }

/* ---------- Giảm chuyển động, không rê chuột & bản in: tắt hiệu ứng ---------- */
@media (hover: none) {
  [data-spot]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-spot]::before { display: none; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-spot]::before { display: none; }
  .pd .pd-nen, .pd .pd-skip { display: none !important; }
  .pd .pd-nav { position: static !important; box-shadow: none !important; }

  /* Mực tối trên giấy trắng (vá vòng 2 #14). Trình duyệt mặc định KHÔNG in màu nền → giữ
     chữ kem của giao diện tối thì chữ gần như trắng trên giấy trắng. Bỏ hết nền, đổi mọi chữ
     sang mực tối, giữ đường viền để khung thẻ vẫn thấy. */
  html, body.pd { background: #fff !important; }
  body.pd, .pd *, .pd *::before, .pd *::after {
    color: #1a1a1a !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
    opacity: 1 !important;
  }
  .pd * { border-color: #b8b2a8 !important; }
  .pd a { text-decoration: underline; }
  /* nút nền cam mất nền khi in → thêm viền để vẫn nhận ra là nút */
  .pd .pd-nut, .pd .pd-nut-toi, .pd .pd-nav__cta { border: 1px solid #1a1a1a !important; }
  /* Chữ tô chuyển sắc = nền cắt theo chữ + chữ trong suốt → nền không in thì chữ biến mất.
     In thành màu đặc. */
  .pd .pd-grad-chu { -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor; }
  /* mảng trang trí không có nghĩa trên giấy */
  .pd .pd-m7__nen, .pd .pd-chan-dung__nen, .pd .pd-m9__blob, .pd .pd-keu__blob { display: none !important; }
  /* vòng 6: khung banner đầu bài chưa có ảnh = mảng trống ~450px trên giấy → bỏ */
  .pd .pd-hinh--banner:has(> .is-cho) { display: none !important; }
}
/* ==========================================================================
   CHẾ ĐỘ SÁNG / TỐI (07/10/2026, PRJ-045) — KHỐI THÊM Ở CUỐI nen.css. Không sửa dòng luật cũ nào.
   Tối = không có thuộc tính (đúng như trước). Sáng = <html data-giao-dien="sang">; mọi luật sáng bắt đầu bằng
   html[data-giao-dien="sang"] (0,1,1)+ nên thắng :root, .pd-tap, body của global styles bất kể thứ tự nạp.
   Giá trị: bộ màu "giấy ấm" J4 (che_do_sang_toi/xem_thu/bo_mau_sang.css, Anh duyệt 07/10).
   Lát 1 = khung (nút, biến gốc, đảo cục bộ). Vá chỗ viết cứng + khối .pd-tap/.pd-mh/bai-hoc là lát 2–3.
   ========================================================================== */

/* ---------- Nút tròn mặt trời/trăng (mọi chế độ; tắt JS thì ẩn) ---------- */
.pd .pd-nav__doi-hang { display: contents; }
.pd .pd-nav__doi-nhan { display: none; }
.pd .pd-nav__doi-mau {
  flex: none; position: relative; overflow: hidden; display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-left: 6px; padding: 0; cursor: pointer;
  border: 1.5px solid var(--color-neutral-600); border-radius: 50%;
  background: transparent; color: var(--color-bg);
  transition: border-color .2s, transform .2s;
}
.pd .pd-nav__doi-mau:hover { border-color: var(--o-500); transform: translateY(-2px); }
.pd .pd-nav__doi-mau:focus-visible { outline: 2px solid var(--o-300); outline-offset: 2px; }
.pd .pd-nav__doi-mau svg {
  position: absolute; width: 20px; height: 20px;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .18s;
}
.pd .pd-nav__doi-mau .pd-dm-mt { transform: none; opacity: 1; }
.pd .pd-nav__doi-mau .pd-dm-tr { transform: rotate(-70deg) scale(.4); opacity: 0; }
html[data-giao-dien="sang"] .pd .pd-nav__doi-mau .pd-dm-mt { transform: rotate(70deg) scale(.4); opacity: 0; }
html[data-giao-dien="sang"] .pd .pd-nav__doi-mau .pd-dm-tr { transform: none; opacity: 1; }
html:not(.js) .pd .pd-nav__doi-hang { display: none !important; }
@media (hover: none) { .pd .pd-nav__doi-mau:hover { transform: none; } }
@media (max-width: 767px) {
  /* trong ngăn ☰: một hàng "Giao diện" + nút tròn bên phải, cao ≥48px như 4 mục kia */
  .pd .pd-nav__doi-hang {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 56px; margin-top: 8px; padding: 6px 16px; box-sizing: border-box;
    border-top: 1px solid var(--color-neutral-800);
  }
  .pd .pd-nav__doi-nhan { display: inline; font-size: 16px; font-weight: 600; color: var(--color-neutral-200); }
  .pd .pd-nav__doi-mau { margin-left: 0; }
}

/* ---------- Chuyển cảnh đổi màu: vòng tròn nở từ tâm nút (chỉ khi <html> có lớp tạm do phat.js gắn) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.pd-dang-doi-mau::view-transition-old(root),
  html.pd-dang-doi-mau::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html.pd-dang-doi-mau::view-transition-new(root) { animation: pd-dm-mo .24s cubic-bezier(.2, .7, .3, 1) both; }
  @keyframes pd-dm-mo {
    from { clip-path: circle(0 at var(--pd-dm-x, 50%) var(--pd-dm-y, 50%)); }
    to   { clip-path: circle(150% at var(--pd-dm-x, 50%) var(--pd-dm-y, 50%)); }
  }
}

/* ---------- Bộ biến SÁNG (J4) ---------- */
html[data-giao-dien="sang"] {
  color-scheme: light;
  --ground: #f6f0e3;
  --color-neutral-900: #fffaf0; --color-neutral-800: #ece1cd; --color-neutral-700: #d3c5ac; --color-neutral-600: #8a7e69;
  --color-bg: #1f1a13; --color-neutral-100: #17130d; --color-neutral-200: #2f2920; --color-neutral-300: #433b2f;
  --color-neutral-400: #5a5142; --color-neutral-500: #6f6553;
  --color-accent: #a8470a; --color-surface: #ece1cd; --color-text: #1f1a13;
  --shadow-lg: 0 12px 32px rgba(73, 52, 22, .14);
  --o-100: #2e1103; --o-200: #4a1d03; --o-300: #7d3304; --o-400: #a8470a;
  --o-700: #c25a0a; --o-800: #ffe8d0;
  --o-glow: 0 10px 26px rgba(240, 106, 15, .30);
  --o-chu: #b54b07;
}
html[data-giao-dien="sang"], html[data-giao-dien="sang"] body.pd { background: var(--ground); }
html[data-giao-dien="sang"] body.pd { color: var(--color-bg); }
html[data-giao-dien="sang"] .pd ::selection { background: #ffcf9f; color: #1f1a13; }

/* ---------- ĐẢO CỤC BỘ: bề mặt GIỮ TỐI/CAM (nút cam, thẻ đã chọn, khối kêu gọi cam đậm, khung ảnh, bong bóng robot) ----------
   Khai báo lại ĐÚNG giá trị tối của mọi biến đã đảo → con cháu kế thừa nên tự đúng, không phải vá từng chữ.
   Bọc :where() để độ ưu tiên chỉ (0,1,1): thua mọi luật thành phần của theme (.pd .pd-x) nên không đè color/background riêng của chúng. */
html[data-giao-dien="sang"] :where(
  .pd .pd-nut, .pd .pd-nav__cta, .pd .pd-kicker, .pd .pd-chip-p, .pd .pd-so-tron,
  .pd .pd-anh, .pd .pd-anh__cho, .pd .pd-hinh__khung,
  .pd .pd-keu, .pd .pd-bv-mo, .pd .pd-m4, .pd .pd-m9__keu, .pd .pd-cd--1, .pd .pd-cd--3,
  .pd .pd-th-bac.is-chon, .pd .pd-hang.is-chon, .pd .pd-tc-chon.is-chon, .pd .pd-bl-chip.is-chon, .pd .pd-bl-chip--cd.is-chon,
  .pd .pd-tc-kq, .pd .pd-prose .pd-cam-dam, .pd .pd-prose .pd-ss__the--sau, .pd .pd-prose .pd-luong__doan--hoi,
  .pd .pd-rb__nut, .pd .pd-rb__bong-khach, .pd .pd-rb__bong-robot, .pd .pd-rb__tab[aria-selected="true"],
  .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao, a.pd-mlh-goi-y, [data-spot="cam"]
) {
  color: var(--color-bg);   /* chữ không có luật màu riêng kế thừa đúng màu tối (độ ưu tiên thấp: thua mọi luật thành phần) */
  --ground: #16140f;
  --color-neutral-900: #2e2b25; --color-neutral-800: #474238; --color-neutral-700: #645c50; --color-neutral-600: #82796a;
  --color-bg: #f5ead8; --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786;
  --color-accent: #c67139; --color-surface: #ebddc5; --color-text: #201e1d;
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
  --o-100: #fff1e3; --o-200: #ffd9b8; --o-300: #ffbe85; --o-400: #ff9e4d;
  --o-700: #b54b07; --o-800: #6e2c05;
  --o-glow: 0 12px 34px rgba(255, 138, 43, 0.42);
}

/* ==========================================================================
   LÁT 2 — TRANG CHUNG Ở CHẾ ĐỘ SÁNG (08/10/2026). Cũng chỉ là luật THÊM; nguồn màu: J4 xem_thu/bo_mau_sang.css (đã đổi
   data-theme="light" → data-giao-dien="sang", bỏ phần .pd-mh = lát 3). Logo / khung ảnh / sửa chỗ viết cứng theo K7 đo trên staging.
   ========================================================================== */

/* Logo: 2 <img> (tối + sáng). Ảnh sáng lazy + ẩn ở chế độ tối nên KHÔNG tải thừa; ≤480px vẫn dùng biểu tượng vuông (picture) cả hai chế độ. */
.pd .pd-nav__brand img.pd-logo-sang, .pd .pd-chan__brand img.pd-logo-sang { display: none; }
@media (min-width: 481px) {
  html[data-giao-dien="sang"] .pd .pd-nav__brand picture { display: none; }
  html[data-giao-dien="sang"] .pd .pd-nav__brand img.pd-logo-sang { display: block; }
}
html[data-giao-dien="sang"] .pd .pd-chan__brand img:not(.pd-logo-sang) { display: none; }
html[data-giao-dien="sang"] .pd .pd-chan__brand img.pd-logo-sang { display: block; }

/* Bộ màu J4 (phần dùng chung) */
html[data-giao-dien="sang"], html[data-giao-dien="sang"] body.pd { background: var(--ground); }
html[data-giao-dien="sang"] body.pd { color: var(--color-bg); }
html[data-giao-dien="sang"] .pd ::selection { background: #ffcf9f; color: #1f1a13; }
html[data-giao-dien="sang"] .pd .pd-blob { opacity: .16 !important; }
html[data-giao-dien="sang"] .pd .pd-nen--deck .pd-blob--a, html[data-giao-dien="sang"] .pd .pd-nen--deck .pd-blob--b { opacity: .22 !important; }
html[data-giao-dien="sang"] .pd-nen [class*="blob"] { mix-blend-mode: multiply; }
html[data-giao-dien="sang"] .pd .pd-nav { box-shadow: 0 8px 24px rgba(73, 52, 22, .12); }
html[data-giao-dien="sang"] .pd .pd-bl-the, html[data-giao-dien="sang"] .pd .pd-tc-the, html[data-giao-dien="sang"] .pd .pd-hang, html[data-giao-dien="sang"] .pd .pd-th-bac { box-shadow: 0 1px 2px rgba(73,52,22,.06), 0 10px 26px -16px rgba(73,52,22,.28); }
html[data-giao-dien="sang"] .pd .pd-bl-the:hover, html[data-giao-dien="sang"] .pd .pd-tc-the:hover { box-shadow: 0 18px 40px -18px rgba(181,75,7,.38); }
html[data-giao-dien="sang"] .pd .pd-hang__so { color: var(--o-chu); }
html[data-giao-dien="sang"] .pd .pd-m1__h1 em, html[data-giao-dien="sang"] .pd h1 em, html[data-giao-dien="sang"] .pd .pd-cam { color: var(--o-chu); }
html[data-giao-dien="sang"] .pd .pd-nut-toi, html[data-giao-dien="sang"] .pd .pd-th-bac.is-chon .pd-th-bac__so, html[data-giao-dien="sang"] .pd .pd-th-bac.is-chon .pd-th-bac__tt, html[data-giao-dien="sang"] .pd .pd-hang.is-chon .pd-hang__tt, html[data-giao-dien="sang"] .pd .pd-cd--3 .pd-cd__so { color: #ffd9b8; }
html[data-giao-dien="sang"] .pd .pd-nav__dangnhap.pd-nav__dangnhap--da-vao:hover { color: #fff1e3; }
html[data-giao-dien="sang"] .pd .pd-grad-chu { background-image: linear-gradient(135deg, #d4560a 0%, #bd4d08 55%, #a8470a 100%); }
html[data-giao-dien="sang"] .pd .pd-tc-the.is-san { border-color: color-mix(in srgb, #f06a0f 50%, #f6f0e3); }
html[data-giao-dien="sang"] .pd .pd-blob { opacity: .10 !important; }
html[data-giao-dien="sang"] .pd .pd-hang:not(.is-chon) { background: var(--color-neutral-900); }
html[data-giao-dien="sang"] .pd .pd-hang.is-chon { border-color: #ffbe85; }
html[data-giao-dien="sang"] .pd-nen [class*="blob"] { mix-blend-mode: normal; }
html[data-giao-dien="sang"] .pd .pd-blob--b { background: #ff8a2b; }
html[data-giao-dien="sang"] .pd .pd-cd--1 .pd-cd__so { background: #ff9e4d; }
html[data-giao-dien="sang"] .pd .pd-bv-dau__gach { color: #6f6553; }

/* Vệt cam mờ nền trang chủ (blob deck): tắt ở chế độ sáng (J4 đề xuất) */
html[data-giao-dien="sang"] .pd .pd-nen--deck .pd-blob { display: none; }

/* Khung ảnh bìa cảnh tối trên nền giấy: giữ ảnh, thêm viền + bóng nâu nhạt tách khỏi nền */
html[data-giao-dien="sang"] .pd .pd-hinh__khung, html[data-giao-dien="sang"] .pd .pd-anh { box-shadow: 0 0 0 1px #cdbfa5, 0 14px 34px -18px rgba(73, 52, 22, .45); }

/* ==========================================================================
   LÁT 3 — KHỐI + BÀI HỌC Ở CHẾ ĐỘ SÁNG (08/10/2026). Luật THÊM; không sửa bai-hoc/phong-tap/minh-hoa/muc-luc-hoc.css.
   các biến tap, mlh, mh và chỗ viết cứng theo bộ màu J4 (xem_thu/bo_mau_sang.css, phần .pd-mh) + đo K7/K10 trên staging.
   ========================================================================== */

/* trang muc luc bai hoc: muc-luc-hoc.css khai bien mlh o :root */
html[data-giao-dien="sang"] {
  --mlh-nen: #fffaf0; --mlh-cam-05: rgba(240, 106, 15, .05); --mlh-cam-09: rgba(240, 106, 15, .09); --mlh-cam-18: rgba(240, 106, 15, .16);
  --mlh-kem-06: rgba(73, 52, 22, .045); --mlh-kem-16: rgba(73, 52, 22, .20);
  --mlh-chu: #1f1a13; --mlh-chu-2: #433b2f; --mlh-chu-3: #5a5142; --mlh-ok: #5d6f1f; --mlh-ok-chu: #4a5a14;
}
/* biến tap do phong-tap.css khai trên CHÍNH .pd-tap/.pd-hoc (0,1,0) → ghi đè bằng bộ chọn (0,2,1) */
html[data-giao-dien="sang"] .pd-tap, html[data-giao-dien="sang"] .pd-hoc {
  --tap-nen: #fffaf0; --tap-cam-05: rgba(240, 106, 15, .05); --tap-cam-09: rgba(240, 106, 15, .09); --tap-cam-18: rgba(240, 106, 15, .16);
  --tap-kem-06: rgba(73, 52, 22, .045); --tap-kem-16: rgba(73, 52, 22, .20);
  --tap-ok: #5d6f1f; --tap-ok-chu: #4a5a14; --tap-ok-nen: rgba(93, 111, 31, .12); --tap-ok-vien: rgba(93, 111, 31, .45);
  --tap-sai: #b04a22; --tap-sai-chu: #9c3a14; --tap-sai-nen: rgba(176, 74, 34, .10); --tap-sai-vien: rgba(176, 74, 34, .45);
  --tap-chu: #1f1a13; --tap-chu-2: #433b2f; --tap-chu-3: #5a5142;
}

html[data-giao-dien="sang"] .pd-mh { background: radial-gradient(120% 80% at 100% 0%, rgba(240,106,15,.07), transparent 55%), var(--mh-nen); border-color: #e3d3b8; box-shadow: 0 1px 2px rgba(73,52,22,.06), 0 26px 50px -30px rgba(73,52,22,.38); }
html[data-giao-dien="sang"] .pd-mh__nhan { color: #7d3304; }
html[data-giao-dien="sang"] .pd-mh__nut--chinh { color: #2e1103; }
html[data-giao-dien="sang"] .pd-mh__nut[aria-pressed="true"] { color: #4a1d03; }
html[data-giao-dien="sang"] .pd-mh__the { background: #fff; }
html[data-giao-dien="sang"] .pd-mh__the[aria-pressed="true"] { background: #fff1e0; }
html[data-giao-dien="sang"] .pd-mh__the-ct { color: #8f3c04; }
html[data-giao-dien="sang"] .pd-mh__khung { border-color: #bfb29a; box-shadow: 0 10px 26px -14px rgba(73,52,22,.40); }
html[data-giao-dien="sang"] .pd-mh__tabs { background: #e6dac3; }
html[data-giao-dien="sang"] .pd-mh__tab { color: #5a5142; }
html[data-giao-dien="sang"] .pd-mh__tab.is-act { background: #fffdf8; color: #1f1a13; }
html[data-giao-dien="sang"] .pd-mh__o-nhap { background: #fff; color: #1f1a13; }
html[data-giao-dien="sang"] .pd-mh__o-nhap::placeholder { color: #6f6553; opacity: 1; }
html[data-giao-dien="sang"] .pd-mh__ghi-chu { background: rgba(240,106,15,.09); border-color: #e0a46f; }
html[data-giao-dien="sang"] .pd-mh__bong--ai { background: #fff; }
html[data-giao-dien="sang"] .pd-mh__bong--nguoi { background: #ffe9d2; border-color: #f0c394; }
html[data-giao-dien="sang"] .pd-mh__bong-ten { color: #8f3c04; }
html[data-giao-dien="sang"] .pd-mh__loi-dan { background: rgba(240,106,15,.07); }
html[data-giao-dien="sang"] .pd-mh-the { background: #fff; }
html[data-giao-dien="sang"] .pd-mh-the h3 { color: #8f3c04; }
html[data-giao-dien="sang"] .pd-mh-the code { background: #f1e7d4; color: #1f1a13; border: 1px solid #e3d6bd; }
html[data-giao-dien="sang"] .pd-mh__khong-js code { color: #8f3c04; }
html[data-giao-dien="sang"] .pd-mh { --mh-nen: #fffaf0; --mh-chu: #1f1a13; --mh-chu-2: #433b2f; --mh-chu-3: #5a5142; --mh-cam-05: rgba(240,106,15,.05); --mh-cam-09: rgba(240,106,15,.09); --mh-cam-18: rgba(240,106,15,.16); --mh-kem-06: rgba(73,52,22,.045); --mh-kem-16: rgba(73,52,22,.20); --mh-ok: #5d6f1f; --mh-ok-chu: #4a5a14; --mh-ok-nen: rgba(93,111,31,.12); --mh-ok-vien: rgba(93,111,31,.45); --mh-sai: #b04a22; --mh-sai-chu: #9c3a14; --mh-giay: #fffdf8; --mh-giay-2: #f3ead9; --mh-giay-vien: #cfc5b3; }

/* Chỗ viết cứng (kem trong suốt / đen trong suốt) của bai-hoc.css + phong-tap.css → bản nâu trong suốt trên nền giấy */
html[data-giao-dien="sang"] .pd-hoc__doan::before { background: rgba(73, 52, 22, .14); }
html[data-giao-dien="sang"] .pd-hoc__doan-so { border-color: rgba(73, 52, 22, .24); }
html[data-giao-dien="sang"] .pd-hoc__tiep:disabled { background: rgba(73, 52, 22, .08); }
html[data-giao-dien="sang"] .pd-gm__o { border-color: rgba(73, 52, 22, .30); background: rgba(73, 52, 22, .05); }
html[data-giao-dien="sang"] .pd-gm__o-nhan { background: rgba(73, 52, 22, .07); }
html[data-giao-dien="sang"] .pd-gm__manh.is-da-dat { border-color: rgba(73, 52, 22, .22); }
html[data-giao-dien="sang"] .pd-gm__manh.is-da-dat .pd-gm__manh-chu { text-decoration-color: rgba(73, 52, 22, .40); }
html[data-giao-dien="sang"] .pd-sc__cau::before { border-color: rgba(73, 52, 22, .42); }
html[data-giao-dien="sang"] .pd-tap-cc__gocbox, html[data-giao-dien="sang"] .pd-sc__boican { background: rgba(73, 52, 22, .06); }
html[data-giao-dien="sang"] .pd-tap-cc__o, html[data-giao-dien="sang"] .pd-ad__o { background: #fff; }
html[data-giao-dien="sang"] .pd-tap-vong { background: conic-gradient(var(--o-500) calc(var(--tl) * 1turn), rgba(73, 52, 22, .12) 0); }
html[data-giao-dien="sang"] .pd-tap-vong.is-du { background: conic-gradient(var(--tap-ok) 1turn, transparent 0); }
html[data-giao-dien="sang"] .pd-mlh-goi-y__k { color: #b3a894; }   /* hộp gợi ý giữ nền tối cứng → giữ chữ phụ sáng */

/* Bảng tra: "Lỗi hay gặp" chỉ nhãn đậm màu gạch, thân đoạn dùng màu chữ phụ (J4: cả đoạn đỏ gạch hơi nặng) */
html[data-giao-dien="sang"] .pd-mh-the .pd-mh-loi { color: var(--mh-chu-2); }
html[data-giao-dien="sang"] .pd-mh-the .pd-mh-loi b { color: var(--mh-sai-chu); }

/* Thẻ chưa có ảnh bìa (khung sọc nâu cam): nhẹ lại — sọc cam nhạt trên nền đào */
html[data-giao-dien="sang"] .pd .pd-anh__cho, html[data-giao-dien="sang"] .pd .pd-anh {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(240, 106, 15, .16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(194, 90, 10, .14) 0 1px, transparent 1px 11px),
    #ffe8d0;
}
/* Lớp phủ khung robot hỏi nhanh: nâu ấm nhạt thay vì đen đục */
html[data-giao-dien="sang"] .pd .pd-rb__nen { background: rgba(73, 52, 22, .38); }

/* Chữ gradient cam nằm trên mảng đào (.pd-nhan-sang): đầu gradient đậm hơn để đạt >=3:1 chữ lớn (đo tay 2.94 → dưới) */
html[data-giao-dien="sang"] .pd .pd-nhan-sang .pd-grad-chu { background-image: linear-gradient(135deg, #bd4d08 0%, #a8470a 55%, #8f3c04 100%); }

/* In giấy: J4 thêm viền cho ô code ở bảng tra — bỏ viền khi in để hai bản in (tối/sáng) giống nhau */
@media print { html[data-giao-dien="sang"] .pd-mh-the code { border: 0 !important; } }

/* Viền thành phần bấm được >= 3:1 (K10): nút/thẻ chọn/ô nhập của khối dùng viền kem-16 (1,44:1) → viền nâu trung tính J4 (#8a7e69). Bỏ qua trạng thái (is-*, aria-pressed) để giữ màu đúng/sai. */
html[data-giao-dien="sang"] :is(.pd-mh__the, .pd-tap-bb__nut, .pd-tap-cc__mau-nut, .pd-tap-qd__nut, .pd-tap__lai, .pd-tap-cc__o, .pd-ad__o):not([class*="is-"]):not([aria-pressed="true"]) { border-color: #8a7e69; }
html[data-giao-dien="sang"] .pd-mh__nut:not(.pd-mh__nut--chinh):not([aria-pressed="true"]) { border-color: #8a7e69; }
html[data-giao-dien="sang"] .pd-tap-bb__nut.is-dap-an { border-color: var(--tap-ok); }

/* ==========================================================================
   LAT 4 (08/10/2026) — nut doi che do trong nav o khung tablet + sua nho che do SANG. Chi them luat.
   Nut nam CUOI hang nav (sau Dang nhap). O 2 khung ma hang nav het cho (them 50px se xuong dong) nav siet khe/dem
   vua du (chu nav KHONG nho di, nut van 44x44): 768-779px (trang khong co CTA) va 865-927px (trang co CTA).
   Hai khung nay doi bo cuc nav ca che do TOI (chap nhan, WP3 duyet).
   ========================================================================== */
@media (min-width: 768px) and (max-width: 779px) {
  .pd .pd-nav:not(.pd-nav--deck):not(:has(.pd-nav__cta)) { gap: 8px; padding-left: 12px; padding-right: 10px; }
  .pd .pd-nav:not(.pd-nav--deck):not(:has(.pd-nav__cta)) .pd-nav__link:not(.pd-nav__dangnhap) { padding-left: 10px; padding-right: 10px; }
  .pd .pd-nav:not(.pd-nav--deck):not(:has(.pd-nav__cta)) .pd-nav__dangnhap { margin-left: 4px; }
  .pd .pd-nav:not(.pd-nav--deck):not(:has(.pd-nav__cta)) .pd-nav__doi-mau { margin-left: 4px; }
}
@media (min-width: 865px) and (max-width: 927px) {
  .pd .pd-nav:not(.pd-nav--deck):has(.pd-nav__cta) { gap: 8px; padding-left: 12px; padding-right: 10px; }
  .pd .pd-nav:not(.pd-nav--deck):has(.pd-nav__cta) .pd-nav__link:not(.pd-nav__dangnhap) { padding-left: 10px; padding-right: 10px; }
  .pd .pd-nav:not(.pd-nav--deck):has(.pd-nav__cta) .pd-nav__cta { margin-left: 4px; padding-left: 16px; padding-right: 16px; }
  .pd .pd-nav:not(.pd-nav--deck):has(.pd-nav__cta) .pd-nav__dangnhap { margin-left: 4px; }
  .pd .pd-nav:not(.pd-nav--deck):has(.pd-nav__cta) .pd-nav__doi-mau { margin-left: 4px; }
}

/* Khung anh bai (banner) chua co anh: cung nen dao soc nhe nhu the chua co anh bia */
html[data-giao-dien="sang"] .pd .pd-hinh__khung {
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(240, 106, 15, .16), transparent 60%),
    repeating-linear-gradient(135deg, rgba(194, 90, 10, .14) 0 1px, transparent 1px 11px),
    #ffe8d0;
}

/* The goi y bai (muc-luc-hoc): giu TOI (nam trong danh sach dao cuc bo o tren) + vong focus nhin thay tren nen sang */
html[data-giao-dien="sang"] a.pd-mlh-goi-y:focus-visible { outline: 2px solid #a8470a; outline-offset: 3px; }

/* Vien thanh phan >= 3:1 (chi che do sang) */
html[data-giao-dien="sang"] .pd .pd-nav__hamburger { border-color: #8a7e69; }
html[data-giao-dien="sang"] .pd .pd-bl-chip:not(.is-chon) { border-color: #8a7e69; }
html[data-giao-dien="sang"] .pd .pd-hang:not(.is-chon) { border-color: #8a7e69; }
html[data-giao-dien="sang"] .pd .pd-hang:not(.is-chon):hover { border-color: var(--o-500); }
html[data-giao-dien="sang"] .pd .pd-cham:not([aria-current="step"]) { background-color: #8a7e69; }
html[data-giao-dien="sang"] .pd .pd-cham:not([aria-current="step"]):hover { background-color: var(--o-400); }
@media (max-width: 1279px), (pointer: coarse) {
  html[data-giao-dien="sang"] .pd .pd-cham, html[data-giao-dien="sang"] .pd .pd-cham:hover, html[data-giao-dien="sang"] .pd .pd-cham[aria-current="step"] { background-color: transparent; }
  html[data-giao-dien="sang"] .pd .pd-cham:not([aria-current="step"])::before { background: #8a7e69; }
}

/* Vong focus >= 3:1 tren nen sang */
html[data-giao-dien="sang"] .pd-tap-cc__o:focus, html[data-giao-dien="sang"] .pd-ad__o:focus { border-color: #a8470a; box-shadow: 0 0 0 3px rgba(168, 71, 10, .35); }
html[data-giao-dien="sang"] .pd .pd-man:focus-visible { outline-color: #a8470a; }

/* Chu gradient tren mang dao (.pd-nhan-sang): ca dau gradient dam hon de >= 3:1 o mau nen sang nhat cua mang */
html[data-giao-dien="sang"] .pd .pd-nhan-sang .pd-grad-chu { background-image: linear-gradient(135deg, #a8470a 0%, #943f06 55%, #7d3304 100%); }