/* ==========================================================================
   phat-dark · TRANG CHỦ TRÌNH CHIẾU (chỉ nạp ở trang chủ)
   Nguồn: designs/assets/slides.css + màn trong "Trang chu v4 slides.dc.html".

   Hai chế độ:
   - Có JS (html.js): khung cố định toàn màn, 9 màn trên một đường ray trượt dọc.
   - Không JS / bản in: 9 màn xếp chồng thành trang cuộn thường, đọc được hết.
   ========================================================================== */

/* ---------- Bố cục trong từng màn (dùng cho cả hai chế độ) ---------- */
.pd .pd-deck { background: var(--ground); }
.pd .pd-nen--deck .pd-blob--a { top: -140px; right: -110px; width: 520px; height: 520px; filter: blur(95px); opacity: .4; animation: morphA 18s ease-in-out infinite, drift 26s ease-in-out infinite; }
.pd .pd-nen--deck .pd-blob--b { bottom: -190px; left: -150px; width: 460px; height: 460px; filter: blur(95px); opacity: .45; animation: morphB 22s ease-in-out infinite; }

.pd .pd-deck__ray { position: relative; z-index: 1; }
.pd .pd-man { width: 100%; margin: 0 auto; padding: 78px 24px 44px; }
/* vòng 15: 1120 → 1280 (mốc đã dùng sẵn cho lề chấm điều hướng, @media max-width:1279px ở dưới) —
   1120 từng là nút thắt thật sự (không phải công thức 42dvh cũ như tưởng: đo lại thấy ở 1440×900
   cả công thức cũ LẪN mới đều bị max-width: 100% của CỘT LƯỚI kẹp về cùng ~508px, tức máy đã hết
   chỗ ngang chứ không phải hết chỗ dọc). 1280 nới cột ảnh lên ~588px mà vẫn còn ≥34px hở trước
   chấm điều hướng ở 1440px (đo Playwright) — H1 không bị bó hẹp thêm vì đã tự giới hạn max-width:
   22ch. */
.pd .pd-man--1 { max-width: 1200px; }
.pd .pd-man--2 { max-width: 900px; text-align: center; }
.pd .pd-man--3, .pd .pd-man--5, .pd .pd-man--6, .pd .pd-man--7, .pd .pd-man--8 { max-width: 1060px; }
.pd .pd-man--4 { max-width: 960px; }
.pd .pd-man--9 { max-width: 1000px; }

/* Thanh điều hướng bản trình chiếu: gọn hơn, cố định giữa trên */
.pd .pd-nav--deck {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 30;
  width: calc(100% - 32px); margin: 0;
  gap: 12px; flex-wrap: nowrap;
  padding: 10px 12px 10px 16px;
}
body.admin-bar.pd .pd-nav--deck { top: 48px; }
.pd .pd-nav--deck .pd-nav__brand { gap: 10px; }
.pd .pd-nav--deck .pd-nav__brand img { height: 36px; }   /* vòng 7: logo ảnh, rộng theo tỉ lệ file */
.pd .pd-nav--deck .pd-nav__links { flex-wrap: nowrap; }
.pd .pd-nav--deck .pd-nav__link { padding: 8px 13px; font-size: 14px; transition: none; }
.pd .pd-nav--deck .pd-nav__cta { margin-left: 4px; padding: 10px 18px; font-size: 14px; }
/* ≤640px (vá vòng 2 #4): 1 dòng như thanh thường (giao-dien.css), ẩn chữ "phat-ai.com" ở ≤480px.
   Bản cũ: nút "Tự chấm bậc" gãy 3 dòng và bị cắt khỏi mép phải ở 320–414px.
   Vòng 14 lượt 2: mở tới 712px cùng mốc thanh thường (giao-dien.css), để deck không lẫn luật gọn + luật rộng. */
@media (max-width: 712px) {
  .pd .pd-nav--deck { top: 10px; width: calc(100% - 24px); gap: 8px; padding: 6px 6px 6px 10px; }
  .pd .pd-nav--deck .pd-nav__brand { gap: 8px; }
  .pd .pd-nav--deck .pd-nav__link { padding: 0 11px; }
  .pd .pd-nav--deck .pd-nav__cta { margin-left: 0; padding: 0 14px; flex-shrink: 0; white-space: nowrap; }
}
/* Vòng 22 (Anh Phát 23/09: ảnh chụp site sống — "menu xuống 2 hàng, mất cân đối, cần vừa 1 hàng
   ngang"). HUỶ luật gộp 2 hàng của vòng 14 ở đây (≤388 và 481–495) — thay bằng thu gọn khoảng cách
   + đệm + cỡ chữ để ép LUÔN 1 hàng, không dùng thanh cuộn ngang (luật cứng 18/09), giữ đủ 44×44px
   vùng bấm (chỉ thu BỀ RỘNG qua padding ngang, không đụng height). Đo thật trước khi vá: ở 320px
   thiếu ~48px so với bản đệm cũ (11px/14px + gap 8px) mới đủ 1 hàng — 4 khoản dưới đây bù đủ. Không
   đổi chữ trên nhãn menu (Anh dặn không tự đổi). Kiểm 320→495px, 8px/bước, PASS 1 hàng toàn dải. */
