/* =========================================
 * Pages: home.php
 * Author: Thanh ??
 * Note: Auto-extracted from inline <style>
 * ========================================= */
/* HIỆU ỨNG CHỮ LẤP LÁNH CHO TÁC GIẢ VIP */
    .text-vip-sparkle {
        background: linear-gradient(90deg, #d97706, #fbbf24, #f59e0b, #fef08a, #d97706);
        background-size: 200% auto;
        color: transparent !important;
        -webkit-background-clip: text;
        background-clip: text;
        animation: vipSparkle 3s linear infinite;
        font-weight: 800 !important;
        text-shadow: 0px 0px 8px rgba(251, 191, 36, 0.4);
    }
    @keyframes vipSparkle {
        0% { background-position: 0% center; }
        100% { background-position: 200% center; }
    }

    body, .layout-wrapper { margin-top: 0 !important; }
    header { margin-bottom: 0 !important; } 

    .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; }
    h2.sec-title { margin: 0; font-size: inherit; font-weight: inherit; }
    h3.novel-name, h3.update-name, h3.h-title { margin: 0; font-size: inherit; font-weight: inherit; }

    .novel-card, .update-card, .full-card { position: relative; }
    
    .thumb-badges {
        position: absolute;
        top: 6px;
        left: 6px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        z-index: 10;
        pointer-events: none;
    }
    
    .t-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 6px;
        font-size: 10px;
        font-weight: 700;
        color: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        line-height: 1;
        letter-spacing: 0.5px;
    }
    
    .t-badge i { font-size: 11px; margin-right: 3px; font-weight: normal; }
    .t-badge.b-exclusive { background: linear-gradient(135deg, #f59e0b, #d97706); } /* VIP: Cam/Vàng */
    .t-badge.b-full { background: linear-gradient(135deg, #10b981, #059669); }      /* FULL: Xanh lục */
    .t-badge.b-recommend { background: linear-gradient(135deg, #ef4444, #dc2626); } /* HOT: Đỏ */
    .t-badge.b-nominate { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }  /* ĐỀ CỬ: Tím */

    .hero-slider-fullwidth {
        width: 100%; height: 420px; position: relative; background: #000; margin-bottom: 30px; 
    }
    .hero-swiper { width: 100%; height: 100%; }
    .swiper-slide { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; height: 100%; }

    .slide-bg {
        position: absolute; top: -20px; left: -20px; right: -20px; bottom: -20px;
        background-size: cover; background-position: center;
        filter: blur(5px) saturate(100%) brightness(0.8); transform: scale(1.1); z-index: 1;
    }
    
    .slide-overlay {
        position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 40%, rgba(15, 23, 42, 0.9) 100%);
        z-index: 2;
    }

    .slide-content-wrapper { position: relative; z-index: 3; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; min-height: inherit; }
    .slide-content { display: flex; align-items: center; gap: 40px; width: 100%; }
    
    .slide-thumb-wrap { flex-shrink: 0; width: 200px; height: 280px; }
    .slide-thumb {
        width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.1); display: block; 
    }
    
    .slide-info { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; color: #fff; }

    .slide-badge {
        display: inline-flex; align-items: center; gap: 6px;
        background: rgba(239, 68, 68, 0.15); color: #fca5a5; font-size: 11px;
        font-weight: 700; padding: 5px 12px; border-radius: 6px; margin-bottom: 12px;
        letter-spacing: 0.5px; border: 1px solid rgba(239, 68, 68, 0.3);
    }
    .slide-badge.exclusive-badge { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.3); }

    .slide-title {
        font-family: 'Merriweather', serif; font-size: 32px; font-weight: 700; margin: 0 0 15px 0;
        line-height: 1.4; color: #f8fafc; text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 100%; 
    }
    
    .slide-meta {
        display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14px;
        color: #cbd5e1; margin-bottom: 20px; font-weight: 400; width: 100%; text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    }
    .slide-meta span { display: flex; align-items: center; gap: 5px; }
    .slide-meta i { color: #94a3b8; font-size: 16px; }

    .meta-divider { color: #64748b; font-size: 12px; margin: 0 4px; }
    .meta-author { color: #e2e8f0; }
    .meta-author i { color: #cbd5e1; }
    .meta-author strong { font-weight: 600; }
    
    .slide-desc {
        font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; line-height: 1.6; color: #94a3b8; margin-bottom: 25px;
        max-width: 800px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 100%;
    }
    
    .slide-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color: #fff; padding: 8px 15px; border-radius: 6px;
        font-weight: 600; font-size: 15px; text-decoration: none; transition: all 0.3s ease; border: none; white-space: nowrap; 
        box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4); text-transform: uppercase; letter-spacing: 0.5px;
    }
    .slide-btn i { font-size: 18px; margin-top: -1px; } 
    .slide-btn:hover { background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(79, 70, 229, 0.6); }
    
    .swiper-pagination { bottom: 15px !important; }
    .swiper-pagination-bullet { background: #fff !important; opacity: 0.3; width: 8px; height: 8px; transition: all 0.3s ease; border-radius: 4px; }
    .swiper-pagination-bullet-active { opacity: 1 !important; background: #6366f1 !important; width: 24px; }

    @media (max-width: 768px) {
        .hero-slider-fullwidth { height: auto; min-height: 250px; margin-bottom: 20px; }
        .hero-swiper { height: auto; }
        .swiper-slide { height: auto; padding: 30px 15px 60px 15px; }
        .slide-content-wrapper { padding: 0; }
        .slide-content { flex-direction: column; align-items: center; gap: 15px; }
        .slide-info { align-items: center; text-align: center; }
        .slide-badge { font-size: 10px; padding: 4px 8px; }
        .slide-title { font-size: 18px; margin-bottom: 10px; line-height: 1.4; -webkit-line-clamp: 3; }
        .slide-meta { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 12px; margin-bottom: 15px; }
        .meta-divider { display: inline-block; }
        .slide-info .slide-meta i { font-size: 14px; }
        .slide-info .slide-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; font-size: 13px; line-height: 1.5; color: #cbd5e1; margin-bottom: 20px; padding: 0 10px; }
        .slide-btn { padding: 5px 15px; font-size: 13px; margin-bottom: 5px; border-radius: 6px }
        .slide-thumb-wrap { width: 55%; height: auto; max-width: 180px; }
    }

        @media (max-width: 414px) {
            .slide-thumb {
                height: auto !important;
            }
        }

        /* CHỈNH LẠI HIỂN THỊ ICON ĐỒNG BỘ */
    .icon-meta { display: inline-flex; align-items: center; gap: 4px; }
    .icon-meta i { font-size: 13px; }

    /* =========================================
       ANIMATION CHO TRANG CHỦ
       ========================================= */

        /* 1. FADE IN + SLIDE UP KHI SCROLL VÀO VIEW */
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .animate-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* 2. STAGGER CHO CÁC CARD TRONG GRID - chậm dần */
    .novel-grid .animate-on-scroll { transition-delay: 0s; }
    .novel-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.0s; }
    .novel-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.06s; }
    .novel-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.12s; }
    .novel-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.18s; }
    .novel-grid .animate-on-scroll:nth-child(5) { transition-delay: 0.24s; }
    .novel-grid .animate-on-scroll:nth-child(6) { transition-delay: 0.3s; }
    .novel-grid .animate-on-scroll:nth-child(7) { transition-delay: 0.36s; }
    .novel-grid .animate-on-scroll:nth-child(8) { transition-delay: 0.42s; }
    .novel-grid .animate-on-scroll:nth-child(9) { transition-delay: 0.48s; }
    .novel-grid .animate-on-scroll:nth-child(10) { transition-delay: 0.54s; }
    .novel-grid .animate-on-scroll:nth-child(11) { transition-delay: 0.6s; }
    .novel-grid .animate-on-scroll:nth-child(12) { transition-delay: 0.66s; }
    .novel-grid .animate-on-scroll:nth-child(13) { transition-delay: 0.72s; }
    .novel-grid .animate-on-scroll:nth-child(14) { transition-delay: 0.78s; }
    .novel-grid .animate-on-scroll:nth-child(15) { transition-delay: 0.84s; }

    /* Update grid stagger */
    .update-grid .animate-on-scroll { transition-delay: 0s; }
    .update-grid .animate-on-scroll:nth-child(1) { transition-delay: 0.0s; }
    .update-grid .animate-on-scroll:nth-child(2) { transition-delay: 0.06s; }
    .update-grid .animate-on-scroll:nth-child(3) { transition-delay: 0.12s; }
    .update-grid .animate-on-scroll:nth-child(4) { transition-delay: 0.18s; }
    .update-grid .animate-on-scroll:nth-child(5) { transition-delay: 0.24s; }
    .update-grid .animate-on-scroll:nth-child(6) { transition-delay: 0.3s; }
    .update-grid .animate-on-scroll:nth-child(7) { transition-delay: 0.36s; }
    .update-grid .animate-on-scroll:nth-child(8) { transition-delay: 0.42s; }
    .update-grid .animate-on-scroll:nth-child(9) { transition-delay: 0.48s; }
    .update-grid .animate-on-scroll:nth-child(10) { transition-delay: 0.54s; }

    /* 3. NOVEL CARD - HOVER NÂNG + BORDER GLOW */
        .novel-card, .full-card {
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.3s ease,
                    border-color 0.2s ease;
        will-change: transform;
        border: 1px solid var(--border-color, transparent);
        overflow: hidden;           /* [FIX] Chống lòi ảnh ra ngoài khi hover scale */
        border-radius: 8px;         /* [FIX] Đảm bảo border-radius khi overflow hidden */
    }
    .novel-thumb {
        transition: transform 0.3s ease; /* [FIX] Transition mượt cho ảnh */
        width: 100%;
        display: block;
    }
    .novel-card:hover .novel-thumb {
        /* transform: scale(1.08);     [FIX] Zoom ảnh thay vì zoom nguyên card */
    }
    .novel-card:hover, .full-card:hover {
        transform: translateY(-6px); /* [FIX] Bỏ scale(1.02) gốc gây lòi ảnh */
        box-shadow: 0 12px 28px rgba(99, 102, 241, 0.15);
        border-color: rgba(99, 102, 241, 0.3);
    }

    /* 4. UPDATE CARD - HOVER NHẸ HƠN */
    .update-card {
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                    box-shadow 0.3s ease;
        will-change: transform;
    }
    .update-card:hover {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 8px 20px rgba(99, 102, 241, 0.12);
    }

    /* 5. SECTION HEADING - GẠCH CHÂN ĐỘNG KHI SCROLL VÀO */
    .sec-head {
        position: relative;
        margin-bottom: 15px;
        overflow: hidden;
    }
    .sec-head::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 3px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--primary), transparent);
        transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .sec-head.visible::after {
        width: 80px;
    }

    /* 6. HISTORY CARD - HOVER NHẸ */
    .history-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .history-card:hover {
        transform: translateY(-3px) scale(1.01);
    }

    /* 7. CTA SECTION - SCALE NHẸ KHI HOVER */
    .author-cta-section {
        transition: transform 0.3s ease;
    }
    .author-cta-section:hover {
        transform: scale(1.005);
    }

    /* 8. VIEW ALL LINK - HOVER DỊCH PHẢI */
    .view-all {
        transition: all 0.2s ease;
    }
    .view-all:hover {
        transform: translateX(3px);
    }

    /* 9. BADGE PULSE (HOT, ĐỀ CỬ) */
    .t-badge.b-recommend {
        animation: badgePulseRed 2.5s ease-in-out infinite;
    }
    @keyframes badgePulseRed {
        0%, 100% { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        50% { box-shadow: 0 2px 12px rgba(239, 68, 68, 0.5); }
    }
    .t-badge.b-nominate {
        animation: badgePulsePurple 2.5s ease-in-out infinite;
    }
    @keyframes badgePulsePurple {
        0%, 100% { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
        50% { box-shadow: 0 2px 12px rgba(139, 92, 246, 0.5); }
    }

    /* =========================================
       HISTORY SECTION - TIẾP TỤC ĐỌC
       ========================================= */
    .history-section {
        background: var(--bg-card);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .history-section .sec-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    .history-section .sec-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .history-section .sec-title i {
        font-size: 20px;
    }
    .history-empty {
        text-align: center;
        padding: 40px 20px;
    }
    .history-empty .empty-icon {
        font-size: 36px;
        color: #94a3b8;
        display: block;
        margin-bottom: 10px;
    }
    .history-empty .empty-text {
        font-size: 14px;
        color: var(--text-sec);
        margin-bottom: 12px;
    }
    .history-empty .empty-link {
        font-size: 13px;
        color: var(--primary);
        font-weight: 600;
        text-decoration: none;
    }
    .history-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .history-card {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 8px;
        background: var(--bg-body);
        text-decoration: none;
        transition: all 0.2s ease;
        border: 1px solid transparent;
    }
    .history-card:hover {
        background: var(--bg-hover, rgba(99, 102, 241, 0.04));
        border-color: rgba(99, 102, 241, 0.15);
        transform: translateX(3px);
    }
    .history-card .thumb {
        width: 48px;
        height: 64px;
        flex-shrink: 0;
        border-radius: 4px;
        overflow: hidden;
    }
    .history-thumb {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .history-info {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .h-title {
        font-size: 13px;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }
    .h-meta {
        font-size: 12px;
        color: var(--primary);
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .h-meta i {
        font-size: 13px;
    }
    .h-time {
        font-size: 11px;
        color: #94a3b8;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .h-time i {
        font-size: 12px;
    }
    @media (max-width: 768px) {
        .history-section {
            padding: 15px;
            margin-left: -12px;
            margin-right: -12px;
            border-radius: 0;
        }
        .history-card {
            padding: 8px 10px;
        }
    }

    /* 10. TÔN TRỌNG NGƯỜI DÙNG YẾU ANIMATION */
    @media (prefers-reduced-motion: reduce) {
        .animate-on-scroll { opacity: 1; transform: none; transition: none; }
        .novel-card:hover, .full-card:hover, .update-card:hover { transform: none; }
        .sec-head::after { display: none; }
        .t-badge.b-recommend, .t-badge.b-nominate { animation: none; }
    }