/* =========================================================
   YeuNovel – COMMON (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;
    --brand-2:#7c3aed;
}

html,body{background:var(--bg)}
a{color:var(--brand)} a:hover,a:focus{color:#1d4ed8;text-decoration:none}
#main_container{min-height:620px}

/* ====== Helpers / Utilities nền ====== */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Buttons dùng chung (không gắn với nav) */
.btn-auth{
    display:inline-flex;align-items:center;gap:8px;line-height:1;
    padding:8px 14px;border-radius:999px;border:1px solid transparent;
    font-weight:600;cursor:pointer;text-decoration:none;
}
.btn-auth.ghost{color:#111827;border-color:#d1d5db;background:#fff}
.btn-auth.ghost:hover{background:#f3f4f6}
.btn-auth.solid{color:#fff;background:#2563eb;border-color:#1d4ed8}
.btn-auth.solid:hover{background:#1d4ed8}

.btn-social{
    color: #fff;
    opacity: .92;
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 6px 10px;
    border-radius: 999px;
    text-decoration: none;
}
.btn-social:hover{background:#f3f4f6}

/* ===== Search-bar block (khối 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)
}

/* Gutter dưới mỗi cột để card không dính nhau */
.section .row>[class*="col-"]{padding-bottom:16px}

/* Card (item) */
.novel-card{
    background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    overflow:hidden;display:flex;min-height:140px;margin-bottom:2px;
    transition:box-shadow .2s ease,transform .08s ease,border-color .2s ease;
}
.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%;}

/* Ellipsis ký tự cho tiêu đề chương */
.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 (trang đọc) ===== */
.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 }

/* ===== 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;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 utilities (mini set) */
.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}

/* ===== Featured Carousel (Truyện đề cử) ===== */
.featured { position: relative; }
.featured .section-title:before{ background: var(--brand); }

.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 }

/* Ẩn nút khi không cần (ít item) */
.featured.hide-arrows .fc-prev,
.featured.hide-arrows .fc-next{ display:none; }

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