/* ══════════════════════════════════════════════════════════ TRANG CHỦ v5 — LỚP HIỆU ỨNG & ELEMENT, phủ CẢ TRANG Tiền tố `.v5-`; ngoài ra chỉ đè lên lớp đã có. 🔴 LUẬT CỦA CẢ TỆP: nạp SAU `trang-chu.css`, chỉ THÊM. ⛔ KHÔNG đổi `--v10` nền, ⛔ KHÔNG đổi `--v20` mặt thẻ, ⛔ KHÔNG đổi bố cục, ⛔ KHÔNG đổi bề ngang, ⛔ KHÔNG đổi nhịp dọc. Chủ dự án đã xem bản giãn tầng và chọn GIỮ nền cũ. ⚠️ Có mã màu gõ tay: màu ĐỀ XUẤT chưa có trong hai dải. Chốt cái nào thì cái đó mới vào `nen.css` + `DESIGN_TOKENS.md`. ══════════════════════════════════════════════════════════ */ :root{ /* ── NÉT KIM LOẠI — hai bộ để so, bấm đổi tại chỗ ── 🔴 Cả tệp chỉ dùng `--net` / `--net-mo` / `--g-net`. ⛔ ĐỪNG gọi thẳng `--kim` hay `--bac` ở bất cứ đâu khác: gọi thẳng thì nút đổi ⛔ không đổi được chỗ đó, và sẽ có một mảnh vàng sót lại giữa bản bạc. CHAMPAGNE — TÁCH khỏi `--vang #E8C46A` đang khoá cho TRẠNG THÁI. ⚠️ ⛔ Đừng dùng vàng chóe (#FFD700): bão hoà cao trên nền tối là sến ngay. */ --kim:#C9A961; --kim-mo:#8A7340; /* ÁNH BẠC — lạnh, cùng phía với tím. Hoà nhưng ⛔ không tạo đối. */ --bac:#B9C2D0; --bac-mo:#6E7A8C; --net:var(--kim); --net-mo:var(--kim-mo); --g-net:linear-gradient(90deg,transparent,var(--net-mo) 14%,var(--net) 50%,var(--net-mo) 86%,transparent); /* Vân mây — hoạ tiết cổ phong, vẽ SVG nên ⛔ không thêm lượt tải nào */ --van:url("data:image/svg+xml,"); } /* (Nút đổi Kim/Bạc ⛔ KHÔNG port — §A4. Giữ nét VÀNG champagne; --net trỏ --kim cố định.) */ /* 🔴 Lệnh 264 (M.291 §A) — NÉT KIM → BẠC Ở BẢN SÁNG (chị chốt trang so Vàng/Bạc). Gốc: `--g-net` khai ở :root (dòng 27) đã THẾ var() thành chuỗi VÀNG chết NGAY tại (kim đông cứng). `:root[data-nen="sang"]` (nen.css) có đổi --kim/--bac nhưng --g-net đã hoá chuỗi ⇒ nét vẫn vàng — đúng bài học 15/08 «bấm Vàng/Bạc ⛔ đổi gì». Vá đúng TẦNG như nguồn light-D.css:76-80: KHAI LẠI ở BODY trong scope sáng, var() thế lại tại body ⇒ ăn --bac/--bac-mo bản sáng (nen.css: #7C8698 / #AFB8C6). Lật cả --net/--net-mo để ⛔ còn «mảnh vàng sót giữa bản bạc» (cảnh báo dòng 16-18: mọi nơi dùng --net/--net-mo/--g-net ⇒ một chỗ lật là đủ). ⛔ đụng bản tối (chỉ trong [data-nen="sang"]). */ [data-nen="sang"] body{ --net:var(--bac); --net-mo:var(--bac-mo); --g-net:linear-gradient(90deg,transparent,var(--net-mo) 14%,var(--net) 50%,var(--net-mo) 86%,transparent)} /* ═══ ① ĐỔ BÓNG BỐN BÊN MÀN HÌNH ═══ Tối dần ở rìa, dồn mắt vào giữa. 🔴 Đi XUỐNG chứ ⛔ không đi lên — chủ dự án thích cái tối, nên đào sâu chứ ⛔ đừng làm nhạt. ⚠️ `position:fixed` + `pointer-events:none`, đặt DƯỚI nội dung (z-index 0) vì `body::before` của nen.css cũng ở z-index 0 và phải cùng tầng. */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background:radial-gradient(140% 100% at 50% 42%,transparent 52%,rgba(4,2,8,.55) 100%)} main,#slot-menu,#slot-chan{position:relative;z-index:1} /* ═══ ② VÂN MÂY Ở CÁC KHỐI CÓ DẢI NỀN ═══ 🔴 Chỉ đặt ở `.tc-nen` — ba khối, ⛔ không phải mọi khối. Hoạ tiết ở khắp nơi thì ⛔ không còn là điểm nhấn, chỉ còn là nhiễu. */ .tc-nen{position:relative;overflow:hidden} .tc-nen::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:var(--van);background-repeat:no-repeat; background-position:right -40px top -22px;background-size:320px auto;opacity:.05} .tc-nen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:var(--van);background-repeat:no-repeat; background-position:left -70px bottom -38px;background-size:250px auto;opacity:.038; transform:scaleX(-1)} .tc-nen>.bao{position:relative;z-index:1} /* ═══ ③ DẤU NGĂN GIỮA HAI KHỐI ═══ Element mới: một dấu nhỏ giữa hai khối liền nhau, thay cho khoảng trống suông. ⚠️ `aria-hidden` ở HTML — đây là trang trí, ⛔ không để trình đọc màn hình đọc ra. */ .v5-ngan{display:flex;align-items:center;justify-content:center;gap:16px; padding-block:6px;pointer-events:none} .v5-ngan i{display:block;width:min(28vw,190px);height:1px; background:linear-gradient(90deg,transparent,rgba(107,78,155,.55))} .v5-ngan i:last-child{transform:scaleX(-1)} .v5-ngan em{display:block;width:5px;height:5px;flex-shrink:0; transform:rotate(45deg);background:var(--net-mo);opacity:.85} /* ═══ ④ TIÊU ĐỀ KHỐI — chỉ nét kim ═══ 🔴 ĐÃ BỎ dòng chữ dẫn giãn màu tím. Chủ dự án chốt 07/08: bỏ hết dòng mô tả dưới/trên tiêu đề. Tiêu đề khối tự nói đủ; thêm một dòng giải thích là thừa chữ, và chữ thừa làm trang trông rối chứ ⛔ không làm nó sang. */ .tieu-de-khoi .vach{background:var(--g-net);opacity:.55} .tieu-de-khoi h2 svg{color:var(--net);opacity:.9} /* ═══ ⑤ VỆT SÁNG QUÉT QUA BÌA ═══ 🔴 CHỈ chạy khi rê chuột, ⛔ không tự lặp. Hiệu ứng tự lặp mãi trên trang dài là thứ làm người ta mỏi mắt rồi tắt tab. ⚠️ `.bia` của nen.css đã có `overflow:hidden`, nên vệt ⛔ không tràn ra ngoài. */ .bia{position:relative} .bia::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.28) 50%,transparent 62%); transform:translateX(-130%)} .tc-the:hover .bia::after, .tc-ds a:hover .bia::after, .tc-luoi a:hover .bia::after, .tc-day a:hover .bia::after, .ts-bac:hover .bia::after{transition:transform .85s cubic-bezier(.22,.61,.36,1); transform:translateX(130%)} /* ═══ ⑥ QUẦNG SÁNG THEO CON TRỎ ═══ Toạ độ do JS ghi vào `--mx`/`--my`. ⚠️ PHẢI có giá trị mặc định: thiếu nó thì trước cú rê đầu tiên `calc()` ⛔ không tính được và quầng nằm sai chỗ ngay giữa thẻ. */ .tc-the,.tc-gu-the,.dg5-the,.tc-bp-ray>a{--mx:50%;--my:50%} .tc-the::before,.tc-gu-the::before{content:"";position:absolute;inset:0; pointer-events:none;z-index:0;border-radius:inherit; background:radial-gradient(240px 170px at var(--mx) var(--my),rgba(196,166,232,.12),transparent 70%); opacity:0;transition:opacity .3s ease} .tc-the:hover::before,.tc-gu-the:hover::before{opacity:1} .tc-gu-the{position:relative} /* ═══ ⑦ SỐ HẠNG CỠ LỚN, RỖNG RUỘT ═══ 🔴 PHÓNG TO chính con số đã có (`.ts-hang .so`), ⛔ KHÔNG chèn số thứ hai. Bản đầu em định chèn `.v5-hang` bằng JS — nhưng `.ts-hang a` đã có sẵn `04`, chèn thêm là HAI SỐ cạnh nhau. Đổi kiểu con số đang có thì ⛔ không trùng, ⛔ không cần JS, ⛔ không cần aria-hidden. ⚠️ Cột đầu của lưới là 28px — phải nới cho vừa cỡ chữ mới, ⛔ không thì số bị cắt cụt. Đây là chỗ DUY NHẤT v5 đụng tới lưới, và chỉ vì chính nó làm chữ to ra. */ #bang .ts-hang a{grid-template-columns:52px 38px minmax(0,1fr) auto} #bang .ts-hang .so{font-family:var(--ff-td);font-weight:700; font-size:calc(var(--fs-title) * 1.15);line-height:1;letter-spacing:-.04em; color:transparent;-webkit-text-stroke:1px rgba(196,166,232,.30)} /* Ba bậc bục ở trên là hạng 01–03, nên dòng đầu của bảng là hạng 04. ⛔ Không tô kim ở đây — kim để dành cho hạng nhất trên bục. */ #bang .ts-buc .ts-bac.v1{position:relative} #bang .ts-buc .ts-bac.v1::after{content:"";position:absolute;left:0;right:0;top:0;height:1px; background:var(--g-net);opacity:.8} /* ═══ ⑧ HIỆN DẦN KHI CUỘN TỚI ═══ Cả trang, ⛔ không riêng khối nào. JS gắn `.v5-ra` khi khối vào tầm nhìn. */ .v5-len{opacity:0;transform:translateY(18px); transition:opacity .68s ease,transform .68s cubic-bezier(.22,.61,.36,1)} .v5-len.v5-ra{opacity:1;transform:none} /* So le trong cùng một lưới — ⛔ đừng để cả hàng bật lên cùng lúc */ .v5-len:nth-child(2){transition-delay:.07s} .v5-len:nth-child(3){transition-delay:.14s} .v5-len:nth-child(4){transition-delay:.21s} .v5-len:nth-child(5){transition-delay:.28s} .v5-len:nth-child(6){transition-delay:.35s} /* ═══ ⑨ MENU DÍNH, NỀN MỜ KHI CUỘN ═══ ⚠️ Chỉ đổi khi ĐÃ cuộn (JS gắn `.v5-troi` vào body) — dính sẵn từ đầu thì hero mất mảng trên cùng. */ #slot-menu{position:sticky;top:0;z-index:40;transition:background .28s ease,box-shadow .28s ease} body.v5-troi #slot-menu{background:rgba(15,10,22,.82);backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 rgba(107,78,155,.30),0 12px 30px rgba(0,0,0,.42)} /* ═══ ⑩ THANH TIẾN ĐỘ CUỘN ═══ Element nhỏ nhưng nói "trang này có độ dài, bạn đang ở đâu". Bề rộng do JS ghi vào `--tien`. */ .v5-tien{position:fixed;left:0;top:0;height:2px;z-index:60;pointer-events:none; width:var(--tien,0%);background:var(--g-net);opacity:.9} /* 🔴 TÔN TRỌNG NGƯỜI TẮT CHUYỂN ĐỘNG — ⛔ KHÔNG BỎ KHỐI NÀY. ⚠️ Phải cho `opacity:1` chứ ⛔ không chỉ tắt `transition`: tắt suông thì khối đứng nguyên ở `opacity:0`, tức là NỘI DUNG BIẾN MẤT với đúng nhóm người đã yêu cầu ít chuyển động. */ @media (prefers-reduced-motion:reduce){ .v5-len{opacity:1!important;transform:none!important; transition:none!important;transition-delay:0s!important} .bia::after{display:none} .tc-the::before,.tc-gu-the::before{transition:none} .v5-tien{display:none} #slot-menu{transition:none} } /* ══════════════════════════════════════════════════════════ ⑪ DANH GIA TRÌNH ĐIỆN — UI MỚI, PHÁ KHUÔN 1240px 🔴 Chủ dự án chốt 07/08: "vấn đề đúng là 1240px cho tất cả". Khối này phá khuôn trên BA CHIỀU cùng lúc, ⛔ không chỉ một: ① BỀ NGANG — tràn hết màn hình, ⛔ không bó trong 1240 ② TRỤC — cuộn NGANG, trong khi cả trang cuộn dọc ③ TỈ LỆ THẺ — thẻ đứng (chân dung), trong khi mọi thẻ khác nằm ngang Đổi một chiều thì vẫn "một khối hơi khác". Đổi ba thì nó là MỘT NHỊP KHÁC. ══════════════════════════════════════════════════════════ */ /* Ray tràn viền. Mép TRÁI thẳng hàng với `.bao`, mép PHẢI chạy hết màn hình ⇒ thẻ cuối bị cắt dở, và chính chỗ cắt đó nói "còn nữa, kéo đi". ⚠️ `max()` để trên màn hẹp vẫn còn 18px lề, ⛔ không dính mép. */ .dg5-ray{ display:grid;grid-auto-flow:column;grid-auto-columns:250px;gap:18px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity; padding-inline:max(18px,calc((100% - 1240px) / 2)); padding-block:4px 16px} @media (max-width:560px){.dg5-ray{grid-auto-columns:212px;gap:14px}} .dg5-ray > *{scroll-snap-align:start} /* 🔴 GIỮ thanh cuộn, chỉ làm cho nó mảnh và hợp tông. ⛔ Đừng ẩn hẳn: ẩn thanh cuộn ở một dải cuộn ngang là bỏ mất chỉ dấu DUY NHẤT cho biết còn nội dung bên phải. Người dùng chuột ⛔ không có cách nào đoán ra. */ .dg5-ray{scrollbar-width:thin;scrollbar-color:var(--v40) transparent} .dg5-ray::-webkit-scrollbar{height:6px} .dg5-ray::-webkit-scrollbar-track{background:transparent} .dg5-ray::-webkit-scrollbar-thumb{background:var(--v40);border-radius:99px} .dg5-ray::-webkit-scrollbar-thumb:hover{background:var(--v50)} /* ⚠️ Dải cuộn phải bấm Tab tới được (HTML có tabindex="0"), và khi tới thì phải THẤY là đang ở đó — ⛔ không có vòng nét thì người dùng bàn phím lạc. */ .dg5-ray:focus-visible{outline:2px solid var(--v80);outline-offset:3px;border-radius:var(--bo)} /* ── Thẻ chân dung ── */ .dg5-the{position:relative;display:flex;flex-direction:column; padding:20px 18px 16px;border-radius:var(--bo); border:1px solid var(--n30);background:var(--v20); transition:border-color .18s,background .18s,transform .18s} .dg5-the:hover{border-color:var(--v50);background:var(--v25);transform:translateY(-3px)} /* 🔴 CANH GIỮA ảnh đại diện, tên và nhãn (chốt 07/08). Kệ bìa bên dưới vẫn là lưới ba ô đều ⇒ trục giữa của thẻ trùng nhau từ trên xuống dưới. Canh trái thì ảnh tròn lệch hẳn khỏi trục của ba bìa. */ .dg5-the{text-align:center;align-items:center} /* Vòng kim mảnh bao ngoài ảnh, tách ra một chút cho thoáng. ⚠️ Vòng này là `::before` định vị tuyệt đối — canh giữa phải dùng `left:50%` + `translateX(-50%)`, ⛔ KHÔNG để `left:16px` như lúc canh trái, ⛔ không thì vòng đứng yên một chỗ còn ảnh chạy ra giữa. */ .dg5-the .av{position:relative;width:76px;height:76px;margin:0 auto 14px; border-radius:999px;overflow:hidden;background:var(--v25); border:1px solid var(--v50)} .dg5-the .av img{width:100%;height:100%;object-fit:cover;display:block} /* Chưa có avatar ⇒ chữ cái đầu canh giữa trong vòng tròn (⛔ ĐỪNG để ô ảnh vỡ, §9/#65). */ .dg5-the .av .chu{display:flex;align-items:center;justify-content:center;width:100%;height:100%; font-family:var(--ff-td);font-size:var(--fs-lead);color:var(--v80)} .dg5-the::before{content:"";position:absolute;left:50%;top:16px; transform:translateX(-50%); width:84px;height:84px;border-radius:999px;pointer-events:none; border:1px solid var(--net-mo);opacity:.45} .dg5-the .ten{display:block;font-family:var(--ff-td);font-weight:600; font-size:var(--fs-sub);line-height:var(--lh-td);color:var(--n99); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dg5-the:hover .ten{color:var(--v90)} /* Nhãn vai LUÔN hiện. 🔴 Từ 07/08 gộp thành "Quản lý" cho tất cả — chủ dự án chốt. Luật cũ ("phải phân rõ tác giả với dịch giả, ⛔ không bên nào bị bỏ") nay chuyển sang tầng CHỌN NGƯỜI, ⛔ không còn ở tầng hiển thị. */ .dg5-the .vai{display:inline-block;margin-top:7px;padding:3px 9px; border-radius:999px;border:1px solid var(--n40); font-size:var(--fs-eyebrow);letter-spacing:.06em;color:var(--n70);line-height:1.6} /* Vạch ngăn mảnh trước kệ bìa */ /* Vạch ngăn cũng phải canh giữa — dải sáng dồn về GIỮA rồi nhạt hai đầu, ⛔ không phải nhạt dần một phía như lúc nội dung canh trái. */ .dg5-the .ngan{width:100%;height:1px;margin:15px 0 12px; background:var(--g-net);opacity:.55} /* Kệ ba bìa — BA Ô BẰNG NHAU, ⛔ không chồng lệch như bản cũ. Chồng lệch thì bìa sau bị che gần hết, tức là bày ra mà ⛔ không cho xem. */ .dg5-the .ke{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:auto} .dg5-the .ke .bia{border-radius:var(--bo-bia);overflow:hidden; border:1px solid var(--n30);box-shadow:0 4px 12px rgba(0,0,0,.5)} .dg5-the .ke .bia img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block} /* Thẻ CUỐI ray "lối đi tiếp" (`.dg5-het`) — kiểu dáng ĐÃ GỠ ở Lệnh 17c: route danh sách người viết CHƯA có nên §B5 (L17b) ⛔ dựng thẻ đó (§9 ⛔ nút chết), ⇒ CSS trỏ tới class ⛔ được dựng là tàn dư gây lạc (§9 — nhất quán với việc gỡ `.tc-dgtd`). 🔴 KHI CÓ route người viết: chép lại nguyên khối `.dg5-het` (+`:hover` `.chu` `.mui`) từ `mockup/css/trang-chu-v5.css` (bản mockup GIỮ đủ) — ⛔ khỏi phải dựng lại từ đầu. */ /* ══ ⑫ VẠN DÂN BÌNH PHẨM — 🔴 L709 §A① ĐÃ GỠ `.v5-hep` (CHỊ ĐẢO 17/09) ══ ⚪ Luật cũ: `.v5-hep{max-width:920px}` co khối Vạn Dân lại để tạo NHỊP với ray Danh Gia tràn mép. Ý đó đúng KHI khối này là khối hẹp duy nhất quanh đó. 🔴 Chị đảo 17/09 sau khi nhìn trang thật: khối ghép đôi Kim Chủ · Hoa Lệnh (L699 §H, 1240px) nằm NGAY DƯỚI ⇒ khối hẹp 920 kẹp giữa hai khối rộng thành «lọt thỏm», ⛔ còn ra nhịp. ⇒ Khối Vạn Dân nay rộng như mọi khối `bao` khác; `.v5-hep` ⛔ còn ai dùng nên GỠ HẲN (grep 17/09: chỉ trang-chu.blade.php dùng, ⛔ nơi nào khác) — giữ lại là tàn dư gây lạc. ⚠️ Cần lại nhịp rộng/hẹp thì mở lệnh riêng, ⛔ khai lại lớp này một cách âm thầm. */ /* ⑬ NÚT ĐỔI KIM/BẠC (bản thử) ĐÃ BỎ khi port — chủ dự án chốt VÀNG champagne (§A4 L17). */ /* ══════════════════════════════════════════════════════════ ⑭ MOBILE §B (L20b) — HERO: hiện BÌA NHỎ mỗi dòng trên điện thoại Dưới 900px cột bìa to bên phải bị ẩn ⇒ ⛔ thấy bìa nào ⇒ mỗi dòng có bìa nhỏ. 🔴 BẪY (đã cắn 07/08): lưới `.tc-hero .dong` đặt vị trí TƯỜNG MINH cho từng con (`.so` grid-row, `.tg` khoá `grid-column`, `.o-cuoi` grid-column). Chèn bìa mà chỉ đổi SỐ CỘT ⇒ `.tg` kẹt trong cột bìa, tên tác giả xuống dòng từng chữ. ⇒ ĐẶT LẠI VỊ TRÍ CHO CẢ NĂM CON, ở CẢ HAI mốc. ⛔ hở dải 620–900 (bìa hiện từ 900 thì lưới cũng phải đổi từ 900, ⛔ đợi tới 620). ══════════════════════════════════════════════════════════ */ .tc-hero .bia-nho{display:none} /* desktop: đã có cột bìa to ⇒ ẩn (⛔ đổi render desktop) */ @media (max-width:900px){ /* Cột bìa to bị ẩn từ mốc này ⇒ đây là chỗ DUY NHẤT còn thấy bìa. */ .tc-hero .bia-nho{display:block;width:100%; border-radius:var(--bo-bia);overflow:hidden;background:var(--v25); box-shadow:0 4px 12px rgba(0,0,0,.5)} .tc-hero .bia-nho img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block} /* Dòng đang chọn: viền KIM quanh bìa, ⛔ chỉ đổi độ mờ (mù màu vẫn nhận ra). */ .tc-hero .dong[aria-current="true"] .bia-nho{ box-shadow:0 0 0 1px var(--net-mo),0 6px 16px rgba(0,0,0,.6)} /* 🔴 BỐN cột · HAI hàng — đặt lại vị trí CHO CẢ NĂM CON, ⛔ chừa con nào */ .tc-hero .dong{grid-template-columns:34px 46px minmax(0,1fr) auto; grid-template-rows:auto auto;gap:2px 13px;align-items:center} .tc-hero .so {grid-column:1;grid-row:1/3} .tc-hero .bia-nho{grid-column:2;grid-row:1/3} .tc-hero .ten {grid-column:3;grid-row:1;font-size:var(--fs-lead);line-height:1.25} .tc-hero .tg {grid-column:3;grid-row:2;margin-top:0} .tc-hero .o-cuoi {grid-column:4;grid-row:1/3} } @media (max-width:620px){ .tc-hero .cot-ds{padding:16px 12px} /* BA cột · BA hàng — "N chương" xuống dòng dưới cùng cột chữ, ⛔ nhét cột thứ tư trên màn hẹp (nhét vào thì tên truyện còn ~90px). */ .tc-hero .dong{grid-template-columns:28px 42px minmax(0,1fr); grid-template-rows:auto auto auto;gap:2px 11px;padding:10px 8px} .tc-hero .so {grid-column:1;grid-row:1/4} .tc-hero .bia-nho{grid-column:2;grid-row:1/4} .tc-hero .ten {grid-column:3;grid-row:1;font-size:var(--fs-body);line-height:1.3} .tc-hero .tg {grid-column:3;grid-row:2} .tc-hero .o-cuoi {grid-column:3;grid-row:3;margin-top:2px} } /* ── ⑮ (L107 · M.117) HERO MOBILE: KỆ CARD đề cử dưới slogan — QUẸT 1 LƯỢT = 1 BỘ ── Bản kệ-trần 64px bị chê "đơn điệu, phần dưới text nhiều lộn xộn" ⇒ nay: ① kệ thành RAY CARD 118px cùng ngôn ngữ ⑭b Phong Vân — bìa + SỐ THỨ TỰ + TÊN + N chương; ② dưới 900px ẨN LUÔN `.than` (5 dòng text + cột bìa) — kệ đã nói đủ, ⛔ hai tầng cùng kể một danh sách. Desktop giữ nguyên hero cũ TỪNG PX. */ .tc-hero .ke-cum{display:none} @media (max-width:900px){ .tc-hero .than{display:none} .tc-hero .ke-cum{display:block;padding:6px 2px 2px} /* nhãn về tông TÍM hệ heading — bản --kim bị chê "lạc quẻ", bỏ icon (chốt 22:1x) */ .tc-hero .ke-nhan{font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--v80);margin:10px 0 2px;text-align:center} /* QUẸT 1 LƯỢT = 1 BỘ — card rộng nguyên kệ, snap mandatory. ⚪ Thanh cuộn ẨN được ở đây (khác vết sẹo ⑭b): hàng chấm .ke-ngoc đã là chỉ dấu "còn nội dung", và card ló ⛔ có — snap nguyên trang. */ .tc-hero .ke-bia{display:flex;gap:14px;overflow-x:auto;padding:12px 2px 6px; overscroll-behavior-x:contain;scroll-snap-type:x mandatory; touch-action:pan-y pan-x;scrollbar-width:none} .tc-hero .ke-bia::-webkit-scrollbar{display:none} .tc-hero .ke-bia .o-bia{flex:0 0 100%;scroll-snap-align:center;min-width:0; display:flex;gap:14px;align-items:center} .tc-hero .khung-anh{flex:0 0 118px;position:relative;border-radius:var(--bo-bia); overflow:hidden;background:var(--v25);box-shadow:0 4px 12px rgba(0,0,0,.5)} .tc-hero .khung-anh img{width:100%;aspect-ratio:5/7;object-fit:cover;display:block} .tc-hero .loi-chu{display:flex;flex-direction:column;min-width:0;text-align:left} .tc-hero .loi-chu .hang{font-size:var(--fs-eyebrow);font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--n70)} .tc-hero .loi-chu .ten{margin-top:6px;font-family:var(--ff);font-weight:600; font-size:var(--fs-sub);color:var(--n99);line-height:1.25; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* M.277 (L245): câu câu khách trên kệ mobile — clamp 2 dòng. Ghi đè white-space:nowrap + overflow của luật desktop .tc-hero .tg (cascade xuống đây) để chữ được XUỐNG DÒNG. */ .tc-hero .loi-chu .tg{margin-top:5px;font-size:var(--fs-small);color:var(--n80); white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tc-hero .loi-chu .phu{margin-top:9px;display:inline-flex;align-items:center;gap:5px; font-size:var(--fs-small);font-weight:600;color:var(--v80)} /* chấm chỉ trang */ .tc-hero .ke-ngoc{display:flex;justify-content:center;gap:7px;padding:2px 0 6px} .tc-hero .ke-ngoc span{width:6px;height:6px;border-radius:50%;background:var(--v40); transition:background .16s,transform .16s} .tc-hero .ke-ngoc span.sang{background:var(--v80);transform:scale(1.25)} } /* ══ ⑮ MOBILE §C1 (L20b) — PHONG VÂN: lưới desktop → RAY cuộn ngang dưới 620px ══ Desktop (`.tc-day` ở trang-chu.css) là lưới 2/3/6 cột — 2 cột bìa lớn × 3 hàng ≈ ba màn. ⇒ dưới 620px đổi thành MỘT hàng cuộn ngang, thẻ 116px ≈ một phần tư màn. ⚠️ Chồng lấn 600–620px với `@media(min-width:600px)` của desktop là CỐ Ý: v5 nạp sau ⇒ `display:flex` thắng, ray phủ toàn dải ≤620 (đã xem `.tc-day` trước khi đổi, §C dặn). */ @media (max-width:620px){ .tc-day{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;padding-bottom:12px; scrollbar-width:thin;scrollbar-color:var(--v40) transparent} .tc-day::-webkit-scrollbar{height:5px} .tc-day::-webkit-scrollbar-thumb{background:var(--v40);border-radius:99px} /* ⛔ KHÔNG ẩn thanh cuộn: nó là chỉ dấu DUY NHẤT báo còn nội dung bên phải. */ .tc-day > a{flex:0 0 116px;scroll-snap-align:start;min-width:0} .tc-day .ten{font-size:var(--fs-small); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .tc-day .p{font-size:var(--fs-eyebrow)} .tc-day .co-hang em{display:none} /* chữ "PHONG VÂN" lặp 6 lần trên màn hẹp là nhiễu */ } /* ══ ⑯ MOBILE §C (L20b) — THỊ TẨM THEO GU: xuống 1 cột (base ≤520) → GIỮ 2 cột dưới 620 ══ `trang-chu.css` đổ về 1 cột dưới 520px ⇒ mỗi thẻ đầy màn, bốn thẻ ~1000px. 2 cột thì còn ~¼. ⚠️ v5 nạp sau ⇒ đè rule ≤520 (1 cột) của base — CỐ Ý, để ≤620 luôn là 2 cột. */ @media (max-width:620px){ .tc-gu{grid-template-columns:repeat(2,1fr);gap:12px} .tc-gu-the .chu{padding:11px 11px 10px;gap:3px} .tc-gu-the .ten-gu{font-size:var(--fs-body);line-height:1.25} .tc-gu-the .dem{font-size:9.5px;letter-spacing:.12em} } /* ══ ⑰ MOBILE §20d — VẠN DÂN BÌNH PHẨM: 1 lời bình một màn (thẻ NẰM PHẲNG) ══ Đây là con số 620 DUY NHẤT của khối này; JS ĐO bề rộng thật, ⛔ đọc lại mốc (§C1). `touch-action:pan-y` KHÔNG đặt ở đây — nó ở `.tc-bp-js .tc-bp` (trang-chu.css), vì đặt vô điều kiện thì tắt JS ⛔ cuộn ngang được ⇒ mất bài (§11 · §B4). */ /* 🔴 L709 §A⑤ — ≤1000px: bỏ lưới 5 cột, thẻ rộng CỐ ĐỊNH 260px và bắt dính GIỮA ô nhìn (mockup v2). Đây là hai con số mốc DUY NHẤT của khối này; JS vẫn ĐO bề rộng thật để tính số lượt (§C1) ⇒ ⛔ đọc lại mốc nào ở JS. */ @media (max-width:1000px){ .tc-bp-ray > a{flex:0 0 260px;scroll-snap-align:center} /* 🔴 Vòng cung so le CHỈ ở desktop (§A②) — màn hẹp so le thì thẻ đầu hàng tụt xuống trông lệch. */ .tc-bp-ray > a, .tc-bp-ray > a:nth-child(2), .tc-bp-ray > a:nth-child(3), .tc-bp-ray > a:nth-child(4){--bp-lech:0px} } @media (max-width:620px){ /* Một thẻ ~76vw (mockup v2): thấy hé mép thẻ kế ⇒ mắt biết còn nội dung bên phải. */ .tc-bp-ray > a{flex-basis:76vw} .tc-bp a{min-height:300px;padding:34px 18px 26px 22px} .tc-bp .noi{font-size:var(--fs-lead)} .tc-bp-dieu{margin-top:18px} } /* ══════════════════════════════════════════════════════════════════════════ 🌗 NỀN SÁNG — RIÊNG TRANG CHỦ (Lệnh 238 · M.273b · nguồn mockup/css/light-D.css §2). Nền TỐI tạo chiều sâu bằng ÁNH SÁNG THÊM; nền SÁNG ⛔ có gì để phát sáng ⇒ tạo chiều sâu bằng BÓNG + MỰC. Token nền sáng khai ở nen.css (L237). Hiệu ứng CHUNG (⓪ nét · ⑥ menu đầu · ⑩ màu đơn) ở nen.css. ⛔ đụng trang đọc chương (data-theme). ══════════════════════════════════════════════════════════════════════════ */ /* ⓪ Nét chữ tên truyện trên thẻ — đậm thêm cho đủ nét trên nền sáng (L177). */ [data-nen="sang"] .tc-the .ten,[data-nen="sang"] .dg5-the .ten, [data-nen="sang"] .tc-gu-the .ten-gu,[data-nen="sang"] .tc-hero .ten{font-weight:700} /* ① Rìa màn hình — bản tối rgba(4,2,8,.55) gần đen ⇒ vệt đen ra vòng xám bẩn. */ [data-nen="sang"] body::after{ background:radial-gradient(140% 100% at 50% 42%,transparent 54%,var(--sang-vien) 100%)} /* ② Vân mây — nét vẽ bản tối %23C4A6E8 (tím SÁNG) ⇒ nền sáng ⛔ thấy; vẽ lại nét THẪM. #513A79 mã %23; --van khai ở :root nên đè bằng :root[data-nen] cho cao hơn. */ :root[data-nen="sang"]{ --van:url("data:image/svg+xml,")} [data-nen="sang"] .tc-nen::before{opacity:.09} [data-nen="sang"] .tc-nen::after{opacity:.07} /* ③ Dấu ngăn — nét mảnh phải đậm hơn mới thấy trên nền sáng. */ [data-nen="sang"] .v5-ngan i{background:linear-gradient(90deg,transparent,rgba(81,58,121,.55))} [data-nen="sang"] .v5-ngan em{opacity:1} /* ④ Quầng theo con trỏ — bản tối THÊM sáng vào thẻ; thêm sáng lên nền sáng ⛔ đổi gì ⇒ đổi thành vệt MỰC nhạt + thẻ NHẤC LÊN khi hover. */ [data-nen="sang"] .tc-the::before,[data-nen="sang"] .tc-gu-the::before{ background:radial-gradient(240px 170px at var(--mx) var(--my),var(--sang-mang),transparent 70%)} [data-nen="sang"] .tc-the,[data-nen="sang"] .dg5-the,[data-nen="sang"] .tc-gu-the{ transition:transform .2s,border-color .2s,box-shadow .2s} [data-nen="sang"] .tc-the:hover,[data-nen="sang"] .dg5-the:hover{ box-shadow:0 14px 30px var(--sang-mang)} /* ⑤ Số hạng rỗng ruột — nét rgba(196,166,232,.30) là tím SÁNG ⇒ tàng hình. */ [data-nen="sang"] #bang .ts-hang .so{-webkit-text-stroke:1px var(--sang-net)} /* ⑥ Menu dính khi cuộn — bản tối rgba(15,10,22,.82) là dải ĐEN giữa trang sáng. */ [data-nen="sang"] body.v5-troi #slot-menu{background:var(--sang-menu); box-shadow:0 1px 0 rgba(81,58,121,.16),0 12px 30px var(--sang-mang)} /* ⑨ HERO SÁNG HẲN — bản chốt 15/08 (bỏ "hero tối rời" bị chê lọt giữa). ⛔ ghim token bản tối vào hero: hero nay SÁNG, chữ tối là ĐÚNG. Base gõ cứng màu tối ở trang-chu.css (::after rgba(11,7,17,…), .khung rgba(15,10,22,.55), .cot-bia img). */ /* Lớp phủ đỉnh hero DÀY thêm (.80→.90, .90→.95) để nuốt nốt phần tường bìa còn lọt — đi kèm việc hạ .tuong xuống .07 ngay dưới đây. Xem lý do ở comment đó. */ [data-nen="sang"] .tc-hero::after{ background:linear-gradient(to bottom, rgba(255,255,255,.90) 0%, rgba(255,255,255,.95) 58%, var(--v10) 100%)} [data-nen="sang"] .tc-hero::before{ background:radial-gradient(1100px 520px at 50% -8%, rgba(107,78,155,.16), transparent 68%)} /* 🔴 .07 THẤP HƠN bản tối (.13) là CỐ Ý — ⛔ "sửa lại cho bằng bản tối". Tương phản ĐẢO CHIỀU theo nền: trên nền ĐEN ảnh bìa màu bị nuốt nên .13 vừa; trên nền TRẮNG đúng lượng ảnh đó nổi rõ hơn nhiều ⇒ phải HẠ, ⛔ nâng. Nâng .20 (M.511, chị thấy "mấy bìa truyện dính sau hero") là lỗi đổi-ngữ-cảnh-mà-không-xét-lại-hằng-số. */ [data-nen="sang"] .tc-hero .tuong{opacity:.07} [data-nen="sang"] .tc-hero .khung{background:rgba(255,255,255,.60);border-color:var(--n40)} [data-nen="sang"] .tc-hero .cot-bia img{box-shadow:0 22px 50px var(--sang-mang)} [data-nen="sang"] .tc-hero .khung-anh, [data-nen="sang"] .tc-hero .bia-nho{box-shadow:0 4px 12px var(--sang-mang)} /* Bìa dòng ĐANG CHỌN (mobile) — bóng đen .6 riêng, chọn hơn .bia-nho ở trên nên phải đè riêng, ⛔ thì còn quầng xám bẩn quanh đúng bìa nổi bật nhất (họ H4). */ [data-nen="sang"] .tc-hero .dong[aria-current="true"] .bia-nho{ box-shadow:0 0 0 1px var(--net-mo),0 6px 16px var(--sang-mang)} /* ═══════════ L455 (M.513 ĐỢT 4a) — card «Danh Gia Trình Điện» bản SÁNG ═══════════ .dg5-the = thẻ chân dung (avatar + tên + kệ bìa trực tiếp trên surface) → n05 TRẮNG + --sh-the. Base rule .dg5-the ở TỆP NÀY (L217). ⛔ đụng L446-449 (transition + :hover bóng lớn — GIỮ). ⛔ đụng hero L463-480 (.tc-hero .tuong opacity .07 là CỐ Ý — L448). */ [data-nen="sang"] .dg5-the{background:var(--n05);box-shadow:var(--sh-the)}