/* =========================================
   CSS TỐI ƯU RIÊNG CHO TRANG CHỦ VIFASO
   ========================================= */
.vifaso-section { padding: 80px 5%; }
.vifaso-container { max-width: 1200px; margin: 0 auto; }
.section-title { font-size: 32px; font-weight: 800; color: #0f172a; text-align: center; margin-bottom: 12px; }
.section-subtitle { font-size: 16px; color: #64748b; text-align: center; max-width: 750px; margin: 0 auto 50px auto; line-height: 1.6; }

/* Custom Swiper Hero Banner */
.hero-swiper { width: 100%; height: 550px; position: relative; }
.hero-slide-item {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    padding: 0 5%;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.92), rgba(11, 99, 61, 0.80));
    z-index: 1;
}

/* Trust Metrics Grid */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 25px; text-align: center; }
.metric-card { background: #ffffff; padding: 30px 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border-bottom: 4px solid #0b633d; }
.metric-number { font-size: 38px; font-weight: 800; color: #0b633d; margin-bottom: 5px; }
.metric-label { font-size: 14px; color: #475569; font-weight: 600; }

/* Service Link Item */
.service-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: #f8fafc;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}
.service-link-item:hover {
    background: #ffffff;
    border-color: #0b633d;
    color: #0b633d;
    box-shadow: 0 4px 15px rgba(11, 99, 61, 0.1);
    transform: translateX(4px);
}

/* Form Inputs */
.form-input { width: 100%; padding: 14px 18px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 15px; outline: none; margin-bottom: 15px; box-sizing: border-box; }
.form-input:focus { border-color: #0b633d; }

/* Custom Swiper Pagination / Buttons */
.swiper-button-next, .swiper-button-prev { color: #4ade80 !important; }
.swiper-pagination-bullet-active { background: #4ade80 !important; }

/* ==========================================================================
   FIX LỖI RESPONSIVE FORM ĐĂNG KÝ TƯ VẤN (#bao-gia) TRÊN MOBILE
   ========================================================================== */

@media screen and (max-width: 992px) {
    /* 1. Chuyển Layout từ 2 cột về 1 cột dọc duy nhất */
    #bao-gia .vifaso-container {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    /* 2. Điều chỉnh lại padding & font chữ khối bên trái */
    #bao-gia h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center;
    }

    #bao-gia p {
        font-size: 14px !important;
        text-align: center;
    }

    #bao-gia .vifaso-container > div:first-child > div {
        align-items: center;
        text-align: center;
    }

    /* 3. Tối ưu lại khung Form đăng ký trên mobile */
    #bao-gia div[style*="background: #ffffff"] {
        padding: 20px 15px !important; /* Giảm padding từ 35px xuống 15px để vừa màn hình */
        border-radius: 10px !important;
    }

    #bao-gia h3 {
        font-size: 17px !important;
        margin-bottom: 15px !important;
    }

    /* 4. Điều chỉnh input và nút submit */
    #bao-gia .form-input {
        padding: 10px 12px !important;
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }

    #bao-gia button[type="submit"] {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .vifaso-section { padding: 50px 5%; }
    .section-title { font-size: 26px; }
    .hero-swiper { height: auto; min-height: 520px; }
    .d-none-mobile { display: none !important; }
}

/* ==========================================================================
   TỐI ƯU HERO BANNER & RESPONSIVE TRÊN MOBILE (VIFASO HOME)
   ========================================================================== */

@media (max-width: 768px) {
    /* Đảm bảo chiều cao slider banner tự động co giãn theo nội dung trên điện thoại */
    .hero-swiper {
        height: auto !important;
        min-height: 480px;
    }

    .hero-slide-item {
        padding: 40px 20px !important;
    }

    /* Tùy chỉnh bố cục grid trong slide thành 1 cột trên mobile */
    .hero-slide-item .vifaso-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: left;
    }

    /* Thu nhỏ tiêu đề chính trên mobile để không bị tràn màn hình */
    .hero-slide-item h1,
    .hero-slide-item h2 {
        font-size: 26px !important;
        line-height: 1.3 !important;
    }

    /* Thu nhỏ đoạn văn bản mô tả */
    .hero-slide-item p {
        font-size: 14px !important;
        margin-bottom: 20px !important;
    }

    /* Xếp dọc nhóm nút bấm CTA (Xem dịch vụ & Khám phá) để tránh đè chữ */
    .hero-slide-item div[style*="display: flex; gap: 15px;"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .hero-slide-item div[style*="display: flex; gap: 15px;"] a {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Ẩn bớt các nút điều hướng mũi tên Swiper trên màn hình quá nhỏ nếu chật chội */
    .hero-swiper .swiper-button-next, 
    .hero-swiper .swiper-button-prev {
        display: none !important;
    }
}