/* 1. Thiết lập Font và Màu nền tổng thể */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7f6; /* Màu nền xám nhẹ cực sang */
    color: #333;
}

/* 2. Tùy chỉnh Header & Nav (Giữ tông màu bạn chọn) */
header {
    background-color: #c7cc19 !important; /* Màu vàng chanh của bạn */
}

.navbar {
    background-color: #ffa486 !important; /* Màu cam nhạt của bạn */
}
 
.nav-link {
    color: white !important;
    transition: all 0.3s ease;
}

.nav-link:hover {
    color: #333 !important;
    text-decoration: underline;
}


/* 3. Hiệu ứng thẻ sản phẩm (Product Card) */
.product-card {
    background-color: #fff;
    border: 1px solid #ddd !important;
    /* Gom tất cả transition vào 1 dòng */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Tạo hiệu ứng đặc biệt cho thẻ Pagani */
.special-card {
    border-width: 2px !important; /* Làm viền vàng dày và rõ hơn */
    transition: all 0.4s ease;
}

/* Đảm bảo tất cả ảnh siêu xe cao bằng nhau */
.product-card img {
    height: 200px;
    object-fit: cover;
    border-radius: 8px 8px 0 0; /* Bo góc trên cho ảnh khớp với thẻ card */
}

/* Hiệu ứng khi di chuột vào thẻ xe - Gộp lại cho đẹp */
.product-card:hover {
    border-color: #199cff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-10px) scale(1.02); /* Vừa bay lên vừa to ra một chút */
}

/* Hiệu ứng ảnh trong chi tiết sản phẩm (Dành cho trang chitiet1.html) */
.product-img {
    transition: transform 0.5s ease;
    cursor: zoom-in;
    border-radius: 15px;
}

.product-img:hover {
    transform: scale(1.05);
}




.special-card:hover {
    /* Hiệu ứng đổ bóng phát sáng màu vàng Gold */
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6) !important;
    transform: translateY(-10px); /* Xe hơi bay nhẹ lên khi hover */
}

/* Đổi màu tiêu đề Pagani cho đồng bộ */
.special-card h5.text-warning {
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Hiệu ứng cho nút bấm màu vàng */
.special-card .btn-warning:hover {
    background-color: #000 !important; /* Chuyển sang đen sang trọng */
    color: #ffc107 !important; /* Chữ chuyển lại màu vàng */
    border: 1px solid #ffc107;
}

.card-img-top {
    height: 200px; /* Cố định chiều cao ảnh */
    object-fit: cover; /* Cắt ảnh vừa vặn không bị móp méo */
    border-bottom: 1px solid #eee;
}
/* 4. Tùy chỉnh Sidebar */
.sidebar-card {
    background-color: #199cff !important;
    color: white;
}

.sidebar-card a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 8px;
    border-radius: 5px;
    transition: background 0.3s;
}

.sidebar-card a:hover {
    background: rgba(255,255,255,0.2);
}

/* 5. Định dạng nút bấm kiểu "Siêu xe" */
.btn-dark {
    background-color: #04AA6D !important; /* Màu xanh của bạn */
    border: none;
    padding: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-dark:hover {
    background-color: #059862 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(4, 170, 109, 0.3);
}

/* 6. Footer */
footer {
    background-color: #333;
    color: #fff;
}