/* Sử dụng Font chữ hiện đại */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa; /* Màu nền xám rất nhạt cho sang */
}

/* Banner Hero */
.hero-banner {
    background: linear-gradient(45deg, #007bff, #6610f2); /* Màu gradient xanh tím */
}

/* Hiệu ứng Card sản phẩm */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Khi di chuột vào khung sản phẩm */
.product-card:hover {
    transform: translateY(-5px); /* Bay lên nhẹ */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Đổ bóng đậm hơn */
}

/* Hiệu ứng ảnh sản phẩm zoom nhẹ */
.product-img {
    transition: transform 0.3s ease;
}

.product-card:hover .product-img {
    transform: scale(1.05); /* Phóng to ảnh 5% */
}

/* Sidebar Link */
.list-group-item {
    transition: background 0.2s;
}
.list-group-item:hover {
    background-color: #f1f1f1;
    color: #007bff !important;
}
/* CSS cho Banner Ảnh nền */
.hero-banner {
    /* 1. Đường dẫn đến ảnh của bạn */
    background-image: url('https://cdn.tgdd.vn//News/1173869//23-730x408-1.jpg'); /* Thay link ảnh của bạn vào đây */
    
    /* 2. Căn chỉnh ảnh */
    background-size: cover; /* Ảnh tự co giãn để phủ kín khung */
    background-position: center; /* Ảnh luôn nằm giữa */
    background-repeat: no-repeat; /* Không lặp lại ảnh */
    
    /* 3. (Tùy chọn) Thêm lớp phủ đen mờ để dễ đọc chữ trắng */
    /* Nếu không thích phủ đen, bạn xóa dòng linear-gradient này đi và chỉ để lại url(...) */
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://www.innovationnewsnetwork.com/wp-content/uploads/2021/02/Primordial-galaxy-1024x576.jpg');

    /* Tăng độ cao một chút cho thoáng */
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}