/* ========================================
   PHẦN 1: ĐỊNH NGHĨA BIẾN CSS (CSS VARIABLES)
   ======================================== */

/* :root là selector đặc biệt để định nghĩa biến toàn cục
   Biến CSS giúp tái sử dụng màu sắc và giá trị dễ dàng */
:root {
    --ferrari-red: #DC0000; /* Màu đỏ chính của Ferrari */
    --ferrari-yellow: #FFF200; /* Màu vàng logo Ferrari */
    --ferrari-black: #000000; /* Màu đen cho background */
    --ferrari-white: #FFFFFF; /* Màu trắng cho chữ */
    --ferrari-gray: #2C2C2C; /* Màu xám đậm cho thẻ sản phẩm */
    --ferrari-light-gray: #F5F5F5; /* Màu xám nhạt (dự phòng) */
}

/* ========================================
   PHẦN 2: RESET CSS CƠ BẢN
   ======================================== */

/* * là selector chọn TẤT CẢ các element trong trang */
* {
    margin: 0; /* Xóa margin mặc định của trình duyệt */
    padding: 0; /* Xóa padding mặc định của trình duyệt */
    box-sizing: border-box; /* Tính width/height bao gồm cả padding và border */
}

/* ========================================
   PHẦN 3: STYLING CHO BODY (TOÀN TRANG)
   ======================================== */

body {
    /* Font chữ theo thứ tự ưu tiên: nếu không có Segoe UI thì dùng Roboto... */
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    /* Sử dụng biến CSS đã định nghĩa ở trên với var() */
    background-color: var(--ferrari-black); /* Nền đen */
    color: var(--ferrari-white); /* Chữ trắng */

    line-height: 1.6; /* Khoảng cách giữa các dòng chữ (1.6 lần font-size) */
}

/* ========================================
   PHẦN 4: HERO SECTION (BANNER ĐẦU TRANG)
   ======================================== */

.hero-section {
    height: 70vh; /* Chiều cao = 70% viewport height (70% chiều cao màn hình) */
    /* Gradient overlay + background image */
    /* linear-gradient tạo lớp phủ tối để chữ dễ đọc hơn */
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=1600');
    background-position: center; /* Căn giữa ảnh */
    background-size: cover; /* Ảnh phủ kꃰn toàn bộ khung, cắt phần thừa */
    background-repeat: no-repeat; /* Không lặp lại ảnh */
    /* Flexbox để căn giữa nội dung */
    display: flex; /* Bật chế độ flexbox */
    align-items: center; /* Căn giữa theo chiều dọc */
    justify-content: center; /* Căn giữa theo chiều ngang */

    position: relative; /* Tạo context cho các element con có position: absolute */
    overflow: hidden; /* Ẩn phần nội dung tràn ra ngoài */
}

.hero-overlay {
    text-align: center; /* Căn giữa text */
    z-index: 2; /* Đưa lên trên background (số càng cao càng trên) */
    animation: fadeInUp 1s ease-out; /* Chạy animation fadeInUp trong 1 giây */
}

.hero-title {
    font-size: 5rem; /* Kích thước chữ = 5 x root font size (thường 16px) = 80px */
    font-weight: 900; /* Độ đậm tối đa (100-900) */
    letter-spacing: 8px; /* Khoảng cách giữa các chữ cái */
    color: var(--ferrari-white); /* Màu trắng */
    text-shadow: 0 0 30px rgba(220, 0, 0, 0.8); /* Bóng đổ phát sáng màu đỏ */
    margin-bottom: 20px; /* Khoảng cách phía dưới */
}

.hero-subtitle {
    font-size: 1.5rem; /* 24px */
    letter-spacing: 3px; /* Khoảng cách chữ */
    color: var(--ferrari-yellow); /* Màu vàng */
    font-weight: 300; /* Chữ mỏng */
}

/* ========================================
   PHẦN 5: PRODUCTS CONTAINER (KHUNG CHỨA SẢN PHẨM)
   ======================================== */

.products-container {
    max-width: 1400px; /* Chiều rộng tối đa */
    margin: 80px auto; /* 80px trên/dưới, auto trái/phải (căn giữa) */
    padding: 0 40px; /* Padding 0 trên/dưới, 40px trái/phải */
}

/* ========================================
   PHẦN 6: SECTION HEADER (TIÊU ĐỀ PHẦN)
   ======================================== */