/* Vòng 23 (Anh Phát 23/09 lượt 2: "lề hai bên không đều" — đo bằng ẢNH, không phải số khai trong mã):
   logo có khoảng trống ẩn trong ảnh (icon .svg không phủ kín khung 44×44) → lề trái NHÌN THẤY (mép màn
   hình tới pixel màu cam đầu tiên) = 21px trong khi lề phải (mép nút "Tự chấm bậc" tới mép màn) chỉ
   15px, dù padding khai hai bên gần bằng nhau. Đo bằng cách chèn CSS thử trực tiếp trên site sống (không
   đoán mù): padding-left 8px→2px cho lề trái NHÌN THẤY còn đúng 15px = khớp hệt lề phải (diff đo được
   = 0). Xem ảnh trước/sau: `_qc` scratchpad phiên 23/09. */
@media (max-width: 495px) {
  .pd .pd-nav--deck { flex-wrap: nowrap; gap: 4px; width: calc(100% - 16px); padding: 6px 6px 6px 2px; }
  .pd .pd-nav--deck .pd-nav__brand { gap: 4px; }
  .pd .pd-nav--deck .pd-nav__link { padding: 0 6px; font-size: 13px; }
  .pd .pd-nav--deck .pd-nav__cta { margin-left: 0; padding: 0 9px; font-size: 13px; }
}

/* Màn 1 — mở đầu */
.pd .pd-m1 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 4vw, 56px); align-items: center; }
.pd .pd-m1__trai { display: flex; flex-direction: column; gap: 20px; }
.pd .pd-m1 .pd-kicker { padding: 7px 15px; font-size: 12px; }
.pd .pd-m1__h1 { font-family: var(--font-heading); font-size: clamp(32px, 5vw, 62px); line-height: 1.18; margin: 0; max-width: 22ch; }
.pd .pd-m1__lede { margin: 0; max-width: 50ch; font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--color-neutral-300); }
.pd .pd-m1 .pd-tacgia { gap: 10px; font-size: 15px; }
.pd .pd-m1 .pd-tacgia__cham { width: 9px; height: 9px; }
.pd .pd-m1 .pd-hang-nut { margin-top: 4px; }
/* bản gốc là <button>: chữ nằm giữa khi hàng nút giãn cao theo nút viền 2px */
.pd .pd-m1 .pd-hang-nut > .pd-nut { display: inline-flex; align-items: center; line-height: normal; }
.pd .pd-m1 .pd-nut-vien:hover { background: var(--o-500); color: var(--o-900); }
.pd .pd-chan-dung--tc { padding: 14px; box-sizing: border-box; }
/* vòng 5: khung 4:3 cố định — giới hạn BỀ RỘNG theo chiều cao màn (ảnh cao ≤ 42dvh) thay cho
   max-height cũ (max-height cắt ảnh thành tỉ lệ khác nhau tuỳ màn). ≤759px lưới 1 cột (ảnh
   xuống dưới chữ) — vẫn dùng công thức này. */
.pd .pd-hinh--tc { justify-self: center; align-self: center; width: min(100%, calc(42dvh * 4 / 3 + 28px)); }
/* vòng 15 (Anh Phát 22/09 — ảnh hero thấp hơn hẳn khối chữ trái): ≥760px (lưới 2 cột) đảo công
   thức — CAO ảnh = đúng chiều cao cột chữ trái (đo bằng JS, biến --m1-anh-h ở trinh-chieu.js
   doAnhM1(), đo .pd-m1__trai từ badge tới hàng nút), RỘNG suy theo 4:3; max-width chặn tràn cột
   phải khi cột chữ quá cao so với bề ngang còn lại (ảnh co theo bề ngang, vẫn giữ tỉ lệ, không
   tràn sang cột chấm điều hướng). min(...,78dvh) chặn ảnh vượt quá vùng cao còn lại của màn 1 ở
   máy màn thấp (an toàn dự phòng, tránh đẩy màn 1 phải tự cuộn trong). Cột chữ luôn là mục ngang
   hàng cao nhất/gần nhất trong lưới (align-items: center) nên đổi công thức này KHÔNG làm màn 1
   cao thêm — chỉ đổi kích ảnh cho khớp cột chữ. */
