/* ============================================================
   trang-chu.css — TRANG CHỦ v3, tiền tố .tc-
   Nạp SAU nen.css → nhip.css. ⛔ Trang công khai KHÔNG nạp khung.css.

   🔴 CHỦ DỰ ÁN CHỈ THÍCH KHỐI XẾP HẠNG ở bản v2, ba khối kia "không ổn":
      trống trải thiếu thẻ · khối mở đầu quá nhiều chữ · vẫn phẳng.

      Manh mối: khối xếp hạng là khối DUY NHẤT ở v2 dùng **thẻ có nền và viền**.
      Bốn khối kia là ảnh trần và chữ trần đặt thẳng lên nền trang — nên chúng
      đọc như "chưa làm xong", dù bố cục đã đúng.

   ⇒ v3 sửa đúng ba chỗ đó, ⛔ vẫn không đụng màu và font đã chốt:

   ① NGÔN NGỮ THẺ CHO CẢ TRANG. Mọi khối nằm trong `.tc-khung` — nền `--v20`,
      viền `--n30`, bo góc. Thẻ quan trọng thêm ánh sáng góc `--g-the` và viền
      tím. 🔴 MỘT định nghĩa thẻ duy nhất, ⛔ không mỗi khối một kiểu khung:
      khung mỗi nơi một kiểu còn tệ hơn ⛔ không có khung nào.

   ② KHỐI MỞ ĐẦU THÀNH KỆ SÁCH. Bỏ đoạn văn dài, thay bằng **ba bìa lớn** —
      bìa đầu to hơn hai bìa sau, mỗi bìa một dòng ngắn. Vào trang là thấy
      TRUYỆN, ⛔ không phải thấy một bài đọc.

   ③ CHỐNG PHẲNG BẰNG NỀN XEN KẼ. Hai dải nền `--v15` trải hết chiều ngang
      xen giữa các khối nền thường. ⚠️ Chỉ đổi nền, ⛔ không thêm màu mới —
      `--v15` đã nằm trong dải tím.
      🔴 ⛔ Không dùng hoạ tiết trang trí, ⛔ không bìa nghiêng, ⛔ không đổ
      bóng loè loẹt. Mấy thứ đó "wow" được đúng một tuần rồi thành cũ, mà lại
      là thứ đầu tiên vỡ trên màn hình nhỏ.
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   ① THẺ — MỘT định nghĩa, cả trang dùng chung
   ══════════════════════════════════════════════════════════ */
.tc-khung{border:1px solid var(--n30);border-radius:var(--bo);background:var(--v20);
  padding:26px}
@media (max-width:600px){.tc-khung{padding:18px}}

/* Thẻ NHẤN — dùng cho khối mở đầu. ⛔ Chỉ MỘT thẻ nhấn trên cả trang;
   nhấn hai chỗ là ⛔ không nhấn chỗ nào. */
.tc-khung.nhan{border-color:var(--v40);background-image:var(--g-the)}

/* Dải nền xen kẽ — trải hết chiều ngang, ⛔ không bo góc (nó là nền, không phải thẻ) */
.tc-nen{background:var(--v15);border-block:1px solid var(--n30)}

/* Đầu khối — dùng lại .tieu-de-khoi của nen.css, chỉ thêm khoảng cách trong thẻ */
.tc-khung > .tieu-de-khoi{margin-bottom:20px}

/* ══════════════════════════════════════════════════════════
   ② KỆ ĐỀ CỬ — bốn bìa ĐỀU nhau
   🔴 Bản v3 để 1.5fr + 1fr + 1fr với bìa lớn: chủ dự án phản hồi khối này
      "chiếm quá nhiều diện tích mà không cân". Đúng — bìa đầu to gấp rưỡi
      làm hàng bị lệch, mà cả khối ăn gần trọn màn hình đầu tiên.
   ⇒ Bốn bìa BẰNG NHAU, nhỏ lại. Thứ bậc chuyển sang chỗ khác: khối này nằm
      trên cùng và có viền tím — thế là đủ, ⛔ không cần to thêm.
   ══════════════════════════════════════════════════════════ */
.tc-ke{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--khe)}
@media (max-width:900px){.tc-ke{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tc-ke{grid-template-columns:repeat(2,1fr);gap:16px}}

.tc-ke > a{display:block;min-width:0}
.tc-ke .bia{margin-bottom:12px;box-shadow:var(--sh-bia);transition:transform .2s}
.tc-ke > a:hover .bia{transform:translateY(-3px)}
.tc-ke .ten{display:block;font-family:var(--ff);font-weight:600;
  font-size:var(--fs-sub);color:var(--n99);line-height:var(--lh-td);
  letter-spacing:.015em;text-wrap:balance}
.tc-ke > a:hover .ten{color:var(--v90)}
.tc-ke .loi{display:block;margin-top:7px;font-size:var(--fs-small);color:var(--n70);
  line-height:var(--lh-than);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-ke .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.tc-ke .meta span{padding:2px 9px;border-radius:999px;border:1px solid var(--n40);
  font-size:var(--fs-eyebrow);color:var(--n70);line-height:1.7;white-space:nowrap}
.tc-ke .meta span[data-v="dq"]{border-color:var(--v50);background:var(--v25);color:var(--v90)}
.tc-ke .meta span[data-v="full"]{border-color:var(--xanh);color:var(--xanh)}

.tc-gioi{margin-bottom:14px;font-family:var(--ff);font-size:var(--fs-body);
  font-weight:400;color:var(--n70);letter-spacing:0;line-height:var(--lh-than);max-width:62ch}
.tc-gioi b{color:var(--n90);font-weight:500}

/* ══════════════════════════════════════════════════════════
   ③ DẢI THỂ LOẠI — thẻ MẢNH, cố ý thấp để phá nhịp
   ══════════════════════════════════════════════════════════ */
/* 🔴 "CHƯA CÂN" — ba cột vẫn sai, chỉ sai êm hơn.
   Chủ dự án chụp màn hình: 9 viên tràn thành 8 + 1, viên lẻ "Đô thị" rơi
   xuống dòng hai, để lại một khoảng trống lớn ở góc dưới bên phải. Nhãn và
   "Tất cả" thì căn giữa theo chiều dọc nên trôi lơ lửng giữa hai dòng viên.

   Gốc của nó: **`flex-wrap` ⛔ không bao giờ cân được**. Viên rộng theo độ dài
   chữ, số viên lọt một hàng đổi theo bề rộng màn hình, nên hàng cuối lúc thì
   đầy lúc thì còn một viên lẻ. ⛔ Không có con số viên nào "đúng" cả —
   1240px thì 8 lọt, 1100px thì 7, và lần nào cũng thừa ra vài cái.

   ⇒ Bỏ hẳn `flex-wrap`, đổi sang **LƯỚI CỘT ĐỀU**. Viên bằng nhau, hàng luôn
     đầy, ⛔ không còn viên lẻ và ⛔ không còn khoảng hở. Chọn **9 viên** vì 9
     chia chẵn cho cả 9 · 3 · 1 — ba mốc màn hình đều ra hàng đầy.
     🔴 Đổi số viên thì phải đổi luôn số cột, ⛔ không thì lỗi này quay lại.

   Và tách làm HAI DÒNG: dòng trên là nhãn + lối đi tiếp, dòng dưới là lưới.
   Nhãn thôi trôi lơ lửng, mà khối vẫn thấp hơn các khối khác nên vẫn phá nhịp
   đúng như đã chốt. */
.tc-dai{border:1px solid var(--n30);border-radius:var(--bo);background:var(--v20);
  padding:16px 20px 18px}

/* ── Dòng trên: nhãn ↔ lối đi tiếp ── */
.tc-dai .dau{display:flex;align-items:center;gap:16px;margin-bottom:13px}
.tc-dai .nhan{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--v80);line-height:1.7}
.tc-dai .nhan svg{width:15px;height:15px;flex-shrink:0;
  /* ⚠️ triệt khoảng giãn chữ .24em cộng dồn vào bên phải icon */
  margin-right:-.24em}
.tc-dai .dau .vach{flex:1;height:1px;min-width:20px;background:var(--g-vach)}
.tc-dai .het{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n70);line-height:1.7}
.tc-dai .het:hover{color:var(--v80)}

/* 🔴 §A1 (L20) — MOBILE: dải `.dau` có HAI đầu `white-space:nowrap` (`.nhan` 190px + `.het` 150px)
   ⇒ tổng ~392px thò ra khỏi chỗ thật ~314px, đẩy CẢ TRANG sang phải. Cho xuống dòng + hạ giãn chữ.
   ⚠️ ⛔ KHÔNG vá ở lớp v5 — lỗi này có ở CẢ index.html/bản thật nên phải sửa ở trang-chu.css. */
@media (max-width:620px){
  .tc-dai{padding:14px 14px 16px}
  /* 🔴 §D (L397) — NÚT «Xem tất cả» PHẢI NẰM CÙNG hàng tiêu đề (chị chốt qua mockup
     the-pho-bien-mobile.html phương án B; ⛔ để nút rớt dòng riêng như trước, trông như mục độc
     lập chứ ⛔ phải nút phụ). BỎ flex-wrap ⇒ nhãn + vạch + nút KHÔNG xuống hàng; vạch co
     min-width nhỏ nhường chỗ hai đầu nowrap; hạ giãn chữ để hai đầu vừa 390px ⛔ đẩy trang. */
  .tc-dai .dau{flex-wrap:nowrap;gap:0 9px}
  .tc-dai .dau .vach{min-width:6px}
  .tc-dai .nhan{letter-spacing:.08em}
  .tc-dai .het{letter-spacing:.06em}
}

/* ── Dòng dưới: chip THẺ «Tìm theo thể loại» — MỘT HÀNG CUỘN NGANG ở MỌI bề rộng (L515 §A) ── */
/* 🔴 §C (L396) — BỎ lưới 9 cột đều. Lưới ép mọi chip CÙNG bề rộng bất kể tên dài ngắn ⇒ chip
   tên dài («Nam chính có bệnh») ⛔ vừa ô, bị `overflow:hidden` + `justify-content:center` CẮT
   CẢ HAI ĐẦU (chị thấy «am chính có bệnh», mất chữ N) mà ⛔ hiện dấu ba chấm nào — comment L393
   viết «cắt bằng ba chấm» là SAI. Chip/pill đúng chuẩn: NỘI DUNG quyết định bề rộng. Bài học GIỮ:
   ⛔ cột bằng nhau, ⛔ `overflow:hidden` ép CẮT chữ (nowrap + `overflow-x:auto` là CUỘN — chip hiện
   ĐỦ, tới được bằng kéo — KHÁC hẳn cắt câm).
   (Trước đây khối này là chip GENRE tên ngắn nên lưới chưa lộ; L393 đổ chip THẺ tên dài vào ⇒ vỡ.) */
/* 🔴 §A (L515, M.576) — MỘT HÀNG mọi bề rộng: chị soi prod thấy desktop 8 chip rớt 1 xuống hàng hai
   «hơi kì» ⇒ áp NGUYÊN phương án B (cuộn ngang) — mobile ≤620 đã dùng từ L397 §D (chị bấm thử 5
   phương án trên thẻ THẬT rồi chốt B) — lên rule GỐC cho MỌI bề rộng. Chip tự co theo tên, mờ dần
   mép phải báo «còn nữa», thanh cuộn mảnh 4px ⛔ ẩn hẳn (ẩn hết thì ⛔ ai biết kéo). ⛔ ẩn chip tràn
   (cắt câm — L506 §H) · ⛔ bớt số chip (tên dài ngắn thất thường, bớt mấy cũng có ngày rớt).
   🔴 SỬA 28/08: trước đây phương án B nằm trong `@media (max-width:620px)` ĐẶT SAU rule desktop
      (rule-sau-thắng, để mobile override `flex-wrap:wrap`); nay hợp nhất thẳng vào rule gốc ⇒ GỠ hẳn
      @media 620 (desktop = mobile, ⛔ còn hai nhánh). GIỮ bài học RULE-SAU-THẮNG làm sử: đặt override
      cùng selector + cùng độ ưu tiên mà TRƯỚC rule đích là LỖI CÂM — rule đích (sau) thắng. */
