.about-section {
    margin-top: var(--spacing-4);
}
.about-section .picture,
.about-section .content {
    flex: 1;
}

.about-section .picture {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.about-section .picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}

.about-section p {
    color: black;
    width: 80%;
}

.about-section h2 {
    font-weight: 500;
    font-size: 4rem;
}

.about-section .title-with-line {
    border-left: 4px solid #df0012;
    padding-left: 15px;
}

.values-section {
    
    padding: 80px 0;
}

.container-flex.values {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
    gap: var(--spacing-4);
}

.value-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}


.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}


.card-header .icon {
    color: var(--secondary-color);
    font-size: 45px;
}


.card-header .title {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
}


.card-body p {
    color: var(--text-color);
    line-height: 1.6;
    font-size: 15px;
    margin: 0;
    text-align: left;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

/* tầm nhìn sứ mệnh giá trị cốt lõi */
.vision-section{
    background-color: var(--bg-light);
}
.vision-section .content,
.vision-section .picture{
    flex: 1;
}
.vision-section .content{
    position: relative;
    
}
.vision-section .content p{
    width: 80%;
}
.vision-section .content h2,
.vision-section .content p
.vision-section .picture img{
    position: relative;
    z-index: 1;
}
.vision-section .content h2{
    margin-bottom: var(--spacing-4);
}
.vision-section .content::before{
    content: "";
    position: absolute;
    border-radius: 50% 50%;
    background-color: #f2f3a4;

    height: 100px;
    width: 100px;

    top: -25px;
    left: -30px;
}


.vision-section .container-flex{
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-5);
    gap: var(--spacing-4);
}

.vision-section li{
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-2);
}


/* ============================================================
   RESPONSIVE – ABOUT US PAGE
   ============================================================ */

/* ----- Tablet: ≤ 992px ----- */
@media (max-width: 992px) {
    .about-section h2 {
        font-size: 2.8rem;
    }

    .about-section p {
        width: 100%;
    }

    .about-section .container-flex {
        gap: 24px;
    }

    .vision-section .content h2 {
        font-size: 1.6rem;
    }

    .vision-section .content p {
        width: 100%;
    }

    .vision-section .container-flex {
        gap: 20px;
    }
}

/* ----- Mobile: < 768px ----- */
@media (max-width: 768px) {
    .about-section h2 {
        font-size: 2rem;
    }

    .about-section h3 {
        font-size: 1.2rem;
    }

    .about-section p {
        width: 100%;
        margin-bottom: 16px;
    }

    .about-section .container-flex {
        flex-direction: column;
        gap: 24px;
    }

    .about-section .picture {
        display: none;
    }

    /* Value cards: 1 cột */
    .container-flex.values {
        flex-direction: column;
        gap: 24px;
        margin-top: 32px;
    }

    .value-card {
        flex: 1 1 100%;
    }

    .card-header .title {
        font-size: 18px;
    }

    /* --- Vision Section: ảnh luôn trên, nội dung dưới --- */
    .vision-section .container-flex {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 32px;
    }

    .vision-section .picture {
        order: -1;
        width: 100%;
    }

    .vision-section .picture img {
        width: 100%;
        height: auto;
    }

    .vision-section .content {
        width: 100%;
    }

    .vision-section .content p {
        width: 100%;
    }

    .vision-section .content h2 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }

    .vision-section .content::before {
        height: 60px;
        width: 60px;
        top: -15px;
        left: -15px;
    }

    .vision-section .section-header h2 {
        font-size: 1.2rem;
    }
}