@media (min-width: 760px) {
  /* Đo bằng số hẳn (--m1-anh-w/--m1-anh-h, cả hai từ trinh-chieu.js doAnhM1()) thay vì để CSS
     aspect-ratio tự suy — thử aspect-ratio + height tường minh + max-width kẹp thì trình duyệt
     KHÔNG giữ đúng 4:3 khi max-width cắt bớt bề ngang (width và height khi đó đều là giá trị
     tường minh độc lập, không còn trục nào "auto" để aspect-ratio suy ra nữa — đo bằng Playwright
     thấy méo, 508×611 thay vì 4:3). max-width: 100% vẫn giữ làm lưới an toàn (đúng bằng bề ngang
     cột lưới thật) phòng khi JS đo trễ hơn một khung hình sau khi đổi khổ. */
  .pd .pd-hinh--tc {
    width: min(var(--m1-anh-w, calc(min(46dvh, 460px) * 4 / 3)), 100%);
    height: min(var(--m1-anh-h, min(46dvh, 460px)), 78dvh);
    max-width: 100%;
    /* min-width: 0 — đo được .pd-m1 (lưới) tràn ngang ~57px dù ảnh tự nó đã hiện đúng kẹp max-width
       (Playwright: .pd-m1 scrollWidth > clientWidth). Grid item mặc định có "automatic minimum
       size" tính theo max-content của --m1-anh-w TRƯỚC khi max-width kịp kẹp ở bước định cỡ track
       lưới → đẩy cả track rộng hơn khung. min-width: 0 tắt mức tối thiểu tự động đó (khắc phục
       chuẩn cho lỗi lớp này ở CSS Grid). */
    min-width: 0;
  }
  .pd .pd-hinh--tc .pd-chan-dung { height: 100%; }
  .pd .pd-hinh--tc .pd-hinh__khung { height: 100%; width: 100%; aspect-ratio: auto; }
}

/* Màn 2 — không bán khoá */
.pd .pd-m2 { display: flex; flex-direction: column; gap: 24px; align-items: center; }
.pd .pd-m2__dau {
  width: 92px; height: 92px; background: var(--o-grad); color: var(--o-900);
  display: grid; place-items: center; font-family: var(--font-heading); font-size: 34px;
  animation: morphA 14s ease-in-out infinite;
}
.pd .pd-m2__t { font-family: var(--font-heading); font-size: clamp(30px, 5vw, 56px); line-height: 1.2; margin: 0; }
.pd .pd-m2__p { margin: 0; max-width: 56ch; font-size: clamp(16px, 2vw, 20px); line-height: 1.65; color: var(--color-neutral-300); }

/* Màn 3 — thang 5 bậc */
.pd .pd-m3 { display: flex; flex-direction: column; gap: 20px; }
.pd .pd-m3__dau { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px 36px; align-items: end; }
.pd .pd-m3__t { font-family: var(--font-heading); font-size: clamp(28px, 4.4vw, 46px); line-height: 1.18; margin: 0; }
.pd .pd-m3__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--color-neutral-300); }
.pd .pd-m3__ds { display: flex; flex-direction: column; gap: 8px; }
.pd .pd-hang {
  appearance: none; cursor: pointer; text-align: left; font-family: var(--font-body);
  border: 2px solid var(--color-neutral-800); background: #16140f; color: var(--color-bg);
  border-radius: var(--radius-md); padding: 14px 18px;
  display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  transition: transform .18s, border-color .18s;
}
.pd .pd-hang:hover { transform: translateX(6px); border-color: var(--o-500); }
/* vá 23/09/2026, lần 2 (Anh Phát nhắc lại — 36px vẫn "như số trang", chưa ra dáng "bậc N"): 36px → 64px,
   cột số 56px → 88px (mobile 40px → 80px, xem @media 480px dưới). Đã dựng 4 biến thể (48/56/64/72px)
   cho Anh xem trước khi chốt — `_qc/phat-dark/vong-21/co_so/`. Anh chọn 64px. Đây vẫn là cỡ MẶC ĐỊNH
   (áp cho bản ≤480px, xem @media dưới) — khổ rộng bị ghi đè bởi luật 24/09 ngay sau đây. */
.pd .pd-hang__so { font-family: var(--font-heading); font-size: 64px; line-height: 1; color: var(--o-500); font-variant-numeric: tabular-nums; }
/* vá 24/09/2026: đợt thử giới hạn max-width:620px cho hàng bị Anh Phát báo SAI, đã quay lui ngay
   trong ngày. Ý thật của Anh là PHÓNG TO số thứ tự ở khổ rộng — dựng 6 biến thể (64/72/80/88/100/
   112px) cho Anh xem trực tiếp ở khổ 1440, Anh CHỐT 44px (nhỏ hơn cả 64px đang chạy — đã báo rõ,
   Anh vẫn giữ chọn). Đặt SAU rule 64px ở trên để thắng cascade đúng ở khổ ≥481px; bản ≤480px không
   bị đụng vì nằm ngoài media query này, vẫn dùng 64px/cột 80px của @media riêng bên dưới. Cột số
   co theo cùng tỉ lệ buffer (font + 32px) đã dùng khi dựng 6 biến thể thử. */