.tc-dai .vien{display:flex;flex-wrap:nowrap;gap:9px;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:6px;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
  mask-image:linear-gradient(90deg,#000 88%,transparent)}
.tc-dai .vien::-webkit-scrollbar{height:4px}
.tc-dai .vien::-webkit-scrollbar-thumb{background:var(--v40);border-radius:99px}
.tc-dai .vien a{display:inline-flex;align-items:center;flex:none;scroll-snap-align:start;white-space:nowrap;
  padding:9px 14px;border-radius:999px;border:1px solid var(--n40);
  background:var(--v15);font-size:var(--fs-small);color:var(--n80);line-height:1.5}
.tc-dai .vien a:hover{border-color:var(--v60);background:var(--v25);color:var(--n99)}
/* (L393 §D) số truyện trong chip «Thẻ phổ biến» — mờ, sát tên, ⛔ nong ô (tabular cho thẳng cột). */
.tc-dai .vien a em{margin-left:6px;font-style:normal;color:var(--n60);font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════
   ④ BAN SỦNG — khối chủ dự án ĐÃ DUYỆT (top 3 thẻ + hàng gọn)
   🔴 ⛔ BỎ TAB gộp hai bảng. Chủ dự án muốn **Phong Vân giữ nguyên như cũ**
      (dải 6 bìa có số hạng). Hoá ra tách rời lại đúng hơn: hai bảng nay có
      HAI HÌNH DẠNG khác nhau, nên ⛔ không còn đọc như bị lặp — đúng cái
      "đổi nhịp" em đi tìm, mà lại đơn giản hơn cách gộp tab.
   ══════════════════════════════════════════════════════════ */
.tc-bang-dau{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.tc-bang-dau .toggle-ky{margin-left:auto}

/* Bục ba bậc (component dùng chung: ④ Ban Sủng + /xep-hang) đã DỜI sang nen.css
   — Lệnh 12 §B. Trang này chỉ còn phần khung ④ (.tc-*) ở trên. */

/* ══════════════════════════════════════════════════════════
   DẢI THÔNG BÁO — MỘT hàng ngay dưới hero
   🔴 Chuyển từ khối cuối trang lên đây. Dưới đó nó chiếm trọn một ô lưới để
      hiện 6 mục, mà thông báo ⛔ không phải thứ người ta vào web để đọc.
   ⚠️ Ba mục xếp ba cột nên cả dải chỉ cao MỘT hàng.
   ══════════════════════════════════════════════════════════ */
/* 🔴 "THÔNG BÁO VÀ TÌM THEO THỂ LOẠI GIỐNG NHAU, ĐƠN ĐIỆU" — chủ dự án chỉ ra.
   Đúng: hai khối cùng là **thẻ bo góc có viền**, cùng nhãn chữ hoa giãn rộng
   bên trái, cùng một liên kết bên phải. Hai vai khác nhau mà mặc đồng phục.
   ⇒ Đổi HÌNH DẠNG, ⛔ không đổi màu: thông báo thành **BĂNG tràn hết chiều
     ngang**, ⛔ không bo góc, ⛔ không viền quanh — chỉ hai vạch trên dưới.
     Băng là hình dạng quy ước của thông báo hệ thống; thẻ bo góc là hình dạng
     của một khối nội dung. Nhìn phát biết ngay hai thứ khác vai. */
.tc-tin-bang{background:var(--v15);border-block:1px solid var(--n30)}
.tc-tin{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:20px;padding:11px 0}
@media (max-width:980px){.tc-tin{grid-template-columns:1fr;row-gap:12px}}
.tc-tin .nhan{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--v80);line-height:1.7}
.tc-tin .nhan svg{width:15px;height:15px;flex-shrink:0;margin-right:-.22em}
.tc-tin .muc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
@media (max-width:1180px){.tc-tin .muc{grid-template-columns:1fr}}
.tc-tin .muc a{display:flex;align-items:center;gap:10px;min-width:0;
  padding:5px 8px;border-radius:var(--bo-nho);transition:background .16s}
.tc-tin .muc a:hover{background:var(--v25)}
.tc-tin .cham{flex-shrink:0;width:6px;height:6px;border-radius:999px;background:var(--n50)}
.tc-tin .muc a[data-moi="1"] .cham{background:var(--vang)}
.tc-tin .noi{flex:1;min-width:0;font-size:var(--fs-small);color:var(--n80);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tin .muc a:hover .noi{color:var(--n99)}
.tc-tin .luc{flex-shrink:0;font-size:var(--fs-eyebrow);color:var(--n60);line-height:1.7}
.tc-tin .het{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--n70);line-height:1.7}
.tc-tin .het:hover{color:var(--v80)}

/* ══════════════════════════════════════════════════════════
   ⑤ TRUYỆN MỚI — mỗi ô là MỘT THẺ, ⛔ không phải bìa trần
   ══════════════════════════════════════════════════════════ */
.tc-luoi{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--khe)}
@media (max-width:1000px){.tc-luoi{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.tc-luoi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tc-o{display:block;min-width:0;padding:12px;border-radius:var(--bo);
  border:1px solid var(--n30);background:var(--v15);transition:border-color .16s,background .16s}
.tc-o:hover{border-color:var(--v50);background:var(--v25)}
.tc-o .bia{margin-bottom:11px}
.tc-o .ten{display:block;font-size:var(--fs-small);color:var(--n95);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-o:hover .ten{color:var(--v90)}
.tc-o .tg{display:block;margin-top:5px;font-size:var(--fs-eyebrow);color:var(--n60);line-height:1.6}

/* ══════════════════════════════════════════════════════════
   ⑥ HAI CỘT CUỐI — mỗi khối một thẻ
   ══════════════════════════════════════════════════════════ */
/* 🔴 "CHÈN Ở TRÊN NHƯNG ⛔ KHÔNG GIẢI QUYẾT ĐƯỢC CHỖ TRỐNG Ở DƯỚI" — đúng.
   Nguyên nhân nằm ở CHIỀU CAO DÒNG, ⛔ không phải ở số khối:
     · Tân Chương        : bìa 38px   → dòng ~62px
     · Chuẩn bị diện kiến: ⛔ không ảnh → dòng ~44px
     · Ban Sủng Bảng     : avatar 28px → dòng ~48px
   Cùng 6 mục mà ba chiều cao khác nhau thì ba cột ⛔ không đời nào bằng nhau.
   ⇒ Ba dòng CÙNG một bộ xương: [ảnh 38px] [chữ] [mốc thời gian].
     Bằng nhau theo CẤU TRÚC, ⛔ không phải bằng nhờ canh tay.
   ⇒ Và gộp về MỘT thẻ ba cột — hai thẻ cạnh nhau thì thẻ thấp hơn lại hở
     một lần nữa ở tầng ngoài. */
.tc-doi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--khe-lon);align-items:start;
  padding:26px;border:1px solid var(--n30);border-radius:var(--bo);background:var(--v20)}
@media (max-width:1080px){.tc-doi{grid-template-columns:1fr;gap:var(--khe)}}
@media (max-width:600px){.tc-doi{padding:18px}}
.tc-doi .cot{min-width:0}

.tc-ds{display:grid;gap:2px}
/* 🔴 MỘT bộ xương cho cả ba cột cuối trang — ⛔ đừng tách kiểu riêng cho từng
   cột, vì tách là chiều cao dòng lệch lại và chỗ trống quay về.
   🔴 (L259 §C) DÒNG = con TRỰC TIẾP `> a` (Tân Chương·Vừa hoàn thành) HOẶC `> .hang`
   (Ban Sủng — dòng ⛔ còn là <a>, có hai link con). Dùng `>` để luật dòng ⛔ đè lên
   <a> con bên trong .hang (§9: đổi thẻ mà ⛔ đổi selector = lỗi câm). */
.tc-ds > a, .tc-ds > .hang{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:11px 12px;border-radius:var(--bo-nho);
  min-width:0;transition:background .16s}
.tc-ds > a:hover{background:var(--v25)}
.tc-ds .anh{width:38px;border-radius:var(--bo-bia);overflow:hidden;
  background:var(--v25);aspect-ratio:5/7}
.tc-ds .anh img{width:100%;height:100%;object-fit:cover;display:block}
/* Avatar tròn cho người (Ban Sủng Bảng, M.155) — component <x-avatar> = .avatar (một nguồn).
   .avatar (nen.css) tự lo bo tròn + border + fallback chữ cái đầu; ở đây chỉ đặt KÍCH THƯỚC
   theo cột 38px để dòng vẫn cao bằng nhau. */
.tc-ds .avatar{width:38px;height:38px;font-size:var(--fs-small);align-self:center}
.tc-ds .giua{min-width:0}
.tc-ds .ten{display:block;color:var(--n95);font-size:var(--fs-body);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-ds .ten b{font-weight:500}
.tc-ds > a:hover .ten{color:var(--v90)}
.tc-ds .phu{display:block;margin-top:3px;font-size:var(--fs-eyebrow);color:var(--n60);
  line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-height:1.6em}   /* (L608) «Vừa hoàn thành» tl đứng một mình có thể rỗng ⇒ chừa 1 dòng giữ hàng */
.tc-ds .luc{font-size:var(--fs-eyebrow);color:var(--n60);line-height:1.6;white-space:nowrap}
.tc-ds .luc b{color:var(--v80);font-weight:600;font-family:var(--ff-so)}

/* 🔴 (L259 §C) Ban Sủng: dòng .hang có HAI link RIÊNG (tên người → hồ sơ, tên truyện → chi tiết).
   Link thừa kế MÀU CHỮ (⛔ xanh mặc định), hover/focus mới đổi màu + gạch chân cho rõ. */
.tc-ds .hang .ten a, .tc-ds .hang .phu a{color:inherit;text-decoration:none}
.tc-ds .hang .ten a:hover, .tc-ds .hang .ten a:focus-visible,
.tc-ds .hang .phu a:hover, .tc-ds .hang .phu a:focus-visible{color:var(--v90);text-decoration:underline}
@media (max-width:600px){
  /* 🔴 §A (L423 · M.483 — hướng C chị chốt): MÀN HẸP đưa .luc (mốc giờ) XUỐNG DÒNG RIÊNG,
     trả bề ngang cột giữa cho tên truyện. CHỈ khối Ban Sủng (.hang) — ⛔ đụng `> a`
     (Tân Chương·Vừa hoàn thành) để §B «một bộ xương» ⛔ vỡ. An toàn vì ≤1080px các cột đã
     xếp DỌC (dòng 245) nên .hang khác `> a` ⛔ đứng cạnh nhau để lệch chiều cao. */
  .tc-ds .hang{grid-template-columns:38px minmax(0,1fr);
    grid-template-areas:"av giua" ".  luc";gap:2px 14px;align-items:start}
  .tc-ds .hang .avatar{grid-area:av;align-self:center}
  .tc-ds .hang .giua{grid-area:giua}
  .tc-ds .hang .luc{grid-area:luc}
  /* Tên truyện dài: cho XUỐNG DÒNG chứ ⛔ cắt mất chữ (bỏ nowrap/ellipsis dòng 271-272).
     .ten (tên NGƯỜI) GIỮ nowrap ở dòng 268 — ⛔ đụng, tên người ngắn xuống dòng làm lệch nhịp. */
  .tc-ds .hang .phu{white-space:normal;overflow:visible;text-overflow:clip}
  /* 🔴 (L429 · M.489 — hướng A chị chốt) BỎ display:inline-flex: nó biến link thành KHỐI ĐẶC
     ⛔ ngắt giữa chừng ⇒ tên DÀI nhảy nguyên khối xuống dòng + cao 44px ⇒ mỗi dòng một chiều cao
     (lổm chổm). display:inline cho tên truyện ngắt chữ tự nhiên, hoà cùng cụm «vừa ban sủng ».
     Vùng chạm nới bằng padding-block:9px (chấp nhận hụt vài px so 44 — chị chốt đánh đổi hướng A).
     Bỏ max-width:100% (chỉ cần cho inline-flex cũ). GIỮ white-space:normal ở dòng trên (thành quả L423). */
  .tc-ds .hang .phu{line-height:1.9}
  .tc-ds .hang .ten a, .tc-ds .hang .phu a{display:inline;padding-block:9px;text-underline-offset:3px}
}


/* Donate — 🔴 (§5b) TÊN và THỜI ĐIỂM, ⛔ KHÔNG số Ruby */
.tc-donate{display:grid;gap:2px}
.tc-donate li{display:flex;align-items:center;gap:11px;padding:9px 12px;
  font-size:var(--fs-small);color:var(--n80);line-height:1.5}
.tc-donate .avatar{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--v30);
  display:grid;place-content:center;font-size:11px;color:var(--v90);line-height:1}
.tc-donate .ai{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-donate .ai b{color:var(--n95);font-weight:500}
.tc-donate .luc{flex-shrink:0;color:var(--n60)}

/* Rỗng — ⛔ không để vùng trắng (#20) */
.tc-rong{display:grid;justify-items:center;gap:9px;padding:30px 20px;text-align:center;
  border:1px dashed var(--n40);border-radius:var(--bo)}
.tc-rong .tit{font-size:var(--fs-body);color:var(--n90);line-height:1.45}
.tc-rong p{max-width:46ch;font-size:var(--fs-small);color:var(--n70);line-height:var(--lh-than)}

/* ══════════════════════════════════════════════════════════
   ⑤ PHONG VÂN — GIỮ NGUYÊN bản cũ: dải 6 bìa có số hạng
   🔴 Chủ dự án chốt giữ. Khối này khác hẳn Ban Sủng về hình dạng, nên đặt
      cạnh nhau ⛔ không bị đọc như lặp lại.
   ══════════════════════════════════════════════════════════ */
.tc-day{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--khe);grid-auto-rows:1fr}
@media(min-width:600px){ .tc-day{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1024px){ .tc-day{grid-template-columns:repeat(6,1fr)} }
.tc-day a{transition:transform .2s;min-width:0}
.tc-day a:hover{transform:translateY(-3px)}
.tc-day .ten{display:block;margin-top:10px;font-size:var(--fs-small);color:var(--n99);
  line-height:var(--lh-dong);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tc-day a:hover .ten{color:var(--v80)}
.tc-day .p{display:block;margin-top:5px;font-size:var(--fs-eyebrow);letter-spacing:.1em;
  text-transform:uppercase;color:var(--n70);line-height:1.6}

/* ══════════════════════════════════════════════════════════
   ⓪ HERO — bản D+F, chủ dự án CHỐT 06/08/2026

   🔴 Lật lại luật cũ "trang chủ ⛔ không có hero". Lý do lật: luật cũ nhắm vào
      hero KIỂU CŨ — ảnh trang trí + khẩu hiệu, phải cuộn qua mới tới nội dung.
      Khối này ⛔ không phải loại đó: nó LÀ danh sách năm bộ thật, bấm là đọc.
      Ràng buộc giữ nguyên: ⛔ không ảnh trang trí thuê ngoài · ⛔ không khẩu
      hiệu suông · nội dung thật ngay trên nếp gấp · ⛔ không chặn cuộn.

   Ba mảnh, và thứ BUỘC chúng lại (đây là chỗ ba bản trước hỏng — chủ dự án
   nói "nhìn tổng thể bị rời rạc"):
     ① TƯỜNG BÌA mờ 13% làm nền — chất liệu của web là bìa truyện, ⛔ không
        phải hoạ tiết. Nghiêng -5° để ⛔ không đọc ra là một cái lưới.
     ② KHUNG bao cả cụm. Có khung thì mọi thứ bên trong là MỘT khối; ⛔ không
        có khung thì ba mảnh trôi cạnh nhau.
     ③ Vạch hai bên tên chạy TỚI SÁT mép khung, và vách dọc giữa hai cột —
        đường kẻ chạy suốt là thứ nối, ⛔ không phải kéo mọi thứ lại gần nhau.
   ══════════════════════════════════════════════════════════ */
.tc-hero{position:relative;overflow:hidden;isolation:isolate;background:var(--v05);
  border-bottom:1px solid var(--n30);padding:34px 0 40px}

/* ① Tường bìa — 🔴 opacity .13 là CỐ Ý thấp. Cao hơn thì chữ trên nó ⛔ không
   còn đủ tương phản, mà đây là chỗ đầu tiên người lạ đọc. */
.tc-hero .tuong{position:absolute;inset:-12% -4%;z-index:-3;display:grid;
  grid-template-columns:repeat(10,1fr);gap:16px;
  transform:rotate(-5deg) scale(1.08);opacity:.13}
.tc-hero .tuong img{width:100%;aspect-ratio:5/7;object-fit:cover;border-radius:var(--bo-bia)}
.tc-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(1100px 520px at 50% -8%, rgba(107,78,155,.40), transparent 68%)}
.tc-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(11,7,17,.70) 0%, rgba(11,7,17,.88) 60%, var(--v10) 100%)}

/* ② Khung bao cả cụm */
.tc-hero .khung{width:min(100% - 36px,1240px);margin-inline:auto;
  border:1px solid var(--n40);border-radius:var(--bo);
  background:rgba(15,10,22,.55);backdrop-filter:blur(2px);overflow:hidden}

/* ── Dải thương hiệu ── */
.tc-hero .dai-hieu{padding:30px 26px 26px;border-bottom:1px solid var(--n30);text-align:center}
.tc-hero .ten-cum{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px}
.tc-hero .vach-ngoc{display:flex;align-items:center;gap:10px}
.tc-hero .vach-ngoc .v{flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--v50) 40%,var(--v70))}
.tc-hero .vach-ngoc.phai .v{background:linear-gradient(270deg,transparent,var(--v50) 40%,var(--v70))}
.tc-hero .vach-ngoc svg{color:var(--v70);flex-shrink:0}