.section-header {
    text-align: center; /* Căn giữa text */
    margin-bottom: 60px; /* Khoảng cách phía dưới */
}

    /* Selector lồng: .section-header h2 = thẻ h2 BÊN TRONG .section-header */
    .section-header h2 {
        font-size: 3rem; /* 48px */
        color: var(--ferrari-white); /* Màu trắng */
        letter-spacing: 4px; /* Khoảng cách chữ */
        margin-bottom: 15px;
        position: relative; /* Cần thiết để ::after có thể định vị tuyệt đối */
        display: inline-block; /* Để ::after chỉ rộng bằng chữ, không full width */
    }

        /* ::after là pseudo-element (phần tử giả) - tạo element sau h2 */
        .section-header h2::after {
            content: ''; /* Bắt buộc phải có, để tạo element (để trống) */
            position: absolute; /* Định vị tuyệt đối so với h2 */
            bottom: -10px; /* Cách đáy h2 10px */
            left: 50%; /* Bắt đầu từ giữa */
            transform: translateX(-50%); /* Dịch ngược lại 50% width để căn giữa hoàn hảo */
            width: 100px; /* Chiều rộng gạch ngang */
            height: 3px; /* Chiều cao gạch ngang */
            background: var(--ferrari-red); /* Màu đỏ */
        }

    .section-header p {
        color: #aaa; /* Màu xám nhạt */
        font-size: 1.1rem; /* 17.6px */
        margin-top: 25px;
    }

/* ========================================
   PHẦN 7: PRODUCTS GRID (LƯỚI SẢN PHẨM)
   ======================================== */

.products-grid {
    display: grid; /* Bật chế độ CSS Grid Layout */
    /* Tự động tạo cột: tối thiểu 380px, tối đa 1fr (chia đều)
       repeat(auto-fill, ...) = tự động tạo nhiều cột vừa đủ */
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 40px; /* Khoảng cách giữa các ô trong grid */
    margin-top: 50px;
}

/* ========================================
   PHẦN 8: PRODUCT CARD (THẺ SẢN PHẨM)
   ======================================== */

.product-card {
    background: var(--ferrari-gray); /* Nền xám đậm */
    border-radius: 15px; /* Bo tròn góc 15px */
    overflow: hidden; /* Ẩn phần tràn (quan trọng cho border-radius) */
    transition: all 0.4s ease; /* Animation mượt cho TẤT CẢ thuộc tính trong 0.4s */
    cursor: pointer; /* Con trỏ chuột thành hình bàn tay */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Bóng đổ: x=0, y=5px, blur=20px */
}

    /* :hover là pseudo-class - kích hoạt khi rê chuột vào */
    .product-card:hover {
        transform: translateY(-10px); /* Dịch lên trên 10px */
        box-shadow: 0 15px 40px rgba(220, 0, 0, 0.4); /* Bóng đổ lớn hơn, màu đỏ */
    }

/* ========================================
   PHẦN 9: PRODUCT IMAGE (HÌNH ẢNH SẢN PHẨM)
   ======================================== */

.product-image {
    position: relative; /* Context cho các element con position: absolute */
    height: 250px; /* Chiều cao cố định */
    overflow: hidden; /* Ẩn phần ảnh zoom ra ngoài */
}

    .product-image img {
        width: 100%; /* Chiều rộng = 100% khung chứa */
        height: 100%; /* Chiều cao = 100% khung chứa */
        object-fit: cover; /* Cắt ảnh vừa khung, giữ tỷ lệ */
        transition: transform 0.5s ease; /* Animation cho hiệu ứng zoom */
    }

/* Khi hover vào .product-card, ảnh bên trong sẽ zoom */
.product-card:hover .product-image img {
    transform: scale(1.1); /* Phóng to 110% */
}

/* ========================================
   PHẦN 10: BADGES (NHÃN TRÊN ẢNH)
   ======================================== */

.product-badge {
    position: absolute; /* Định vị tuyệt đối so với .product-image */
    top: 15px; /* Cách đỉnh 15px */
    left: 15px; /* Cách trái 15px */
    background: var(--ferrari-red);
    color: white;
    padding: 8px 20px; /* Padding dọc=8px, ngang=20px */
    border-radius: 25px; /* Bo tròn nhiều để tạo hình viên thuốc */
    font-size: 0.85rem; /* 13.6px */
    font-weight: 600; /* Đậm vừa */
    letter-spacing: 1px;
}

.stock-badge {
    position: absolute;
    top: 15px;
    right: 15px; /* Cách phải 15px (đối diện với .product-badge) */
    background: var(--ferrari-yellow);
    color: var(--ferrari-black);
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 0.8rem;
    font-weight: 700; /* Đậm hơn */
}

/* ========================================
   PHẦN 11: PRODUCT INFO (THÔNG TIN SẢN PHẨM)
   ======================================== */

