@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 */
    .header-search input{width: 170px;}
    .header-search input:focus{width: 200px;}
    /* 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%;}
    .header-nav{display: none; position: fixed; top: calc(70px + var(--th-adminbar)); left: 0px; width: 300px; max-width: 85%; height: calc(100% - 70px - var(--th-adminbar)); background: var(--th-color-surface); border-right: 1px solid var(--th-color-line); padding: 16px; overflow-y: auto; z-index: 96;}
    .header-nav.open{display: block;}
    .header-nav > ul > li{float: none;}
    .header-nav > ul > li > a{height: auto; line-height: 1.4; padding: 14px 8px; border-bottom: 1px solid var(--th-color-line);}
    .header-nav .sub-menu{position: static; width: 100%; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0px; padding: 6px 0px; background: transparent;}
    .header-nav .sub-menu a{width: 50%;}
    .header-nav .sub-menu a:nth-child(3n+3){margin-right: 10px;}
    /* 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. */
    .search-toggle{display: inline-block;}
    .header-search{display: none; position: fixed; top: calc(70px + var(--th-adminbar)); 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: 96;}
    .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;}
    .header-user .btn-login{display: none;}
    .mobile-overlay.show{display: block;}
    /* Đọ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){
    /* 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ữ. */
    .hero-content{width: 100%; float: none; padding-right: 0px;}
    .hero-cover{float: none; width: 156px; margin: 0px 0px 24px;}
    .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;}
    .hero-panel{max-width: 100%;}
    /* 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;}
    .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;}
    /* READER */
    .chuong-content{font-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. */
    .reader.rw-narrow, .reader.rw-normal, .reader.rw-wide{max-width: 100%;}
    .reader-foot .btn-follow, .reader-report{float: none; display: block; width: 100%; text-align: center; box-sizing: border-box;}
    .reader-foot .btn-follow{margin-top: 10px;}
    /* 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;}
    body.reading{padding-bottom: 0px;}
    .back-top{bottom: 74px;}
    body.reading .back-top{bottom: 26px;}
    /* Trang đọc: thanh đáy che mất chữ nên ẩn — trang này đã có cụm điều hướng chương riêng. */
    body.reading .bottom-nav{display: none;}
    /* 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: 84px; transform: none;}
    .reader-panel-box{top: auto; bottom: 56px; right: 12px; transform: none; width: 280px; max-width: calc(100vw - 24px); 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%;}
    .chuong-order{float: none; display: inline-block; margin-top: 10px;}
    .chap-modal-box{padding: 18px;}
    .chap-modal-body{max-height: calc(86vh - 210px);}
    .rank-num{width: 32px; font-size: 22px;}
    .rank-thumb{width: 50px; padding-top: 71px; margin-right: 12px;}
}

@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 */
    .hero-inner{padding: 34px 0px 30px;}
    .hero-title{font-size: 28px; letter-spacing: -.8px;}
    .hero-cover{width: 132px; margin-bottom: 20px;}
    .hero-cover-state{top: 8px; left: 8px; font-size: 10px; padding: 4px 8px;}
    .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;}
    /* SINGLE */
    .truyen-detail-head{padding: 18px;}
    .single-content, .chuong-list-box{padding: 18px;}
    .truyen-detail-actions .btn-read{display: block; margin: 0px 0px 10px; text-align: center;}
    .truyen-detail-actions .btn-follow{display: block; text-align: center;}
    /* 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;}
    .chuong-content{font-size: 17px;}
    /* 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;}
    .chap-modal-box{max-height: 92vh;}
    .chap-modal-body{max-height: calc(92vh - 210px);}
    /* Đ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 */
    .footer-col{width: 100%; padding-right: 0px;}
}

@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ố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;}
}