@media screen and (max-width: 1540px){
    .container{width: 1200px;}
    .truyen-grid .truyen-col{width: calc((100% - 100px) / 6);}
}

@media screen and (max-width: 1340px){
    /* HEADER — ⚠️ SỬA LỖI HEADER CAO GẤP ĐÔI. Đọc trước khi nới lại bất cứ con số nào ở đây.
     * Ở dải 1191-1340px (dưới 1190 thì menu thành ngăn kéo nên hết chuyện), ba khối float của
     * .header-inner cần 167 (logo) + 478 (nav) + 428 (right) = 1073px, trong khi .container ở mốc
     * này chỉ còn 1100 − 20 − 20 padding = 1060px THỰC. Thiếu đúng 13px ⇒ .header-right (float:right)
     * rớt xuống hàng thứ hai. Và vì .header có `backdrop-filter` — thuộc tính này tạo BFC nên nó BAO
     * luôn phần float tràn — chiều cao .header nhảy từ 71px lên 141px.
     * Hậu quả không chỉ ở trang đọc: .main{padding-top: 70px} tính theo header 70px, nên ở đúng dải
     * bề ngang laptop phổ biến nhất, header ĐÈ LÊN đầu nội dung của MỌI trang.
     * Nay bóp ba chỗ cho dư dả: nghỉ 997px, lúc focus ô tìm 1017px — đều dưới 1060px.
     * ⚠️ Ngân sách này tính cho MENU 4 MỤC cấp 1. Thêm mục thứ 5 (~120px) là vỡ lại y hệt; lúc đó
     * phải bóp tiếp padding hoặc hạ mốc ngăn kéo, ĐỪNG chỉ thêm mục rồi thôi. */
    .header-logo{margin-right: 18px;}
    .header-nav > ul > li > a{padding: 0px 11px;}
    .header-search input{width: 150px;}
    /* Ô tìm nở khi focus cũng phải nằm trong ngân sách — nở 200px như cũ là vỡ hàng ngay lúc gõ. */
    .header-search input:focus{width: 170px;}
    /* FEATURED */
    .hero-title{font-size: 46px;}
    .hero-cover{width: 258px; margin-left: 48px;}
    .hero-content{width: calc(100% - 306px);}
    /* BLOCK HOME */
    .container{width: 1100px;}
    .truyen-grid .truyen-col{width: calc((100% - 80px) / 5);}
    .truyen-grid .truyen-col:nth-child(6n+6){float: left; margin-right: 20px;}
    .truyen-grid .truyen-col:nth-child(5n+5){float: right; margin-right: 0px;}
    .truyen-grid .truyen-col:nth-child(n+6){margin-top: 26px;}
}

