/* assets/css/style.css */

body { 
    /* Áp dụng hình nền, lớp phủ, và cố định nền cho TOÀN BỘ trang web */
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
                url('../images/avengers-endgame-2019-official-poster-th.jpg') center/cover no-repeat fixed; /* fixed: Cố định nền khi cuộn */
    font-family: 'Segoe UI', sans-serif; 
    min-height: 100vh; /* Đảm bảo body đủ dài */
    color: #fff; /* Màu chữ mặc định là trắng */
}

/* HERO: Giữ layout và chiều cao, KHÔNG có background */
.hero { 
    height: 80vh; /* Chiều cao ấn tượng */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white; 
    /* Bóng chữ cho tiêu đề lớn (không bị lớp blur làm mất) */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); 
    background: none; /* Quan trọng: Loại bỏ background trùng lặp */
}


/* SỬA LỖI TƯƠNG PHẢN CHO PHẦN PHIM NỔI BẬT */
.container {
    background-color: transparent; /* Đảm bảo các container không có nền trắng */
}

.card {
    background-color: rgba(0, 0, 0, 0.6); /* Nền card tối trong suốt */
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.card-title, .card-text {
    color: white !important;
}

.card img { 
    height: 250px; 
    object-fit: cover; 
}

.card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease-in-out;
}