/* 1. Tùy chỉnh Font chữ và Màu nền cơ bản */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa; /* Màu nền xám nhạt cho hiện đại */
}

/* 2. Header: Giữ phong cách hồng đặc trưng của bạn */
header {
    font-family: 'Playfair Display', serif;
    background-color: rgba(255, 0, 242, 0.35); /* Màu hồng của bạn */
    color: black;
    text-align: center;
    padding: 20px 0;
}

/* 3. Navbar: Tùy chỉnh màu sắc khác với mặc định của Bootstrap */
.custom-nav {
    background-color: rgba(43, 61, 226, 0.8) !important; /* Màu xanh của bạn */
}
.navbar .nav-link {
    color: white !important;
    transition: 0.3s;
}
.navbar .nav-link:hover {
    color: #ffc107 !important; /* Đổi màu vàng khi di chuột qua */
}

/* 4. QUAN TRỌNG: Link bao quanh ảnh và tên xe */
.product-link {
    text-decoration: none; /* Bỏ gạch chân của link */
    color: inherit;       /* Giữ nguyên màu chữ đen của tên xe */
    display: block;       /* Bao trùm toàn bộ khối */
}

/* 5. Hình ảnh sản phẩm: Đảm bảo tất cả ảnh đều bằng nhau */
.img-fix {
    height: 200px;
    width: 100%;
    object-fit: cover; /* Cắt ảnh vừa khung mà không bị méo */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    transition: 0.3s;
}

/* Hiệu ứng làm mờ nhẹ ảnh khi rê chuột vào để báo hiệu có thể click */
.product-link:hover .img-fix {
    opacity: 0.85;
}

/* 6. Hiệu ứng cho Card sản phẩm */
.card {
    transition: transform 0.3s, box-shadow 0.3s;
    border: none; /* Bỏ viền mặc định */
    overflow: hidden;
}
.card:hover {
    transform: translateY(-10px); /* Nhảy nhẹ lên khi di chuột vào */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important;
}

/* 7. Sidebar: Giữ màu xanh dương như cũ */
.sidebar-box {
    background-color: #199cff;
    color: white;
}
.sidebar-box .btn-outline-light:hover {
    background-color: white;
    color: #199cff;
}

/* 8. Footer: Tùy chỉnh lại cho sang trọng */
footer {
    background-color: #212529;
    color: white;
}
footer h5 {
    border-bottom: 2px solid #ffc107;
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

/* 9. Nút bấm: Kế thừa từ class button4 cũ của bạn */
.btn-success {
    background-color: #04AA6D; /* Giữ màu xanh lá bạn thích */
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 12px; /* Độ bo góc của button4 */
    transition: 0.3s;
    color: white;
    text-decoration: none;
}
.btn-success:hover {
    background-color: #038d5b;
    transform: scale(1.05);
    color: white;
}