@media screen and (max-width: 1190px){
    /* HEADER — mobile menu bật ở đây */
    .container{width: 92%;}

    /* ══ NGĂN KÉO MENU ══
     * ⚠️ TẦNG (z-index): ngăn kéo 99 > lớp phủ 98 > .bottom-nav & .reader-bar (97) > .back-top (90),
     * và tất cả nằm DƯỚI .header (100) vì nút hamburger phải bấm được để đóng. Bản cũ để ngăn kéo 96
     * nên thanh điều hướng đáy (97) vẽ ĐÈ lên 58px cuối của ngăn kéo, còn lớp phủ 95 thì không làm
     * tối được nó — mở menu ra là đáy màn hình vẫn sáng nguyên như chưa mở.
     * (Ngoại lệ đã biết, chấp nhận được: .reader-run — nút TTS tròn ở trang đọc — có z-index 98 và
     * đứng sau trong DOM nên vẫn nổi trên lớp phủ. Đổi số của nó dễ làm nó chui xuống .reader-bar.)
     * box-sizing BẮT BUỘC: width 300 + padding 16×2 = 332px thật, tràn máy 360px.
     * overscroll-behavior chặn "cuộn lây": vuốt hết ngăn kéo thì trang nền phía sau chạy theo.
     *
     * ⚠️⚠️ VÌ SAO `position: absolute` CHỨ KHÔNG `fixed`, VÀ VÌ SAO KHÔNG ĐƯỢC DÙNG `100%`:
     * `.header` có `backdrop-filter` (mặt kính). Thuộc tính đó — cùng họ với `filter`/`transform` —
     * biến phần tử thành **containing block cho mọi con `position: fixed`**. Nghĩa là con fixed của
     * header KHÔNG lấy viewport làm mốc nữa mà lấy chính cái header cao 70px.
     * Bản cũ viết `position: fixed; height: calc(100% - 70px - adminbar)` ⇒ `100%` = 70px của header
     * ⇒ chiều cao ngăn kéo = **0**. Đo thật bằng DevTools (iPhone 14 Pro Max): `.sub-menu` bên trong
     * cao 251px mà ngăn kéo chỉ hở một dải ~20px rồi cắt cụt — "menu mobile bị lỗi" chính là đây,
     * lỗi có sẵn từ trước chứ không phải do đợt sửa chip 2 cột.
     * Cách chữa: bỏ hẳn sự phụ thuộc vào `100%`.
     *   - `position: absolute` + `top: 100%`: `absolute` bám phần tử ĐỊNH VỊ gần nhất, mà `.header`
     *     luôn là `position: fixed` ⇒ mốc là header ở MỌI trình duyệt, không phụ thuộc chuyện trình
     *     duyệt có coi `backdrop-filter` là containing block hay không. `top: 100%` = đúng mép dưới
     *     header, tự đúng kể cả khi sau này header đổi chiều cao. Header vốn `fixed` nên ngăn kéo
     *     vẫn dán theo màn hình y như cũ.
     *   - `height: auto` (BẮT BUỘC ghi đè `height: 70px` của rule desktop) + `max-height` tính bằng
     *     `vh` — đơn vị `vh` luôn theo viewport, miễn nhiễm với chuyện containing block là ai.
     *     Dòng `dvh` viết sau làm bản nâng cấp: trên iOS `100vh` tính cả phần thanh địa chỉ đang
     *     che, `dvh` mới là phần nhìn thấy thật. Trình duyệt cũ không hiểu `dvh` sẽ bỏ qua dòng đó.
     * Ngăn kéo giờ cao theo nội dung (không còn kéo dài xuống đáy màn hình) nên thêm bóng + bo góc
     * dưới-phải để nó ra dáng một tấm panel, không phải một mảng nền bị cắt ngang. */
    .header-nav{position: absolute; top: 100%; left: 0px; width: 300px; max-width: 85%; height: auto; max-height: calc(100vh - 70px - var(--th-adminbar)); max-height: calc(100dvh - 70px - var(--th-adminbar)); box-sizing: border-box; background: var(--th-color-surface); border-right: 1px solid var(--th-color-line); border-bottom: 1px solid var(--th-color-line); border-radius: 0px 0px var(--th-r-md) 0px; box-shadow: var(--th-shadow); padding: 12px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; z-index: 99; visibility: hidden; opacity: 0; transform: translateX(-102%); transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s linear, visibility .26s;}
    /* Trượt vào chứ không `display: none → block`: cú bật đột ngột không cho người dùng biết tấm
     * panel này TỪ ĐÂU ra và che mất cái gì. `display` không transition được nên dùng bộ
     * visibility + opacity + transform (visibility nhảy bậc ở cuối nên vẫn không bấm xuyên qua được
     * lúc đang ẩn). -102% để giấu luôn cái bóng đổ bên phải. */
    /* `visibility 0s` lúc MỞ: để transition .26s như lúc đóng thì ngay khoảnh khắc bấm nút nó vẫn còn là
     * `hidden` — phần tử hidden không nhận focus, nên js/custom.js đưa focus vào ngăn kéo là hụt (đo bằng
     * trình duyệt thật). Lúc ĐÓNG vẫn dùng .26s của rule trên để không biến mất trước khi trượt xong. */
    .header-nav.open{visibility: visible; opacity: 1; transform: translateX(0px); transition: transform .26s cubic-bezier(.2,.7,.3,1), opacity .2s linear, visibility 0s;}
    .drawer-account{display: block;}
    /* Mục đang xem: vạch màu vẽ bằng inset box-shadow chứ không phải border-left — border sẽ đẩy
     * chữ lệch sang phải 3px so với các mục còn lại. */
    .header-nav > ul > li.current-menu-item > a, .header-nav > ul > li.current-menu-parent > a, .header-nav > ul > li.current-menu-ancestor > a{background: var(--th-accent-bg); box-shadow: inset 3px 0px 0px var(--th-color-main);}
    .header-nav > ul > li{float: none;}
    /* Hàng cấp 1 cao 13+13+21 = 47px, sát ngưỡng chạm 44px của WCAG 2.5.5. */
    .header-nav > ul > li > a{height: auto; line-height: 1.5; padding: 13px 10px; border-bottom: 1px solid var(--th-color-line);}
    .header-nav > ul > li:last-child > a{border-bottom: 0px;}
    /* Mũi tên là lời hứa "bấm vào tôi xổ ra". Trong ngăn kéo menu con LUÔN mở sẵn nên nó hứa suông. */
    .header-nav > ul > li > a i{display: none;}
    /* Gỡ CẦU NỐI hover của desktop (style.css): ở đây menu con đã mở sẵn nên không có khoảng hở nào để bắc cầu,
     * mà dải vô hình 10px đó lại nằm ĐÈ lên `border-bottom` và lên mục kế tiếp — trên máy cảm ứng, "hover" dính
     * lại sau cú chạm nên nó ăn mất phần trên của mục ngay dưới: bấm "Bảng xếp hạng" lại trúng "Thể loại". */
    .header-nav > ul > li:hover > a:after{display: none;}

    /* ⚠️ MENU CON TRONG NGĂN KÉO — hai lỗi cũ, đọc trước khi sửa lại:
     * (1) `position: static` làm .sub-menu MẤT BFC. Ở desktop nó `position: absolute` nên tự bao được
     *     đám <a> float bên trong; thành static thì float thoát ra ngoài <li>, đè lên các mục kế tiếp
     *     và kéo border-bottom cắt ngang chữ — đây chính là "menu mobile bị vỡ". Đã chữa tận gốc bằng
     *     <div class="cboth"></div> cuối mỗi .sub-menu (inc/nav-menu.php), đúng convention của theme.
     *     ĐỪNG bỏ cái cboth đó đi.
     * (2) `width: 50%` + margin-right 10px kế thừa từ lưới 3 cột = 50%+10px, hai chip KHÔNG vừa một
     *     hàng nên mỗi hàng chỉ còn 1 chip mà vẫn chừa nửa bề ngang trống. Phải trừ đúng nửa máng:
     *     (50% − 5) + 10 + (50% − 5) = 100%.
     * Theo bài học "quét sạch rồi khai lại" (GHICHU mục bẫy bố cục #2): trả lại margin cho 3n+3 của
     * lưới desktop TRƯỚC, rồi mới xoá margin của 2n+2 — thứ tự này quyết định, vì mục thứ 6/12 trúng
     * cả hai luật và luật đứng sau mới thắng. */
    /* (3) ⚠️ max-height + cuộn RIÊNG cho menu con — lỗi mới sinh ra từ đợt "đổ ra tất cả thể loại".
     *     Trong ngăn kéo, menu con LUÔN mở sẵn (không có hover để xổ ra/thu vào). 71 thể loại chia
     *     2 cột = 36 hàng × ~46px ≈ 1650px chen vào GIỮA menu, đẩy "Bảng xếp hạng", "Lọc truyện",
     *     "Hoàn thành" xuống dưới ~1650px cuộn — tức là trên điện thoại, mở menu ra chỉ còn thấy
     *     mỗi danh sách thể loại, ba mục điều hướng chính coi như biến mất.
     *     42vh ≈ 2/5 màn hình: đủ dài để biết đây là một danh sách cuộn được, đủ ngắn để ba mục
     *     dưới vẫn nằm trong tầm cuộn ngắn. overscroll-behavior chặn cuộn lây sang ngăn kéo.
     *     Lưu ý: overflow-y khác 'visible' tự tạo BFC, tức là nó cũng bao được đám float bên trong.
     *     Dù vậy ĐỪNG nhân đó mà bỏ <div class="cboth"></div> ở (1) — cái cboth còn đang gánh cho
     *     cả desktop lẫn trường hợp danh sách ngắn hơn 42vh (không sinh scroll). */
    .header-nav .sub-menu{position: static; width: auto; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0px; border-left: 2px solid var(--th-color-line); border-radius: 0px; margin: 10px 0px 4px 10px; padding: 0px 0px 0px 10px; background: transparent;}
    /* nowrap + ellipsis không chỉ để đẹp: thẻ trong lưới float phải CAO BẰNG NHAU, một tên thể loại
     * dài xuống 2 dòng là hàng dưới "mắc" vào nó và vỡ so le (bẫy bố cục #5). */
    .header-nav .sub-menu a{width: calc(50% - 5px); margin: 0px 10px 8px 0px; padding: 11px 12px; font-size: 13.5px; background: var(--th-color-surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .header-nav .sub-menu a:nth-child(3n+3){margin-right: 10px;}
    .header-nav .sub-menu a:nth-child(2n+2){margin-right: 0px;}

    /* ══ GẬP MENU CON + Ô LỌC THỂ LOẠI (js/custom.js chèn nút, gắn .js-acc lên .header-nav) ══
     * VÌ SAO: kho 70 thể loại mở sẵn = một khối cuộn 42vh nằm GIỮA ngăn kéo — cuộn lồng trong cuộn,
     * vuốt ngăn kéo là ngón tay bị danh sách thể loại "bắt" mất, còn "Bảng xếp hạng / Lọc truyện" thì bị
     * đẩy xuống dưới. Nay đóng sẵn, bấm mũi tên mới xổ ra, kèm ô gõ để lọc thay vì dò 35 hàng chip.
     * Trạng thái gập do JS gắn chứ KHÔNG viết vào PHP — cùng lý lẽ với footer accordion (bẫy bố cục #13):
     * JS lỗi thì menu con vẫn mở sẵn như cũ, không bị khoá sau một nút không phản hồi.
     * Nút gập TÁCH khỏi chữ "Thể loại": chữ vẫn là link tới /truyen/ do người quản trị đặt, không cướp mất.
     * Nút cao 47px = đúng hàng cấp 1 (13+13+21) nên canh khít, không cần canh dọc. */
    .header-nav > ul > li.has-sub > a{padding-right: 52px;}
    .header-nav .sub-toggle{display: block; position: absolute; top: 0px; right: 0px; width: 48px; height: 47px; border-left: 1px solid var(--th-color-line); color: var(--th-color-text-2); font-size: 13px;}
    .header-nav .sub-toggle i{transition: transform .22s;}
    .header-nav > ul > li.open > .sub-toggle{color: var(--th-color-main);}
    .header-nav > ul > li.open > .sub-toggle i{transform: rotate(180deg);}
    .header-nav.js-acc > ul > li.has-sub > .sub-menu{display: none;}
    .header-nav.js-acc > ul > li.has-sub.open > .sub-menu, .header-nav.js-acc > ul > li.has-sub.open > .sub-filter{display: block;}
    /* Ô lọc: canh thẳng mép với cột chip bên dưới (margin-left 10 + border 2 + padding 10 = 22px). */
    .header-nav .sub-filter{position: relative; margin: 10px 0px 0px 22px;}
    .header-nav .sub-filter i{position: absolute; top: 0px; left: 0px; width: 38px; height: 40px; line-height: 40px; text-align: center; font-size: 13px; color: var(--th-color-text-2);}
    .header-nav .sub-filter input{width: 100%; height: 40px; box-sizing: border-box; -webkit-appearance: none; padding: 0px 12px 0px 36px; border: 1px solid transparent; border-radius: var(--th-r-sm); background: var(--th-color-surface-2); color: var(--th-color-text);}
    .header-nav .sub-filter input:focus{border-color: var(--th-color-main); outline: 0px;}
    .header-nav .sub-filter-empty{display: none; padding: 10px 2px 0px; font-size: 13px; color: var(--th-color-text-2);}
    .header-nav .sub-filter.no-match .sub-filter-empty{display: block;}
    /* Đang lọc: thẻ bị ẩn VẪN được nth-child đếm, lưới 2 cột sẽ lệch chỗ lệch chỗ. Nên lúc lọc đổi hẳn
     * sang danh sách một cột — không còn luật cột nào để lệch, và vài kết quả đọc theo dòng cũng dễ hơn.
     * Rule này PHẢI đứng sau hai luật nth-child ở trên (cùng độ đặc hiệu 0,3,1, luật sau thắng). */
    .header-nav .sub-menu.is-filtering a{width: 100%; margin-right: 0px;}
    .header-nav .sub-menu a.is-hide{display: none;}
    /* Trả focus cho ngăn kéo khi mở (js/custom.js) — không cần viền focus cho cả tấm panel. */
    .header-nav:focus{outline: 0px;}

    /* ══ ĐỌC TIẾP (inc/nav-menu.php → drawer_continue) ══
     * Chỉ hiện khi có .has-item: khung rỗng của khách chưa đọc gì thì không có tiêu đề trơ trọi. */
    .drawer-continue.has-item{display: block; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--th-color-line);}
    .drawer-label{overflow: hidden; padding: 2px 10px 6px; font-size: 12px; font-weight: 700; line-height: 20px; letter-spacing: .5px; text-transform: uppercase; color: var(--th-color-text-2);}
    .drawer-label a{float: right; font-weight: 600; letter-spacing: 0px; text-transform: none; color: var(--th-color-main);}
    .drawer-label a i{margin-left: 5px; font-size: 10px;}
    /* Hàng cao ~58px: hai dòng chữ (tên truyện + chương), vượt ngưỡng chạm 44px. Cả hai dòng nowrap vì
     * tên truyện crawl về có khi dài cả câu — xuống dòng là mỗi hàng một chiều cao, khối lởm chởm. */
    .drawer-continue > a{display: block; position: relative; padding: 9px 10px 9px 44px; border-radius: var(--th-r-sm);}
    .drawer-continue > a i{position: absolute; top: 50%; left: 10px; width: 24px; height: 24px; margin-top: -12px; line-height: 24px; text-align: center; border-radius: 50%; font-size: 9px; color: #1a1206; background: var(--th-grad);}
    .drawer-continue > a b, .drawer-continue > a span{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .drawer-continue > a b{font-size: 14px; font-weight: 700; color: var(--th-color-text);}
    .drawer-continue > a span{margin-top: 2px; font-size: 12.5px; color: var(--th-color-text-2);}
    .drawer-continue > a:hover{background: var(--th-color-surface-2);}
    .drawer-continue > a:hover b{color: var(--th-color-main);}
    /* KHOÁ CUỘN TRANG NỀN khi ngăn kéo mở. overscroll-behavior của ngăn kéo chỉ chặn cuộn LÂY từ trong
     * ngăn kéo; vuốt lên lớp phủ tối thì trang phía sau vẫn trôi, đóng menu ra là lạc chỗ đang xem. */
    body.nav-open{overflow: hidden;}

    /* TÌM KIẾM: bản cũ là display:none — trên điện thoại mất hẳn đường tìm truyện. Nay thu về một
     * nút kính lúp, bấm thì thanh tìm trải ngang ngay dưới header.
     * Cùng tầng 99 với ngăn kéo và cùng bám top: hai khối này che nhau nếu mở đồng thời, nên
     * js/custom.js mở cái này thì đóng cái kia. */
    .search-toggle{display: block;}
    /* Cùng cái bẫy containing block ở trên: khối này không dùng `100%` cho chiều cao nên chưa vỡ,
     * nhưng `top: calc(70px + adminbar)` thì ĐANG cộng thừa — mốc đã là header (vốn đã tụt xuống
     * đúng `--th-adminbar` rồi) nên cộng thêm lần nữa là thanh tìm nằm thấp hơn 32-46px, hở một dải
     * trang nền lọt giữa header và thanh tìm. Chỉ thành viên đăng nhập thấy, nên rất dễ lọt. */
    .header-search{display: none; position: absolute; top: 100%; left: 0px; width: 100%; float: none; margin: 0px; padding: 12px 15px; background: var(--th-color-surface); border-bottom: 1px solid var(--th-color-line); box-sizing: border-box; z-index: 99;}
    .header-search.open{display: block;}
    .header-search input, .header-search input:focus{width: 100%;}
    .suggest-box{width: 100%; max-width: 100%; top: 44px;}
    .header-toggle{display: block; float: left;}
    /* Nút mở cũng phải là nút đóng thì người dùng mới biết bấm lại vào đâu. Bám thẳng
     * `aria-expanded` mà js/custom.js vốn đã bật/tắt — không cần thêm class, không cần thêm JS.
     * \f00d là mã glyph fa-times của Font Awesome 5 Free. */
    .header-toggle[aria-expanded="true"] i:before{content: "\f00d";}
    /* ⚠️ ĐỔI VAI HAI NÚT: dưới 1190px chỉ còn chỗ cho MỘT nút, và nút đó là "Đăng nhập".
     * Bản cũ giấu `.btn-login` và giữ `.btn-register` — nghĩa là người quay lại đọc tiếp (đông hơn
     * hẳn người tạo tài khoản mới) phải bấm vào nút mang tên việc khác rồi mò dòng chuyển đổi bé xíu
     * ở đáy popup. Nay ngược lại: nút gradient là Đăng nhập, còn Đăng ký vẫn tới được từ chính popup
     * đó ("Chưa có tài khoản? Đăng ký ngay").
     * Diện mạo bê nguyên từ `.btn-register` (style.css) — CÙNG BỘ KHAI BÁO, nên đổi màu/bo góc/bóng
     * của nút đăng ký thì phải sửa cả ở đây.
     * padding 14px thay vì 20px là để BÙ phần chữ dài thêm: "Đăng nhập" rộng hơn "Đăng ký" khoảng
     * 12px, hẹp hai bên mỗi bên 6px thì ngân sách bề ngang của .header-inner không đổi so với trước
     * — chỗ này rất chật, xem ghi chú ngân sách ở mốc 1340px. */
    .header-user .btn-register{display: none;}
    .header-user .btn-login{padding: 0px 14px; font-weight: 700; color: #1a1206; background: var(--th-grad); border-radius: 20px; box-shadow: 0px 6px 18px rgba(245,150,50,.30);}
    .header-user .btn-login:hover{color: #1a1206; filter: brightness(1.06);}
    .mobile-overlay{display: block; visibility: hidden; opacity: 0; z-index: 98; transition: opacity .22s linear, visibility .22s;}
    .mobile-overlay.show{visibility: visible; opacity: 1;}

    /* ⚠️ Ô NHẬP PHẢI ≥16px TỪ MỐC NÀY TRỞ XUỐNG — KHÔNG hạ xuống 14/15px cho "cân đối".
     * Safari trên iOS tự PHÓNG TO cả trang khi focus vào input/textarea/select có font-size < 16px,
     * và nó không tự thu lại: người dùng gõ xong một chữ là toàn trang lệch, phải chụm tay kéo về.
     * Chrome Android không làm vậy nên lỗi chỉ hiện trên iPhone/iPad — dễ lọt khi test bằng
     * DevTools. Mốc 1190px chính là mốc theme chuyển sang giao diện chạm (iPad ngang 1024px cũng
     * nằm trong đây), và ở mốc này ô tìm của header đã là thanh full-width nên không đụng tới ngân
     * sách bề ngang của thanh header ở mục 1340px. */
    .header-search input,
    .header-nav .sub-filter input,
    .chuong-search input,
    .auth-box input,
    .empty-search input,
    .search-hero input,
    .report-note,
    .cmt-input,
    .rp-select{font-size: 16px;}
    /* Đọc tiếp: 6 cột → 4. Chỉ đổi MỘT con số %, không phải reset gì (xem ghi chú ở style.css). */
    .tiep-item{width: calc(25% - 14px);}
    /* FEATURED */
    .hero-title{font-size: 40px;}
    .hero-cover{width: 218px; margin-left: 40px;}
    .hero-content{width: calc(100% - 258px);}
    .hero-inner{padding: 52px 0px 40px;}
    /* BLOCK HOME */
    .home-main-left{width: 100%; float: none;}
    .home-main-right{width: 100%; float: none; margin-top: 20px;}
    .truyen-grid .truyen-col{width: calc((100% - 60px) / 4);}
    .truyen-grid .truyen-col:nth-child(5n+5){float: left; margin-right: 20px;}
    .truyen-grid .truyen-col:nth-child(4n+4){float: right; margin-right: 0px;}
    .truyen-grid .truyen-col:nth-child(n+5){margin-top: 26px;}
    /* SINGLE */
    .truyen-detail-cover{width: 180px; margin-right: 24px;}
    .truyen-detail-info h1{font-size: 26px;}
    /* FOOTER */
    .footer-col{width: 50%; margin-bottom: 26px;}
}

@media screen and (max-width: 900px){
    /* THANH SẮP XẾP — từ mốc này trở xuống hàng chip dài hơn bề ngang màn hình nên .sb-scroll bắt
     * đầu cuộn thật. Dải mờ bên phải là thứ DUY NHẤT báo "còn nữa, vuốt sang": thanh cuộn đã bị ẩn
     * (xem style.css) và trên iOS thanh cuộn vốn cũng không hiện khi đứng yên.
     * pointer-events: none BẮT BUỘC — dải này phủ lên đúng vùng có nút "Xoá lọc" ở mép phải. */
    .sort-bar:after{content: ''; position: absolute; top: 0px; right: 0px; width: 36px; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0), var(--th-color-bg)); pointer-events: none;}
    /* HEADER */
    .header-logo .brand-mark{width: 36px; height: 36px; border-radius: 12px;}
    .header-logo .brand-word{margin-left: 9px; font-size: 22px;}
    /* FEATURED — bìa KHÔNG ẩn nữa: vì nằm trước trong DOM nên bỏ float là tự lên trên chữ.
     * Nhưng bỏ float HẲN thì bìa 156px nằm một mình trên một hàng rộng cả màn hình: ở 768px là
     * ~590px trống bên phải, và hero dài thêm đúng bằng chiều cao bìa. Ở dải này cột chữ vẫn còn
     * ≥312px (container 92%, bìa 176px + máng 24px) — đo bằng bề rộng chữ thật thì đủ cho cả pill
     * "ĐỀ CỬ NỔI BẬT 3/5" (~246px) lẫn tên truyện dài nhất, nên xếp ngang được. Đổi sang float
     * TRÁI chứ không phải phải: trên màn hẹp mắt đọc từ trái, bìa phải là thứ gặp đầu tiên. */
    .hero-content{width: 100%; float: none; padding-right: 0px;}
    .hero-cover{float: left; width: 176px; margin: 0px 24px 0px 0px;}
    .hero-cover-card{transform: perspective(1300px) rotateY(-6deg);}
    /* Bìa co còn 156px: 2 badge 2 góc sẽ đè nhau → bỏ badge sao, vì điểm đánh giá đã có ở hàng stats. */
    .hero-cover-rate{display: none;}
    .hero-title{font-size: 34px;}
    .hero-inner{padding: 44px 0px 36px;}
    /* Khối CÓ VIỀN + NỀN bắt buộc clear khi bìa đang float: chỉ LINE BOX mới né float, còn hộp
     * thì vẫn trải hết bề ngang — không clear thì nền + viền panel chui xuống dưới bìa. */
    .hero-panel{max-width: 100%; clear: left;}
    /* Dưới 900px thẻ quay lại bề rộng cố định + cuộn ngang (giãn kín chỉ hợp lý khi màn đủ rộng). */
    .hero-rail .hero-pick{width: 178px;}
    /* BLOCK HOME */
    .capnhat-item{width: 100%; float: none; margin-right: 0px;}
    .capnhat-item:nth-child(2n+2){float: none;}
    .truyen-grid .truyen-col{width: calc((100% - 40px) / 3);}
    .truyen-grid .truyen-col:nth-child(4n+4){float: left; margin-right: 20px;}
    .truyen-grid .truyen-col:nth-child(3n+3){float: right; margin-right: 0px;}
    .truyen-grid .truyen-col:nth-child(n+4){margin-top: 22px;}
    /* TAXONOMY */
    .page-head h1{font-size: 24px;}
    /* SINGLE */
    .truyen-detail-cover{float: none; width: 150px; margin: 0px auto 20px;}
    .truyen-detail-info{text-align: center;}
    /* QUẦNG NÚT CHÍNH phải co lại từ mốc này. Giá trị desktop (0 10px 28px) được chỉnh cho bố cục
     * HÀNG NGANG — dưới nút không có gì trong vòng 38px. Từ ≤900px cụm nút bắt đầu xuống dòng, mà
     * khoảng cách giữa hai hàng chỉ 10px, nên đúng cái quầng ấy phủ lên hàng dưới. */
    .truyen-detail-actions .btn-read{box-shadow: 0px 5px 16px rgba(245,150,50,.26);}
    .truyen-detail-stats .stat{float: none; display: inline-block; padding: 0px 16px;}
    .chuong-row{width: 100%;}
    .chuong-row:nth-child(2n+2){padding-left: 0px;}
    /* Lưới 4 cột trong cột nội dung → còn 3. Cùng lối "quét sạch rồi khai lại" như ở style.css:
     * `:nth-child(n)` xoá mọi float của mốc trên, sau đó chỉ khai lại thẻ cuối hàng. */
    .truyen-grid.grid-4 .truyen-col:nth-child(n){float: left; width: calc((100% - 40px) / 3); margin-right: 20px;}
    .truyen-grid.grid-4 .truyen-col:nth-child(3n+3){float: right; margin-right: 0px;}
    .truyen-grid.grid-4 .truyen-col:nth-child(n+4){margin-top: 22px;}
    .bv-list.bv-grid .bv-item{width: calc(50% - 20px);}
    /* READER */
    /* Khai lại BIẾN, không phải font-size của .chuong-content.
     * Viết `.chuong-content{font-size: 18px}` như bản cũ là hỏng: quy tắc đó cùng độ đặc hiệu
     * (0,1,0) với khai báo trong style.css nhưng file này nạp SAU nên nó thắng — và cỡ chữ người
     * dùng tự chọn trong panel ⚙ bị bỏ qua sạch trên điện thoại, đúng nơi cần nó nhất.
     * Qua biến thì thứ tự đúng như mong đợi: người chưa chọn gì → mốc màn hình quyết định; người đã
     * chọn → js/custom.js ghi --th-r-size thành style inline trên <html>, và inline thắng tất cả. */
    :root{--th-r-size: 18px;}
    /* Chiều rộng cột chữ do người dùng chọn chỉ có nghĩa trên màn rộng; dưới đây luôn full. */
    html.rw-narrow .reader, html.rw-normal .reader, html.rw-wide .reader{max-width: 100%;}
    .reader-report{float: none; display: block; width: 100%; text-align: center; box-sizing: border-box;}
    /* Ba nút hành động để tự xuống dòng khi chật thay vì ép mỗi nút một hàng: "Đang theo dõi" +
     * "Đã đánh dấu" + "Chia sẻ" xếp dọc là ăn mất gần 150px cuối chương. */
    .reader-foot-act{float: none; display: block; text-align: center; margin-top: 10px;}
    .reader-foot-act > *{margin: 0px 4px 8px; padding: 0px 14px;}
    /* PAGE */
    .member-tabs a{margin-right: 16px;}
    /* THANH ĐÁY: bật ở đây, và chừa chỗ dưới cùng để nó không đè lên footer. */
    .bottom-nav{display: block;}
    body{padding-bottom: 58px;}
    .back-top{bottom: 74px;}
    /* Trang đọc: thanh đáy chung che mất chữ nên ẩn, và thay bằng .reader-bar — thanh chuyển chương
     * dính đáy. VÌ SAO CẦN: chương trung bình 6.948 ký tự, trên màn 360px là 15-20 màn hình cuộn;
     * không có thanh này thì muốn sang chương sau phải cuộn hết chương mới tới cụm nút dưới, và
     * người cày 50 chương một tối làm đúng động tác đó 50 lần.
     * Nó cao 54px, gần bằng .bottom-nav (58px) mà nó thay chỗ, nên không cộng thêm chiều cao nào. */
    body.reading .bottom-nav{display: none;}
    .reader-bar{display: block;}
    body.reading{padding-bottom: 54px;}
    /* Xếp chồng ở góc dưới phải, tính từ mép trên của .reader-bar (54px):
     * back-top 54+12 = 66px, rồi nút ⚙ 66+46+12 = 124px. Đổi chiều cao .reader-bar là phải tính
     * lại cả hai con số này. */
    body.reading .back-top{bottom: 66px;}
    body.reading .reader-run{bottom: 66px;}
    /* Nút ⚙ đang neo ở giữa cạnh phải (top:50%) — trên màn hẹp, cột chữ chạy sát mép nên nó nằm ĐÈ
     * lên đúng dòng đang đọc. Hạ xuống góc dưới, xếp chồng phía trên nút "lên đầu trang". */
    .reader-panel{top: auto; bottom: 124px; transform: none;}
    /* Ở mốc này panel neo theo ĐÁY (bottom: 56px so với nút ⚙ đang ở bottom: 124px) nên nó nở LÊN
     * TRÊN — trần khác hẳn bản desktop căn giữa, phải tính riêng:
     * 124 (nút) + 56 (khoảng hở) + 70 (header) + 10 (thở) = 260px. */
    .reader-panel-box{top: auto; bottom: 56px; right: 12px; transform: none; width: 280px; max-width: calc(100vw - 24px); max-height: calc(100vh - var(--th-adminbar) - 260px); box-sizing: border-box;}
    .tiep-item{width: calc(33.3333% - 14px);}
    /* Công cụ danh sách chương: xếp dọc cho ô tìm đủ rộng. */
    .chuong-search{float: none; width: 100%;}
    /* Ô tìm chiếm trọn bề ngang, nên hàng dưới chia hai đầu: nhóm sắp xếp bên TRÁI, cặp nút chuyển
     * trang bên PHẢI. Float ngược chiều nhau nên thứ tự trong DOM (nav đứng trước order — bắt buộc
     * cho bản desktop) không còn ảnh hưởng gì ở đây. */
    .chuong-order{float: left; margin-top: 10px;}
    .chuong-nav{float: right; margin-top: 10px; margin-left: 0px;}
    .chap-modal-box{padding: 18px;}
    /* Đệm hộp 22 -> 18 (hai phía) nên phần KHÔNG cuộn bớt đúng 8px. Chỉ ghi đè biến, công thức
     * nằm nguyên ở style.css — xem chú thích tại `.chap-modal` ở đó. */
    .chap-modal{--th-chap-chrome: 272px; --th-chap-chrome-mark: 162px;}
    .rank-num{width: 32px; font-size: 22px;}
    .rank-thumb{width: 50px; padding-top: 71px; margin-right: 12px;}
    /* TÌM KIẾM — bìa nhỏ lại: 68 × 1.42 = 97px (bề ngang cố định nên phải tính tay, bẫy bố cục #9). */
    .sr-cover{width: 68px; padding-top: 97px; margin-right: 14px;}
    .sr-title{font-size: 16px;}
    .sr-btn-ghost{max-width: 200px;}
}

@media screen and (max-width: 590px){
    /* HEADER */
    .container{width: 100%; padding: 0px 15px;}
    .header-logo{margin-right: 0px;}
    .header-logo .brand-mark{width: 34px; height: 34px; border-radius: 11px;}
    .header-logo .brand-word{margin-left: 8px; font-size: 20px;}
    /* FEATURED — dưới mốc này KHÔNG xếp ngang được nữa, và đây là kết luận từ ĐO chứ không phải
     * cảm tính: cạnh bìa 132px trên màn 390px chỉ còn ~212px, trong khi riêng pill
     * "ĐỀ CỬ NỔI BẬT 3/5" đã ~246px, còn tên truyện dài ngốn 5-7 dòng ở cỡ 28px. Mà hero lấy
     * 5 truyện MỚI NHẤT khi ACF hero_list để trống, nên tên dài là chuyện thường ngày chứ không
     * phải trường hợp hiếm.
     *
     * Nên bỏ float, canh GIỮA cả khối đầu — đúng lối trang truyện đơn đã dùng ở mốc 900px
     * (.truyen-detail-cover{margin: 0px auto} + .truyen-detail-info{text-align: center}). Bìa một
     * mình lệch trái giữa một hàng rộng là thứ làm hero mất cân: nó đọc ra "ảnh bị lạc chỗ", còn
     * canh giữa thì khoảng trống hai bên đọc ra "cố ý". */
    .hero-inner{padding: 30px 0px 28px;}
    .hero-content{text-align: center;}
    .hero-title{font-size: 26px; letter-spacing: -.8px;}
    /* Bìa co theo bề ngang thay vì ghim 132px: ở hero nó là NHÂN VẬT CHÍNH, mà 132px trên màn
     * 390px trông đúng bằng một ô thumbnail trong danh sách. Trần 180px để màn 590px không phóng
     * quá cỡ; 46% cho ra 133px ở màn 320px, tức không nhỏ hơn bản cũ ở màn hẹp nhất. */
    .hero-cover{float: none; width: 46%; max-width: 180px; margin: 0px auto 18px;}
    .hero-cover-state{top: 8px; left: 8px; font-size: 10px; padding: 4px 8px;}
    /* Bìa to thêm ~48px chiều cao thì phải trả lại bằng nhịp dọc, nếu không hero đẩy hết truyện
     * xuống dưới màn. Bốn khoảng cách dưới đây gom lại tiết kiệm ~30px. */
    .hero-eyebrow{margin-bottom: 14px;}
    .hero-meta{margin-top: 14px;}
    /* Panel giữ chữ CANH TRÁI: bên trong là hàng số liệu 3 cột + dòng "Mới nhất" dạng danh sách —
     * canh giữa những thứ đó thì mỗi dòng một mép, đọc rối hơn hẳn khối chữ ở trên. */
    .hero-panel{margin-top: 18px; text-align: left;}
    .hero-actions{margin-top: 18px;}
    .hero-tagline{font-size: 17px;}
    .hero-stats{padding: 14px 16px;}
    .hero-stat b{font-size: 18px;}
    /* Phải là dấu > : .hero-stat span sẽ trúng luôn cả <span> bọc số điểm bên trong <b>. */
    .hero-stat > span{font-size: 10px; letter-spacing: .8px;}
    .hero-latest{padding: 11px 34px 11px 16px; white-space: normal;}
    /* Hết chỗ cho calc() trừ 205px → bỏ trần, để cả cụm tự xuống dòng theo bề ngang thật.
     * Mỗi phần vẫn nowrap nên không bị bẻ giữa tên chương hay giữa mốc thời gian. */
    .hero-latest-link{max-width: 100%;}
    .hero-latest-time{white-space: nowrap;}
    .hero-actions .btn-read{display: block; text-align: center; margin-right: 0px; padding: 0px 24px; font-size: 15px;}
    .hero-actions .btn-follow{display: block; text-align: center;}
    .hero-picker{padding-top: 26px;}
    .hero-picker-label{font-size: 10.5px; letter-spacing: 1.2px;}
    /* Cùng độ đặc hiệu với rule 900px ở trên, nếu để .hero-pick trơn sẽ bị rule kia đè. */
    .hero-rail .hero-pick{width: 162px;}
    /* BLOCK HOME */
    .sec{padding: 34px 0px;}
    .sec-title{font-size: 22px;}
    .truyen-grid .truyen-col{width: calc((100% - 20px) / 2);}
    .truyen-grid .truyen-col:nth-child(3n+3){float: left; margin-right: 20px;}
    .truyen-grid .truyen-col:nth-child(2n+2){float: right; margin-right: 0px;}
    .truyen-grid .truyen-col:nth-child(n+3){margin-top: 20px;}
    .bv-list.bv-grid .bv-item{width: calc(100% - 20px);}
    /* SINGLE */
    .truyen-detail-head{padding: 18px;}
    .single-content, .chuong-list-box{padding: 18px;}
    /* CẢ BA loại nút cùng thành block full-width. Bản cũ chỉ đổi .btn-read và .btn-follow, BỎ SÓT
     * .btn-ghost nên "Đọc từ đầu" / "Chương mới nhất" vẫn là inline-block => ba bề rộng khác nhau
     * chen trong cùng một cụm, hàng thì full hàng thì đôi.
     * Xếp dọc đều nhau là cách duy nhất đúng với MỌI số nút (cụm này có 1 đến 4 nút tuỳ trạng thái),
     * và cũng là cách cho vùng chạm rộng nhất trên điện thoại.
     * Lề âm ngang của khối cha phải trả về 0px: nút width:100% mà cha còn thò ra -5px mỗi bên thì
     * nút rộng hơn khung đúng 10px và lòi khỏi mép thẻ. */
    /* Lề 10px (không phải 8px): xếp dọc full-width thì hàng xóm nằm ngay dưới suốt chiều ngang, nên
     * cụm nút cần thở hơn. Lề âm của khối cha phải đổi CÙNG con số — lệch nhau là dôi/hụt đúng
     * chừng ấy px trước phần Giới thiệu. */
    .truyen-detail-actions{margin: 0px 0px -10px;}
    .truyen-detail-actions .btn-read,
    .truyen-detail-actions .btn-ghost,
    .truyen-detail-actions .btn-follow{display: block; width: 100%; box-sizing: border-box; margin: 0px 0px 10px; text-align: center;}
    /* Quầng co tiếp: ở đây nút chính đã là dải gradient chạy hết bề ngang — tự nó đã đủ nặng để
     * đứng đầu thứ bậc, không cần quầng gánh thêm việc đó. Tầm với còn 13px so với lề 10px, tức
     * chỉ còn một viền sáng mỏng ôm sát nút thay vì trùm lên nút kế tiếp. */
    .truyen-detail-actions .btn-read{box-shadow: 0px 3px 10px rgba(245,150,50,.22);}
    /* PHÂN TRANG MỤC LỤC — đổi hẳn bố cục trên điện thoại.
     *
     * Desktop nhả tới 11 ô cho truyện 27 trang (‹ 1 … 12 13 [14] 15 16 … 27 ›) ≈ 484px: màn 360px
     * phải xuống 2-3 hàng, và tệ hơn là hai mũi tên ‹ › trông Y HỆT các ô số nên không ai nhận ra
     * đó là nút chuyển trang. Tính năng có sẵn nhưng vô hình.
     *
     * Mobile đổi sang 3 phần bằng nhau: [‹ Trước] [Trang X / Y] [Sau ›]. Vùng chạm mỗi bên rộng
     * gấp ~2,5 lần ô cũ, và vị trí hiện tại nói bằng chữ thay vì phải dò ô nào đang tô màu.
     *
     * Dải số ẩn bằng display:none, KHÔNG lược ở PHP — xem lý do (SEO) trong chapter_pager().
     * Thứ tự trong DOM đã là prev → info → nums → next nên không cần float, chỉ cần cho nums biến mất.
     *
     * calc(33.333% - 6px) khớp với margin ngang 3px mỗi bên: 3 phần + 18px lề = đúng 100%. Đổi lề
     * mà quên đổi con số 6px là hàng bị tràn xuống dòng. */
    .chuong-pager .cp-nums{display: none;}
    .chuong-pager .cp-prev,
    .chuong-pager .cp-next,
    .chuong-pager .cp-info{display: inline-block; width: calc(33.333% - 6px); margin: 0px 3px; box-sizing: border-box; vertical-align: top;}
    .chuong-pager .cp-info{height: 38px; line-height: 36px; font-size: 12.5px; color: var(--th-color-text-2); text-align: center;}
    .chuong-pager .cp-info b{color: var(--th-color-text); font-weight: 700;}
    .cp-txt{display: inline; margin: 0px 5px;}
    /* READER — máng lề phải khớp .container (15px), không phải 16px: lệch 1px thì chữ trong trang
     * đọc không thẳng cột với logo/breadcrumb/footer ở cùng màn hình. */
    .reader{padding: 20px 15px 50px;}
    /* Khai lại BIẾN chứ không phải font-size — xem ghi chú ở mốc ≤900. */
    :root{--th-r-size: 17px;}
    .reader-title .rh-chuong{font-size: 22px;}
    .chuong-jump a{padding: 0px 11px; margin: 4px 2px;}
    /* Ủng hộ: màn 360px không đủ chỗ cho QR 110px nằm cạnh chữ — đưa QR lên đầu, canh giữa. */
    .donate-box{padding: 18px 15px;}
    .donate-qr{float: none; margin: 0px auto 12px;}
    /* Canh giữa cho cùng trục với QR vừa đưa lên giữa ở trên. */
    .donate-body{padding-right: 0px; text-align: center;}
    /* Nút × nằm trên chữ tiêu đề khi canh giữa — chừa hai lề bằng nhau cho nó. */
    .donate-title{padding: 0px 28px;}
    /* Bảng điều khiển nổi bám hai mép cho khỏi tràn trên màn 360px. */
    .reader-run{left: 12px; right: 12px; transform: none; text-align: center; padding: 7px 8px;}
    .reader-run .rr-label{margin-right: 8px;}
    /* Nhịp trước footer: cùng con số với .sec ở mốc này (34px). */
    .main{padding-bottom: 34px;}
    .reader-nav a, .reader-nav .r-list{padding: 0px 14px; font-size: 13px; margin: 3px;}
    .truyen-grid.grid-4 .truyen-col:nth-child(n){float: left; width: calc((100% - 20px) / 2); margin-right: 20px;}
    .truyen-grid.grid-4 .truyen-col:nth-child(2n+2){float: right; margin-right: 0px;}
    .truyen-grid.grid-4 .truyen-col:nth-child(n+3){margin-top: 20px;}
    /* PAGE */
    .auth-box{padding: 24px;}
    .report-box{padding: 22px;}
    /* Màn hẹp thì hộp được cao hơn. Phần không cuộn giữ nguyên như mốc 900px (đệm vẫn 18px),
     * nên ở đây chỉ nâng TRẦN, không đụng tới --th-chap-chrome. */
    .chap-modal{--th-chap-max: 92vh;}
    /* Điểm + 5 sao chỉ chiếm ~250px nên vẫn nằm chung một hàng được kể cả ở 380px — bản trước cho
     * xuống dòng là thừa, làm khối đánh giá cao thêm một dòng vô ích. Chỉ thu nhỏ sao lại. */
    .rate-score{margin-right: 16px;}
    /* Sao nhỏ lại 34→30px nên tâm cụm sao cao hơn tâm số điểm 2px; bù lại bằng margin-top (gốc 2px). */
    .rate-stars{margin-top: 4px;}
    .rate-star{width: 30px; height: 30px; font-size: 18px;}
    .tiep-item{width: calc(50% - 14px);}
    .empty-state .e404{font-size: 68px;}
    .empty-state h1, .empty-state h2{font-size: 21px;}
    .empty-search input{padding-right: 20px;}
    .empty-search button{position: static; display: block; width: 100%; margin-top: 10px; height: 46px;}
    .rank-meta span{display: block; margin: 0px 0px 3px;}
    /* FOOTER — GẬP LẠI THÀNH ACCORDION.
     *
     * Từ mốc này 4 cột nằm chồng nhau: khối thương hiệu + 17 link = ~600px chiều cao mà người dùng
     * phải vuốt hết mới tới dòng bản quyền. Footer là vùng có tỉ lệ chạm thấp nhất trang, không
     * đáng chiếm gần một màn hình. Nay chỉ còn 3 hàng tiêu đề, ai cần thì bấm mở.
     *
     * Cột ĐẦU (logo + mô tả) cố ý KHÔNG gập: nó là phần duy nhất nói site này là gì, gập đi thì
     * footer chỉ còn 3 chữ trơ trọi, không đọng lại gì.
     *
     * Trạng thái gập nằm sau class .acc do JS gắn lúc chạy (xem custom.js), KHÔNG viết cứng ở đây:
     * JS lỗi hoặc chưa kịp chạy thì footer mở đủ như cũ — không có chuyện link bị khoá vĩnh viễn
     * sau một cái nút không bấm được. Và panel đóng bằng max-height chứ không display:none, nên
     * link vẫn nằm trong DOM cho Google đọc. */
    .footer{padding-top: 30px;}
    .footer-col{width: 100%; padding-right: 0px; margin-bottom: 0px;}
    /* Cột thương hiệu không gập nên tự lo khoảng thở dưới; 3 cột còn lại đã có vạch kẻ làm việc đó. */
    .footer-col:first-child{margin-bottom: 16px;}
    .footer.acc .footer-col + .footer-col{border-top: 1px solid var(--th-color-line);}
    .footer.acc .footer-col h4{margin-bottom: 0px;}
    /* CẢ HÀNG là vùng chạm (block + min-height 50px), không phải mỗi mấy chữ tiêu đề cao 20px —
     * đó là lý do nút được đặt width:100% ngay từ style.css. padding-right 34px chừa chỗ cho mũi
     * tên neo tuyệt đối bên phải, không thì chữ tiêu đề dài sẽ chui xuống dưới nó. */
    .footer.acc .footer-h-btn{position: relative; padding: 15px 34px 15px 0px; min-height: 50px; box-sizing: border-box; cursor: pointer;}
    .footer.acc .footer-h-btn .fa-chevron-down{display: block; position: absolute; top: 50%; right: 4px; margin-top: -7px; font-size: 13px; color: var(--th-color-text-2); transition: transform .25s ease;}
    .footer.acc .footer-col.open .footer-h-btn .fa-chevron-down{transform: rotate(180deg);}
    /* Đóng/mở bằng max-height để có chuyển động (height:auto không transition được). Trần 520px
     * phải LỚN HƠN cột dài nhất — "Chính sách" hiện 6 dòng ≈ 260px. Cột này nay do MENU sinh ra
     * (Giao diện → Menu → Menu chính sách), nên người quản trị thêm mục là chiều cao tăng theo mà
     * không ai đụng tới CSS: thêm quá ~11 mục là danh sách bị cắt cụt lúc mở, và KHÔNG có lỗi nào
     * báo — chỉ đơn giản là mấy link cuối biến mất. Lúc đó nâng trần này lên. */
    .footer.acc .footer-acc{max-height: 0px; overflow: hidden; transition: max-height .28s ease;}
    .footer.acc .footer-col.open .footer-acc{max-height: 520px;}
    /* Link trong panel đổi sang block + padding dọc: vùng chạm cao 38px thay vì 20px như dòng chữ
     * trần, và trải hết bề ngang nên không cần ngắm trúng chữ. */
    .footer.acc .footer-col ul{padding-bottom: 6px;}
    .footer.acc .footer-col ul li{margin-bottom: 0px;}
    .footer.acc .footer-col ul li a{display: block; padding: 9px 0px;}
    /* Footer đã ngắn lại nên khoảng cách 34px trước dòng bản quyền thành hở quá đà. */
    .footer.acc .footer-bottom{margin-top: 0px;}

    /* TÌM KIẾM */
    /* Nút "Tìm" bỏ chữ, còn mỗi kính lúp: ở 360px, chữ "Tìm" ăn ~46px của chính cái ô nhập đang cần
     * rộng. Icon một mình vẫn hiểu được vì nó nằm trong một ô tìm kiếm, và người dùng nhấn Enter
     * nhiều hơn là bấm nút. */
    .sh-txt{display: none;}
    .search-hero input{height: 48px; padding-right: 62px;}
    .search-hero button{padding: 0px 18px;}
    .search-hero button i{margin-right: 0px;}
    .search-hero .suggest-box{top: 54px;}
    /* Màn hẹp thì cùng một khoảng hở trông rộng hơn (ít nội dung cạnh nó để so), nên rút bớt —
     * vẫn giữ đúng tỉ lệ "gần ô tìm hơn, xa thanh sắp xếp hơn" của bản desktop. */
    .page-head.search-head{padding-bottom: 18px;}
    .page-head.search-head .page-desc{margin-top: 12px;}
    /* 58 × 1.42 = 82px. */
    .sr-cover{width: 58px; padding-top: 82px; margin-right: 12px;}
    .sr-item{padding: 14px 0px;}
    .sr-title{font-size: 15.5px;}
    .sr-meta span{margin-right: 12px;}
    .sr-intro{font-size: 12.5px;}
    .sr-btn-ghost{max-width: 150px;}
    .sr-near .sec-title{font-size: 19px;}
    /* Nhãn bộ lọc bỏ float: 92px nhãn + chip trên màn 360px thì mỗi hàng chip chỉ còn ~200px, chip
     * dài như "500 – 1000 chương" tự xuống dòng một mình. Xếp dọc thì chip được trọn bề ngang. */
    .sf-label{float: none; width: auto; padding-top: 0px; margin-bottom: 9px;}
    .sf-body{padding: 15px 14px;}

    /* TRANG TĨNH / CHÍNH SÁCH — cột chữ đã tự hẹp theo container, chỉ cần hạ nhịp tiêu đề.
     * H2 22px trên màn 360px chiếm gần trọn 2 dòng cho một tiêu đề mục, đọc thành "vách chữ". */
    .page-article{font-size: 15px;}
    .page-article h2{margin-top: 30px; font-size: 19px;}
    .page-article h3{font-size: 16px;}
    .page-article .policy-lead{font-size: 16px; padding-left: 13px;}
    .page-toc{padding: 16px 17px; margin-bottom: 26px;}

    /* BÀI VIẾT — ảnh bỏ float, xếp trên tiêu đề. Giữ float ở mốc này thì cột chữ còn ~150px trên
     * màn 360px, tiêu đề bài SEO (vốn dài 8-12 chữ) tự bẻ thành 5-6 dòng cao hơn cả ảnh. */
    .bv-item-thumb{float: none; width: 100%; margin: 0px 0px 12px;}
    .bv-item-title{font-size: 16.5px;}
    .bv-lienquan{padding: 18px 17px;}
}

@media screen and (max-width: 400px){
    /* HEADER — máy nhỏ (SE/360px): bỏ chữ, giữ mark cho khỏi tràn hàng. */
    .header-logo .brand-word{display: none;}
    /* Máy 320px: [Cũ nhất|Mới nhất] ~160px + [‹ 14/27 ›] ~118px + lề đã sát mép. Bỏ số trang, giữ
     * hai mũi tên — thanh phân trang dưới đáy vẫn nói "Trang X / Y" đầy đủ. */
    .cn-info{display: none;}
    /* Lưới 2 cột ở mốc này còn ~135px/bìa: thẻ mang ĐỦ hai dấu (FULL trái + HOT phải) chỉ hở vài px
     * ở giữa. Bóp padding + giãn chữ cho hai dấu tách hẳn nhau. Thẻ một dấu giữ nguyên kích thước. */
    .cover-2badge .badge{padding: 0px 8px; letter-spacing: .5px;}
    .cover-2badge .badge.full{padding-left: 7px;}
}

/* Mốc 782px là của CHÍNH WordPress (dưới đó #wpadminbar cao 46px và chuyển sang position:absolute),
 * KHÔNG phải breakpoint bố cục thứ 6 của theme — nó chỉ bù chiều cao thanh quản trị, không đụng lưới. */
@media screen and (max-width: 782px){
    body.admin-bar{--th-adminbar: 46px;}
    /* Dưới mốc này thanh quản trị cuộn theo trang, nên khi đã cuộn header phải trở về sát đỉnh.
     * Đặt lại token ngay trên .header để menu mobile + thanh tìm kiếm bên trong ăn theo luôn. */
    body.admin-bar .header.is-stuck{--th-adminbar: 0px;}
}

/* Tôn trọng cài đặt "giảm chuyển động" của hệ điều hành: với người bị say chuyển động, panel trượt
 * ngang qua màn hình là thứ gây khó chịu thật. Không phải breakpoint bố cục thứ 6. */
@media screen and (prefers-reduced-motion: reduce){
    .header-nav, .header-nav.open, .mobile-overlay, .header-nav .sub-toggle i{transition: none;}
}