.product-info {
    padding: 30px; /* Khoảng cách bên trong đều 4 phía */
}

.product-name {
    font-size: 1.6rem; /* 25.6px */
    color: var(--ferrari-white);
    margin-bottom: 15px;
    font-weight: 700; /* Đậm */
}

.product-description {
    color: #ccc; /* Xám nhạt hơn */
    margin-bottom: 25px;
    line-height: 1.8; /* Khoảng cách dòng rộng hơn */
    font-size: 0.95rem; /* 15.2px */
}

/* ========================================
   PHẦN 12: PRODUCT FOOTER (GIÁ VÀ NÚT)
   ======================================== */

.product-footer {
    display: flex; /* Flexbox */
    justify-content: space-between; /* Đẩy 2 item ra 2 đầu */
    align-items: center; /* Căn giữa theo chiều dọc */
    margin-top: 25px;
}

.product-price {
    font-size: 2rem; /* 32px - to và nổi bật */
    color: var(--ferrari-yellow);
    font-weight: 900; /* Đậm nhất */
}

.btn-details {
    background: var(--ferrari-red);
    color: white;
    padding: 12px 30px;
    border-radius: 30px; /* Bo tròn nhiều */
    text-decoration: none; /* Bỏ gạch chân link */
    font-weight: 600;
    transition: all 0.3s ease; /* Animation mượt */
    letter-spacing: 1px;
}

    .btn-details:hover {
        background: #FF0000; /* Đỏ sáng hơn */
        transform: translateX(5px); /* Dịch sang phải 5px */
        box-shadow: 0 5px 15px rgba(220, 0, 0, 0.5); /* Bóng đổ đỏ */
    }

/* ========================================
   PHẦN 13: STATS SECTION (PHẦN THỐNG KÊ)
   ======================================== */

.stats-section {
    background: var(--ferrari-red); /* Nền đỏ toàn phần */
    padding: 60px 40px;
    margin: 80px 0; /* 80px trên/dưới, 0 trái/phải */
    display: grid; /* Grid layout */
    /* auto-fit = tự động điều chỉnh số cột, tối thiểu 200px/cột */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    text-align: center; /* Căn giữa chữ trong mỗi ô */
}

.stat-item h3 {
    font-size: 3.5rem; /* 56px - số to */
    color: var(--ferrari-yellow);
    margin-bottom: 10px;
    font-weight: 900;
}

.stat-item p {
    font-size: 1.1rem;
    color: white;
    letter-spacing: 2px;
    text-transform: uppercase; /* Chữ HOA toàn bộ */
}

/* ========================================
   PHẦN BỔ SUNG: FILTER BAR (THANH LỌC & TÌM KIẾM)
   ======================================== */

