@media (min-width: 1400px) {
    .leadership-sec .container {
        max-width: 1280px;
    }
}

.title-leadership {
    margin-bottom: 16px;
}

.box-chairman,
.box-slider {
    display: flex;
    gap: 20px;
}

.box-chairman {
    margin-bottom: 72px;
}

.box-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 32px;
}

.inside-title {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 39.06px;
    line-height: 140%;
    color: #066BFC;
}

.inside-subtitle {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #394049;
}

.left-chairman {
    max-width: 60%;
    min-width: 60%;
}

.left-chairman img {
    width: 100%;
}

.right-chairman {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-chairman .name {
    font-family: Noto Sans;
    font-weight: 700;
    font-size: 31.25px;
    line-height: 140%;
    color: #21272D;

}

.right-chairman .position {
    font-family: Noto Sans;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    color: #646970;
}

.right-chairman .introduce {
    font-family: Noto Sans;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #394049;
    margin-top: 20px;
}

.box-slider {
    height: 603px;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    height: 502px;
}

.gallery .item {
    width: 100%;
    aspect-ratio: 1 / 1;
}

.gallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    overflow-clip-margin: unset;
}

.container-slider {
    max-width: 60%;
    min-width: 60%;
    height: 502px;
}

.swiper-text {
    padding-top: 8px;
    padding-bottom: 20px;
}

.swiper-text .item {
    display: flex;
    flex-direction: column;
    background-color: white;
}

.swiper-text .item p:first-child {
    text-align: left;
    font-weight: 700;
    font-size: 31.25px;
    line-height: 140%;
    color: #21272D;
    margin: 0;
}

.swiper-text .item p:last-child {
    text-align: left;
    font-weight: 600;
    font-size: 20px;
    line-height: 150%;
    letter-spacing: 0%;
    color: #646970;
    margin: 0;
}

.large-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    background: linear-gradient(67.25deg, #B6D7FE -21.15%, #F2F7FF 96.61%);
    border-radius: 64px 0px 64px 0px;
}

.large-item span {
    font-weight: 600;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    background: linear-gradient(350.57deg, #043DA8 27.8%, #1E66D8 78.32%, #3286FD 116.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.box-quote {
    position: relative;
    background: linear-gradient(67.25deg, #B6D7FE -21.15%, #F2F7FF 96.61%);
    border-radius: 64px 0px 64px 0px;
    padding: 64px;
    margin: 120px 0;
    opacity: 0;
    /* Ẩn nền */
    transition: opacity 1.5s ease-in-out;
    /* Làm nền hiện từ từ */
}

.box-quote span {
    background: linear-gradient(350.57deg, #043DA8 27.8%, #1E66D8 78.32%, #3286FD 116.77%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 700;
    font-size: 48.83px;
    line-height: 125%;
    text-align: center;

    /* Ẩn ban đầu và đặt ở trên */
    opacity: 0;
    transform: translateY(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.mark-top {
    position: absolute;
    top: -15px;
    left: 24px;

    /* Ẩn ban đầu và đặt lệch trái */
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.mark-bottom {
    position: absolute;
    bottom: -15px;
    right: 24px;

    /* Ẩn ban đầu và đặt lệch phải */
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Khi box-quote hiện trên màn hình, kích hoạt hiệu ứng */
.box-quote.show {
    opacity: 1;
}

.box-quote.show span {
    opacity: 1;
    transform: translateY(0);
}

.box-quote.show .mark-top {
    opacity: 1;
    transform: translateX(0);
}

.box-quote.show .mark-bottom {
    opacity: 1;
    transform: translateX(0);
}

.container-pagin-button {
    display: none !important;
}


@media (min-width: 744px) and (max-width: 1200px) {
    .container-pagin-button {
        display: flex !important;
    }

    .inside-title {
        line-height: 125%;
    }

    .inside-subtitle {
        font-size: 12px;
    }

    .right-chairman .introduce {
        font-size: 12px;
        margin-top: 4px;
    }

    .box-chairman {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .left-chairman {
        max-width: 100%;
        min-width: 100%;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        height: unset;
    }

    .mySwiperLeadership,
    .mySwiperLeadershipSenior {
        width: 100%;
        aspect-ratio: 624/413;
    }

    .large-item {
        display: none;
    }

    .container-slider {
        max-width: 100%;
        min-width: 100%;
        aspect-ratio: unset;
        height: fit-content;
    }

    .box-slider {
        height: fit-content;
        flex-direction: column;
    }

    .box-senior {
        flex-direction: column-reverse;
    }

    .box-quote {
        padding: 32px;
        margin: 72px 0;
    }

    .box-quote span {
        font-weight: 700;
        font-size: 31.25px;
        line-height: 140%;
        text-align: center;
    }

    .swiper-text {
        padding-bottom: 0;
    }

    .swiper-text .item {
        align-items: flex-start;
    }

    .swiper-text .item p:first-child {
        font-size: 25px;
        line-height: 140%;
    }

    .swiper-text .item p:last-child {
        font-size: 20px;
        line-height: 150%;
    }

    .btn-svg {
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .swiper-pagination {
        font-weight: 600;
        font-size: 20px;
        line-height: 150%;
        color: #21272D;
        bottom: 0;
    }

    .swiper-controls {
        gap: 16px;
    }
}


@media (max-width: 743px) {
    .container-pagin-button {
        display: flex !important;
    }

    .box-title {
        margin-bottom: 16px;
    }

    .inside-title {
        line-height: 125%;
        font-size: 31.25px;
    }

    .inside-subtitle {
        font-size: 10px;
    }

    .right-chairman .name {
        font-size: 25px;
    }

    .right-chairman .position {
        font-size: 16px;
    }

    .right-chairman .introduce {
        font-size: 10px;
        margin-top: 4px;
    }

    .box-chairman {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 16px;
    }

    .left-chairman {
        max-width: 100%;
        min-width: 100%;
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        height: unset;
    }

    .mySwiperLeadership,
    .mySwiperLeadershipSenior {
        width: 100%;
        aspect-ratio: 357/237;
    }

    .large-item {
        display: none;
    }

    .container-slider {
        max-width: 100%;
        min-width: 100%;
        aspect-ratio: unset;
        height: fit-content;
    }

    .box-slider {
        height: fit-content;
        flex-direction: column;
    }

    .box-senior {
        flex-direction: column-reverse;
    }

    .box-quote {
        padding: 32px;
        margin: 40px 0;
    }

    .box-quote span {
        font-weight: 700;
        font-size: 25px;
        line-height: 140%;
        text-align: center;
    }

    .swiper-text {
        padding-bottom: 0;
    }

    .swiper-text .item {
        align-items: flex-start;
    }

    .swiper-text .item p:first-child {
        font-size: 20px;
        line-height: 140%;
    }

    .swiper-text .item p:last-child {
        font-size: 14px;
        line-height: 150%;
    }

    .btn-svg {
        background: none !important;
        border: none !important;
        cursor: pointer !important;
    }

    .swiper-pagination {
        font-weight: 600;
        font-size: 16px;
        line-height: 150%;
        color: #21272D;
        bottom: 0;
    }

    .swiper-controls {
        gap: 16px;
    }
}