/* public/css/introduction.css */

/* --- PAGE HEADER (Giảm chiều cao) --- */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(/img/banner/banner-1.webp) center center no-repeat;
    background-size: cover;
    margin-bottom: 1rem !important; /* Giảm margin bottom */
    padding-top: 4rem !important;    /* Giảm padding */
    padding-bottom: 4rem !important; /* Giảm padding */
} 

/* --- MÀU NỀN KEM (bg-theme-alt) --- */
.bg-theme-alt {
    background-color: #faefe0 !important; /* Màu kem giống bản gốc */
}


/* --- THẺ CARD MỚI (Ảnh vuông tràn viền) --- */
.reason-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden; /* Để ảnh bo góc theo thẻ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-bottom: 4px solid #c49963; /* Giữ lại viền màu thương hiệu ở dưới */
    height: 100%;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    padding: 0; /* Xóa padding để ảnh tràn ra mép */
}

.reason-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Khung chứa ảnh: Hình vuông (aspect-ratio: 1/1) */
.reason-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3; /* Tỷ lệ 1:1 (Hình vuông) */
    background-color: #f0f0f0;
}

/* Ảnh bên trong */
.reason-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Lấp đầy khung, cắt bớt phần thừa */
    transition: transform 0.5s ease;
}

.reason-card:hover .reason-img-wrapper img {
    transform: scale(1.1); /* Phóng to ảnh nhẹ khi hover */
}

/* Phần nội dung text */
.reason-content {
    padding: 15px;
    text-align: center;
    flex-grow: 1; /* Đẩy nội dung lấp đầy khoảng trống còn lại */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ================= MOBILE FIX ================= */
/* ================= MOBILE 2x2 COMPACT ================= */
@media (max-width: 768px) {

    /* giảm padding section */
    .container-fluid.bg-theme-alt {
        padding: 25px 10px !important;
    }

    /* giảm khoảng cách giữa card */
    .row.g-4 {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    /* card gọn lại */
    .reason-card {
        border-radius: 10px;
    }

    /* ảnh thấp hơn để card không quá dài */
    .reason-img-wrapper {
        aspect-ratio: 16/11; /* thấp hơn 4/3 */
    }

    /* giảm padding content */
    .reason-content {
        padding: 10px;
    }

    /* title nhỏ hơn */
    .reason-content h5 {
        font-size: 0.95rem !important;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    /* desc nhỏ hơn */
    .reason-content p {
        font-size: 0.8rem;
        line-height: 1.4;
    }
}

/* ================= ABOUT SECTION MOBILE FIX ================= */
@media (max-width: 768px) {

    /* giảm padding section */
    .container-xxl.py-5 {
        padding: 35px 12px !important;
    }

    /* đổi thứ tự: ảnh lên trên */
    .container-xxl .row.g-5 {
        display: flex;
        flex-direction: column;
    }

    .container-xxl .row.g-5 > .col-lg-6:first-child {
        order: 2; /* text xuống */
    }

    .container-xxl .row.g-5 > .col-lg-6:last-child {
        order: 1; /* ảnh lên trên */
    }

    /* ảnh gọn hơn */
    .container-xxl .position-relative {
        min-height: 220px !important;
        border-radius: 14px;
        overflow: hidden;
        padding: 0 !important;
        margin-bottom: 20px;
    }

    /* tiêu đề nhỏ lại */
    .container-xxl h1.display-6 {
        font-size: 1.3rem;
        line-height: 1.4;
    }

    /* text dễ đọc hơn */
    .container-xxl p {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .container-xxl .row.g-4 > .col-sm-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* căn giữa đẹp hơn */
    .container-xxl .row.g-4 {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 12px;
    }

    /* item gọn lại */
    .container-xxl .row.g-4 h6 {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .container-xxl .fa-check {
        font-size: 1.05rem !important;
    }
}

/* ================= CORE VALUES HEADING ================= */

.core-heading {
    max-width: 900px;
    margin: 0 auto 50px auto;
}

/* câu hỏi lớn */
.core-question {
    font-size: 1.8rem;
    line-height: 1.4;
    color: #7a5b44;
    margin-bottom: 18px;
}

/* câu trả lời */
.core-answer {
    font-size: 1.2rem;
    font-style: italic;
    color: #666;
    position: relative;
}

/* thêm quote style nhẹ cho xịn */
.core-answer::before {
    content: "“";
    font-size: 2rem;
    color: #c49963;
    margin-right: 4px;
}

.core-answer::after {
    content: "”";
    font-size: 2rem;
    color: #c49963;
    margin-left: 4px;
}


/* ================= MOBILE ================= */
@media (max-width: 768px) {

    .core-question {
        font-size: 1.25rem;
        padding: 0 8px;
    }

    .core-answer {
        font-size: 0.95rem;
    }
}