/* ==========================================================================
   ZTruyen Theme - Unified Pages CSS
   Chứa toàn bộ CSS inline được tách ra từ các file PHP template giao diện ngoài.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SINGLE CHAP (templates/single-chap.php)
   -------------------------------------------------------------------------- */
.chapter-title { text-align: center; margin-bottom: 40px; font-weight: 800; line-height: 1.4; }
.chapter-content { font-size: 18px; line-height: 1.6; text-align: justify; }
.chapter-content p { margin-bottom: 1.5rem; }
.reader-toolbar { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffffff; border-top: 1px solid #dee2e6; padding: 10px 15px; z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }

/* Themes */
body.theme-light { background-color: #f8f9fa; color: #212529; }
body.theme-sepia { background-color: #f4ecd8; color: #5b4636; }
body.theme-dark { background-color: #1a1a1a; color: #d1d1d1; }
body.theme-dark .reader-toolbar { background-color: #2c2c2c; border-color: #444; }
body.theme-dark .modal-content { background-color: #2c2c2c; color: #d1d1d1; }
body.theme-dark .list-group-item { background-color: #2c2c2c; color: #d1d1d1; border-color: #444; }
body.theme-dark .list-group-item:hover { background-color: #333; }

.color-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; display: inline-block; margin-right: 10px; }
.color-option.selected { border-color: var(--td-primary); transform: scale(1.1); }
.bg-opt-light { background-color: #f8f9fa; border: 1px solid #ccc; }
.bg-opt-sepia { background-color: #f4ecd8; border: 1px solid #d7cbb1; }
.bg-opt-dark { background-color: #1a1a1a; border: 1px solid #555; }

/* Chap List Modal */
#td-chap-list-content { max-height: 60vh; overflow-y: auto; }
.chap-item-active { background-color: var(--td-primary); color: #fff !important; }

/* --------------------------------------------------------------------------
   2. SINGLE STORY (templates/single-story.php)
   -------------------------------------------------------------------------- */
.hover-border-primary:hover { border-color: var(--td-primary) !important; }
.hover-bg-light:hover { background-color: #f8fafc !important; border-color: #e2e8f0 !important; cursor: pointer; }
.max-w-100 { max-width: 100%; }
.transition-colors { transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.bxh-large-rank { font-style: normal; }

/* Responsive Hero Background */
.td-single-wrap { background-color: #e2e8f0; }
.td-single-bg { background-color: #e2e8f0; }
.td-single-overlay { background: linear-gradient(to bottom, rgba(230,235,240,0.4) 0%, rgba(240,245,250,0.95) 100%); }
.td-hero-text { color: #1e293b; }
.td-hero-subtext { color: #64748b; }
.td-hero-btn { border: 1px solid rgba(30, 41, 59, 0.3) !important; color: #1e293b !important; }

.dark-mode .td-single-wrap { background-color: #0f172a; }
.dark-mode .td-single-bg { background-color: #0f172a; }
.dark-mode .td-single-overlay { background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.95) 100%); }
.dark-mode .td-hero-text { color: #ffffff; }
.dark-mode .td-hero-subtext { color: rgba(255,255,255,0.5); }
.dark-mode .td-hero-btn { border: 1px solid rgba(255,255,255,0.4) !important; color: #ffffff !important; }

/* Title Size */
.story-main-title { font-size: 1.5rem; }
@media (min-width: 768px) {
    .story-main-title { font-size: 2rem !important; }
}

/* Chapter Hover Style */
.chap-item { color: #475569 !important; }
.chap-item:hover { color: var(--td-primary) !important; background-color: #f1f5f9 !important; }
.chap-item:hover span { color: var(--td-primary) !important; font-weight: 500 !important; }

/* --------------------------------------------------------------------------
   3. HOME PAGE (templates/page-home.php)
   -------------------------------------------------------------------------- */
.bt-section-title { font-size:1.25rem; font-weight:900; margin:0; display:flex; align-items:center; gap:.5rem; color:var(--td-primary); }
.bt-section-link { text-decoration:none; font-weight:700; font-size:.85rem; color:var(--td-primary); }
.bt-section-link:hover { text-decoration:underline; }

/* 5-col grouped grid */
.bt-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.bt-col { background:var(--td-card-bg,#fff); border-radius:var(--td-radius,1.25rem); border:1px solid var(--td-border-color,#e2e8f0); padding:6px; display:flex; flex-direction:column; }

/* Card item inside group */
.bt-item { padding:10px 8px; border-radius:10px; transition:background .2s; color:inherit; }
.bt-item:not(:last-child) { border-bottom:1px solid var(--td-border-color,#e8ecef); }
.bt-item:hover { background:rgba(var(--td-primary-rgb,20,184,166),.04); }
.bt-item-thumb { width:70px; height:94px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.bt-item-thumb img { transition:transform .3s ease; }
.bt-item:hover .bt-item-thumb img { transform:scale(1.05); }
.bt-item-title { font-size:.85rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; color:var(--td-text-color,#1e293b); transition:color .2s; }
.bt-item:hover .bt-item-title { color:var(--td-primary) !important; }
.bt-item-desc { font-size:.72rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#94a3b8; margin-bottom:0; }
.bt-views { font-size:11px; color:#94a3b8; }
.bt-tag { display:inline-block; font-size:10px; padding:1px 7px; border-radius:50rem; background:rgba(var(--td-primary-rgb,20,184,166),.08); color:var(--td-primary); font-weight:500; margin-right:3px; }
.bt-badge { font-size:10px; padding:2px 10px; border-radius:50rem; font-weight:600; white-space:nowrap; }
.bt-badge-full { background:rgba(16,185,129,.12); color:#059669; }
.bt-badge-ongoing { background:rgba(245,158,11,.12); color:#d97706; }

/* Rank numbers — overlay on thumbnail */
.bt-rank { position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; background:#94a3b8; z-index:2; line-height:1; }
.bt-rank-1 { background:linear-gradient(135deg,#f59e0b,#f97316); }
.bt-rank-2 { background:linear-gradient(135deg,#64748b,#475569); }
.bt-rank-3 { background:linear-gradient(135deg,#ef4444,#dc2626); }

/* Dark mode */
.dark-mode .bt-col { background:var(--td-card-bg); border-color:var(--td-border-color); }
.dark-mode .bt-item-title { color:#e2e8f0; }
.dark-mode .bt-item:hover .bt-item-title { color:var(--td-primary) !important; }
.dark-mode .bt-item-desc { color:#64748b; }
.dark-mode .bt-item:not(:last-child) { border-bottom-color:var(--td-border-color); }
.dark-mode .bt-tag { background:rgba(255,255,255,.1); color: #e2e8f0; }

/* Hero Slider */
.bt-hero-slider-wrap { position:relative; overflow:hidden; background:linear-gradient(135deg,#e2e8f0 0%,#f1f5f9 100%); }
.dark-mode .bt-hero-slider-wrap { background:linear-gradient(135deg,#0f1b2d 0%,#162032 100%); }
.bt-hero-swiper .swiper-slide { transition:transform .4s ease, filter .4s ease; filter:brightness(0.4); transform:scale(.82); }
.bt-hero-swiper .swiper-slide-active { filter:brightness(1); transform:scale(1); z-index:2; }
.bt-hero-swiper .swiper-slide-prev, .bt-hero-swiper .swiper-slide-next { filter:brightness(0.7); transform:scale(.9); }
.bt-hero-cover img { transition:transform .5s ease; }
.bt-hero-card:hover .bt-hero-cover img { transform:scale(1.05); }
.bt-hero-title { color: #1e293b; transition: color 0.3s; }
.bt-hero-cat { color: #64748b; transition: color 0.3s; }
.dark-mode .bt-hero-title { color: #ffffff; }
.dark-mode .bt-hero-cat { color: rgba(255,255,255,0.5); }
.bt-swiper-pagination .swiper-pagination-bullet { width:10px; height:10px; background:rgba(0,0,0,.2); opacity:1; }
.dark-mode .bt-swiper-pagination .swiper-pagination-bullet { background:rgba(255,255,255,.4); }
.bt-swiper-pagination .swiper-pagination-bullet-active { background:var(--td-primary) !important; width:28px; border-radius:5px; }

/* Responsive */
@media (max-width:991px) { .bt-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px) { .bt-grid { grid-template-columns:repeat(2,1fr); } .bt-item-thumb { width:60px; height:80px; } }
@media (max-width:575px) { .bt-grid { grid-template-columns:1fr; } .bt-item-title { font-size:.82rem; } }

/* --------------------------------------------------------------------------
   4. BXH PAGE (templates/page-bxh.php)
   -------------------------------------------------------------------------- */
/* BXH Sidebar Tabs */
.bxh-tab-item {
    display: block;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: var(--td-text-color, #1e293b);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
}
.bxh-tab-item:hover { background-color: #f8fafc; }
.bxh-tab-item.active { background-color: var(--td-primary); border-color: var(--td-primary); color: #fff; }

/* BXH Master List */
.bxh-row-card { border-color: #f1f5f9 !important; }
.bxh-row-card:hover { background-color: rgba(0,0,0,0.02) !important; border-color: #e2e8f0 !important; }
.bxh-row-card .bxh-row-title { color: var(--td-text-color, #0f172a); transition: color 0.2s; }
.bxh-row-card:hover .bxh-row-title { color: var(--td-primary); }
.bxh-row-desc { font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Large Rank Number */
.bxh-large-rank { font-size: 2.5rem; font-weight: 800; line-height: 1; color: #9ca3af; min-width: 45px; text-align: center; }
.bxh-large-rank.rank-1 { color: #f59e0b; }
.bxh-large-rank.rank-2 { color: #94a3b8; }
.bxh-large-rank.rank-3 { color: #ef4444; }

/* Pagination overrides */
.page-numbers { display: inline-block; padding: 8px 16px; margin: 0 4px; border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; color: var(--td-text-color); text-decoration: none; font-weight: 600; transition: all .2s; }
.page-numbers.current, .page-numbers:hover { background: var(--td-primary); color: #fff; border-color: var(--td-primary); }
ul.page-numbers { display: flex; list-style: none; padding: 0; margin: 0; }

/* Dark Mode Support */
.dark-mode .bxh-tab-item { color: #cbd5e1; }
.dark-mode .bxh-sidebar, .dark-mode .bxh-row-card, .dark-mode .bg-white { background-color: var(--td-card-bg) !important; border-color: var(--td-border-color) !important; }
.dark-mode .bxh-row-card:hover { background-color: rgba(255,255,255,0.03) !important; }
.dark-mode .bxh-large-rank { color: #334155; }
.dark-mode .bxh-large-rank.rank-1 { color: #b45309; }
.dark-mode .bxh-row-card .bxh-row-title { color: #e2e8f0; }
.dark-mode .bxh-row-desc { color: #94a3b8; }
.dark-mode .page-numbers { background: var(--td-card-bg); border-color: var(--td-border-color); color: #e2e8f0; }
.dark-mode .bg-light { background-color: #1e293b !important; color: #cbd5e1 !important; border-color: #334155 !important; }

/* --------------------------------------------------------------------------
   5. BOOKCASE PAGE (templates/page-bookcase.php)
   -------------------------------------------------------------------------- */
/* Custom Style for Tabs */
.nav-pills .nav-link { background-color: var(--td-bg-light); color: var(--td-text-secondary); border: 1px solid transparent; }
.nav-pills .nav-link:hover { background-color: #e2e8f0; }
.nav-pills .nav-link.active { background-color: var(--td-primary); color: #fff; border-color: var(--td-primary); }
.dark-mode .nav-pills .nav-link { background-color: #2c2c2c; border-color: #444; color: #d1d1d1; }
.dark-mode .nav-pills .nav-link:hover { background-color: #333; }
.dark-mode .nav-pills .nav-link.active { background-color: var(--td-primary); color: #fff; border-color: var(--td-primary); }

/* --------------------------------------------------------------------------
   6. ACCOUNT TAB NOTI (templates/account/tab-noti.php)
   -------------------------------------------------------------------------- */
.group:hover .group-hover-opacity-100 { opacity: 1 !important; }