@media (min-width: 481px) {
  .pd .pd-hang { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .pd .pd-hang__so { font-size: 44px; }
}
.pd .pd-hang__giua { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd .pd-hang__t { font-size: 16px; font-weight: 700; }
.pd .pd-hang__p { font-size: 14px; line-height: 1.45; color: var(--color-neutral-400); }
.pd .pd-hang__tt {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  background: var(--color-neutral-800); color: var(--color-neutral-300);
}
.pd .pd-hang.is-co-bai .pd-hang__tt { background: var(--o-600); color: var(--o-900); }
.pd .pd-hang.is-chon { background: var(--o-grad); color: var(--o-900); border-color: var(--o-300); }
.pd .pd-hang.is-chon:hover { border-color: var(--o-500); }
.pd .pd-hang.is-chon .pd-hang__so, .pd .pd-hang.is-chon .pd-hang__p { color: var(--o-900); }
.pd .pd-hang.is-chon .pd-hang__tt { background: var(--o-900); color: var(--o-200); }

/* Màn 4 — kết quả bậc */
.pd .pd-m4 {
  background: var(--o-grad); color: var(--o-900); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.4vw, 44px);
}
.pd .pd-m4__kq { display: flex; flex-direction: column; gap: 22px; }
.pd .pd-m4__k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-900); margin-bottom: 8px; }
.pd .pd-m4__t { font-family: var(--font-heading); font-size: clamp(28px, 4.4vw, 46px); line-height: 1.18; }
.pd .pd-m4__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 22px; }
.pd .pd-m4__k2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--o-900); margin-bottom: 6px; }
.pd .pd-m4__p { margin: 0; font-size: 17px; line-height: 1.6; }
.pd .pd-m4 .pd-nut-toi { align-self: flex-start; padding: 14px 24px; }

/* Màn 5 — bài đang có */
.pd .pd-m5 { display: flex; flex-direction: column; gap: 22px; }
.pd .pd-m5__t, .pd .pd-m6__t { font-family: var(--font-heading); font-size: clamp(28px, 4.2vw, 44px); line-height: 1.18; margin: 0; }
.pd .pd-tc-bai { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.pd .pd-tc-the {
  text-decoration: none; background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .2s, border-color .2s;
}
.pd .pd-tc-the.is-san { border-color: var(--o-600); }
.pd .pd-tc-the:hover { transform: translateY(-6px); border-color: var(--o-500); }
/* vòng 6: bài đã đăng có banner tràn mép trên thẻ, nhãn AI ngay dưới ảnh (chuẩn BRAIN_KENH/02).
   vòng 16 (Anh Phát 22/09 — ảnh quá dẹt 3:1 cắt mất nửa chủ thể, mô tả 4-5 dòng lấn ảnh):
   3:1 → 16:9 (khớp đúng banner-*.webp gốc 1600×900 = 16:9 → hiện trọn ảnh, không cắt thêm). */
.pd .pd-tc-the__anh { margin: -22px -22px 2px; border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; overflow: hidden; }
.pd .pd-tc-the__anh .pd-anh { height: auto; }
.pd .pd-tc-the__anh .pd-anh__img { display: block; height: auto; aspect-ratio: 16 / 9; flex: none; }
.pd .pd-tc-the__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pd .pd-tc-the__bac { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--color-neutral-800); color: var(--color-neutral-200); }
.pd .pd-tc-the.is-san .pd-tc-the__bac { background: var(--o-grad); color: var(--o-900); }
.pd .pd-tc-the__doc { font-size: 13px; color: var(--color-neutral-400); }
.pd .pd-tc-the__t { font-family: var(--font-heading); font-size: 20px; line-height: 1.34; margin: 0; color: var(--color-bg); }
/* vòng 16: 14px/không giới hạn dòng → 13px + cắt 3 dòng (ảnh 16:9 đã cao hơn, mô tả 4-5 dòng cũ đè
   ảnh xuống quá ít). Không sửa chữ bài (mo_ta gốc giữ nguyên) — chỉ cắt hiển thị bằng line-clamp. */
.pd .pd-tc-the__d {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-300);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pd .pd-tc-the__go { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--o-400); }
.pd .pd-m5__lk { font-size: 15px; font-weight: 700; align-self: flex-start; }

