/* --- HOME PAGE STYLES --- */

/* 1. Global Section Spacing */
/* Tạo khoảng cách đều đặn giữa các khối, giúp trang web "dễ thở" */
.page-home .home-section {
    padding: 60px 0;
    position: relative;
}

/* Reset padding cho section slide đầu trang */
.page-home .section-slide {
    padding-top: 0;
    padding-bottom: 0;
}

/* Màu nền xen kẽ để phân cách nội dung */
.page-home .bg-light {
    background-color: #f8f9fa !important; /* Màu xám rất nhạt chuẩn Bootstrap */
}

/* 2. Dual Content Section (Phần Ưu đãi & Review) */
.page-home .section-dual-content {
    background-color: #ffffff;
    /* Nếu muốn thêm ảnh nền mờ cho khu vực này giống thiết kế cũ: */
    /* background-image: url('/path/to/your/bg.jpg'); */
    /* background-size: cover; */
}

/* Card bao quanh component con */
.page-home .home-card {
    background: #fff;
    border-radius: 16px;
    /* Đổ bóng nhẹ tạo chiều sâu */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    padding: 10px;
    border: 1px solid #f1f1f1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%; /* Để 2 cột cao bằng nhau */
}

    /* Hiệu ứng khi di chuột vào khối Ưu đãi/Review */
    .page-home .home-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 70, 186, 0.1); /* Bóng màu xanh thương hiệu */
        border-color: rgba(0, 70, 186, 0.2);
    }

/* 3. Responsive Adjustments */
@media (max-width: 768px) {
    .page-home .home-section {
        padding: 40px 0; /* Giảm padding trên mobile */
    }

    .page-home .home-card {
        padding: 20px; /* Giảm padding trong card */
    }
}