/* 🔴 TÊN WEB — bốn lần trước hỏng vì bốn lý do khác nhau, ghi lại để ⛔ không lặp:
     · 210px nhồi ảnh bìa bên trong → "lạc quẻ so với web": cả web nói giọng
       tiết chế, một chữ khổng lồ đầy ảnh là NGÔN NGỮ KHÁC, ⛔ không phải to quá.
     · đứng một mình giữa khoảng trống → ⛔ không dính vào gì.
   ⇒ ≤76px · giãn chữ rộng · tô bằng chính dải tím đang dùng · viên ngọc hai
     đầu vạch CÙNG HÌNH với favicon → tên và dấu là một bộ.
   ⚠️ Chữ hoa do CSS, ⛔ không gõ hoa trong HTML: trình đọc màn hình đọc
      "ĐIỆN HẠ" viết hoa toàn phần thành từng chữ cái. */
.tc-hero .ten-web{font-family:var(--ff-td);font-weight:600;
  font-size:clamp(40px,5.6vw,76px);line-height:1;letter-spacing:.24em;
  text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,var(--n99) 4%,var(--v90) 54%,var(--v60) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.24em}
.tc-hero .cham-ngon{margin-top:14px;font-size:var(--fs-small);color:var(--n70);
  letter-spacing:.14em;text-transform:uppercase;line-height:1.8}
@media (max-width:620px){
  .tc-hero .ten-cum{gap:12px}
  .tc-hero .cham-ngon{letter-spacing:.06em}
}

/* ── Hai cột DÍNH nhau bằng vách dọc ── */
.tc-hero .than{display:grid;grid-template-columns:minmax(0,1fr) 300px}
@media (max-width:900px){ .tc-hero .than{grid-template-columns:1fr} }
.tc-hero .cot-ds{padding:24px 26px}
/* 🔴 Đây là NHÃN cỡ nhỏ, ⛔ không phải tiêu đề khối cỡ lớn — nên icon phải nhỏ theo.
   Bản trước nhét icon 19px vào một dòng chữ ~11px mà ⛔ không có flex: icon to
   gấp rưỡi chữ, tụt khỏi đường chân chữ, và `letter-spacing:.24em` còn cộng
   thêm một khoảng trống SAU icon nữa (giãn chữ áp cả lên khoảng sau thẻ svg).
   ⇒ Ba việc cùng lúc: bật flex · thu icon còn 14px · trả khoảng cách về cho `gap`. */
.tc-hero .cot-ds h2{display:flex;align-items:center;gap:9px;
  margin-bottom:12px;font-family:var(--ff);font-size:var(--fs-eyebrow);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--v80);line-height:1.7}
.tc-hero .cot-ds h2 svg{width:14px;height:14px;flex-shrink:0;
  /* ⚠️ triệt khoảng giãn chữ cộng dồn vào bên phải icon */
  margin-right:-.2em}
.tc-hero .cot-bia{padding:24px 26px;border-left:1px solid var(--n30);
  display:grid;gap:14px;align-content:center;background:rgba(107,78,155,.06)}
/* 🔴 Dưới 900px cột bìa BIẾN MẤT — nên mỗi dòng phải TỰ đi được tới truyện.
   Vì thế cả dòng là một liên kết trải rộng, ⛔ không phải nút đổi ảnh xem trước:
   nút đổi ảnh trên điện thoại là NÚT CHẾT (đổi cái ⛔ không ai nhìn thấy). */
@media (max-width:900px){ .tc-hero .cot-bia{display:none} }

/* 🔴 CHỖ TRỐNG GIỮA LÀ LỖI CSS, ⛔ không phải chuyện thẩm mỹ.
   Bản trước dùng `<button>` cho cả dòng: button co lại vừa nội dung kể cả khi
   đã `display:grid`, nên mỗi dòng rộng đúng bằng tên truyện của nó — viền dưới
   dứt ở mỗi chỗ một khác, bên phải hở một mảng lớn.
   ⇒ `width:100%` + một Ô CUỐI có nội dung thật (số chương). Lấp bằng THÔNG TIN,
     ⛔ không lấp bằng khoảng đệm.
   ⚠️ jsdom ⛔ không bắt được loại lỗi này: nó ⛔ không đo bề rộng. Phải mở mắt ra nhìn. */
.tc-hero .dong{position:relative;width:100%;display:grid;
  grid-template-columns:48px 1fr auto;grid-template-rows:auto auto;gap:0 16px;
  padding:11px 14px;border-radius:var(--bo-nho);transition:background .2s;align-items:center}
.tc-hero .dong + .dong{border-top:1px solid var(--n30)}
/* Liên kết trải cả dòng — bấm chỗ nào trong dòng cũng tới truyện đó */
.tc-hero .dong .ten::after{content:"";position:absolute;inset:0}
.tc-hero .so{grid-row:1/3;align-self:center;font-family:var(--ff-so);
  font-size:var(--fs-sub);color:var(--n50);transition:color .2s}
.tc-hero .ten{font-family:var(--ff);font-weight:600;font-size:clamp(20px,2.2vw,30px);
  line-height:1.2;color:var(--n70);transition:color .2s}
.tc-hero .tg{grid-column:2;font-size:var(--fs-small);color:var(--n60);
  line-height:1.6;margin-top:2px;
  /* M.277 (L245): câu câu khách dài — 1 dòng ellipsis, min-width:0 + overflow:hidden
     ⇒ ô contribute 0 vào cột 1fr, ⛔ nong cột đẩy «N chương» (o-cuoi). */
  min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ⚠️ Tên lớp `.o-cuoi`, ⛔ KHÔNG phải `.phai`: `.phai` đã là vạch cạnh tên web.
   Trùng tên lớp cho hai thứ khác nhau trong cùng một file là gốc của lỗi
   chọn nhầm phần tử — đã cắn một lần ở đây. */
.tc-hero .o-cuoi{grid-column:3;grid-row:1/3;display:flex;align-items:center;gap:12px;
  font-size:var(--fs-small);color:var(--n60);line-height:1.6;white-space:nowrap}
.tc-hero .o-cuoi .mui{opacity:0;transform:translateX(-4px);color:var(--v80);
  transition:opacity .2s,transform .2s}
.tc-hero .dong[aria-current="true"]{background:rgba(107,78,155,.22)}
.tc-hero .dong[aria-current="true"] .ten{color:var(--n99)}
.tc-hero .dong[aria-current="true"] .so{color:var(--v80)}
.tc-hero .dong[aria-current="true"] .o-cuoi{color:var(--n90)}
.tc-hero .dong[aria-current="true"] .o-cuoi .mui{opacity:1;transform:none}
@media (max-width:620px){
  .tc-hero .cot-ds{padding:18px 14px}
  .tc-hero .dong{grid-template-columns:34px 1fr;padding:11px 8px}
  .tc-hero .o-cuoi{grid-column:2;grid-row:auto;margin-top:4px}
}

.tc-hero .cot-bia img{width:100%;aspect-ratio:5/7;object-fit:cover;
  border-radius:var(--bo);box-shadow:0 22px 50px rgba(0,0,0,.6)}
/* 🔴 ĐÃ BỎ `.loi` ở cột bìa — câu đó lặp với dòng bên trái và đẩy nút xuống đáy.
   ⚠️ Bỏ rồi thì cụm bìa + nút ngắn lại, `align-content:center` tự kéo nó lên
      ngang tầm danh sách bên trái. ⛔ Đừng thêm khoảng đệm tay để "canh cho
      bằng" — khoảng đệm tay là thứ lệch lại ngay khi số dòng đổi. */
.tc-hero .cot-bia .nut{width:100%;justify-content:center}

/* 🔴 Tôn trọng "giảm chuyển động" — tắt HẾT, ⛔ không giảm nửa vời.
   Người bị rối loạn tiền đình xem thứ tự đổi là chóng mặt THẬT. */
@media (prefers-reduced-motion: reduce){
  /* Phần bục của reduced-motion đã DỜI sang nen.css cùng khối bục — §B. */
  .tc-hero .dong,
  .tc-hero .so,
  .tc-hero .ten,
  .tc-hero .o-cuoi .mui{transition:none}
}


/* ══════════════════════════════════════════════════════════
   ⑦ BỘ SƯU TẬP THEO GU — MỘT section, mỗi bộ MỘT THẺ có bìa đại diện
   🔴 Bản trước dựng bốn hàng cuộn ngang; chủ dự án muốn "gom chung thành 1
      section, có 1 ảnh bìa cho chung thể loại đó, bấm vào là ra list truyện".
      Đúng hơn thật: bốn hàng cuộn ngang chiếm bốn màn hình và bắt người ta
      cuộn ngang bốn lần. Một lưới thẻ thì thấy hết trong một cái nhìn.
   ⚠️ Bìa đại diện = bìa của bộ ĐỨNG ĐẦU trong thẻ đó, ⛔ không phải một ảnh
      minh hoạ riêng — admin ⛔ không phải đi kiếm ảnh cho từng bộ sưu tập.
   ══════════════════════════════════════════════════════════ */
.tc-gu{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--khe)}
@media (max-width:1000px){.tc-gu{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tc-gu{grid-template-columns:1fr}}

.tc-gu-the{position:relative;display:block;overflow:hidden;border-radius:var(--bo);
  border:1px solid var(--n30);background:var(--v20);isolation:isolate;
  aspect-ratio:4/3;transition:border-color .2s}
.tc-gu-the:hover{border-color:var(--v60)}
.tc-gu-the img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;transition:transform .4s ease-out}
.tc-gu-the:hover img{transform:scale(1.06)}
/* Lớp phủ — 🔴 chữ đặt thẳng lên bìa là chỗ sáng ⛔ không đọc được */
.tc-gu-the::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(11,7,17,.94) 12%, rgba(11,7,17,.62) 58%, rgba(11,7,17,.22) 100%)}
.tc-gu-the .chu{position:absolute;left:0;right:0;bottom:0;padding:18px 18px 16px;
  display:grid;gap:5px}
.tc-gu-the .ten-gu{font-family:var(--ff-td);font-weight:600;font-size:var(--fs-sub);
  color:var(--n99);line-height:var(--lh-td);text-wrap:balance}
.tc-gu-the:hover .ten-gu{color:var(--v90)}
.tc-gu-the .dem{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--n80);line-height:1.7}
/* Nền SÁNG: scrim ::after là gradient TỐI cố định (đúng — chữ nằm trên đó), nhưng ten-gu/dem/
   hover ăn token LẬT theo nền (--n99/--n80/--v90 hoá TỐI ở bản sáng) ⇒ chữ tối trên scrim tối,
   nhãn «Thị tẩm» CHÌM (tester 16/08). Ghim token bản TỐI cho đúng ba bậc bị đảo — cùng khuôn
   khối cố-ý-tối .cb-uu-dai (nen.css). ⛔ đổi scrim. --n99/--n80/--v90 = giá trị dải TỐI. */
[data-nen="sang"] .tc-gu-the{--n99:#F2ECF8;--n80:#A79CB8;--v90:#DCC7F5}

/* ══════════════════════════════════════════════════════════
   ⑧ THÔNG BÁO TỪ BAN QUẢN TRỊ — 🔴 chủ dự án chỉ ra là đang THIẾU
   Bản cũ có khối này, ba lần làm lại em bỏ mất. Đây là chỗ DUY NHẤT ban quản
   trị nói được với toàn bộ độc giả — bảo trì, đổi chính sách, sự kiện.
   ⛔ Bỏ nó đi thì mọi thông báo phải nhét vào chỗ khác, hoặc ⛔ không nói được.
   ══════════════════════════════════════════════════════════ */
.tc-tb{display:grid;gap:2px}
.tc-tb a{display:flex;align-items:baseline;gap:12px;padding:11px 12px;
  border-radius:var(--bo-nho);min-width:0}
.tc-tb a:hover{background:var(--v25)}
.tc-tb .cham{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--v60);
  transform:translateY(-2px)}
