/* =========================================================
   YeuNovel – DETAIL (Novel detail page)
   ========================================================= */
:root{
    --brand:#2563eb; --ink:#0f172a; --muted:#6b7280;
    --card:#ffffff; --border:#e5e7eb; --radius:12px;
}

/* Breadcrumb */
.breadcrumb{background:transparent;padding:8px 0;margin-bottom:10px}
.breadcrumb>li+li:before{content:"›";color:#9aa3b2;padding:0 6px}
.itemcrumb{color:#475569} .itemcrumb:hover{color:var(--brand);text-decoration:none}

/* Title */
.title-detail{font-size:24px;line-height:1.3;font-weight:700;color:#0f172a;margin:4px 0 14px}

/* Hero */
.detail-info{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
    box-shadow:0 8px 20px -12px rgba(0,0,0,.18);padding:12px 14px;margin-bottom:16px;display:flex}
.detail-info .novel-cover{width:160px;min-height:220px;background:#eef2ff center/cover no-repeat;border-radius:10px;margin-right:12px;flex:0 0 160px}
.detail-info .novel-body{flex:1;min-width:0}
.list-info{list-style:none;padding:0;margin:0 0 10px}
.list-info li{margin-bottom:8px}
.list-info .name{margin:0;color:#475569;font-weight:600}
.list-info a{color:#0f172a} .list-info a:hover{color:var(--brand)}

/* Actions & Follow */
.mrt10{margin-top:10px} .mrb5{margin-bottom:5px}
.detail-info .btn+.btn{margin-left:6px} .detail-info .btn i{margin-right:4px}
.follow{margin-top:10px;display:flex;align-items:center;gap:10px}
.follow .btn{border-radius:999px} .follow span b{color:#0f172a}

/* Nội dung (summary) */
.detail-content{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin:12px 0 16px}
.list-title{font-size:16px;font-weight:700;color:#0f172a;margin:0 0 10px;position:relative;padding-left:12px}
.list-title i{margin-right:6px;color:#0ea5e9}
.list-title:before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:4px;background:#0ea5e9;border-radius:4px}
.summary-body{position:relative;background:#fff;color:#374151;line-height:1.8}
.summary-body.is-collapsed{max-height:140px;overflow:hidden}
.summary-body.is-collapsed:after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:60px;
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff)
}
.see-more-link{display:inline-block;margin-top:6px;color:#0ea5e9}
.see-more-link:hover{text-decoration:none;color:#0284c7}

/* Danh sách chương */
.list-chapter{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px 14px}
#nt_listchapter nav ul{list-style:none;padding:0;margin:0}
#nt_listchapter nav li{padding:8px 0;border-bottom:1px dashed #edf2f7}
#nt_listchapter nav li:last-child{border-bottom:none}
#nt_listchapter nav li.heading{font-weight:700;color:#0f172a;border-bottom:1px solid var(--border);padding-top:0;padding-bottom:10px}
#nt_listchapter .chapter a{display:inline-block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#0f172a}
#nt_listchapter .chapter a:hover{color:var(--brand);text-decoration:none}
#nt_listchapter .small{color:#6b7280}
#nt_listchapter li.less{display:none}
#nt_listchapter .view-more{display:inline-block;margin-top:10px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 12px;color:#0f172a;box-shadow:0 6px 16px rgba(0,0,0,.06)}
#nt_listchapter .view-more:hover{color:var(--brand);text-decoration:none}
#nt_listchapter .view-more.hidden{display:none}

/* Aside: Đọc nhiều */
.aside-top{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.aside-header{background:#f5f7fb;border-bottom:1px solid var(--border);padding:10px 12px;font-weight:700;color:#0f172a}
.aside-top-list{list-style:none;margin:0;padding:0}
.top-item{display:flex;align-items:center;padding:8px 12px;border-bottom:1px dashed #edf2f7}
.top-item:last-child{border-bottom:none}
.top-item .rank{width:28px;flex:0 0 28px;font-weight:700;color:#6b7280}
.top-item .thumb{width:46px;height:46px;border-radius:6px;background:#eef2ff center/cover no-repeat;display:block;margin-right:10px}
.top-item .meta{min-width:0;flex:1}
.top-item .title{display:block;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-item .title:hover{color:var(--brand);text-decoration:none}
.top-item .sub{font-size:12px;color:#6b7280}

/* Comments */
.comments-block{background:#fff;border:1px solid var(--border);border-radius:12px;margin-top:16px}
.comment-tabs{display:flex;list-style:none;margin:0;padding:0;border-bottom:1px solid var(--border)}
.comment-tabs li{margin:0}
.comment-tabs a{display:block;padding:10px 12px;color:#0f172a;border-right:1px solid var(--border)}
.comment-tabs li.active a{color:#e11d48;font-weight:700}
.comment-pane{display:none;padding:12px}
.comment-pane.active{display:block}
.emoji-bar{padding:8px 0;border-bottom:1px dashed #edf2f7;margin-bottom:8px}
.emoji{border:none;background:#fff;font-size:18px;line-height:1;margin-right:6px;cursor:pointer}
.cmt-form textarea{resize:vertical}
.cmt-list{list-style:none;margin:12px 0 0;padding:0}

/* Utilities */
.no-wrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Responsive */
@media (max-width:767px){
    .detail-info{display:block}
    .detail-info .novel-cover{margin:0 0 10px;width:100%;min-height:200px}
    .detail-info .novel-body{width:100%}
}
/* === Aside Tabs === */
.aside-tabs{
    background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.aside-tabs .tab-head{
    display:flex; list-style:none; margin:0; padding:0;
    border-bottom:1px solid var(--border); background:#f8fafc;
}
.aside-tabs .tab-head li{ flex:1 }
.aside-tabs .tab-head a{
    display:block; text-align:center; padding:10px 8px;
    color:#334155; border-right:1px solid var(--border);
}
.aside-tabs .tab-head li:last-child a{ border-right:none }
.aside-tabs .tab-head li.active a{
    background:#fff; color:#0f172a; font-weight:700;
    border-bottom:2px solid var(--brand);
}
.aside-tabs .tab-content .pane{ display:none }
.aside-tabs .tab-content .pane.active{ display:block }