/*
Theme Name: Đọc Truyện
Description: Theme đọc truyện chữ online: mục lục chương, trang đọc tuỳ chỉnh cỡ chữ, tủ truyện, lịch sử đọc, bảng xếp hạng.
Version: 1.0
Text Domain: doctruyen
*/

@media screen{

/*
* RESET & BASE.
*/
*{margin: 0px; padding: 0px;}
img{max-width: 100%; display: block; border: 0px; height: auto;}
a{text-decoration: none; color: inherit; transition: color .2s;}
ul,li{list-style: none;}
/* line-height vốn kế thừa, nhưng khai báo tường minh cho h1-h6 để tiêu đề không bao giờ
* rơi về "normal" của UA stylesheet. Muốn tiêu đề bó sát thì override riêng ở từng block. */
h1,h2,h3,h4,h5,h6{line-height: var(--th-lh-base);}
input,button,textarea,select{font-family: inherit; outline: none; border: 0px; background: none;}
button{cursor: pointer;}
::-webkit-scrollbar{height: 8px; width: 8px;}
::-webkit-scrollbar-thumb{background: var(--th-color-line); border-radius: 8px;}

:root{
    --th-color-bg: #050b1c;
    --th-color-surface: #0a1530;
    --th-color-surface-2: #101f42;
    --th-color-line: #28478a;
    --th-color-text: #f2f7ff;
    --th-color-text-2: #8fa8d0;
    --th-color-main: #22e3f5;
    --th-color-main-2: #2f8bff;
    --th-color-full: #35c39a;
    --th-on-grad: #04162e;
    --th-grad: linear-gradient(135deg, #22e3f5 0%, #3d8bff 100%);
    /* BADGE trên bìa. Quầng sáng ĐÚNG MÀU của chip (thay bóng đen trung tính) để chip nhấc hẳn khỏi
     * ảnh bìa — cùng cách diễn tả độ cao mà --th-card-glow đang dùng. Vẫn giữ một tầng bóng đen mỏng
     * làm chân đế, vì bìa truyện có thể sáng trắng và lúc đó quầng màu một mình là không đủ. */
    --th-full-grad: linear-gradient(135deg, #7df3cb 0%, #23cd99 46%, #0b9a78 100%);
    --th-full-txt: #04241a;
    --th-full-glow: 0px 7px 20px rgba(20,190,140,.52), 0px 2px 6px rgba(0,0,0,.40);
    --th-hot-glow: 0px 7px 20px rgba(30,140,255,.50), 0px 2px 6px rgba(0,0,0,.40);
    /* Tick vẽ bằng mask + currentColor: không phụ thuộc font có glyph ✓ hay không, và tự đổi màu
     * theo chữ của chip nên chỉ cần khai một lần cho cả 2 tông. */
    --th-ico-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.6 3.9 11.95l1.75-1.75 3.9 3.9 8.8-8.8 1.75 1.75z'/%3E%3C/svg%3E");
    --th-header-bg: rgba(5,11,28,.80);
    --th-shadow: 0px 18px 50px rgba(0,0,0,.45);
    --th-font-main: 'Open Sans', sans-serif;
    --th-font-serif: 'Lora', serif;
    --th-lh-base: 1.5;
    --th-cover-ratio: 142%;
    /* CHẤT LIỆU DÙNG CHUNG. Hero là nơi dùng đầu tiên nhưng cả trang chủ đi theo bộ này:
     * glass = mặt kính của thẻ/pill, accent = cụm màu nhấn, r = thang bo góc. */
    --th-glass: rgba(255,255,255,.05);
    --th-glass-2: rgba(255,255,255,.11);
    --th-glass-line: rgba(255,255,255,.14);
    --th-accent-bg: rgba(34,227,245,.14);
    --th-accent-line: rgba(34,227,245,.34);
    --th-accent-txt: var(--th-color-main);
    --th-accent-shadow: 0px 12px 26px rgba(40,170,255,.22);
    /* Nền tối thì bóng đen vô hình → dùng quầng sáng màu thương hiệu để diễn tả độ cao. */
    --th-card-glow: 0px 14px 30px rgba(30,140,255,.30);
    --th-r-lg: 16px;
    --th-r-md: 14px;
    --th-r-sm: 10px;
    --th-r-xs: 7px;
    /* HERO — gom riêng để 2 tông tự đổi, KHÔNG hardcode màu trong block .hero. */
    --th-hero-bg-op: .58;
    --th-hero-aurora-op: .5;
    --th-hero-aurora-blend: screen;
    --th-hero-scrim: linear-gradient(100deg, rgba(5,11,28,.95) 0%, rgba(5,11,28,.86) 42%, rgba(5,11,28,.38) 74%, rgba(5,11,28,.68) 100%);
    --th-hero-fade: linear-gradient(180deg, rgba(5,11,28,.82) 0%, rgba(5,11,28,.15) 38%, var(--th-color-bg) 99%);
    /* Trỏ về bộ dùng chung ở trên — giữ tên cũ để toàn bộ block .hero không phải viết lại. */
    --th-hero-line: var(--th-glass-line);
    --th-hero-pill-bg: var(--th-accent-bg);
    --th-hero-pill-line: var(--th-accent-line);
    --th-hero-surface: var(--th-glass);
    --th-hero-surface-2: var(--th-glass-2);
    --th-hero-accent-txt: var(--th-accent-txt);
    --th-hero-tag-bg: rgba(255,255,255,.08);
    --th-title-grad: linear-gradient(105deg, #6cf7ff 0%, #22e3f5 58%, #2f8bff 100%);
    --th-hero-title-shadow: 0px 3px 30px rgba(0,0,0,.6);
    --th-hero-cover-shadow: 0px 34px 74px rgba(0,0,0,.62), 0px 0px 0px 1px rgba(255,255,255,.1);
}
html.light-mode{
    --th-color-bg: #f5f4fa;
    --th-color-surface: #ffffff;
    --th-color-surface-2: #eeecf6;
    --th-color-line: #e4e0ee;
    --th-color-text: #1a1726;
    --th-color-text-2: #6b6480;
    --th-color-main: #e08600;
    --th-color-main-2: #ff7a2d;
    --th-grad: linear-gradient(135deg, #f7c24a 0%, #ff7a2d 100%);
    --th-on-grad: #1a1206;
    --th-header-bg: rgba(255,255,255,.78);
    --th-shadow: 0px 18px 45px rgba(30,20,60,.12);
    /* HERO tông sáng: hạ opacity ảnh nền + scrim trắng để chữ đậm luôn đủ tương phản. */
    --th-hero-bg-op: .40;
    --th-hero-aurora-op: .34;
    --th-hero-aurora-blend: multiply;
    --th-hero-scrim: linear-gradient(100deg, rgba(250,249,253,.96) 0%, rgba(250,249,253,.90) 42%, rgba(250,249,253,.52) 74%, rgba(250,249,253,.76) 100%);
    --th-hero-fade: linear-gradient(180deg, rgba(250,249,253,.62) 0%, rgba(250,249,253,.18) 38%, var(--th-color-bg) 99%);
    --th-glass: rgba(255,255,255,.62);
    --th-glass-2: rgba(255,255,255,.96);
    --th-glass-line: rgba(26,23,38,.13);
    --th-accent-bg: rgba(224,134,0,.13);
    --th-accent-line: rgba(224,134,0,.32);
    --th-accent-shadow: 0px 12px 26px rgba(224,134,0,.18);
    /* Nền sáng thì ngược lại: bóng tối trung tính đọc ra "nhấc lên" rõ hơn quầng màu. */
    --th-card-glow: 0px 14px 28px rgba(40,26,80,.26);
    --th-full-glow: 0px 6px 16px rgba(11,154,120,.40), 0px 2px 6px rgba(30,20,60,.32);
    --th-hot-glow: 0px 6px 16px rgba(224,90,0,.38), 0px 2px 6px rgba(30,20,60,.32);
    --th-hero-tag-bg: rgba(255,255,255,.74);
    --th-accent-txt: #9c5b00;
    --th-title-grad: linear-gradient(105deg, #b06a00 0%, #c9500f 58%, #c0390c 100%);
    --th-hero-title-shadow: 0px 2px 22px rgba(255,255,255,.7);
    --th-hero-cover-shadow: 0px 30px 66px rgba(40,26,80,.26), 0px 0px 0px 1px rgba(255,255,255,.9);
}

body{
    font-family: var(--th-font-main);
    font-size: 15px;
    font-weight: 400;
    line-height: var(--th-lh-base);
    letter-spacing: .1px;
    color: var(--th-color-text);
    background: var(--th-color-bg);
    transition: background .3s, color .3s;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
* UTILITY.
*/
.fleft{float: left;}
.fright{float: right;}
.cboth{clear: both;}
.bsize{box-sizing: border-box;}
.center{text-align: center;}
.container{width: 1240px; max-width: 100%; margin: 0px auto; padding: 0px 20px; box-sizing: border-box;}
.thumb-cover{position: relative; overflow: hidden; display: block; background: var(--th-color-surface-2);}
.thumb-cover img{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover;}
.thumb-zoom img{transition: transform .6s cubic-bezier(.2,.7,.3,1);}
/* Zoom kích hoạt từ cả THẺ, không chỉ khi trỏ trúng bìa — rê vào tên truyện vẫn phản hồi. */
.thumb-zoom:hover img, .shelf-item:hover .thumb-zoom img, .truyen-col:hover .thumb-zoom img{transform: scale(1.07);}
.empty-content{padding: 40px 0px; text-align: center; color: var(--th-color-text-2); font-size: 15px;}
/* padding-top = chiều cao header cố định.
 * padding-bottom gom khoảng cách trước footer về MỘT chỗ: trước đây footer tự đeo margin-top 30px,
 * cộng thêm padding-bottom 48px của section cuối trên trang chủ thành 78px, trong khi trang archive
 * (không có .sec) chỉ được 30px. Nay mọi trang đều đúng 48px. */
.main{padding-top: 70px; padding-bottom: 48px;}
/* Section cuối đã có padding-bottom riêng rồi nên bỏ đi, tránh cộng dồn thành 96px. */
.main > .sec:last-child{padding-bottom: 0px;}
/* Trang đọc: .reader đã tự chừa 60px ở đáy. */
body.reading .main{padding-bottom: 0px;}

/*
* SECTION HEAD.
*/
.sec{padding: 48px 0px;}
.sec-head{margin-bottom: 26px;}
/* .sec-title phải float: là block chiếm trọn hàng thì mọi thứ float sau nó rơi xuống dòng dưới,
 * nên "Xem tất cả" / view-toggle / nút kệ đang thấp hơn tiêu đề. Chỉ dùng trong .sec-head. */
.sec-title{float: left; font-size: 30px; font-weight: 800; letter-spacing: -.7px; line-height: 1.15;}
/* MỘT font cho cả dòng: bỏ Lora nghiêng, phần nhấn phân biệt bằng màu gradient thay vì đổi kiểu chữ.
 * Fallback màu đặc cho trình duyệt không có background-clip: text (cùng khuôn với .brand-word em). */
.sec-title em{font-style: normal; font-weight: 800; color: var(--th-color-main);}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .sec-title em{background: var(--th-title-grad); -webkit-background-clip: text; background-clip: text; color: transparent;}
}
/* Vạch chạy hết bề ngang tiêu đề rồi nhạt dần. Vạch cụt 52px cũ nằm lửng dưới chữ đầu, nhìn như
 * gạch chân hụt; .sec-title đang float nên width:100% chính là bề ngang chữ thật. */
.sec-title:after{content: ""; display: block; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--th-color-main-2) 0%, rgba(30,140,255,0) 100%); margin-top: 10px;}
.sec-more{float: right; margin-top: 13px; font-size: 14px; font-weight: 600; color: var(--th-color-text-2);}
.sec-more:hover{color: var(--th-color-main);}
.sec-more i{font-size: 11px; margin-left: 6px; transition: transform .2s;}
.sec-more:hover i{transform: translateX(3px);}

/*
* BRAND / LOGO.
* Markup sinh ở inc/brand.php. Không dùng flex (theo convention): .brand đặt font-size 0px
* để triệt strut của dòng, nhờ đó vertical-align middle canh giữa mark + chữ chính xác tuyệt đối.
*/
.brand{display: block; font-size: 0px; color: var(--th-color-text);}
.brand-mark{display: inline-block; vertical-align: middle; width: 40px; height: 40px; border-radius: 13px; background: var(--th-grad); color: var(--th-on-grad); box-shadow: 0px 8px 20px rgba(30,140,255,.30), inset 0px 0px 0px 1px rgba(255,255,255,.18); transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;}
.brand-glyph{display: block; width: 100%; height: 100%;}
.brand-word{display: inline-block; vertical-align: middle; margin-left: 11px; font-size: 25px; font-weight: 800; line-height: 1.05; letter-spacing: -.7px;}
.brand-word em{display: inline-block; font-style: normal; font-weight: 800; color: var(--th-color-main);}
.brand-tag{display: block; margin-top: 4px; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 2.4px; text-transform: uppercase; color: var(--th-color-text-2);}
.brand-img{display: inline-block; vertical-align: middle; max-height: 40px;}
a.brand:hover .brand-mark{transform: translateY(-2px) rotate(-6deg); box-shadow: 0px 12px 26px rgba(30,140,255,.45), inset 0px 0px 0px 1px rgba(255,255,255,.28);}
html.light-mode .brand-mark{box-shadow: 0px 8px 18px rgba(30,140,255,.24), inset 0px 0px 0px 1px rgba(255,255,255,.32);}
html.light-mode a.brand:hover .brand-mark{box-shadow: 0px 12px 24px rgba(30,140,255,.34), inset 0px 0px 0px 1px rgba(255,255,255,.4);}
/* Phần nhấn trong tên site tô gradient — trình duyệt cũ không hỗ trợ background-clip thì giữ nguyên màu main ở trên. */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .brand-word em{background: var(--th-grad); -webkit-background-clip: text; background-clip: text; color: transparent;}
}

/*
* HEADER.
*/
/* THANH QUẢN TRỊ WORDPRESS.
* WP đẩy <html> xuống 32px để chừa chỗ cho #wpadminbar, nhưng phần tử position:fixed KHÔNG ăn theo
* margin đó — nên header dán trên bị thanh quản trị đè lên, logo bị cắt mất nửa. Ai đăng nhập cũng
* thấy thanh này (mặc định của WP, không riêng admin) nên lỗi chạm mọi thành viên.
* Gom thành token để mấy khối fixed khác (menu mobile, thanh tìm kiếm) chỉ việc cộng vào. */
:root{--th-adminbar: 0px;}
body.admin-bar{--th-adminbar: 32px;}
.header{position: fixed; top: var(--th-adminbar); left: 0px; width: 100%; z-index: 100; background: var(--th-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;}
.header.is-stuck{border-bottom-color: var(--th-color-line);}
.header-inner{height: 70px;}
.header-logo{float: left; height: 70px; margin-right: 34px;}
.header-logo .brand{line-height: 70px;}
.header-nav{float: left; height: 70px;}
.header-nav > ul > li{float: left; position: relative;}
.header-nav > ul > li > a{display: block; height: 70px; line-height: 70px; padding: 0px 16px; font-weight: 600; color: var(--th-color-text);}
.header-nav > ul > li > a i{font-size: 11px; margin-left: 6px; color: var(--th-color-text-2);}
.header-nav > ul > li:hover > a{color: var(--th-color-main);}
/* Menu giờ là menu WP thật nên WP tự gắn các class này — tô mục đang xem để người đọc biết mình
* đang ở đâu (trên mobile lại càng cần: ngăn kéo che hết nội dung phía sau). */
.header-nav > ul > li.current-menu-item > a, .header-nav > ul > li.current-menu-parent > a, .header-nav > ul > li.current-menu-ancestor > a{color: var(--th-color-main);}
/* ⚠️ max-height + cuộn là BẮT BUỘC, không phải phòng xa. Dropdown này nay đổ ra TẤT CẢ thể loại
* (mặc định mới của menu_the_loai(), thay cho con số 12 viết cứng cũ). Kho đang có 71 thể
* loại: 71 thẻ chia 3 cột = 24 hàng × ~42px ≈ 1000px, cao hơn cả màn hình laptop 900px — không cắt
* thì phần đuôi bảng chữ cái tràn xuống dưới mép màn hình và KHÔNG có cách nào cuộn tới, vì khối
* này `position: absolute` nên nó không đẩy trang dài ra để trang tự cuộn được.
* Cắt bằng CHIỀU CAO chứ không cắt bớt số thẻ — cùng lý lẽ với khối thể loại ở sidebar: cắt bằng
* dữ liệu là mất luôn thẻ khỏi HTML, tức mất link nội bộ, mà số thẻ vừa một màn hình lại đổi theo
* từng máy. Trừ 100px = ~55px khối này tụt xuống so với đỉnh header (top: 78% của 70px) + chừa
* một khoảng hở dưới; cộng --th-adminbar vì `.header` đã bị thanh admin đẩy xuống (bẫy đã ghi ở
* .read-progress ~dòng 1268).
* overscroll-behavior chặn "cuộn lây": vuốt hết dropdown thì trang nền chạy theo, và vì mở/đóng
* bằng :hover nên trang trôi một cái là con trỏ rời khỏi <li> ⇒ dropdown đóng sập giữa chừng. */
/* `top` tính từ mép TRÊN của <li> cao 70px. Bản cũ để 78% = 54,6px, tức dropdown mọc lên ĐÈ vào 15px cuối của
* thanh header và dính sát chữ "Thể loại" — trông như một mảng vá chứ không phải một tấm nổi riêng.
* calc(100% + 6px) = đúng mép dưới header rồi hở thêm 6px.
*
* VÌ SAO 6px chứ không phải 10px như bản trước: 10px đủ rộng để lộ một dải ẢNH BÌA của trang chạy ngang giữa
* header và dropdown — mắt đọc thành hai khối rời nhau thay vì một menu đang xổ ra. 6px vẫn thấy được bóng đổ
* của card (tức vẫn ra dáng tấm nổi riêng) nhưng không còn khe hở để nội dung trang chen vào, và khớp nhịp 4px
* mà theme dùng ở các khối khác.
*
* ⚠️ KHOẢNG HỞ NÀY LÀM ĐỨT :hover NẾU KHÔNG CÓ CẦU NỐI — xem .header-nav > ul > li:hover > a:after ngay dưới.
*
* padding đáy 10px chứ không phải 14px như ba cạnh kia, và đó là để CÂN chứ không phải lệch: hàng cuối còn mang
* `margin-bottom: 4px` của .sub-menu a cộng vào. Đo từ chữ ra mép card: trên = 14 + 9 = 23px, dưới = 9 + 4 + 10
* = 23px. Để cả bốn cạnh 14px thì đáy dày hơn đỉnh đúng 4px — đủ để thấy card bị "trôi" lên trên.
* Sửa ở padding của card, ĐỪNG bỏ margin-bottom của thẻ: cái margin đó là máng giữa các hàng. */
.header-nav .sub-menu{position: absolute; top: calc(100% + 6px); left: -10px; width: 470px; max-height: calc(100vh - 100px - var(--th-adminbar)); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 14px; box-shadow: var(--th-shadow); padding: 14px 14px 10px 14px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .22s; z-index: 60;}
/* CẦU NỐI QUA KHOẢNG HỞ 6px. ⚠️ `height` PHẢI BẰNG ĐÚNG số cộng thêm ở `top` của .sub-menu phía trên — đổi một
* cái mà quên cái kia là hở ra một dải chết, và menu lại "nháy" y như chưa có cầu nối.
* Dropdown mở bằng ĐÚNG một luật `li:hover`, không có dòng JS nào. Chuột đi từ chữ
* "Thể loại" xuống dropdown phải băng qua khoảng trống đó: trống thật thì giữa đường `li:hover` thành false, dropdown
* đóng sập ngay trước khi con trỏ tới nơi — menu thành "không tài nào bấm được", đúng kiểu lỗi mà người dùng mô tả
* là "menu bị nháy".
* Dải này là con của <li> (mốc `position: relative` ở .header-nav > ul > li) nên chuột nằm trên nó vẫn tính là
* hover <li> — :hover lan lên tổ tiên trong DOM. KHÔNG đặt cầu nối bên trong .sub-menu được: khối đó có
* `overflow-y: auto`, nó sẽ CẮT mất phần tử nhô lên trên và còn tính thêm vào vùng cuộn.
* Chỉ dựng khi đang hover: để thường trực thì mọi mục menu đều có một dải vô hình 10px bên dưới, rê chuột hụt
* xuống dưới thanh header cũng mở dropdown. */
.header-nav > ul > li:hover > a:after{content: ""; position: absolute; top: 100%; left: 0px; width: 100%; height: 6px;}
.header-nav > ul > li:hover .sub-menu{opacity: 1; visibility: visible; transform: translateY(0px);}
/* ⚠️ nowrap + ellipsis KHÔNG PHẢI cho đẹp, nó vá một lỗi bố cục đang xảy ra thật: các thẻ trong lưới float phải
* CAO BẰNG NHAU. Cột chỉ rộng ~140px, mà kho có những tên như "Hoán Đổi Thân Xác" hay "Thanh Xuân Vườn Trường" —
* tên nào xuống 2 dòng là cao gấp đôi, thẻ ở hàng SAU "mắc" vào cạnh dưới của nó và cả lưới vỡ so le, chừa một
* mảng trắng giữa dropdown (bẫy bố cục #5 trong GHICHU-DEV.md). Bản mobile đã nowrap từ trước, desktop thì quên.
* Chữ đầy đủ vẫn nằm trong DOM nên trình đọc màn hình và Google vẫn thấy trọn tên, chỉ CẮT PHẦN NHÌN. */
.header-nav .sub-menu a{float: left; width: calc((100% - 20px) / 3); box-sizing: border-box; padding: 9px 12px; margin: 0px 10px 4px 0px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--th-color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.header-nav .sub-menu a:nth-child(3n+3){margin-right: 0px;}
.header-nav .sub-menu a:hover{background: var(--th-color-surface-2); color: var(--th-color-main);}
/* Thể loại đang xem (class do inc/nav-menu.php gắn theo URL). Giữa 70 thẻ giống hệt nhau, không tô thì
* người dùng không biết mình đang đứng ở đâu. */
.header-nav .sub-menu a.current{background: var(--th-accent-bg); color: var(--th-color-main); font-weight: 700;}
.header-right{float: right; height: 70px;}
/* CANH DỌC CÁC KHỐI BÊN PHẢI — cả cụm là điều khiển cao 38px trong thanh cao 70px, nên lề trên
* phải là (70 − 38) / 2 = 16px. Bản cũ để 17px: lệch xuống 1px, mắt thường vẫn bắt được vì nút tròn
* nằm ngay cạnh logo canh giữa chuẩn. .header-account là 40px nên lề của nó là 15px (đã đúng). */
.header-search{float: left; position: relative; margin: 16px 12px 0px 0px;}
.header-search input{width: 210px; height: 38px; background: var(--th-color-surface-2); border: 1px solid transparent; border-radius: 20px; padding: 0px 42px 0px 18px; color: var(--th-color-text); font-size: 14px; box-sizing: border-box; transition: border-color .2s, width .25s;}
.header-search input:focus{border-color: var(--th-color-main); width: 250px;}
.header-search input::placeholder{color: var(--th-color-text-2);}
.header-search button{position: absolute; top: 0px; right: 0px; width: 42px; height: 38px; line-height: 38px; text-align: center; color: var(--th-color-text-2);}
.header-search button:hover{color: var(--th-color-main);}
/* Hai nút tròn trong đây phải FLOAT chứ không inline-block. Bản cũ .search-toggle có
* `vertical-align: middle` còn .theme-toggle không có (mặc định là `baseline`) — hai hộp inline-block
* cùng hàng mà khác cách canh thì tâm không bao giờ trùng nhau, nên nút kính lúp tụt xuống so với nút
* đổi tông. Float không tham gia canh theo baseline nên hết chuyện, và cũng đúng lối float của theme.
* .header-tool đang float nên tự nó là BFC, bao được float con — không cần .cboth. */
.header-tool{float: left; height: 38px; margin: 16px 8px 0px 0px;}
.theme-toggle{float: left; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: var(--th-color-surface-2); color: var(--th-color-text); font-size: 15px;}
.theme-toggle:hover{color: var(--th-color-main);}
.theme-toggle .fa-sun{display: none;}
html.light-mode .theme-toggle .fa-sun{display: inline-block;}
html.light-mode .theme-toggle .fa-moon{display: none;}
.header-user{float: left; margin-top: 16px;}
.btn-login{display: inline-block; height: 38px; line-height: 38px; padding: 0px 12px; font-weight: 600; font-size: 14px; color: var(--th-color-text);}
.btn-login:hover{color: var(--th-color-main);}
.btn-register{display: inline-block; height: 38px; line-height: 38px; padding: 0px 20px; font-weight: 700; font-size: 14px; color: var(--th-on-grad); background: var(--th-grad); border-radius: 20px; box-shadow: 0px 6px 18px rgba(40,170,255,.30);}
.btn-register:hover{filter: brightness(1.06);}
.header-account{float: left; position: relative; margin-top: 15px;}
.header-account > a{display: block; height: 40px; line-height: 40px; padding-left: 44px; position: relative; font-weight: 600; font-size: 14px; color: var(--th-color-text);}
.header-account > a .avatar{position: absolute; top: 0px; left: 0px; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;}
.header-account > a .avatar img{width: 100%; height: 100%; object-fit: cover;}
.header-account .account-menu{position: absolute; top: 100%; right: 0px; width: 190px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 12px; box-shadow: var(--th-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s; z-index: 60;}
.header-account:hover .account-menu{opacity: 1; visibility: visible; transform: translateY(0px);}
.header-account .account-menu a{display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--th-color-text-2);}
.header-account .account-menu a i{width: 20px; color: var(--th-color-main);}
.header-account .account-menu a:hover{background: var(--th-color-surface-2); color: var(--th-color-main);}
.header-toggle{display: none; width: 40px; height: 70px; color: var(--th-color-text); font-size: 20px;}

/* KHỐI TÀI KHOẢN TRONG NGĂN KÉO. Desktop không cần (đã có dropdown hover ở .header-account) nên mặc
* định ẩn, css/responsive.css bật lên ở mốc 1190px. VÌ SAO phải có: xem đầu inc/nav-menu.php —
* trên máy cảm ứng dropdown kia không mở được, "Lịch sử đọc"/"Đăng xuất" thành đường cụt. */
.drawer-account{display: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--th-color-line);}
.drawer-user{padding: 2px 10px 12px;}
.drawer-user .avatar{float: left; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; margin-right: 10px;}
.drawer-user .avatar img{width: 100%; height: 100%; object-fit: cover;}
/* overflow: hidden để <b> thành BFC, đứng CẠNH avatar float chứ không chạy vòng xuống dưới nó. */
.drawer-user b{display: block; overflow: hidden; line-height: 32px; font-size: 14px; font-weight: 700; color: var(--th-color-text); white-space: nowrap; text-overflow: ellipsis;}
.drawer-account > a{display: block; padding: 12px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--th-color-text-2);}
.drawer-account > a i{width: 22px; color: var(--th-color-main);}
.drawer-account > a:hover{background: var(--th-color-surface-2); color: var(--th-color-main);}
/* Ba phần CHỈ của ngăn kéo — "Đọc tiếp", nút gập menu con, ô lọc thể loại. Desktop ẩn hết (ở đó menu con
* mở bằng hover và rộng đủ chỗ), css/responsive.css bật lên ở mốc 1190px. Nút gập + ô lọc do js/custom.js
* chèn, nên không có JS thì ngăn kéo vẫn y như cũ: menu con mở sẵn, không mất link nào. */
.drawer-continue, .header-nav .sub-toggle, .header-nav .sub-filter{display: none;}

/*
* HERO.
*/
/* Kéo hero lên dưới header kính (margin âm = đúng chiều cao header) để ảnh bìa chạy full màn. */
.hero{position: relative; margin-top: -70px; padding-top: 70px; overflow: hidden; isolation: isolate;}
.hero:after{content: ""; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 1px; background: linear-gradient(90deg, transparent, var(--th-color-main), transparent); opacity: .45; z-index: 3;}

/* NỀN: ảnh bìa blur + 3 quầng sáng aurora + scrim. */
.hero-bg{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: 0;}
.hero-bg-img{position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; background-size: cover; background-position: center; filter: blur(44px) saturate(1.45); opacity: var(--th-hero-bg-op); transform: scale(1.04); transition: opacity .45s, transform 1.4s cubic-bezier(.2,.7,.3,1);}
/* Aurora nằm TRÊN scrim + blend mode: nhờ vậy hero vẫn có màu sống kể cả truyện chưa có ảnh bìa,
 * mà chữ không bị giảm tương phản (aurora đứng trước .container nên chữ luôn vẽ đè lên). */
.hero-aurora{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 2; mix-blend-mode: var(--th-hero-aurora-blend);}
.hero-aurora i{position: absolute; display: block; border-radius: 50%; filter: blur(72px); opacity: var(--th-hero-aurora-op); will-change: transform;}
.hero-aurora .a1{width: 520px; height: 520px; top: -190px; left: -130px; background: radial-gradient(circle, #0a84ff 0%, rgba(10,132,255,0) 70%);}
.hero-aurora .a2{width: 470px; height: 470px; bottom: -240px; left: 36%; background: radial-gradient(circle, #00c8ff 0%, rgba(0,200,255,0) 70%);}
.hero-aurora .a3{width: 580px; height: 580px; top: -170px; right: -180px; background: radial-gradient(circle, #1e6bff 0%, rgba(30,107,255,0) 70%);}
.hero-scrim{position: absolute; inset: 0px; z-index: 1; background: var(--th-hero-scrim), var(--th-hero-fade);}

.hero-inner{position: relative; z-index: 2; padding: 62px 0px 44px;}
/* Bìa đứng TRƯỚC trong DOM + float right → chữ tự ăn theo, và trên mobile bìa nằm sẵn phía trên. */
.hero-content{float: left; width: calc(100% - 344px); box-sizing: border-box;}

/* EYEBROW: pill + chấm nhấp nháy + bộ đếm slide. */
.hero-eyebrow{display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: 1.9px; text-transform: uppercase; color: var(--th-hero-accent-txt); background: var(--th-hero-pill-bg); border: 1px solid var(--th-hero-pill-line); padding: 5px 5px 5px 14px; border-radius: 22px; margin-bottom: 18px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.hero-eyebrow-dot{display: inline-block; vertical-align: middle; width: 7px; height: 7px; border-radius: 50%; background: var(--th-color-main-2); margin: -2px 9px 0px 0px;}
.hero-eyebrow-txt{display: inline-block; vertical-align: middle;}
.hero-eyebrow-num{display: inline-block; vertical-align: middle; margin-left: 11px; padding: 3px 10px; border-radius: 20px; background: var(--th-hero-pill-line); color: var(--th-color-text); font-size: 11px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums;}
.hero-eyebrow-num b{font-weight: 800;}

.hero-title{font-size: clamp(32px, 4.6vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -1.4px; color: var(--th-color-text); text-shadow: var(--th-hero-title-shadow);}
/* Hover = tô gradient thương hiệu vào chính chữ, không gạch chân, không kẻ nền.
 * Lý do bỏ cách cũ (background-image + background-size): nền của inline box vẽ lại trên từng dòng
 * nhưng tính kích thước theo bề rộng gộp, nên tiêu đề 2 dòng bị kẻ thừa hết chiều ngang dòng dưới.
 * Cách này chỉ đụng tới màu chữ nên tiêu đề bao nhiêu dòng cũng sạch.
 * Chuyển động: gradient nằm sẵn dưới lớp chữ đặc, hover chỉ hạ alpha của color về transparent —
 * transition color nội suy theo alpha nên gradient hiện lên mượt, không giật. */
.hero-title a{color: inherit; transition: color .32s cubic-bezier(.2,.7,.3,1), text-shadow .32s;}
/* Phải tắt text-shadow khi hover: bóng chữ được vẽ ĐÈ LÊN nền đã clip vào chữ, nên quầng trắng
 * của tông sáng làm gradient bạc hết màu. Chữ lúc này đã có màu nên cũng không cần bóng để nổi nữa.
 * Fallback cho trình duyệt không có background-clip: text — đổi màu đặc, KHÔNG để chữ tàng hình. */
.hero-title a:hover{color: var(--th-color-main); text-shadow: none;}
@supports ((-webkit-background-clip: text) or (background-clip: text)){
    .hero-title a{background-image: var(--th-title-grad); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text;}
    .hero-title a:hover{color: transparent;}
}
.hero-tagline{font-family: var(--th-font-serif); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--th-color-text-2); margin-top: 14px;}
.hero-tagline:empty{display: none;}

.hero-meta{margin-top: 18px;}
.hero-tag{display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--th-color-text); background: var(--th-hero-tag-bg); border: 1px solid var(--th-hero-line); padding: 6px 14px; border-radius: 8px; margin: 0px 8px 8px 0px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, color .2s, transform .2s;}
.hero-tag i{color: var(--th-color-main); margin-right: 7px;}
.hero-tag:hover{border-color: var(--th-hero-pill-line); color: var(--th-hero-accent-txt); transform: translateY(-2px);}
/* Không có link thể loại/tác giả thì trả về span thường, đừng cho con trỏ tay. */
.hero-tag[href=""]{pointer-events: none;}

/* PANEL: gom số liệu + chương mới vào 1 khối kính. Bỏ đoạn mô tả nên cột trái cần
 * một mảng đặc để không bị loãng, đồng thời mắt có 1 điểm dừng thay vì 2 gạch ngang rời. */
.hero-panel{max-width: 580px; margin-top: 24px; border: 1px solid var(--th-hero-line); border-radius: 14px; background: var(--th-hero-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden;}
.hero-stats{padding: 15px 20px;}
.hero-stat{float: left; width: 33.333%; box-sizing: border-box; padding-right: 12px;}
.hero-stat b{display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15; color: var(--th-color-text); font-variant-numeric: tabular-nums;}
.hero-stat b i{font-size: 15px; color: var(--th-color-main); margin-right: 7px; vertical-align: 1px;}
.hero-stat > span{display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--th-color-text-2); margin-top: 4px;}

/* Chương mới nhất — cả dòng là 1 link (vùng bấm rộng), không chỉ mỗi tên chương. */
.hero-latest{display: block; position: relative; padding: 11px 40px 11px 20px; border-top: 1px solid var(--th-hero-line); font-size: 13.5px; color: var(--th-color-text-2); white-space: nowrap; overflow: hidden; transition: background .2s;}
.hero-latest:hover{background: var(--th-hero-tag-bg);}
.hero-latest-dot{display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background: var(--th-color-full); margin: -1px 9px 0px 0px; box-shadow: 0px 0px 0px 3px rgba(53,195,154,.18);}
.hero-latest-lb, .hero-latest-link, .hero-latest-time{vertical-align: middle;}
.hero-latest-lb{font-weight: 700; color: var(--th-color-text); margin-right: 8px;}
/* Cắt ở TÊN CHƯƠNG chứ không cắt cả dòng — nếu để dòng tự cắt thì mốc thời gian (nằm cuối) mất trước. */
.hero-latest-link{display: inline-block; max-width: calc(100% - 205px); font-weight: 600; color: var(--th-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hero-latest:hover .hero-latest-link{color: var(--th-hero-accent-txt);}
.hero-latest-time{margin-left: 8px; opacity: .75;}
.hero-latest-time:empty{display: none;}
.hero-latest-go{position: absolute; top: 50%; right: 18px; margin-top: -6px; font-size: 11px; color: var(--th-color-text-2); transition: transform .2s, color .2s;}
.hero-latest:hover .hero-latest-go{color: var(--th-hero-accent-txt); transform: translateX(3px);}

.hero-actions{margin-top: 26px;}
/* BẮT BUỘC vertical-align: top. .btn-read có overflow:hidden (để cắt vệt sáng), mà theo CSS 2.1 §10.8.1
 * inline-block có overflow khác visible thì baseline của nó là MÉP MARGIN DƯỚI, không phải baseline chữ
 * → nút "Theo dõi" bị đẩy tụt xuống ~27px. Canh theo mép trên thì hết lệch. */
.hero-actions .btn-read, .hero-actions .btn-follow{vertical-align: top;}
.hero-actions .btn-read{position: relative; overflow: hidden; display: inline-block; height: 54px; line-height: 54px; padding: 0px 34px; font-weight: 700; font-size: 16px; color: var(--th-on-grad); background: var(--th-grad); border-radius: 27px; box-shadow: 0px 12px 32px rgba(40,170,255,.38); margin: 0px 12px 10px 0px; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .2s;}
.hero-actions .btn-read i, .hero-actions .btn-read span{position: relative; z-index: 2;}
.hero-actions .btn-read i{margin-right: 9px;}
/* Vệt sáng quét ngang: chạy vòng lặp chậm, nhanh hơn khi hover. */
.hero-actions .btn-read:before{content: ""; position: absolute; top: 0px; left: -60%; width: 45%; height: 100%; z-index: 1; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-22deg);}
.hero-actions .btn-read:hover{filter: brightness(1.07); transform: translateY(-3px); box-shadow: 0px 18px 40px rgba(40,170,255,.5);}
.hero-actions .btn-follow{display: inline-block; height: 54px; line-height: 52px; margin-bottom: 10px; padding: 0px 28px; font-weight: 600; font-size: 15px; color: var(--th-color-text); border: 1px solid var(--th-hero-line); background: var(--th-hero-surface); border-radius: 27px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .22s;}
.hero-actions .btn-follow:hover{border-color: var(--th-color-main); color: var(--th-hero-accent-txt); transform: translateY(-3px);}
.hero-actions .btn-follow.followed{color: var(--th-hero-accent-txt); border-color: var(--th-hero-pill-line); background: var(--th-hero-pill-bg);}
.hero-actions .btn-follow i{margin-right: 9px;}

/* BÌA: card nghiêng 3D, có quầng sáng dưới đáy + gáy sách + vệt bóng kính. */
.hero-cover{float: right; width: 288px; margin-left: 56px;}
.hero-cover-card{position: relative; transform: perspective(1300px) rotateY(-9deg) rotateX(2.5deg); transition: transform .55s cubic-bezier(.2,.7,.3,1);}
.hero-cover-card:hover{transform: perspective(1300px) rotateY(0deg) rotateX(0deg) translateY(-8px);}
.hero-cover-card:before{content: ""; position: absolute; left: 10%; right: 10%; bottom: -22px; height: 56px; border-radius: 50%; background: var(--th-grad); filter: blur(34px); opacity: .55; z-index: 0;}
.hero-cover-inner{position: relative; z-index: 1; border-radius: 18px; overflow: hidden; box-shadow: var(--th-hero-cover-shadow);}
.hero-cover-inner .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: 18px;}
.hero-cover-img{transition: opacity .3s;}
.hero-cover-spine{position: absolute; top: 0px; left: 0px; width: 15px; height: 100%; z-index: 3; background: linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(255,255,255,.16) 62%, rgba(0,0,0,0) 100%);}
.hero-cover-gloss{position: absolute; top: 0px; left: -70%; width: 55%; height: 100%; z-index: 4; background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-20deg); pointer-events: none;}
.hero-cover-state{position: absolute; top: 14px; left: 14px; z-index: 5; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; padding: 5px 11px; border-radius: 7px; color: var(--th-on-grad); background: var(--th-grad); box-shadow: 0px 6px 16px rgba(0,0,0,.3);}
.hero-cover-state.is-full{background: var(--th-color-full); color: #052018;}
.hero-cover-rate{position: absolute; top: 14px; right: 14px; z-index: 5; background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--th-color-main); font-size: 12px; padding: 5px 11px; border-radius: 20px; box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,.14);}
.hero-cover-rate i{margin-right: 5px;}
.hero-cover-rate b{font-weight: 800; color: #fff;}

/* PICKER: thẻ có tên truyện + số thứ tự + thanh tiến trình autoplay. */
.hero-picker{position: relative; z-index: 2; clear: both; padding-top: 34px;}
.hero-picker-top{margin-bottom: 14px;}
.hero-picker-label{float: left; font-size: 11.5px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--th-color-text-2); line-height: 48px;}
/* Cụm điều khiển gộp thành 1 pill (cùng lối với .view-toggle) — trước đây 3 nút rời trôi lơ lửng. */
.hero-nav{float: right; font-size: 0px; padding: 4px; border-radius: 26px; background: var(--th-hero-surface); border: 1px solid var(--th-hero-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.hero-nav button{display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 50%; color: var(--th-color-text); font-size: 13px; transition: background .2s, color .2s;}
.hero-nav button:hover{background: var(--th-hero-surface-2); color: var(--th-hero-accent-txt);}
.hero-nav button:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 1px;}
.hero-nav .hero-play{margin: 0px 2px; color: var(--th-on-grad); background: var(--th-grad);}
.hero-nav .hero-play:hover{color: var(--th-on-grad); filter: brightness(1.08);}

/* Rail có overflow-x:auto → trục dọc cũng thành scroll container và XÉN box-shadow của thẻ.
 * Chừa padding đúng bằng tầm đổ bóng rồi kéo lại bằng margin âm để bố cục không bị hở. */
.hero-rail{position: relative; font-size: 0px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 10px 14px 30px; margin: 0px -14px -18px; -ms-overflow-style: none; scrollbar-width: none;}
.hero-rail::-webkit-scrollbar{display: none;}
.hero-pick{position: relative; display: inline-block; white-space: normal; vertical-align: top; width: 178px; box-sizing: border-box; padding: 9px; margin-right: 12px; text-align: left; cursor: pointer; font-size: 12.5px; border-radius: 14px; background: var(--th-hero-surface); border: 1px solid transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; transition: background .25s, border-color .25s, box-shadow .25s, transform .28s cubic-bezier(.2,.7,.3,1);}
/* Giãn kín bề ngang container theo số truyện (ACF giới hạn tối đa 6). Khoảng cách giữa thẻ = 12px. */
.hero-rail-3 .hero-pick{width: calc((100% - 24px) / 3);}
.hero-rail-4 .hero-pick{width: calc((100% - 36px) / 4);}
.hero-rail-5 .hero-pick{width: calc((100% - 48px) / 5);}
.hero-rail-6 .hero-pick{width: calc((100% - 60px) / 6);}
.hero-pick:last-child{margin-right: 0px;}
.hero-pick:hover{background: var(--th-hero-surface-2); transform: translateY(-4px);}
.hero-pick:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 2px;}
.hero-pick.active{background: var(--th-hero-surface-2); border-color: var(--th-hero-pill-line); box-shadow: 0px 12px 26px rgba(40,170,255,.22);}
.hero-pick-thumb{position: relative; float: left; width: 42px; margin-right: 11px;}
.hero-pick-thumb .truyen-item-thumb{padding-top: 60px; border-radius: 7px;}
/* Số thứ tự nằm góc TRÊN-TRÁI, đè lên bìa như .cover .badge cho đồng bộ với grid truyện. */
.hero-pick-num{position: absolute; top: 0px; left: 0px; z-index: 3; min-width: 19px; height: 19px; line-height: 19px; padding: 0px 5px; box-sizing: border-box; text-align: center; font-size: 11px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border-radius: 7px 0px 8px 0px; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .25s, color .25s;}
.hero-pick.active .hero-pick-num{color: var(--th-on-grad); background: var(--th-grad);}
.hero-pick-info{display: block; overflow: hidden;}
.hero-pick-title{display: -webkit-box; font-size: 12.5px; font-weight: 700; line-height: 1.32; color: var(--th-color-text); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.hero-pick-meta{display: block; font-size: 11px; color: var(--th-color-text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.hero-pick-bar{position: absolute; left: 0px; right: 0px; bottom: 0px; height: 3px; background: var(--th-hero-line); opacity: 0; transition: opacity .2s;}
.hero-pick.active .hero-pick-bar{opacity: 1;}
.hero-pick-bar i{display: block; width: 0%; height: 100%; background: var(--th-grad); transition: width .12s linear;}

/* Trạng thái đổi slide: mọi lớp cùng mờ đi rồi hiện lại (JS bật/tắt .is-swap). */
.hero.is-swap .hero-content, .hero.is-swap .hero-cover-card{opacity: 0; transform: translateY(10px);}
.hero.is-swap .hero-cover-card{transform: perspective(1300px) rotateY(-16deg) scale(.96);}
.hero.is-swap .hero-bg-img{opacity: 0; transform: scale(1.12);}
.hero-content, .hero-cover-card{transition: opacity .3s, transform .45s cubic-bezier(.2,.7,.3,1);}

/*
* COVER (reusable).
*/
.cover{position: relative; display: block; border-radius: var(--th-r-md); overflow: hidden;}
.cover .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: var(--th-r-md);}
/* Badge sát góc, góc ngoài bằng bo của bìa — cùng quy tắc với .hero-pick-num, thay vì thụt vào 10px.
 * Quầng sáng cùng màu + bóng đen mỏng để tách khỏi ảnh bìa (bìa truyện màu gì cũng có), viền và vệt
 * sáng inset cho khối nổi lên như một con chip, text-shadow để chữ không chìm khi nền badge sáng. */
.cover .badge{position: absolute; top: 0px; left: 0px; z-index: 4; overflow: hidden; height: 26px; line-height: 26px; padding: 0px 13px; font-size: 11px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; border-radius: var(--th-r-md) 0px var(--th-r-md) 0px; color: #2a1400; background: var(--th-grad); text-shadow: 0px 1px 0px rgba(255,255,255,.28); box-shadow: var(--th-hot-glow), inset 0px 1px 0px rgba(255,255,255,.55), inset 0px 0px 0px 1px rgba(255,255,255,.16);}
/* FULL = đã hoàn thành, tách hẳn khỏi HOT bằng cụm ngọc lục bảo có sẵn trong bảng màu
 * (--th-color-full). Thêm tick để quét mắt nhận ra trạng thái trước cả khi đọc chữ. */
.cover .badge.full{padding-left: 10px; color: var(--th-full-txt); background: var(--th-full-grad); box-shadow: var(--th-full-glow), inset 0px 1px 0px rgba(255,255,255,.6), inset 0px 0px 0px 1px rgba(255,255,255,.18);}
.cover .badge.full:before{content: ""; display: inline-block; vertical-align: middle; width: 11px; height: 11px; margin: -2px 5px 0px 0px; background: currentColor; -webkit-mask: var(--th-ico-check) center/contain no-repeat; mask: var(--th-ico-check) center/contain no-repeat;}
/* Truyện vừa FULL vừa HOT: FULL đã giữ góc trên-trái (vị trí quen mắt của trạng thái), nên HOT
 * dời sang góc trên-PHẢI và bo góc soi gương lại cho cân. HOT đứng một mình vẫn ở góc trái như cũ —
 * chỉ .cover-2badge (theme tự gắn khi có đủ hai cờ) mới đổi chỗ. */
.cover-2badge .badge.hot{left: auto; right: 0px; border-radius: 0px var(--th-r-md) 0px var(--th-r-md);}

/* Vệt sáng quét qua chip khi hover thẻ — chỉ chạy lúc hover nên cả lưới truyện vẫn đứng yên. */
.cover .badge:after{content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(114deg, transparent 34%, rgba(255,255,255,.6) 50%, transparent 66%); transform: translateX(-130%); pointer-events: none;}
.shelf-item:hover .cover .badge:after, .truyen-col:hover .cover .badge:after{transform: translateX(130%); transition: transform .75s cubic-bezier(.3,.6,.3,1);}
.cover .cover-chap{position: absolute; left: 0px; right: 0px; bottom: 0px; z-index: 3; padding: 24px 12px 10px; font-size: 12px; font-weight: 600; color: #fff; background: linear-gradient(0deg, rgba(0,0,0,.88) 10%, transparent 100%); opacity: 0; transform: translateY(6px); transition: all .25s;}
.cover:hover .cover-chap{opacity: 1; transform: translateY(0px);}
/* Hairline TĨNH để tách mép bìa khỏi nền (bìa tối trên nền tối sẽ mất viền). Cố ý không đổi khi
 * hover: hiệu ứng viền chạy quanh bìa là thứ cần bỏ. */
.cover:after{content: ""; position: absolute; inset: 0px; border-radius: var(--th-r-md); box-shadow: inset 0px 0px 0px 1px var(--th-glass-line); pointer-events: none; z-index: 5;}

/*
* THẺ TRUYỆN (shelf + grid) — hover bằng ĐỘ CAO, không dùng viền/khung.
* Bìa nhấc lên + quầng sáng dưới đáy + ảnh zoom nhẹ + tên truyện lên màu nhấn. Bỏ quầng kính có
* border của bản trước: vừa là "hiệu ứng viền", vừa buộc .shelf phải bleed 12px mỗi bên để không bị
* overflow xén — chính là chỗ kệ chìa ra so với lưới bên dưới. Bỏ quầng thì hết cả hai.
*/
.shelf-item, .truyen-col{transition: transform .3s cubic-bezier(.2,.7,.3,1);}
.shelf-item:hover, .truyen-col:hover{transform: translateY(-6px);}
.shelf-item .cover, .truyen-col .cover{transition: box-shadow .3s cubic-bezier(.2,.7,.3,1);}
.shelf-item:hover .cover, .truyen-col:hover .cover{box-shadow: var(--th-card-glow);}
.shelf-item:hover .shelf-title a, .truyen-col:hover .truyen-col-title a{color: var(--th-accent-txt);}

/*
* SHELF (horizontal scroll).
*/
.shelf-wrap{position: relative;}
/* CHỈ chừa padding dọc cho cú nhấc + quầng sáng. KHÔNG bleed ngang: bleed làm vùng cuộn rộng hơn
 * container nên kệ chìa ra so với lưới bên dưới. Đổi lại, quầng của thẻ đầu/cuối bị xén nhẹ khi
 * hover — chấp nhận được so với việc cả khối lệch mép. */
/* Margin âm phải TRIỆT TIÊU ĐÚNG BẰNG padding: padding chỉ là chỗ trống chừa cho cú nhấc + quầng
 * hover khỏi bị overflow xén, nó không được tính vào khoảng cách bố cục. Trên là -12 ↔ 12 (đúng),
 * dưới trước đây là -4 ↔ 10 nên dư 6px: khoảng cách từ đáy thẻ xuống tiêu đề section sau thành 54px
 * trong khi mọi chỗ khác là 48px. */
.shelf{white-space: nowrap; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; padding: 12px 0px 10px; margin: -12px 0px -10px; -ms-overflow-style: none; scrollbar-width: none;}
.shelf::-webkit-scrollbar{display: none;}
.shelf-item{display: inline-block; white-space: normal; vertical-align: top; width: 168px; margin-right: 18px;}
.shelf-item:last-child{margin-right: 0px;}
.shelf-item .shelf-title{font-size: 15px; font-weight: 600; margin-top: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.shelf-item .shelf-title a:hover{color: var(--th-color-main);}
.shelf-item .shelf-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px;}
/* Trước đây absolute top:-58px so với .shelf-wrap → 2 nút bị đẩy lên TRÊN cả section, trôi vào
 * vùng hero. Nay float trong .sec-head và gộp thành pill y như .hero-nav (cùng chức năng, cùng dáng). */
.shelf-nav{float: right; font-size: 0px; margin: -1px 0px 0px 14px; padding: 4px; border-radius: 26px; background: var(--th-glass); border: 1px solid var(--th-glass-line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.shelf-nav button{display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 50%; color: var(--th-color-text); font-size: 13px; transition: background .2s, color .2s;}
.shelf-nav button:hover{background: var(--th-glass-2); color: var(--th-accent-txt);}
.shelf-nav button:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 1px;}

/*
* HOME MAIN + SIDEBAR.
*/
.home-main-left{float: left; width: 65%;}
.home-main-right{float: right; width: 32%;}

/*
* CAP NHAT.
*/
/* padding NGANG 12px + box-sizing: bề ngang hộp không đổi (vẫn nửa cột), nhưng nội dung thụt vào
 * 12px nên quầng hover có đệm quanh ảnh bìa mà KHÔNG cần nở ra ngoài mép khối. Đây là cách duy nhất
 * thoả cả hai: quầng phủ hết hộp (= đúng mép căn 140/894, không tràn) và ảnh không dính mép quầng. */
.capnhat-item{position: relative; float: left; width: calc((100% - 34px) / 2); margin-right: 34px; padding: 13px 12px; box-sizing: border-box;}
.capnhat-item:nth-child(2n+2){float: right; margin-right: 0px;}
/* Vạch phân cách chuyển từ border-bottom sang :after để thụt theo nội dung — border chạy hết hộp
 * thì nó sẽ chìa ra 12px hai bên so với chữ. */
.capnhat-item:after{content: ""; position: absolute; left: 12px; right: 12px; bottom: 0px; height: 1px; background: var(--th-color-line);}
/* Quầng hover bám ĐÚNG mép nội dung (inset ngang = 0).
 *
 * Bản cũ dùng -12px để có đệm quanh chữ. Nhưng ba thứ sau không thể cùng đúng một lúc:
 *   (a) quầng có đệm ngang quanh chữ,
 *   (b) chữ thẳng mép với tiêu đề "Mới cập nhật",
 *   (c) quầng không vượt qua mép căn đó.
 * Có đệm nghĩa là quầng rộng hơn chữ, mà chữ đã nằm sát mép căn rồi → phần đệm chắc chắn tràn ra.
 * Cột NGOÀI CÙNG vì thế luôn lòi 12px ra khỏi khối, nhìn như dòng bị lệch (ở dạng danh sách thì
 * lòi cả hai bên). Bỏ (a), giữ (b)+(c) — cùng lối với .suggest-item và .chuong-row trong hộp nhảy
 * chương, hai chỗ hover cũng bám sát mép. Đệm dọc giữ nguyên nên dòng vẫn có khoảng thở. */
.capnhat-item:before{content: ""; position: absolute; inset: 3px 0px; z-index: 0; border-radius: var(--th-r-sm); background: var(--th-glass); opacity: 0; transition: opacity .2s;}
.capnhat-item:hover:before{opacity: 1;}
.capnhat-item > *{position: relative; z-index: 1;}
.capnhat-thumb{float: left; width: 46px; margin-right: 13px;}
.capnhat-thumb .truyen-item-thumb{padding-top: 65px; border-radius: 7px;}
.capnhat-info{overflow: hidden;}
.capnhat-info h3{font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.capnhat-info h3 a:hover{color: var(--th-color-main);}
.capnhat-chap{display: block; font-size: 13px; color: var(--th-color-text-2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.capnhat-chap:hover{color: var(--th-color-main);}
.capnhat-time{display: block; font-size: 12px; color: var(--th-color-text-2); margin-top: 2px; opacity: .8;}
.view-toggle{float: right; font-size: 0px; margin: 5px 20px 0px 0px; background: var(--th-glass); border: 1px solid var(--th-glass-line); border-radius: var(--th-r-sm); padding: 3px;}
.view-toggle button{display: inline-block; vertical-align: middle; width: 32px; height: 30px; border-radius: var(--th-r-xs); color: var(--th-color-text-2); font-size: 13px; transition: background .2s, color .2s;}
.view-toggle button:hover{color: var(--th-accent-txt);}
.view-toggle button.active{background: var(--th-grad); color: var(--th-on-grad);}
.capnhat-list.is-list .capnhat-item{float: none; width: 100%; margin-right: 0px; padding: 14px 12px;}
.capnhat-list.is-list .capnhat-item:nth-child(2n+2){float: none;}
/* DẠNG DANH SÁCH: tên chương và mốc thời gian về CHUNG một dòng, thời gian dồn sang phải.
 * Hàng ở dạng này rộng gấp đôi dạng lưới nên thừa chỗ ngang, mà lại đang phí một dòng cho mỗi mục;
 * dồn thời gian sang phải vừa rút ngắn hàng vừa tạo một cột thời gian thẳng để mắt quét dọc.
 * Cả hai đều float nên không phụ thuộc thứ tự trong HTML (thời gian đứng sau tên chương);
 * .capnhat-info đã có overflow:hidden nên tự ôm hai float, không cần thêm .cboth.
 * max-width chừa đúng chỗ cho cụm thời gian dài nhất ("khoảng 17 giờ trước") để tên chương dài
 * bị cắt bằng ellipsis thay vì đẩy thời gian xuống dòng. */
.capnhat-list.is-list .capnhat-chap{float: left; max-width: calc(100% - 120px); margin-top: 5px;}
.capnhat-list.is-list .capnhat-time{float: right; margin-top: 6px; white-space: nowrap;}
.capnhat-list.is-list .capnhat-thumb{width: 42px; margin-right: 14px;}
.capnhat-list.is-list .capnhat-thumb .truyen-item-thumb{padding-top: 60px;}
.capnhat-list.is-list .capnhat-info h3{font-size: 15px;}

/*
* SIDEBAR.
*/
.sidebar-box{background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg); padding: 22px; margin-bottom: 24px;}
/* Hộp cuối vẫn ôm margin-bottom 24px thì cột phải cao hơn cột trái đúng 24px, và vì .home-main lấy
 * chiều cao theo cột cao nhất nên khoảng cách xuống section kế tiếp thành 72px trong khi mọi chỗ
 * khác là 48px. Đo thật ở 1440px: "Truyện hot" bị đẩy xuống 2220 thay vì 2196. */
.sidebar-box:last-child{margin-bottom: 0px;}
.sidebar-title{font-size: 18px; font-weight: 800; letter-spacing: -.3px; margin-bottom: 8px;}
.sidebar-tabs{margin: 14px 0px 6px;}
.sidebar-tabs button{color: var(--th-color-text-2); font-size: 13px; font-weight: 700; padding: 6px 4px; margin-right: 18px; position: relative;}
.sidebar-tabs button.active{color: var(--th-color-text);}
.sidebar-tabs button.active:after{content: ""; position: absolute; left: 0px; bottom: -2px; width: 100%; height: 3px; border-radius: 3px; background: var(--th-grad);}
.xephang-item{padding: 13px 0px; border-bottom: 1px solid var(--th-color-line);}
.xephang-item:last-child{border-bottom: 0px; padding-bottom: 0px;}
.xephang-num{float: left; width: 32px; font-weight: 800; font-size: 24px; letter-spacing: -1px; color: var(--th-color-line); line-height: 1; margin: 2px 14px 0px 0px; font-variant-numeric: tabular-nums;}
.xephang-item.top .xephang-num{background: var(--th-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.xephang-info{overflow: hidden;}
.xephang-info h3{font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.xephang-info h3 a:hover{color: var(--th-color-main);}
.xephang-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px;}
.xephang-meta i{color: var(--th-color-main); margin-right: 5px;}
/* Hover đổ gradient đặc trước đây là ngôn ngữ thứ 3 trên cùng 1 trang; đổi sang viền nhấn + nhấc
 * giống .hero-tag để thẻ thể loại ở hero và ở sidebar phản hồi như nhau. */
.theloai-list a{display: inline-block; font-size: 13px; font-weight: 600; padding: 6px 13px; background: var(--th-color-surface-2); border: 1px solid transparent; border-radius: var(--th-r-xs); color: var(--th-color-text-2); margin: 0px 7px 8px 0px; transition: background .2s, border-color .2s, color .2s, transform .2s;}
.theloai-list a:hover{background: var(--th-accent-bg); border-color: var(--th-accent-line); color: var(--th-accent-txt); transform: translateY(-2px);}
/* Thu gọn danh sách thể loại. 156px = đúng 4 dòng thẻ (31px thẻ + 8px margin), cắt giữa dòng thứ 5
 * để người đọc thấy ngay là còn nữa. position trên .theloai-list chứ không phải .theloai-wrap: dải
 * mờ phải bị chính khung overflow: hidden cắt theo, đặt ở wrap thì nó trôi xuống che cả cái nút. */
.theloai-list{position: relative;}
.theloai-wrap.is-clamped .theloai-list{max-height: 156px; overflow: hidden;}
.theloai-wrap.is-clamped .theloai-list:after{content: ''; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 60px; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--th-color-surface)); pointer-events: none;}
.theloai-more{display: block; margin: 12px auto 0px; padding: 7px 20px; border-radius: 999px; border: 1px solid var(--th-color-line); background: var(--th-color-surface-2); font-size: 13px; font-weight: 700; color: var(--th-color-text); transition: color .2s, border-color .2s;}
.theloai-more:hover{color: var(--th-color-main); border-color: var(--th-color-main);}
.theloai-more i{margin-left: 7px; font-size: 11px; transition: transform .25s;}
.theloai-wrap:not(.is-clamped) .theloai-more i{transform: rotate(180deg);}

/*
* GRID TRUYEN (6 col).
*/
.truyen-grid .truyen-col{float: left; width: calc((100% - 100px) / 6); margin-right: 20px;}
.truyen-grid .truyen-col:nth-child(6n+6){float: right; margin-right: 0px;}
.truyen-grid .truyen-col:nth-child(n+7){margin-top: 26px;}
.truyen-col .truyen-col-title{font-size: 14px; font-weight: 600; margin-top: 10px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;}
.truyen-col .truyen-col-title a:hover{color: var(--th-color-main);}
/* MỘT HÀNG DUY NHẤT, nowrap + ellipsis — KHÔNG cho xuống dòng.
 * Thẻ trong lưới float phải cao bằng nhau (điểm dễ vỡ 5). Truyện thiếu mốc cập nhật mà dòng meta
 * co lại còn 1 dòng trong khi thẻ bên cạnh 2 dòng là cả hàng lệch nhau. Khoá cứng 1 dòng thì thẻ
 * cao bằng nhau bất kể truyện có đủ dữ liệu hay không. */
.truyen-col .truyen-col-meta{font-size: 12px; color: var(--th-color-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* Mốc cập nhật đứng trước và là thứ được giữ lại khi thẻ hẹp: truyện chết nửa năm mà nhiều lượt
 * đọc vẫn là truyện chết, nên nếu chỉ đọc được một thông tin thì phải là thông tin này. */
.truyen-col .truyen-col-meta .tc-time{margin-right: 8px;}
.truyen-col .truyen-col-meta .tc-time i{margin-right: 4px; font-size: 11px; opacity: .8;}

/*
* THANH SẮP XẾP + LỌC (trang thể loại / taxonomy / archive).
*
* Cố ý KHÔNG dùng .filter-box như /loc-truyen/: khối đó cao 3 nhóm và có nền riêng, nhét vào đây là
* đẩy lưới truyện xuống lại đúng chỗ vừa dọn khi dời mô tả xuống dưới (điểm dễ vỡ 20).
*
* HAI HÌNH DẠNG KHÁC NHAU CHO HAI LOẠI LỰA CHỌN — đây là phần quan trọng nhất của khối này:
*   .sb-seg    = segmented control (nút dính liền trong một khay)  -> "chọn ĐÚNG MỘT"
*   .sb-toggle = pill viền rời, có ô tick                          -> "bật / tắt"
* Bản đầu vẽ cả hai thành chip giống hệt nhau nên không ai đoán được cái nào loại trừ nhau. Hình
* dạng nói điều đó tốt hơn mọi nhãn chữ — và nhờ vậy bỏ được hai nhãn "Sắp xếp"/"Tình trạng" vốn
* ăn ~120px bề ngang, đúng thứ quý nhất trên mobile.
*/
.sort-bar{margin-bottom: 18px; position: relative;}

/* CUỘN NGANG, không xuống dòng. Trên mobile 5 nút sắp xếp + nút tình trạng dài hơn bề ngang màn
 * hình; cho wrap thì thanh cao gấp ba và đẩy lưới truyện khuất khỏi màn hình đầu. Cuộn ngang giữ
 * chiều cao cố định dù thêm bao nhiêu lựa chọn. Ẩn thanh cuộn vì dải mờ ở responsive.css đã báo
 * "còn nữa bên phải" rồi, để thêm thanh xám là rối. */
.sb-scroll{overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 2px;}
.sb-scroll::-webkit-scrollbar{height: 0px; display: none;}

.sb-seg{display: inline-block; vertical-align: middle; padding: 3px; background: var(--th-color-surface-2); border-radius: 12px;}
.sb-seg a{display: inline-block; font-size: 13px; padding: 7px 14px; border-radius: 9px; color: var(--th-color-text-2); transition: color .2s, background .2s;}
.sb-seg a:hover{color: var(--th-color-text);}
.sb-seg a.on{background: var(--th-grad); color: var(--th-on-grad); font-weight: 700;}
.sb-seg-2{margin-left: 10px;}

.sb-toggle{display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 13px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--th-color-line); color: var(--th-color-text-2); transition: color .2s, border-color .2s;}
.sb-toggle:hover{color: var(--th-color-text); border-color: var(--th-color-text-2);}
.sb-toggle.on{background: var(--th-grad); border-color: transparent; color: var(--th-on-grad); font-weight: 700;}
.sb-toggle i{margin-right: 7px; font-size: 12px;}

/* Số kết quả + đường thoát: chỉ có mặt khi đang lọc (xem inc/block-sort-bar.php). */
.sb-count{display: inline-block; vertical-align: middle; margin-left: 14px; font-size: 13px; color: var(--th-color-text-2);}
.sb-clear{display: inline-block; vertical-align: middle; margin-left: 10px; font-size: 13px; color: var(--th-color-main);}
.sb-clear:hover{text-decoration: underline;}
.sb-clear i{margin-right: 5px; font-size: 11px;}

/*
* BREADCRUMB + PAGE HEAD.
*/
.breadcrumb{padding: 18px 0px 0px; font-size: 13px; color: var(--th-color-text-2);}
.breadcrumb a:hover{color: var(--th-color-main);}
.breadcrumb .sep{margin: 0px 8px; opacity: .5;}
.page-head{padding: 26px 0px 6px;}
.page-head h1{font-size: 30px; font-weight: 800; letter-spacing: -.6px;}
.page-head .page-desc{color: var(--th-color-text-2); margin-top: 8px; max-width: 760px;}
/* .page-head TRỐNG (chỉ có H1, mô tả đã dời xuống dưới phân trang — điểm dễ vỡ 20) thì 6px đệm
 * dưới là quá sát: trước đây khoảng hở dưới H1 phần lớn do chính dòng .page-desc tạo ra, gỡ nó đi
 * là tiêu đề dính luôn vào lưới bìa. Phải khai riêng chứ KHÔNG bơm thẳng vào .page-head:
 * archive-truyen / search / bang-xep-hang / loc-truyen vẫn còn .page-desc bên trong, sửa chung là
 * bốn trang đó hở thêm một khoảng không ai yêu cầu.
 * Viết `.page-head.page-head-bare` (0,2,0) theo đúng bài học của .home-seo.sec: css/responsive.css
 * nạp SAU style.css nên rule cùng độ đặc hiệu bên đó sẽ thắng. */
.page-head.page-head-bare{padding-bottom: 26px;}

/*
* PAGINATION.
*/
.pagination{margin-top: 34px; text-align: center;}
.pagination a, .pagination span{display: inline-block; min-width: 40px; height: 40px; line-height: 40px; padding: 0px 6px; margin: 0px 3px; border-radius: 10px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); font-weight: 600; font-size: 14px; color: var(--th-color-text-2);}
.pagination a:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.pagination .current{background: var(--th-grad); color: var(--th-on-grad); border-color: transparent;}

/*
* MÔ TẢ TAXONOMY DƯỚI PHÂN TRANG (.tax-seo) — thể loại, tác giả, trạng thái...
* Cùng luật thu gọn với bài SEO trang chủ (.home-seo): cắt bằng max-height chứ KHÔNG display:none.
* Chữ phải nằm nguyên trong HTML máy chủ nhả ra và vẫn được vẽ thì mới có tác dụng; thu gọn chỉ là
* cắt bớt chiều cao khung. Đổi sang ẩn hẳn là vứt đi lý do khối này tồn tại.
* Khối đứng dưới phân trang nên .pagination{margin-top: 34px} phía trên KHÔNG chồng margin xuống
* đây (margin dọc chỉ gộp giữa hai thẻ liền kề cùng chiều), phải tự khai khoảng cách của mình.
*/
.tax-seo{margin-top: 34px;}
.tax-seo-body{position: relative; padding: 18px 20px; border-radius: var(--th-r-lg); background: var(--th-glass); border: 1px solid var(--th-glass-line); font-size: 15px; line-height: 1.8; color: var(--th-color-text-2);}
/* 160px ~ 5 dòng. Thấp hơn nữa (kiểu 2-3 dòng) thì phần ló ra trông như lỗi cắt chữ chứ không ra ý
 * "còn nữa, bấm đi"; cao hơn thì mô tả trung bình không còn cần nút, nút thành đồ trang trí. */
.tax-seo.is-clamped .tax-seo-body{max-height: 160px; overflow: hidden;}
/* pointer-events: none BẮT BUỘC — dải mờ phủ lên vùng có link trong mô tả, thiếu dòng này là mấy
 * link ở cuối đoạn bấm không ăn mà không hiểu vì sao. */
.tax-seo.is-clamped .tax-seo-body:after{content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 70px; border-radius: 0px 0px var(--th-r-lg) var(--th-r-lg); background: linear-gradient(to bottom, rgba(0,0,0,0), var(--th-color-bg)); pointer-events: none;}
.tax-seo-more{display: block; margin: 12px auto 0px; padding: 8px 20px; border-radius: 999px; border: 1px solid var(--th-glass-line); background: var(--th-glass); font-size: 14px; font-weight: 700; color: var(--th-color-text); transition: color .2s, border-color .2s;}
.tax-seo-more:hover{color: var(--th-color-main); border-color: var(--th-color-main);}
.tax-seo-more i{margin-left: 8px; font-size: 12px; transition: transform .25s;}
.tax-seo:not(.is-clamped) .tax-seo-more i{transform: rotate(180deg);}
/* Mô tả term là HTML tự do gõ trong admin: phải tự khai kiểu cho mọi thẻ nó có thể chứa, vì reset
 * của theme đã gỡ sạch style mặc định của trình duyệt (ul/ol mất chấm đầu dòng là hay gặp nhất). */
.tax-seo-body h2, .tax-seo-body h3, .tax-seo-body h4{margin: 16px 0px 8px; font-weight: 800; color: var(--th-color-text); letter-spacing: -.3px;}
.tax-seo-body h2{font-size: 19px;}
.tax-seo-body h3{font-size: 17px;}
.tax-seo-body h4{font-size: 15px;}
.tax-seo-body h2:first-child, .tax-seo-body h3:first-child, .tax-seo-body h4:first-child{margin-top: 0px;}
.tax-seo-body p{margin-bottom: 10px;}
.tax-seo-body p:last-child{margin-bottom: 0px;}
.tax-seo-body strong, .tax-seo-body b{color: var(--th-color-text);}
.tax-seo-body a{color: var(--th-color-main);}
.tax-seo-body a:hover{text-decoration: underline;}
.tax-seo-body ul, .tax-seo-body ol{margin: 0px 0px 10px 20px;}
.tax-seo-body ul li{list-style: disc; margin-bottom: 4px;}
.tax-seo-body ol li{list-style: decimal; margin-bottom: 4px;}

/*
* SINGLE TRUYEN.
*/
.truyen-detail{padding: 30px 0px;}
/* KHÔNG có `overflow: hidden` ở đây. Nó vốn được đặt để ôm float của bìa, nhưng markup đã có sẵn
 * <div class="cboth"></div> cuối khối (đúng convention của theme) nên phần ôm float không cần tới nó,
 * trong khi nó XÉN SẠCH bóng đổ của bìa — bóng toả 50px mà mép khối chỉ cách bìa 26px đệm.
 * Đặt lại là bìa bẹt trở lại ngay. Khối này chỉ dùng ở single-truyen.php nên gỡ không ảnh hưởng đâu khác. */
.truyen-detail-head{background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px;}
.truyen-detail-cover{float: left; width: 220px; margin-right: 30px;}
.truyen-detail-cover .truyen-item-thumb{padding-top: var(--th-cover-ratio); border-radius: 14px;}
/* `overflow: hidden` ở đây KHÔNG phải để giấu gì — nó tạo BFC cho cột chữ nằm gọn cạnh bìa float
 * (idiom dùng khắp theme: .capnhat-info, .hero-pick-info). Gỡ thẳng là chữ chui xuống dưới bìa.
 * Nhưng nó cắt luôn mọi thứ tràn ra ngoài, mà nút "Đọc tiếp" có quầng sáng toả 28px + lệch xuống
 * 10px ⇒ quầng bị xén phẳng ở đáy và ở mép trái.
 * `display: flow-root` cho đúng cái BFC ấy mà KHÔNG cắt — nó sinh ra chính vì việc này. Bọc trong
 * @supports để trình duyệt không hiểu flow-root giữ nguyên hành vi cũ (bố cục đúng, quầng bị xén)
 * thay vì rơi vào overflow:visible và vỡ cột. Đừng gộp hai dòng làm một. */
.truyen-detail-info{overflow: hidden;}
@supports (display: flow-root){
    .truyen-detail-info{overflow: visible; display: flow-root;}
}
.truyen-detail-info h1{font-size: 32px; font-weight: 800; line-height: 1.15; letter-spacing: -.6px;}
.truyen-detail-alt{font-family: var(--th-font-serif); font-style: italic; color: var(--th-color-text-2); margin-top: 6px;}
.truyen-detail-meta{margin-top: 16px;}
.truyen-detail-meta .row{font-size: 14px; color: var(--th-color-text-2); margin-bottom: 8px;}
.truyen-detail-meta .row i{width: 20px; color: var(--th-color-main);}
.truyen-detail-meta .row a{color: var(--th-color-text); font-weight: 600;}
.truyen-detail-meta .row a:hover{color: var(--th-color-main);}
.truyen-detail-genre{margin-top: 14px;}
.truyen-detail-genre a{display: inline-block; font-size: 13px; padding: 5px 12px; background: var(--th-color-surface-2); border-radius: 8px; color: var(--th-color-text-2); margin: 0px 6px 6px 0px;}
.truyen-detail-genre a:hover{background: var(--th-grad); color: var(--th-on-grad);}
.truyen-detail-stats{margin-top: 16px;}
/* min-width: bề ngang mỗi ô vốn ăn theo NHÃN dài nhất bên trong ("Chương" 44.7px, "Lượt đọc" 50.1px,
 * "Đánh giá" 50.2px) nên 3 cột lệch nhau tới 5.4px — nhìn ra ngay vì các con số không thẳng cột.
 * Ghim 54px (đủ chứa nhãn dài nhất) để 3 ô rộng bằng nhau. */
.truyen-detail-stats .stat{float: left; min-width: 54px; padding-right: 32px;}
.truyen-detail-stats .stat b{display: block; font-size: 20px; font-weight: 800;}
.truyen-detail-stats .stat span{font-size: 12px; color: var(--th-color-text-2);}
/* Bìa trang chi tiết nay bọc trong .cover để dùng lại badge FULL/HOT của thẻ truyện. .cover có
 * `overflow: hidden` (badge phải bị bo theo góc bìa) nên bóng đổ vốn khai trên .truyen-item-thumb
 * BÊN TRONG bị xén mất sạch — chuyển bóng ra chính .cover thì hình vẫn nổi như cũ.
 * Đây là MỘT trong HAI lớp xén: lớp thứ hai là `overflow: hidden` của .truyen-detail-head, đã gỡ ở
 * trên. Thiếu bất kỳ vế nào thì bìa vẫn bẹt — sửa một vế rồi tưởng xong là cái bẫy của chỗ này. */
.truyen-detail-cover .cover{box-shadow: var(--th-shadow);}
/* Mốc thời gian đi kèm tên chương mới nhất: phải nhạt hơn tên chương, nếu không hai mẩu chữ cùng
 * độ đậm đọc ra như một cụm và người ta không thấy ngay "cập nhật bao lâu rồi". */
.truyen-detail-meta .row-dim{color: var(--th-color-text-2); opacity: .8;}

/*
* VẠCH TIẾN TRÌNH ĐỌC (thành viên có lịch sử; khách thì js/custom.js chèn khối y hệt từ localStorage).
* Trả lời câu hỏi duy nhất của người quay lại truyện dài: "mình đang ở đâu rồi".
*/
/* Nền dùng --th-color-surface-2 chứ KHÔNG phải --th-glass: khối này nằm TRONG thẻ
 * .truyen-detail-head vốn đã là --th-color-surface, mà ở tông sáng --th-glass là rgba(255,255,255,.62)
 * — tức trắng đè lên trắng, cả khối biến mất chỉ còn trơ cái viền. */
.truyen-progress{margin-top: 18px; padding: 12px 14px; border-radius: var(--th-r-sm); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line);}
.tp-head{font-size: 13px; color: var(--th-color-text-2);}
/* Trừ đúng chỗ của cụm phần trăm bên phải: tên chương dài (bản gộp "Chương 880-883: ...") mà không
 * chặn bề ngang thì nó đẩy con số xuống dòng và vỡ cụm float. */
.tp-label{float: left; max-width: calc(100% - 56px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tp-label a{color: var(--th-color-text); font-weight: 600;}
.tp-label a:hover{color: var(--th-color-main);}
.tp-pct{float: right; font-weight: 800; color: var(--th-accent-txt); font-variant-numeric: tabular-nums;}
.tp-bar{height: 6px; margin-top: 9px; border-radius: 3px; background: var(--th-color-line); overflow: hidden;}
.tp-bar i{display: block; height: 100%; background: var(--th-grad); border-radius: 3px;}

/* CỤM NÚT HÀNH ĐỘNG — vì sao mọi nút phải theo CHUNG một luật lề.
 *
 * Số nút ở đây THAY ĐỔI theo trạng thái: 1 (truyện chưa có chương, chỉ còn "Theo dõi"), 3 (khách
 * chưa đọc bao giờ), 4 (đã có lịch sử nên có thêm "Đọc tiếp"). Vì vậy mọi cách chia cột cứng
 * (50%, 33%) đều đúng ở một trạng thái và vỡ ở trạng thái còn lại — cách duy nhất đúng cho cả bốn
 * là cho chúng tự xuống dòng dưới cùng một luật lề.
 *
 * Bản cũ có ba luật khác nhau: .btn-read lề phải 12px, .btn-ghost 10px, .btn-follow KHÔNG có lề
 * nào, và không nút nào có lề DƯỚI. Hậu quả: xuống dòng là hai hàng dính vào nhau, còn khoảng cách
 * ngang thì mỗi cặp một kiểu.
 *
 * Lề ngang phải ĐỐI XỨNG (5px mỗi bên) chứ không phải chỉ margin-right: ở ≤900px cả cột chữ chuyển
 * sang text-align:center, mà lề một bên thì mỗi hàng lệch trục đúng nửa khoảng cách — chính là cái
 * "nhảy lung tung" nhìn thấy trên tablet. Khối cha hút lại đúng bằng ngần ấy (-5px/-10px) để mép
 * nút đầu tiên vẫn thẳng cột với H1 và các dòng thông tin phía trên — cùng lối "margin âm triệt
 * tiêu đúng bằng lề" đã dùng ở .shelf và .tiep-list.
 *
 * vertical-align: top là bắt buộc: .btn-read có line-height 50px còn hai loại kia 48px (chúng có
 * viền 1px), canh theo baseline mặc định thì ba nút cùng hàng lệch nhau vài px. */
.truyen-detail-actions{clear: both; padding-top: 22px; margin: 0px -5px -10px;}
.truyen-detail-actions .btn-read{display: inline-block; height: 50px; line-height: 50px; padding: 0px 30px; font-weight: 700; color: var(--th-on-grad); background: var(--th-grad); border-radius: 25px; box-shadow: 0px 10px 28px rgba(40,170,255,.32);}
.truyen-detail-actions .btn-read i{margin-right: 8px;}
.truyen-detail-actions .btn-follow{display: inline-block; height: 50px; line-height: 48px; padding: 0px 26px; font-weight: 600; color: var(--th-color-text); border: 1px solid var(--th-color-line); border-radius: 25px; transition: all .2s;}
.truyen-detail-actions .btn-follow i{margin-right: 8px;}
.truyen-detail-actions .btn-follow:hover, .truyen-detail-actions .btn-follow.followed{border-color: var(--th-color-main); color: var(--th-color-main);}
/* Đặt SAU ba rule riêng ở trên là cố ý: cả bốn cùng độ đặc hiệu (0,2,0) nên chỉ thứ tự nguồn quyết
 * định. Để rule gộp lên trước thì chỉ cần ai đó thêm một `margin` vào .btn-read là luật chung bị
 * phá âm thầm, mà triệu chứng (nút lệch hàng) trông chẳng liên quan gì tới dòng vừa thêm. */
.truyen-detail-actions .btn-read,
.truyen-detail-actions .btn-ghost,
.truyen-detail-actions .btn-follow{margin: 0px 5px 10px; vertical-align: top;}

.single-content{margin-top: 30px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px;}
.single-content h2.box-title{font-size: 20px; font-weight: 800; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--th-color-line);}
.single-content p{margin-bottom: 14px; color: var(--th-color-text); line-height: 1.8;}

/*
* GIỚI THIỆU TRUYỆN — THU GỌN.
* Cùng luật với .home-seo và .tax-seo (điểm dễ vỡ 17/20): cắt bằng max-height chứ KHÔNG display:none
* / AJAX, PHP nhả sẵn .is-clamped còn JS chỉ gỡ ra, và có <noscript> gỡ khung cắt. Cả ba khối dùng
* chung thClamp() trong js/custom.js.
* KHÁC một chỗ so với hai khối kia: dải mờ ở đây phải tan vào --th-color-surface (nền của thẻ
* .single-content) chứ không phải --th-color-bg (nền trang) — dùng nhầm là thấy rõ một vệt sẫm
* nằm đè lên mặt thẻ.
*/
.truyen-intro-body{position: relative;}
.truyen-intro.is-clamped .truyen-intro-body{max-height: 220px; overflow: hidden;}
.truyen-intro.is-clamped .truyen-intro-body:after{content: ''; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 90px; background: linear-gradient(to bottom, rgba(0,0,0,0), var(--th-color-surface)); pointer-events: none;}
.truyen-intro-more{display: block; margin: 14px auto 0px; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--th-color-line); background: var(--th-color-surface-2); font-size: 14px; font-weight: 700; color: var(--th-color-text); transition: color .2s, border-color .2s;}
.truyen-intro-more:hover{color: var(--th-color-main); border-color: var(--th-color-main);}
.truyen-intro-more i{margin-left: 8px; font-size: 12px; transition: transform .25s;}
.truyen-intro:not(.is-clamped) .truyen-intro-more i{transform: rotate(180deg);}

/*
* CHAPTER LIST.
*/
.chuong-list-box{margin-top: 30px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 26px;}
.chuong-list-head{margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--th-color-line);}
.chuong-list-head h2{float: left; font-size: 20px; font-weight: 800;}
.chuong-list-head .count{float: right; color: var(--th-color-text-2); font-size: 14px; margin-top: 4px;}
.chuong-row{float: left; width: 50%; box-sizing: border-box; padding: 10px 14px 10px 0px;}
.chuong-row:nth-child(2n+2){padding-right: 0px; padding-left: 14px;}
/* Chữ dùng --th-color-text (màu chữ CHÍNH) chứ không phải --th-color-text-2 như trước. Trước đây cả
 * mục lục đều một màu mờ nên không có tầng bậc nào: 50 dòng chữ xám đọc rất mỏi mắt trên nền tối.
 * Nay tầng bậc do TRẠNG THÁI tạo ra — chương chưa đọc sáng rõ, chương đã đọc lùi lại bằng
 * .is-read{opacity: .55}. Nhân .55 lên màu chữ chính ra đúng khoảng sắc độ của --th-color-text-2 cũ,
 * nên phần đã đọc trông y như mục lục bản trước, chỉ khác là phần CHƯA đọc nay nổi hẳn lên. */
.chuong-row a{display: block; font-size: 14px; color: var(--th-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.chuong-row a:hover{color: var(--th-color-main);}
.chuong-row a i{color: var(--th-color-line); margin-right: 8px; font-size: 12px;}
/* ĐÃ ĐỌC TỚI ĐÂU. Mốc lấy từ lịch sử (thành viên) hoặc localStorage (khách) — xem
 * reading_progress() và chapter_rows($read_upto). Với truyện vài nghìn chương, đây là
 * thứ duy nhất cho phép LƯỚT mắt ra chỗ mình đang đứng thay vì phải nhớ số chương.
 * Khối này bắt buộc đứng TRƯỚC .chuong-row.is-current bên dưới: hai bên cùng độ đặc hiệu (0,2,1)
 * nên chỉ thứ tự nguồn quyết định, và chương ĐANG đọc phải thắng chương đã đọc. */
.chuong-row.is-read:not(.is-current) a{opacity: .55;}
/* Đổi mũi tên thành dấu tick mà không phải sửa markup (dòng chương dùng chung với hộp nhảy chương
 * ở trang đọc): bỏ glyph của Font Awesome rồi vẽ lại bằng mask — cùng cách .badge.full đang làm,
 * nên không phụ thuộc bộ icon có sẵn glyph ✓ hay không. */
.chuong-row.is-read:not(.is-current) a i{display: inline-block; width: 11px; height: 11px; vertical-align: -1px; color: var(--th-color-full); background: currentColor; -webkit-mask: var(--th-ico-check) center/contain no-repeat; mask: var(--th-ico-check) center/contain no-repeat;}
.chuong-row.is-read:not(.is-current) a i:before{content: "";}

/*
* READER (single chuong).
*/
.reader{max-width: 800px; margin: 0px auto; padding: 30px 20px 60px;}
.reader-crumb{font-size: 13px; color: var(--th-color-text-2); margin-bottom: 12px;}
.reader-crumb a:hover{color: var(--th-color-main);}
.reader-head{text-align: center; margin-bottom: 26px;}
/* H1 CHỨA CẢ TÊN TRUYỆN LẪN TÊN CHƯƠNG (xem ghi chú trong single-chuong.php).
* Nhìn vẫn y hệt bản cũ — tên truyện nhỏ màu nhấn ở trên, tên chương to bên dưới — vì hai phần đều
* display: block. Khác biệt nằm ở chỗ cả cụm nay là MỘT thẻ h1, thay vì h1 chỉ có "Chương 5".
* Lớp .r-truyen cũ đã bỏ: nó là thẻ <a> riêng nằm NGOÀI h1, không còn markup nào dùng tới. */
.reader-title{font-weight: 800; line-height: 1.25;}
.reader-title .rh-truyen{display: block; font-size: 15px; font-weight: 600; color: var(--th-color-main);}
.reader-title .rh-truyen:hover{opacity: .85;}
.reader-title .rh-chuong{display: block; font-size: 26px; margin-top: 6px;}
/* Số chữ + phút đọc. font-size 0px triệt khoảng trắng giữa các <span> inline-block, nhờ đó dấu
* chấm ngăn cách (:before) canh đều tuyệt đối mà không phải đếm space trong HTML. */
.reader-meta{margin-top: 12px; font-size: 0px;}
.reader-meta span{display: inline-block; font-size: 13px; color: var(--th-color-text-2);}
.reader-meta span + span:before{content: "·"; margin: 0px 9px; opacity: .55;}
.reader-meta i{margin-right: 6px; opacity: .8;}
.reader-nav{text-align: center; margin: 20px 0px;}
.reader-nav a, .reader-nav .r-list{display: inline-block; height: 44px; line-height: 44px; padding: 0px 20px; border-radius: 22px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); font-weight: 600; font-size: 14px; color: var(--th-color-text); margin: 0px 5px; transition: all .2s;}
.reader-nav a:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.reader-nav a.disabled{opacity: .4; pointer-events: none;}
.reader-nav .r-list{cursor: pointer;}
/* CỠ CHỮ & GIÃN DÒNG đi qua BIẾN, không phải giá trị cứng.
* Lý do là để cài đặt của người đọc và mốc responsive không đá nhau: js/custom.js ghi
* --th-r-size thành style INLINE trên <html> khi người dùng bấm A+/A−, mà inline luôn thắng mọi
* stylesheet; còn khi chưa ai bấm gì thì các mốc trong css/responsive.css khai lại chính biến này
* (18px ở ≤900, 17px ở ≤590) nên máy nhỏ vẫn tự có cỡ chữ hợp lý.
* ⚠️ ĐỪNG đổi lại thành `.chuong-content{font-size: 18px}` trong responsive.css: quy tắc đó cùng
* độ đặc hiệu (0,1,0) nhưng nạp SAU nên nó thắng, và cỡ chữ người dùng chọn bị bỏ qua sạch trên
* điện thoại — đúng nơi cần nó nhất. */
:root{--th-r-size: 19px; --th-r-lh: 1.9;}
.chuong-content{font-size: var(--th-r-size); line-height: var(--th-r-lh); color: var(--th-color-text); font-family: var(--th-font-main);}
.chuong-content p{margin-bottom: 20px;}
html.ff-serif .chuong-content{font-family: var(--th-font-serif);}
html.ff-sans .chuong-content{font-family: var(--th-font-main);}
/* Đoạn văn ĐANG ĐƯỢC ĐỌC bằng giọng nói. Tô bằng nền nhạt + vạch lề chứ không đổi màu chữ: đổi màu
* chữ trên nền giấy cũ/nền đen là mất tương phản đúng lúc người ta đang dõi theo. */
.chuong-content .tts-on{background: var(--th-accent-bg); box-shadow: -10px 0px 0px var(--th-accent-bg), 10px 0px 0px var(--th-accent-bg); border-radius: 2px;}

/*
* TÔNG NỀN TRÌNH ĐỌC — ÁP CHO CẢ TRANG, KHÔNG CHỈ CHO THẺ .reader.
*
* Bản cũ đặt nền lên chính .reader: chọn "Nền sáng" ra một tấm thẻ trắng 800px nổi giữa nền đen của
* trang, chói hơn hẳn so với để nguyên nền tối — tức cái nút làm ngược hẳn ý người bấm. Thanh dính
* đáy, panel ⚙ và bảng điều khiển nổi lại nằm NGOÀI .reader nên cũng không đổi màu theo.
* Nay class nằm trên <html> và chỉ khai lại TOKEN, nên mọi khối trong trang tự đi theo.
*
* ⚠️ Hai class (.rdr.rt-*) là CỐ Ý, không phải thừa. Chúng cho độ đặc hiệu (0,2,1), cao hơn
* html.light-mode (0,1,1), nên tông của trang đọc luôn đè được tông chung của site bất kể thứ tự
* trong file. Rút xuống một class là hai bên hoà nhau và lúc đó mới phải phụ thuộc thứ tự nguồn.
* ⚠️ rt-dark phải khai TƯỜNG MINH, đừng dựa vào "không có class nghĩa là tối": người đang để site
* ở tông sáng mà chọn nền tối cho riêng trang đọc thì không có gì đè lại html.light-mode.
*/
html.rdr.rt-dark{--th-color-bg: #050b1c; --th-color-surface: #0a1530; --th-color-surface-2: #101f42; --th-color-line: #28478a; --th-color-text: #f2f7ff; --th-color-text-2: #8fa8d0; --th-header-bg: rgba(5,11,28,.80);}
html.rdr.rt-light{--th-color-bg: #f5f4fa; --th-color-surface: #ffffff; --th-color-surface-2: #eeecf6; --th-color-line: #e4e0ee; --th-color-text: #1a1726; --th-color-text-2: #6b6480; --th-color-main: #0b7f75; --th-accent-txt: #0f766e; --th-header-bg: rgba(255,255,255,.78); --th-shadow: 0px 18px 45px rgba(30,20,60,.12); --th-glass: rgba(255,255,255,.62); --th-glass-line: rgba(26,23,38,.13); --th-accent-bg: rgba(13,148,136,.13); --th-accent-line: rgba(13,148,136,.32);}
/* Giấy cũ: nền kem, chữ nâu. Màu nhấn phải đổi sang nâu cam đậm — #5eead4 trên nền kem chỉ ~1,6:1,
* chữ nhỏ màu đó gần như biến mất. */
html.rdr.rt-sepia{--th-color-bg: #f4ecd8; --th-color-surface: #fbf6e8; --th-color-surface-2: #ece1c8; --th-color-line: #ddceac; --th-color-text: #4a3f2c; --th-color-text-2: #7c6b4e; --th-color-main: #a8681a; --th-color-main-2: #c2571b; --th-accent-txt: #8a5010; --th-accent-bg: rgba(168,104,26,.13); --th-accent-line: rgba(168,104,26,.34); --th-header-bg: rgba(244,236,216,.84); --th-shadow: 0px 18px 45px rgba(74,63,44,.16); --th-glass: rgba(255,255,255,.5); --th-glass-line: rgba(74,63,44,.14);}
/* Đen tuyệt đối cho màn OLED (tiết kiệm pin thật). Chữ #c9c9c9 chứ không #ffffff: trắng tinh trên
* nền đen thuần sinh quầng nhoè ở chữ nhỏ, đọc lâu rất mỏi. */
html.rdr.rt-black{--th-color-bg: #000000; --th-color-surface: #0a0a0c; --th-color-surface-2: #141416; --th-color-line: #26262b; --th-color-text: #c9c9c9; --th-color-text-2: #8a8a90; --th-header-bg: rgba(0,0,0,.82); --th-glass: rgba(255,255,255,.04); --th-glass-line: rgba(255,255,255,.1);}

/*
* READER PANEL (settings).
*/
.reader-panel{position: fixed; top: 50%; right: 0px; transform: translateY(-50%); z-index: 80;}
/* 48px chứ không phải 46px: đây là ngưỡng vùng chạm tối thiểu mà cả Apple lẫn Google khuyến nghị,
* và nút này nằm sát mép màn — chỗ khó bấm trúng nhất trên điện thoại. */
.reader-panel-toggle{width: 48px; height: 48px; line-height: 48px; text-align: center; background: var(--th-grad); color: var(--th-on-grad); border-radius: 12px 0px 0px 12px; font-size: 17px; box-shadow: var(--th-shadow);}
/* ⚠️ BẮT BUỘC có max-height + overflow. Panel căn giữa dọc (top: 50% + translateY(-50%)) nên nó nở
* ĐỀU về hai phía: cao quá màn là mép TRÊN chui ra ngoài viewport, và các nhóm đầu (màu nền, phông,
* cỡ chữ) không còn cách nào bấm tới. Đo thật sau khi thêm 4 nhóm (tự cuộn, nghe truyện, đặt lại,
* phím tắt): panel cao 1063px ⇒ y = -81 ở màn 1280x900, -141 ở 1440x780, -443 ở 390x800.
* Nút ⚙ vẫn mở ra bình thường nên lỗi này trông hệt như "bấm không ăn gì".
* Công thức: khối căn giữa chỉ an toàn khi NỬA chiều cao không vượt quá khoảng từ tâm màn tới đáy
* header ⇒ height ≤ 100vh − 2×(adminbar + chiều cao header + thở).
* 190px = 71px chiều cao header + 24px thở, nhân đôi. `.header` nay cao 71px ở MỌI bề ngang — trước
* đây nó phình lên 141px trong dải 1191-1340px và con số ở đây từng phải là 300px để né; lỗi đó đã
* sửa (xem mốc ≤1340 trong css/responsive.css). Nếu header lại cao lên thì phải nâng lại con số này.
* ⚠️ box-sizing: border-box là BẮT BUỘC. Reset gốc `*{margin:0px; padding:0px}` KHÔNG đặt box-sizing,
* nên mặc định là content-box và `padding: 20px` bị CỘNG THÊM vào max-height: đặt trần 600px mà đo ra
* 642px, panel tràn lại. Đã dính đúng lỗi này một lần.
* Thêm nhóm mới vào panel thì KHÔNG phải sửa gì ở đây — nó tự cuộn trong khung. */
.reader-panel-box{position: absolute; top: 50%; right: 56px; transform: translateY(-50%); width: 280px; max-height: calc(100vh - 2 * var(--th-adminbar) - 190px); box-sizing: border-box; overflow-y: auto; overflow-x: hidden; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 16px; box-shadow: var(--th-shadow); padding: 20px; display: none;}
.reader-panel-box.open{display: block;}
.reader-panel-box .rp-group{margin-bottom: 18px;}
.reader-panel-box .rp-group:last-child{margin-bottom: 0px;}
.reader-panel-box .rp-label{font-size: 13px; font-weight: 700; color: var(--th-color-text-2); margin-bottom: 8px;}
.reader-panel-box .rp-btns button{border: 1px solid var(--th-color-line); border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--th-color-text); margin: 0px 6px 6px 0px;}
.reader-panel-box .rp-btns button.active{background: var(--th-grad); color: var(--th-on-grad); border-color: transparent;}
/* Ô chọn màu nền giờ là <button> chứ không phải <span> (span không nhận được focus bàn phím nên
* không bấm được bằng Tab/Enter) — quy tắc dáng nằm ở khối "TRANG ĐỌC" phía dưới. */

/*
* FILTER PAGE.
*/
.filter-box{background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 16px; padding: 22px; margin-top: 22px;}
.filter-group{margin-bottom: 18px;}
.filter-group .f-label{font-size: 13px; font-weight: 700; color: var(--th-color-text-2); margin-bottom: 10px;}
.filter-group a{display: inline-block; font-size: 13px; padding: 7px 14px; background: var(--th-color-surface-2); border-radius: 8px; color: var(--th-color-text-2); margin: 0px 8px 8px 0px; cursor: pointer;}
.filter-group a.active{background: var(--th-grad); color: var(--th-on-grad);}

/*
* MEMBER PAGES.
*/
.member-head{padding: 30px 0px 10px;}
.member-head h1{font-size: 28px; font-weight: 800;}
.member-tabs{margin: 16px 0px 24px; border-bottom: 1px solid var(--th-color-line);}
.member-tabs a{display: inline-block; padding: 12px 4px; margin-right: 26px; font-weight: 700; color: var(--th-color-text-2); border-bottom: 3px solid transparent; margin-bottom: -1px;}
.member-tabs a.active{color: var(--th-color-text); border-bottom-color: var(--th-color-main);}

/*
* AUTH MODAL.
*/
.auth-modal{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 200; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);}
.auth-modal.open{display: block;}
/* box-sizing: border-box BẮT BUỘC — thiếu nó thì padding (30px/bên) cộng RA NGOÀI max-width, hộp
* thực tế rộng hơn 92% viewport và tràn ra sát/ngoài hai mép màn hình trên điện thoại. */
.auth-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 400px; max-width: 92%; box-sizing: border-box; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 18px; padding: 30px; box-shadow: var(--th-shadow);}
/* Đổi từ `.auth-box h2` sang class: tiêu đề modal đã hạ khỏi thẻ heading để không chen vào cây
 * heading của trang (xem ghi chú trong header.php). Bám class nên đổi thẻ không ảnh hưởng hình thức. */
.auth-box .auth-title{font-size: 24px; font-weight: 800; margin-bottom: 6px; line-height: var(--th-lh-base);}
.auth-box .auth-sub{color: var(--th-color-text-2); font-size: 14px; margin-bottom: 20px;}
.auth-box .auth-field{margin-bottom: 14px;}
.auth-box input{width: 100%; height: 48px; background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: 12px; padding: 0px 16px; color: var(--th-color-text); font-size: 15px; box-sizing: border-box;}
.auth-box input:focus{border-color: var(--th-color-main);}
.auth-box .auth-submit{width: 100%; height: 50px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 16px; border-radius: 12px; margin-top: 6px;}
.auth-box .auth-switch{text-align: center; margin-top: 16px; font-size: 14px; color: var(--th-color-text-2);}
.auth-box .auth-switch a{color: var(--th-color-main); font-weight: 600; cursor: pointer;}
.auth-box .auth-close{position: absolute; top: 16px; right: 18px; font-size: 20px; color: var(--th-color-text-2); cursor: pointer;}
.auth-box .auth-msg{font-size: 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; display: none;}
.auth-box .auth-msg.error{display: block; background: rgba(255,80,80,.12); color: #ff6b6b;}
.auth-box .auth-msg.success{display: block; background: rgba(53,195,154,.12); color: var(--th-color-full);}

/*
* FOOTER.
*/
/* margin-top bỏ hẳn — khoảng cách trước footer nay do .main{padding-bottom} lo, cho mọi trang bằng nhau. */
.footer{background: var(--th-color-surface); border-top: 1px solid var(--th-color-line); padding: 52px 0px 0px; margin-top: 0px;}
.footer-col{float: left; width: 25%; box-sizing: border-box; padding-right: 34px;}
.footer-col h4{font-size: 15px; font-weight: 800; margin-bottom: 16px;}
/* Tiêu đề 3 cột link là <button> chứ không phải chữ trơn, vì dưới 590px nó gập/xổ được (bố cục ở
 * responsive.css). Trên desktop nút phải TRÔNG Y HỆT bản cũ: trình duyệt tự đắp nền xám + viền +
 * font hệ thống cho <button> nên phải reset sạch cả ba, và mũi tên ẩn đi — ở đây không có gì để gập
 * nên một mũi tên chỉ xuống là lời nói dối với người dùng. */
.footer-h-btn{display: block; width: 100%; padding: 0px; border: 0px; background: none; color: inherit; font: inherit; text-align: left; cursor: default;}
.footer-h-btn .fa-chevron-down{display: none;}
.footer-col p{font-size: 14px; color: var(--th-color-text-2); line-height: 1.75;}
.footer-col ul li{margin-bottom: 9px;}
.footer-col ul li a{font-size: 14px; color: var(--th-color-text-2);}
.footer-col ul li a:hover{color: var(--th-color-main);}
.footer-logo{margin-bottom: 16px;}
.footer-logo .brand-mark{width: 44px; height: 44px; border-radius: 14px;}
.footer-logo .brand-word{font-size: 23px;}
.footer-bottom{border-top: 1px solid var(--th-color-line); margin-top: 34px; padding: 20px 0px; text-align: center; font-size: 13px; color: var(--th-color-text-2);}

/*
* BACK TO TOP.
*/
.back-top{position: fixed; right: 26px; bottom: 26px; width: 46px; height: 46px; line-height: 46px; text-align: center; background: var(--th-grad); color: var(--th-on-grad); border-radius: 50%; box-shadow: var(--th-shadow); opacity: 0; visibility: hidden; transition: all .3s; z-index: 90;}
.back-top.show{opacity: 1; visibility: visible;}
.back-top:hover{transform: translateY(-3px);}
.mobile-overlay{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,.5); z-index: 95;}

/*
* MOTION.
*/
@media (prefers-reduced-motion: no-preference){
    /* Vào trang: từng dòng trong hero trồi lên lệch nhịp. */
    .hero-content > *{opacity: 0; transform: translateY(18px); animation: heroUp .7s cubic-bezier(.2,.7,.3,1) forwards;}
    .hero-content > *:nth-child(1){animation-delay: .06s;}
    .hero-content > *:nth-child(2){animation-delay: .13s;}
    .hero-content > *:nth-child(3){animation-delay: .20s;}
    .hero-content > *:nth-child(4){animation-delay: .27s;}
    .hero-content > *:nth-child(5){animation-delay: .34s;}
    .hero-content > *:nth-child(6){animation-delay: .41s;}
    .hero-content > *:nth-child(7){animation-delay: .48s;}
    .hero-content > *:nth-child(8){animation-delay: .55s;}
    .hero-cover{opacity: 0; animation: heroUp .85s .18s cubic-bezier(.2,.7,.3,1) forwards, heroFloat 7s 1.2s ease-in-out infinite;}
    .hero-picker{opacity: 0; animation: heroUp .7s .6s cubic-bezier(.2,.7,.3,1) forwards;}
    /* Nền sống: quầng aurora trôi chậm, chấm đề cử nhấp nháy, bìa lướt bóng kính. */
    .hero-aurora .a1{animation: heroDrift1 22s ease-in-out infinite;}
    .hero-aurora .a2{animation: heroDrift2 26s ease-in-out infinite;}
    .hero-aurora .a3{animation: heroDrift3 30s ease-in-out infinite;}
    .hero-eyebrow-dot{animation: heroPulse 2.2s ease-out infinite;}
    .hero-latest-dot{animation: heroPulseGreen 2.6s ease-out infinite;}
    .hero-cover-gloss{animation: heroGloss 6.5s 2s ease-in-out infinite;}
    .hero-actions .btn-read:before{animation: heroShine 5s 1.4s ease-in-out infinite;}
    .hero-actions .btn-read:hover:before{animation-duration: 1.4s; animation-delay: 0s;}
    /* Đứng yên trong lúc đổi slide để 2 chuyển động không chồng nhau. */
    .hero.is-swap .hero-cover{animation-play-state: paused;}
}
@keyframes heroUp{to{opacity: 1; transform: translateY(0px);}}
@keyframes heroFloat{0%,100%{transform: translateY(0px);} 50%{transform: translateY(-10px);}}
@keyframes heroDrift1{0%,100%{transform: translate(0px, 0px) scale(1);} 50%{transform: translate(70px, 50px) scale(1.15);}}
@keyframes heroDrift2{0%,100%{transform: translate(0px, 0px) scale(1.1);} 50%{transform: translate(-90px, -40px) scale(1);}}
@keyframes heroDrift3{0%,100%{transform: translate(0px, 0px) scale(1);} 50%{transform: translate(-60px, 70px) scale(1.2);}}
@keyframes heroPulse{0%{box-shadow: 0px 0px 0px 0px rgba(30,140,255,.6);} 70%,100%{box-shadow: 0px 0px 0px 9px rgba(30,140,255,0);}}
@keyframes heroPulseGreen{0%{box-shadow: 0px 0px 0px 0px rgba(53,195,154,.5);} 70%,100%{box-shadow: 0px 0px 0px 9px rgba(53,195,154,0);}}
@keyframes heroGloss{0%,72%{left: -70%;} 100%{left: 130%;}}
@keyframes heroShine{0%,68%{left: -60%;} 100%{left: 130%;}}

/*
* TRỢ NĂNG.
* .screen-reader-text: chữ chỉ dành cho trình đọc màn hình. KHÔNG dùng display:none — cái đó ẩn
* khỏi cả trình đọc màn hình, tức là mất luôn công dụng. Cách dưới đây giấu khỏi mắt nhưng vẫn
* nằm trong cây trợ năng.
*/
/* left/top BẮT BUỘC phải có. Thiếu nó, phần tử absolute đứng ở "vị trí tĩnh" — tức là chỗ nó vốn
 * nằm trong dòng chữ. Với thẻ truyện trong kệ cuộn ngang (.shelf) thì chỗ đó ở tận x≈1600, mà
 * containing block lại là .shelf-wrap NẰM NGOÀI .shelf, nên nó thoát khỏi vùng cắt overflow của kệ
 * và kéo rộng cả tài liệu → trang chủ cuộn ngang ra một khoảng trống lớn trên mobile.
 * Ghim về 0,0 thì nó luôn nằm trong khối cha, không bao giờ tạo tràn ở bất cứ đâu được dùng. */
.screen-reader-text{position: absolute !important; left: 0px; top: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); white-space: nowrap; border: 0px;}
/* Link "tới nội dung": nằm ngoài màn hình cho tới khi được Tab tới. */
.skip-link{position: absolute; top: -60px; left: 12px; z-index: 300; padding: 10px 18px; border-radius: 0px 0px var(--th-r-sm) var(--th-r-sm); background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 14px; transition: top .2s;}
.skip-link:focus{top: 0px;}
/* Viền focus thấy được cho mọi thứ bấm được — điều hướng bằng bàn phím mà không có viền này thì
* người dùng không biết mình đang đứng ở đâu. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{outline: 2px solid var(--th-color-main); outline-offset: 2px;}
.breadcrumb .crumb-current, .reader-crumb .crumb-current{color: var(--th-color-text-2);}
.reader-crumb .sep{margin: 0px 6px; opacity: .5;}
body.no-scroll{overflow: hidden;}

/*
* TÌM KIẾM: nút mở trên mobile + hộp gợi ý.
*/
/* Cùng một khuôn với .theme-toggle (xem ghi chú ở .header-tool): float + line-height 38px, KHÔNG
* dùng vertical-align — trộn hai kiểu canh là hai nút tròn lệch nhau. */
.search-toggle{display: none; float: left; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; background: var(--th-color-surface-2); color: var(--th-color-text); font-size: 15px; margin-right: 8px;}
.search-toggle:hover{color: var(--th-color-main);}
.header-search form{position: relative;}
.suggest-box{display: none; position: absolute; top: 46px; left: 0px; width: 340px; max-width: 92vw; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-md); box-shadow: var(--th-shadow); padding: 8px; z-index: 70; max-height: 70vh; overflow-y: auto;}
.suggest-box.open{display: block;}
.suggest-item{display: block; padding: 8px; border-radius: var(--th-r-sm); overflow: hidden;}
.suggest-item:hover{background: var(--th-color-surface-2);}
.suggest-thumb{float: left; width: 40px; padding-top: 57px; border-radius: 6px; margin-right: 11px;}
.suggest-info{display: block; overflow: hidden;}
.suggest-title{display: block; font-size: 14px; font-weight: 600; color: var(--th-color-text); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.suggest-full{font-size: 10px; font-weight: 800; color: var(--th-color-full); letter-spacing: .6px;}
.suggest-meta{display: block; font-size: 12px; color: var(--th-color-text-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.suggest-more{display: block; text-align: center; padding: 10px; margin-top: 4px; border-top: 1px solid var(--th-color-line); font-size: 13px; font-weight: 700; color: var(--th-color-main);}
.suggest-empty{padding: 18px; text-align: center; font-size: 14px; color: var(--th-color-text-2);}
/* CON TRỎ BÀN PHÍM trong hộp gợi ý (phím ↑ ↓ trong js/custom.js).
* Phải là một class RIÊNG chứ không tái dụng :hover — chúng là hai thứ khác nhau và có thể cùng lúc
* trỏ vào hai mục khác nhau (chuột đang nằm trên mục 1 trong khi phím mũi tên đang ở mục 3).
* Dùng chung :hover thì mục nào cũng sáng, không biết Enter sẽ mở cái nào. */
.suggest-item.is-active, .suggest-more.is-active{background: var(--th-accent-bg); color: var(--th-color-main);}
.suggest-item.is-active .suggest-title{color: var(--th-color-main);}
/* Tiêu đề "Tìm gần đây" — hộp gợi ý lúc này đang đổi vai (nhắc lịch sử thay vì gợi ý truyện), phải
* nói ra, nếu không danh sách chữ trơn trông như kết quả tìm bị lỗi mất bìa. */
.suggest-head{padding: 8px 10px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--th-color-text-2);}
.suggest-word{font-size: 13.5px; color: var(--th-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.suggest-word i{margin-right: 10px; font-size: 12px; color: var(--th-color-text-2);}

/*
* LƯỚI 4 CỘT — dùng cho lưới nằm TRONG cột 65% (archive / thể loại / tìm kiếm).
* Lưới 6 cột mặc định được canh cho khối chạy hết bề ngang trang chủ; nhét nguyên nó vào cột hẹp
* thì mỗi bìa chỉ còn ~113px. Độ đặc hiệu (0,4,0) cố ý cao hơn các rule reset 6/5 cột ở
* responsive.css (0,3,0) để không phải lệ thuộc thứ tự file.
*/
/* Lưới gốc 6 cột rải quy tắc float ở 5 breakpoint khác nhau (6n+6, rồi 5n+5, 4n+4, 3n+3, 2n+2).
 * Đè từng cái một là chắc chắn sót: bản trước sót đúng `5n+5` của mốc ≤1340 nên ở 1280px thẻ thứ 3
 * mỗi hàng bị đẩy lệch 20px và dính sát thẻ thứ 4.
 * Nay quét sạch bằng MỘT rule `:nth-child(n)` — khớp mọi thẻ và có độ đặc hiệu (0,4,0), cao hơn mọi
 * quy tắc gốc (0,3,0) nên không phụ thuộc thứ tự file — rồi mới khai lại cột cuối hàng. */
.truyen-grid.grid-4 .truyen-col:nth-child(n){float: left; width: calc((100% - 60px) / 4); margin-right: 20px;}
.truyen-grid.grid-4 .truyen-col:nth-child(4n+4){float: right; margin-right: 0px;}
.truyen-grid.grid-4 .truyen-col:nth-child(n+5){margin-top: 26px;}

/*
* NÚT PHỤ (đứng cạnh .btn-read).
*/
.btn-ghost{display: inline-block; height: 50px; line-height: 48px; padding: 0px 22px; font-weight: 600; color: var(--th-color-text); border: 1px solid var(--th-color-line); border-radius: 25px; margin-right: 10px; transition: border-color .2s, color .2s;}
.btn-ghost i{margin-right: 8px; color: var(--th-color-main);}
.btn-ghost:hover{border-color: var(--th-color-main); color: var(--th-color-main);}

/*
* ĐÁNH GIÁ TRUYỆN.
*/
.rate-wrap .box-title{margin-bottom: 18px;}
.rate-box{overflow: hidden;}
.rate-score{float: left; margin-right: 22px; line-height: 1;}
.rate-score b{font-size: 38px; font-weight: 800; letter-spacing: -1px; background: var(--th-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rate-score span{font-size: 15px; color: var(--th-color-text-2);}
.rate-stars{float: left; font-size: 0px; margin-top: 2px;}
.rate-star{display: inline-block; width: 34px; height: 34px; font-size: 20px; color: var(--th-color-line); transition: color .15s, transform .15s;}
.rate-star.on, .rate-star.hover{color: var(--th-color-main);}
.rate-star.hover{transform: scale(1.14);}
.rate-note{clear: both; padding-top: 12px; font-size: 13px; color: var(--th-color-text-2);}
.rate-note.done{color: var(--th-color-full); font-weight: 600;}
.rate-note i{margin-right: 5px;}

/*
* CÔNG CỤ DANH SÁCH CHƯƠNG (tìm + đảo thứ tự) + phân trang theo lô.
*/
.chuong-tools{margin-bottom: 16px;}
.chuong-search{float: left; position: relative; width: 300px; max-width: 100%;}
.chuong-search input{width: 100%; height: 42px; background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: var(--th-r-sm); padding: 0px 40px 0px 14px; color: var(--th-color-text); font-size: 14px; box-sizing: border-box;}
.chuong-search input:focus{border-color: var(--th-color-main);}
.chuong-search i{position: absolute; top: 13px; right: 14px; color: var(--th-color-text-2); font-size: 14px; pointer-events: none;}
.chuong-order{float: right; font-size: 0px; background: var(--th-glass); border: 1px solid var(--th-glass-line); border-radius: var(--th-r-sm); padding: 3px;}
.chuong-order button{display: inline-block; height: 34px; padding: 0px 14px; border-radius: var(--th-r-xs); font-size: 13px; font-weight: 600; color: var(--th-color-text-2); transition: background .2s, color .2s;}
.chuong-order button.active{background: var(--th-grad); color: var(--th-on-grad);}
/*
* CẶP NÚT CHUYỂN TRANG TRÊN ĐẦU DANH SÁCH (.chuong-nav).
* Dùng CHUNG vỏ pill với .chuong-order để hai nhóm đọc ra là anh em trên cùng hàng công cụ, chỉ
* khác việc — thay vì trông như hai thành phần lạc nhau.
* .chuong-nav để rỗng khi truyện chỉ có 1 lô chương (chapter_nav() không in gì): float rỗng
* không chiếm chỗ nên không cần ẩn bằng CSS.
*/
.chuong-nav{float: right; margin-left: 8px;}
.cn-group{display: inline-block; font-size: 0px; background: var(--th-glass); border: 1px solid var(--th-glass-line); border-radius: var(--th-r-sm); padding: 3px;}
.cn-btn{display: inline-block; width: 34px; height: 34px; line-height: 34px; text-align: center; border-radius: var(--th-r-xs); font-size: 13px; color: var(--th-color-text-2); transition: background .2s, color .2s;}
a.cn-btn:hover, button.cn-btn:hover{background: var(--th-glass-2); color: var(--th-accent-txt);}
/* In ra <span> chứ không phải <a> vô hiệu hoá — cùng lý do đã ghi ở .cp-btn.is-off: link không dẫn
 * đi đâu vẫn bị bot bò vào và vẫn nhận được focus bàn phím. */
.cn-btn.is-off{opacity: .35;}
.cn-info{display: inline-block; height: 34px; line-height: 34px; padding: 0px 8px; font-size: 12.5px; color: var(--th-color-text-2); font-variant-numeric: tabular-nums; vertical-align: top;}
.cn-info b{color: var(--th-color-text); font-weight: 700;}
.chuong-list{position: relative; min-height: 60px; transition: opacity .2s;}
.chuong-list.is-loading{opacity: .35; pointer-events: none;}
.chuong-row.is-current a{color: var(--th-color-main); font-weight: 700;}
.chuong-row.is-current a i{color: var(--th-color-main);}
.chuong-pager{margin-top: 22px; text-align: center; font-size: 0px;}
.cp-btn{display: inline-block; min-width: 38px; height: 38px; line-height: 36px; padding: 0px 6px; margin: 0px 3px 6px; border-radius: var(--th-r-sm); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); font-size: 14px; font-weight: 600; color: var(--th-color-text-2); box-sizing: border-box; text-align: center;}
a.cp-btn:hover, button.cp-btn:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
/* .is-off = mũi tên ở đầu/cuối dải. In ra <span> chứ không phải <a> vô hiệu hoá: link không dẫn
* đi đâu vẫn bị bot bò vào và vẫn nhận được focus bàn phím. */
.cp-btn.is-off{opacity: .35;}
.cp-btn.current{background: var(--th-grad); color: var(--th-on-grad); border-color: transparent;}
.cp-gap{display: inline-block; padding: 0px 6px; font-size: 14px; color: var(--th-color-text-2);}
/* Chữ "Trước"/"Sau" và ô "Trang X / Y" CHỈ dùng cho bản mobile (css/responsive.css bật lên ở ≤590px).
 * Desktop đã có nguyên dải số nên hiện thêm hai thứ này là nói lại một thông tin hai lần, mà thanh
 * phân trang thì đang vừa khít một hàng — thêm chữ vào là đẩy nó xuống dòng. */
.cp-txt{display: none;}
.cp-info{display: none;}

/*
* HỘP NHẢY CHƯƠNG (trang đọc).
*/
.chap-modal{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 210; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.chap-modal.open{display: block;}
/* Trần hộp và tổng chiều cao phần KHÔNG cuộn, gom vào biến vì con số này đã lệch một lần rồi:
* `.chap-modal-body` trước đây trừ CỨNG 190px — con số tính từ hồi hộp chưa có thanh thẻ. Khi thêm
* thanh thẻ (45px) và khoảng hở của `.chap-pane` (18px) mà không ai sửa 190 đó, danh sách cao hơn
* hộp 88px và tràn hẳn ra ngoài bo góc. Để hằng số nằm rải ở ba breakpoint là mời lỗi đó quay lại,
* nên ba breakpoint giờ chỉ ghi đè BIẾN, công thức chỉ viết một lần.
* Cộng phần (desktop): 1 viền + 22 đệm + 60 đầu hộp + 45 thanh thẻ + 18 hở + 110 công cụ
* + 22 đệm + 1 viền = 279 → lấy 280 cho dư 1px. Thẻ "đã đánh dấu" không có khối công cụ nên
* trừ bớt đúng 110px, nếu không nó cuộn sớm hơn cần thiết. */
.chap-modal{--th-chap-max: 86vh; --th-chap-chrome: 280px; --th-chap-chrome-mark: 170px;}
/* Chặn cuối: nếu mai này lại có ai thêm một hàng vào phần đầu mà quên cập nhật biến ở trên, nội
* dung bị CẮT trong bo góc chứ không đổ tràn ra giữa trang — hỏng nhẹ hơn và dễ thấy hơn. */
.chap-modal-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 720px; max-width: 94%; max-height: var(--th-chap-max); overflow: hidden; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg); box-shadow: var(--th-shadow); padding: 22px; box-sizing: border-box;}
.chap-modal-head{margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--th-color-line);}
.chap-modal-head h2{float: left; font-size: 19px; font-weight: 800;}
.chap-modal-close{float: right; width: 32px; height: 32px; margin-top: -4px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--th-color-text-2); background: var(--th-color-surface-2);}
.chap-modal-close:hover{color: var(--th-color-main);}
/* Chiều cao trừ đi phần đầu + công cụ để chỉ RIÊNG danh sách cuộn, tiêu đề và ô tìm đứng yên. */
.chap-modal-body{max-height: calc(var(--th-chap-max) - var(--th-chap-chrome)); overflow-y: auto; overflow-x: hidden;}
.chap-pane-mark .chap-modal-body{max-height: calc(var(--th-chap-max) - var(--th-chap-chrome-mark));}
.chap-modal .chuong-row{float: none; width: 100%; padding: 9px 4px;}
.chap-modal .chuong-row:nth-child(2n+2){padding-left: 4px; padding-right: 4px;}
.chap-modal .chuong-row:hover{background: var(--th-color-surface-2); border-radius: var(--th-r-xs);}
.chap-modal .chuong-search{width: 100%; float: none;}
.chap-modal .chuong-order{float: none; margin-top: 10px; display: inline-block;}
/* Trong hộp nhảy chương ô tìm chiếm trọn bề ngang, nên hàng dưới là [Cũ nhất|Mới nhất] ... [‹ n/N ›]. */
.chap-modal .chuong-nav{float: right; margin-top: 10px; margin-left: 0px;}

/*
* BÁO LỖI CHƯƠNG.
*/
.report-modal{display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 220; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
.report-modal.open{display: block;}
/* box-sizing: border-box — cùng lý do với .auth-box ở trên: thiếu nó thì padding cộng ra ngoài
* max-width và hộp tràn sát/ngoài hai mép màn hình trên điện thoại. */
.report-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 440px; max-width: 92%; box-sizing: border-box; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg); box-shadow: var(--th-shadow); padding: 28px;}
.report-box h2{font-size: 21px; font-weight: 800; margin-bottom: 6px;}
.report-sub{font-size: 14px; color: var(--th-color-text-2); margin-bottom: 18px;}
.report-close{position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border-radius: 50%; font-size: 21px; line-height: 1; color: var(--th-color-text-2);}
.report-close:hover{color: var(--th-color-main);}
.report-types{margin-bottom: 14px;}
.report-type{display: block; width: 100%; text-align: left; padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--th-color-line); border-radius: var(--th-r-sm); background: var(--th-color-surface-2); font-size: 14px; font-weight: 600; color: var(--th-color-text-2); transition: border-color .2s, color .2s;}
.report-type:hover{border-color: var(--th-color-main); color: var(--th-color-text);}
.report-type.active{border-color: var(--th-color-main); color: var(--th-color-main); background: var(--th-accent-bg);}
.report-note{width: 100%; background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: var(--th-r-sm); padding: 12px 14px; color: var(--th-color-text); font-size: 14px; box-sizing: border-box; resize: vertical;}
.report-note:focus{border-color: var(--th-color-main);}
.report-submit{width: 100%; height: 48px; margin-top: 14px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 15px; border-radius: var(--th-r-sm);}
.report-submit:disabled{opacity: .6;}
.report-msg{display: none; font-size: 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--th-r-sm);}
.report-msg.error{display: block; background: rgba(255,80,80,.12); color: #ff6b6b;}
.report-msg.success{display: block; background: rgba(53,195,154,.12); color: var(--th-color-full);}

/*
* TRANG ĐỌC: vạch tiến trình, nút về chỗ cũ, chân trang, chiều rộng, chế độ tập trung.
*/
/* top phải cộng --th-adminbar: đây là khối position:fixed neo theo ĐỈNH màn hình, đúng cái bẫy ở
* mục "Bẫy BỐ CỤC #6" của GHICHU-DEV.md. Thiếu nó thì mọi thành viên ĐANG ĐĂNG NHẬP (ai cũng thấy
* thanh quản trị WP, không riêng admin) bị thanh đó che mất vạch tiến trình. */
.read-progress{position: fixed; top: var(--th-adminbar); left: 0px; width: 100%; height: 3px; z-index: 110; background: transparent; pointer-events: none;}
.read-progress i{display: block; width: 0%; height: 100%; background: var(--th-grad); transition: width .1s linear;}
.read-resume{display: block; margin: 0px auto 22px; padding: 10px 20px; border-radius: 22px; background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); color: var(--th-accent-txt); font-size: 14px; font-weight: 600;}
.read-resume i{margin-right: 7px;}
.reader-foot{margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--th-color-line);}
.reader-report{float: left; font-size: 14px; font-weight: 600; color: var(--th-color-text-2); padding: 12px 0px;}
.reader-report i{margin-right: 7px;}
.reader-report:hover{color: var(--th-color-main);}
.reader-foot .btn-follow{float: right; display: inline-block; height: 44px; line-height: 42px; padding: 0px 22px; font-weight: 600; color: var(--th-color-text); border: 1px solid var(--th-color-line); border-radius: 22px; transition: border-color .2s, color .2s;}
.reader-foot .btn-follow i{margin-right: 8px;}
.reader-foot .btn-follow:hover, .reader-foot .btn-follow.followed{border-color: var(--th-color-main); color: var(--th-color-main);}
.reader-nav .r-list{display: inline-block; height: 44px; line-height: 44px; padding: 0px 20px; border-radius: 22px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); font-weight: 600; font-size: 14px; color: var(--th-color-text); margin: 0px 5px; transition: border-color .2s, color .2s;}
.reader-nav .r-list:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.reader-nav .r-list i{margin-right: 7px;}
/* Chiều rộng cột chữ. 800px mặc định là ~90 ký tự/dòng với cỡ 19px — hơi dài so với mức dễ đọc
* (50-75), nên "Hẹp" mới là lựa chọn tốt cho mắt, còn "Rộng" dành cho màn lớn / cỡ chữ to.
* Class nằm trên <html> (không phải trên .reader) để script chặn trong inc/setup.php gắn được từ
* <head>, lúc .reader chưa tồn tại — xem khối tông nền phía trên. */
html.rw-narrow .reader{max-width: 660px;}
html.rw-normal .reader{max-width: 800px;}
html.rw-wide .reader{max-width: 980px;}
.rp-val{display: inline-block; min-width: 40px; text-align: center; font-size: 14px; font-weight: 700; color: var(--th-color-text); vertical-align: middle;}
.rp-theme button{display: inline-block; width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--th-color-line); margin-right: 8px; cursor: pointer; vertical-align: middle;}
.rp-theme button.active{border-color: var(--th-color-main);}
.rp-theme .t-dark{background: #17151f;}
.rp-theme .t-light{background: #ffffff;}
.rp-theme .t-sepia{background: #f4ecd8;}
.rp-theme .t-black{background: #000000;}
.reader-panel-box .rp-btns button.active{background: var(--th-grad); color: var(--th-on-grad); border-color: transparent;}
/* Chế độ tập trung: giấu mọi thứ quanh chữ. Panel cài đặt ở lại để còn đường tắt ra. */
body.zen-mode .header, body.zen-mode .footer, body.zen-mode .bottom-nav, body.zen-mode .back-top{display: none;}
body.zen-mode .main{padding-top: 16px;}

/*
* TRẠNG THÁI RỖNG (không kết quả / 404).
*/
.empty-state{text-align: center; padding: 60px 20px;}
.empty-state > i{font-size: 46px; color: var(--th-color-line); margin-bottom: 18px; display: block;}
.empty-state h1, .empty-state h2{font-size: 26px; font-weight: 800; margin-bottom: 10px;}
.empty-state p{color: var(--th-color-text-2); margin-bottom: 24px;}
.empty-state .e404{font-size: 96px; font-weight: 800; line-height: 1; letter-spacing: -4px; background: var(--th-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px;}
.empty-search{max-width: 460px; margin: 0px auto 20px; position: relative;}
.empty-search input{width: 100%; height: 50px; background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: 25px; padding: 0px 130px 0px 22px; color: var(--th-color-text); font-size: 15px; box-sizing: border-box;}
.empty-search input:focus{border-color: var(--th-color-main);}
.empty-search button{position: absolute; top: 5px; right: 5px; height: 40px; padding: 0px 22px; border-radius: 20px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 14px;}
.empty-links a{display: inline-block; margin: 0px 6px 8px; padding: 8px 18px; border-radius: 20px; border: 1px solid var(--th-color-line); font-size: 14px; font-weight: 600; color: var(--th-color-text-2); transition: border-color .2s, color .2s;}
.empty-links a:hover{border-color: var(--th-color-main); color: var(--th-color-main);}

/*
* DÒNG XẾP HẠNG / LỊCH SỬ.
* Thay cho việc mượn .capnhat-item rồi đè bằng 5 thuộc tính style="" inline như bản cũ — inline thì
* không đổi được theo breakpoint và không sửa được ở một chỗ.
*/
.rank-row{position: relative; padding: 14px 0px; border-bottom: 1px solid var(--th-color-line);}
.rank-row:last-child{border-bottom: 0px;}
.rank-num{float: left; width: 44px; margin: 6px 8px 0px 0px; font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--th-color-line); text-align: center; font-variant-numeric: tabular-nums;}
.rank-row.top .rank-num{background: var(--th-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.rank-thumb{float: left; width: 58px; padding-top: 82px; border-radius: var(--th-r-xs); margin-right: 15px;}
.rank-info{overflow: hidden;}
.rank-info h3{font-size: 16px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.rank-info h3 a:hover{color: var(--th-color-main);}
.rank-meta{margin-top: 6px; font-size: 12.5px; color: var(--th-color-text-2);}
.rank-meta span{display: inline-block; margin-right: 16px;}
.rank-meta i{color: var(--th-color-main); margin-right: 5px;}
.rank-chap{display: inline-block; margin-top: 7px; font-size: 13px; color: var(--th-color-text-2); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;}
.rank-chap:hover{color: var(--th-color-main);}
.rank-chap.is-continue{color: var(--th-color-main); font-weight: 600;}
.rank-chap i{margin-right: 6px;}

/*
* ĐỌC TIẾP (trang chủ, chỉ hiện với người đã đăng nhập).
*/
/* Bố cục kiểu "khối cha hút lại": mỗi thẻ rộng calc(% - gutter) và LUÔN đeo margin-right, còn khối
* cha kéo lại đúng 1 gutter. Cặp % và gutter phải khớp nhau như vậy — nếu viết calc((100% - tổng
* gutter)/n) rồi lại đặt margin âm ở cha thì phần trăm tính trên một bề ngang khác với con số vừa trừ.
*
* Ưu điểm so với lối nth-child float-phải của .truyen-grid: đổi số cột ở breakpoint chỉ là đổi MỘT
* con số %, không phải nhớ reset nth-child của mốc trước — đúng cái bẫy đã làm hỏng .grid-4 và làm
* thẻ thứ 5 của dải này rơi ra giữa hàng ở 1100px. */
/* Cắt đệm DƯỚI của "Đọc tiếp": nó và "Đề cử" đều là .sec (48px trên + 48px dưới) nên hở 96px,
 * gấp đôi nhịp của phần còn lại trang chủ (Đề cử → Mới cập nhật chỉ 48px, vì .home-main lồng một
 * .sec đã khai padding-top: 0px). Nay còn đúng 48px do .home-decu cấp.
 * Cắt ở ĐÂY chứ không phải padding-top của .home-decu: khối "Đọc tiếp" chỉ hiện với người đã đăng
 * nhập và có lịch sử đọc — cắt bên .home-decu thì khách chưa đăng nhập sẽ thấy "Đề cử" dính sát hero.
 * `.home-tiep.sec` (0,2,0) chứ không phải `.home-tiep`: css/responsive.css khai .sec{padding: 34px 0px}
 * ở mốc ≤590px và nạp SAU file này, cùng độ đặc hiệu là đệm mọc lại trên mobile. */
.home-tiep.sec{padding-bottom: 0px;}
.tiep-list{margin: 0px -14px -14px 0px;}
/* height CỐ ĐỊNH (57 bìa + 20 padding + 2 viền = 79) chứ không để thẻ tự cao theo nội dung: thẻ có
* tên 1 dòng thấp hơn thẻ tên 2 dòng, mà float thì "mắc" vào thẻ cao ở hàng trên — ở 820px đúng lỗi
* đó làm hàng vỡ thành 3+1+1 thay vì 3+2. Cao bằng nhau thì mọi breakpoint tự xuống hàng đúng, khỏi
* cần thêm quy tắc clear theo từng mốc. */
.tiep-item{float: left; width: calc(16.6666% - 14px); height: 79px; overflow: hidden; margin: 0px 14px 14px 0px; padding: 10px; border-radius: var(--th-r-md); background: var(--th-color-surface); border: 1px solid var(--th-color-line); box-sizing: border-box; transition: transform .25s, border-color .2s;}
.tiep-item:hover{transform: translateY(-4px); border-color: var(--th-color-main);}
.tiep-thumb{float: left; width: 40px; padding-top: 57px; border-radius: 6px; margin-right: 10px;}
.tiep-info{display: block; overflow: hidden;}
/* min-height = ĐÚNG 2 dòng, để tên 1 dòng và tên 2 dòng đều chiếm cùng chiều cao — nhờ đó dòng
 * "Chương ..." của mọi thẻ bắt đầu ở cùng một độ cao. Thiếu nó thì thẻ tên ngắn đẩy dòng chương
 * lên cao hơn hàng xóm, cả dải nhìn răng cưa. Cùng thủ thuật với .truyen-col-title (min-height 38px).
 * line-height 1.26 chứ không phải 1.3: thẻ cao 79px → vùng nội dung 57px (đúng bằng chiều cao thumb),
 * mà 2 dòng ở 1.3 đã là 35.1px + 5px + 18px dòng chương = 58.1px, tức bản cũ ĐANG bị .tiep-item
 * {overflow: hidden} cắt cụt 1.1px chân dòng chương. Nay 34 + 4 + 18 = 56px, dư gần 1px. */
.tiep-title{display: block; font-size: 13.5px; font-weight: 600; line-height: 1.26; min-height: 34px; color: var(--th-color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.tiep-chap{display: block; margin-top: 4px; font-size: 12px; color: var(--th-color-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tiep-chap i{margin-right: 5px; font-size: 9px;}

/*
* KHỐI LIÊN QUAN (cùng thể loại / cùng tác giả / gợi ý ở 404).
*/
.sec-related{padding-top: 40px;}
.sec-related .sec-head{margin-bottom: 22px;}
.sec-related .sec-title{font-size: 24px;}

/*
* XOÁ BỘ LỌC.
*/
.filter-reset{margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--th-color-line);}
.filter-reset > span{float: left; font-size: 13px; color: var(--th-color-text-2); padding-top: 8px;}
.f-clear{float: right; display: inline-block; padding: 7px 16px; border-radius: var(--th-r-xs); border: 1px solid var(--th-color-line); font-size: 13px; font-weight: 600; color: var(--th-color-text-2);}
.f-clear:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.f-clear i{margin-right: 6px;}

/*
* THANH ĐIỀU HƯỚNG ĐÁY (mobile). Ẩn trên desktop; bật ở css/responsive.css tại ≤900px.
*/
.bottom-nav{display: none; position: fixed; left: 0px; bottom: 0px; width: 100%; z-index: 97; background: var(--th-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--th-color-line);}
.bottom-nav a{float: left; width: 25%; text-align: center; padding: 9px 0px 7px; color: var(--th-color-text-2); box-sizing: border-box;}
.bottom-nav a i{display: block; font-size: 17px; margin-bottom: 4px;}
.bottom-nav a span{font-size: 10.5px; font-weight: 600;}
.bottom-nav a.active{color: var(--th-color-main);}

/*
* KHỐI SEO TRANG CHỦ (H1 + mở bài + bài dài), nằm cuối .main ngay trên footer.
* H1 cố ý nhỏ hơn .hero-title: hero là tấm quảng cáo có ảnh nền, còn dòng này là chủ đề của cả
* site. Để hai dòng to bằng nhau thì trang có hai tiêu đề khổng lồ đánh nhau, mà cái thắng lại là
* cái không nên thắng (tên một truyện).
* Cả ba nằm TRONG .home-seo-body cho liền một tấm thẻ. H1 + mở bài đứng đầu khung nên phần bị
* khung thu gọn cắt là phần dưới — đang thu gọn vẫn đọc được tiêu đề và mở bài.
*/
/* Màu phải khai tường minh: .home-seo-body đặt color = --th-color-text-2 (chữ mờ) cho thân bài,
 * H1 nằm trong đó sẽ thừa hưởng đúng màu mờ ấy và tụt hẳn xuống nếu không đè lại. */
.home-h1{font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.6px; line-height: 1.2; color: var(--th-color-text);}
/* margin-bottom 16px là khoảng thở giữa mở bài và phần thân bài ngay dưới. */
.home-intro{margin: 10px 0px 16px; max-width: 900px; font-size: 15px; line-height: 1.75; color: var(--th-color-text-2);}
.home-intro p{margin-bottom: 8px;}
.home-intro p:last-child{margin-bottom: 0px;}
.home-intro a{color: var(--th-color-main);}

/* Cắt SẠCH đệm trên/dưới của .sec cho riêng khối này:
 * - trên: .home-hot ngay phía trên đã có 48px đệm dưới rồi, cộng thêm nữa là hở 96px;
 * - dưới: khoảng cách tới footer do .main{padding-bottom} lo (điểm dễ vỡ #8), khối tự thêm 48px
 *   nữa là thành 96px — đó là chỗ hở lớn giữa nút "Xem toàn bộ" và footer.
 * Phải viết `.home-seo.sec` (0,2,0) chứ KHÔNG phải `.home-seo` (0,1,0): css/responsive.css khai
 * `.sec{padding: 34px 0px}` ở mốc ≤590px và nạp SAU style.css, cùng độ đặc hiệu thì nó thắng và
 * đệm mọc lại trên mobile. */
.home-seo.sec{padding-top: 0px; padding-bottom: 0px;}
.home-seo-body{position: relative; padding: 22px 24px; border-radius: var(--th-r-lg); background: var(--th-glass); border: 1px solid var(--th-glass-line); font-size: 15px; line-height: 1.8; color: var(--th-color-text-2);}
/* Thu gọn bằng max-height chứ KHÔNG display:none: chữ vẫn nằm trong DOM và vẫn được vẽ, chỉ bị
 * khung cắt bớt. Đây là điểm mấu chốt của cả khối — ẩn hẳn là mất tác dụng SEO của bài viết. */
/* 300px chứ không phải 220px như hồi H1 còn nằm ngoài: H1 + mở bài nay chiếm sẵn ~115px đầu khung,
 * để 220px thì phần thân bài chỉ ló ra hơn một dòng, nhìn như lỗi hiển thị chứ không ra "còn nữa". */
.home-seo.is-clamped .home-seo-body{max-height: 300px; overflow: hidden;}
/* Dải mờ báo cho người đọc biết bên dưới còn chữ. pointer-events none để không nuốt cú bấm vào link
 * nằm lọt dưới dải. Tô về --th-color-bg (nền trang) chứ không phải nền kính của chính khối: mắt
 * nhìn thấy chỗ chữ tan vào nền trang thì hiểu ngay là "còn nữa", tô về màu kính thì thành một
 * mảng xám lửng lơ. */
.home-seo.is-clamped .home-seo-body:after{content: ''; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 110px; border-radius: 0px 0px var(--th-r-lg) var(--th-r-lg); background: linear-gradient(to bottom, rgba(0,0,0,0), var(--th-color-bg)); pointer-events: none;}
.home-seo-more{display: block; margin: 14px auto 0px; padding: 9px 22px; border-radius: 999px; border: 1px solid var(--th-glass-line); background: var(--th-glass); font-size: 14px; font-weight: 700; color: var(--th-color-text); transition: color .2s, border-color .2s;}
.home-seo-more:hover{color: var(--th-color-main); border-color: var(--th-color-main);}
.home-seo-more i{margin-left: 8px; font-size: 12px; transition: transform .25s;}
/* Mũi tên quay lên khi đang mở — trạng thái nút phải nhìn là biết, không chỉ dựa vào chữ. */
.home-seo:not(.is-clamped) .home-seo-more i{transform: rotate(180deg);}
.home-seo-body h2, .home-seo-body h3, .home-seo-body h4{margin: 18px 0px 8px; font-weight: 800; color: var(--th-color-text); letter-spacing: -.3px;}
.home-seo-body h2{font-size: 20px;}
.home-seo-body h3{font-size: 17px;}
.home-seo-body h4{font-size: 15px;}
.home-seo-body h2:first-child, .home-seo-body h3:first-child, .home-seo-body h4:first-child{margin-top: 0px;}
.home-seo-body p{margin-bottom: 10px;}
.home-seo-body p:last-child{margin-bottom: 0px;}
.home-seo-body strong, .home-seo-body b{color: var(--th-color-text);}
.home-seo-body a{color: var(--th-color-main);}
.home-seo-body a:hover{text-decoration: underline;}
/* Reset gốc đặt ul,li{list-style: none} nên danh sách trong bài SEO phải bật lại chấm đầu dòng. */
.home-seo-body ul, .home-seo-body ol{margin: 0px 0px 10px 20px;}
.home-seo-body ul li{list-style: disc; margin-bottom: 4px;}
.home-seo-body ol li{list-style: decimal; margin-bottom: 4px;}


/*
* TRANG ĐỌC — CÁC KHỐI BỔ SUNG (đợt tối ưu 08/09/2026).
*/

/* CHƯƠNG RỖNG. Có thật trên kho này: 58 chương dưới 300 ký tự, và một số chương mà toàn bộ thân
* bài chỉ là khối chữ ẩn của site nguồn nên sau khi dọn thì không còn gì. Trước đây người đọc chỉ
* thấy một khoảng trắng giữa hai nút và không biết mình mở sai hay site hỏng. */
.chuong-empty{text-align: center; padding: 54px 20px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg);}
.chuong-empty > i{font-size: 38px; color: var(--th-color-main); opacity: .85;}
.chuong-empty h2{margin-top: 16px; font-size: 19px; font-weight: 800;}
.chuong-empty p{margin: 10px auto 20px; max-width: 420px; font-size: 14px; line-height: 1.7; color: var(--th-color-text-2);}
.chuong-empty .ce-next{display: inline-block; height: 44px; line-height: 44px; padding: 0px 22px; border-radius: 22px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 14px; margin: 0px 5px;}
.chuong-empty .ce-next i{margin-left: 7px; font-size: 12px;}
.chuong-empty .ce-report{display: inline-block; height: 44px; line-height: 42px; padding: 0px 20px; border-radius: 22px; border: 1px solid var(--th-color-line); color: var(--th-color-text-2); font-weight: 600; font-size: 14px; margin: 0px 5px;}
.chuong-empty .ce-report:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.chuong-empty .ce-report i{margin-right: 7px;}

/* DẢI NHẢY NHANH. Đây là <a href> THẬT do PHP in ra — xem ghi chú trong single-chuong.php.
* ĐỪNG đổi sang <button> + JS: cắt độ sâu bò của Googlebot chính là lý do khối này tồn tại. */
.chuong-jump{text-align: center; margin: 6px 0px 4px; font-size: 0px;}
.chuong-jump a{display: inline-block; height: 34px; line-height: 32px; padding: 0px 13px; margin: 4px 3px; border: 1px solid var(--th-color-line); border-radius: 17px; font-size: 13px; font-weight: 600; color: var(--th-color-text-2); transition: border-color .2s, color .2s;}
.chuong-jump a:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.chuong-jump .cj-toc{color: var(--th-color-text); border-color: var(--th-accent-line); background: var(--th-accent-bg);}
.chuong-jump .cj-edge i{font-size: 11px;}
.chuong-jump .cj-edge i:first-child{margin-right: 5px;}
.chuong-jump .cj-edge i:last-child{margin-left: 5px;}

/* KHỐI ỦNG HỘ (inc/block-donate.php). Chỉ dùng biến --th-: bốn tông trình đọc (tối/sáng/giấy cũ/đen)
* đổi biến chứ không đổi luật, nên khối tự theo tông mà không phải viết riêng cho từng tông.
* html.donate-off do script chặn trong <head> gắn — ẩn TRƯỚC khi vẽ, không chớp lên rồi mới tắt. */
.donate-box{position: relative; margin-top: 28px; padding: 20px 22px; background: var(--th-color-surface); border: 1px solid var(--th-accent-line); border-radius: var(--th-r-lg);}
html.donate-off .donate-box{display: none;}
.donate-hide{position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; line-height: 30px; font-size: 20px; color: var(--th-color-text-2); background: none; border: 0px; cursor: pointer;}
.donate-hide:hover{color: var(--th-color-main);}
.donate-qr{width: 110px; margin: 4px 0px 0px 18px;}
.donate-qr img{width: 110px; height: auto; border-radius: var(--th-r-xs); background: #ffffff;}
.donate-body{overflow: hidden; padding-right: 26px;}
.donate-title{font-size: 16px; font-weight: 800; color: var(--th-color-text);}
.donate-title i{margin-right: 9px; color: var(--th-color-main);}
.donate-msg{margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--th-color-text-2);}
.donate-btn{display: inline-block; margin-top: 14px; height: 42px; line-height: 42px; padding: 0px 22px; border-radius: 21px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 14px;}
.donate-btn i{margin-right: 8px;}
.donate-vi{margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--th-color-text-2);}
.donate-vi-mang{display: inline-block; margin-right: 8px; padding: 0px 9px; border-radius: 11px; background: var(--th-accent-bg); color: var(--th-accent-txt); font-weight: 700;}
/* word-break: địa chỉ ví là một chuỗi ~34-42 ký tự không có khoảng trắng — không cho gãy thì nó đẩy
* bề ngang trang đọc tràn ngang trên điện thoại. */
.donate-vi-addr{word-break: break-all; font-family: Consolas, Menlo, monospace; font-size: 13px; color: var(--th-color-text);}
.donate-copy{margin-left: 8px; height: 28px; line-height: 26px; padding: 0px 12px; font-size: 12px; font-weight: 600; color: var(--th-color-text-2); background: none; border: 1px solid var(--th-color-line); border-radius: 14px; cursor: pointer;}
.donate-copy i{margin-right: 6px;}
.donate-copy:hover, .donate-copy.done{border-color: var(--th-color-main); color: var(--th-color-main);}

/* CHÂN TRANG ĐỌC. Báo lỗi ở trái, cụm hành động ở phải — nhóm hành động phải nằm chung một khối
* float thì ba nút mới không rơi lẻ khi tên nút dài ra. */
.reader-foot-act{float: right; font-size: 0px;}
/* ⚠️ font-size PHẢI khai lại cho MỌI con, ngay tại đây.
* `font-size: 0px` ở khối cha là mẹo triệt khoảng trắng giữa các thẻ inline-block — nhưng font-size
* là thuộc tính KẾ THỪA, nên con nào không tự khai sẽ nhận đúng 0px và mất sạch cả chữ lẫn icon.
* Đã dính thật: .btn-mark và .btn-share tự khai 14px nên không sao, còn `.reader-foot .btn-follow`
* chỉ có font-weight chứ không có font-size ⇒ nút "Theo dõi" nhả ra một cái vỏ pill rỗng
* (0 chữ + 36px padding + bo góc 22px) trông y hệt một vòng tròn trống.
* Khai ở cha cho mọi con thì nút mới thêm sau này cũng không dính lại lỗi đó. */
.reader-foot-act > *{margin-left: 8px; font-size: 14px;}
/* ⚠️ .btn-follow mang sẵn float: right từ hồi nó là con TRỰC TIẾP của .reader-foot (quy tắc
* `.reader-foot .btn-follow`, 0,2,0). Nay nó nằm trong .reader-foot-act — cũng đang float — nên cái
* float cũ là một float lồng trong một khối shrink-to-fit: nó bị kéo khỏi luồng inline, phá thứ tự
* ba nút và làm bề ngang khối cha tính sai.
* Ghi đè bằng (0,3,0) chứ không phải (0,2,0): hoà độ đặc hiệu thì phải trông vào thứ tự nguồn, mà
* quy tắc gốc nằm cách đây 200 dòng phía trên — ai đó dời khối là hỏng không báo. */
.reader-foot .reader-foot-act .btn-follow{float: none; padding: 0px 18px;}
.btn-mark, .btn-share{display: inline-block; height: 44px; line-height: 42px; padding: 0px 18px; font-weight: 600; font-size: 14px; color: var(--th-color-text); border: 1px solid var(--th-color-line); border-radius: 22px; transition: border-color .2s, color .2s;}
.btn-mark i, .btn-share i{margin-right: 8px;}
.btn-mark:hover, .btn-share:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.btn-mark.marked{border-color: var(--th-color-main); color: var(--th-color-main);}

/* THANH CHUYỂN CHƯƠNG DÍNH ĐÁY — chỉ bật ở ≤900px (css/responsive.css).
* Khai display: none ở đây thay vì chỉ bật trong media query để trên desktop nó không bao giờ
* chiếm chỗ, kể cả khi CSS responsive chưa kịp nạp. */
.reader-bar{display: none; position: fixed; left: 0px; bottom: 0px; width: 100%; z-index: 97; background: var(--th-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--th-color-line); transition: transform .25s;}
/* Giấu bằng transform chứ không display: none — có vậy nó mới trượt ra/vào mượt, và quan trọng hơn
* là các nút vẫn nằm trong luồng Tab thay vì biến mất khỏi cây trợ năng mỗi lần cuộn xuống. */
.reader-bar.is-down{transform: translateY(100%);}
.reader-bar .rb-btn{float: left; width: calc(100% / 3); height: 54px; text-align: center; font-size: 13px; font-weight: 600; color: var(--th-color-text); box-sizing: border-box; padding-top: 8px;}
.reader-bar .rb-btn i{display: block; font-size: 16px; margin-bottom: 3px; color: var(--th-color-text-2);}
.reader-bar .rb-btn.disabled{opacity: .35; pointer-events: none;}
.reader-bar .rb-list{border-left: 1px solid var(--th-color-line); border-right: 1px solid var(--th-color-line); box-sizing: border-box;}
.reader-bar .rb-list i{color: var(--th-color-main);}

/* BẢNG ĐIỀU KHIỂN NỔI khi đang tự cuộn / đang nghe. Tách khỏi panel ⚙ vì lúc đang chạy thì thứ
* người ta cần là nút DỪNG trong tầm mắt, không phải đi mở panel tìm. */
.reader-run{display: none; position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 98; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 26px; box-shadow: var(--th-shadow); padding: 7px 8px 7px 18px; white-space: nowrap;}
.reader-run.open{display: block;}
.reader-run .rr-label{display: inline-block; vertical-align: middle; font-size: 13px; font-weight: 600; color: var(--th-color-text); margin-right: 12px;}
.reader-run button{display: inline-block; vertical-align: middle; width: 38px; height: 38px; line-height: 38px; text-align: center; border-radius: 50%; font-size: 14px; color: var(--th-color-text); background: var(--th-color-surface-2);}
.reader-run .rr-toggle{margin-right: 6px; background: var(--th-grad); color: var(--th-on-grad);}
.reader-run button:hover{opacity: .88;}

/* HỘP NHẢY CHƯƠNG — hai thẻ (mục lục / đã đánh dấu). */
/* ⚠️ KHÔNG đặt padding ngang ở đây. `.chap-modal-box` đã có `padding: 22px`, nên thêm `0px 20px`
* nữa là thanh thẻ thụt vào 20px so với tiêu đề và ô tìm kiếm (đo được: thẻ ở left 323, hai thứ kia
* ở 303). Vạch kẻ dưới vẫn chạy hết bề ngang phần nội dung như một thanh thẻ bình thường. */
.chap-tabs{border-bottom: 1px solid var(--th-color-line);}
/* Khoảng hở dưới thanh thẻ. Phải đặt ở `.chap-pane` chứ ĐỪNG thêm `margin-top` vào `.chuong-tools`:
* khối đó dùng chung với mục lục ở trang truyện, nơi không có thanh thẻ nào phía trên — sửa ở đó là
* trang truyện mọc thêm một khoảng trống không ai yêu cầu. */
.chap-pane{padding-top: 18px;}
.chap-tab{float: left; padding: 12px 2px; margin-right: 22px; font-size: 14px; font-weight: 700; color: var(--th-color-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;}
.chap-tab.active{color: var(--th-color-main); border-bottom-color: var(--th-color-main);}
.chap-tab i{margin-right: 6px; font-size: 13px;}
/* Thẻ "đã đánh dấu" ẩn sẵn từ CSS: js/custom.js dùng .toggle() nên trạng thái ĐẦU phải do CSS
* quyết, nếu không cả hai thẻ cùng hiện chồng lên nhau trong khoảnh khắc trước khi JS chạy. */
.chap-pane-mark{display: none;}
.chap-empty{padding: 34px 20px; text-align: center; font-size: 14px; color: var(--th-color-text-2);}

/* PANEL — nhóm nút mới. */
.reader-panel-box .rp-btns .rp-wide{display: block; width: 100%; margin: 8px 0px 0px; text-align: center;}
.reader-panel-box .rp-btns .rp-wide i{margin-right: 7px;}
.rp-reset{padding-top: 4px; border-top: 1px solid var(--th-color-line);}
.rp-reset button{width: 100%; padding: 9px 0px; font-size: 13px; font-weight: 600; color: var(--th-color-text-2); border: 1px solid var(--th-color-line); border-radius: 8px;}
.rp-reset button:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.rp-reset button i{margin-right: 7px;}
/* Bảng phím tắt: có phím tắt mà không nói ra thì chỉ mình người viết code biết. */
.rp-keys .rp-keylist span{display: block; font-size: 12px; color: var(--th-color-text-2); margin-bottom: 5px;}
.rp-keys .rp-keylist b{display: inline-block; min-width: 20px; padding: 1px 5px; margin-right: 3px; text-align: center; font-size: 11px; font-weight: 700; color: var(--th-color-text); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: 4px;}

/* Chế độ tập trung phải giấu luôn hai khối nổi mới, nếu không thì "ẩn header & footer" vẫn còn
* nguyên một thanh dính đáy — đúng thứ vừa bảo là sẽ ẩn. */
body.zen-mode .reader-bar, body.zen-mode .reader-run{display: none;}


/*
* BÌNH LUẬN CHƯƠNG (TODO #8). Bố cục float + calc theo convention, KHÔNG Flexbox.
*/
.cmt-box{margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--th-color-line);}
.cmt-title{font-size: 19px; font-weight: 800; margin-bottom: 18px;}
.cmt-count{display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--th-on-grad); background: var(--th-grad); border-radius: 11px; vertical-align: 2px;}

/* Ảnh đại diện vẽ bằng CHỮ CÁI ĐẦU — cố ý không dùng Gravatar. 20 bình luận là 20 request tới một
* host ngoài chưa hề có trong preconnect, trên đúng nhóm trang có nhiều lượt vào nhất. Xem đầu
* inc/comments.php. Dùng chung cho cả ô nhập lẫn từng dòng bình luận. */
.cmt-ava{float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; background: var(--th-grad); color: var(--th-on-grad); font-size: 16px; font-weight: 800;}

/* Ô NHẬP */
.cmt-form{margin-bottom: 24px;}
.cmt-form-body{float: left; width: calc(100% - 52px); margin-left: 12px;}
.cmt-input{display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; font-family: var(--th-font-main); font-size: 14px; line-height: 1.6; color: var(--th-color-text); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: var(--th-r-sm); resize: vertical;}
.cmt-input:focus{border-color: var(--th-color-main); outline: none;}
.cmt-submit{float: right; margin-top: 10px; height: 40px; line-height: 40px; padding: 0px 22px; border-radius: 20px; background: var(--th-grad); color: var(--th-on-grad); font-size: 14px; font-weight: 700;}
.cmt-submit:disabled{opacity: .6;}
.cmt-left{float: left; margin-top: 20px; font-size: 12px; color: var(--th-color-text-2);}
.cmt-msg{display: none; margin-top: 10px; font-size: 13px; padding: 9px 13px; border-radius: var(--th-r-sm);}
.cmt-msg.error{display: block; background: rgba(255,80,80,.12); color: #ff6b6b;}
.cmt-msg.ok{display: block; background: rgba(53,195,154,.12); color: var(--th-color-full);}

/* KHÁCH CHƯA ĐĂNG NHẬP. Chỉ ô NHẬP bị thay, danh sách bên dưới vẫn hiện đầy đủ — bình luận là nội
* dung do người dùng viết, giấu sau cổng đăng nhập là vứt bỏ giá trị của chính nó. */
.cmt-login{text-align: center; padding: 26px 20px; margin-bottom: 24px; background: var(--th-color-surface-2); border: 1px dashed var(--th-color-line); border-radius: var(--th-r-md);}
.cmt-login i{font-size: 26px; color: var(--th-color-main); opacity: .9;}
.cmt-login p{margin: 10px 0px 14px; font-size: 14px; color: var(--th-color-text-2);}
.cmt-login-btn{height: 40px; line-height: 40px; padding: 0px 26px; border-radius: 20px; background: var(--th-grad); color: var(--th-on-grad); font-size: 14px; font-weight: 700;}

/* DANH SÁCH */
.cmt-item{padding: 16px 0px; border-bottom: 1px solid var(--th-color-line);}
.cmt-item:last-child{border-bottom: 0px;}
.cmt-body{float: left; width: calc(100% - 52px); margin-left: 12px;}
.cmt-head{margin-bottom: 5px;}
.cmt-name{font-size: 14px; font-weight: 700; color: var(--th-color-text);}
.cmt-time{margin-left: 10px; font-size: 12px; color: var(--th-color-text-2);}
.cmt-text{font-size: 14.5px; line-height: 1.7; color: var(--th-color-text); word-wrap: break-word; overflow-wrap: break-word;}
.cmt-text p{margin-bottom: 8px;}
.cmt-text p:last-child{margin-bottom: 0px;}
/* Link do người dùng dán vào có thể là một chuỗi rất dài không có dấu cách — không cho nó bẻ dòng
* thì nó kéo rộng cả khối và trang cuộn ngang. */
.cmt-text a{color: var(--th-color-main); word-break: break-all;}
.cmt-empty{padding: 26px 0px; text-align: center; font-size: 14px; color: var(--th-color-text-2);}
.cmt-more{display: block; width: 100%; margin-top: 16px; padding: 11px 0px; font-size: 14px; font-weight: 600; color: var(--th-color-text-2); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: var(--th-r-sm);}
.cmt-more:hover{color: var(--th-color-main); border-color: var(--th-color-main);}
.cmt-more:disabled{opacity: .6;}


/* Chip "Chương N" trên mỗi bình luận. Vừa giữ ngữ cảnh (bình luận này nói về đoạn nào) vừa là
* CẢNH BÁO SPOILER: người mới đọc chương 5 nhìn chip "Chương 1350" là biết nên lướt qua.
* Không in chip khi bình luận được viết từ chính chương đang mở — chip trỏ về chỗ đang đứng là thừa. */
.cmt-chip{display: inline-block; margin-left: 10px; padding: 1px 9px; font-size: 11.5px; font-weight: 700; line-height: 18px; color: var(--th-accent-txt); background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); border-radius: 10px; vertical-align: 1px;}
.cmt-chip:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
/* Dòng nhắc ở trang đọc: nói rõ đây là luồng chung của cả truyện, để không ai tưởng mình đang bình
* luận riêng chương này rồi ngạc nhiên khi thấy bình luận của chương khác. */
.cmt-note{margin: -8px 0px 16px; font-size: 13px; line-height: 1.6; color: var(--th-color-text-2);}
.cmt-note b{color: var(--th-color-text);}
/* Ở trang truyện khối này nằm trong thẻ .single-content nên đã có nền + đệm riêng; bỏ vạch kẻ trên
* và khoảng cách của bản dùng trong trang đọc, nếu không là hai lớp viền chồng nhau. */
.cmt-wrap .cmt-box{margin-top: 0px; padding-top: 0px; border-top: 0px;}


/* TRẢ LỜI / SỬA / XOÁ bình luận. */
.cmt-act{margin-top: 7px; font-size: 0px;}
.cmt-act button{font-size: 12.5px; font-weight: 600; color: var(--th-color-text-2); margin-right: 16px;}
.cmt-act button:hover{color: var(--th-color-main);}
.cmt-edited{margin-left: 8px; font-size: 11.5px; font-style: italic; color: var(--th-color-text-2); opacity: .8;}
/* Nhánh trả lời thụt vào ĐÚNG bề ngang ảnh đại diện + máng (40+12) để mép chữ của trả lời thẳng
* hàng với mép chữ của bình luận cha. Chỉ MỘT cấp lồng — trả lời của trả lời vẫn nằm chung nhánh này
* (máy chủ ép comment_parent về gốc), nếu không thì trên màn 360px vài cấp là chữ hết chỗ. */
.cmt-children{margin-left: 52px; margin-top: 10px; border-left: 2px solid var(--th-color-line); padding-left: 14px;}
.cmt-children .cmt-item{padding: 12px 0px; border-bottom: 0px;}
.cmt-children .cmt-item:first-child{padding-top: 0px;}
/* Dải "đang trả lời X" nằm ngay trên ô nhập — chỗ duy nhất người dùng đang nhìn khi gõ. */
.cmt-replying{margin-bottom: 8px; padding: 7px 12px; font-size: 13px; color: var(--th-accent-txt); background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); border-radius: var(--th-r-sm);}
.cmt-replying b{color: var(--th-color-text);}
.cmt-replying button{margin-left: 8px; font-size: 12.5px; font-weight: 700; color: var(--th-color-main); text-decoration: underline;}
/* Ô sửa tại chỗ. */
.cmt-editbox{margin-top: 6px;}
.cmt-editbox .cmt-submit{float: none; display: inline-block; margin-top: 8px; height: 34px; line-height: 34px; padding: 0px 18px; font-size: 13px;}
.cmt-cancel{display: inline-block; margin: 8px 0px 0px 8px; height: 34px; line-height: 32px; padding: 0px 16px; font-size: 13px; font-weight: 600; color: var(--th-color-text-2); border: 1px solid var(--th-color-line); border-radius: 17px;}
.cmt-cancel:hover{color: var(--th-color-main); border-color: var(--th-color-main);}


/* Đoạn bôi đen kèm theo báo lỗi. Giới hạn chiều cao + cuộn: người ta bôi cả màn hình cũng không làm
* vỡ hộp thoại. */
.report-quote{margin-bottom: 12px; padding: 10px 13px; max-height: 90px; overflow-y: auto; font-size: 13px; line-height: 1.6; color: var(--th-color-text-2); background: var(--th-color-surface-2); border-left: 3px solid var(--th-color-main); border-radius: var(--th-r-xs);}
.report-quote span{display: block; margin-top: 4px; color: var(--th-color-text); font-style: italic;}


/* ĐỌC NỐI (A4) — các chương nối thêm. */
.chuong-part{margin-top: 34px;}
/* Vạch phân cách + tên chương: người đọc nối 10 chương liền phải luôn biết mình đang ở chương nào,
* nếu không thì cả buổi đọc thành một khối chữ không mốc. */
.cp-head{text-align: center; margin-bottom: 22px; padding-top: 26px; border-top: 1px solid var(--th-color-line);}
.cp-head .cp-so{display: block; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--th-color-main);}
.cp-head .cp-ten{display: block; margin-top: 6px; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--th-color-text);}
.ed-loading, .ed-end{padding: 22px 0px; text-align: center; font-size: 14px; color: var(--th-color-text-2);}
.ed-end{font-weight: 600;}
.ed-empty{text-align: center; color: var(--th-color-text-2); font-style: italic;}


/* NGHE TRUYỆN — chọn giọng + các mức chỉnh. */
.rp-select{display: block; width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 8px 10px; font-family: var(--th-font-main); font-size: 12.5px; color: var(--th-color-text); background: var(--th-color-surface-2); border: 1px solid var(--th-color-line); border-radius: var(--th-r-xs);}
.rp-select:focus{border-color: var(--th-color-main); outline: none;}
/* Nhãn phụ trong một nhóm: nhỏ hơn .rp-label để thấy rõ đây là mức con của "Nghe truyện". */
.rp-sub{margin: 8px 0px 5px; font-size: 11.5px; font-weight: 600; color: var(--th-color-text-2); opacity: .85;}
/* Cảnh báo máy chưa có giọng tiếng Việt — nói thẳng còn hơn để người dùng nghe một tràng vô nghĩa
* rồi tự kết luận là site hỏng. */
.rp-tts-warn{margin-bottom: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.55; color: var(--th-accent-txt); background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); border-radius: var(--th-r-xs);}
.rp-tts-warn b{color: var(--th-color-text);}


/*
* ================================================================================================
* TRANG KẾT QUẢ TÌM KIẾM
* ================================================================================================
* Ba khối: đầu trang (ô tìm to + lịch sử), thanh lọc (.search-bar dùng chung .sb-* với trang thể
* loại), và danh sách kết quả DẠNG DÒNG (.sr-item) thay cho lưới bìa.
* Vì sao dạng dòng: lý do đầy đủ ở đầu inc/content-truyen-row.php. Tóm tắt — trang này để PHÂN BIỆT
* mấy chục cái tên na ná nhau, việc đó cần chữ chứ không cần bìa to.
*/

/* Ô tìm to ngay dưới H1. Nút nằm ĐÈ LÊN ô (position:absolute) chứ không đứng cạnh: đứng cạnh thì
* phải chia bề ngang cho hai khối float và ô nhập co lại đúng chỗ đang cần rộng nhất. Cùng khuôn với
* .empty-search vốn đã chạy ổn, chỉ khác là ở đây nó luôn có mặt. */
/* NHỊP DỌC CỦA ĐẦU TRANG KẾT QUẢ.
* Ba khối xếp chồng: ô tìm -> dòng "Tìm thấy N truyện" -> thanh sắp xếp. Bản đầu để 8px trên và 4px
* dưới dòng đếm, tức là nó dính gần như bằng nhau vào cả hai bên — mắt không đọc ra được nó thuộc
* về cái nào, và cả cụm trông như bị nén.
* Nay 14px trên / 22px dưới: dòng đếm là CÂU TRẢ LỜI cho thứ vừa gõ trong ô tìm nên phải đứng gần ô
* tìm hơn, còn thanh sắp xếp là một công cụ khác và cần tách ra. Khoảng cách nói quan hệ, không chỉ
* để cho thoáng.
*
* ⚠️ Viết `.page-head.search-head` (0,2,0) chứ KHÔNG phải `.search-head` (0,1,0) — đúng bài học của
* `.home-seo.sec`: css/responsive.css nạp SAU style.css nên bất kỳ rule `.page-head` nào bên đó cũng
* thắng ở mốc của nó, và đệm cũ sẽ mọc lại trên mobile mà không có lỗi nào báo. */
.page-head.search-head{padding-bottom: 22px;}
.page-head.search-head .page-desc{margin-top: 14px;}
.search-hero{position: relative; max-width: 640px; margin-top: 16px;}
.search-hero input{width: 100%; height: 52px; box-sizing: border-box; padding: 0px 118px 0px 22px; font-size: 15px; color: var(--th-color-text); background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: 26px;}
.search-hero input:focus{border-color: var(--th-color-main);}
.search-hero button{position: absolute; top: 6px; right: 6px; height: 40px; padding: 0px 20px; border-radius: 20px; background: var(--th-grad); color: var(--th-on-grad); font-weight: 700; font-size: 14px;}
.search-hero button i{margin-right: 7px;}
/* Hộp gợi ý của ô này neo theo chính ô, không phải theo header — .search-hero là position:relative
* nên .suggest-box (position:absolute) tự bám vào đây. Bề ngang bằng ô thay vì 340px cố định. */
.search-hero .suggest-box{top: 58px; width: 100%;}

/* LỊCH SỬ TÌM GẦN ĐÂY. Do js/custom.js đổ vào từ localStorage — PHP không biết gì về nó (xem ghi
* chú trong search.php). Thuộc tính `hidden` gỡ bằng el.hidden trong JS. */
.sh-recent{margin-top: 14px;}
.sh-recent-lb{display: inline-block; vertical-align: middle; margin: 0px 8px 6px 0px; font-size: 12.5px; color: var(--th-color-text-2);}
.sh-recent a{display: inline-block; vertical-align: middle; margin: 0px 6px 6px 0px; padding: 5px 13px; font-size: 12.5px; color: var(--th-color-text-2); background: var(--th-color-surface-2); border-radius: 999px;}
.sh-recent a:hover{color: var(--th-color-main);}
.sh-recent .sh-wipe{background: none; color: var(--th-color-text-2); opacity: .8;}
.sh-recent .sh-wipe:hover{color: var(--th-color-main-2); text-decoration: underline;}

/*
* THANH LỌC. Tầng 1 (.sb-scroll) là sắp xếp — luôn hiện, đổi nhiều nhất.
* Tầng 2 là khay <details> bung ra. Dùng <details> chứ KHÔNG dùng jQuery: xem lý do ở đầu
* inc/block-search-filter.php (JS hỏng thì toàn bộ bộ lọc bị khoá sau một cái nút chết).
*/
.search-bar{margin-bottom: 20px;}
.sf-panel{margin-top: 10px;}
/* Trình duyệt tự vẽ một mũi tên ▸ trước <summary>. Phải gỡ ở CẢ HAI chỗ: `list-style` cho bản chuẩn,
* `::-webkit-details-marker` cho Safari/iOS cũ vốn không nghe list-style. Thiếu vế thứ hai là trên
* iPhone có hai mũi tên chồng nhau. */
.sf-open{list-style: none; display: inline-block; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--th-color-text-2); background: var(--th-color-surface-2); border-radius: 999px; cursor: pointer; user-select: none;}
.sf-open::-webkit-details-marker{display: none;}
.sf-open:hover{color: var(--th-color-text);}
.sf-open i{margin-right: 8px; font-size: 12px;}
/* Mũi tên tự vẽ: xoay 90 độ khi khay mở. Bám vào [open] của chính <details> nên không cần JS đồng bộ. */
.sf-open:after{content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-left: 9px; font-size: 12px; display: inline-block; transition: transform .2s;}
.sf-panel[open] > .sf-open{color: var(--th-color-text); background: var(--th-accent-bg);}
.sf-panel[open] > .sf-open:after{transform: rotate(180deg);}
/* Số bộ lọc đang bật, in trên chính cái nút — người dùng đóng khay lại vẫn biết mình đang lọc. */
.sf-num{display: inline-block; min-width: 18px; height: 18px; line-height: 18px; margin-left: 8px; padding: 0px 5px; text-align: center; font-size: 11px; font-weight: 800; color: var(--th-on-grad); background: var(--th-grad); border-radius: 9px;}

.sf-body{margin-top: 12px; padding: 18px 20px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-lg);}
.sf-row{padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--th-color-line);}
.sf-row:last-child{padding-bottom: 0px; margin-bottom: 0px; border-bottom: 0px;}
/* Nhãn float trái, khối lựa chọn overflow:hidden để tự ôm phần còn lại — cùng khuôn float của cả
* theme, không Flexbox. Nhãn rộng cố định để 3 hàng thẳng cột nhau. */
.sf-label{float: left; width: 92px; padding-top: 7px; font-size: 13px; font-weight: 700; color: var(--th-color-text-2);}
.sf-opts{overflow: hidden;}
.sf-opts a{display: inline-block; margin: 0px 8px 8px 0px; padding: 6px 13px; font-size: 12.5px; color: var(--th-color-text-2); background: var(--th-color-surface-2); border-radius: 8px;}
.sf-opts a:hover{color: var(--th-color-text);}
.sf-opts a.on{background: var(--th-grad); color: var(--th-on-grad); font-weight: 700;}

/* CHIP ĐANG LỌC — nằm NGOÀI khay nên vẫn thấy khi khay đóng. Mỗi chip gỡ đúng một tiêu chí. */
.sf-chips{margin-top: 12px;}
.sf-chip{display: inline-block; vertical-align: middle; margin: 0px 8px 6px 0px; padding: 6px 13px; font-size: 12.5px; font-weight: 600; color: var(--th-accent-txt); background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); border-radius: 999px;}
.sf-chip:hover{border-color: var(--th-color-main); color: var(--th-color-main);}
.sf-chip i{margin-left: 8px; font-size: 10px; opacity: .8;}
.sf-chips .sf-clear{display: inline-block; vertical-align: middle; margin-bottom: 6px; font-size: 12.5px; color: var(--th-color-text-2);}
.sf-chips .sf-clear:hover{color: var(--th-color-main-2); text-decoration: underline;}

/*
* DÒNG KẾT QUẢ.
*/
.sr-item{padding: 16px 0px; border-bottom: 1px solid var(--th-color-line);}
.sr-item:first-child{padding-top: 4px;}
.sr-item:last-child{border-bottom: 0px;}
/* Bìa float trái, bề ngang CỐ ĐỊNH nên padding-top phải tính tay = 76 × 1.42 = 108px.
* (Không dùng padding-top: var(--th-cover-ratio): phần trăm ăn theo bề ngang khối CHA chứ không phải
* bề ngang chính nó — bẫy bố cục #9.) */
.sr-cover{float: left; width: 76px; padding-top: 108px; margin-right: 16px; border-radius: var(--th-r-sm);}
/* overflow:hidden là thứ tạo BFC để khối chữ không chui xuống dưới bìa. */
.sr-info{overflow: hidden;}
.sr-title{font-size: 17px; font-weight: 700; line-height: 1.35;}
.sr-title a:hover{color: var(--th-color-main);}
.sr-full{display: inline-block; vertical-align: middle; margin-left: 8px; padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--th-full-txt); background: var(--th-full-grad); border-radius: 5px;}
.sr-meta{margin-top: 7px; font-size: 12.5px; color: var(--th-color-text-2);}
.sr-meta span{display: inline-block; margin-right: 16px; white-space: nowrap;}
.sr-meta i{margin-right: 6px; opacity: .75;}
.sr-tags{margin-top: 8px;}
.sr-tags a{display: inline-block; margin: 0px 6px 4px 0px; padding: 3px 10px; font-size: 11.5px; color: var(--th-color-text-2); background: var(--th-color-surface-2); border-radius: 6px;}
.sr-tags a:hover{color: var(--th-color-main);}
/* Giới thiệu cắt ở 2 dòng: 3 dòng thì mỗi kết quả cao gần 200px và màn hình điện thoại chỉ còn chứa
* nổi 2 kết quả — trang kết quả mà phải cuộn để thấy cái thứ ba là hỏng mục đích. */
.sr-intro{margin-top: 9px; font-size: 13px; line-height: 1.6; color: var(--th-color-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.sr-go{margin-top: 11px;}
.sr-btn{display: inline-block; vertical-align: middle; margin: 0px 8px 6px 0px; padding: 7px 15px; font-size: 12.5px; font-weight: 700; color: var(--th-on-grad); background: var(--th-grad); border-radius: 999px;}
.sr-btn i{margin-right: 7px;}
/* Nút thứ hai (tên chương mới nhất) là chữ dài và không đoán được — phải cắt, nếu không nó đẩy
* nguyên hàng xuống dòng trên màn hẹp. */
.sr-btn-ghost{max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--th-color-text-2); background: none; border: 1px solid var(--th-color-line); font-weight: 600;}
.sr-btn-ghost:hover{color: var(--th-color-main); border-color: var(--th-color-main);}

/* Khối "Có phải bạn muốn tìm" khi câu tìm chặt ra rỗng. .sec-title đang float nên BẮT BUỘC có
* .cboth phía sau, nếu không danh sách bên dưới trèo lên cạnh tiêu đề. */
.sr-near{margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--th-color-line);}
.sr-near .sec-title{font-size: 22px;}
.empty-search-state{padding: 44px 20px 30px;}



/*
* TRANG TĨNH / TRANG CHÍNH SÁCH (page.php).
*
* Cột chữ hẹp là CỐ Ý, không phải quên căn full-width: văn bản pháp lý dài mà trải hết 1200px thì
* mỗi dòng hơn 150 ký tự, mắt trượt dòng liên tục khi xuống hàng. ~880px giữ mỗi dòng quanh 90 ký tự.
* Không dùng .home-main-left/right ở đây vì trang chính sách KHÔNG có sidebar — nhét sidebar xếp
* hạng truyện vào cạnh điều khoản sử dụng là lạc quẻ và đẩy cột chữ hẹp thêm một lần nữa.
*/
.page-wrap{max-width: 880px; margin: 0px auto; padding-bottom: 50px;}

/* Mục lục: dựng từ các <h2 id> có sẵn trong nội dung (xem page.php). */
.page-toc{margin: 6px 0px 32px; padding: 20px 24px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-md);}
.page-toc-h{font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--th-color-text-2); margin-bottom: 12px;}
/* counter thay cho list-style vì reset đã tắt list-style toàn site; đánh số bằng counter còn cho
* phép tô màu riêng con số mà không cần thêm thẻ. */
.page-toc ol{counter-reset: toc;}
.page-toc li{counter-increment: toc; margin-bottom: 7px; font-size: 14.5px;}
.page-toc li:last-child{margin-bottom: 0px;}
.page-toc li:before{content: counter(toc) "."; display: inline-block; min-width: 22px; font-weight: 700; color: var(--th-color-main);}
.page-toc a{color: var(--th-color-text-2);}
.page-toc a:hover{color: var(--th-color-main);}

/* Thân bài. */
.page-article{font-size: 15.5px; line-height: 1.85; color: var(--th-color-text-2);}
.page-article p{margin-bottom: 17px;}
.page-article strong{color: var(--th-color-text); font-weight: 700;}
.page-article a{color: var(--th-color-main); text-decoration: underline; text-underline-offset: 2px;}
.page-article a:hover{color: var(--th-color-main-2);}
/* scroll-margin-top: header dính cao ~64px, thiếu dòng này thì bấm mục lục xong tiêu đề bị thanh
* header che mất, người dùng tưởng nhảy sai chỗ. */
.page-article h2{margin: 38px 0px 14px; padding-top: 4px; font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--th-color-text); scroll-margin-top: 90px;}
.page-article h3{margin: 26px 0px 10px; font-size: 17px; font-weight: 700; line-height: 1.45; color: var(--th-color-text); scroll-margin-top: 90px;}
.page-article h2:first-child, .page-article h3:first-child{margin-top: 0px;}
/* Reset của theme tắt list-style toàn site nên phải bật lại TẠI ĐÂY, nếu không mọi danh sách trong
* điều khoản mất hết dấu đầu dòng và đọc như một khối chữ liền. */
.page-article ul, .page-article ol{margin: 0px 0px 17px 22px;}
.page-article ul li{list-style: disc;}
.page-article ol li{list-style: decimal;}
.page-article li{margin-bottom: 9px; padding-left: 4px;}
.page-article li::marker{color: var(--th-color-main);}
.page-article code{padding: 2px 7px; font-size: 13px; font-family: Consolas, Monaco, monospace; color: var(--th-color-text); background: var(--th-color-surface-2); border-radius: var(--th-r-xs); word-break: break-all;}

/* Câu mở đầu: to hơn thân bài một nhịp để trang có điểm bắt mắt, và nó cũng chính là đoạn Google
* hay trích ra làm mô tả. */
.page-article .policy-lead{font-size: 17px; line-height: 1.75; color: var(--th-color-text); padding-left: 16px; border-left: 3px solid var(--th-color-main); margin-bottom: 14px;}
.page-article .policy-meta{font-size: 13px; color: var(--th-color-text-2); margin-bottom: 30px; opacity: .8;}

/* Bảng cookie: overflow-x nằm ở lớp bọc do CSS sinh ra không được, nên chính bảng phải cuộn được —
* trên điện thoại bảng 3 cột chữ dài luôn rộng hơn màn hình và sẽ đẩy ngang cả trang nếu không chặn. */
.page-article .policy-table{width: 100%; margin-bottom: 22px; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto;}
.page-article .policy-table th, .page-article .policy-table td{padding: 11px 14px; text-align: left; border: 1px solid var(--th-color-line); vertical-align: top;}
.page-article .policy-table th{color: var(--th-color-text); font-weight: 700; background: var(--th-color-surface-2); white-space: nowrap;}
.page-article .policy-table code{background: none; padding: 0px; color: var(--th-color-main);}

/* ------------------------------------------------------------------ BÀI VIẾT (blog SEO)
* Thân bài dùng LẠI nguyên .page-wrap / .page-toc / .page-article của trang tĩnh — cùng một việc
* (đọc một bài chữ dài) thì không dựng bộ style thứ hai. Dưới đây chỉ là những thứ trang tĩnh KHÔNG
* có: dòng thông tin, ảnh đại diện, danh sách bài, khối bài liên quan. */
.bv-meta{margin-bottom: 18px; font-size: 13px; color: var(--th-color-text-2);}
.bv-meta span{display: inline-block; margin-right: 16px; white-space: nowrap;}
.bv-meta i{margin-right: 6px; opacity: .75;}
/* Chuyên mục là LINK thật chứ không phải nhãn trang trí: người đọc xong một bài "Top truyện Sủng"
* gần như luôn muốn xem còn bài nào cùng kiểu — cùng lý do với .sr-tags ở dòng kết quả tìm kiếm. */
.bv-cat{display: inline-block; margin-right: 14px; padding: 3px 11px; font-size: 12px; font-weight: 700; color: var(--th-accent-txt); background: var(--th-accent-bg); border: 1px solid var(--th-accent-line); border-radius: 999px;}
.bv-cat:hover{color: var(--th-color-main-2);}

.bv-thumb{margin-bottom: 26px; border-radius: var(--th-r-md); overflow: hidden;}
/* height: auto để ảnh giữ đúng tỉ lệ gốc: thẻ <img> đã mang width/height thật của bản cắt 16:9,
* thiếu dòng này thì trình duyệt lấy chiều cao cứng đó trong khi bề ngang đã co theo cột. */
.bv-thumb img{width: 100%; height: auto; display: block;}

/* --- Danh sách bài (trang hub + trang chuyên mục) --- */
.bv-item{padding: 18px 0px; border-bottom: 1px solid var(--th-color-line);}
.bv-item:first-child{padding-top: 4px;}
.bv-item:last-child{border-bottom: 0px;}
.bv-item-thumb{float: left; width: 190px; margin-right: 18px; border-radius: var(--th-r-sm); overflow: hidden;}
.bv-item-thumb img{width: 100%; height: auto; display: block; transition: transform .3s;}
.bv-item-thumb:hover img{transform: scale(1.05);}
/* overflow: hidden trên khối chữ = cột phải tự ăn phần còn lại cạnh ảnh float, không cần tính
* calc() theo bề rộng ảnh. Cùng khuôn với .sr-info vốn đã chạy ổn. */
.bv-item-info{overflow: hidden;}
.bv-item-title{font-size: 18px; font-weight: 700; line-height: 1.35;}
.bv-item-title a:hover{color: var(--th-color-main);}
.bv-item-meta{margin-top: 8px; font-size: 12.5px; color: var(--th-color-text-2);}
.bv-item-meta span{display: inline-block; margin-right: 14px; white-space: nowrap;}
.bv-item-meta i{margin-right: 6px; opacity: .75;}
/* Cắt 2 dòng: tóm tắt dài ngắn khác nhau giữa các bài, không chặn thì mỗi dòng cao một kiểu và
* danh sách trông như bị xô lệch. */
.bv-item-desc{margin-top: 9px; font-size: 13.5px; line-height: 1.6; color: var(--th-color-text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

/* --- Bài viết mới nhất (trang chủ): lưới 4 cột/hàng, không phải dòng ngang như trang hub. ---
* Mỗi thẻ tự mang margin-right + margin-bottom, khối cha kéo lại đúng 1 gutter — cùng kỹ thuật với
* .tiep-list, đổi số cột ở breakpoint chỉ cần sửa MỘT con số % (xem lý do ở khối "ĐỌC TIẾP"). */
.bv-list.bv-grid{margin: 0px -20px -26px 0px;}
/* Thẻ thành một khối có viền + nền, cao bằng nhau: khung ảnh luôn 16:9 (ảnh cắt cover), bài chưa có ảnh
* thì .bv-item-nothumb tự vẽ một khung 16:9 thay chỗ bằng ::before — nhờ vậy tiêu đề mọi thẻ cùng hàng
* luôn nằm ngang nhau, không thẻ nào trồi lên vì thiếu ảnh. */
.bv-list.bv-grid .bv-item{float: left; width: calc(25% - 20px); margin: 0px 20px 26px 0px; padding: 0px; border: 1px solid var(--th-color-line); border-radius: var(--th-r-md); background: var(--th-color-surface); overflow: hidden; box-sizing: border-box; transition: transform .25s, border-color .2s, box-shadow .25s;}
.bv-list.bv-grid .bv-item:hover{transform: translateY(-4px); border-color: var(--th-color-main); box-shadow: var(--th-shadow);}
.bv-list.bv-grid .bv-item:first-child{padding-top: 0px;}
.bv-list.bv-grid .bv-item-thumb{float: none; display: block; width: 100%; margin: 0px; border-radius: 0px; aspect-ratio: 16 / 9; background: var(--th-color-surface-2);}
.bv-list.bv-grid .bv-item-thumb img{width: 100%; height: 100%; object-fit: cover;}
.bv-list.bv-grid .bv-item-info{overflow: hidden; padding: 14px 16px 16px;}
.bv-list.bv-grid .bv-item-nothumb:before{content: "\f03e"; display: flex; align-items: center; justify-content: center; margin: -14px -16px 14px; aspect-ratio: 16 / 9; font-family: "Font Awesome 5 Free"; font-weight: 400; font-size: 34px; color: var(--th-color-text-2); background: var(--th-color-surface-2);}
.bv-list.bv-grid .bv-item-title{font-size: 15.5px; line-height: 1.4; min-height: 43px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.bv-list.bv-grid .bv-item-meta{margin-top: 12px;}
.bv-list.bv-grid .bv-item-desc{display: none;}

/* --- Cuối bài --- */
.bv-lienquan{margin-top: 40px; padding: 22px 24px; background: var(--th-color-surface); border: 1px solid var(--th-color-line); border-radius: var(--th-r-md);}
.bv-lienquan-h{margin-bottom: 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--th-color-text-2);}
.bv-lienquan li{margin-bottom: 11px; font-size: 14.5px; line-height: 1.5;}
.bv-lienquan li:last-child{margin-bottom: 0px;}
.bv-lienquan a{color: var(--th-color-text);}
.bv-lienquan a:hover{color: var(--th-color-main);}
.bv-lq-date{display: block; margin-top: 3px; font-size: 12px; color: var(--th-color-text-2); opacity: .8;}
.bv-back{margin-top: 28px; font-size: 14px;}
.bv-back a{color: var(--th-color-main);}
.bv-back a:hover{color: var(--th-color-main-2);}

}