.tc-tb a[data-moi="1"] .cham{background:var(--vang)}
.tc-tb .noi{flex:1;min-width:0;color:var(--n90);font-size:var(--fs-small);
  line-height:var(--lh-than)}
.tc-tb a:hover .noi{color:var(--n99)}
.tc-tb .luc{flex-shrink:0;font-size:var(--fs-eyebrow);color:var(--n60);line-height:1.9;
  white-space:nowrap}



/* ══════════════════════════════════════════════════════════
   ⑥ VẠN DÂN BÌNH PHẨM — thẻ trích dẫn
   🔴 Chữ serif cỡ lớn để nhìn ra ngay là GIỌNG NÓI, ⛔ không phải dữ liệu.
      Ba thẻ chia chẵn 3 cột ⇒ ⛔ không thừa thẻ lẻ.
   ══════════════════════════════════════════════════════════ */
/* 🔴 SLIDE — ba trang nằm CẠNH nhau trong một RAY, ⛔ không CHỒNG lên nhau.
   `transform` ⛔ không có nghĩa gì nếu các trang ⛔ không nằm cạnh nhau: viết
   đúng cú pháp mà sai cấu trúc thì trình duyệt ⛔ không báo lỗi — nó cứ chạy,
   chỉ là chạy ra một thứ khác.
   ⇒ **ô nhìn** cắt (`overflow:hidden`) · **RAY** xếp ba trang CẠNH nhau
     (`flex`, mỗi trang `flex:0 0 100%`) · dời cả cái ray. */
/* 🔴 L11b §G — HAI thứ trong mockup làm slide ⛔ KHÔNG TRƯỢT trong Chrome (mockup chưa
   từng chạy được slide nên chưa ai bắt, xem §C0). CC tự nối Chrome đo ra:
     ① `will-change:transform` + `transition:transform` ⇒ transform KẸT, đổi trang mà
        ray đứng im. Bỏ `will-change` là chạy lại. (will-change vốn là bản vá CHƯA
        được chứng minh cho "vệt dọc mờ" — xem ghi chú dưới; báo cho Cowork sửa mockup.)
     ② `transform:translateX(calc(var(--troi) * -100%))`: Chrome ⛔ KHÔNG chạy transition
        khi CHỈ có biến trong transform đổi ⇒ ray không nhúc nhích. ⇒ JS đặt THẲNG
        `ray.style.transform` (xem trang-chu.blade.php), giá trị khai báo đổi thật nên
        transition chạy đúng. Ở đây giữ `translateX(0)` làm trạng thái đầu (trang 0).
   ⚠️ VỆT DỌC MỜ ở chân thẻ: Cowork bisect ⛔ không tái hiện nhất quán ⇒ nhiều khả năng
      ⛔ KHÔNG phải CSS (§H). ⛔ ĐỪNG vá bằng CSS — thấy thì báo ra. */
/* 🔴 §20d — THẺ NẰM PHẲNG (⛔ còn lớp bọc trang). Mặc định (⛔ có lớp JS): ô nhìn CUỘN
   NGANG được THẬT ⇒ tắt JS vẫn đọc đủ 9 lời bình, tới được thẻ cuối. Thanh cuộn GIỮ
   (mảnh, hợp tông) — ⛔ ẩn: ở dải cuộn ngang thanh cuộn là chỉ dấu DUY NHẤT cho biết còn
   nội dung bên phải (như dg5-ray §C1). touch-action mặc định để ngón tay cuộn ngang được.
   ⚠️ §11 — mockup đặt `touch-action:pan-y` VÔ ĐIỀU KIỆN ở ≤620; nhưng thế thì TẮT JS
   ngón tay ⛔ cuộn ngang được ⇒ MẤT BÀI (§B4/D2). ⇒ pan-y CHỈ bật ở lớp .tc-bp-js dưới. */
.tc-bp{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;contain:paint}
.tc-bp{scrollbar-width:thin;scrollbar-color:var(--v40) transparent}
.tc-bp::-webkit-scrollbar{height:6px}
.tc-bp::-webkit-scrollbar-track{background:transparent}
.tc-bp::-webkit-scrollbar-thumb{background:var(--v40);border-radius:99px}
.tc-bp::-webkit-scrollbar-thumb:hover{background:var(--v50)}
/* 🔴 L709 §A② — TOKEN DẪN XUẤT CỦA KHỐI, khai ĐÚNG MỘT CHỖ.
   Cả khối chỉ gọi `--net` / `--net-mo` và token site (§A②) ⇒ nền TỐI tự ra champagne
   (`--net`→`--kim`), nền SÁNG tự ra bạc ngọc trai (`[data-nen="sang"] body` lật `--net`→`--bac`,
   trang-chu-v5.css:44). ⛔ gõ hex tay, ⛔ gọi thẳng `--kim`/`--bac` — gọi thẳng thì một chỗ
   ⛔ lật theo nền và để lại mảnh vàng giữa bản bạc (cảnh báo trang-chu-v5.css:16-18).
   `color-mix` pha TỪ `--net` nên hai nền tự đúng, ⛔ phải khai hai lần (nếp cai-dat.css:121). */
.tc-bp-khoi{
  --bp-toc:color-mix(in srgb,var(--net) 26%,transparent);   /* đường chỉ trong + viền nút */
  --bp-sang:color-mix(in srgb,var(--net) 55%,var(--n99));   /* đỉnh sáng giữa trục kim loại */
  --bp-len:color-mix(in srgb,var(--net) 34%,transparent);   /* viền mờ lúc nhấc thẻ lên */
  --bp-sao:var(--net);   /* bản TỐI: sao theo nét kim (§A②) */
  --bp-an:var(--net);    /* bản TỐI: ấn theo nét kim — xem ghi chú bản sáng ở §🌗 */
  --bp-moi-luot:5}       /* 🔴 §A⑤ — xem khối MỘT NGUỒN ngay dưới */
.tc-bp-ray{display:flex;gap:var(--khe);transition:transform .45s ease;transform:translateX(0);align-items:start}
/* 🔴 L709 §A⑤ — MỘT NGUỒN cho con số 5 nằm Ở ĐÂY (`--bp-moi-luot`), ⛔ ở JS.
   Vì sao ở CSS: «mấy thẻ lọt một lượt» là sự thật BỐ CỤC, và JS ĐO bề rộng thật (§C1) nên
   ⛔ bao giờ đọc con số này ⇒ ⛔ đẻ nguồn thứ hai. ⛔ bơm được từ PHP: CSP `style-src 'self'
   'nonce-…'` (SecurityHeaders.php:129) chặn thuộc tính style="" ⇒ inline var là trang vỡ câm.
   ⚠️ Phía server `HomeController` có hằng `VAN_DAN_THE_MOI_LUOT` PHẢI bằng con số này — nó chỉ
   quyết LẤY BAO NHIÊU thẻ, ⛔ quyết bố cục. Cổng `test_css_va_php_cung_mot_so_the_moi_luot`
   canh hai bên khớp; lệch là ĐỎ, ⛔ để trôi âm thầm.
   Thẻ ⛔ co (flex-shrink 0) nên tràn ra để cuộn/transform. 5 thẻ + 4 khe khít 100% bề rộng ray
   ⇒ JS dời đúng một lượt = moiLuot*(bề rộng thẻ + khe) px (⛔ gõ cứng mốc màn hình). */
.tc-bp-ray > a{flex:0 0 calc((100% - (var(--bp-moi-luot) - 1) * var(--khe)) / var(--bp-moi-luot));
  scroll-snap-align:start;min-width:0}
/* 🔴 JS đang chạy: cắt ô nhìn + dời bằng transform; pan-y để trình duyệt ⛔ tự cuộn ngang
   (JS tự xử quẹt — §C6). Ở đây ⛔ còn thanh cuộn vì ⛔ còn cuộn. */
.tc-bp-js .tc-bp{overflow:hidden;touch-action:pan-y}

/* 🔴 L709 §A⑥ — ĐIỀU HƯỚNG: hai nút tròn ‹ › + bộ đếm số La Mã (thay hạt ngọc).
   NÚT THẬT, bấm là đổi lượt ngay. ⚠️ Ô bấm 40px để ngón tay bấm trúng trên điện thoại.
   ⚠️ JS chỉ dựng khi > 1 lượt ⇒ một lượt thì hộp này RỖNG, ⛔ có nút chết (§9). */
.tc-bp-dieu:empty{display:none}
.tc-bp-dieu{display:flex;justify-content:center;align-items:center;gap:18px;margin-top:26px}
.tc-bp-dieu button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bp-toc);background:transparent;color:var(--net);
  font-size:17px;line-height:1;cursor:pointer;transition:border-color .3s,color .3s}
.tc-bp-dieu button:hover{border-color:var(--net)}
.tc-bp-dieu .dem{font-family:var(--ff-td);font-size:17px;color:var(--n80);
  min-width:60px;text-align:center;letter-spacing:.1em}

/* ══ L709 §A② — THẺ = CUỘN TẤU CHƯƠNG (mockup/van-dan-tau-chuong-v2.html, chị chốt 17/09) ══
   ⚠️ `position:relative` để trục/chỉ/lề neo theo thẻ; `overflow:visible` để hai núm trục thò
      ra ngoài mép — trục thụt vào trong thì ⛔ còn ra hình cuộn. */
.tc-bp a{position:relative;display:flex;flex-direction:column;min-height:320px;
  padding:38px 22px 30px 24px;min-width:0;color:inherit;
  background:var(--v20);box-shadow:var(--sh-the);
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s}
/* 🔴 So le thành vòng cung — CHỈ desktop (≤1000 gỡ ở v5). ⛔ xoay nghiêng (chị chốt). */
.tc-bp-ray > a{--bp-lech:0px;margin-top:var(--bp-lech)}
.tc-bp-ray > a:nth-child(2),.tc-bp-ray > a:nth-child(4){--bp-lech:22px}
.tc-bp-ray > a:nth-child(3){--bp-lech:44px}
.tc-bp a:hover,.tc-bp a:focus-visible{transform:translateY(-8px);
  box-shadow:var(--sh),0 0 0 1px var(--bp-len)}
/* Trục: nét kim loại mảnh + hai núm tròn hai đầu. Hình thuần trang trí ⇒ aria-hidden ở blade. */
.tc-bp .truc{position:absolute;left:-8px;right:-8px;height:7px;pointer-events:none}
.tc-bp .truc.tren{top:-3px}
.tc-bp .truc.duoi{bottom:-3px}
.tc-bp .truc::before{content:"";position:absolute;left:8px;right:8px;top:2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--net-mo) 10%,var(--net) 30%,var(--bp-sang) 50%,var(--net) 70%,var(--net-mo) 90%,transparent)}
.tc-bp .truc.duoi::before{top:3px}
.tc-bp .truc::after{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 3.5px 3.5px,var(--net) 2.6px,transparent 3px),
             radial-gradient(circle at calc(100% - 3.5px) 3.5px,var(--net) 2.6px,transparent 3px)}
.tc-bp .toc{position:absolute;left:0;right:0;height:1px;background:var(--bp-toc);pointer-events:none}
.tc-bp .toc.tren{top:8px}
.tc-bp .toc.duoi{bottom:8px}
/* 🔴 LỀ DỌC — chữ đứng dọc bên trái, thay chỗ «nhãn» cũ. Cắt bằng ba chấm, ⛔ lòi ra ngoài
   cuộn (mockup v1 từng bị — §C⑧). `writing-mode` + `rotate(180deg)` cho chữ chạy từ trên xuống. */
.tc-bp .le{position:absolute;left:9px;top:34px;bottom:34px;writing-mode:vertical-rl;
  transform:rotate(180deg);font-size:10px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--net);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-height:calc(100% - 68px)}
.tc-bp .than{display:flex;flex-direction:column;flex:1;min-width:0;padding-left:16px}
/* 🔴 Sao là HÌNH — luôn kèm `aria-label` bằng chữ ở cụm cha (§9 — màu/hình ⛔ đứng một mình).
   L226 §B (M.268): sao RỖNG phải đủ tương phản ⇒ --n70 (4.93:1 trên v20), sao ĐẠT theo nét kim. */
.tc-bp .sao{display:flex;gap:3px;margin-bottom:12px;color:var(--n70)}
.tc-bp .sao i{display:block;line-height:0}
.tc-bp .sao i.day{color:var(--bp-sao)}
/* 🔴 L709 §A② — LỜI BÌNH DÙNG CHỮ KHÔNG CHÂN (`--ff`), chữ ĐỨNG (chị chốt: ⛔ nghiêng).
   Chỉ dấu ngoặc kép lớn là chữ có chân (`--ff-td`), đặt bằng GIẢ TỐ ⇒ ⛔ chèn ký tự vào nội
   dung (⛔ đọc thành dấu nháy khi trình đọc màn hình chạy qua, ⛔ dính vào lượt sao chép).
   ⚠️ line-clamp 6 (mockup) — thẻ cao 320px nên 6 dòng vừa khung, ⛔ đẩy chữ ký rơi ra ngoài. */
.tc-bp .noi{position:relative;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  overflow:hidden;overflow-wrap:anywhere;padding-top:24px;
  font-family:var(--ff);font-style:normal;font-size:16.5px;font-weight:400;
  line-height:1.6;color:var(--n95)}
