/* =========================================================
   YeuNovel – MAIN (Homepage-only styles)
   ========================================================= */

/* 3 box Trang chủ – mỗi box 1 phong cách.
   Giả định thứ tự trong .container: 1) Mới cập nhật  2) Đọc nhiều  3) Đã hoàn thành */
.container>.section:nth-of-type(1) .section-title:before{background:#3b82f6}
.container>.section:nth-of-type(1) .novel-card{border-top:3px solid #3b82f6}

.container>.section:nth-of-type(2){
    background:linear-gradient(0deg, rgba(253,230,138,.35), rgba(255,255,255,0));
    border-radius:12px;
}
.container>.section:nth-of-type(2) .section-title:before{background:#f59e0b}
.container>.section:nth-of-type(2) .novel-card{border-top:3px solid #f59e0b}

.container>.section:nth-of-type(3){
    background:linear-gradient(0deg, rgba(187,247,208,.35), rgba(255,255,255,0));
    border-radius:12px;
}
.container>.section:nth-of-type(3) .section-title:before{background:#10b981}
.container>.section:nth-of-type(3) .novel-card{border-top:3px solid #10b981}


.container>.section:nth-of-type(4) .section-title:before{background:#3e2f1c}
.container>.section:nth-of-type(4) .novel-card{border-top:3px solid #3e2f1c}

/* Carousel – Truyện đề cử */
.featured .section-title:before{background:var(--brand)}
.featured{position:relative}
.featured-carousel{
    position:relative;display:block;overflow:auto;white-space:nowrap;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;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;
}
.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 cho carousel */
.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;
    box-shadow:0 6px 16px rgba(0,0,0,.18);transition:box-shadow .2s ease,transform .1s ease;
}
.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}