/*section tầm nhìn sứ mệnh*/
.vision-mission {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vision-mission .container {
    padding-right: 20px;
}

.inner-vm-left {
    width: 100%;
}

.vm-left h2.sec-title {
    margin-bottom: 20px;
    color: var(--white-color);
}

.vm-left p.sec-subtitle {
    max-width: 350px;
    color: #b0c8eb;
    font-size: clamp(14px, 1.5vw, 16px);
    text-align: justify;
}

.vm-right {
    overflow: hidden;
}

.inner-vm-right {
    position: relative;
    cursor: none;
    overflow: hidden;
}

.vm-text {
    padding: 10px 0;
    font-size: clamp(40px, 5vw, 120px);
    line-height: 1;
    font-weight: 500;
    color: #3c7ad8;
    position: relative;
    z-index: 1;
    font-family: 'Space Grotesk', sans-serif;
}

/* Lớp highlight xanh nõn chuối */
.vm-text.highlight {
    color: var(--secondary-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(circle 125px at var(--x, 50%) var(--y, 50%), #ffffff 100%, transparent 100%);
    mask-image: radial-gradient(circle 125px at var(--x, 50%) var(--y, 50%), #ffffff 100%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: mask-position 0.1s linear;
}

@media (max-width: 993px) {
    .vm-text.highlight {
        -webkit-mask-image: radial-gradient(circle 75px at var(--x, 50%) var(--y, 50%), #ffffff 100%, transparent 100%);
        mask-image: radial-gradient(circle 75px at var(--x, 50%) var(--y, 50%), #ffffff 100%, transparent 100%);
    }
}

@media screen and (max-width: 768px) {
    .vision-mission {
        padding-bottom: 20px;
    }

    .inner-vm-left {
        padding-top: 50px;
        padding-bottom: 20px;
    }
}