/* =========================================================
   YeuNovel – GLOBAL (Bootstrap 3.3.7 compatible)
   ========================================================= */

/* ====== Base ====== */
:root{
    --brand:#2563eb; --ink:#0f172a; --ink-2:#111827; --muted:#6b7280;
    --bg:#f5f7fb; --card:#ffffff; --border:#e5e7eb;
    --shadow:0 10px 25px -12px rgba(0,0,0,.25); --radius:12px;
    --reader-font-size:18px; --reader-line-height:1.8; --reader-width:860px;
}
html,body{background:var(--bg)}
a{color:var(--brand)} a:hover,a:focus{color:#1d4ed8;text-decoration:none}
#main_container{min-height: 620px}

/* =========================================================
   TOP BAR (logo + search + actions)
   ========================================================= */
.topbar {
    background: linear-gradient(90deg, #7c3aed, #2563eb);
    color:#fff;
}
.topbar .topbar-inner{
    display:flex; align-items:center; gap:16px; min-height:55px;
}
.topbar .brand{
    display:flex; align-items:center; gap:8px;
    color:#fff; font-weight:700; font-size:18px;
}
.topbar .brand i{ font-size:18px }
.topbar-search{ flex:1 1 auto; }
.header-search-group { width:100% }
.header-search-input{
    border-radius:999px 0 0 999px; height:42px; border:none;
}
.header-search-btn{
    height:42px; border-radius:0 999px 999px 0; padding:0 16px;
}

/* Actions (login/register + social) */
.topbar-actions{ display:flex; align-items:center; gap:10px }
.topbar-actions .btn-social{
    color:#fff; opacity:.9; border:1px solid rgba(255,255,255,.18);
    padding:6px 10px; border-radius:999px;
}
.topbar-actions .btn-social:hover{ opacity:1; background:rgba(255,255,255,.08) }
.topbar-actions .btn-auth{
    padding:7px 14px; border-radius:999px; font-weight:600
}
.topbar-actions .btn-auth.ghost{
    color:#fff; border:1px solid rgba(255,255,255,.3)
}
.topbar-actions .btn-auth.ghost:hover{ background:rgba(255,255,255,.1) }
.topbar-actions .btn-auth.solid{
    color:#fff; background:#2563eb; border:1px solid #1d4ed8
}
.topbar-actions .btn-auth.solid:hover{ background:#1d4ed8 }

/* Mobile toggle (ẩn desktop) */
.subnav-toggle{ display:none; margin-left:auto; background:transparent; border:0; color:#fff; font-size:20px }

/* =========================================================
   SUB NAV (xám) + Mega menu 1 vòng lặp
   ========================================================= */
.subnav{
    position: relative;
    background:#f3f4f6; border-bottom:1px solid var(--border);
}
.subnav .nav-inline{ margin:0; padding:0; list-style:none }
.subnav .nav-inline > li{
    display:inline-block; margin-right:20px; position:relative;
}
.subnav .nav-inline > li:after,
.subnav .nav-inline > li:before{ content:none !important }
.subnav .nav-inline > li > a{
    display:inline-block; padding:12px 0; color:#111827; font-weight:400; text-transform: uppercase;
}
.subnav .nav-inline > li.active > a{ color:#2563eb }

/* Dropdown chung */
.subnav .has-dropdown{ cursor:pointer }
.subnav .has-dropdown .dropdown-menu{
    display:none; position:absolute; left:0; top:100%;
    min-width:220px; background:#fff; border:1px solid var(--border);
    border-radius:8px; padding:8px 0; z-index:1000;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.subnav .has-dropdown.open > .dropdown-menu{ display:block }
.subnav .dropdown-menu > li > a{
    display:block; padding:8px 14px; color:#111827
}
.subnav .dropdown-menu > li > a:hover{ background:#f7faff; color:#2563eb }

/* Mega menu (full-width) */
.subnav .nav-inline > li.mega { position: static; }
.subnav .mega .dropdown-menu{
    left:0; right:0; width:auto; border:none;
    border-top:3px solid var(--brand); border-radius:0;
    background:#fff; box-shadow:var(--shadow); padding:18px 0 12px;
}
.subnav .mega .mega-inner{ padding:10px }
.mega-columns{
    margin:0; padding:0 10px 6px; list-style:none;
}
.mega-columns .mm-item{ float:left; width:25%; padding:4px 8px; }
.mega-columns .mm-item a{
    display:block; padding:6px 10px; border-radius:6px; color:#111827; white-space:nowrap;
}
.mega-columns .mm-item a:hover{ background:#f7faff; color:#2563eb }

/* =========================================================
   Navbar / Mega (Bootstrap 3) – giữ tương thích cũ
   ========================================================= */
.navbar-inverse{background:var(--ink);border-color:#0b1220;box-shadow:0 2px 12px rgba(0,0,0,.12)}
.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{color:#e5e7eb}
.navbar-inverse .navbar-nav>li>a:hover,.navbar-inverse .navbar-brand:hover{color:#fff}
.navbar-brand{font-weight:700;letter-spacing:.2px}

/* ===== Mega menu full width + caret (dự phòng khi dùng navbar-inverse) ===== */
.navbar-nav>li.megamenu{ position: static; }
.megamenu .dropdown-menu.mega-full{
    left:0; right:0; width:100%; border:none;
    border-top:3px solid var(--brand);
    background:#fff; box-shadow:var(--shadow); padding:18px 0 14px;
}
.megamenu-grid{
    display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
    gap:10px 32px; margin:0; padding:0 10px;
}
.megamenu-grid .mm-item a{
    display:block; padding:6px 8px; border-radius:8px;
    color:#111827; white-space:nowrap;
}
.megamenu-grid .mm-item a:hover{ background:#f7faff; color:var(--brand); }
.megamenu-grid .mm-item.active > a{ font-weight:700; color:var(--brand); background:#eef2ff; }
.navbar-inverse .navbar-nav>li>a .caret-down{
    display:inline-block; margin-left:6px; width:0; height:0;
    border-left:4px solid transparent; border-right:4px solid transparent;
    border-top:5px solid #e5e7eb; vertical-align:middle;
}
.navbar-inverse .navbar-nav>li:hover>a .caret-down,
.navbar-inverse .navbar-nav>li.open>a .caret-down{ border-top-color:#fff; }
@media (max-width: 991px){ .mega-columns .mm-item{ width:33.333% } }
@media (max-width: 767px){ .mega-columns .mm-item{ width:50% } }

/* =========================================================
   Search bar block (nếu dùng block riêng ở homepage)
   ========================================================= */
.search-bar{padding:20px 0;background:var(--ink-2)}
.search-bar .form-control{
    height:42px;border-radius:999px;padding-left:18px;border:none
}
.search-bar .btn{height:42px;border-radius:999px;padding:0 18px}

/* =========================================================
   Sections / Card items
   ========================================================= */
.section{padding:24px 0}
.section-title{
    margin:0 0 14px;font-size:18px;font-weight:700;color:#111827;
    position:relative;padding-left:14px
}
.section-title a{color:#111827}
.section-title:before{
    content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:4px;background:var(--brand);
}
.section .row>[class*="col-"]{padding-bottom:16px}

.novel-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;display:flex;min-height:140px;
    transition:box-shadow .2s ease,transform .08s ease,border-color .2s ease;
    margin-bottom:2px;
}
.novel-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);border-color:#dbe1ea}
.novel-cover{width:104px;flex:0 0 104px;background:#eef2ff center/cover no-repeat}
.novel-body{padding:12px 14px;flex:1;width:100%;overflow:hidden}
.novel-title{font-size:16px;font-weight:700;margin:0 0 6px}
.novel-meta a{color:#111827 !important;}
.novel-meta{color:var(--muted);font-size:12px;margin-bottom:8px}
.novel-desc{color:#374151;font-size:13px;height:40px;overflow:hidden}
.labels .label{margin-right:6px;border-radius:999px;padding:.2em .55em}
.rating i{color:#f59e0b}
.badge-status{padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600; max-width: 100%;}

.badge-status a.badge-ellipsis{
    display:inline-block;
    max-width: var(--limit, 36ch);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.badge-ellipsis-24{ max-width:24ch }
.badge-ellipsis-30{ max-width:30ch }
.badge-ellipsis-36{ max-width:36ch }
.badge-ellipsis-42{ max-width:42ch }

.badge-ongoing{background:#e0f2fe;color:#075985}
.badge-complete{background:#dcfce7;color:#166534}

/* Labels (1 dòng + scroll ngang) */
.labels{
    display:flex;align-items:center;gap:8px;max-width:100%;
    overflow-x:auto;overflow-y:hidden;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent;
    padding-bottom:2px;height:24px;
}
.labels .label{flex:0 0 auto;white-space:nowrap;margin-right:0}
.labels::-webkit-scrollbar{height:6px}
.labels::-webkit-scrollbar-track{background:transparent}
.labels::-webkit-scrollbar-thumb{background:rgba(148,163,184,.6);border-radius:999px}
.labels::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,.8)}

/* Reader */
.reader-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin:16px auto;max-width:var(--reader-width)}
.reader-header{padding:12px 16px;border-bottom:1px solid #f3f4f6;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.reader-title{font-size:16px;font-weight:700;margin:0}
.reader-controls .btn{margin-right:6px;margin-bottom:6px}
.reader-content{padding:18px;font-size:var(--reader-font-size);line-height:var(--reader-line-height);color:#111827}
.reader-content p{margin-bottom:1em}
.reader-progress{height:3px;background:#e5e7eb;border-radius:999px;overflow:hidden}
.reader-progress .bar{height:100%;width:0;background:#3b82f6}
.reader-dark .reader-wrap{background:#0b1220;border-color:#0b1220}
.reader-dark .reader-content{color:#e5e7eb}
.reader-dark .reader-header{border-bottom-color:#0f172a}
.reader-sepia .reader-wrap{background:#f6f0e1}
.reader-sepia .reader-content{color:#3e2f1c}

/* Footer */
.footer{background:#222;color:#aaa}
.footer a{color:#aaa}

/* Cover overlay & badges */
.cover-stats{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    display:flex; gap:8px; align-items:center; justify-content:center;
    max-width:calc(100% - 16px); padding:0 8px; z-index:2;
}
.cover-stats.split{ left:8px; right:8px; transform:none; justify-content:space-between; }
.stat{
    background:rgba(0,0,0,.68); color:#fff; border-radius:999px;
    font-size:12px; line-height:1; padding:6px 10px;
    display:flex; align-items:center; gap:6px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
}
.stat i{ font-size:12px }
.stat.stat-extra{ color:#fff; text-decoration:none; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.stat.stat-extra:hover{ text-decoration:underline }

/* Aside Đọc nhiều */
.aside-simple .module-title{
    margin:0; padding:10px 12px; font-weight:700; color:var(--ink);
    background:#f8fafc; border:1px solid var(--border); border-bottom:none;
    border-top-left-radius:12px; border-top-right-radius:12px;
}
.aside-simple .aside-top-list{
    list-style:none; margin:0; padding:0;
    border:1px solid var(--border);
    border-bottom-left-radius:12px; border-bottom-right-radius:12px;
    overflow:hidden; background:#fff;
}
.aside-simple .top-item{
    display:flex; gap:10px; align-items:flex-start;
    padding:10px 12px; border-bottom:1px solid var(--border);
}
.aside-simple .top-item:last-child{ border-bottom:none }
.aside-simple .rank-pill{ width:28px; text-align:center; font-weight:700; color:#64748b; flex:0 0 28px; line-height:22px; }
.aside-simple .top-item .thumb{ width:52px; height:68px; background:center/cover no-repeat; border-radius:6px; flex:0 0 52px; }
.aside-simple .top-item .meta{ flex:1 1 auto }
.aside-simple .top-item .meta .title{
    display:block; font-weight:600; color:#0f172a; line-height:1.2; margin-bottom:2px;
    max-height:2.6em; overflow:hidden;
}
.aside-simple .top-item .sub{ font-size:12px; color:#6b7280 }

/* CTA Register – navbar-inverse (Bootstrap 3) */
.navbar-inverse .navbar-nav.navbar-right > li.nav-cta > a.btn.navbar-btn{
    margin:8px 0 8px 8px;
    padding:6px 14px;
    border-radius:999px;
    color:#fff;
    background:#2563eb;
    border-color:#1d4ed8;
}
.navbar-inverse .navbar-nav.navbar-right > li.nav-cta > a.btn.navbar-btn:hover{
    background:#1d4ed8; color:#fff;
}
.navbar-user > .dropdown-menu { min-width: 200px; }

/* Utilities */
.truncate-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.truncate-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.novel-desc.truncate-2{
    display:block;height:auto;max-height:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    max-inline-size:var(--maxch,120ch);max-width:var(--maxch,120ch)
}
.truncate-ch-80{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80ch}
.truncate-ch-100{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100ch}
.truncate-ch-120{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120ch}
.truncate-ch-140{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140ch}
.truncate-ch-160{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160ch}

/* Spacing helpers */
.m-0{margin:0!important} .p-0{padding:0!important}
.mt-5{margin-top:5px!important}.pt-5{padding-top:5px!important}
.mr-5{margin-right:5px!important}.pr-5{padding-right:5px!important}
.mb-5{margin-bottom:5px!important}.pb-5{padding-bottom:5px!important}
.ml-5{margin-left:5px!important}.pl-5{padding-left:5px!important}
.mx-5{margin-left:5px!important;margin-right:5px!important}
.my-5{margin-top:5px!important;margin-bottom:5px!important}
.px-5{padding-left:5px!important;padding-right:5px!important}
.py-5{padding-top:5px!important;padding-bottom:5px!important}
.mt-10{margin-top:10px!important}.pt-10{padding-top:10px!important}
.mr-10{margin-right:10px!important}.pr-10{padding-right:10px!important}
.mb-10{margin-bottom:10px!important}.pb-10{padding-bottom:10px!important}
.ml-10{margin-left:10px!important}.pl-10{padding-left:10px!important}
.mx-10{margin-left:10px!important;margin-right:10px!important}
.my-10{margin-top:10px!important;margin-bottom:10px!important}
.px-10{padding-left:10px!important;padding-right:10px!important}
.py-10{padding-top:10px!important;padding-bottom:10px!important}
.mt-15{margin-top:15px!important}.pt-15{padding-top:15px!important}
.mr-15{margin-right:15px!important}.pr-15{padding-right:15px!important}
.mb-15{margin-bottom:15px!important}.pb-15{padding-bottom:15px!important}
.ml-15{margin-left:15px!important}.pl-15{padding-left:15px!important}
.mx-15{margin-left:15px!important;margin-right:15px!important}
.my-15{margin-top:15px!important;margin-bottom:15px!important}
.px-15{padding-left:15px!important;padding-right:15px!important}
.py-15{padding-top:15px!important;padding-bottom:15px!important}
.mt-20{margin-top:20px!important}.pt-20{padding-top:20px!important}

/* Responsive */
@media (max-width: 991px){
    .topbar .topbar-inner{ gap:10px }
    .topbar-actions{ display:none }
}
@media (max-width: 767px){
    .topbar-search{ order:3; width:100% }
    .subnav .nav-inline{ display:none }
    .subnav.open .nav-inline{ display:block }
    .subnav .nav-inline > li{ display:block; margin:0 }
    .subnav .has-dropdown .dropdown-menu{ position:static; width:100% }
    .subnav-toggle{ display:block }
}

/* ===== Featured Carousel ===== */
.featured { position: relative; }
.featured-carousel{
    position:relative; display:block; overflow:auto;
    white-space:nowrap; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; padding-bottom:6px;
}
.featured-item{
    display:inline-block; width:220px; margin-right:14px;
    background:#fff; border:1px solid var(--border);
    border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.06);
    scroll-snap-align:start; text-decoration:none; color:#111827;
    transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
    vertical-align:top;
}
.featured-item:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px -12px rgba(0,0,0,.35);
    border-color:#dbe1ea;
}
.featured-item .thumb{
    height:140px; border-top-left-radius:12px; border-top-right-radius:12px;
    background:#eef2ff center/cover no-repeat;
}
.featured-item .meta{ padding:10px 12px }
.featured-item .title{ font-weight:700; font-size:14px; margin:0 0 4px }
.featured-item .sub{ font-size:12px; color:var(--muted) }

/* Nút điều hướng */
.fc-prev,.fc-next{
    position:absolute; top:50%; transform:translateY(-50%);
    width:36px;height:36px;border-radius:50%;
    border:none; outline:none; cursor:pointer;
    background:#fff; color:#111827; z-index:5;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
    transition:box-shadow .2s ease, transform .1s ease; display:flex; align-items:center; justify-content:center;
}
.fc-prev:hover,.fc-next:hover{ box-shadow:0 8px 20px rgba(0,0,0,.25) }
.fc-prev:active,.fc-next:active{ transform:translateY(-50%) scale(.98) }
.fc-prev{ left:6px } .fc-next{ right:6px }
.featured.hide-arrows .fc-prev,.featured.hide-arrows .fc-next{ display:none; }

@media (max-width: 480px){
    .featured-item{ width:180px; }
}

/* ===== Resets/avoid dots and vertical lists ===== */
.topbar-actions,
.topbar-actions li,
.nav-inline,
.nav-inline li,
.navbar-nav { list-style: none; margin: 0; padding: 0; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.topbar-actions > li { display:inline-flex; align-items:center; }
.nav-inline { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.nav-inline > li { position: relative; }
.nav-inline > li > a { display:inline-block; padding:12px 0; }

/* Tránh tràn ngang khi dropdown full-bleed */
html, body { overflow-x: hidden; }

/* Hover-to-open (desktop) + z-index bảo vệ */
.subnav{ position:relative; z-index:2000; overflow:visible; }
.subnav .has-dropdown .dropdown-menu{ z-index:2050; }
.subnav .nav-inline>li.has-dropdown:hover>.dropdown-menu{ display:block; }

/* Mega: full container */
.subnav .nav-inline>li.mega{ position:static; }
.subnav .nav-inline>li.mega>.dropdown-menu{
    left:0; right:0; width:auto; border-radius:0; border-top:3px solid var(--brand); z-index:2050;
}

/* Mega grid */
.dropdown-menu.mega-full{ padding:18px 0 14px; background:#fff; box-shadow:var(--shadow); }
.mega-inner{ padding:0 10px; }
.mega-columns{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px 32px; margin:0; padding:0; list-style:none; }
.mega-columns .mm-item a{ display:block; padding:7px 12px; border-radius:8px; color:#111827; white-space:nowrap; }
.mega-columns .mm-item a:hover{ background:#f7faff; color:var(--brand); }
.subnav .nav-inline>li.has-dropdown>a .caret{ margin-left:6px; font-size:14px; opacity:.7; transition:transform .15s ease; }
.subnav .nav-inline>li.has-dropdown:hover>a .caret{ transform:rotate(180deg) }

@media (hover:none){
    .subnav .nav-inline>li.has-dropdown:hover>.dropdown-menu{ display:none; }
}
@media (max-width:991px){ .mega-columns{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:767px){ .mega-columns{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:991px){
    .subnav .nav-inline>li.open>.dropdown-menu{ display:block; }
}
/* =========================
   MEGA MENU – CONTENT WIDTH
   ========================= */
/* Desktop/Tablet: canh giữa dưới tab "Thể loại", chỉ rộng theo nội dung */
.subnav .nav-inline > li.mega > .dropdown-menu{
    left:50% !important;         /* bỏ left:0; right:0; */
    right:auto !important;
    width:auto !important;
    min-width: 1168px;            /* tùy số cột, có thể chỉnh 560/720 */
    max-width: calc(100vw - 40px);
    transform: translateX(-50%);
    border-radius: 10px;         /* bo nhẹ cho dropdown */
    padding: 14px 0;
}

/* Khoảng đệm + lưới bên trong */
.subnav .nav-inline > li.mega > .dropdown-menu .mega-inner{ padding: 10px 16px; }
.subnav .nav-inline > li.mega .mega-columns{ margin:0; padding:0 6px 6px; list-style:none; }
.subnav .nav-inline > li.mega .mega-columns .mm-item{ float:left; width:25%; padding:4px 10px; } /* 4 cột */
@media (max-width: 1200px){
    .subnav .nav-inline > li.mega .mega-columns .mm-item{ width:33.333%; }  /* 3 cột khi hẹp */
}

/* Mobile: dropdown theo khối, chiếm 100% chiều ngang như cũ */
@media (max-width: 991px){
    .subnav .nav-inline > li.mega > .dropdown-menu{
        position: static !important;
        transform: none !important;
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 0;
    }
    .subnav .nav-inline > li.mega .mega-columns .mm-item{ width:50%; }      /* 2 cột mobile */
}