.filter-bar {
    display: flex; /* Sắp xếp các input theo hàng ngang */
    gap: 20px; /* Khoảng cách giữa các input */
    margin-bottom: 50px; /* Khoảng cách với products-grid bên dưới */
    padding: 30px; /* Khoảng cách bên trong */
    background: var(--ferrari-gray); /* Nền xám đậm giống product card */
    border-radius: 15px; /* Bo tròn góc */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); /* Bóng đổ */
    align-items: center; /* Căn giữa các input theo chiều dọc */
}

    /* Styling cho ô input text (tìm kiếm) */
    .filter-bar input[type="text"] {
        flex: 2; /* Chiếm gấp đôi width so với select/button */
        padding: 15px 20px; /* Padding trên/dưới 15px, trái/phải 20px */
        background: var(--ferrari-black); /* Nền đen */
        border: 2px solid transparent; /* Viền trong suốt ban đầu */
        border-radius: 30px; /* Bo tròn nhiều */
        color: var(--ferrari-white); /* Chữ trắng */
        font-size: 1rem; /* Kích thước chữ chuẩn */
        transition: all 0.3s ease; /* Animation mượt */
        outline: none; /* Bỏ viền xanh mặc định khi focus */
    }

        /* Placeholder text (chữ gợi ý) */
        .filter-bar input[type="text"]::placeholder {
            color: #666; /* Xám đậm */
            font-style: italic; /* Chữ nghiêng */
        }

        /* Khi click vào input */
        .filter-bar input[type="text"]:focus {
            border-color: var(--ferrari-red); /* Viền đỏ */
            box-shadow: 0 0 15px rgba(220, 0, 0, 0.3); /* Phát sáng đỏ */
        }

    /* Styling cho dropdown (select) */
    .filter-bar select {
        flex: 1; /* Chiếm 1 phần width */
        padding: 15px 20px;
        background: var(--ferrari-black);
        border: 2px solid transparent;
        border-radius: 30px;
        color: var(--ferrari-white);
        font-size: 1rem;
        cursor: pointer; /* Con trỏ chuột thành hình bàn tay */
        transition: all 0.3s ease;
        outline: none;
        /* Ẩn mũi tên mặc định của select trong một số trình duyệt */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        /* Thêm icon mũi tên tùy chỉnh */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23FFF200' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 20px center; /* Đặt icon bên phải */
        padding-right: 45px; /* Tạo khoảng trống cho icon */
    }

        /* Khi hover vào select */
        .filter-bar select:hover {
            border-color: var(--ferrari-yellow); /* Viền vàng */
        }

        /* Khi click vào select */
        .filter-bar select:focus {
            border-color: var(--ferrari-red);
            box-shadow: 0 0 15px rgba(220, 0, 0, 0.3);
        }

        /* Styling cho các option trong dropdown */
        .filter-bar select option {
            background: var(--ferrari-black); /* Nền đen */
            color: var(--ferrari-white); /* Chữ trắng */
            padding: 10px; /* Khoảng cách bên trong */
        }

    /* Styling cho nút submit */
    .filter-bar button[type="submit"] {
        flex: 0.8; /* Chiếm ít width hơn input/select */
        padding: 15px 35px;
        background: var(--ferrari-red); /* Nền đỏ */
        color: white;
        border: none;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: 700; /* Chữ đậm */
        cursor: pointer;
        transition: all 0.3s ease;
        letter-spacing: 1px; /* Khoảng cách chữ */
        text-transform: uppercase; /* Chữ HOA */
    }

        /* Hiệu ứng hover cho button */
        .filter-bar button[type="submit"]:hover {
            background: #FF0000; /* Đỏ sáng hơn */
            transform: translateY(-3px); /* Nổi lên */
            box-shadow: 0 10px 25px rgba(220, 0, 0, 0.5); /* Bóng đổ đỏ */
        }

        /* Hiệu ứng khi nhấn button */
        .filter-bar button[type="submit"]:active {
            transform: translateY(0); /* Trở về vị trí ban đầu */
            box-shadow: 0 5px 15px rgba(220, 0, 0, 0.3); /* Bóng đổ nhỏ hơn */
        }

/* ========================================
   RESPONSIVE CHO FILTER BAR
   ======================================== */

/* Tablet (≤ 1024px) */
@media (max-width: 1024px) {
    .filter-bar {
        flex-wrap: wrap; /* Cho phép xuống hàng */
        gap: 15px;
    }

        .filter-bar input[type="text"] {
            flex: 1 1 100%; /* Chiếm full width */
        }

        .filter-bar select,
        .filter-bar button[type="submit"] {
            flex: 1 1 calc(50% - 7.5px); /* Mỗi cái chiếm 50% width */
        }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column; /* Xếp dọc */
        gap: 15px;
        padding: 20px;
    }

        .filter-bar input[type="text"],
        .filter-bar select,
        .filter-bar button[type="submit"] {
            flex: 1 1 100%; /* Tất cả chiếm full width */
            width: 100%; /* Đảm bảo full width */
        }

        .filter-bar button[type="submit"] {
            padding: 18px 35px; /* Tăng padding cho dễ nhấn trên mobile */
            font-size: 1.1rem; /* Chữ to hơn */
        }
}

/* ========================================
   PHẦN 14: DETAIL PAGE (TRANG CHI TIẾT)
   ======================================== */

.detail-container {
    max-width: 1400px;
    margin: 50px auto; /* Căn giữa */
    padding: 40px;
}

.back-link {
    display: inline-block; /* Để có thể transform */
    color: var(--ferrari-yellow);
    text-decoration: none;
    font-size: 1.1rem;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

    .back-link:hover {
        color: var(--ferrari-red);
        transform: translateX(-5px); /* Dịch sang trái khi hover */
    }

/* ========================================
   PHẦN 15: DETAIL GRID (LƯỚI CHI TIẾT)
   ======================================== */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 cột bằng nhau */
    gap: 60px; /* Khoảng cách giữa 2 cột */
    background: var(--ferrari-gray);
    padding: 50px;
    border-radius: 20px;
}