/* Màn 6 — bốn chuyên đề, mỗi thẻ một kiểu nền */
.pd .pd-m6 { display: flex; flex-direction: column; gap: 22px; }
.pd .pd-m6__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.pd .pd-cd {
  text-decoration: none; border: 1px solid; border-radius: var(--radius-lg); padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px; transition: transform .22s;
}
.pd .pd-cd:hover { transform: translateY(-8px); }
.pd .pd-cd__so { width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-heading); font-size: 16px; animation: morphA 14s ease-in-out infinite; }
.pd .pd-cd__t { font-family: var(--font-heading); font-size: 19px; line-height: 1.3; }
.pd .pd-cd__p { font-size: 14px; line-height: 1.55; }
.pd .pd-cd--1, .pd .pd-cd--1:hover { background: var(--o-800); border-color: var(--o-600); color: var(--color-bg); }
.pd .pd-cd--1 .pd-cd__p { color: var(--o-200); }
.pd .pd-cd--1 .pd-cd__so { background: var(--o-400); color: var(--o-900); }
.pd .pd-cd--2, .pd .pd-cd--2:hover { background: var(--color-neutral-900); border-color: var(--color-neutral-700); color: var(--color-bg); }
.pd .pd-cd--2 .pd-cd__p { color: var(--color-neutral-300); }
.pd .pd-cd--2 .pd-cd__so { background: var(--o-grad); color: var(--o-900); }
.pd .pd-cd--3, .pd .pd-cd--3:hover { background: var(--o-grad); border-color: var(--o-400); color: var(--o-900); }
.pd .pd-cd--3 .pd-cd__p { color: var(--o-900); }
.pd .pd-cd--3 .pd-cd__so { background: var(--o-900); color: var(--o-200); }
.pd .pd-cd--4, .pd .pd-cd--4:hover { background: var(--color-neutral-900); border-color: var(--o-600); color: var(--color-bg); }
.pd .pd-cd--4 .pd-cd__p { color: var(--color-neutral-300); }
.pd .pd-cd--4 .pd-cd__so { background: var(--o-500); color: var(--o-900); }

/* Màn 7 — vì sao nghe tôi */
.pd .pd-m7 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: clamp(24px, 3.4vw, 44px); align-items: center; }
.pd .pd-m7__trai { display: flex; flex-direction: column; gap: 16px; }
.pd .pd-m7__t, .pd .pd-m8__t { font-family: var(--font-heading); font-size: clamp(26px, 3.8vw, 40px); line-height: 1.2; margin: 0; }
.pd .pd-lydo {
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700); border-left: 5px solid var(--o-500);
  border-radius: var(--radius-md); padding: 16px 18px;
}
.pd .pd-lydo__t { display: block; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.pd .pd-lydo__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-300); }
.pd .pd-m7__anh { position: relative; padding: 14px; }
.pd .pd-m7__nen { position: absolute; inset: 0; background: var(--o-grad); animation: morphA 19s ease-in-out infinite; }
.pd .pd-m7__khung { position: relative; overflow: hidden; border-radius: var(--radius-lg); height: min(46dvh, 340px); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }

/* Màn 8 — sáu thứ đang chạy thật */
.pd .pd-m8 { display: flex; flex-direction: column; gap: 20px; }
.pd .pd-m8__dau { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.pd .pd-m8__t { line-height: 1.18; }
.pd .pd-m8__phu { font-size: 15px; color: var(--color-neutral-300); max-width: 44ch; }
.pd .pd-m8__luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 14px; }
.pd .pd-sau {
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;
}
.pd .pd-sau__anh { height: min(13dvh, 96px); }
/* vòng 6: khung có ảnh AI → nhãn (~32px) nằm trong khung, ảnh chỉ còn ~2/3. Màn rộng + đủ cao: nới khung đúng bằng
   dòng nhãn để ảnh giữ cỡ thiết kế (đo 1280×720 · 1440×900 · 768×1024: màn 8 vẫn không tràn). Màn hẹp (màn 8 vốn đã
   cuộn, 1368px trên khung 844) và màn thấp (1024×600 sẽ tràn 28px): giữ nguyên. */
@media (min-width: 721px) and (min-height: 700px) {
  .pd .pd-sau__anh:has(.pd-anh__ai) { height: calc(min(13dvh, 96px) + 32px); }
}
.pd .pd-sau__than { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 5px; }
.pd .pd-sau__t { font-size: 15px; font-weight: 700; line-height: 1.38; }
.pd .pd-sau__p { font-size: 13px; line-height: 1.45; color: var(--color-neutral-400); }
/* vòng 7: dòng "ai dùng" chuyển từ Về tôi (nguyên văn) — cùng kiểu .pd-vt-sau__ai cũ, thu theo cỡ thẻ màn 8.
   --o-300 trên --color-neutral-900 ≈ 8,6:1 */
.pd .pd-sau__ai { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--o-300); margin-top: 2px; }
/* Màn rộng nhưng thấp: thêm dòng này làm màn 8 tràn (đo 1024×600: 0 → 14px) → ẩn ở cỡ đó (J3, BAN_DO_GOP_VE_TOI.md 3c).
   Vá vòng 8b (P3 🟡2): ngưỡng 700 → 640px — laptop 1366×657 / 1280×680 hiện dòng này mà màn 8 vẫn tràn 0px.
   Màn hẹp vốn đã cuộn trong màn → giữ. */
@media (min-width: 721px) and (max-height: 640px) {
  .pd .pd-sau__ai { display: none; }
}

