/*
Theme Name: Thời Quang
Version: 2.0.0
Description: Giao diện truyện và audio WordPress, xây dựng lại từ PHP hiện có.
Text Domain: thoi-quang
*/
:root{--blue:#2769df;--pale:#eaf3ff;--pink:#e96fa7;--pink-light:#fff0f7;--ink:#26324d;--muted:#78849d;--card:#fff;--line:#f0e2ec;--shadow:0 7px 24px rgba(103,83,137,.08)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(120deg,#f7faff 0%,#fff9fd 48%,#f9f5ff 100%);font-family:'Nunito',Arial,sans-serif;color:var(--ink);line-height:1.55;overflow-x:hidden}
a{color:inherit;text-decoration:none}a:hover{color:var(--pink)}img,svg{max-width:100%}img{display:block;height:auto}button,input,textarea,select{font:inherit}button{cursor:pointer}input,textarea,select{max-width:100%}h1,h2,h3,p{overflow-wrap:break-word}.wrap{width:100%;max-width:1350px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}.mobile-only{display:none}.desktop-only{display:initial}
/* Header cũ, dùng khi PHP có các class này */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e9e7f3}.head-inner{display:flex;align-items:center;gap:20px;min-height:70px}.brand{display:flex;align-items:center;gap:9px;min-width:200px}.bunny{font-size:30px}.brand-name{font:italic 700 24px Georgia,serif;color:#3971d3}.brand small{display:block;font-size:10px;letter-spacing:.5px;color:var(--muted)}.nav{display:flex;align-items:center;gap:14px;flex:1;font-size:13px}.nav a{padding:10px 3px}.site-header .search{display:flex;align-items:center;border-radius:25px;background:#f4f6fc;overflow:hidden}.site-header .search input{width:165px;padding:10px;border:0;background:transparent;outline:0}.site-header .search button,.iconbtn{border:0;background:transparent;padding:8px 10px}.login{background:#3974db;color:white;border-radius:25px;padding:10px 16px;font-size:13px}
/* Trang chủ: banner + nội dung + cột xếp hạng */
.layout{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(275px,1fr);gap:15px;margin-top:16px;align-items:start}.maincol,.sidecol{min-width:0}.panel{background:var(--card);border:1px solid rgba(237,220,234,.8);border-radius:16px;padding:15px;margin-bottom:15px;box-shadow:var(--shadow);min-width:0}.hero-panel{padding:0;overflow:hidden}.hero{height:275px;position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(115deg,#d5e6ff,#fce0ee)}.hero img,.hero-slide img{width:100%;height:100%;object-fit:cover}.hero-slide{position:absolute;inset:0}.hero-fallback{display:grid;place-items:center;width:100%;height:100%;font:700 32px Georgia,serif;color:white;text-shadow:0 2px 8px #6075a2}.hero-controls{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:7px;z-index:5}.dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#ffffffa8}.dot.active{background:#ee6da7}.dng-hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;display:grid;place-items:center;width:32px;height:38px;border:0;border-radius:9px;background:#ffffffba;color:#44516c}.dng-hero-nav.prev{left:9px}.dng-hero-nav.next{right:9px}
/* Thanh thể loại */
.cats{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:9px}.cat{text-align:center;font-size:12px}.cat-icon{width:45px;height:45px;margin:0 auto 7px;display:grid;place-items:center;background:#fff0f8;border-radius:13px;font-size:24px}.dng-category-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dng-category-bar::-webkit-scrollbar{display:none}.dng-category-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;padding:9px 12px;border-radius:10px;background:#fff4f9;border:1px solid #f9e3ed;color:#63496d;font-size:12px;font-weight:700;transition:background .2s,color .2s}.dng-category-pill:hover{background:#ffe5f1;color:#ce4c89}.dng-category-pill svg{width:17px;height:17px;flex:0 0 17px}
/* Tiêu đề khu vực */
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 13px}.section-title h2{font-size:19px;font-weight:800;line-height:1.3;margin:0;color:#433451}.section-title a{font-size:12px;white-space:nowrap;color:#d85895;background:#fff0f7;padding:8px 12px;border-radius:22px}.section-title a:hover{background:#ffe0ef}
/* Thẻ truyện dùng bởi functions.php / dng_card */
.books{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.book,.thoiquang-story-card{display:block;min-width:0;overflow:hidden;border-radius:12px;background:#fff;border:1px solid #f0e7ef;box-shadow:0 2px 10px rgba(83,67,112,.06);transition:transform .2s,box-shadow .2s}.book:hover,.thoiquang-story-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(99,72,119,.12)}.cover,.thoiquang-story-cover{position:relative;display:block;width:100%;aspect-ratio:3/4;overflow:hidden;background:linear-gradient(130deg,#eaf0ff,#ffe4f1)}.cover img,.thoiquang-story-cover img{display:block;width:100%;height:100%;object-fit:cover}.thoiquang-cover-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#dbe8fc,#fce4ef)}.thoiquang-story-labels{position:absolute;inset:auto 5px 5px 5px;display:flex;gap:4px;flex-wrap:wrap;pointer-events:none}.status,.thoiquang-audio-label{display:inline-flex;align-items:center;padding:3px 6px;border-radius:5px;background:#e76fa7;color:#fff;font-size:10px;line-height:1.3;font-weight:700}.thoiquang-audio-label{background:#4c77cf}.book-info,.thoiquang-story-info{padding:8px 8px 9px}.book-name,.thoiquang-story-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:13px;font-weight:800;line-height:1.45;min-height:38px;color:#34415b}.stats,.thoiquang-story-stats{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:#8490a6}.thoiquang-rating{display:inline-flex;align-items:center;gap:4px}.thoiquang-rating-star{width:15px;height:15px;flex:0 0 15px}
/* Truyện full và đề xuất */
.full-panel .books,.recommend-panel .books{grid-template-columns:repeat(5,minmax(0,1fr))}.dng-full-carousel{min-width:0;position:relative}.dng-full-carousel .books{min-width:0}.full-panel .book,.recommend-panel .book{height:100%}
/* Xếp hạng trang chủ */
.ranking{display:grid;gap:8px}.ranking-panel{min-width:0}.tabs{display:flex;gap:3px;padding:3px;border-radius:12px;background:#f9f1f8;margin-bottom:13px}.tabs button{flex:1;min-width:0;border:0;background:transparent;padding:9px 4px;font-size:12px;color:#725f7b;border-radius:9px}.tabs button.active{background:#fce1ef;color:#b83d7a;font-weight:800}.rank-row{display:flex;align-items:center;gap:9px;min-width:0;padding:5px 2px;border-radius:9px;font-size:12px}.rank-row:hover{background:#fff3f9}.rank-num{flex:0 0 30px;display:grid;place-items:center;min-height:29px;background:#edf0f7;color:#6e7992;border-radius:7px;font-weight:800}.rank-row:nth-child(1) .rank-num{background:#ffdd8a;color:#915a15}.rank-row:nth-child(2) .rank-num{background:#d9dce8;color:#60677d}.rank-row:nth-child(3) .rank-num{background:#f5cfb1;color:#9a5d38}.rank-row img,.dng-rank-thumb,.rank-row .placeholder{display:block;flex:0 0 46px;width:46px;height:52px;object-fit:cover;border-radius:7px;background:#f0e7f2}.rank-row .text{flex:1;min-width:0}.rank-row strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px}.rank-row small{display:block;color:var(--muted);margin-top:4px;font-size:11px}
/* Các khối truyện khác */
.updates{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.update{min-width:0}.update img,.update .placeholder{width:100%;aspect-ratio:1.8;object-fit:cover;border-radius:8px;background:#f1e9f6}.update strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.4;margin-top:7px}.update small,.side-update small{display:block;color:var(--muted);font-size:11px;margin-top:5px}.side-updates{display:grid;gap:10px}.side-update{display:flex;align-items:center;gap:10px;font-size:12px}.side-update img,.side-update .placeholder{flex:0 0 65px;width:65px;height:65px;object-fit:cover;border-radius:8px;background:#f0e8f4}.side-update .details{min-width:0}.side-update strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.4}.tags{display:flex;flex-wrap:wrap;gap:7px}.tags a{padding:8px 12px;background:#fff0f7;color:#c85b90;border-radius:20px;font-size:12px}.promo{margin-bottom:14px;padding:20px;text-align:center;border-radius:15px;background:linear-gradient(110deg,#e4edff,#ffe5f1);color:#97609b;font:italic 24px Georgia,serif}.dng-draw-hot-row{min-width:0}.hot-panel .books{grid-template-columns:repeat(4,minmax(0,1fr))}.hot-panel .book{min-width:0}.empty{padding:20px;color:var(--muted)}
/* Footer */
.footer{text-align:center;padding:26px 15px;color:#8d7897;font-size:13px}.bottom-nav{display:none}.mobile-menu{display:none}
/* Các trang đọc truyện và trang chuyên biệt đã có CSS riêng trong PHP.
   Bổ sung các quy tắc nền tảng, không phá bố cục đặc thù. */
.dng-story-page,.ntl-shell,.thoiquang-ranking,.dncs-results{min-width:0}.dng-story-page img,.ntl-shell img,.thoiquang-ranking img,.dncs-results img{max-width:100%}.dng-story-page .dng-summary,.dng-story-page .dng-comments{overflow-wrap:anywhere}.dng-story-page .dng-audio-section{min-width:0}.dng-story-page .dng-player{max-width:100%}.dng-story-page .dng-comment-compose textarea{width:100%}.dng-story-page .dng-related-carousel{max-width:100%}
/* Chế độ tối từ footer.php: class dng-dark */
body.dng-dark,body.dark{--ink:#e9efff;--muted:#acb7d0;--card:#1d2940;--line:#3b4259;background:#131b2d;color:#e9efff}body.dng-dark .panel,body.dark .panel{border-color:#35405a;box-shadow:none}body.dng-dark .book,body.dark .book{background:#24314b;border-color:#39435e}body.dng-dark .book-name,body.dark .book-name{color:#f1f3fc}body.dng-dark .tabs,body.dark .tabs{background:#2b3650}body.dng-dark .dng-category-pill,body.dark .dng-category-pill{background:#2b3650;color:#e9e4f3;border-color:#3e4562}body.dng-dark .section-title h2,body.dark .section-title h2{color:#f4eaf8}
@media(max-width:1100px){.layout{grid-template-columns:minmax(0,1fr) 285px}.cats{grid-template-columns:repeat(6,1fr)}.books{gap:9px}.head-inner{gap:10px}.nav{gap:7px}.site-header .search input{width:110px}}
@media(max-width:760px){
 html,body{max-width:100%;overflow-x:hidden}
 .wrap{padding-left:11px;padding-right:11px}.mobile-only{display:block}.desktop-only{display:none}
 .head-inner{min-height:66px;gap:8px}.brand{flex:1;min-width:0}.brand-name{font-size:20px}.nav,.site-header .search,.login{display:none}.iconbtn{font-size:21px}
 .layout{display:flex;flex-direction:column;gap:0;margin-top:10px}.maincol,.sidecol{display:contents}
 .panel{width:100%;padding:11px;margin-bottom:11px;border-radius:13px}
 .hero-panel{order:1;padding:0}.cats-panel{order:2}.full-panel{order:3}.recommend-panel{order:4}.ranking-panel{order:5}.updates-panel{order:6}.tags-panel{order:7}.promo{order:8}.hot-panel,.dng-draw-hot-row{order:9}
 .hero{height:auto;aspect-ratio:2.25;border-radius:10px}.hero-slide{width:100%;height:100%}.hero img{width:100%;height:100%;object-fit:cover}.hero-controls{bottom:7px}.dng-hero-nav{width:26px;height:30px}
 .cats{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 5px}.cat-icon{width:40px;height:40px;font-size:21px}.dng-category-bar{width:100%;gap:6px}.dng-category-pill{font-size:11px;padding:7px 9px}
 .section-title h2{font-size:17px}.section-title a{font-size:11px;padding:7px 10px}
 /* Vuốt ngang thẻ truyện; CSS chỉ tạo khả năng vuốt, không tự chạy */
 .full-panel .books,.recommend-panel .books{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;gap:9px;padding-bottom:7px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .full-panel .books::-webkit-scrollbar,.recommend-panel .books::-webkit-scrollbar{display:none}
 .full-panel .books>.book,.recommend-panel .books>.book{flex:0 0 34%;width:34%;min-width:0;scroll-snap-align:start}
 .book-info,.thoiquang-story-info{padding:6px}.book-name,.thoiquang-story-name{font-size:11px;min-height:32px;line-height:1.4}.stats,.thoiquang-story-stats{gap:5px;font-size:10px}.thoiquang-story-stats span{max-width:100%}
 .updates{display:grid;grid-template-columns:1fr;gap:10px}.update{display:flex;gap:10px;align-items:center}.update img,.update .placeholder{flex:0 0 95px;width:95px;height:70px;aspect-ratio:auto}.update .details{flex:1;min-width:0}.update strong{font-size:12px}
 .ranking-panel .rank-row img{width:43px;height:50px}.ranking-panel .tabs button{font-size:11px}
 .hot-panel .books,.dng-draw-hot-row .hot-panel .books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.promo{font-size:20px;padding:15px}
 .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-around;gap:3px;padding:8px 4px max(11px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid #f0e2ec;box-shadow:0 -4px 18px #46384c0d}.bottom-nav a{flex:1;text-align:center;font-size:10px;line-height:1.2;color:#6b6582}.bottom-nav span{display:block;font-size:21px;margin-bottom:3px}.bottom-nav a:first-child{color:#d65b93}body{padding-bottom:75px}body.dng-dark .bottom-nav,body.dark .bottom-nav{background:#1d2940;border-color:#37405a}
 .mobile-menu{position:fixed;top:70px;right:10px;z-index:110;background:white;padding:12px;border-radius:12px;box-shadow:0 10px 25px #4c3b6a30}.mobile-menu a{display:block;padding:9px 14px}.mobile-menu:not(.open){display:none}
 .dng-story-page,.ntl-shell,.thoiquang-ranking,.dncs-results{padding-left:11px!important;padding-right:11px!important}
}
@media(max-width:390px){.full-panel .books>.book,.recommend-panel .books>.book{flex-basis:39%;width:39%}.section-title h2{font-size:16px}.book-name,.thoiquang-story-name{font-size:10.5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.book,.thoiquang-story-card{transition:none}}

/* FIX: WordPress adds class="search" to BODY on search results pages.
   Never apply search-field flex styles to body.search. */
body.search {
  display: block !important;
  width: 100%;
  min-height: 100vh;
}
body.search > .site-header,
body.search > .dng-flat-header,
body.search > header {
  width: 100%;
  max-width: none;
}
body.search .tg-search-page {
  clear: both;
}

/* =========================================================
   CHỈ SỬA CHỮ MENU "THỂ LOẠI" TRÊN TRANG TÌM KIẾM.
   Không thay kích thước / chiều rộng / chiều cao header.
   Nút dropdown phải dùng cùng cỡ chữ với link menu.
   ========================================================= */
@media (min-width: 761px) {
  body.search :is(.dng-flat-header, .site-header) :is(nav, .nav, .dng-flat-nav, .dng-nav, .header-nav) :is(button, summary, .dropdown-toggle, .menu-toggle) {
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
  }
  body.search :is(.dng-flat-header, .site-header) :is(nav, .nav, .dng-flat-nav, .dng-nav, .header-nav) :is(button, summary, .dropdown-toggle, .menu-toggle) span {
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
}


/* ===============================================
   THỜI QUANG - LOGO HEADER LỚN HƠN (31/10/2026)
   Máy tính gần tỷ lệ mẫu, điện thoại cân đối
   =============================================== */
@media (min-width: 761px) {
  .site-header .head-inner {
    min-height: 106px;
    align-items: center;
  }
  .site-header .brand {
    flex: 0 0 240px;
    min-width: 240px;
    display: flex;
    align-items: center;
  }
  .site-header .brand img,
  .site-header .brand .custom-logo,
  .site-header .brand .custom-logo-link img {
    display: block;
    width: 230px !important;
    max-width: 230px !important;
    height: auto !important;
    max-height: 100px !important;
    object-fit: contain;
  }
}
@media (max-width: 760px) {
  .site-header .head-inner {
    min-height: 74px;
    align-items: center;
  }
  .site-header .brand {
    min-width: 0;
  }
  .site-header .brand img,
  .site-header .brand .custom-logo,
  .site-header .brand .custom-logo-link img {
    display: block;
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    max-height: 68px !important;
    object-fit: contain;
  }
}