.tc-bp .noi::before{content:"“";position:absolute;left:-2px;top:-8px;
  font-family:var(--ff-td);font-size:46px;line-height:1;color:var(--net);opacity:.8}
.tc-bp .sao + .noi{padding-top:22px}
/* Chữ ký — dính ĐÁY thẻ (`margin-top:auto`) để mọi thẻ có chân bằng nhau dù lời bình ngắn dài. */
.tc-bp .ky{display:flex;align-items:flex-end;gap:12px;margin-top:auto;padding-top:22px;min-width:0}
.tc-bp .ten{flex:1;min-width:0}
.tc-bp .ten b{display:block;font-weight:600;font-size:13px;color:var(--n90);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-bp .ten b::before{content:"— ";font-weight:400;color:var(--net)}
.tc-bp .ten small{display:block;margin-top:2px;font-size:11.5px;font-weight:300;color:var(--n70);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🔴 ẤN VUÔNG VIỀN KÉP — `outline` bên trong + `border` bên ngoài = hai nét, ⛔ cần thẻ phụ.
   Hình ⇒ có `aria-label` bằng chữ ở blade (§9). ⛔ co (flex-shrink:0) kẻo méo khi tên dài. */
.tc-bp .an{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;text-align:center;
  font-size:9px;font-weight:600;line-height:1.15;letter-spacing:.06em;color:var(--bp-an);
  border:1px solid var(--bp-an);outline:1px solid var(--bp-an);outline-offset:-4px;
  border-radius:3px;transform:rotate(-4deg);opacity:.85}
.tc-bp .an i{display:block;font-style:normal;font-size:12px;letter-spacing:0}
@media (prefers-reduced-motion:reduce){.tc-bp a{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   M.564 (L503) — PORT 3 KHỐI: Phong Vân ray · Tân Phẩm sân khấu · Điện Hạ Độc Tuyển.
   Nguồn: mockup/css/trang-chu.css ⑤b + <style> nhúng mockup/index-v5.html (§C/§D).
   🔴 Chỉ THÊM; ⛔ đụng luật khối khác. Nét kim (--net/--g-net) đã lật bạc ở trang-chu-v5.css.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── ⑤b PHONG VÂN RAY (mockup ⑤b) — thẻ NHƯ CŨ (co-hang trong bìa), chỉ đổi cách xếp
   sang ray cuộn ngang. Thanh cuộn GIỮ (⑭b: chỉ dấu duy nhất còn nội dung bên phải).
   🔴 Bề rộng thẻ = công thức lưới 6 cột cũ (100%−5·khe)/6 — ⛔ gõ px (mockup cắn 2 lần). */
.pv-ray{display:flex;gap:var(--khe);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;padding:6px 4px 14px;
  scrollbar-width:thin;scrollbar-color:var(--v30) transparent}
.pv-ray::-webkit-scrollbar{height:4px}
.pv-ray::-webkit-scrollbar-thumb{background:var(--v30);border-radius:99px}
.pv-ray > a{flex:0 0 calc((100% - 5*var(--khe))/6);min-width:0;
  scroll-snap-align:start;transition:transform .2s}
.pv-ray > a:hover{transform:translateY(-3px)}
.pv-ray .ten{margin-top:10px;min-width:0;
  font-size:var(--fs-small);color:var(--n99);line-height:var(--lh-dong);
  height:calc(2*var(--lh-dong)*1em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pv-ray a:hover .ten{color:var(--v80)}
.pv-ray .p{display:block;margin-top:5px;
  font-size:var(--fs-eyebrow);letter-spacing:.1em;
  text-transform:uppercase;color:var(--n70);
  /* (L608) chừa đúng 1 dòng eyebrow kể cả khi rỗng ⇒ hàng card ⛔ so le (Phong Vân Bảng) */
  line-height:1.6;min-height:1.6em}
@media(max-width:620px){
  .pv-ray{gap:12px}
  .pv-ray > a{flex:0 0 116px}
  .pv-ray .co-hang{font-size:var(--fs-small)}
  .pv-ray .co-hang em{display:none}
}

/* ── ② TÂN PHẨM DIỆN KIẾN — TRANG TRƯNG kiểu ẤN PHẨM (§A M.566, mockup bản chốt).
   🔴 A1 BỎ HẲN nền-từ-bìa (.sk-nen sạch): 3 biến thể đều vỡ ở nền sáng thành mảng xám.
   🔴 A7 chữ nay ⛔ nằm trên ảnh ⇒ TOKEN (⛔ ghim trắng — chìm ở nền sáng). ⚠️ NGƯỢC .dt-chan (B8). */
.sk-bo{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);
  gap:0;align-items:stretch;border:0;background:transparent}
/* MỤC LỤC — chữ thuần; <a> THẬT (JS-off = liên kết §9); JS nâng role=tab. Vạch dọc ngăn 2 cột. */
.sk-ml{list-style:none;margin:0;padding:26px 22px 26px 26px;min-width:0;
  position:relative;z-index:1;border-right:1px solid var(--n30)}
/* ② viên thoi kim giữa vạch dọc (◆ cùng họ .sk-thoi/.vach) */
.sk-ml::after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;
  transform:translateY(-50%) rotate(45deg);background:var(--v50);box-shadow:0 0 0 3px var(--v15)}
/* ③ vạch kim mảnh mở đầu mục lục */
.sk-ml::before{content:"";position:absolute;left:26px;right:22px;top:12px;height:1px;
  background:linear-gradient(90deg,var(--v40),transparent)}
.sk-ml li + li{border-top:1px solid var(--n30)}
/* 🔴 A4 khai border:1px solid transparent để dành chỗ viền pill — ⛔ border:0 đè lại
   (⛔ thì lúc chọn viền cộng thêm, cả dòng nhích 2px). */
.sk-ml a{position:relative;display:flex;align-items:baseline;gap:12px;width:100%;
  border:1px solid transparent;border-radius:999px;transition:background .18s,border-color .18s;
  padding:11px 2px 11px 14px;background:none;cursor:pointer;text-align:left;min-width:0;
  color:inherit;text-decoration:none}
.sk-ml .so{font-family:var(--ff-td);font-size:13px;color:var(--n60);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.sk-ml .ten{flex:1;min-width:0;font-size:var(--fs-small);color:var(--n80);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .16s}
.sk-ml .ngay{font-size:var(--fs-eyebrow);letter-spacing:.1em;color:var(--n60);white-space:nowrap}
.sk-ml a:hover .ten{color:var(--n99)}
/* 🔴 A4 dòng đang trưng: PILL nền + viền mảnh + chữ TÍM (⛔ vàng — chị chốt). aria-current. */
.sk-ml a[aria-current="true"]{background:var(--v25);border-radius:999px;
  border:1px solid var(--v40);padding-left:14px;padding-right:14px}
.sk-ml a[aria-current="true"] .ten{color:var(--v70);font-weight:500}
.sk-ml a[aria-current="true"] .so{color:var(--v70)}

/* PANE ôm 10 panel. TẮT JS: mọi panel HIỆN (⑦ đủ nội dung). JS gắn .sk-js ⇒ chỉ .sk.sk-hien. */
.sk-pane{min-width:0;display:grid}
.sk-bo.sk-js .sk-pane .sk{display:none}
.sk-bo.sk-js .sk-pane .sk.sk-hien{display:grid}

/* TRANG TRƯNG — A2 nền chuyển sắc bằng TOKEN (⛔ hex/rgba — giữ hệ tím tự lật). overflow:visible
   cho bìa/khung trắng tràn mép. */
.sk{position:relative;display:grid;grid-template-columns:250px minmax(0,1fr);
  gap:44px;align-items:center;padding:40px 44px;
  border:1px solid var(--n30);border-radius:var(--bo);overflow:visible;
  background:linear-gradient(128deg,var(--v20) 0%,var(--v15) 46%,var(--v10) 100%)}
/* A10 cành hoa đào SVG nội tuyến — góc trên-phải, mờ, ⛔ chặn chuột; mobile ẨN (dưới media). */
.sk-hoa{position:absolute;z-index:0;top:-8px;right:-14px;width:262px;
  pointer-events:none;color:var(--v70);opacity:.5}
.sk-hoa svg{width:100%;height:auto;display:block}
/* A8 QUẦNG SÁNG phủ TOÀN panel (inset:0 — ⛔ nhốt trong hộp: gradient chưa tan đã chạm mép
   thành cạnh thẳng); lớp RIÊNG, ⛔ tranh ::after với ai (bài học mockup lượt 38). */
.sk-quang{position:absolute;z-index:0;inset:0;pointer-events:none;
  background:radial-gradient(38% 52% at 25% 52%,rgba(196,166,232,.26),transparent 62%)}
.sk-bia,.sk-chu{position:relative;z-index:1;min-width:0}
/* A11 chuyển cảnh đổi bộ — bìa/chữ vào lệch nhịp; PHANH prefers-reduced-motion (JS ⛔ gắn .sk-vao). */
@keyframes skVao{from{opacity:0;transform:translateY(10px) scale(.985)}
                 to{opacity:1;transform:none}}
.sk-vao .sk-bia,.sk-vao .sk-chu > *{
  animation:skVao .44s cubic-bezier(.22,.61,.36,1) both}
.sk-vao .sk-bia{animation-duration:.46s;animation-delay:.10s}
.sk-vao .sk-chu > :nth-child(1){animation-delay:.14s}
.sk-vao .sk-chu > :nth-child(2){animation-delay:.18s}
.sk-vao .sk-chu > :nth-child(3){animation-delay:.21s}
.sk-vao .sk-chu > :nth-child(4){animation-delay:.24s}
/* A6 bìa khung trắng dày + bóng sâu */
.sk-bia{z-index:1}
.sk-bia .bia{width:250px;border-radius:calc(var(--bo-nho) + 2px);
  box-shadow:0 0 0 9px rgba(255,255,255,.16),0 0 0 10px rgba(255,255,255,.10),
             0 34px 64px rgba(0,0,0,.42)}
.sk-chu{display:flex;flex-direction:column;align-items:flex-start;gap:13px}
.sk-chu .sk-ten{margin:-2px 0 2px}
/* A8 nhãn có hai vạch kim ôm — tím (B9: nét sát chữ dùng tím, ⛔ suy rộng khối khác). */
.sk-nhan{display:flex;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--n60)}
.sk-vach{width:26px;height:1px;background:var(--v40);flex:0 0 auto}
/* A8 kẻ mảnh trước đoạn giới thiệu */
.sk-ke{width:64px;height:1px;background:linear-gradient(90deg,var(--v40),transparent);margin:3px 0 1px}
/* A7 tên truyện font --ff (⛔ serif), TOKEN n99 · hover v70 (đọc được cả 2 nền, ⛔ chìm). */
.sk-ten{font-family:var(--ff);font-weight:600;font-size:44px;line-height:1.1;
  letter-spacing:-.018em;color:var(--n99);max-width:20ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-ten:hover{color:var(--v70)}
.sk-the{display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--n70)}
.sk-thoi{width:5px;height:5px;transform:rotate(45deg);background:var(--n50);flex:0 0 auto}
.sk-loi{max-width:58ch;font-size:15px;line-height:1.95;color:var(--n80);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* A8 icon dẫn dòng — k-chuong (= ICON_KHOI.chuong), ⛔ đứng một mình (đi kèm chữ §9).
   🔴 L507 (M.568) — `.sk-phu` là dòng phụ CỐ Ý mờ hơn thân bài, nhưng đo CDP (kt507-contrast.py)
   ra --n60 chỉ 3.28 nền tối / 3.08 nền sáng ⇒ DƯỚI AA thường 4.5 (chỉ AA-large). Nâng MỘT NẤC lên
   --n70 (đúng token .sk-the đang dùng, đo 4.93/4.51 ≥ 4.5) — vẫn mờ hơn --n80 của .sk-loi nên GIỮ
   phân cấp, ⛔ nâng bằng chữ chính. Token (⛔ hex): cụm .sk-* chữ nằm trên ảnh tối, hex ghim sẽ chìm
   ở nền sáng (L505 §A7). Icon --v60 cũng chỉ 4.41/4.36 (mờ hơn chữ sau khi nâng) ⇒ lên --v70. */
.sk-phu{display:flex;align-items:center;gap:9px;
  font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;color:var(--n70)}
.sk-phu svg{width:15px;height:15px;color:var(--v70);flex:0 0 auto}
/* A9 CTA — MỘT nút chuẩn nen.css (⛔ pha gradient riêng) + MỘT liên kết chữ. */
.sk-nut{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:5px}
.sk-nut .nut{border-radius:999px;padding-left:30px;padding-right:30px}
.sk-lk{font-size:var(--fs-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  color:var(--n80);opacity:.9;text-decoration:none}
.sk-lk::after{content:" →"}
.sk-lk:hover{opacity:1;color:var(--v70);text-decoration:underline;text-underline-offset:4px}

/* ── ③ ĐIỆN HẠ ĐỘC TUYỂN — SLIDE HẠT NGỌC, dùng lại KHUÔN Vạn Dân Bình Phẩm (§B M.566).
   🔴 B7 BỎ khung kín/4 góc/cây trâm mỗi thẻ/bệ phản chiếu/vệt đèn — chỉ HAI góc chéo + tím.
   🔴 B9 nét trang trí SÁT CHỮ dùng TÍM (--v40/--v50/--v60), ⛔ --net/--bac/--kim. */
#doc-tuyen{position:relative}
#doc-tuyen::before{content:"";position:absolute;left:50%;top:38%;width:min(680px,86%);
  height:340px;transform:translate(-50%,-50%);pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(185,194,208,.10),transparent 72%)}
#doc-tuyen > *{position:relative;z-index:1}
/* RAY-TRANG dùng lại khuôn VDBP: cards NẰM PHẲNG (⛔ page-div — server ⛔ biết bề rộng màn).
   TẮT JS = cuộn ngang (fallback, ⛔ mất bìa nào); JS gắn .dt-js ⇒ overflow:hidden + pan-y +
   dời bằng transform PX ĐẶT THẲNG lên ray (⛔ qua biến CSS — bài học VDBP: Chrome ⛔ chạy
   transition khi thứ duy nhất đổi nằm trong biến CSS). */
.dt-ray-o{position:relative;overflow-x:auto;border-radius:var(--bo);
  border:1px solid var(--n30);background:var(--v15);
  overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--v40) transparent}
.dt-ray-o::-webkit-scrollbar{height:6px}
.dt-ray-o::-webkit-scrollbar-thumb{background:var(--v40);border-radius:99px}
.dt-js .dt-ray-o{overflow:hidden;touch-action:pan-y}
/* ⛔ để trình duyệt bắt đầu kéo-thả ẢNH khi quẹt trên bìa — kéo-thả nuốt chuỗi pointer. */
.dt-ray-o img{-webkit-user-drag:none;user-select:none}
/* align-items:flex-start ⇒ chiều cao ăn theo NỘI DUNG (bài học lượt 37/38 VDBP). */
.dt-ray{display:flex;align-items:flex-start;gap:26px;padding:28px 30px 20px;
  transition:transform .62s cubic-bezier(.22,.61,.36,1)}
/* B5 bề rộng theo CÔNG THỨC 5 cột (⛔ chia theo số thẻ thật ⇒ trang cuối phình). */
.dt-ray > a{flex:0 0 calc((100% - 4 * 26px) / 5);min-width:0;max-width:none;display:block;
  position:relative;z-index:1;transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.dt-ray > a:hover{transform:translateY(-7px)}
/* B7 ĐÚNG HAI dấu góc chéo (trên-trái · dưới-phải), ⛔ khép kín, ⛔ bo tròn, tím --v50. */
.dt-khung{position:relative;display:block;padding:11px}
.dt-khung::before,.dt-khung::after{content:"";position:absolute;width:26px;height:26px;
  pointer-events:none;border:1px solid var(--v50);opacity:.85;transition:opacity .18s,border-color .18s}
.dt-khung::before{top:0;left:0;border-right:0;border-bottom:0}
.dt-khung::after{bottom:0;right:0;border-left:0;border-top:0}
.dt-ray .bia{box-shadow:0 18px 38px rgba(0,0,0,.34);width:100%}
/* B8 tên đè CHÂN BÌA ⇒ GHIM HEX (token lật sẽ chìm ở nền sáng). NGƯỢC .sk-ten (A7). */
.dt-chan{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;gap:5px;padding:34px 12px 12px;
  background:linear-gradient(180deg,transparent,rgba(9,6,13,.93) 58%)}
.dt-chan .ten{font-family:var(--ff);font-weight:600;font-size:17px;line-height:1.35;color:#FFFFFF;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-chan .the .dq{color:#C4A6E8;font-weight:600;flex:0 0 auto}
.dt-chan .the > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-chan .the{display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden;gap:8px;
  font-size:var(--fs-eyebrow);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82)}
.dt-ray > a:hover .dt-khung::before,.dt-ray > a:hover .dt-khung::after{border-color:#FFFFFF;opacity:1}
/* 🔴 B8 hover GHIM tím SÁNG #C4A6E8 (⛔ token — nền sáng lật thành tím tối, chìm chân bìa). */
.dt-ray > a:hover .dt-chan .ten{color:#C4A6E8}
/* vệt sáng quét bìa khi rê — kích hoạt ::after global ⑤ của trang-chu-v5.css */
.dt-ray > a:hover .bia::after{transition:transform .85s cubic-bezier(.22,.61,.36,1);transform:translateX(130%)}
/* B2 HẠT NGỌC — nút thật, viên xem ĐẶC + to, viên khác RỖNG + nhỏ (⛔ chỉ khác màu §9). */
.dt-ngoc{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:10px;color:var(--v50)}
.dt-ngoc button{display:grid;place-items:center;width:26px;height:26px;
  border:0;background:none;color:inherit;cursor:pointer;opacity:.55;transition:opacity .2s,transform .2s}
.dt-ngoc button[aria-selected="true"]{opacity:1}
.dt-ngoc button:hover{opacity:1;transform:scale(1.14)}

/* ── mobile 2 khối — mọi thay đổi TRONG media, desktop bất biến. Con số 900 PHẢI khớp
   DT_NGUONG_HEP/TP_NGUONG_HEP trong JS (§B3/§A5, cổng D2 canh) ── */
@media(max-width:900px){
  .sk-bo{grid-template-columns:1fr;gap:20px}
  .sk-pane{order:-1}                              /* A12: panel lên trước mục lục */
  .sk{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px;padding:24px 18px}
  .sk-bia{margin:0}
  .sk-bia .bia{width:170px;box-shadow:0 0 0 7px rgba(255,255,255,.14),0 18px 34px rgba(0,0,0,.4)}
  .sk-chu{align-items:center}
  .sk-ten{font-size:22px;max-width:none}
  .sk-the{justify-content:center}
  .sk-loi,.sk-phu,.sk-lk{display:none}           /* A12: ẩn giới thiệu/phụ/lối phụ, GIỮ trong DOM */
  .sk-nut{justify-content:center}
  .sk-hoa{display:none}                           /* A10: khung hẹp cắt cụt cành ⇒ ẩn hẳn */
  /* B: MỘT bìa/trang, quẹt sang bộ kế (dtMoiTrang()=1 khi hẹp — ⛔ nhánh CSS thứ hai lệch). */
  .dt-ray{padding:22px 18px}
  .dt-ray > a{flex:0 0 100%;max-width:none;scroll-snap-align:center}  /* mỗi bìa là một điểm dừng (như hero .o-bia) */
  .dt-ray > a:hover{transform:none}               /* ⛔ nhấc trên cảm ứng: ⛔ có con trỏ */
  /* 🔴 L508/M.569 — MOBILE = KHAY CUỘN THẬT, bắt chước ĐÚNG hero `.tc-hero .ke-bia`.
     Bài học L505/L506: mô phỏng cử chỉ qua CDP báo ĐẠT mà máy thật hỏng ⇒ thứ trình duyệt
     làm sẵn (cuộn ngang: quán tính+snap+bàn phím+trình đọc màn hình) thì ⛔ viết lại bằng JS.
     Luật `.dt-js .dt-ray-o{overflow:hidden;touch-action:pan-y}` ở trên chính là thứ giết cuộn:
     overflow:hidden bỏ cuộn gốc, và `pan-y` (THIẾU pan-x) chặn cử chỉ NGANG. Ghi đè tại đây —
     cùng specificity (0,2,0), luật này ĐỨNG SAU trong tệp nên thắng. */
  .dt-js .dt-ray-o{overflow-x:auto;overflow-y:hidden;touch-action:pan-y pan-x;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
  .dt-js .dt-ray-o::-webkit-scrollbar{display:none}
  .dt-js .dt-ray{transform:none!important}        /* xoá cái «ghì» transform của desktop (kể cả inline JS sót lại khi đổi cỡ) */
}
/* L506/M.567 §H: GỠ luật ẩn `.dt-chan .the` ở ≤560px. Luật cũ hợp lý hồi khối là lưới 2×2
   (mỗi bìa ~45% màn, thẻ thành nhiễu); từ L505 đổi sang ray QUẸT MỘT BÌA/màn, bìa rộng gần
   trọn màn ⇒ thừa chỗ, mà nhãn «Độc quyền» chính là thứ khối này tồn tại để nói. ⛔ THÊM LẠI
   luật ẩn `.dt-chan .the` theo bề rộng — bài học: luật ẩn theo bề rộng gắn với MỘT bố cục;
   đổi bố cục mà ⛔ rà lại thì nó lặng lẽ cắt mất nội dung (⛔ test đỏ, ⛔ cổng kêu, chỉ mắt thấy). */

/* ── NỀN SÁNG. 🔴 §A7/§B9: .sk-* dùng token tự lật · .dt-chan GHIM hex (⛔ lật) ⇒ hai khối này
   ⛔ CẦN override nền sáng nữa (gỡ khối bạc L503). GIỮ co-hang (Phong Vân — ⛔ trong phạm vi). ── */
[data-nen="sang"] .bia .co-hang{color:#FFFFFF}
[data-nen="sang"] .bia .co-hang em{color:#C4A6E8}

/* ══════════════════════════════════════════════════════════════════════
   KHỐI GHÉP ĐÔI (L699 · M.780 §H) — TRÁI Kim Chủ Bảng · PHẢI Hoa Lệnh Bảng.

   🔴🔴 KHỐI NÀY PHẢI NẰM TRƯỚC KHỐI BẢN SÁNG Ở CUỐI TỆP — ⛔ nối vào đuôi tệp.
      ⚪ Vì sao: cổng bản-sáng của tệp này coi khối ấy là «từ dấu mốc của nó TỚI HẾT TỆP», nên luật
        nền nối ở cuối bị tính là luật bản sáng rồi cổng đỏ (mã màu / class ma). Bẫy kèm: comment
        giải thích mà GÕ NGUYÊN dấu mốc ra thì cổng dò lần xuất hiện ĐẦU TIÊN ⇒ vẫn đỏ ⇒ ở đây cố ý
        chỉ NÓI Ý, ⛔ gõ token đang bị canh (§6).

   🔴🔴 HAI CỘT CỐ Ý KHÁC KIỂU (trái = THANH, phải = SỐ) — ⛔ «sửa cho đều». Lý do ở blade.
   ⚠️ Bề rộng một cột ở khung 1240 với khe 22px = 609px — dựng và đo ở đúng đó.
   🔴 101 luật bề rộng `.kc-muc[data-p]` nằm ở `thanh-suc-nang.css` (§9 một nguồn) — trang chủ NẠP
     tệp đó. Quên nạp ⇒ mọi thanh về width:0, ⛔ cổng DOM nào kêu.
   ══════════════════════════════════════════════════════════════════════ */
.tc-ghep{display:grid;grid-template-columns:1fr;gap:var(--khe-lon)}
@media (min-width:900px){ .tc-ghep{grid-template-columns:1fr 1fr;gap:22px} }
/* 🔴 L700 (M.818) — TẤM NỀN D3 «ÊM». Nguồn: mockup/ghep-doi-D-hai-nen.html mục D3
     (cùng tệp còn D2 và D4 — hai bản BỊ LOẠI, ⛔ port nhầm).
   🔴 VIỀN 40%, ⛔ --v50 ĐẶC: bản D2 chép nguyên --v50 từ `.tc-dt-the` và chị bắt là «thô» — thẻ đó
     rộng 260px nên viền NGẮN; khối này rộng 609px (khung 1240, khe 22) cao ~700 ⇒ cùng độ đậm mà
     đường dài gấp mấy lần ⇒ nặng. LUẬT: viền càng DÀI càng phải NHẠT. ⛔ tự ý nâng lại.
   🔴 Trong MỘT khối chỉ MỘT thứ được mang viền màu, và đó là TẤM NỀN này — ⛔ phải dòng dẫn đầu. */
.tc-ghep > .cot{min-width:0;   /* 1fr = minmax(auto,1fr): thiếu dòng này thì tên dài nong cột ra, tràn cả trang */
  background:var(--v20);background-image:var(--g-the);
  border:1px solid color-mix(in srgb, var(--v50) 40%, transparent);
  border-radius:var(--bo);box-shadow:var(--sh-the);
  padding:18px var(--khe) var(--khe)}
/* VẠCH TIÊU ĐỀ 1px → 2px — CHỈ trong khối ghép đôi.
   🔴🔴 `.tieu-de-khoi` là lớp TOÀN CỤC (khai ở nen.css) — component dùng hơn mười chỗ chỉ riêng trang
     chủ, cộng chi-tiet-truyen. BẮT BUỘC neo `.tc-ghep > .cot >`: sửa trần là đổi MỌI đầu khối của cả
     web, và ⛔ cổng nào bắt được vì trang vẫn chạy, chỉ khác đi.
   ⚠️ Markup thật dùng **h2** (component tieu-de-khoi) — mockup gõ h3, ⛔ chép. */
.tc-ghep > .cot > .tieu-de-khoi .vach{height:2px;
  background:linear-gradient(90deg, var(--v60), color-mix(in srgb, var(--v60) 14%, transparent))}
.tc-ghep > .cot > .tieu-de-khoi h2 svg{color:var(--v60)}
.tc-ghep-mo{margin:8px 0 0;font-size:var(--fs-small);color:var(--n80)}
.tc-ghep .toggle-ky{margin-top:12px}

/* 🔴 L704 (M.830 §A②) — CÂN ĐÁY HAI CỘT khi ĐỦ dòng. Dòng Kim Chủ (avatar 34px) thấp hơn dòng Hoa
   Lệnh (bìa 44px); nay Kim Chủ 8 dòng ≈ 5 dòng Hoa Lệnh, phần lệch còn lại san bằng ở đây.
   Cơ chế: hai tấm nền `.cot` vốn CAO BẰNG NHAU (ô lưới `1fr 1fr` kéo dãn) ⇒ cho `.cot` là cột FLEX,
     danh sách `.du-dong` GIÃN hết phần còn lại (`flex:1`) rồi `align-content:space-between` rải đều
     KHE giữa các dòng ⇒ dòng cuối HAI cột thẳng hàng đáy.
   🔴 CHỈ khi ĐỦ dòng (`.du-dong` gắn từ Blade khi count === trần) — kỳ vắng 2-3 dòng mà giãn thì
     rải cả cột trông như lỗi ⇒ để nguyên, chấp nhận trống (cổng ④ canh).
   🔴 CHỈ ≥900px (hai cột cạnh nhau). <900px xếp dọc, KHÔNG giãn — và cắt Kim Chủ còn 5 dòng (dưới). */
@media (min-width:900px){
  .tc-ghep > .cot{display:flex;flex-direction:column}
  .tc-kc.du-dong, .tc-hl.du-dong{flex:1;align-content:space-between}
}

/* ── cột TRÁI: Kim Chủ — dòng [hạng][avatar+tên][thanh sức nặng] ── */
.tc-kc{list-style:none;display:grid;gap:2px;margin:var(--khe) 0 0;padding:0}
/* 🔴🔴 CỘT THANH LÀ `minmax(116px, max-content)`, ⛔ ĐƯỢC CỨNG `116px` — CHỊ SOI MẮT BẮT ĐƯỢC 17/09
   (M.817), cả hai cổng tự động của L699 đều XANH lúc đó.
   ⚪ Đo lại trên server sống, 390px, font THẬT «Be Vietnam Pro» 9.5px + letter-spacing 1.14px:
     «Dẫn đầu» 53px · «7% của hạng 1» 89px · «55% của hạng 1» 98px · «100% của hạng 1» 103px ·
     **«dưới 1% của hạng 1» 120px** — nhãn DÀI NHẤT mà controller sinh ra được **vượt 116px ⇒ TRÀN**.
   🔴 Vì sao cổng cũ ⛔ bắt được: nó đo `scrollWidth <= clientWidth` của CẢ TRANG, mà chữ tràn khỏi
     MỘT TRACK trong lưới thì trang ⛔ mọc thanh cuộn ⇒ đo được «⛔ tràn» trong khi mắt thấy lệch.
     ⇒ Cổng nay đo TỪNG NHÃN so với track của nó (`kt-hoa-lenh-l699.cjs`), ⛔ chỉ đo cả trang.
   ⚠️ `max-content` làm track rộng bằng nhãn dài nhất TRONG CẢ CỘT ⇒ mọi thanh vẫn BẰNG NHAU
     (grid dùng chung track cho mọi hàng); cột tên co lại và đã có ellipsis nên ⛔ vỡ.
   ⛔ vá bằng cách rút nhãn xuống «55%» trần: bỏ mất «của hạng 1» là bỏ mất thứ làm con số có nghĩa. */
.tc-kc-dong{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(116px,max-content);gap:10px;align-items:center;
  padding:8px 8px;border-radius:var(--bo-nho);border:1px solid transparent}
.tc-kc-dong:hover{background:var(--v15);border-color:var(--n30)}
.tc-kc-dong .hang{font-family:var(--ff-so);font-size:var(--fs-small);color:var(--n50);text-align:center;line-height:1}
.tc-kc-dong .nguoi{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;align-items:center;min-width:0}
.tc-kc-dong .noi{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.tc-kc-dong .ten{font-weight:600;color:var(--n99);font-size:var(--fs-small);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tc-kc-dong .nguoi:hover .ten{color:var(--v80)}
.tc-kc-dong .suc{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.tc-kc-dong .ray{width:100%;height:7px;border-radius:999px;background:var(--v30);overflow:hidden}
/* Nhãn CHỮ dưới thanh — ⛔ bỏ: màu/độ dài thanh ⛔ được đứng một mình (§9). */
.tc-kc-dong .nhan{font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--n70);white-space:nowrap}

/* ── cột PHẢI: Hoa Lệnh — dòng [hạng][bìa+tên+bút danh][SỐ] ── */
.tc-hl{list-style:none;display:grid;gap:2px;margin:var(--khe) 0 0;padding:0}
.tc-hl-dong{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:8px 8px;border-radius:var(--bo-nho);border:1px solid transparent}
.tc-hl-dong:hover{background:var(--v15);border-color:var(--n30)}
.tc-hl-dong .hang{font-family:var(--ff-so);font-size:var(--fs-small);color:var(--n50);text-align:center;line-height:1}
.tc-hl-dong .bo{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-width:0}
/* Bìa tỉ lệ 5/7 — <x-bia-img> đã gắn width/height 600×840 chống CLS, ở đây chỉ đặt bề ngang. */
.tc-hl-dong .bia img{width:44px;height:auto;border-radius:var(--bo-nho);display:block}
.tc-hl-dong .noi{min-width:0}
.tc-hl-dong .ten{display:block;font-weight:600;color:var(--n99);font-size:var(--fs-small);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-hl-dong .bo:hover .ten{color:var(--v80)}
.tc-hl-dong .tg{display:block;margin-top:2px;font-size:var(--fs-eyebrow);color:var(--n70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* `nowrap` — cột phải hẹp; thiếu nó thì số bị bẻ dòng giữa chừng.
   🔴 L699 (M.817 ②) — SỐ ĐI KÈM ICON, ⛔ đứng trần: «49.700» một mình cạnh một cái bìa thì ⛔ nói
   được nó đếm CÁI GÌ (dễ đọc nhầm ra lượt đọc). Icon hoa nói đơn vị mà ⛔ tốn một dòng chữ — cùng
   nếp hàng `.ct-do` ở trang truyện. §9: con số ⛔ đứng một mình. */
.tc-hl-dong .so{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end;
  font-family:var(--ff-so);color:var(--v80);font-size:var(--fs-small);white-space:nowrap;text-align:right}
.tc-hl-dong .so svg{flex-shrink:0;opacity:.85}

/* ── L700 (M.818) · DÒNG DẪN ĐẦU (hạng 1) — NỔI BẰNG *MẶT*, ⛔ BẰNG VIỀN. Dùng chung CẢ HAI cột. ──
   🔴 ⛔ cho dòng này thêm viền màu hay vòng box-shadow: bản D2 làm thế và đọc ra HỘP TRONG HỘP
     (chị bắt 17/09). Tấm nền đã mang viền rồi — trong một khối chỉ MỘT thứ được mang viền màu.
   ⚠️ `.tc-kc-dong`/`.tc-hl-dong` ĐÃ có `border:1px solid transparent` sẵn ở trên ⇒ `border-color`
     dưới đây là GIỮ NGUYÊN chỗ trong suốt, ⛔ phải thêm viền mới.
   🔴 LUẬT `:hover` — bài học L451. Luật hover của hai cột có CÙNG trọng số với `.tc-ghep .dan-dau`
     ⇒ rê chuột vào hạng 1 sẽ làm mặt TỐI ĐI thay vì sáng lên. Luật `.dan-dau` + trạng-thái-rê-chuột
     ở dòng cuối khối này nặng hơn một bậc nên vô hiệu hoá phản hồi cho ĐÚNG MỘT dòng đó — nó đã nổi
     sẵn, ⛔ cần phản hồi thêm. 🔴 ⛔ CHỮA BẰNG CÁCH SỬA LUẬT RÊ-CHUỘT TRẦN (đó là đụng cả cột). */
.tc-ghep .dan-dau{position:relative;background:var(--v30);border-color:transparent;box-shadow:none}
.tc-ghep .dan-dau::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;
  border-radius:0 3px 3px 0;background:var(--g-nut)}
.tc-ghep .dan-dau:hover{background:var(--v30);border-color:transparent}

/* 🔴🔴 BREAKPOINT ĐIỆN THOẠI — CHỊ SOI MẮT BẮT THIẾU (M.817 ①, 17/09).
   ⚪ Gốc lỗi: `/xep-hang` CÓ đủ *(`.kc-suc{width:132px}` + `@media (max-width:620px){.kc-suc{width:96px}}`)*
     nhưng lúc mang khối này sang trang chủ thì **quên hẳn** — grep cả vùng chỉ ra ĐÚNG MỘT `@media`,
     và đó là `min-width:900px` để chia hai cột. Hai nơi cùng một thứ mà chỉ một nơi có breakpoint.
   ⇒ Ở điện thoại: thu đệm + khe cho vừa, và thu bìa cột Hoa Lệnh. Track thanh ⛔ ép cứng nữa
     (xem `minmax(116px,max-content)` ở trên) nên nhãn ⛔ còn tràn. */
/* 🔴 L704 (M.830 §A③) — <900px hai bảng XẾP DỌC ⇒ cột Kim Chủ 8 dòng thành một danh sách dài lê
   thê trên điện thoại. Cắt còn 5 dòng (mốc khớp `min-width:900px` của `.tc-ghep`). Ẩn bằng CSS ⇒ DOM
   vẫn 8 (SEO/hạng thật giữ nguyên), chỉ 5 dòng HIỂN THỊ. ⛔ giãn ở đây (du-dong chỉ sống ≥900px). */
@media (max-width:899px){
  .tc-kc .tc-kc-dong:nth-child(n+6){display:none}
}
@media (max-width:640px){
  .tc-kc-dong{gap:8px;padding:7px 4px}
  .tc-hl-dong{gap:8px;padding:7px 4px}
  .tc-hl-dong .bo{grid-template-columns:38px minmax(0,1fr);gap:8px}
  .tc-hl-dong .bia img{width:38px}
}

/* ═══════════ L455 (M.513 ĐỢT 4a) — BẢNG PHÂN VAI BỀ MẶT, bản SÁNG · TRANG CHỦ ═══════════
   Nguồn: mockup/BANG_PHAN_VAI_BE_MAT.md. 🔴 CHỈ THÊM khối [data-nen="sang"]; luật trần ở TRÊN
   LÀ luật bản TỐI ⇒ GIỮ NGUYÊN (bài học ①/L448). ⛔ đụng luật :hover (bài học L451).
   VAI (đọc trang-chu.blade RỒI gán, ⛔ suy từ tên):
     • CARD = surface hiện CHỮ/nội dung trực tiếp lên nó → n05 TRẮNG + --sh-the (nổi khỏi nền).
     • TRAY = khay ôm CARD con → GIỮ token light trần (⛔ đắp trắng chồng trắng).
   ⛔ .tc-khung: TRAY ôm .ts-bac (L450 đã cho .ts-bac TRẮNG) — GIỮ v20 để card trắng NỔI (đo §C⑦).
   ⛔ .tc-gu-the: Ô ẢNH (img phủ inset:0 + lớp phủ tối) ⛔ mặt thẻ — GIỮ (vars chữ ở L519 lo).
   ⛔ .tc-o: ⛔ render ở trang chủ (chỉ khu/tai-chinh.blade) — để đợt sau, ⛔ đụng đây. */

/* Card «Tân Chương / Bình luận cuối trang» — blade ghi «MỘT thẻ ba cột» → trắng + bóng */
[data-nen="sang"] .tc-doi{background:var(--n05);box-shadow:var(--sh-the)}

/* Card lời bình «Vạn Dân Bình Phẩm» → trắng + bóng (hover v25 ở luật trần GIỮ NGUYÊN) */
[data-nen="sang"] .tc-bp a{background:var(--n05);box-shadow:var(--sh-the)}
[data-nen="sang"] .tc-bp a:hover,
[data-nen="sang"] .tc-bp a:focus-visible{box-shadow:var(--sh),0 0 0 1px var(--bp-len)}
/* 🔴 L709 §A② — BẢN SÁNG PHẢI KHAI LẠI BÓNG LÚC NHẤC THẺ LÊN.
   ⚪ Đã cắn và CC bắt được lúc đo hover trên server sống 18/09: luật trần `.tc-bp a:hover`
      và luật sáng `[data-nen="sang"] .tc-bp a` có CÙNG đặc hiệu (0,2,1), mà luật sáng nằm
      SAU trong tệp ⇒ nó THẮNG cả ở trạng thái hover ⇒ bản sáng chỉ nhấc lên 8px mà bóng
      ĐỨNG IM, mất luôn viền mờ. Đúng họ «đổi THẺ mà ⛔ đổi SELECTOR là LỖI CÂM» (§9):
      ⛔ test nào đỏ, ⛔ console nào kêu, chỉ số đo CDP mới lộ.
   ⇒ Khai lại ở đặc hiệu CAO HƠN (0,3,1). ⛔ hạ luật sáng xuống dưới luật hover — thứ tự
      trong tệp là thứ dễ bị lượt dọn sau này xáo lại nhất. */

/* 🔴 L709 §A② — BẢN SÁNG: sao và ấn chuyển TÍM (--v60), ⛔ vàng ⛔ đỏ son (chị chốt mockup v2).
   Trục/chỉ/lề vẫn đi qua `--net` nên tự thành BẠC ngọc trai ⇒ ⛔ khai lại ở đây.
   Đặc hiệu (0,2,1) + [data-nen] > luật trần .tc-bp-khoi (0,1,0) ⇒ thắng. */
[data-nen="sang"] .tc-bp-khoi{--bp-sao:var(--v60);--bp-an:var(--v60)}

/* Card «Tìm theo thể loại» → trắng + bóng; chip bên trong = Ô CON trong suốt + viền (nếp đợt 1) */
[data-nen="sang"] .tc-dai{background:var(--n05);box-shadow:var(--sh-the)}
[data-nen="sang"] .tc-dai .vien a{background:transparent}

/* Chữ PHỤ (fs-eyebrow) khi card đổi sang TRẮNG: --n60 = 3,93:1 < 4,5 (AA) ⇒ nâng --n70 = 5,76:1.
   🔴 CHỈ bản sáng — luật trần --n60 GIỮ (trên card v20 bản tối --n60 vốn đủ). Đo CDP xác nhận. */
[data-nen="sang"] .tc-ds .phu,
[data-nen="sang"] .tc-ds .luc,
[data-nen="sang"] .tc-dai .vien a em{color:var(--n70)}
/* 🔴 L709 §A④ — `.tc-bp .luc` GỠ khỏi danh sách trên: mockup v2 bỏ «x ngày trước» khỏi khối
   Vạn Dân ⇒ selector đó ⛔ còn trỏ vào phần tử nào (CSS trỏ tới thứ ⛔ tồn tại là tàn dư gây
   lạc — CLAUDE.md §9). Ba selector còn lại thuộc khối KHÁC, GIỮ NGUYÊN. */

/* M.520 (L464) — hàng «đang chọn» ở Điện Hạ đề cử: nền --g-nut + chữ TRẮNG, CHỈ BẢN SÁNG.
   🔴 Luật trần aria-current (bản TỐI: rgba(107,78,155,.22) · --n99 · --v80 · --n90) GIỮ NGUYÊN — CHỊ CHỐT.
   Chị chốt phương án B sau khi xem mockup/hero-dong-dang-chon.html; đánh đổi «hàng đậm TỰ XOAY nhảy chỗ
   mỗi hero_tu_xoay_giay giây» đã nêu, chị VẪN chọn ⇒ phiên sau ⛔ tự đổi (CLAUDE.md §B của lệnh).
   Đặc-hiệu +[data-nen="sang"] ⇒ (0,5,0) > luật trần (0,4,0), thắng. Tên phần tử đọc từ blade: .so · .ten
   · .tg (câu mô tả) · .o-cuoi. Chữ .88 là SÀN (bài học ④); đo đầu NHẠT nhất gradient --v60 #7857AD. */
[data-nen="sang"] .tc-hero .dong[aria-current="true"]{background:var(--g-nut)}
[data-nen="sang"] .tc-hero .dong[aria-current="true"] .ten{color:var(--n05)}
[data-nen="sang"] .tc-hero .dong[aria-current="true"] .so,
[data-nen="sang"] .tc-hero .dong[aria-current="true"] .tg,
[data-nen="sang"] .tc-hero .dong[aria-current="true"] .o-cuoi{color:rgba(255,255,255,.88)}


/* ═══════════════════════════════════════════════════════════════════════════
   ĐỌC TIẾP Ở TRANG CHỦ — L681 · M.786 §A
   PORT từ mockup/css/doc-tiep-trang-chu.css (keeper dựng 14/09, chị chốt cùng ngày).
   Biến thể chị CHỐT: đầu khối kiểu GỌN · 2 thẻ · nút «Đọc tiếp →» (⛔ mang số chương).

   🔴 Chỉ dùng token — ⛔ MỘT mã màu gõ tay nào. Bìa 5/7 (§5), cỡ chữ 1 trong 7 bậc,
      nhịp lấy từ --khe (nhip.css) ⛔ rải số đo riêng.
   🔴 NỀN SÁNG TỰ CHẠY: nen.css ĐẢO TOÀN BỘ token dưới :root[data-nen="sang"] ⇒ --v15
      · --v20 · --n99 · --sh-the ở đây tự đổi nghĩa. Khối [data-nen="sang"] cuối khối
      CHỈ hai luật — đúng chỗ bản sáng cần VAI khác, ⛔ phải màu khác. ⛔ thêm luật màu.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── dải nền ──────────────────────────────────────────────────────────────────
   ⚪ VÌ SAO KHỐI NÀY CÓ NỀN RIÊNG chứ ⛔ trong suốt như các khối khác: nó nằm TRÊN
     hero — tức trước cả phần web tự giới thiệu. Để trong suốt thì nó trôi lẫn vào hero
     và đọc ra như một mục quảng cáo nữa. Dải nền mảnh + kẻ đáy tách nó thành «đồ của
     bạn», ⛔ phải «đồ web mời bạn». */
.tc-doc-tiep{
  background:var(--v15);
  border-bottom:1px solid var(--n30);
}
.tc-doc-tiep .bao{padding-block:18px}
@media (min-width:900px){ .tc-doc-tiep .bao{padding-block:22px} }

/* ── đầu khối, KIỂU GỌN (nhãn eyebrow) ────────────────────────────────────────
   Kiểu CHUẨN thì dùng thẳng .tieu-de-khoi của nen.css — ⛔ chế lại. */
.tc-dt-dau{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:var(--khe);
}
.tc-dt-nhan{
  display:inline-flex;align-items:center;gap:7px;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--v80);
}
.tc-dt-nhan svg{flex-shrink:0}
.tc-dt-tatca{
  font-size:var(--fs-small);color:var(--n70);
  text-decoration:none;white-space:nowrap;
}
.tc-dt-tatca:hover{color:var(--v80)}

/* khi dùng kiểu CHUẨN, kéo khoảng cách đáy về --khe cho khít dải mảnh này */
.tc-doc-tiep .tieu-de-khoi{margin-bottom:var(--khe)}

/* ── hàng thẻ ─────────────────────────────────────────────────────────────── */
.tc-dt-ds{
  display:flex;flex-wrap:wrap;gap:var(--khe);
  align-items:stretch;                 /* §5: cùng hàng phải cùng đáy */
  min-width:0;
}
.tc-dt-the{
  flex:1 1 260px;
  /* 🔴🔴 BẪY FLEXBOX — ⛔ XOÁ DÒNG NÀY. Thẻ tự nó cũng là một flex ITEM, mà flex item
     mặc định `min-width:auto` = rộng bằng NỘI DUNG NHỎ NHẤT. Tên truyện để `nowrap` ⇒
     nội-dung-nhỏ-nhất của nó là CẢ TÊN ⇒ thẻ ⛔ chịu co, tràn ra ngoài khung. Đo 14/09
     ở 390px: khung 352 mà thẻ 500 (tràn 148px), nút bị cắt mất đuôi.
     `min-width:0` ở ĐÂY mới cho thẻ co; `min-width:0` ở .tc-dt-noi là CHƯA ĐỦ. */
  min-width:0;
  /* 🔴 TRẦN — GIỮ, ⛔ BỎ HẲN. Lý do gốc của L681 vẫn nguyên: một thẻ kéo dài hết bề ngang
     đọc ra như banner quảng cáo, ⛔ phải như một mục trong kệ của mình.
     🔴 L696 · M.809 — NỚI 1/3 → 1/2, ĐẢO CÓ CHỦ Ý một vế của L681 (bản cũ ghi «hai thẻ
     chừa 1/3 phải là CỐ Ý»). ⚪ VÌ SAO ĐẢO: số thẻ đã chốt là HAI (`DOC_TIEP_SO = 2`,
     chị chọn 14/09), ⛔ phải ba — nên 1/3 bóp chữ mà vẫn để trống 1/3 bên phải.
     Keeper đo 16/09 tại 1470px: khung `.tc-dt-ds` 1240 · thẻ 399 · ô tên 206 trong khi
     nội dung cần 327 ⇒ CẮT 121px, và dòng «Đang ở» cắt ở CẢ HAI thẻ.
     ⚠️ Đổi `DOC_TIEP_SO` thì phải xét lại mẫu số này — hai con số buộc vào nhau. */
  max-width:calc((100% - var(--khe)) / 2);
  display:flex;align-items:center;gap:12px;
  padding:10px;
  background:var(--v20);
  border:1px solid var(--n30);
  border-radius:var(--bo);
  box-shadow:var(--sh-the);   /* tối = none · sáng = bóng mặt thẻ (L450) */
  text-decoration:none;
  transition:border-color .18s ease, background .18s ease;
}
.tc-dt-the:hover{background:var(--v25);border-color:var(--v50)}
.tc-dt-the:focus-visible{outline:2px solid var(--v80);outline-offset:2px}

/* bìa — nhỏ: đây là dải TIỆN ÍCH, ⛔ phải kệ trưng bày */
.tc-dt-bia{
  flex-shrink:0;width:46px;
  border-radius:var(--bo-bia);overflow:hidden;
  background:var(--v30);
}
.tc-dt-bia img{display:block;width:100%;aspect-ratio:5/7;object-fit:cover}

.tc-dt-noi{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.tc-dt-ten{
  font-size:var(--fs-body);font-weight:500;line-height:1.4;color:var(--n99);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tc-dt-dang{
  font-size:var(--fs-small);line-height:1.4;color:var(--n70);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tc-dt-dang b{color:var(--n90);font-weight:500}

/* nút — nằm TRONG thẻ; CẢ THẺ mới là <a>. ⛔ lồng hai liên kết vào nhau. */
.tc-dt-nut{
  flex-shrink:0;
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:999px;
  background:var(--g-nut);color:var(--v10);
  font-size:var(--fs-small);font-weight:600;line-height:1;
  white-space:nowrap;
}
.tc-dt-the:hover .tc-dt-nut{background:var(--g-nut-hover)}

/* ── §C — biến thể KHÁCH (localStorage): đúng 1 thẻ + lời mời đăng nhập ──────── */
.tc-dt-khach{margin-top:10px;font-size:var(--fs-small);color:var(--n70)}
.tc-dt-khach a{color:var(--v80);text-decoration:none}
.tc-dt-khach a:hover{text-decoration:underline}

/* ── ĐIỆN THOẠI ───────────────────────────────────────────────────────────── */
@media (max-width:899px){
  /* ≤2 thẻ ⇒ xếp DỌC, ⛔ cuộn ngang. Cuộn ngang chỉ đáng khi có nhiều hơn màn hình
     chứa nổi; ở đây nó chỉ tổ giấu mất thẻ thứ hai sau mép màn. */
  .tc-dt-the{flex:1 1 100%;max-width:none;padding:9px}
  .tc-dt-bia{width:40px}
  .tc-dt-nut{padding:7px 11px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   NỀN SÁNG — CHỈ hai luật, đúng chỗ bản sáng cần VAI khác.
   🔴 ⛔ thêm luật màu ở đây: token đã tự đảo, viết lại là đẻ nguồn thứ hai.
   ═══════════════════════════════════════════════════════════════════════════ */
/* mặt thẻ bản sáng = TRẮNG nổi trên nền dải (nếp .dk-tom · L462), ⛔ phải «khay lõm»
   --v20 vốn dành cho thẻ nằm trên nền TRANG. */
[data-nen="sang"] .tc-dt-the{background:var(--n05)}
/* hover: giữ trắng, đổi viền + nâng bóng — ⛔ tô xám (xám đọc ra «đang bị khoá») */
[data-nen="sang"] .tc-dt-the:hover{background:var(--n05);box-shadow:var(--sh-bia)}

/* ── §C — CHỖ CHỜ của khối «Đọc tiếp» bản KHÁCH (L681 · M.786) ────────────────
   🔴 Mặc định CAO 0: khách chưa đọc gì (và mọi bot / lượt đầu tiên) thấy trang chủ Y NGUYÊN.
   Chỉ khi script đầu trang đọc được `dh_doc_dang` trong localStorage mới gắn `data-cho="1"`
   ⇒ chừa sẵn đúng chiều cao khối, để lúc `doc-tiep.js` thay chỗ chờ bằng khối thật thì
   phần dưới ⛔ NHẢY. Số đo lấy từ khối thật MỘT THẺ (đo CDP 14/09, xem bàn giao).
   ⚠️ Đổi đệm/bìa/cỡ chữ của `.tc-dt-*` thì ĐO LẠI hai số này — lệch là nhảy bố cục trở lại. */
.tc-dt-cho{min-height:0}
/* 183 / 181 = chiều cao ĐO ĐƯỢC của khối thật một-thẻ trên server sống (CDP 14/09, cổng ②b của
   kt-doc-tiep-khach-l681.cjs). Điện thoại CAO HƠN desktop vì câu mời đăng nhập xuống hai dòng.
   ⛔ đoán hai số này — cổng ②b so chỗ chờ với khối thật, lệch quá 4px là ĐỎ. */
.tc-dt-cho[data-cho="1"]{min-height:183px;border-bottom:1px solid var(--n30);background:var(--v15)}
@media (min-width:900px){ .tc-dt-cho[data-cho="1"]{min-height:181px} }

/* ── L699 (M.780 §H) · KHỐI GHÉP ĐÔI, bản SÁNG ──
   🔴 CHỈ scope [data-nen="sang"]; luật trần = bản TỐI, GIỮ NGUYÊN. ⛔ đụng :hover, ⛔ mã màu # gõ tay.
   Ray của thanh sức nặng ở bản tối là --v30 (tím nhạt trên nền tối); trên nền trắng nó gần như tàng
   hình ⇒ đổi sang bậc xám có viền, để thấy được ĐỘ DÀI phần chưa tô. */
[data-nen="sang"] .tc-kc-dong .ray{background:var(--n20)}
[data-nen="sang"] .tc-kc-dong .nhan{color:var(--n60)}
[data-nen="sang"] .tc-hl-dong .tg{color:var(--n60)}

/* ── L700 (M.818) · TẤM NỀN D3, bản SÁNG ──
   🔴 CHỈ scope [data-nen="sang"]; luật trần ở TRÊN là bản TỐI ⇒ GIỮ NGUYÊN. ⛔ mã màu # gõ tay.
   ⚪ Dự án ⛔ dùng `prefers-color-scheme` — nền đọc từ cookie Ở SERVER (L237) rồi đặt `data-nen`
     lên <html>. ⇒ ⛔ thêm nhánh media theo nền hệ điều hành ở đây.
   ⚠️ Bản sáng --v20 (#E9E0F4) CỐ Ý TỐI HƠN nền trang --v10 (#F7F3FB) ⇒ khối đọc ra KHAY LÕM.
     Điều này chốt từ 15/08 kèm câu «⛔ TỰ Ý ĐẢO LẠI» — ⛔ đảo cho «nổi lên».
     Thứ nổi lên là MẶT dòng dẫn đầu: trắng --n05 + bóng --sh-the.
   ⚪ Ba thứ kia (tấm nền --v20 · viền --v50 · vạch --v60) đều là token nên TỰ ĐẢO, ⛔ cần luật riêng. */
[data-nen="sang"] .tc-ghep > .cot{border-color:color-mix(in srgb, var(--v50) 34%, transparent)}
[data-nen="sang"] .tc-ghep .dan-dau,
[data-nen="sang"] .tc-ghep .dan-dau:hover{background:var(--n05);box-shadow:var(--sh-the)}