/* Màn 9 — giờ làm gì tiếp
   vòng 18 (bẫy CAT_DAU_VIET đo 22/09): grid mặc định align-items:stretch ép 2 thẻ .pd-m9__keu/.pd-m9__the
   cao bằng nhau theo thẻ THẤP hơn; thẻ nào chữ dài hơn bị overflow:hidden (chặn quầng sáng trang trí)
   cắt luôn phần chữ tràn (549 > 469px ở 1440px lúc đo). align-items: start → mỗi thẻ cao theo đúng nội
   dung của nó, không còn bị thẻ kia ép ngắn lại. */
.pd .pd-m9 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: start; }
.pd .pd-m9__keu {
  position: relative; overflow: hidden; background: var(--o-800); border: 1px solid var(--o-600);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 16px;
}
.pd .pd-m9__blob { position: absolute; bottom: -80px; right: -60px; width: 240px; height: 240px; background: var(--o-500); opacity: .4; filter: blur(50px); animation: morphB 15s ease-in-out infinite; }
.pd .pd-m9__trong { position: relative; display: flex; flex-direction: column; gap: 16px; }
.pd .pd-m9__t { font-family: var(--font-heading); font-size: clamp(26px, 3.4vw, 38px); margin: 0; line-height: 1.2; }
.pd .pd-m9__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--o-200); }
.pd .pd-m9__trong > .pd-nut { align-self: flex-start; }
/* vá vòng 5 (P3 🟡2): --o-300 đo điểm ảnh thật chỉ 3,52–4,16:1 trên nền cam đậm có đốm. Thử --o-200:
   ca tệ nhất (đốm cam trôi ngay sau dòng, khổ 390) còn 4,31:1 → dùng --o-100 như dòng ngay dưới. */
.pd .pd-m9__nho { margin: 0; font-size: 13px; color: var(--o-100); }
/* dòng "Báo cáo riêng… để lại email" (vá vòng 4, J3 #2) nằm sát đốm cam mờ góc dưới phải:
   đo điểm ảnh thật, nền sáng nhất sau dòng là #a75014 → --o-300 chỉ 3,4:1, --o-400 (liên kết) 2,7:1.
   --o-100 cho cả dòng + liên kết: 4,99:1 ở ca tệ nhất. */
.pd .pd-m9__nho--sang, .pd .pd-m9__nho--sang a, .pd .pd-m9__nho--sang a:hover { color: var(--o-100); }
.pd .pd-m9__the {
  background: var(--color-neutral-900); border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px;
}
.pd .pd-m9__h3 { font-family: var(--font-heading); font-size: 22px; margin: 0; line-height: 1.26; }
.pd .pd-m9__p2 { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); }
.pd .pd-m9__p2 strong { color: var(--color-bg); }
.pd .pd-nhan { display: contents; }
.pd .pd-nhan .pd-nut-vien { align-self: flex-start; }
.pd .pd-nhan .pd-nut-vien:hover { background: var(--o-500); color: var(--o-900); }
.pd .pd-nhan__loi { margin: 0; font-size: 13px; color: var(--o-300); }
/* dòng giữ dữ liệu ngay dưới ô nhắn (vá vòng 3) — kéo sát ô hơn nhịp 14px của thẻ */
.pd .pd-nhan__ghi { margin: -6px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-400); }
/* nhãn thật cho ô nhắn (vá vòng 2) — trước chỉ có placeholder */
.pd .field > .pd-nhan__l { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-neutral-300); }
.pd .pd-m9__ky { margin-top: auto; font-size: 13px; color: var(--color-neutral-500); }
/* vòng 7: dòng "Kênh nhắn" (chuyển từ mục #lien-he Về tôi, chỉ in khi du-lieu.json có kênh) nằm trên thẻ tối,
   không phải thẻ cam → chữ trung tính; dòng ghi nhận AI (phap_ly 2.2) = chân trang của trang chủ trình chiếu */
.pd .pd-m9__kenh { color: var(--color-neutral-300); font-size: 14px; }
.pd .pd-m9__ai { margin-top: -8px; font-size: 12px; line-height: 1.5; color: var(--color-neutral-400); }

/* Chấm điều hướng + thanh tiến độ: chỉ có ý nghĩa ở chế độ trình chiếu */
.pd .pd-deck__tien, .pd .pd-deck__cham { display: none; }

/* ==========================================================================
   CHẾ ĐỘ TRÌNH CHIẾU (có JS)
   ========================================================================== */
html.js body.pd-co-trinh-chieu { overflow: hidden; }
html.js .pd .pd-deck { position: fixed; inset: 0; overflow: hidden; }

html.js .pd .pd-deck__tien {
  display: block; position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 30;
  background: var(--color-neutral-800);
}
html.js .pd .pd-deck__tien-thanh { height: 100%; width: 11.1%; background: var(--o-grad-flat); transition: width .6s cubic-bezier(.72, 0, .28, 1); }

