/* css/style.css */
body {
    background-color: #f4f6f8; /* Màu nền xám nhạt giúp card sản phẩm nổi bật */
}

/* Hiệu ứng Hover cho sản phẩm giống đề bài yêu cầu */
.product-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover {
    transform: translateY(-5px); /* Nổi lên trên */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Chỉnh lại màu nút Danger của Bootstrap cho giống màu đỏ của dienthoaiviet */
.btn-danger, .bg-danger {
    background-color: #e50000 !important;
    border-color: #e50000 !important;
}
/* Mở file css/style.css và thêm đoạn này xuống dưới cùng */

.product-card .card-img-top {
    height: 250px; /* Bạn có thể tăng giảm số này tùy ý (ví dụ 200px, 300px) */
    width: 100%;
    object-fit: contain; /* Ép ảnh vừa vặn khung, không bị méo */
    padding: 15px; /* Tạo khoảng lùi vào cho ảnh đỡ sát viền */
}
/* =========================================
   LÀM MỊN GIAO DIỆN (UI/UX TWEAKS)
   ========================================= */

/* 1. Làm mịn thẻ sản phẩm */
.product-card {
    border-radius: 12px; /* Bo tròn các góc của thẻ mềm mại hơn */
    overflow: hidden;
    transition: all 0.3s ease; /* Làm mượt mọi sự thay đổi trong 0.3 giây */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03) !important; /* Bóng đổ mặc định rất nhạt */
}

/* Hiệu ứng nhấc bổng thẻ khi di chuột vào */
.product-card:hover {
    transform: translateY(-8px); /* Nổi lên trên 8px */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important; /* Bóng đổ tỏa rộng và đậm hơn một chút */
}

/* 2. Làm mịn ảnh bên trong thẻ */
.product-card .card-img-top {
    transition: transform 0.4s ease; /* Hiệu ứng mượt cho ảnh */
}

/* Phóng to ảnh lên một chút xíu (zoom in) khi di chuột vào thẻ */
.product-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Entry animation for product cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    width: 100%;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(0, 0, 0, 0.12);
    border-top-color: #e50000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 3. Làm mịn tất cả các nút bấm */
.btn {
    border-radius: 8px; /* Bo góc nút bấm */
    transition: all 0.2s ease-in-out; 
}

/* Khi bấm hoặc di chuột, nút có cảm giác đàn hồi nhẹ */
.btn:hover {
    transform: scale(1.03); 
    box-shadow: 0 5px 15px rgba(229, 0, 0, 0.3); /* Ánh sáng đỏ tỏa ra quanh nút */
}
.btn:active {
    transform: scale(0.97); /* Nút lún xuống khi click */
}
/* =========================================
   BANNER MINI - HIỆU ỨNG GAUSSIAN BLUR
   ========================================= */

/* Làm mịn và bo góc toàn bộ khối banner */
.banner-mini {
    border-radius: 16px !important; /* Bo góc tròn thật đẹp */
    overflow: hidden;               /* Cắt đi các phần mờ bị tràn ra ngoài */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); /* Đổ bóng nhẹ cho banner nổi lên */
}

/* Ép chiều cao dẹt lại cho gọn gàng */
.banner-content {
    position: relative;
    min-height: 160px; /* Chiều cao cực kỳ thanh mảnh */
    overflow: hidden;
}

/* Lớp 1: Ảnh nền phía sau bị làm mờ (Gaussian Blur) */
.banner-blur-bg {
    position: absolute;
    /* Phóng to nền ra một chút (-15px) để viền mờ không bị lem màu trắng */
    top: -15px; right: -15px; bottom: -15px; left: -15px; 
    background-size: cover;
    background-position: center;
    filter: blur(12px); /* Đây chính là dòng tạo ra hiệu ứng Gaussian Blur */
    z-index: 0;
}

/* Lớp 2: Lớp phủ màu đỏ/đen trong suốt để chữ nổi bật lên trên nền mờ */
/* Lớp 2: Lớp phủ màu đen nhạt để chữ trắng nổi bật lên trên nền mờ */
.banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Đổi từ màu đỏ rgba(220, 53, 69, 0.7) sang màu đen mờ 40% */
    background: rgba(0, 0, 0, 0.4); 
    z-index: 1;
}

/* Lớp 3: Nội dung chữ và nút bấm */
.content-wrapper {
    z-index: 2; /* Đẩy nội dung lên lớp cao nhất để không bị mờ */
    position: relative;
}

/* Làm cho nút bấm nhỏ gọn lại cho phù hợp với banner dẹt */
.btn-xs {
    padding: 0.35rem 1.5rem;
    font-size: 0.85rem;
}

/* =========================================
   SIDE BANNERS (LEFT & RIGHT)
   ========================================= */
.side-banner {
    position: fixed;
    top: 220px;
    width: 110px;
    height: 480px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none; /* Ẩn mặc định trên màn hình nhỏ */
}

/* Chỉ hiển thị banner 2 bên trên màn hình rất lớn (desktop) để không đè vào nội dung */
@media (min-width: 1400px) {
    .side-banner {
        display: block;
    }
}

.side-banner-left {
    left: 16px;
}

.side-banner-right {
    right: 16px;
}

.side-banner-bg {
    position: absolute;
    top: -15px; left: -15px; right: -15px; bottom: -15px; /* Mở rộng ra để viền blur không bị lỗi */
    background-size: cover;
    background-position: center;
    filter: blur(8px); /* Gaussian Blur */
    z-index: 0;
}

.side-banner-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
}

/* Màu phủ cho từng bên */
.side-banner-left .side-banner-overlay {
    background: rgba(229, 0, 0, 0.45); /* Phủ đỏ cho Điện thoại */
}

.side-banner-right .side-banner-overlay {
    background: rgba(0, 0, 0, 0.55); /* Phủ đen cho Laptop */
}

.side-banner-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 16px 8px;
    color: white;
    text-align: center;
}

.side-banner-badge {
    background: #ffc107;
    color: #000;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    text-transform: uppercase;
    animation: pulse 1.5s infinite; /* Hiệu ứng đập nhẹ */
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.side-banner-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    margin: 15px 0;
}

.side-banner-img {
    width: 80%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.35);
    background: white;
    padding: 4px;
    object-fit: contain;
}