/* ============================================================
   VIETLONG BANNER - FADE SLIDER (FLATSOME CHILD)
   Chuyen slide bang opacity, KHONG truot ngang.
   ============================================================ */
.vl-banner-slider-wrapper,
.vl-banner-slider-wrapper * {
    box-sizing: border-box;
}

.vl-banner-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
}

/* 1. Toan bo slide chong len nhau (fade), khong xep hang ngang. */
.vl-banner-slider-wrapper .vl-fade-track {
    position: relative;
    width: 100%;
    min-height: 560px;
    height: clamp(560px, 51vw, 700px);
    max-height: 700px;
    overflow: hidden;
}

.vl-banner-slider-wrapper .vl-slide-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1;
    transition: opacity 900ms ease-in-out, visibility 0s linear 900ms;
}

.vl-banner-slider-wrapper .vl-slide-item.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transition: opacity 900ms ease-in-out, visibility 0s;
}

/* 2. Anh nen phu full banner. */
.vl-banner-slider-wrapper .vl-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
}

.vl-banner-slider-wrapper .vl-bg-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 3. Lop phu xanh dem tren TOAN banner, tu 90% ben trai ve trong suot ben phai. */
.vl-banner-slider-wrapper .vl-slide-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(10, 31, 68, .96) 0%,
        rgba(10, 31, 68, .91) 35%,
        rgba(10, 31, 68, .76) 54%,
        rgba(10, 31, 68, .44) 76%,
        rgba(10, 31, 68, .12) 100%);
}