html.js .pd .pd-deck__cham {
  display: flex; position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 30;
  flex-direction: column; gap: 10px; align-items: center;
}
.pd .pd-cham {
  cursor: pointer; appearance: none; border: none; padding: 0;
  width: 10px; height: 10px; border-radius: 999px; background: var(--color-neutral-700);
  transition: width .25s, background .25s;
}
.pd .pd-cham:hover { background: var(--o-400); }
.pd .pd-cham[aria-current="step"] { width: 28px; background: var(--o-500); }
/* Vùng bấm ≥44px (vá vòng 2 #15) ở màn hẹp / cảm ứng: nút thành ô 44×44 trong suốt, chấm
   10px (28px khi đang xem) vẽ bằng ::before — cỡ chấm nhìn thấy không đổi; chỉ khoảng cách
   giữa các chấm giãn 20 → 44px. Ô nhắn màn 9: 36 → 44px.
   Vá vòng 4 (P3 🟠2): cột ô bấm 44px trước đè 4–11% mép phải thẻ ở 320–414px → chạm thẻ bị
   nhảy màn. Nay cột dạt sát mép phải (chiếm đúng 44px lề) và mỗi màn chừa lề phải 48px, nên
   không ô bấm nào của chấm chồng lên nội dung. Hàng bậc màn 3: nhãn "Đang viết/Đã có bài"
   xuống dòng dưới tên bậc ở ≤480px để cột chữ không bị bóp khi lề hẹp lại.
   Vá vòng 8b (P3 🟠1): 721–1279px dùng chuột trước không có lề 48px → cột chấm (x≈987 ở 1024) đè mép ảnh
   công trường màn 7, khung chân dung màn 1, thẻ phần mềm màn 8. Nâng ngưỡng lên 1279px; từ 1280px không còn đè. */
@media (max-width: 1279px), (pointer: coarse) {
  html.js .pd .pd-deck__cham { gap: 0; right: 0; }
  html.js .pd .pd-man { padding-right: 48px; }
  /* vá vòng 5 (P3 🟡1): hover dính lại sau khi chạm + dịch phải 6px làm mép thẻ lấn khe 4px tới
     cột chấm → chạm mép thẻ là nhảy màn. Màn hẹp / cảm ứng: chỉ đổi viền, không dịch. */
  .pd .pd-hang:hover { transform: none; }
  .pd .pd-m5__lk { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }   /* 24 → 44 (P3 🟠3) */
  .pd .pd-cham, .pd .pd-cham:hover, .pd .pd-cham[aria-current="step"] {
    width: 44px; height: 44px; background: transparent; display: grid; place-items: center;
  }
  .pd .pd-cham::before {
    content: ""; width: 10px; height: 10px; border-radius: 999px;
    background: var(--color-neutral-700); transition: width .25s, background .25s;
  }
  .pd .pd-cham:hover::before { background: var(--o-400); }
  .pd .pd-cham[aria-current="step"]::before { width: 28px; background: var(--o-500); }
  .pd .pd-nhan .input { min-height: 44px; }
}
@media (max-width: 480px) {
  .pd .pd-hang { grid-template-columns: 80px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; }
  .pd .pd-hang__so { grid-row: span 2; }
  .pd .pd-hang__tt { grid-column: 2; justify-self: start; }
}