.detail-image img {
    width: 100%;
    height: auto; /* Tự động tính chiều cao giữ tỷ lệ */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.detail-category {
    display: inline-block; /* Chỉ rộng bằng nội dung */
    background: var(--ferrari-red);
    color: white;
    padding: 8px 25px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.detail-title {
    font-size: 3rem; /* 48px - tiêu đề lớn */
    color: var(--ferrari-white);
    margin-bottom: 20px;
    font-weight: 900;
}

.detail-description {
    color: #ccc;
    font-size: 1.1rem;
    line-height: 2; /* Khoảng cách dòng rộng để dễ đọc */
    margin-bottom: 30px;
}

/* ========================================
   PHẦN 16: DETAIL SPECS (THÔNG SỐ KỸ THUẬT)
   ======================================== */

.detail-specs {
    background: var(--ferrari-black);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 30px;
}

.spec-item {
    display: flex;
    justify-content: space-between; /* Label bên trái, value bên phải */
    padding: 15px 0;
    border-bottom: 1px solid #444; /* Đường kẻ phân cách */
}

    /* :last-child = phần tử cuối cùng */
    .spec-item:last-child {
        border-bottom: none; /* Bỏ đường kẻ ở item cuối */
    }

.spec-label {
    color: #999; /* Xám nhạt */
    font-weight: 600;
}

.spec-value {
    color: var(--ferrari-white);
    font-weight: 700; /* Đậm hơn label */
}

.stock-available {
    color: #4CAF50; /* Xanh lá = còn hàng */
}

.stock-out {
    color: var(--ferrari-red); /* Đỏ = hết hàng */
}

/* ========================================
   PHẦN 17: DETAIL ACTIONS (NÚT HÀNH ĐỘNG)
   ======================================== */

.detail-actions {
    display: flex;
    gap: 20px; /* Khoảng cách giữa 2 nút */
    margin-bottom: 40px;
}

/* Selector nhóm: áp dụng cho CẢ 2 class */
.btn-primary, .btn-secondary {
    flex: 1; /* Chia đều width cho 2 nút */
    padding: 18px;
    border: none; /* Bỏ border mặc định của button */
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.btn-primary {
    background: var(--ferrari-red);
    color: white;
}

    .btn-primary:hover {
        background: #FF0000;
        transform: translateY(-3px); /* Nổi lên khi hover */
        box-shadow: 0 10px 25px rgba(220, 0, 0, 0.5);
    }

.btn-secondary {
    background: transparent; /* Nền trong suốt */
    color: white;
    border: 2px solid var(--ferrari-yellow); /* Viền vàng */
}

    .btn-secondary:hover {
        background: var(--ferrari-yellow); /* Đổi nền vàng khi hover */
        color: var(--ferrari-black); /* Chữ đen */
    }

/* ========================================
   PHẦN 18: DETAIL FEATURES (ĐẶC ĐIỂM)
   ======================================== */

.detail-features {
    background: rgba(0, 0, 0, 0.3); /* Đen mờ 30% */
    padding: 30px;
    border-radius: 15px;
}

    .detail-features h3 {
        color: var(--ferrari-yellow);
        margin-bottom: 20px;
        font-size: 1.5rem;
    }

    .detail-features ul {
        list-style: none; /* Bỏ dấu chấm đầu dòng mặc định */
    }

    .detail-features li {
        padding: 10px 0;
        color: #ccc;
        font-size: 1.05rem;
    }

/* ========================================
   PHẦN 19: ANIMATIONS (HIỆU ỨNG ĐỘNG)
   ======================================== */

/* @keyframes định nghĩa các bước của animation */
@keyframes fadeInUp {
    from { /* Bước đầu (0%) */
        opacity: 0; /* Trong suốt hoàn toàn */
        transform: translateY(50px); /* Ở dưới 50px */
    }

    to { /* Bước cuối (100%) */
        opacity: 1; /* Hiển thị đầy đủ */
        transform: translateY(0); /* Vị trí ban đầu */
    }
}

/* ========================================
   PHẦN 20: RESPONSIVE (THIẾT KẾ RESPONSIVE)
   ======================================== */

/* @media query kiểm tra kích thước màn hình */
/* max-width: 1024px = áp dụng khi màn hình ≤ 1024px (tablet) */
@media (max-width: 1024px) {
    .detail-grid {
        grid-template-columns: 1fr; /* Chỉ 1 cột thay vì 2 */
    }

    .hero-title {
        font-size: 3.5rem; /* Giảm kích thước chữ */
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* max-width: 768px = màn hình ≤ 768px (mobile) */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem; /* Chữ nhỏ hơn nữa */
        letter-spacing: 4px; /* Giảm khoảng cách chữ */
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .products-grid {
        grid-template-columns: 1fr; /* 1 cột duy nhất trên mobile */
        gap: 30px;
    }

    .stats-section {
        grid-template-columns: repeat(2, 1fr); /* 2 cột thay vì 4 */
    }

    .detail-actions {
        flex-direction: column; /* Xếp dọc thay vì ngang */
    }
}