/*
 * ==========================================
 * 1. CSS CHO KÉO NGANG (SCROLL HORIZONTAL)
 * ==========================================
 */

/* Container bao ngoài để chứa nút và list */
.scroll-container {
    position: relative;
}

/* Wrapper chứa nội dung cuộn */
.horizontal-scroll-wrapper {
    display: flex; /* Đảm bảo flex container */
    overflow-x: auto; /* Bật kéo ngang */
    overflow-y: hidden; /* Tắt kéo dọc */
    white-space: nowrap; /* Ngăn xuống dòng */
    padding-bottom: 15px; /* Tạo khoảng trống cho thanh cuộn (dù đã ẩn) */
    scroll-behavior: smooth; /* Hiệu ứng cuộn mượt */
    
    /* Ẩn thanh cuộn cho IE, Edge và Firefox */
    -ms-overflow-style: none;  
    scrollbar-width: none;  
}

/* Ẩn thanh cuộn cho Chrome, Safari, Opera */
.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none; 
}

/* Nội dung bên trong wrapper */
.horizontal-scroll-content {
    display: flex;
    flex-wrap: nowrap; /* Bắt buộc nằm trên 1 hàng */
    gap: 0.75rem; /* Khoảng cách giữa các item (12px) */
}

/*
 * ==========================================
 * 2. CSS CHO CÁC ITEM (PHIM & TV)
 * ==========================================
 */

/* Item cho Kênh TV */
.channel-item {
    flex: 0 0 auto; /* Không co giãn */
    width: 120px; /* Chiều rộng cố định */
}

/* Hiệu ứng hover cho Card TV */
.channel-item .card {
    transition: all 0.2s ease-in-out;
    border: 1px solid #eee;
}
.channel-item .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    border-color: #0d6efd;
}

/* Item cho Poster Phim */
.movie-scroll-item {
    flex: 0 0 auto; /* Không co giãn */
    width: 130px; /* Chiều rộng cố định cho poster dọc */
}

/*
 * ==========================================
 * 3. CSS CHO POSTER PHIM (OVERLAY & RANK)
 * ==========================================
 */

/* Lớp phủ (Overlay) mờ dần ở dưới poster */
.movie-card .badge-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Gradient từ đen mờ (85%) lên trong suốt */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    padding: 1.25rem 0.75rem 0.75rem; /* Padding trên lớn hơn để gradient mượt */
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.85rem;
    z-index: 1; /* Nằm trên ảnh */
}

/* Icon trong overlay */
.movie-card .badge-overlay i {
    margin-right: 5px;
}

/* Dấu góc (Dog-ear) hiển thị Rank cho Top Phim */
.top-rank-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    /* Tạo hình tam giác vuông góc trái trên */
    clip-path: polygon(0 0, 100% 0, 0 100%);
    z-index: 2; /* Nằm trên ảnh và overlay */
    
    /* Căn chỉnh số rank */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 5px 0 0 7px; /* Tinh chỉnh vị trí số */
}

/* Số Rank bên trong dấu góc */
.top-rank-corner span {
    color: white;
    font-weight: bold;
    font-size: 0.9rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* Bóng chữ để dễ đọc */
    /* Đẩy số nhẹ về góc trái trên */
    transform: translate(-2px, -2px); 
}

/* Màu sắc riêng cho từng thứ hạng */
.rank-1 { background-color: #FFD700; } /* Vàng (Hạng 1) */
.rank-1 span { color: #333; } /* Chữ đen cho nền vàng */

.rank-2 { background-color: #C0C0C0; } /* Bạc (Hạng 2) */
.rank-2 span { color: #333; }

.rank-3 { background-color: #CD7F32; } /* Đồng (Hạng 3) */

.rank-default { background-color: rgba(0, 0, 0, 0.7); } /* Đen mờ (Hạng 4 trở đi) */

/*
 * ==========================================
 * 4. CSS CHO NÚT ĐIỀU HƯỚNG (SCROLL BUTTONS)
 * ==========================================
 */

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Căn giữa theo chiều dọc */
    background-color: rgba(0, 0, 0, 0.5); /* Nền đen bán trong suốt */
    color: white;
    border: none;
    border-radius: 50%; /* Hình tròn */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10; /* Luôn nằm trên cùng */
    opacity: 0; /* Ẩn mặc định */
    transition: opacity 0.3s, background-color 0.2s;
}

/* Hiện nút khi di chuột vào vùng chứa */
.scroll-container:hover .scroll-btn {
    opacity: 1;
}

/* Hiệu ứng khi di chuột vào nút */
.scroll-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Vị trí nút Trái và Phải */
.scroll-btn.left { left: -20px; }
.scroll-btn.right { right: -20px; }

/* * Responsive: Ẩn nút cuộn trên thiết bị di động (Tablets & Mobile)
 * Mobile dùng cảm ứng vuốt nên không cần nút.
 */
@media (max-width: 768px) {
    .scroll-btn {
        display: none !important;
    }
    /* Tràn viền màn hình mobile để trải nghiệm vuốt tốt hơn */
    .scroll-container {
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px; 
        /* padding-right sẽ do phần tử cuối cùng lo hoặc thêm pseudo-element nếu cần */
    }
}

/* CSS cho Tên Phim (Hiển thị tối đa 2 dòng) - Đã có từ trước */
.movie-title-clamp {
    min-height: 2.4em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
}