html.js .pd .pd-deck__ray {
  display: flex; flex-direction: column; height: 100%;
  will-change: transform;
  transition: transform .72s cubic-bezier(.72, 0, .28, 1);
}
html.js .pd .pd-man {
  flex: none; height: 100%; width: 100%;
  margin: 0; align-self: center;
  display: grid; grid-template-columns: minmax(0, 1fr);
  /* "safe": màn cao hơn khung thì bám mép trên để cuộn tới được phần đầu —
     bản gốc để "center" làm phần đầu tràn ra ngoài, không cuộn tới được. */
  align-content: center; align-content: safe center;
  justify-items: stretch;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
/* Vòng 11: màn 5 có 6 thẻ (2 hàng) → cao hơn khung ở mọi khổ nên bám mép trên; đệm 78px thấp hơn mép dưới thanh
   điều hướng (~80px) → tiêu đề "Bài đang có" chạm thanh (giao.py, 5 khổ 768–1440). Đệm theo mép dưới thanh đo bằng JS,
   như màn hẹp (≤720px vẫn dùng luật 88px phía dưới). */
html.js .pd .pd-man--5 { padding-top: max(78px, calc(var(--nav-day, 0px) + 12px)); }

/* Trạng thái từng màn: dang = đang xem · truoc = đã qua · sau = sắp tới */
html.js .pd [data-pane], html.js .pd [data-morph] {
  transition: opacity .58s ease, transform .72s cubic-bezier(.72, 0, .28, 1), filter .58s ease;
  will-change: transform, opacity, filter;
}
html.js .pd [data-pane] { opacity: 0; transform: scale(.86) translateY(6%); filter: blur(12px); }
html.js .pd [data-pane][data-o="truoc"] { opacity: 0; transform: scale(1.14) translateY(-5%); filter: blur(10px); }
html.js .pd [data-pane][data-o="dang"] { opacity: 1; transform: none; filter: none; }
html.js .pd [data-hero-photo] { opacity: 0; transform: scale(.72) rotate(-7deg); }
html.js .pd [data-hero-photo][data-o="dang"] { opacity: 1; transform: none; }

/* Không JS: thanh điều hướng dính theo trang cuộn thay vì cố định */
html:not(.js) .pd .pd-nav--deck { position: sticky; left: auto; transform: none; margin: 16px auto 0; max-width: 1120px; }

@media (max-width: 720px) {
  .pd .pd-man { padding: 88px 16px 48px; }
  /* Ở màn hẹp thanh điều hướng gãy dòng, cao ~90px — cao hơn khoảng đệm 88px của
     bản gốc nên che mất đầu mỗi màn. JS đo mép dưới thanh (--nav-day) để đẩy xuống. */
  html.js .pd .pd-man { padding-top: max(88px, calc(var(--nav-day, 0px) + 12px)); }
}
@media (max-height: 760px) {
  .pd .pd-man { padding: 92px 20px 30px; }
  [data-slide] h1 { font-size: clamp(24px, 3.4vw, 38px) !important; }
  [data-slide] h2 { font-size: clamp(21px, 3vw, 32px) !important; }
  [data-slide] h3 { font-size: 17px !important; }
  [data-slide] p { font-size: 15px !important; line-height: 1.5 !important; }
  [data-slide] [data-row] { padding: 10px 14px !important; }
  [data-slide] [data-row] strong { font-size: 15px !important; }
  /* vá 24/09/2026 (Ngọc đo trên site sống — Anh Phát báo số bị ép 13px khi cửa sổ thấp ≤760px):
     .pd-hang__so cũng là 1 `span` bên trong [data-row] nên dính luật 13px !important này, thắng
     luôn cỡ 44/64px đã chốt (cùng !important nhưng đặt SAU trong file → thắng cascade). Loại trừ
     .pd-hang__so ra khỏi selector — .pd-hang__p (mô tả) và .pd-hang__tt (nhãn) vẫn giữ 13px như cũ. */
  [data-slide] [data-row] span:not(.pd-hang__so) { font-size: 13px !important; }
  /* vòng 15: công thức 30dvh cũ bỏ — height: min(var(--m1-anh-h,…), 78dvh) ở mục Màn 1 đã tự co
     theo màn thấp; để cả `width` cố định ở đây đè lên sẽ phá tỉ lệ 4:3 (width + height cùng
     definite thì aspect-ratio bị bỏ qua theo spec). */
}

@media (prefers-reduced-motion: reduce) {
  html.js .pd .pd-deck__ray, html.js .pd [data-pane], html.js .pd [data-morph] { transition: none !important; }
}
@media print {
  html.js body.pd-co-trinh-chieu { overflow: visible; }
  html.js .pd .pd-deck { position: static; overflow: visible; }
  html.js .pd .pd-deck__ray { transform: none !important; height: auto; display: block; }
  html.js .pd .pd-man { height: auto; min-height: 0; display: block; overflow: visible; break-inside: avoid; }
  html.js .pd .pd-deck__tien, html.js .pd .pd-deck__cham { display: none; }
  .pd [data-pane], .pd [data-morph] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .pd .pd-nav--deck { position: static !important; transform: none !important; margin: 16px auto 0; }
}

/* ==========================================================================
   vòng 21 (23/09 — "bỏ deck dưới 768px", đề xuất D): dưới 768px, trang chủ trở về một trang cuộn
   thường như KHÔNG có JS — chỉ nội dung được "cởi" khỏi khung deck (không xoá/thêm gì, cùng công
   thức đã dùng ở @media print ngay trên, đổi mục tiêu từ "in giấy" sang "màn hẹp"). trinh-chieu.js
   đã early-return dưới 768px (không bắt phím/lăn chuột/vuốt) — khối này chỉ lo phần CSS tương ứng.
   ========================================================================== */
@media (max-width: 767px) {
  html.js body.pd-co-trinh-chieu { overflow: visible !important; }
  html.js .pd .pd-deck { position: static !important; overflow: visible !important; }
  html.js .pd .pd-deck__ray { transform: none !important; height: auto !important; display: block !important; }
  html.js .pd .pd-man {
    height: auto !important; min-height: 0 !important; display: block !important; overflow: visible !important;
    padding: 56px 16px 40px !important;
  }
  html.js .pd .pd-deck__tien, html.js .pd .pd-deck__cham, html.js .pd .pd-man__goi-y { display: none !important; }
  html.js .pd [data-pane], html.js .pd [data-morph], html.js .pd [data-hero-photo] {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
  html.js .pd .pd-nav--deck { position: sticky !important; left: auto !important; transform: none !important; margin: 16px auto 0; max-width: 1120px; }
}