/* 4. Chu tren nen anh, khong card kinh mo, khong vien/bo goc. */
.vl-banner-slider-wrapper .vl-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.vl-banner-slider-wrapper .vl-content-box {
    width: 100%;
    max-width: 690px;
    padding: 32px 12px 45px 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

/* 5. Chu trang va phan cap tieu de nhu mau. */
.vl-banner-slider-wrapper .vl-sub-title {
    display: inline-block;
    background: rgba(56, 189, 248, .16);
    border: 1px solid rgba(56, 189, 248, .60);
    color: #65D2FF !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 99px;
    margin-bottom: 22px;
}

.vl-banner-slider-wrapper .vl-main-title {
    color: #fff !important;
    font-size: clamp(38px, 4vw, 60px) !important;
    font-weight: 800 !important;
    letter-spacing: -.8px;
    text-transform: none !important;
    line-height: 1.12 !important;
    margin: 0 0 12px !important;
    text-shadow: none !important;
}

.vl-banner-slider-wrapper .vl-tagline {
    color: #38BDF8 !important;
    font-size: clamp(17px, 1.5vw, 21px) !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
}

.vl-banner-slider-wrapper .vl-desc {
    color: #F8FAFC !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    margin: 0 0 28px !important;
    text-shadow: none !important;
}

/* 6. CTA: do noi bat va vien trang, hien thi NGAY, khong delay. */
.vl-banner-slider-wrapper .vl-buttons {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.vl-banner-slider-wrapper .vl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px !important;
    min-height: 47px;
    margin: 0 !important;
    border-radius: 99px !important;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
    text-transform: none !important;
    letter-spacing: 0;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}

.vl-banner-slider-wrapper .vl-btn-solid {
    background: #E51A50 !important;
    border: 1px solid #E51A50 !important;
    color: #fff !important;
    box-shadow: none !important;
}

.vl-banner-slider-wrapper .vl-btn-solid:hover {
    background: #C91143 !important;
    border-color: #C91143 !important;
    color: #fff !important;
}

.vl-banner-slider-wrapper .vl-btn-outline {
    background: transparent !important;
    border: 1.5px solid #FFFFFF !important;
    color: #FFFFFF !important;
}

.vl-banner-slider-wrapper .vl-btn-outline:hover {
    color: #0A1F44 !important;
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
}

/* Tat toan bo animation chu/nut: hien thi ngay khi tai trang. */
.vl-banner-slider-wrapper .vl-content-box,
.vl-banner-slider-wrapper .vl-sub-title,
.vl-banner-slider-wrapper .vl-main-title,
.vl-banner-slider-wrapper .vl-tagline,
.vl-banner-slider-wrapper .vl-desc,
.vl-banner-slider-wrapper .vl-buttons {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
}

/* 7. DIEU HUONG - Reset hoan toan button mac dinh cua Flatsome.
   Mui ten chi hien khi hover tren may co chuot; dot khong bi phong to/chen len nhau. */
.vl-banner-slider-wrapper button.vl-nav,
.vl-banner-slider-wrapper button.vl-dot {
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

/* Flatsome va mot so plugin them ::before, ::after vao button. */
.vl-banner-slider-wrapper button.vl-nav::before,
.vl-banner-slider-wrapper button.vl-nav::after,
.vl-banner-slider-wrapper button.vl-dot::before,
.vl-banner-slider-wrapper button.vl-dot::after {
    content: none !important;
    display: none !important;
}

.vl-banner-slider-wrapper button.vl-nav {
    position: absolute !important;
    top: 50% !important;
    z-index: 10;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, .75) !important;
    background: rgba(255, 255, 255, .92) !important;
    color: #194b87 !important;
    box-shadow: 0 6px 24px rgba(13, 37, 71, .16) !important;
    cursor: pointer;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease,
                background .25s ease, color .25s ease !important;
}

.vl-banner-slider-wrapper button.vl-nav-prev {
    left: 20px !important;
    right: auto !important;
    transform: translate(-10px, -50%);
}

.vl-banner-slider-wrapper button.vl-nav-next {
    right: 20px !important;
    left: auto !important;
    transform: translate(10px, -50%);
}

.vl-banner-slider-wrapper button.vl-nav svg {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    flex: 0 0 20px !important;
    fill: none !important;
    stroke: currentColor;
    transform: none !important;
}

/* Desktop: chi khi re chuot vao banner moi hien mui ten. */
@media (hover: hover) and (pointer: fine) {
    .vl-banner-slider-wrapper:hover button.vl-nav {
        opacity: 1 !important;
        pointer-events: auto;
        transform: translate(0, -50%) !important;
    }
}

/* Ban phim: duoc hien nut khi focus, khong can chuot. */
.vl-banner-slider-wrapper button.vl-nav:focus-visible {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translate(0, -50%) !important;
}

.vl-banner-slider-wrapper button.vl-nav:hover,
.vl-banner-slider-wrapper button.vl-nav:focus-visible {
    background: var(--primary-color, #1a6dff) !important;
    color: #fff !important;
    border-color: var(--primary-color, #1a6dff) !important;
}

.vl-banner-slider-wrapper .vl-pagination {
    position: absolute;
    z-index: 10;
    bottom: 23px;
    left: 50%;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 20px;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%);
}

/* Quan trong: reset kich thuoc min-width, padding, margin do Flatsome gan len button. */
.vl-banner-slider-wrapper .vl-pagination button.vl-dot {
    position: relative !important;
    display: block !important;
    flex: 0 0 10px !important;
    width: 10px !important;
    height: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: rgba(255, 255, 255, .85) !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .14) !important;
    opacity: .85;
    cursor: pointer;
    vertical-align: middle !important;
    transform: none !important;
    transition: flex-basis .3s ease, width .3s ease, background .3s ease,
                opacity .3s ease !important;
}

.vl-banner-slider-wrapper .vl-pagination button.vl-dot.is-active {
    flex-basis: 28px !important;
    width: 28px !important;
    height: 10px !important;
    background: var(--primary-color, #1a6dff) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55) !important;
    opacity: 1;
}

.vl-banner-slider-wrapper .vl-pagination button.vl-dot:not(.is-active):hover {
    background: #fff !important;
    opacity: 1;
}

.vl-banner-slider-wrapper button:focus-visible,
.vl-banner-slider-wrapper a:focus-visible {
    outline: 3px solid var(--primary-color, #1a6dff) !important;
    outline-offset: 3px;
}

/* 8. Mobile: chu doc truc tiep tren anh, phu xanh dam du de doc ro. */
@media (max-width: 767px) {
    .vl-banner-slider-wrapper .vl-fade-track {
        min-height: 530px;
        height: 570px;
        max-height: none;
        transition: height 350ms ease;
    }

    .vl-banner-slider-wrapper .vl-slide-item {
        padding: 42px 0 64px;
    }

    .vl-banner-slider-wrapper .vl-bg-layer img {
        object-position: 57% center;
    }

    .vl-banner-slider-wrapper .vl-slide-item::before {
        background: linear-gradient(90deg,
            rgba(10, 31, 68, .97) 0%,
            rgba(10, 31, 68, .85) 64%,
            rgba(10, 31, 68, .64) 100%);
    }

    .vl-banner-slider-wrapper .vl-container {
        width: 100% !important;
        padding: 0 16px !important;
        display: block !important;
    }

    .vl-banner-slider-wrapper .vl-content-box {
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0;
        padding: 20px 4px 25px !important;
        margin: 0 auto !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .vl-banner-slider-wrapper .vl-sub-title {
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding: 5px 11px !important;
        margin: 0 0 19px !important;
    }
    .vl-banner-slider-wrapper .vl-main-title {
        font-size: clamp(32px, 8.1vw, 43px) !important;
        line-height: 1.16 !important;
        margin: 0 0 12px !important;
        width: 100%;
    }
    .vl-banner-slider-wrapper .vl-tagline {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 0 0 12px !important;
    }
    .vl-banner-slider-wrapper .vl-desc {
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin: 0 0 24px !important;
        width: 100%;
    }
    .vl-banner-slider-wrapper .vl-buttons {
        display: flex;
        align-items: stretch;
        gap: 11px;
        width: 100%;
        margin: 0;
    }
    .vl-banner-slider-wrapper .vl-btn {
        flex: 1 1 155px;
        min-width: 0;
        padding: 12px 15px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        white-space: normal;
        text-align: center;
        margin: 0 !important;
    }

    /* Vuot tay va dots cho mobile, khong de mui ten de len card. */
    .vl-banner-slider-wrapper button.vl-nav { display: none !important; }
    .vl-banner-slider-wrapper .vl-pagination { bottom: 19px; }
}

@media (max-width: 390px) {
    .vl-banner-slider-wrapper .vl-buttons { flex-direction: column; }
    .vl-banner-slider-wrapper .vl-btn { flex: 0 0 auto; width: 100%; }
}

/* Nguoi dung bat giam chuyen dong: chuyen slide tuc thi. */
@media (prefers-reduced-motion: reduce) {
    .vl-banner-slider-wrapper .vl-slide-item,
    .vl-banner-slider-wrapper .vl-slide-item.is-active,
    .vl-banner-slider-wrapper .vl-fade-track,
    .vl-banner-slider-wrapper .vl-btn {
        transition: none !important;
    }
    .vl-banner-slider-wrapper .vl-content-box,
    .vl-banner-slider-wrapper .vl-sub-title,
    .vl-banner-slider-wrapper .vl-main-title,
    .vl-banner-slider-wrapper .vl-desc,
    .vl-banner-slider-wrapper .vl-buttons {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Thiet bi khong co hover: an mui ten, giu dot va vuot cham. */
@media (hover: none), (pointer: coarse) {
    .vl-banner-slider-wrapper button.vl-nav { display: none !important; }
}