/* ===============================
   YeuNovel – Reader (Truyện chữ)
   =============================== */
:root{
    --brand:#2563eb;
    --ink:#0f172a;
    --muted:#64748b;
    --card:#ffffff;
    --border:#e5e7eb;
}

/* ===== Header & controls ===== */
.reader-header{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:16px;
    margin-bottom:12px;
}
.reader-title{
    margin:0 0 6px;
    font-size:20px;
    font-weight:700;
    text-align:center;
}
.reader-tips{
    color:#6b7280;
    font-size:13px;
    text-align:center;
}
.reader-footer{
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px;
    margin:14px 0;
}
.reader-controls-top{ margin-top:8px }
.reader-select{ height:36px }

/* ===== Progress bar ===== */
.reader-progress{
    height:3px;
    background:#e5e7eb;
    border-radius:999px;
    overflow:hidden;
    margin:10px 0;
}
.reader-progress .bar{
    height:100%;
    width:0;
    background:#3b82f6;
    display:block;
}

/* ===== Toolbar ===== */
.novel-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:10px 0;
}
.novel-toolbar .toolbar-group{
    display:flex;
    align-items:center;
    gap:6px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:999px;
    padding:6px 8px;
}
.novel-toolbar .label{ color:#334155; font-size:12px }

/* ===== Reading area ===== */
/* Mặc định: rộng bằng container */
.novel-wrap{
    margin:12px auto;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    max-width:100%;
    color:#111827;
}
.novel-content{ padding:18px }
.chapter-title{ font-size:18px; font-weight:700; margin:0 0 10px }
.chapter-body{
    font-size:var(--fs);
    line-height:var(--lh);
    max-width:100%;
}
.chapter-body p{ margin:0 0 1em }

/* ===== Width presets (khi user chọn) ===== */
.width-narrow{ max-width:680px }
.width-normal{ max-width:860px }
.width-wide  { max-width:980px }

/* ===== Themes ===== */
.theme-light{ --card:#ffffff; color:#111827 }
.theme-sepia{ --card:#f6f0e1; color:#3e2f1c }
.theme-dark { --card:#0b1220; color:#e5e7eb }
.theme-dark .reader-header,
.theme-dark .reader-footer{
    background:#0b1220;
    border-color:#0b1220;
}
.theme-dark .reader-progress{ background:#111827 }
.theme-dark .reader-progress .bar{ background:#3b82f6 }

/* ===== Responsive ===== */
@media (max-width: 991px){
    .width-narrow, .width-normal, .width-wide{ max-width:100% } /* mobile luôn full */
    .novel-content{ padding:14px }
}


/* ===============================
   Responsive tweaks (mobile/tablet)
   =============================== */

/* ≤ 991px (tablet & mobile) */
@media (max-width: 991px){
    .reader-header{ padding:12px }
    .reader-title{ font-size:18px }
    .reader-footer{ padding:10px; margin:12px 0 }
    .novel-content{ padding:14px }
}

/* ≤ 767px (mobile) */
@media (max-width: 767px){
    /* Breadcrumb/heading đã vừa; giữ focus vào controls + reader */

    /* -- Controls: chia 3 hàng, full width, dễ bấm -- */
    .reader-footer .row > [class*="col-"]{
        width:100%;
        float:none;
        padding-left:0;
        padding-right:0;
    }
    .reader-footer .btn{
        width:100%;
        margin-bottom:8px;
    }
    .reader-select{
        width:100%;
    }

    /* -- Toolbar: cuộn ngang, nhóm gọn lại -- */
    .novel-toolbar{
        gap:8px;
        padding:8px 0;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        white-space:nowrap;           /* giúp các group nằm một hàng và cuộn */
    }
    .novel-toolbar .toolbar-group{
        display:inline-flex;
        margin-right:8px;
        white-space:nowrap;
    }

    /* Vùng đọc: full container */
    .novel-wrap{ max-width:100% }
}

/* ≤ 420px (very small phones) */
@media (max-width: 420px){
    .reader-title{ font-size:16px }
    .novel-content{ padding:12px }

    /* Ẩn nhãn trong toolbar cho gọn – vẫn giữ nút biểu tượng/chữ */
    .novel-toolbar .label{ display:none }

    .novel-toolbar .btn{
        padding:3px 8px;
        font-size:12px;
        line-height:1.2;
    }
}

/* (Tùy chọn) Sticky controls top trên mobile
   Thêm class 'sticky-mobile' cho .reader-controls-top nếu muốn cố định khi cuộn */
@media (max-width: 767px){
    .reader-controls-top.sticky-mobile{
        position: sticky;
        top: 56px;        /* chỉnh theo chiều cao navbar thực tế của bạn */
        z-index: 20;
        box-shadow: 0 4px 10px rgba(0,0,0,.06);
    }
}
/* ===== Quick Nav (floating) ===== */
.quick-nav{
    position:fixed;
    right:16px;
    bottom:16px;
    display:flex;
    align-items:center;
    gap:8px;
    background:rgba(15,23,42,.92);     /* slate-900 */
    color:#fff;
    border-radius:999px;
    padding:6px;
    box-shadow:0 12px 28px -16px rgba(0,0,0,.45);
    z-index:1000;
    backdrop-filter:saturate(120%) blur(6px);
    transition:opacity .25s ease;
}
.quick-nav.hide{ opacity:.25 }
.quick-nav:hover{ opacity:1 }

.qn-btn{
    width:36px;height:36px; border:none; outline:none;
    border-radius:999px; cursor:pointer;
    background:#fff; color:#111827;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.qn-btn:active{ transform:translateY(1px) }

.qn-select{
    max-width:240px; height:36px;
    border:none; border-radius:999px;
    padding:0 10px; color:#111827;
}

/* Tương thích theme tối */
.theme-dark .quick-nav{ background:rgba(0,0,0,.7) }

/* Mobile: làm thành thanh đáy */
@media (max-width: 767px){
    .quick-nav{
        left:12px; right:12px; bottom:12px;
        background:rgba(255,255,255,.98);
        color:#111827; padding:6px;
    }
    .qn-btn{ width:40px;height:40px; background:#2563eb; color:#fff }
    .qn-select{ flex:1; width:100%; max-width:unset }
}