/*==================================================
=                  GLOBAL                         =
==================================================*/

:root {
    --brand-blue: #1460FF;
    --brand-blue-dark: #0F4AD6;

    --text-dark: #1A1A1A;

    --bg-color: #0052f7;

    --vf-blue: #2451D9;
    --vf-blue-dark: #173a9e;
    --vf-navy: #0E1E45;
    --vf-yellow: #FFC42E;
    --vf-ink: #1B2333;
    --vf-muted: #5B6478;
    --vf-bg-soft: #F5F7FB;
}


/* =================================================
   RESET
   ================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: 'Segoe UI', sans-serif;

    color: var(--text-dark);
    background: var(--bg-color);

    overflow-x: hidden;

    font-size: 16px;
    line-height: 1.6;
}

img {
    display: block;

    max-width: 100%;
    height: auto;
}

section {
    position: relative;

    width: 100%;
}

.container {
    width: 100%;
    max-width: 100%;

    margin-left: auto;
    margin-right: auto;
}


/* =================================================
   LARGE DESKTOP
   ================================================= */

@media (min-width: 1400px) {

    .container {
        max-width: 1320px;
    }

}


/* =================================================
   TABLET
   768px - 991.98px
   ================================================= */

@media (max-width: 991.98px) {

    body {
        font-size: 15px;
    }

}


/* =================================================
   MOBILE
   <= 767.98px
   ================================================= */

@media (max-width: 767.98px) {

    body {
        font-size: 14px;
        line-height: 1.7;
    }

    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 24px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 16px;
    }

}


/* =================================================
   SMALL MOBILE
   <= 575.98px
   ================================================= */

@media (max-width: 575.98px) {

    body {
        font-size: 14px;
    }

    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }

}

/* =========================================================
   NAVBAR
========================================================= */

.navbar {
    position: relative;

    width: 100%;
    min-height: 88px;

    padding: 0;

    background: #fff !important;

    box-shadow: none;

    z-index: 999;
}


/* =========================================================
   NAVBAR CONTAINER
========================================================= */

.navbar .container {
    position: relative;

    width: 100%;
    max-width: 1720px;

    min-height: 88px;

    padding-left: 60px;
    padding-right: 60px;

    display: flex;
    align-items: center;
}


/* =========================================================
   BRAND
========================================================= */

.navbar-brand {
    display: flex;
    align-items: center;

    flex: 0 1 auto;

    min-width: 0;

    height: 88px;

    margin-right: clamp(20px, 3vw, 60px);

    padding: 0;
}


/* =========================================================
   LOGO GROUP
========================================================= */

.navbar-logo-group {
    display: flex;
    align-items: center;

    gap: clamp(8px, 1.2vw, 18px);

    min-width: 0;

    flex-shrink: 1;
}


/* =========================================================
   LOGO BASE
========================================================= */

.navbar-logo {
    display: block;

    height: auto;

    object-fit: contain;

    flex-shrink: 1;

    min-width: 0;
}


/* =========================================================
   VINFAST PARUNG LOGO
========================================================= */

.navbar-logo-main {
    width: clamp(140px, 15vw, 250px);

    max-width: 250px;
    max-height: 65px;
}


/* =========================================================
   IAI LOGO
========================================================= */

.navbar-logo-iai {
    width: clamp(48px, 5vw, 85px);

    max-width: 85px;
    max-height: 60px;

    border-radius: 4px;
}


/* =========================================================
   IMPORTANT
   Jangan lagi gunakan width pada:
   .navbar-brand img

   Karena ada 2 logo dengan ukuran berbeda.
========================================================= */

.navbar-brand img {
    display: block;

    height: auto;

    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   BRAND TEXT
========================================================= */

.navbar-brand span {
    font-family: 'Poppins', sans-serif;

    font-size: 15px;
    font-weight: 700;

    letter-spacing: 8px;

    color: #111;
}


/* =========================================================
   NAVIGATION
========================================================= */

.navbar-nav {
    display: flex;
    align-items: center;

    gap: clamp(10px, 1.2vw, 18px);

    min-width: 0;
}


/* =========================================================
   NAV LINK
========================================================= */

.navbar .nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 88px;

    padding: 0;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(13px, 0.8vw, 15px);

    font-weight: 500;

    line-height: normal;

    color: #1a1a1a;

    white-space: nowrap;

    transition:
        color .3s ease,
        transform .3s ease;
}


.navbar .nav-link:hover {
    color: var(--brand-blue);
}


.navbar .nav-link.active {
    color: #111;
}


/* =========================================================
   ACTIVE INDICATOR
========================================================= */

.navbar .nav-link.active::after {
    content: '';

    position: absolute;

    left: 0;
    right: 0;

    bottom: 18px;

    width: 100%;
    height: 3px;

    border-radius: 20px;

    background: var(--brand-blue);
}


/* =========================================================
   BRAND BUTTON
========================================================= */

.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: clamp(135px, 11vw, 175px);

    height: 44px;

    padding: 0 clamp(18px, 1.8vw, 28px);

    margin-left: clamp(12px, 1.5vw, 25px);

    border: none;

    border-radius: 999px;

    background: #2563ff;

    color: #fff !important;

    font-family: 'Poppins', sans-serif;

    font-size: clamp(13px, 0.8vw, 15px);

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    flex-shrink: 0;

    transition:
        background .3s ease,
        transform .3s ease;
}


.btn-brand:hover {
    background: #1450e0;

    color: #fff !important;

    transform: translateY(-1px);
}


/* =========================================================
   TABLET / SMALL LAPTOP
   <= 1199.98px
========================================================= */

@media (max-width: 1199.98px) {

    .navbar .container {
        padding-left: 30px;
        padding-right: 30px;
    }


    .navbar-brand {
        margin-right: 25px;
    }


    .navbar-logo-main {
        width: clamp(125px, 17vw, 190px);
    }


    .navbar-logo-iai {
        width: clamp(45px, 6vw, 70px);
    }


    .navbar-logo-group {
        gap: 10px;
    }


    .navbar-nav {
        gap: 10px;
    }


    .navbar .nav-link {
        font-size: 13px;
    }


    .btn-brand {
        min-width: 140px;

        margin-left: 12px;

        padding: 0 18px;

        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
   <= 991.98px
========================================================= */

@media (max-width: 991.98px) {

    .navbar {
        min-height: 0;

        padding: 12px 0;
    }


    .navbar .container {
        min-height: 52px;

        height: auto;

        padding-left: 20px;
        padding-right: 20px;
    }


    /* =====================================================
       BRAND
    ====================================================== */

    .navbar-brand {
        height: auto;

        margin-right: 0;

        min-width: 0;

        max-width: calc(100% - 52px);
    }


    /* =====================================================
       LOGO GROUP
    ====================================================== */

    .navbar-logo-group {
        width: 100%;

        max-width: 100%;

        gap: clamp(6px, 2vw, 12px);
    }


    /* =====================================================
       LOGO UTAMA
       Mengikuti lebar layar
    ====================================================== */

    .navbar-logo-main {
        width: clamp(120px, 38vw, 180px);

        max-width: 100%;

        max-height: 90px;
    }


    /* =====================================================
       LOGO IAI
    ====================================================== */

    .navbar-logo-iai {
        width: clamp(120px, 38vw, 180px);

        max-width: 100%;

        max-height: 90px;
    }


    /* =====================================================
       HAMBURGER
    ====================================================== */

    .navbar-toggler {
        display: inline-flex;

        align-items: center;
        justify-content: center;

        width: 44px;
        height: 44px;

        padding: 0;

        margin-left: auto;

        border: none;

        box-shadow: none !important;

        outline: none;

        flex: 0 0 44px;
    }


    .navbar-toggler:focus,
    .navbar-toggler:active {
        box-shadow: none !important;

        outline: none;
    }


    .navbar-toggler-icon {
        width: 28px;
        height: 28px;
    }


    /* =====================================================
       MENU
    ====================================================== */

    .navbar-collapse {
        width: 100%;

        margin-top: 18px;

        padding: 15px 20px;

        background: #fff;

        border-radius: 18px;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .08);
    }


    .navbar-nav {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;
    }


    .navbar .nav-item {
        width: 100%;
    }


    .navbar .nav-link {
        display: flex;

        align-items: center;

        width: 100%;

        height: auto;

        padding: 14px 0;

        font-size: 15px;

        line-height: 1;

        white-space: normal;

        border-bottom: 1px solid #f2f2f2;
    }


    .navbar .nav-item:last-child .nav-link {
        border-bottom: none;
    }


    /* =====================================================
       ACTIVE MOBILE
    ====================================================== */

    .navbar .nav-link.active::after {
        left: 0;

        right: auto;

        bottom: 7px;

        width: 30px;

        height: 2px;
    }


    /* =====================================================
       BUTTON MOBILE
    ====================================================== */

    .btn-brand {
        width: 100%;

        min-width: 0;

        height: 48px;

        margin-top: 18px;

        margin-left: 0;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 575.98px
========================================================= */

@media (max-width: 575.98px) {

    .navbar {
        padding: 10px 0;
    }


    .navbar .container {
        min-height: 50px;

        padding-left: 15px;
        padding-right: 15px;
    }


    .navbar-brand {
        max-width: calc(100% - 49px);
    }


    .navbar-logo-group {
        gap: 7px;
    }


    .navbar-logo-main {
        width: clamp(105px, 40vw, 155px);

        max-height: 78px;
    }


    .navbar-logo-iai {
        width: clamp(105px, 40vw, 155px);

        max-height: 78px;
    }


    .navbar-toggler {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .navbar-toggler-icon {
        width: 25px;
        height: 25px;
    }


    .navbar-collapse {
        margin-top: 14px;

        padding: 12px 17px;

        border-radius: 15px;
    }


    .navbar .nav-link {
        padding: 13px 0;

        font-size: 14px;
    }


    .btn-brand {
        height: 46px;

        font-size: 14px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 375px
========================================================= */

@media (max-width: 375px) {

    .navbar .container {
        padding-left: 10px;
        padding-right: 10px;
    }


    .navbar-brand {
        max-width: calc(100% - 45px);
    }


    .navbar-logo-group {
        gap: 5px;
    }


    .navbar-logo-main {
        width: clamp(95px, 39vw, 125px);

        max-height: 78px;
    }


    .navbar-logo-iai {
        width: clamp(95px, 39vw, 125px);

        max-height: 78px;
    }


    .navbar-toggler {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }


    .navbar-toggler-icon {
        width: 22px;
        height: 22px;
    }

}


/* =========================================================
   EXTRA SMALL
   <= 350px
========================================================= */

@media (max-width: 350px) {

    .navbar .container {
        padding-left: 8px;
        padding-right: 8px;
    }


    .navbar-brand {
        max-width: calc(100% - 42px);
    }


    .navbar-logo-group {
        gap: 4px;
    }


    .navbar-logo-main {
        width: 92px;

        max-height: 35px;
    }


    .navbar-logo-iai {
        width: 36px;

        max-height: 31px;
    }


    .navbar-toggler {
        width: 36px;
        height: 36px;

        flex-basis: 36px;
    }


    .navbar-toggler-icon {
        width: 21px;
        height: 21px;
    }

}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: 720px;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 0;

    background-image:
        linear-gradient(
            rgba(0, 0, 0, .20),
            rgba(0, 0, 0, .20)
        ),
        url('../images/hero/banner.jpg');

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* =========================================================
   HERO CONTENT
   ========================================================= */

.hero-content {
    position: absolute;

    left: 90px;
    bottom: 55px;

    z-index: 10;

    width: calc(100% - 180px);
    max-width: 760px;
}

.hero h1 {
    margin-bottom: 18px;

    color: #fff;

    font-size: 58px;
    font-weight: 700;
    line-height: 1.15;
}

.hero p {
    max-width: 700px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, .95);

    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
}


/* =========================================================
   HERO BUTTONS
   ========================================================= */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 14px;
}

.btn-pill-outline,
.btn-pill-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    padding: 0 24px;

    border-radius: 999px;

    font-size: 16px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;
}

.btn-pill-outline {
    border: 2px solid rgba(255, 255, 255, .9);

    color: #fff;

    background: transparent;
}

.btn-pill-blue {
    border: 2px solid #1460FF;

    background: #1460FF;

    color: #fff;
}


/* =========================================================
   HERO TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .hero {
        height: 620px;

        background-position: center center;
    }

    .hero-content {
        left: 40px;
        bottom: 45px;

        width: calc(100% - 80px);
        max-width: 650px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero p {
        max-width: 580px;

        font-size: 18px;
    }

}


/* =========================================================
   HERO MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .hero {
        height: 560px;

        background-position: center center;
    }

    .hero-content {
        left: 20px;
        right: 20px;
        bottom: 35px;

        width: auto;
        max-width: none;
    }

    .hero h1 {
        margin-bottom: 14px;

        font-size: 38px;
        line-height: 1.1;
    }

    .hero p {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 16px;
        line-height: 1.55;
    }

    .hero-buttons {
        flex-wrap: wrap;

        gap: 10px;
    }

    .btn-pill-outline,
    .btn-pill-blue {
        min-height: 44px;

        padding: 0 20px;

        font-size: 14px;
    }

}


/* =========================================================
   HERO SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .hero {
        height: 510px;
    }

    .hero-content {
        left: 15px;
        right: 15px;
        bottom: 28px;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero p {
        margin-bottom: 20px;

        font-size: 14px;
    }

    .hero-buttons {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }

    .btn-pill-outline,
    .btn-pill-blue {
        width: 100%;

        min-height: 44px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 375px) {

    .hero {
        height: 480px;
    }

    .hero-content {
        bottom: 24px;
    }

    .hero h1 {
        font-size: 29px;
    }

    .hero p {
        font-size: 13px;
        line-height: 1.5;
    }

}


/* =========================================================
   WHY SECTION
   ========================================================= */

.why-section {
    position: relative;

    width: 100%;

    margin-top: -25px;
    padding: 85px 0 95px;

    z-index: 10;

    overflow: hidden;

    border-radius: 45px 45px 0 0;

    background:
        linear-gradient(
            135deg,
            #2568f6 0%,
            #1f63f1 55%,
            #1a58e5 100%
        );

    color: #fff;
}

.why-section::before {
    content: '';

    position: absolute;

    top: 0;
    left: -150px;

    width: 450px;
    height: 450px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .06),
            transparent
        );

    transform: rotate(45deg);

    pointer-events: none;
}

.why-section::after {
    content: '';

    position: absolute;

    right: -150px;
    bottom: -200px;

    width: 500px;
    height: 500px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, .04),
            transparent
        );

    transform: rotate(45deg);

    pointer-events: none;
}

.why-section .container {
    position: relative;

    z-index: 2;
}

.why-section h2 {
    margin-bottom: 42px;

    color: #fff;

    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
}

.why-section .why-description {
    max-width: 1500px;

    margin-left: auto;
    margin-right: auto;

    font-size: 25px;
    font-weight: 400;
    line-height: 1.9;

    opacity: .98;
}

.why-section .why-tagline {
    margin-top: 45px;

    font-size: 25px;
    font-weight: 500;

    opacity: .98;
}


/* =========================================================
   WHY SECTION TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .why-section {
        margin-top: -20px;

        padding: 70px 0 75px;

        border-radius: 35px 35px 0 0;
    }

    .why-section h2 {
        margin-bottom: 30px;

        font-size: 50px;
    }

    .why-section .why-description {
        font-size: 20px;
        line-height: 1.75;
    }

    .why-section .why-tagline {
        margin-top: 32px;

        font-size: 20px;
    }

    .why-section::before {
        left: -220px;

        width: 400px;
        height: 400px;
    }

    .why-section::after {
        right: -200px;
        bottom: -220px;

        width: 430px;
        height: 430px;
    }

}


/* =========================================================
   WHY SECTION MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .why-section {
        margin-top: -15px;

        padding: 55px 0 60px;

        border-radius: 28px 28px 0 0;
    }

    .why-section h2 {
        margin-bottom: 24px;

        font-size: 38px;
        line-height: 1.1;
    }

    .why-section .why-description {
        font-size: 17px;
        line-height: 1.7;
    }

    .why-section .why-tagline {
        margin-top: 28px;

        font-size: 17px;
        line-height: 1.6;
    }

    .why-section::before {
        left: -250px;
        top: -80px;

        width: 360px;
        height: 360px;
    }

    .why-section::after {
        right: -230px;
        bottom: -220px;

        width: 380px;
        height: 380px;
    }

}


/* =========================================================
   WHY SECTION SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .why-section {
        margin-top: -12px;

        padding: 48px 0 52px;

        border-radius: 23px 23px 0 0;
    }

    .why-section h2 {
        margin-bottom: 20px;

        font-size: 32px;
    }

    .why-section .why-description {
        font-size: 15px;
        line-height: 1.7;
    }

    .why-section .why-tagline {
        margin-top: 24px;

        font-size: 15px;
    }

}


/* =========================================================
   WHY SECTION VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 375px) {

    .why-section {
        padding: 42px 0 48px;
    }

    .why-section h2 {
        font-size: 29px;
    }

    .why-section .why-description {
        font-size: 14px;
    }

    .why-section .why-tagline {
        font-size: 14px;
    }

}


/* =========================================================
   LINEUP SECTION
   ========================================================= */

   .lineup-section {
    width: 100%;

    padding: 60px 0 80px;

    background: #fff;

    border-radius: 0 0 45px 45px;
}

.container-lineup {
    width: 100%;
    max-width: 1820px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 35px;
    padding-right: 35px;
}

.lineup-section h2 {
    margin: 0 0 45px;

    color: #111;

    font-size: 54px;
    font-weight: 700;
    line-height: 1.15;

    letter-spacing: -1px;
}


/* =========================================================
   PRODUCT GRID SUPPORT
   ========================================================= */

.lineup-section .row {
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.lineup-section .col,
.lineup-section [class*="col-"] {
    min-width: 0;
}


/* =========================================================
   PRODUCT CARD
   ========================================================= */

.product-card {
    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid #E7E7E7;
    border-radius: 18px;

    background: #fff;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.product-card:hover {
    border-color: #D8D8D8;

    transform: translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .06);
}


/* =========================================================
   PRODUCT IMAGE
   ========================================================= */

.product-card img {
    display: block;

    width: 100%;
    height: 235px;

    padding: 18px;

    object-fit: contain;
}


/* =========================================================
   PRODUCT BODY
   ========================================================= */

.product-body {
    min-width: 0;

    padding: 22px;
}


/* =========================================================
   PRODUCT NAME
   ========================================================= */

.product-name {
    margin: 0 0 22px;

    color: #111;

    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRODUCT DIVIDER
   ========================================================= */

.product-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 18px;

    background: #ECECEC;
}


/* =========================================================
   PRODUCT SPEC
   ========================================================= */

.product-spec {
    display: flex;
    align-items: stretch;

    width: 100%;

    margin-bottom: 22px;
}

.spec-box {
    flex: 1;
    min-width: 0;

    text-align: center;
}

.spec-value {
    color: #111;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;

    overflow-wrap: anywhere;
}

.spec-label {
    margin-top: 4px;

    color: #8E8E8E;

    font-size: 13px;
    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRODUCT FOOTER
   ========================================================= */

.product-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;

    width: 100%;
}


/* =========================================================
   PRICE
   ========================================================= */

.price-label {
    color: #8A8A8A;

    font-size: 13px;
    line-height: 1.4;
}

.price-value {
    color: #111;

    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;

    overflow-wrap: anywhere;
}


/* =========================================================
   SPEC BUTTON
   ========================================================= */

.btn-spec {
    flex: 0 0 auto;

    width: 165px;
    height: 42px;

    padding: 0 20px;

    border: none;
    border-radius: 999px;

    background: #2163F5;
    color: #fff;

    font-size: 15px;
    font-weight: 600;

    line-height: 1;

    white-space: nowrap;

    transition:
        background .25s ease,
        transform .25s ease;
}

.btn-spec:hover {
    background: #0D53F2;
    color: #fff;

    transform: translateY(-1px);
}


/* =========================================================
   TABLET
   768px - 991.98px
   ========================================================= */

@media (max-width: 991.98px) {

    /* ================= LINEUP ================= */

    .lineup-section {
        padding: 50px 0 65px;

        border-radius: 0 0 35px 35px;
    }

    .container-lineup {
        max-width: 100%;

        padding-left: 25px;
        padding-right: 25px;
    }

    .lineup-section h2 {
        margin-bottom: 35px;

        font-size: 42px;

        text-align: center;
    }


    /* ================= GRID ================= */

    .lineup-section .row {
        --bs-gutter-x: 22px;
        --bs-gutter-y: 22px;
    }


    /* ================= CARD ================= */

    .product-card {
        border-radius: 16px;
    }

    .product-card img {
        height: 200px;

        padding: 16px;
    }

    .product-body {
        padding: 18px;
    }

    .product-name {
        margin-bottom: 18px;

        font-size: 21px;
    }

    .product-spec {
        margin-bottom: 18px;
    }

    .spec-value {
        font-size: 15px;
    }

    .spec-label {
        font-size: 12px;
    }

    .price-value {
        font-size: 17px;
    }

    .btn-spec {
        width: 145px;
        height: 40px;

        padding: 0 16px;

        font-size: 14px;
    }

}


/* =========================================================
   MOBILE
   <= 767.98px
   ========================================================= */

@media (max-width: 767.98px) {

    /* ================= LINEUP ================= */

    .lineup-section {
        padding: 45px 0 55px;

        border-radius: 0 0 28px 28px;
    }

    .container-lineup {
        padding-left: 18px;
        padding-right: 18px;
    }

    .lineup-section h2 {
        margin-bottom: 28px;

        font-size: 36px;
        line-height: 1.1;

        letter-spacing: -.8px;
    }


    /* ================= GRID ================= */

    .lineup-section .row {
        --bs-gutter-x: 16px;
        --bs-gutter-y: 18px;
    }


    /* ================= CARD ================= */

    .product-card {
        border-radius: 15px;
    }

    .product-card img {
        height: 190px;

        padding: 14px;
    }

    .product-body {
        padding: 18px 16px 20px;
    }

    .product-name {
        margin-bottom: 16px;

        font-size: 20px;
        line-height: 1.2;
    }

    .product-divider {
        margin-bottom: 16px;
    }

    .product-spec {
        margin-bottom: 18px;

        gap: 5px;
    }

    .spec-value {
        font-size: 14px;
    }

    .spec-label {
        font-size: 11px;
    }


    /* ================= FOOTER ================= */

    .product-footer {
        align-items: stretch;

        gap: 12px;
    }

    .price-label {
        font-size: 11px;
    }

    .price-value {
        font-size: 16px;
    }

    .btn-spec {
        width: 130px;
        height: 40px;

        padding: 0 13px;

        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 575.98px
   ========================================================= */

@media (max-width: 575.98px) {

    .lineup-section {
        padding: 40px 0 48px;

        border-radius: 0 0 22px 22px;
    }

    .container-lineup {
        padding-left: 14px;
        padding-right: 14px;
    }

    .lineup-section h2 {
        margin-bottom: 24px;

        font-size: 31px;
        letter-spacing: -.6px;
    }


    /* ================= CARD ================= */

    .product-card {
        border-radius: 14px;
    }

    .product-card img {
        height: 175px;

        padding: 12px;
    }

    .product-body {
        padding: 16px 14px 18px;
    }

    .product-name {
        margin-bottom: 14px;

        font-size: 18px;
    }

    .product-divider {
        margin-bottom: 14px;
    }

    .product-spec {
        margin-bottom: 16px;
    }

    .spec-value {
        font-size: 13px;
    }

    .spec-label {
        margin-top: 3px;

        font-size: 10px;
    }

    .product-footer {
        gap: 10px;
    }

    .price-label {
        font-size: 10px;
    }

    .price-value {
        font-size: 15px;
    }

    .btn-spec {
        width: 120px;
        height: 38px;

        padding: 0 10px;

        font-size: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 375px
   ========================================================= */

@media (max-width: 375px) {

    .lineup-section {
        padding: 35px 0 42px;
    }

    .container-lineup {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lineup-section h2 {
        margin-bottom: 21px;

        font-size: 28px;
    }


    /* ================= CARD ================= */

    .product-card img {
        height: 160px;

        padding: 10px;
    }

    .product-body {
        padding: 14px 12px 16px;
    }

    .product-name {
        font-size: 17px;
    }

    .product-spec {
        gap: 2px;
    }

    .spec-value {
        font-size: 12px;
    }

    .spec-label {
        font-size: 9px;
    }

    .price-value {
        font-size: 14px;
    }

    .btn-spec {
        width: 108px;
        height: 36px;

        padding: 0 8px;

        font-size: 11px;
    }

}

/* =========================================================
   SERVICE SECTION
   ========================================================= */

   .service-section {
    width: 100%;

    margin-top: 40px;
}


/* =========================================================
   SERVICE ROW
   ========================================================= */

.service-section .row {
    position: relative;

    margin-left: 0;
    margin-right: 0;

    background: #1d5df7;

    border-radius: 40px;

    overflow: visible;
}


/* =========================================================
   SERVICE LEFT
   ========================================================= */

.service-left {
    position: relative;

    min-height: 260px;

    padding: 0;

    background: #1d5df7;

    overflow: visible;
}


/* =========================================================
   VROOM WRAPPER
   ========================================================= */

.vroom-wrap {
    position: absolute;

    top: 5px;
    left: 5px;

    z-index: 1;

    transform: rotate(-15deg);
}


/* =========================================================
   VROOM TEXT
   ========================================================= */

.vroom-text {
    position: absolute;

    top: 0;
    left: 0;

    z-index: 1;

    width: 390px;
    height: 220px;

    pointer-events: none;
}

.vroom-text span {
    position: absolute;

    display: block;

    font-family: 'Bangers', cursive;

    font-size: 200px;
    font-weight: 400;
    line-height: .8;

    color: #fff;

    -webkit-text-stroke: 2px #000;

    white-space: nowrap;
}


/* =========================================================
   VROOM LETTER POSITION
   ========================================================= */

.vroom-text span:nth-child(1) {
    left: -15px;
    top: -80px;

    transform: rotate(-5deg);
}

.vroom-text span:nth-child(2) {
    left: 70px;
    top: -80px;

    transform: rotate(0deg);
}

.vroom-text span:nth-child(3) {
    left: 140px;
    top: -65px;

    transform: rotate(5deg);
}

.vroom-text span:nth-child(4) {
    left: 220px;
    top: -40px;

    transform: rotate(8deg);
}

.vroom-text span:nth-child(5) {
    left: 265px;
    top: 15px;

    transform: rotate(22deg);
}


/* =========================================================
   VROOM SHADOW
   ========================================================= */

.vroom-shadow {
    position: absolute;

    top: -5px;
    left: 5px;

    z-index: 0;

    font-family: 'Bangers', cursive;

    font-size: 98px;
    line-height: 1;

    color: #005dff;

    -webkit-text-stroke: 2px #005dff;
}


/* =========================================================
   CAR IMAGE
   ========================================================= */

.car-image {
    position: absolute;

    left: -10px;
    bottom: -55px;

    z-index: 2;

    display: block;

    width: 500px;
    max-width: none;

    height: auto;

    pointer-events: none;
}


/* =========================================================
   SERVICE RIGHT
   ========================================================= */

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

    padding: 35px 50px;

    color: #fff;
}


/* =========================================================
   SERVICE TITLE
   ========================================================= */

.service-title {
    margin: 0 0 35px;

    color: #fff;

    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;

    text-align: center;
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-item i,
.service-right i {
    display: block;

    margin-bottom: 10px;

    font-size: 34px;

    line-height: 1;
}


/* =========================================================
   SERVICE DESCRIPTION
   ========================================================= */

.service-right p {
    margin: 0;

    color: #fff;

    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   SERVICE INNER ROW
   ========================================================= */

.service-right .row {
    margin-left: 0;
    margin-right: 0;

    background: transparent;

    border-radius: 0;
}


/* =========================================================
   SERVICE TABLET
   768px - 991.98px
   ========================================================= */

@media (max-width: 991.98px) {

    .service-section {
        margin-top: 55px;
    }


    /* ================= ROW ================= */

    .service-section .row {
        border-radius: 30px;

        overflow: visible;
    }


    /* ================= LEFT ================= */

    .service-left {
        min-height: 280px;

        display: flex;
        align-items: flex-end;
        justify-content: center;

        padding: 0;

        overflow: visible;
    }


    /* ================= VROOM ================= */

    .vroom-wrap {
        top: -20px;
        left: 50%;

        width: 100%;

        transform:
            translateX(-50%)
            rotate(-10deg);

        pointer-events: none;
    }

    .vroom-text {
        position: relative;

        width: 330px;
        height: 155px;

        margin: 0 auto;
    }

    .vroom-text span {
        font-size: 150px;

        -webkit-text-stroke: 2px #000;
    }

    .vroom-text span:nth-child(1) {
        left: 0;
        top: 28px;

        transform: rotate(-15deg);
    }

    .vroom-text span:nth-child(2) {
        left: 45px;
        top: 15px;

        transform: rotate(-10deg);
    }

    .vroom-text span:nth-child(3) {
        left: 95px;
        top: 0;

        transform: rotate(-5deg);
    }

    .vroom-text span:nth-child(4) {
        left: 150px;
        top: 0;

        transform: rotate(8deg);
    }

    .vroom-text span:nth-child(5) {
        left: 210px;
        top: 18px;

        transform: rotate(18deg);
    }


    /* ================= CAR ================= */

    .car-image {
        position: relative;

        left: auto;
        bottom: auto;

        width: 340px;
        max-width: 88%;

        margin: 0 auto 0;

        transform: none;
    }


    /* ================= RIGHT ================= */

    .service-right {
        padding: 30px 25px 35px;

        text-align: center;
    }

    .service-title {
        margin-bottom: 25px;

        font-size: 27px;
    }


    /* ================= SERVICE ITEMS ================= */

    .service-right .row {
        background: transparent;

        border-radius: 0;
    }

    .service-right .col-6 {
        margin-bottom: 25px;
    }

    .service-right i,
    .service-item i {
        margin-bottom: 10px;

        font-size: 31px;
    }

    .service-right p {
        font-size: 14px;
        line-height: 1.55;
    }

}


/* =========================================================
   SERVICE MOBILE
   <= 767.98px
   ========================================================= */

@media (max-width: 767.98px) {

    .service-section {
        margin-top: 45px;

        padding-left: 12px;
        padding-right: 12px;
    }


    /* ================= ROW ================= */

    .service-section .row {
        border-radius: 25px;
    }


    /* ================= LEFT ================= */

    .service-left {
        min-height: 250px;

        padding-top: 15px;
    }


    /* ================= VROOM ================= */

    .vroom-wrap {
        top: -12px;

        transform:
            translateX(-50%)
            rotate(-8deg);
    }

    .vroom-text {
        width: 290px;
        height: 130px;
    }

    .vroom-text span {
        font-size: 125px;

        -webkit-text-stroke: 1.5px #000;
    }

    .vroom-text span:nth-child(1) {
        left: 0;
        top: 25px;
    }

    .vroom-text span:nth-child(2) {
        left: 38px;
        top: 14px;
    }

    .vroom-text span:nth-child(3) {
        left: 78px;
        top: 2px;
    }

    .vroom-text span:nth-child(4) {
        left: 126px;
        top: 2px;
    }

    .vroom-text span:nth-child(5) {
        left: 175px;
        top: 16px;
    }


    /* ================= CAR ================= */

    .car-image {
        width: 300px;
        max-width: 92%;
    }


    /* ================= RIGHT ================= */

    .service-right {
        padding: 25px 18px 30px;
    }

    .service-title {
        margin-bottom: 22px;

        font-size: 24px;
    }

    .service-right .col-6 {
        margin-bottom: 22px;
    }

    .service-right i,
    .service-item i {
        font-size: 29px;

        margin-bottom: 8px;
    }

    .service-right p {
        font-size: 13px;
        line-height: 1.55;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 575.98px
   ========================================================= */

@media (max-width: 575.98px) {

    .service-section {
        margin-top: 38px;

        padding-left: 10px;
        padding-right: 10px;
    }


    /* ================= ROW ================= */

    .service-section .row {
        border-radius: 22px;
    }


    /* ================= LEFT ================= */

    .service-left {
        min-height: 220px;
    }


    /* ================= VROOM ================= */

    .vroom-wrap {
        top: -8px;
    }

    .vroom-text {
        width: 255px;
        height: 112px;
    }

    .vroom-text span {
        font-size: 108px;

        -webkit-text-stroke: 1.5px #000;
    }

    .vroom-text span:nth-child(1) {
        left: 0;
        top: 23px;
    }

    .vroom-text span:nth-child(2) {
        left: 33px;
        top: 13px;
    }

    .vroom-text span:nth-child(3) {
        left: 68px;
        top: 1px;
    }

    .vroom-text span:nth-child(4) {
        left: 111px;
        top: 1px;
    }

    .vroom-text span:nth-child(5) {
        left: 154px;
        top: 14px;
    }


    /* ================= CAR ================= */

    .car-image {
        width: 260px;
        max-width: 94%;
    }


    /* ================= RIGHT ================= */

    .service-right {
        padding: 22px 15px 27px;
    }

    .service-title {
        font-size: 22px;

        margin-bottom: 20px;
    }

    .service-right .col-6 {
        margin-bottom: 20px;
    }

    .service-right i,
    .service-item i {
        font-size: 26px;

        margin-bottom: 7px;
    }

    .service-right p {
        font-size: 12px;
        line-height: 1.5;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 375px
   ========================================================= */

@media (max-width: 375px) {

    .service-section {
        margin-top: 32px;

        padding-left: 8px;
        padding-right: 8px;
    }


    /* ================= LEFT ================= */

    .service-left {
        min-height: 195px;
    }


    /* ================= VROOM ================= */

    .vroom-text {
        width: 225px;
        height: 100px;
    }

    .vroom-text span {
        font-size: 94px;

        -webkit-text-stroke: 1px #000;
    }

    .vroom-text span:nth-child(1) {
        left: 0;
        top: 20px;
    }

    .vroom-text span:nth-child(2) {
        left: 29px;
        top: 11px;
    }

    .vroom-text span:nth-child(3) {
        left: 59px;
        top: 0;
    }

    .vroom-text span:nth-child(4) {
        left: 97px;
        top: 0;
    }

    .vroom-text span:nth-child(5) {
        left: 135px;
        top: 12px;
    }


    /* ================= CAR ================= */

    .car-image {
        width: 225px;
        max-width: 95%;
    }


    /* ================= RIGHT ================= */

    .service-right {
        padding: 20px 12px 24px;
    }

    .service-title {
        font-size: 20px;

        margin-bottom: 18px;
    }

    .service-right .col-6 {
        margin-bottom: 18px;
    }

    .service-right i,
    .service-item i {
        font-size: 24px;
    }

    .service-right p {
        font-size: 11px;
    }

}


/* =========================================================
   PROMO SECTION
   FULL WIDTH / EDGE TO EDGE
   ========================================================= */

   .promo-section {
    position: relative;

    width: 100%;

    padding: 90px 0;

    overflow: hidden;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.promo-wrapper {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}


/* =========================================================
   PROMO CARD
   ========================================================= */

.promo-card {
    position: relative;

    display: block;

    width: 100%;

    overflow: hidden;

    border-radius: 0;

    background:
        linear-gradient(
            135deg,
            #123b96 0%,
            #1f4fbd 45%,
            #2866d8 100%
        );

    box-shadow:
        0 30px 80px rgba(17, 50, 120, .18);

    isolation: isolate;

    transition:
        transform .4s ease,
        box-shadow .4s ease;
}


/* =========================================================
   DECORATIVE LIGHT
   TOP LEFT
   ========================================================= */

.promo-card::before {
    content: "";

    position: absolute;

    top: -320px;
    left: -220px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .16) 0%,
            rgba(255, 255, 255, .07) 28%,
            rgba(255, 255, 255, 0) 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   DECORATIVE LIGHT
   BOTTOM RIGHT
   ========================================================= */

.promo-card::after {
    content: "";

    position: absolute;

    right: 15%;
    bottom: -350px;

    width: 600px;
    height: 600px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .10) 0%,
            rgba(255, 255, 255, 0) 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   BOOTSTRAP ROW FIX
   ========================================================= */

.promo-card .row {
    min-height: 500px;

    margin-left: 0;
    margin-right: 0;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.promo-left {
    position: relative;

    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    height: 100%;

    padding:
        75px
        clamp(40px, 7vw, 120px);

    background:
        linear-gradient(
            135deg,
            rgba(18, 59, 150, .98),
            rgba(31, 79, 189, .94)
        );

    color: #fff;
}


/* =========================================================
   LEFT DECORATIVE LINE
   ========================================================= */

.promo-left::before {
    content: "";

    position: absolute;

    top: 12%;
    left: 0;

    width: 4px;
    height: 76%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, .45),
            transparent
        );

    opacity: .7;

    pointer-events: none;
}


/* =========================================================
   DIAGONAL DETAIL
   ========================================================= */

.promo-left::after {
    content: "";

    position: absolute;

    top: 0;
    right: -100px;

    width: 200px;
    height: 100%;

    background:
        linear-gradient(
            110deg,
            transparent 43%,
            rgba(255, 255, 255, .035) 44%,
            rgba(255, 255, 255, .035) 56%,
            transparent 57%
        );

    opacity: .8;

    pointer-events: none;
}


/* =========================================================
   PROMO LABEL
   ========================================================= */

.promo-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    width: fit-content;
    max-width: 100%;

    margin-bottom: 24px;
    padding: 9px 16px;

    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 999px;

    background: rgba(255, 255, 255, .08);

    color: rgba(255, 255, 255, .96);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 1.8px;
    text-transform: uppercase;

    white-space: nowrap;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, .08);
}


/* =========================================================
   LABEL DOT
   ========================================================= */

.promo-label::before {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, .12);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .promo-section {
        padding: 100px 0;
    }

    .promo-card .row {
        min-height: 540px;
    }

    .promo-left {
        padding:
            80px
            clamp(70px, 7vw, 140px);
    }

}


/* =========================================================
   TABLET
   768px - 991.98px
   ========================================================= */

@media (max-width: 991.98px) {

    .promo-section {
        padding: 70px 0;
    }

    .promo-card .row {
        min-height: 440px;
    }

    .promo-left {
        padding:
            55px
            45px;
    }

    .promo-left::after {
        right: -80px;

        width: 160px;
    }

    .promo-card::before {
        top: -280px;
        left: -200px;

        width: 560px;
        height: 560px;
    }

    .promo-card::after {
        right: 5%;
        bottom: -300px;

        width: 500px;
        height: 500px;
    }

    .promo-label {
        margin-bottom: 20px;

        padding: 8px 14px;

        font-size: 9px;
    }

}


/* =========================================================
   MOBILE
   <= 767.98px
   ========================================================= */

@media (max-width: 767.98px) {

    .promo-section {
        padding: 55px 0;
    }

    .promo-card {
        border-radius: 24px;
    }

    .promo-card .row {
        min-height: 0;
    }


    /* ================= LEFT ================= */

    .promo-left {
        min-height: 390px;

        padding:
            50px
            28px;
    }

    .promo-left::before {
        top: 8%;

        width: 3px;
        height: 84%;
    }

    .promo-left::after {
        right: -70px;

        width: 140px;
    }


    /* ================= DECORATION ================= */

    .promo-card::before {
        top: -220px;
        left: -180px;

        width: 440px;
        height: 440px;
    }

    .promo-card::after {
        right: -100px;
        bottom: -260px;

        width: 430px;
        height: 430px;
    }


    /* ================= LABEL ================= */

    .promo-label {
        margin-bottom: 18px;

        padding: 8px 13px;

        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .promo-label::before {
        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 575.98px
   ========================================================= */

@media (max-width: 575.98px) {

    .promo-section {
        padding: 45px 0;
    }

    .promo-card {
        border-radius: 20px;
    }


    /* ================= LEFT ================= */

    .promo-left {
        min-height: 350px;

        padding:
            42px
            22px;
    }

    .promo-left::before {
        width: 2px;
    }

    .promo-left::after {
        right: -55px;

        width: 110px;
    }


    /* ================= DECORATION ================= */

    .promo-card::before {
        top: -180px;
        left: -150px;

        width: 360px;
        height: 360px;
    }

    .promo-card::after {
        right: -110px;
        bottom: -220px;

        width: 360px;
        height: 360px;
    }


    /* ================= LABEL ================= */

    .promo-label {
        gap: 7px;

        margin-bottom: 16px;
        padding: 7px 11px;

        font-size: 7.5px;

        letter-spacing: 1.2px;
    }

    .promo-label::before {
        width: 5px;
        height: 5px;

        flex-basis: 5px;

        box-shadow:
            0 0 0 3px rgba(255, 255, 255, .12);
    }

}


/* =========================================================
   VERY SMALL MOBILE
   <= 375px
   ========================================================= */

@media (max-width: 375px) {

    .promo-section {
        padding: 38px 0;
    }

    .promo-card {
        border-radius: 18px;
    }

    .promo-left {
        min-height: 320px;

        padding:
            35px
            17px;
    }

    .promo-left::after {
        right: -45px;

        width: 90px;
    }

    .promo-card::before {
        top: -150px;
        left: -125px;

        width: 300px;
        height: 300px;
    }

    .promo-card::after {
        right: -100px;
        bottom: -190px;

        width: 300px;
        height: 300px;
    }

    .promo-label {
        gap: 6px;

        margin-bottom: 14px;
        padding: 6px 10px;

        font-size: 7px;

        letter-spacing: 1px;
    }

}


/* =========================================================
   PROMO TITLE
========================================================= */

.promo-left h3 {
    position: relative;
    z-index: 2;

    max-width: 700px;
    margin: 0 0 22px;

    color: #fff;

    font-size: clamp(38px, 4.4vw, 68px);
    line-height: 1.01;
    font-weight: 800;

    letter-spacing: -2.8px;

    text-wrap: balance;

    overflow-wrap: anywhere;
}


/* =========================================================
   PROMO DESCRIPTION
========================================================= */

.promo-left p {
    position: relative;
    z-index: 2;

    max-width: 590px;
    margin: 0 0 36px;

    color: rgba(255, 255, 255, .78);

    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;

    overflow-wrap: anywhere;
}


/* =========================================================
   PROMO BUTTON
========================================================= */

.btn-promo {
    position: relative;
    z-index: 5;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    width: fit-content;
    max-width: 100%;

    padding: 15px 24px;

    border: none;
    border-radius: 999px;

    background: #fff;
    color: #1f4fbd;

    font-size: 13px;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .16);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease,
        color .3s ease;
}


.btn-promo:hover {
    background: #fff;
    color: #123b96;

    transform: translateY(-4px);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .23);
}


.btn-promo i {
    display: inline-flex;

    flex-shrink: 0;

    font-size: 16px;

    transition:
        transform .3s ease;
}


.btn-promo:hover i {
    transform: translateX(6px);
}


/* =========================================================
   RIGHT IMAGE AREA
========================================================= */

.promo-right {
    position: relative;

    min-width: 0;
    min-height: 500px;

    height: 100%;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #eef3fb;

    isolation: isolate;
}


/* =========================================================
   PROMO IMAGE
   FULL IMAGE / NO CROP
========================================================= */

.promo-banner-image {
    position: relative;
    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 500px;

    object-fit: contain;
    object-position: center;

    transform: scale(1);

    transition:
        transform 1s cubic-bezier(.2, .7, .2, 1);
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.promo-card:hover .promo-banner-image {
    transform: scale(1.025);
}


/* =========================================================
   IMAGE LEFT BLEND
========================================================= */

.promo-right::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(31, 79, 189, .35) 0%,
            rgba(31, 79, 189, .16) 18%,
            rgba(31, 79, 189, .03) 38%,
            transparent 55%
        );
}


/* =========================================================
   IMAGE DARK GRADIENT
========================================================= */

.promo-right::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, .02) 0%,
            rgba(0, 0, 0, .08) 100%
        );
}


/* =========================================================
   NO IMAGE
========================================================= */

.promo-no-image {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 500px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #edf3fb,
            #dce7f7
        );
}


.promo-no-image i {
    font-size: 90px;

    color: #1f4fbd;

    opacity: .16;
}


/* =========================================================
   IMAGE FILTER
========================================================= */

.promo-right .promo-banner-image {
    filter:
        saturate(1.02)
        contrast(1.02);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .promo-card .row {
        min-height: 560px;
    }


    .promo-left {
        padding-left: 120px;
        padding-right: 80px;
    }


    .promo-right {
        min-height: 560px;
    }


    .promo-banner-image {
        min-height: 560px;
    }


    .promo-no-image {
        min-height: 560px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .promo-left {
        min-height: 400px;

        padding:
            55px
            45px;
    }


    .promo-left h3 {
        max-width: 650px;

        font-size: 46px;

        letter-spacing: -1.8px;
    }


    .promo-left p {
        max-width: 600px;

        margin-bottom: 32px;

        font-size: 15px;
    }


    .promo-right {
        min-height: 400px;
    }


    .promo-banner-image {
        min-height: 400px;
    }


    .promo-no-image {
        min-height: 400px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .promo-left {
        min-height: 390px;

        padding:
            50px
            28px;
    }


    .promo-left::before {
        width: 3px;

        top: 10%;
        height: 80%;
    }


    .promo-left::after {
        display: none;
    }


    .promo-label {
        margin-bottom: 19px;

        padding:
            8px
            13px;

        font-size: 9px;

        letter-spacing: 1.5px;

        max-width: 100%;
    }


    .promo-label::before {
        width: 6px;
        height: 6px;

        flex-basis: 6px;
    }


    .promo-left h3 {
        max-width: 100%;

        margin-bottom: 18px;

        font-size: 35px;

        line-height: 1.04;

        letter-spacing: -1.3px;
    }


    .promo-left p {
        max-width: 100%;

        margin-bottom: 28px;

        font-size: 14px;

        line-height: 1.7;
    }


    .btn-promo {
        padding:
            14px
            20px;

        font-size: 12px;
    }


    .promo-right {
        min-height: 280px;

        height: 280px;
    }


    .promo-banner-image {
        width: 100%;
        height: 100%;

        min-height: 280px;

        object-position: center;
    }


    .promo-no-image {
        min-height: 280px;
    }


    .promo-no-image i {
        font-size: 65px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .promo-section {
        padding:
            45px
            0;
    }


    .promo-card {
        border-radius: 20px;
    }


    .promo-left {
        min-height: 350px;

        padding:
            42px
            22px;
    }


    .promo-left h3 {
        font-size: 31px;

        line-height: 1.05;

        letter-spacing: -1.1px;
    }


    .promo-left p {
        font-size: 13px;

        line-height: 1.7;
    }


    .btn-promo {
        padding:
            13px
            18px;

        font-size: 11px;

        gap: 9px;
    }


    .btn-promo i {
        font-size: 14px;
    }


    .promo-right {
        min-height: 240px;

        height: 240px;
    }


    .promo-banner-image {
        min-height: 240px;
    }


    .promo-no-image {
        min-height: 240px;
    }


    .promo-no-image i {
        font-size: 58px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .promo-section {
        padding:
            38px
            0;
    }


    .promo-card {
        border-radius: 18px;
    }


    .promo-left {
        min-height: 320px;

        padding:
            35px
            17px;
    }


    .promo-label {
        margin-bottom: 16px;

        padding:
            7px
            11px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }


    .promo-left h3 {
        margin-bottom: 16px;

        font-size: 28px;

        letter-spacing: -.9px;
    }


    .promo-left p {
        margin-bottom: 24px;

        font-size: 12px;
    }


    .btn-promo {
        padding:
            12px
            16px;

        font-size: 10px;
    }


    .promo-right {
        min-height: 220px;

        height: 220px;
    }


    .promo-banner-image {
        min-height: 220px;
    }


    .promo-no-image {
        min-height: 220px;
    }


    .promo-no-image i {
        font-size: 52px;
    }

}

/* =========================================================
   NEWS
========================================================= */

.news-section {
    width: 100%;

    padding:
        60px
        0
        80px;
}


.news-wrapper {
    width: 100%;
    max-width: 1850px;

    margin: 0 auto;

    padding:
        50px
        40px;

    background: #fff;

    border-radius: 45px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .03);

    min-width: 0;
}


.news-heading {
    margin: 0 0 50px;

    font-size: 52px;
    font-weight: 700;

    line-height: 1.15;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   NEWS CARD
========================================================= */

.news-card {
    width: 100%;
    min-width: 0;

    background: #fff;

    border: 1px solid #ececec;
    border-radius: 18px;

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.news-card:hover {
    transform: translateY(-4px);

    border-color: #dadada;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .06);
}


/* =========================================================
   NEWS IMAGE
========================================================= */

.news-img-wrap {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.news-card img {
    display: block;

    width: 100%;
    height: 200px;

    object-fit: cover;
    object-position: center;

    transition:
        transform .4s ease;
}


.news-card:hover img {
    transform: scale(1.025);
}


/* =========================================================
   NEWS BADGE
========================================================= */

.badge-berita {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 2;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    max-width: calc(100% - 24px);

    padding:
        6px
        14px;

    background: var(--brand-blue);

    color: #fff;

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;

    line-height: 1.2;

    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   NEWS TITLE
========================================================= */

.news-title {
    margin: 0;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.6;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   NEWS DATE
========================================================= */

.news-date {
    margin: 0;

    font-size: 13px;

    line-height: 1.5;

    color: #8c8c8c;
}


/* =========================================================
   NEWS - LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .news-wrapper {
        padding:
            55px
            50px;
    }


    .news-heading {
        font-size: 54px;

        margin-bottom: 50px;
    }


    .news-card img {
        height: 215px;
    }

}


/* =========================================================
   NEWS - TABLET
========================================================= */

@media (max-width: 991.98px) {

    .news-section {
        padding:
            50px
            0
            65px;
    }


    .news-wrapper {
        max-width: 100%;

        padding:
            40px
            30px;

        border-radius: 35px;
    }


    .news-heading {
        margin-bottom: 35px;

        font-size: 40px;

        text-align: center;
    }


    .news-card {
        border-radius: 16px;
    }


    .news-card img {
        height: 180px;
    }


    .news-title {
        font-size: 15px;
    }


    .news-date {
        font-size: 12px;
    }

}


/* =========================================================
   NEWS - MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .news-section {
        padding:
            45px
            0
            55px;
    }


    .news-wrapper {
        padding:
            35px
            18px;

        border-radius: 28px;
    }


    .news-heading {
        margin-bottom: 28px;

        font-size: 34px;

        line-height: 1.15;
    }


    .news-card {
        border-radius: 15px;
    }


    .news-card img {
        height: 190px;
    }


    .badge-berita {
        top: 10px;
        right: 10px;

        padding:
            6px
            11px;

        font-size: 10px;
    }


    .news-title {
        font-size: 15px;

        line-height: 1.5;
    }


    .news-date {
        font-size: 12px;
    }

}


/* =========================================================
   NEWS - SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .news-section {
        padding:
            40px
            0
            48px;
    }


    .news-wrapper {
        padding:
            30px
            14px;

        border-radius: 22px;
    }


    .news-heading {
        margin-bottom: 24px;

        font-size: 29px;
    }


    .news-card {
        border-radius: 14px;
    }


    .news-card img {
        height: 175px;
    }


    .badge-berita {
        top: 9px;
        right: 9px;

        padding:
            5px
            10px;

        font-size: 9px;
    }


    .news-title {
        font-size: 14px;

        line-height: 1.5;
    }


    .news-date {
        font-size: 11px;
    }

}


/* =========================================================
   NEWS - VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .news-section {
        padding:
            35px
            0
            42px;
    }


    .news-wrapper {
        padding:
            26px
            12px;

        border-radius: 18px;
    }


    .news-heading {
        margin-bottom: 20px;

        font-size: 26px;
    }


    .news-card img {
        height: 160px;
    }


    .news-title {
        font-size: 13px;
    }


    .news-date {
        font-size: 10px;
    }

}


/* =========================================================
   REVIEW
========================================================= */

.review-wrapper {
    width: 100%;
    min-width: 0;

    background: #fff;

    border-radius: 45px;

    padding: 60px;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, .05);
}


.review-left {
    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;
}


.review-right {
    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
}


.google-text {
    color: #4285f4;

    font-weight: 700;
}


.car2-image {
    display: block;

    width: 100%;
    max-width: 520px;

    height: auto;

    object-fit: contain;

    transition:
        transform .3s ease;
}


.car2-image:hover {
    transform: translateY(-6px);
}


/* =========================================================
   REVIEW - LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .review-wrapper {
        padding:
            65px
            70px;
    }


    .car2-image {
        max-width: 550px;
    }

}


/* =========================================================
   REVIEW - TABLET
========================================================= */

@media (max-width: 991.98px) {

    .review-wrapper {
        padding:
            40px
            25px;

        border-radius: 35px;
    }


    .review-left {
        order: 2;

        margin-top: 30px;

        text-align: center;
    }


    .review-right {
        order: 1;

        margin-bottom: 25px;
    }


    .car2-image {
        max-width: 320px;
    }


    .review-header {
        text-align: center;
    }

}


/* =========================================================
   REVIEW - MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .review-wrapper {
        padding:
            30px
            18px;

        border-radius: 28px;
    }


    .review-left {
        margin-top: 25px;
    }


    .review-right {
        margin-bottom: 20px;
    }


    .car2-image {
        max-width: 290px;
    }

}


/* =========================================================
   REVIEW - SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .review-wrapper {
        padding:
            25px
            15px;

        border-radius: 22px;
    }


    .review-left {
        margin-top: 20px;
    }


    .car2-image {
        max-width: 250px;
    }

}


/* =========================================================
   REVIEW - VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .review-wrapper {
        padding:
            22px
            12px;

        border-radius: 18px;
    }


    .car2-image {
        max-width: 220px;
    }

}


/* =========================================================
   FOOTER
========================================================= */

.footer-section {
    width: 100%;

    margin-top: 80px;

    padding:
        70px
        0
        25px;

    background: #1f62f2;

    color: #fff;

    border-radius:
        40px
        40px
        0
        0;
}


.footer-logo {
    display: flex;

    align-items: flex-start;
    justify-content: center;
}


.footer-logo-img {
    width: 500px;
    height: 125px;
    object-fit: contain;
}


.footer-section h5 {
    margin:
        0
        0
        18px;

    font-size: 30px;

    font-weight: 700;

    line-height: 1.2;

    color: #fff;

    overflow-wrap: anywhere;
}


.footer-section p {
    margin: 0;

    font-size: 15px;

    line-height: 1.8;

    color: #eef4ff;

    overflow-wrap: anywhere;
}


.footer-section strong {
    display: block;

    margin-bottom: 8px;

    font-size: 18px;

    line-height: 1.4;

    color: #fff;

    overflow-wrap: anywhere;
}


.footer-section ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.footer-section li {
    margin-bottom: 14px;
}


.footer-section a {
    color: #eef4ff;

    text-decoration: none;

    transition:
        color .3s ease;
}


.footer-section a:hover {
    color: #fff;
}


/* =========================================================
   FOOTER SOCIAL
========================================================= */

.footer-social {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 15px;
}


.footer-social a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 28px;

    color: #fff;
}


/* =========================================================
   FOOTER COPYRIGHT
========================================================= */

.footer-copy {
    margin-top: 60px;

    text-align: center;

    font-size: 15px;

    line-height: 1.6;

    color: #eef4ff;

    overflow-wrap: anywhere;
}


/* =========================================================
   FOOTER - LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .footer-section {
        padding:
            80px
            0
            28px;
    }


    .footer-logo-img {
        width: 200px;
    }

}


/* =========================================================
   FOOTER LOGO - RESPONSIVE
========================================================= */

.footer-logo-img {
    width: clamp(180px, 32vw, 400px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .footer-logo-img {
        width: clamp(180px, 38vw, 320px);
        height: auto;
        max-width: 100%;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .footer-logo-img {
        width: clamp(170px, 55vw, 280px);
        height: auto;
        max-width: 100%;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .footer-logo-img {
        width: clamp(160px, 65vw, 240px);
        height: auto;
        max-width: 100%;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .footer-logo-img {
        width: clamp(150px, 72vw, 210px);
        height: auto;
        max-width: 100%;
    }

}

/* =========================================================
   ABOUT PAGE
========================================================= */

.vf-about {
    font-family: 'Poppins', 'Segoe UI', sans-serif;

    color: var(--vf-ink);

    overflow-x: hidden;
}


.vf-about *,
.vf-about *::before,
.vf-about *::after {
    box-sizing: border-box;
}


.vf-about img {
    display: block;

    max-width: 100%;

    height: auto;
}


/* =========================================================
   VINFAST ABOUT HERO
========================================================= */

.vf-hero {
    position: relative;

    width: 100%;

    min-height: 720px;

    overflow: hidden;

    background: #06101c;
}


/* =========================================================
   HERO BACKGROUND IMAGE
========================================================= */

.vf-hero__image {
    position: absolute;

    inset: 0;

    z-index: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

.vf-hero__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .60) 24%,
            rgba(0, 0, 0, .32) 48%,
            rgba(0, 0, 0, .08) 72%,
            rgba(0, 0, 0, .05) 100%
        );
}


/* =========================================================
   HERO CONTENT
========================================================= */

.vf-hero__content {
    position: relative;

    z-index: 3;

    width: 100%;
    min-height: 720px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        80px
        clamp(30px, 8vw, 140px);
}


/* =========================================================
   HERO BRAND
========================================================= */

.vf-hero__brand {
    position: absolute;

    top: 55px;
    left: clamp(30px, 8vw, 140px);

    display: flex;

    align-items: center;

    gap: 16px;

    max-width: calc(100% - 60px);
}


/* =========================================================
   VINFAST V LOGO
========================================================= */

.vf-hero__logo {
    flex: 0 0 auto;

    width: 58px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    font-family: Arial, sans-serif;

    font-size: 48px;

    font-weight: 300;

    line-height: 1;

    transform: skewX(-7deg);

    text-shadow:
        0 4px 15px rgba(0, 0, 0, .35);
}


/* =========================================================
   HERO BRAND TEXT
========================================================= */

.vf-hero__brand-text {
    min-width: 0;

    display: flex;

    flex-direction: column;

    line-height: 1;
}


.vf-hero__brand-text strong {
    color: #fff;

    font-size: 25px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 7px;

    white-space: nowrap;
}


.vf-hero__brand-text span {
    margin-top: 9px;

    color: rgba(255, 255, 255, .88);

    font-size: 13px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 7px;

    white-space: nowrap;
}


/* =========================================================
   HERO TEXT
========================================================= */

.vf-hero__text {
    width: 100%;
    max-width: 720px;

    margin-top: 50px;

    min-width: 0;
}


/* =========================================================
   HERO HEADLINE
========================================================= */

.vf-hero__text h1 {
    margin: 0 0 24px;

    color: #fff;

    font-size:
        clamp(
            46px,
            5vw,
            76px
        );

    line-height: .98;

    font-weight: 800;

    letter-spacing: -3px;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


.vf-hero__text h1 span {
    display: inline-block;

    color: #1677ff;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-hero {
        min-height: 760px;
    }


    .vf-hero__content {
        min-height: 760px;

        padding-left: 120px;
        padding-right: 120px;
    }


    .vf-hero__brand {
        left: 120px;

        top: 60px;
    }


    .vf-hero__text {
        max-width: 760px;

        margin-top: 55px;
    }


    .vf-hero__text h1 {
        font-size:
            clamp(
                58px,
                4.8vw,
                82px
            );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-hero {
        min-height: 620px;
    }


    .vf-hero__content {
        min-height: 620px;

        padding:
            70px
            40px;
    }


    .vf-hero__brand {
        top: 40px;
        left: 40px;

        gap: 13px;

        max-width: calc(100% - 80px);
    }


    .vf-hero__logo {
        width: 48px;
        height: 48px;

        font-size: 40px;
    }


    .vf-hero__brand-text strong {
        font-size: 21px;

        letter-spacing: 5px;
    }


    .vf-hero__brand-text span {
        margin-top: 7px;

        font-size: 11px;

        letter-spacing: 5px;
    }


    .vf-hero__text {
        max-width: 620px;

        margin-top: 45px;
    }


    .vf-hero__text h1 {
        margin-bottom: 20px;

        font-size:
            clamp(
                42px,
                6vw,
                62px
            );

        letter-spacing: -2.2px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-hero {
        min-height: 560px;
    }


    .vf-hero__image {
        object-position: center center;
    }


    .vf-hero__overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, .82) 0%,
                rgba(0, 0, 0, .62) 40%,
                rgba(0, 0, 0, .25) 75%,
                rgba(0, 0, 0, .08) 100%
            );
    }


    .vf-hero__content {
        min-height: 560px;

        justify-content: flex-end;

        padding:
            40px
            20px
            50px;
    }


    .vf-hero__brand {
        top: 28px;
        left: 20px;

        gap: 10px;

        max-width: calc(100% - 40px);
    }


    .vf-hero__logo {
        width: 40px;
        height: 40px;

        font-size: 34px;
    }


    .vf-hero__brand-text strong {
        font-size: 17px;

        letter-spacing: 3.5px;
    }


    .vf-hero__brand-text span {
        margin-top: 6px;

        font-size: 8px;

        letter-spacing: 3px;
    }


    .vf-hero__text {
        max-width: 100%;

        margin-top: 30px;
    }


    .vf-hero__text h1 {
        margin-bottom: 18px;

        font-size:
            clamp(
                34px,
                9vw,
                48px
            );

        line-height: 1;

        letter-spacing: -1.6px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-hero {
        min-height: 510px;
    }


    .vf-hero__content {
        min-height: 510px;

        padding:
            35px
            15px
            38px;
    }


    .vf-hero__brand {
        top: 22px;
        left: 15px;

        gap: 8px;

        max-width: calc(100% - 30px);
    }


    .vf-hero__logo {
        width: 34px;
        height: 34px;

        font-size: 29px;
    }


    .vf-hero__brand-text strong {
        font-size: 14px;

        letter-spacing: 2.5px;
    }


    .vf-hero__brand-text span {
        margin-top: 5px;

        font-size: 7px;

        letter-spacing: 2.2px;
    }


    .vf-hero__text {
        margin-top: 25px;
    }


    .vf-hero__text h1 {
        margin-bottom: 16px;

        font-size:
            clamp(
                30px,
                9vw,
                42px
            );

        letter-spacing: -1.2px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-hero {
        min-height: 480px;
    }


    .vf-hero__content {
        min-height: 480px;

        padding:
            30px
            12px
            32px;
    }


    .vf-hero__brand {
        top: 18px;
        left: 12px;

        gap: 7px;

        max-width: calc(100% - 24px);
    }


    .vf-hero__logo {
        width: 30px;
        height: 30px;

        font-size: 26px;
    }


    .vf-hero__brand-text strong {
        font-size: 12px;

        letter-spacing: 2px;
    }


    .vf-hero__brand-text span {
        margin-top: 4px;

        font-size: 6px;

        letter-spacing: 1.8px;
    }


    .vf-hero__text {
        margin-top: 20px;
    }


    .vf-hero__text h1 {
        margin-bottom: 14px;

        font-size:
            clamp(
                27px,
                8.8vw,
                36px
            );

        letter-spacing: -.9px;
    }

}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

.vf-hero__text p {
    width: 100%;
    max-width: 590px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, .82);

    font-size: 17px;
    line-height: 1.7;
    font-weight: 400;

    overflow-wrap: anywhere;
}


/* =========================================================
   HERO FEATURES
========================================================= */

.vf-hero__features {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 38px;

    margin-bottom: 36px;

    min-width: 0;
}


.vf-hero__feature {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.vf-hero__feature-icon {
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #1677ff;

    font-size: 30px;
}


.vf-hero__feature-icon i {
    display: block;

    line-height: 1;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.vf-hero__feature div:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;
}


.vf-hero__feature strong {
    color: #fff;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.2;

    overflow-wrap: anywhere;
}


.vf-hero__feature span {
    margin-top: 3px;

    color: rgba(255, 255, 255, .75);

    font-size: 13px;

    line-height: 1.2;

    overflow-wrap: anywhere;
}


/* =========================================================
   HERO BUTTON
========================================================= */

.vf-hero__button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    width: fit-content;
    max-width: 100%;

    padding:
        16px
        27px;

    border: 0;
    border-radius: 999px;

    background: #1559ff;

    color: #fff;

    font-size: 13px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .3px;

    text-decoration: none;

    box-shadow:
        0 12px 35px rgba(21, 89, 255, .35);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


.vf-hero__button:hover {
    color: #fff;

    background: #2870ff;

    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(21, 89, 255, .45);
}


.vf-hero__button i {
    flex: 0 0 auto;

    font-size: 18px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.vf-hero__button:hover i {
    transform: translateX(5px);
}


/* =========================================================
   HERO INDICATORS
========================================================= */

.vf-hero__indicators {
    position: absolute;

    z-index: 5;

    bottom: 28px;
    left: 50%;

    display: flex;

    align-items: center;

    gap: 8px;

    transform: translateX(-50%);
}


.vf-hero__indicators span {
    display: block;

    width: 9px;
    height: 9px;

    flex: 0 0 auto;

    border:
        1px solid
        rgba(255, 255, 255, .8);

    border-radius: 50%;

    background: transparent;

    transition:
        width .3s ease,
        background .3s ease;
}


.vf-hero__indicators span.active {
    width: 28px;

    border-radius: 999px;

    background: #fff;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-hero__text p {
        max-width: 620px;

        font-size: 18px;
    }


    .vf-hero__features {
        gap: 42px;

        margin-bottom: 38px;
    }


    .vf-hero__feature-icon {
        width: 44px;
        height: 44px;

        font-size: 31px;
    }


    .vf-hero__feature strong {
        font-size: 17px;
    }


    .vf-hero__feature span {
        font-size: 13px;
    }


    .vf-hero__button {
        padding:
            17px
            29px;

        font-size: 13px;
    }


    .vf-hero__indicators {
        bottom: 30px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-hero__text p {
        max-width: 560px;

        margin-bottom: 26px;

        font-size: 16px;
    }


    .vf-hero__features {
        gap:
            25px
            30px;

        margin-bottom: 30px;
    }


    .vf-hero__feature {
        gap: 10px;
    }


    .vf-hero__feature-icon {
        width: 38px;
        height: 38px;

        font-size: 27px;
    }


    .vf-hero__feature strong {
        font-size: 15px;
    }


    .vf-hero__feature span {
        font-size: 12px;
    }


    .vf-hero__button {
        padding:
            15px
            24px;

        font-size: 12px;
    }


    .vf-hero__button i {
        font-size: 17px;
    }


    .vf-hero__indicators {
        bottom: 24px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-hero__text p {
        max-width: 100%;

        margin-bottom: 24px;

        font-size: 14px;

        line-height: 1.7;
    }


    .vf-hero__features {
        width: 100%;

        align-items: flex-start;

        gap:
            18px
            22px;

        margin-bottom: 26px;
    }


    .vf-hero__feature {
        flex: 1 1 180px;

        gap: 9px;
    }


    .vf-hero__feature-icon {
        width: 34px;
        height: 34px;

        font-size: 24px;
    }


    .vf-hero__feature strong {
        font-size: 14px;

        line-height: 1.25;
    }


    .vf-hero__feature span {
        margin-top: 3px;

        font-size: 11px;

        line-height: 1.3;
    }


    .vf-hero__button {
        width: fit-content;

        padding:
            14px
            21px;

        font-size: 12px;

        gap: 11px;
    }


    .vf-hero__button i {
        font-size: 16px;
    }


    .vf-hero__indicators {
        bottom: 20px;

        gap: 7px;
    }


    .vf-hero__indicators span {
        width: 8px;
        height: 8px;
    }


    .vf-hero__indicators span.active {
        width: 24px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-hero__text p {
        margin-bottom: 20px;

        font-size: 13px;

        line-height: 1.65;
    }


    .vf-hero__features {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            15px
            12px;

        margin-bottom: 23px;
    }


    .vf-hero__feature {
        width: 100%;

        gap: 7px;
    }


    .vf-hero__feature-icon {
        width: 30px;
        height: 30px;

        font-size: 21px;
    }


    .vf-hero__feature strong {
        font-size: 12px;
    }


    .vf-hero__feature span {
        font-size: 10px;
    }


    .vf-hero__button {
        padding:
            13px
            19px;

        font-size: 11px;

        gap: 9px;
    }


    .vf-hero__button i {
        font-size: 15px;
    }


    .vf-hero__indicators {
        bottom: 17px;

        gap: 6px;
    }


    .vf-hero__indicators span {
        width: 7px;
        height: 7px;
    }


    .vf-hero__indicators span.active {
        width: 21px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-hero__text p {
        margin-bottom: 18px;

        font-size: 12px;
    }


    .vf-hero__features {
        gap:
            12px
            8px;

        margin-bottom: 20px;
    }


    .vf-hero__feature {
        gap: 6px;
    }


    .vf-hero__feature-icon {
        width: 27px;
        height: 27px;

        font-size: 19px;
    }


    .vf-hero__feature strong {
        font-size: 11px;
    }


    .vf-hero__feature span {
        font-size: 9px;
    }


    .vf-hero__button {
        padding:
            12px
            17px;

        font-size: 10px;
    }


    .vf-hero__button i {
        font-size: 14px;
    }


    .vf-hero__indicators {
        bottom: 14px;
    }

}

/* =========================================================
   VROOM / VISI GLOBAL
========================================================= */

.vf-vroom {
    position: relative;

    z-index: 20;

    display: grid;

    grid-template-columns: 46% 54%;

    width: 100%;

    margin-top: -38px;
    margin-bottom: 100px;

    background: #fff;

    border-radius:
        38px
        38px
        0
        0;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, .08);

    align-items: center;

    overflow: visible;

    min-width: 0;
}


/* =========================================================
   VROOM - LEFT ART
========================================================= */

.vf-vroom__art {
    position: relative;

    z-index: 10;

    min-width: 0;
    min-height: 430px;

    background: #176bff;

    border-radius:
        38px
        0
        0
        0;

    overflow: visible;
}


/* =========================================================
   DIAGONAL WHITE SHAPE
========================================================= */

.vf-vroom__art::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 180px;
    height: 100%;

    z-index: 2;

    background: #fff;

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 100%
        );

    pointer-events: none;
}


/* =========================================================
   OPTIONAL DIAGONAL SHAPE
========================================================= */

.vf-vroom__shape {
    position: absolute;

    top: 0;
    right: -95px;

    width: 180px;
    height: 100%;

    z-index: 3;

    background: #fff;

    transform: skewX(-14deg);

    pointer-events: none;
}


/* =========================================================
   VROOM WORD
========================================================= */

.vf-vroom__word {
    position: absolute;

    top: 5px;
    left: 46%;

    width: 560px;
    height: 560px;

    z-index: 1;

    transform:
        translateX(-50%)
        rotate(-8deg);

    pointer-events: none;

    user-select: none;
}


.vf-vroom__word span {
    position: absolute;

    display: block;

    font-family: 'Bangers', cursive;

    font-size: 150px;

    font-weight: 400;

    line-height: 1;

    color: #fff;

    -webkit-text-stroke: 3px #111;

    text-shadow:
        4px 4px 0 #111,
        8px 8px 0 rgba(0, 0, 0, .25);

    white-space: nowrap;
}


/* =========================================================
   VROOM - V
========================================================= */

.vf-vroom__word span:nth-child(1) {
    top: 10px;
    left: 120px;

    transform: rotate(-20deg);
}


/* =========================================================
   VROOM - R
========================================================= */

.vf-vroom__word span:nth-child(2) {
    top: -5px;
    left: 200px;

    transform: rotate(-12deg);
}


/* =========================================================
   VROOM - O
========================================================= */

.vf-vroom__word span:nth-child(3) {
    top: 0;
    left: 300px;

    transform: rotate(-5deg);
}


/* =========================================================
   VROOM - O
========================================================= */

.vf-vroom__word span:nth-child(4) {
    top: 5px;
    left: 400px;

    transform: rotate(6deg);
}


/* =========================================================
   VROOM - M
========================================================= */

.vf-vroom__word span:nth-child(5) {
    top: 28px;
    left: 500px;

    transform: rotate(18deg);
}


/* =========================================================
   VROOM CAR
========================================================= */

.vf-vroom__car {
    position: absolute;

    left: 150px;
    bottom: -30px;

    width: 650px;
    max-width: none;

    z-index: 100;

    display: block;

    transform: translateX(-20%);

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   VROOM - RIGHT COPY
========================================================= */

.vf-vroom__copy {
    position: relative;

    z-index: 5;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        65px
        70px;
}


.vf-vroom__copy h2 {
    margin:
        0
        0
        25px;

    color: #234a9b;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.5;

    overflow-wrap: anywhere;
}


.vf-vroom__copy p {
    margin:
        0
        0
        20px;

    color: #555;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.9;

    text-align: justify;

    overflow-wrap: anywhere;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-vroom {
        grid-template-columns: 46% 54%;

        margin-top: -42px;

        margin-bottom: 110px;

        border-radius:
            42px
            42px
            0
            0;
    }


    .vf-vroom__art {
        min-height: 470px;

        border-radius:
            42px
            0
            0
            0;
    }


    .vf-vroom__word {
        width: 620px;
        height: 580px;

        left: 45%;
    }


    .vf-vroom__word span {
        font-size: 165px;
    }


    .vf-vroom__word span:nth-child(1) {
        left: 125px;
    }


    .vf-vroom__word span:nth-child(2) {
        left: 215px;
    }


    .vf-vroom__word span:nth-child(3) {
        left: 315px;
    }


    .vf-vroom__word span:nth-child(4) {
        left: 420px;
    }


    .vf-vroom__word span:nth-child(5) {
        left: 525px;
    }


    .vf-vroom__car {
        left: 160px;
        bottom: -35px;

        width: 700px;
    }


    .vf-vroom__copy {
        padding:
            75px
            85px;
    }


    .vf-vroom__copy h2 {
        font-size: 27px;
    }


    .vf-vroom__copy p {
        font-size: 18px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-vroom {
        grid-template-columns:
            45%
            55%;

        margin-top: -30px;

        margin-bottom: 80px;

        border-radius:
            30px
            30px
            0
            0;
    }


    .vf-vroom__art {
        min-height: 380px;

        border-radius:
            30px
            0
            0
            0;
    }


    .vf-vroom__art::after {
        width: 130px;
    }


    .vf-vroom__shape {
        right: -65px;

        width: 125px;
    }


    .vf-vroom__word {
        top: 10px;
        left: 46%;

        width: 430px;
        height: 400px;

        transform:
            translateX(-50%)
            rotate(-8deg);
    }


    .vf-vroom__word span {
        font-size: 115px;

        -webkit-text-stroke: 2px #111;

        text-shadow:
            3px 3px 0 #111,
            6px 6px 0 rgba(0, 0, 0, .22);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 8px;
        left: 80px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 145px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 3px;
        left: 215px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 8px;
        left: 285px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 25px;
        left: 355px;
    }


    .vf-vroom__car {
        left: 80px;
        bottom: -28px;

        width: 470px;

        transform:
            translateX(-18%);
    }


    .vf-vroom__copy {
        padding:
            45px
            35px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 20px;

        font-size: 21px;

        line-height: 1.45;
    }


    .vf-vroom__copy p {
        margin-bottom: 16px;

        font-size: 14px;

        line-height: 1.75;

        text-align: left;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-vroom {
        grid-template-columns: 1fr;

        margin-top: -25px;

        margin-bottom: 60px;

        border-radius:
            25px
            25px
            0
            0;
    }


    .vf-vroom__art {
        width: 100%;

        min-height: 280px;

        border-radius:
            25px
            25px
            0
            0;
    }


    .vf-vroom__art::after {
        width: 95px;

        clip-path:
            polygon(
                100% 0,
                100% 100%,
                0 100%
            );
    }


    .vf-vroom__shape {
        display: none;
    }


    .vf-vroom__word {
        top: 5px;
        left: 50%;

        width: 340px;
        height: 280px;

        transform:
            translateX(-50%)
            rotate(-7deg);
    }


    .vf-vroom__word span {
        font-size: 90px;

        -webkit-text-stroke: 2px #111;

        text-shadow:
            2px 2px 0 #111,
            4px 4px 0 rgba(0, 0, 0, .22);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 8px;
        left: 50px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 98px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 4px;
        left: 150px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 8px;
        left: 202px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 20px;
        left: 254px;
    }


    .vf-vroom__car {
        left: 50%;

        bottom: -25px;

        width: 350px;

        transform:
            translateX(-50%);
    }


    .vf-vroom__copy {
        padding:
            45px
            25px
            40px;

        text-align: left;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 18px;

        font-size: 20px;

        line-height: 1.45;
    }


    .vf-vroom__copy p {
        margin-bottom: 15px;

        font-size: 13px;

        line-height: 1.75;

        text-align: left;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-vroom {
        margin-top: -20px;

        margin-bottom: 48px;

        border-radius:
            20px
            20px
            0
            0;
    }


    .vf-vroom__art {
        min-height: 235px;

        border-radius:
            20px
            20px
            0
            0;
    }


    .vf-vroom__art::after {
        width: 75px;
    }


    .vf-vroom__word {
        width: 285px;
        height: 230px;
    }


    .vf-vroom__word span {
        font-size: 75px;

        -webkit-text-stroke: 1.5px #111;

        text-shadow:
            2px 2px 0 #111,
            3px 3px 0 rgba(0, 0, 0, .2);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 7px;
        left: 38px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 80px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 3px;
        left: 123px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 7px;
        left: 166px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 18px;
        left: 209px;
    }


    .vf-vroom__car {
        bottom: -22px;

        width: 295px;
    }


    .vf-vroom__copy {
        padding:
            38px
            18px
            32px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 15px;

        font-size: 18px;
    }


    .vf-vroom__copy p {
        font-size: 12px;

        line-height: 1.7;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-vroom {
        margin-top: -18px;

        margin-bottom: 40px;

        border-radius:
            18px
            18px
            0
            0;
    }


    .vf-vroom__art {
        min-height: 205px;

        border-radius:
            18px
            18px
            0
            0;
    }


    .vf-vroom__art::after {
        width: 60px;
    }


    .vf-vroom__word {
        width: 250px;
        height: 200px;
    }


    .vf-vroom__word span {
        font-size: 65px;

        -webkit-text-stroke: 1px #111;

        text-shadow:
            1.5px 1.5px 0 #111,
            3px 3px 0 rgba(0, 0, 0, .18);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 5px;
        left: 32px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 68px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 3px;
        left: 105px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 6px;
        left: 142px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 16px;
        left: 179px;
    }


    .vf-vroom__car {
        bottom: -18px;

        width: 255px;
    }


    .vf-vroom__copy {
        padding:
            32px
            14px
            28px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 13px;

        font-size: 17px;
    }


    .vf-vroom__copy p {
        font-size: 11px;

        line-height: 1.7;
    }

}


/* =========================================================
   FLEET STRIP
========================================================= */

.vf-fleet {
    position: relative;

    z-index: 1;

    width: 100%;
    height: 430px;

    margin-top: -100px;

    background:
        url("../images/aboutvisimisi.png")
        center center / cover
        no-repeat;

    border-radius: 0;

    overflow: hidden;
}


/* =========================================================
   FLEET CONTENT
========================================================= */

.vf-fleet > * {
    position: relative;

    z-index: 2;
}


/* =========================================================
   VISI MISI
========================================================= */

.vf-vm {
    position: relative;

    z-index: 5;

    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 40px;

    padding:
        60px
        8vw
        70px;

    background: #fff;

    border-radius:
        0
        0
        32px
        32px;

    text-align: center;

    min-width: 0;
}


.vf-vm__col {
    min-width: 0;
}


.vf-vm__col h3 {
    margin:
        0
        0
        18px;

    color: var(--vf-navy);

    font-size: 1.6rem;

    font-weight: 700;

    line-height: 1.3;

    overflow-wrap: anywhere;
}


.vf-vm__col p {
    max-width: 420px;

    margin: 0 auto;

    color: var(--vf-muted);

    font-size: 1rem;

    font-weight: 400;

    line-height: 1.8;

    overflow-wrap: anywhere;
}


.vf-vm__divider {
    display: none;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.vf-why {
    width: 100%;

    padding:
        90px
        20px;

    background: #f5f7fb;
}


.vf-why__container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    min-width: 0;
}


/* =========================================================
   WHY HEADING
========================================================= */

.vf-why__heading {
    width: 100%;
    max-width: 760px;

    margin:
        0
        auto
        50px;

    text-align: center;
}


.vf-why__heading h2 {
    margin:
        0
        0
        15px;

    color: #102557;

    font-size: 42px;

    font-weight: 800;

    line-height: 1.2;

    overflow-wrap: anywhere;
}


.vf-why__heading p {
    margin: 0;

    color: #647089;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================================================
   WHY GRID
========================================================= */

.vf-why__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 28px;

    min-width: 0;
}


/* =========================================================
   WHY CARD
========================================================= */

.vf-why__card {
    min-width: 0;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 15px 40px rgba(16, 37, 87, .08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.vf-why__card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 50px rgba(16, 37, 87, .14);
}


/* =========================================================
   WHY IMAGE
========================================================= */

.vf-why__img {
    width: 100%;
    height: 260px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


/* =========================================================
   WHY IMAGE 1
========================================================= */

.vf-why__img--1 {
    background-image:
        url('/assets/images/why1.png');
}


/* =========================================================
   WHY IMAGE 2
========================================================= */

.vf-why__img--2 {
    background-image:
        url('/assets/images/why2.png');
}


/* =========================================================
   WHY IMAGE 3
========================================================= */

.vf-why__img--3 {
    background-image:
        url('/assets/images/why3.png');
}


/* =========================================================
   WHY CARD BODY
========================================================= */

.vf-why__body {
    padding:
        30px
        28px
        32px;

    min-width: 0;
}


.vf-why__body h4 {
    margin:
        0
        0
        14px;

    color: #102557;

    font-size: 22px;

    font-weight: 800;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.vf-why__body p {
    margin: 0;

    color: #647089;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;

    overflow-wrap: anywhere;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-fleet {
        height: 470px;

        margin-top: -110px;
    }


    .vf-vm {
        gap: 55px;

        padding:
            70px
            9vw
            80px;

        border-radius:
            0
            0
            38px
            38px;
    }


    .vf-vm__col h3 {
        font-size: 1.75rem;
    }


    .vf-vm__col p {
        font-size: 1.05rem;
    }


    .vf-why {
        padding:
            100px
            20px;
    }


    .vf-why__heading {
        margin-bottom: 55px;
    }


    .vf-why__heading h2 {
        font-size: 46px;
    }


    .vf-why__heading p {
        font-size: 19px;
    }


    .vf-why__grid {
        gap: 32px;
    }


    .vf-why__img {
        height: 280px;
    }


    .vf-why__body {
        padding:
            32px
            30px
            35px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-fleet {
        height: 360px;

        margin-top: -80px;
    }


    .vf-vm {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 28px;

        padding:
            50px
            6vw
            60px;

        border-radius:
            0
            0
            28px
            28px;
    }


    .vf-vm__col h3 {
        font-size: 1.4rem;

        margin-bottom: 14px;
    }


    .vf-vm__col p {
        font-size: .95rem;

        line-height: 1.75;
    }


    .vf-why {
        padding:
            70px
            20px;
    }


    .vf-why__heading {
        margin-bottom: 40px;
    }


    .vf-why__heading h2 {
        font-size: 38px;
    }


    .vf-why__heading p {
        font-size: 16px;
    }


    .vf-why__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 22px;
    }


    .vf-why__card {
        border-radius: 20px;
    }


    .vf-why__img {
        height: 220px;
    }


    .vf-why__body {
        padding:
            25px
            22px
            28px;
    }


    .vf-why__body h4 {
        font-size: 20px;
    }


    .vf-why__body p {
        font-size: 14px;

        line-height: 1.7;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-fleet {
        height: 300px;

        margin-top: -60px;

        background-position: center center;
    }


    .vf-vm {
        grid-template-columns: 1fr;

        gap: 28px;

        padding:
            45px
            25px
            50px;

        border-radius:
            0
            0
            24px
            24px;
    }


    .vf-vm__col h3 {
        font-size: 1.3rem;

        margin-bottom: 12px;
    }


    .vf-vm__col p {
        max-width: 520px;

        font-size: .9rem;

        line-height: 1.75;
    }


    .vf-why {
        padding:
            55px
            14px;
    }


    .vf-why__heading {
        margin-bottom: 32px;
    }


    .vf-why__heading h2 {
        font-size: 34px;
    }


    .vf-why__heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    .vf-why__grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .vf-why__card {
        border-radius: 18px;
    }


    .vf-why__img {
        height: 210px;
    }


    .vf-why__body {
        padding:
            23px
            20px
            26px;
    }


    .vf-why__body h4 {
        margin-bottom: 11px;

        font-size: 19px;
    }


    .vf-why__body p {
        font-size: 14px;

        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-fleet {
        height: 250px;

        margin-top: -45px;
    }


    .vf-vm {
        gap: 24px;

        padding:
            38px
            18px
            42px;

        border-radius:
            0
            0
            20px
            20px;
    }


    .vf-vm__col h3 {
        font-size: 1.2rem;

        margin-bottom: 10px;
    }


    .vf-vm__col p {
        font-size: .85rem;

        line-height: 1.7;
    }


    .vf-why {
        padding:
            45px
            10px;
    }


    .vf-why__heading {
        margin-bottom: 27px;
    }


    .vf-why__heading h2 {
        font-size: 29px;
    }


    .vf-why__heading p {
        font-size: 13px;
    }


    .vf-why__grid {
        gap: 17px;
    }


    .vf-why__card {
        border-radius: 16px;
    }


    .vf-why__img {
        height: 185px;
    }


    .vf-why__body {
        padding:
            20px
            17px
            23px;
    }


    .vf-why__body h4 {
        font-size: 17px;
    }


    .vf-why__body p {
        font-size: 12px;

        line-height: 1.7;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-fleet {
        height: 220px;

        margin-top: -38px;
    }


    .vf-vm {
        gap: 20px;

        padding:
            32px
            14px
            36px;

        border-radius:
            0
            0
            18px
            18px;
    }


    .vf-vm__col h3 {
        font-size: 1.1rem;
    }


    .vf-vm__col p {
        font-size: .78rem;

        line-height: 1.65;
    }


    .vf-why {
        padding:
            38px
            8px;
    }


    .vf-why__heading {
        margin-bottom: 23px;
    }


    .vf-why__heading h2 {
        font-size: 26px;
    }


    .vf-why__heading p {
        font-size: 12px;
    }


    .vf-why__grid {
        gap: 14px;
    }


    .vf-why__card {
        border-radius: 14px;
    }


    .vf-why__img {
        height: 165px;
    }


    .vf-why__body {
        padding:
            18px
            14px
            20px;
    }


    .vf-why__body h4 {
        margin-bottom: 9px;

        font-size: 16px;
    }


    .vf-why__body p {
        font-size: 11px;

        line-height: 1.65;
    }

}

/* =========================================================
   ABOUT - WHY CHOOSE US RESPONSIVE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-why {
        padding:
            70px
            20px;
    }


    .vf-why__heading h2 {
        font-size: 36px;
    }


    .vf-why__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /*
     * Card ketiga tetap full row
     * agar komposisi tablet lebih seimbang.
     */
    .vf-why__card:last-child {
        grid-column: 1 / -1;

        width: 100%;
        max-width: 500px;

        margin:
            0
            auto;
    }


    /* =====================================================
       VROOM
    ====================================================== */

    .vf-vroom {
        grid-template-columns: 1fr;

        margin-top: -30px;

        margin-bottom: 90px;

        border-radius:
            30px
            30px
            0
            0;
    }


    /* =====================================================
       VROOM ART
    ====================================================== */

    .vf-vroom__art {
        width: 100%;

        height: 380px;
        min-height: 380px;

        border-radius:
            30px
            30px
            0
            0;
    }


    /* =====================================================
       VROOM WORD
    ====================================================== */

    .vf-vroom__word {
        top: 5px;
        left: 50%;

        width: 480px;
        height: 480px;

        transform:
            translateX(-50%)
            rotate(-8deg)
            scale(.85);

        transform-origin:
            top
            center;
    }


    .vf-vroom__word span {
        font-size: 125px;

        -webkit-text-stroke: 2px #111;

        text-shadow:
            3px 3px 0 #111,
            6px 6px 0 rgba(0, 0, 0, .22);
    }


    .vf-vroom__word span:nth-child(1) {
        left: 80px;
        top: 8px;
    }


    .vf-vroom__word span:nth-child(2) {
        left: 145px;
        top: 0;
    }


    .vf-vroom__word span:nth-child(3) {
        left: 215px;
        top: 3px;
    }


    .vf-vroom__word span:nth-child(4) {
        left: 285px;
        top: 8px;
    }


    .vf-vroom__word span:nth-child(5) {
        left: 355px;
        top: 25px;
    }


    /* =====================================================
       VROOM CAR
    ====================================================== */

    .vf-vroom__car {
        width: 560px;
        max-width: none;

        left: 50%;
        bottom: -100px;

        transform:
            translateX(-50%);

        z-index: 100;
    }


    /* =====================================================
       VROOM COPY
    ====================================================== */

    .vf-vroom__copy {
        padding:
            55px
            45px
            65px;
    }


    .vf-vroom__copy h2 {
        font-size: 23px;

        line-height: 1.45;
    }


    .vf-vroom__copy p {
        font-size: 16px;

        line-height: 1.8;
    }


    /* =====================================================
       FLEET
    ====================================================== */

    .vf-fleet {
        height: 380px;

        margin-top: -90px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /* =====================================================
       WHY
    ====================================================== */

    .vf-why {
        padding:
            60px
            16px;
    }


    .vf-why__heading {
        margin-bottom: 35px;
    }


    .vf-why__heading h2 {
        font-size: 30px;
    }


    .vf-why__heading p {
        font-size: 16px;

        line-height: 1.6;
    }


    .vf-why__grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .vf-why__card:last-child {
        grid-column: auto;

        max-width: none;
    }


    .vf-why__img {
        height: 230px;
    }


    .vf-why__body {
        padding:
            25px
            22px
            28px;
    }


    .vf-why__body h4 {
        font-size: 20px;
    }


    .vf-why__body p {
        font-size: 15px;

        line-height: 1.7;
    }


    /* =====================================================
       VROOM
    ====================================================== */

    .vf-vroom {
        display: block;

        margin-top: -25px;

        margin-bottom: 75px;

        border-radius:
            24px
            24px
            0
            0;

        overflow: visible;
    }


    /* =====================================================
       VROOM ART
    ====================================================== */

    .vf-vroom__art {
        width: 100%;

        height: 300px;
        min-height: 300px;

        overflow: visible;

        border-radius:
            24px
            24px
            0
            0;
    }


    /* =====================================================
       DIAGONAL WHITE
    ====================================================== */

    .vf-vroom__art::after {
        width: 100px;

        height: 100%;
    }


    .vf-vroom__shape {
        right: -55px;

        width: 110px;
    }


    /* =====================================================
       VROOM WORD
    ====================================================== */

    .vf-vroom__word {
        top: 0;
        left: 50%;

        width: 330px;
        height: 330px;

        transform:
            translateX(-50%)
            rotate(-8deg)
            scale(.72);

        transform-origin:
            top
            center;
    }


    .vf-vroom__word span {
        font-size: 105px;

        -webkit-text-stroke: 2px #111;

        text-shadow:
            3px 3px 0 #111,
            6px 6px 0 rgba(0, 0, 0, .25);
    }


    .vf-vroom__word span:nth-child(1) {
        left: 55px;
        top: 5px;
    }


    .vf-vroom__word span:nth-child(2) {
        left: 120px;
        top: -2px;
    }


    .vf-vroom__word span:nth-child(3) {
        left: 185px;
        top: 0;
    }


    .vf-vroom__word span:nth-child(4) {
        left: 250px;
        top: 5px;
    }


    .vf-vroom__word span:nth-child(5) {
        left: 315px;
        top: 20px;
    }


    /* =====================================================
       VROOM CAR
    ====================================================== */

    .vf-vroom__car {
        width: 115vw;

        max-width: none;

        left: 50%;
        bottom: -65px;

        transform:
            translateX(-50%);

        z-index: 100;
    }


    /* =====================================================
       VROOM COPY
    ====================================================== */

    .vf-vroom__copy {
        padding:
            45px
            25px
            50px;

        text-align: left;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 18px;

        font-size: 21px;

        line-height: 1.45;
    }


    .vf-vroom__copy p {
        margin-bottom: 16px;

        font-size: 15px;

        line-height: 1.75;

        text-align: left;
    }


    /* =====================================================
       FLEET
    ====================================================== */

    .vf-fleet {
        width: 100%;

        height: 300px;

        margin-top: -75px;

        background-position:
            center center;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    /* =====================================================
       WHY
    ====================================================== */

    .vf-why {
        padding:
            50px
            12px;
    }


    .vf-why__heading {
        margin-bottom: 28px;
    }


    .vf-why__heading h2 {
        font-size: 28px;
    }


    .vf-why__heading p {
        font-size: 14px;

        line-height: 1.65;
    }


    .vf-why__grid {
        gap: 18px;
    }


    .vf-why__card {
        border-radius: 16px;
    }


    .vf-why__img {
        height: 190px;
    }


    .vf-why__body {
        padding:
            21px
            17px
            24px;
    }


    .vf-why__body h4 {
        font-size: 18px;
    }


    .vf-why__body p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* =====================================================
       VROOM
    ====================================================== */

    .vf-vroom {
        margin-top: -20px;

        margin-bottom: 65px;

        border-radius:
            20px
            20px
            0
            0;
    }


    .vf-vroom__art {
        height: 260px;
        min-height: 260px;

        border-radius:
            20px
            20px
            0
            0;
    }


    .vf-vroom__art::after {
        width: 75px;
    }


    .vf-vroom__shape {
        right: -40px;

        width: 80px;
    }


    /* =====================================================
       VROOM WORD
    ====================================================== */

    .vf-vroom__word {
        width: 285px;
        height: 230px;

        transform:
            translateX(-50%)
            rotate(-7deg);
    }


    .vf-vroom__word span {
        font-size: 75px;

        -webkit-text-stroke: 1.5px #111;

        text-shadow:
            2px 2px 0 #111,
            3px 3px 0 rgba(0, 0, 0, .2);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 7px;
        left: 38px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 80px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 3px;
        left: 123px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 7px;
        left: 166px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 18px;
        left: 209px;
    }


    /* =====================================================
       CAR
    ====================================================== */

    .vf-vroom__car {
        bottom: -55px;

        width: 100vw;
    }


    /* =====================================================
       COPY
    ====================================================== */

    .vf-vroom__copy {
        padding:
            38px
            18px
            32px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 15px;

        font-size: 18px;
    }


    .vf-vroom__copy p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* =====================================================
       FLEET
    ====================================================== */

    .vf-fleet {
        height: 250px;

        margin-top: -45px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    /* =====================================================
       WHY
    ====================================================== */

    .vf-why {
        padding:
            40px
            8px;
    }


    .vf-why__heading {
        margin-bottom: 24px;
    }


    .vf-why__heading h2 {
        font-size: 26px;
    }


    .vf-why__heading p {
        font-size: 12px;

        line-height: 1.65;
    }


    .vf-why__grid {
        gap: 15px;
    }


    .vf-why__card {
        border-radius: 14px;
    }


    .vf-why__img {
        height: 165px;
    }


    .vf-why__body {
        padding:
            18px
            14px
            20px;
    }


    .vf-why__body h4 {
        margin-bottom: 9px;

        font-size: 16px;
    }


    .vf-why__body p {
        font-size: 11px;

        line-height: 1.65;
    }


    /* =====================================================
       VROOM
    ====================================================== */

    .vf-vroom {
        margin-top: -18px;

        margin-bottom: 40px;

        border-radius:
            18px
            18px
            0
            0;
    }


    .vf-vroom__art {
        height: 205px;
        min-height: 205px;

        border-radius:
            18px
            18px
            0
            0;
    }


    .vf-vroom__art::after {
        width: 60px;
    }


    .vf-vroom__word {
        width: 250px;
        height: 200px;
    }


    .vf-vroom__word span {
        font-size: 65px;

        -webkit-text-stroke: 1px #111;

        text-shadow:
            1.5px 1.5px 0 #111,
            3px 3px 0 rgba(0, 0, 0, .18);
    }


    .vf-vroom__word span:nth-child(1) {
        top: 5px;
        left: 32px;
    }


    .vf-vroom__word span:nth-child(2) {
        top: 0;
        left: 68px;
    }


    .vf-vroom__word span:nth-child(3) {
        top: 3px;
        left: 105px;
    }


    .vf-vroom__word span:nth-child(4) {
        top: 6px;
        left: 142px;
    }


    .vf-vroom__word span:nth-child(5) {
        top: 16px;
        left: 179px;
    }


    .vf-vroom__car {
        bottom: -42px;

        width: 92vw;
    }


    /* =====================================================
       COPY
    ====================================================== */

    .vf-vroom__copy {
        padding:
            32px
            14px
            28px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 13px;

        font-size: 17px;
    }


    .vf-vroom__copy p {
        font-size: 11px;

        line-height: 1.7;
    }


    /* =====================================================
       FLEET
    ====================================================== */

    .vf-fleet {
        height: 220px;

        margin-top: -38px;
    }



/* =========================================================
   VERY SMALL MOBILE - VROOM FINAL
========================================================= */

@media (max-width: 375px) {

    /* =====================================================
       VROOM WORD
    ====================================================== */

    .vf-vroom__word {
        width: 250px;
        height: 200px;

        top: 0;
        left: 50%;

        transform:
            translateX(-50%)
            rotate(-7deg);

        transform-origin:
            top
            center;
    }


    .vf-vroom__word span {
        font-size: 65px;

        -webkit-text-stroke: 1px #111;

        text-shadow:
            1.5px 1.5px 0 #111,
            3px 3px 0 rgba(0, 0, 0, .18);
    }


    .vf-vroom__word span:nth-child(1) {
        left: 32px;
        top: 5px;
    }


    .vf-vroom__word span:nth-child(2) {
        left: 68px;
        top: 0;
    }


    .vf-vroom__word span:nth-child(3) {
        left: 105px;
        top: 3px;
    }


    .vf-vroom__word span:nth-child(4) {
        left: 142px;
        top: 6px;
    }


    .vf-vroom__word span:nth-child(5) {
        left: 179px;
        top: 16px;
    }


    /* =====================================================
       VROOM CAR
    ====================================================== */

    .vf-vroom__car {
        width: 92vw;
        max-width: none;

        left: 50%;
        bottom: -42px;

        transform:
            translateX(-50%);

        z-index: 100;
    }


    /* =====================================================
       VROOM COPY
    ====================================================== */

    .vf-vroom__copy {
        padding:
            32px
            14px
            28px;
    }


    .vf-vroom__copy h2 {
        margin-bottom: 13px;

        font-size: 17px;

        line-height: 1.45;
    }


    .vf-vroom__copy p {
        margin-bottom: 14px;

        font-size: 11px;

        line-height: 1.7;

        text-align: left;
    }


    /* =====================================================
       FLEET
    ====================================================== */

    .vf-fleet {
        width: 100%;

        height: 220px;

        margin-top: -38px;

        background-position:
            center center;
    }

    }
}


/* =========================================================
   VINFAST MODEL DETAIL
========================================================= */

.vf-model-hero {
    position: relative;

    width: 100%;
    min-height: 0;

    background-color: #f3f5f8;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;

    overflow: hidden;
}


.vf-model-hero-grid {
    position: relative;

    z-index: 2;
}


.vf-model-hero .container {
    position: relative;

    z-index: 3;
}


.vf-model-hero .row {
    min-height: 56vw;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.vf-model-hero-content {
    position: relative;

    z-index: 5;

    min-width: 0;
}


.vf-model-eyebrow,
.vf-section-heading span,
.vf-interior-content > span,
.vf-video-content > span,
.vf-cta-box > span {
    display: block;

    margin-bottom: 15px;

    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: 2.5px;
    text-transform: uppercase;

    color: #777;
}


/* =========================================================
   MODEL TITLE
========================================================= */

.vf-model-title {
    margin: 0;

    max-width: 100%;

    font-size: clamp(70px, 10vw, 140px);
    line-height: .82;

    letter-spacing: -7px;

    font-weight: 800;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   MODEL TAGLINE
========================================================= */

.vf-model-tagline {
    margin:
        30px
        0
        18px;

    max-width: 450px;

    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.05;

    font-weight: 700;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   MODEL DESCRIPTION
========================================================= */

.vf-model-description {
    max-width: 480px;

    margin-bottom: 30px;

    font-size: 16px;
    line-height: 1.8;

    color: #666;

    overflow-wrap: anywhere;
}


/* =========================================================
   MODEL ACTIONS
========================================================= */

.vf-model-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    min-width: 0;
}


/* =========================================================
   MODEL BUTTON
========================================================= */

.vf-model-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 46px;

    padding:
        14px
        24px;

    border:
        1px solid transparent;

    border-radius: 50px;

    text-decoration: none;

    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}


.vf-model-btn:hover {
    text-decoration: none;
}


/* =========================================================
   PRIMARY BUTTON
========================================================= */

.vf-model-btn-primary {
    color: #fff;

    background: #111;

    border-color: #111;
}


.vf-model-btn-primary:hover {
    color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-model-hero .row {
        min-height: 54vw;
    }


    .vf-model-eyebrow,
    .vf-section-heading span,
    .vf-interior-content > span,
    .vf-video-content > span,
    .vf-cta-box > span {
        margin-bottom: 17px;

        font-size: 13px;

        letter-spacing: 2.8px;
    }


    .vf-model-title {
        font-size: clamp(90px, 9vw, 150px);

        letter-spacing: -8px;
    }


    .vf-model-tagline {
        max-width: 520px;

        margin-top: 34px;

        font-size: clamp(30px, 3vw, 44px);
    }


    .vf-model-description {
        max-width: 520px;

        font-size: 17px;
    }


    .vf-model-btn {
        min-height: 48px;

        padding:
            15px
            27px;

        font-size: 14px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-model-hero {
        background-position: center top;
    }


    .vf-model-hero .row {
        min-height: 62vw;
    }


    .vf-model-eyebrow,
    .vf-section-heading span,
    .vf-interior-content > span,
    .vf-video-content > span,
    .vf-cta-box > span {
        margin-bottom: 13px;

        font-size: 11px;

        letter-spacing: 2.2px;
    }


    .vf-model-title {
        font-size: clamp(58px, 9vw, 100px);

        letter-spacing: -5px;
    }


    .vf-model-tagline {
        margin:
            24px
            0
            16px;

        max-width: 400px;

        font-size: clamp(24px, 3.5vw, 34px);
    }


    .vf-model-description {
        max-width: 430px;

        margin-bottom: 24px;

        font-size: 15px;

        line-height: 1.75;
    }


    .vf-model-actions {
        gap: 10px;
    }


    .vf-model-btn {
        min-height: 44px;

        padding:
            12px
            21px;

        font-size: 12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-model-hero {
        background-position: center top;

        background-size: auto 100%;
    }


    .vf-model-hero .row {
        min-height: 0;
    }


    .vf-model-hero-content {
        width: 100%;

        padding:
            45px
            20px
            50px;
    }


    .vf-model-eyebrow,
    .vf-section-heading span,
    .vf-interior-content > span,
    .vf-video-content > span,
    .vf-cta-box > span {
        margin-bottom: 11px;

        font-size: 10px;

        letter-spacing: 1.8px;
    }


    .vf-model-title {
        font-size: clamp(48px, 14vw, 78px);

        line-height: .86;

        letter-spacing: -4px;
    }


    .vf-model-tagline {
        margin:
            20px
            0
            14px;

        max-width: 100%;

        font-size: clamp(22px, 6vw, 30px);

        line-height: 1.1;
    }


    .vf-model-description {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.7;
    }


    .vf-model-actions {
        width: 100%;

        gap: 9px;
    }


    .vf-model-btn {
        min-height: 43px;

        padding:
            12px
            18px;

        font-size: 12px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-model-hero {
        background-size: auto 100%;
    }


    .vf-model-hero-content {
        padding:
            38px
            15px
            42px;
    }


    .vf-model-eyebrow,
    .vf-section-heading span,
    .vf-interior-content > span,
    .vf-video-content > span,
    .vf-cta-box > span {
        margin-bottom: 9px;

        font-size: 9px;

        letter-spacing: 1.5px;
    }


    .vf-model-title {
        font-size: clamp(40px, 15vw, 64px);

        letter-spacing: -3px;
    }


    .vf-model-tagline {
        margin:
            17px
            0
            13px;

        font-size: clamp(20px, 6.5vw, 27px);
    }


    .vf-model-description {
        margin-bottom: 19px;

        font-size: 13px;

        line-height: 1.7;
    }


    .vf-model-actions {
        width: 100%;

        flex-direction: column;

        align-items: stretch;

        gap: 8px;
    }


    .vf-model-btn {
        width: 100%;

        min-height: 42px;

        padding:
            11px
            16px;

        font-size: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-model-hero-content {
        padding:
            32px
            12px
            36px;
    }


    .vf-model-title {
        font-size: clamp(36px, 15vw, 56px);

        letter-spacing: -2.5px;
    }


    .vf-model-tagline {
        margin-top: 15px;

        font-size: clamp(18px, 6.5vw, 24px);
    }


    .vf-model-description {
        margin-bottom: 17px;

        font-size: 12px;

        line-height: 1.65;
    }


    .vf-model-btn {
        min-height: 40px;

        padding:
            10px
            14px;

        font-size: 11px;
    }

}

/* =========================================================
   VINFAST MODEL DETAIL
   BUTTON / HERO IMAGE / QUICK SPECS / INTRO / GALLERY
   / INTERIOR
========================================================= */


/* =========================================================
   MODEL BUTTON - OUTLINE
========================================================= */

.vf-model-btn-outline {
    color: #111;

    background: transparent;

    border: 1px solid #111;
}


.vf-model-btn-outline:hover {
    color: #fff;

    background: #111;

    border-color: #111;

    transform: translateY(-2px);
}


/* =========================================================
   MODEL BUTTON - LIGHT
========================================================= */

.vf-model-btn-light {
    color: #111;

    background: #fff;

    border: 1px solid #fff;
}


.vf-model-btn-light:hover {
    color: #111;

    background: #fff;

    border-color: #fff;

    transform: translateY(-2px);
}


/* =========================================================
   MODEL HERO IMAGE
========================================================= */

.vf-model-hero-image {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}


.vf-model-circle {
    position: absolute;

    width: 520px;
    height: 520px;

    max-width: 85%;
    max-height: 85%;

    border-radius: 50%;

    background: #e6e9ec;

    z-index: 1;
}


.vf-model-hero-image img {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    max-width: 720px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 25px 25px rgba(0, 0, 0, .12)
        );
}


/* =========================================================
   QUICK SPECS
========================================================= */

.vf-model-quick-specs {
    width: 100%;

    background: #111;
}

.vf-model-hero .row,
.vf-model-intro .row,
.vf-model-gallery .row,
.vf-model-interior .row,
.vf-model-technology .row,
.vf-model-video .row,
.vf-model-colors .row,
.vf-model-specifications .row,
.vf-model-quick-specs .row {
    margin-left: 0;
    margin-right: 0;
}


.vf-quick-spec {
    position: relative;

    min-width: 0;
    min-height: 130px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;
}


.vf-quick-spec::after {
    content: "";

    position: absolute;

    top: 25%;
    right: 0;

    width: 1px;
    height: 50%;

    background:
        rgba(255, 255, 255, .15);
}


.vf-quick-spec:last-child::after {
    display: none;
}


.vf-quick-spec strong {
    display: block;

    margin-bottom: 7px;

    font-size: 29px;
    line-height: 1;

    font-weight: 700;

    color: #fff;

    overflow-wrap: anywhere;
}


.vf-quick-spec span {
    display: block;

    font-size: 11px;
    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: 2px;

    color:
        rgba(255, 255, 255, .55);

    overflow-wrap: anywhere;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.vf-section-heading {
    width: 100%;
    max-width: 720px;

    margin-bottom: 50px;

    min-width: 0;
}


.vf-section-heading.text-center {
    margin-left: auto;
    margin-right: auto;
}


.vf-section-heading h2 {
    margin:
        0
        0
        18px;

    font-size: clamp(38px, 5vw, 65px);
    line-height: 1;

    letter-spacing: -2px;

    font-weight: 800;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-section-heading p {
    width: 100%;
    max-width: 650px;

    margin:
        0
        auto;

    font-size: 16px;
    line-height: 1.8;

    color: #707070;

    overflow-wrap: anywhere;
}


/* =========================================================
   INTRO
========================================================= */

.vf-model-intro {
    width: 100%;

    padding:
        120px
        0
        90px;

    background: #fff;
}


/* =========================================================
   GALLERY
========================================================= */

.vf-model-gallery {
    width: 100%;

    padding:
        90px
        0
        120px;

    background: #f5f6f7;
}


.vf-gallery-card {
    position: relative;

    width: 100%;
    min-width: 0;
    min-height: 430px;

    overflow: hidden;

    border-radius: 25px;

    background: #ddd;
}


.vf-gallery-card img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 430px;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.vf-gallery-card:hover img {
    transform: scale(1.04);
}


.vf-gallery-overlay {
    position: absolute;

    left: 25px;
    right: 25px;
    bottom: 25px;

    padding: 20px;

    border-radius: 18px;

    background:
        rgba(0, 0, 0, .55);

    backdrop-filter: blur(10px);

    color: #fff;
}


.vf-gallery-overlay span {
    display: block;

    font-size: 11px;
    line-height: 1.4;

    opacity: .6;
}


.vf-gallery-overlay h3 {
    margin:
        6px
        0
        0;

    font-size: 22px;
    line-height: 1.25;

    font-weight: 700;

    overflow-wrap: anywhere;
}


/* =========================================================
   INTERIOR
========================================================= */

.vf-model-interior {
    width: 100%;

    padding:
        120px
        0;

    background: #fff;
}


.vf-interior-image {
    width: 100%;

    overflow: hidden;

    border-radius: 30px;
}


.vf-interior-image img {
    display: block;

    width: 100%;
    height: auto;
}


.vf-interior-content {
    min-width: 0;

    padding-left: 20px;
}


.vf-interior-content h2 {
    margin:
        0
        0
        20px;

    font-size: clamp(40px, 5vw, 65px);
    line-height: 1;

    letter-spacing: -2px;

    font-weight: 800;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-interior-content p {
    margin:
        0
        0
        30px;

    font-size: 16px;
    line-height: 1.8;

    color: #666;

    overflow-wrap: anywhere;
}


.vf-interior-points {
    display: flex;

    flex-direction: column;

    gap: 15px;
}


.vf-interior-points div {
    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;
}


.vf-interior-points i {
    flex:
        0
        0
        28px;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #111;

    color: #fff;

    font-size: 12px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-model-hero-image {
        min-height: 600px;
    }


    .vf-model-circle {
        width: 560px;
        height: 560px;
    }


    .vf-model-hero-image img {
        max-width: 780px;
    }


    .vf-quick-spec {
        min-height: 140px;

        padding: 28px;
    }


    .vf-quick-spec strong {
        font-size: 31px;
    }


    .vf-quick-spec span {
        font-size: 12px;
    }


    .vf-section-heading {
        margin-bottom: 55px;
    }


    .vf-section-heading h2 {
        font-size: clamp(42px, 4.5vw, 68px);
    }


    .vf-section-heading p {
        font-size: 17px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-model-hero-image {
        min-height: 440px;
    }


    .vf-model-circle {
        width: 390px;
        height: 390px;

        max-width: 75%;
        max-height: 75%;
    }


    .vf-model-hero-image img {
        max-width: 560px;
    }


    /* QUICK SPECS */

    .vf-quick-spec {
        min-height: 110px;

        padding:
            20px
            15px;
    }


    .vf-quick-spec strong {
        font-size: 25px;
    }


    .vf-quick-spec span {
        font-size: 10px;

        letter-spacing: 1.6px;
    }


    /* SECTION HEADING */

    .vf-section-heading {
        max-width: 650px;

        margin-bottom: 40px;
    }


    .vf-section-heading h2 {
        font-size: clamp(34px, 5.5vw, 50px);

        letter-spacing: -1.5px;
    }


    .vf-section-heading p {
        font-size: 15px;

        line-height: 1.75;
    }


    /* INTRO */

    .vf-model-intro {
        padding:
            80px
            0
            65px;
    }


    /* GALLERY */

    .vf-model-gallery {
        padding:
            65px
            0
            80px;
    }


    .vf-gallery-card {
        min-height: 350px;

        border-radius: 20px;
    }


    .vf-gallery-card img {
        min-height: 350px;
    }


    .vf-gallery-overlay {
        left: 18px;
        right: 18px;
        bottom: 18px;

        padding: 16px;

        border-radius: 15px;
    }


    .vf-gallery-overlay h3 {
        font-size: 19px;
    }


    /* INTERIOR */

    .vf-model-interior {
        padding:
            80px
            0;
    }


    .vf-interior-content {
        padding-left: 10px;
    }


    .vf-interior-content h2 {
        font-size: clamp(34px, 5.5vw, 50px);

        letter-spacing: -1.5px;
    }


    .vf-interior-content p {
        font-size: 15px;

        line-height: 1.75;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /* HERO IMAGE */

    .vf-model-hero-image {
        min-height: 280px;
        padding: 0 15px;
    }


    .vf-model-circle {
        width: 270px;
        height: 270px;

        max-width: 78%;
        max-height: none;
    }


    .vf-model-hero-image img {
        width: 100%;
        max-width: 480px;
    }


    /* QUICK SPECS */

    .vf-model-quick-specs .row {
        margin-left: -1px;
        margin-right: -1px;
    }


    .vf-quick-spec {
        min-height: 100px;

        padding:
            18px
            10px;
    }


    .vf-quick-spec::after {
        top: 20%;

        height: 60%;
    }


    .vf-quick-spec strong {
        margin-bottom: 6px;

        font-size: 21px;
    }


    .vf-quick-spec span {
        font-size: 9px;

        letter-spacing: 1.2px;
    }


    /* SECTION HEADING */

    .vf-section-heading {
        margin-bottom: 30px;
    }


    .vf-section-heading h2 {
        margin-bottom: 14px;

        font-size: clamp(30px, 8vw, 40px);

        line-height: 1.05;

        letter-spacing: -1px;
    }


    .vf-section-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* INTRO */

    .vf-model-intro {
        padding:
            60px
            0
            50px;
    }


    /* GALLERY */

    .vf-model-gallery {
        padding:
            50px
            0
            60px;
    }


    .vf-gallery-card {
        min-height: 300px;

        border-radius: 18px;
    }


    .vf-gallery-card img {
        min-height: 300px;
    }


    .vf-gallery-overlay {
        left: 14px;
        right: 14px;
        bottom: 14px;

        padding: 14px;

        border-radius: 13px;
    }


    .vf-gallery-overlay span {
        font-size: 9px;
    }


    .vf-gallery-overlay h3 {
        margin-top: 5px;

        font-size: 17px;
    }


    /* INTERIOR */

    .vf-model-interior {
        padding:
            60px
            0;
    }


    .vf-interior-image {
        border-radius: 20px;
    }


    .vf-interior-content {
        padding:
            30px
            0
            0;
    }


    .vf-interior-content h2 {
        margin-bottom: 15px;

        font-size: clamp(30px, 8vw, 40px);

        line-height: 1.05;

        letter-spacing: -1px;
    }


    .vf-interior-content p {
        margin-bottom: 22px;

        font-size: 14px;

        line-height: 1.7;
    }


    .vf-interior-points {
        gap: 12px;
    }


    .vf-interior-points div {
        gap: 10px;

        font-size: 13px;
    }


    .vf-interior-points i {
        flex-basis: 26px;

        width: 26px;
        height: 26px;

        font-size: 11px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    /* HERO IMAGE */

    .vf-model-hero-image {
        min-height: 270px;

        padding:
            20px
            8px
            30px;
    }


    .vf-model-circle {
        width: 225px;
        height: 225px;
    }


    .vf-model-hero-image img {
        max-width: 320px;
    }


    /* QUICK SPECS */

    .vf-quick-spec {
        min-height: 90px;

        padding:
            15px
            7px;
    }


    .vf-quick-spec strong {
        font-size: 18px;
    }


    .vf-quick-spec span {
        font-size: 8px;

        letter-spacing: 1px;
    }


    /* SECTION HEADING */

    .vf-section-heading {
        margin-bottom: 25px;
    }


    .vf-section-heading h2 {
        font-size: clamp(27px, 8vw, 35px);

        letter-spacing: -.7px;
    }


    .vf-section-heading p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* INTRO */

    .vf-model-intro {
        padding:
            50px
            0
            42px;
    }


    /* GALLERY */

    .vf-model-gallery {
        padding:
            42px
            0
            50px;
    }


    .vf-gallery-card {
        min-height: 250px;

        border-radius: 16px;
    }


    .vf-gallery-card img {
        min-height: 250px;
    }


    .vf-gallery-overlay {
        left: 10px;
        right: 10px;
        bottom: 10px;

        padding: 11px;

        border-radius: 11px;
    }


    .vf-gallery-overlay h3 {
        font-size: 15px;
    }


    /* INTERIOR */

    .vf-model-interior {
        padding:
            50px
            0;
    }


    .vf-interior-image {
        border-radius: 17px;
    }


    .vf-interior-content {
        padding-top: 25px;
    }


    .vf-interior-content h2 {
        font-size: clamp(27px, 8vw, 35px);
    }


    .vf-interior-content p {
        margin-bottom: 18px;

        font-size: 13px;
    }


    .vf-interior-points {
        gap: 10px;
    }


    .vf-interior-points div {
        font-size: 12px;
    }


    .vf-interior-points i {
        flex-basis: 24px;

        width: 24px;
        height: 24px;

        font-size: 10px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    /* HERO IMAGE */

    .vf-model-hero-image {
        min-height: 235px;

        padding:
            18px
            6px
            25px;
    }


    .vf-model-circle {
        width: 195px;
        height: 195px;
    }


    .vf-model-hero-image img {
        max-width: 280px;
    }


    /* QUICK SPECS */

    .vf-quick-spec {
        min-height: 82px;

        padding:
            13px
            5px;
    }


    .vf-quick-spec strong {
        font-size: 16px;
    }


    .vf-quick-spec span {
        font-size: 7px;

        letter-spacing: .8px;
    }


    /* SECTION HEADING */

    .vf-section-heading {
        margin-bottom: 22px;
    }


    .vf-section-heading h2 {
        font-size: clamp(25px, 8vw, 31px);
    }


    .vf-section-heading p {
        font-size: 12px;
    }


    /* INTRO */

    .vf-model-intro {
        padding:
            42px
            0
            36px;
    }


    /* GALLERY */

    .vf-model-gallery {
        padding:
            36px
            0
            42px;
    }


    .vf-gallery-card {
        min-height: 220px;

        border-radius: 14px;
    }


    .vf-gallery-card img {
        min-height: 220px;
    }


    .vf-gallery-overlay {
        left: 8px;
        right: 8px;
        bottom: 8px;

        padding: 9px;

        border-radius: 9px;
    }


    .vf-gallery-overlay span {
        font-size: 8px;
    }


    .vf-gallery-overlay h3 {
        font-size: 14px;
    }


    /* INTERIOR */

    .vf-model-interior {
        padding:
            42px
            0;
    }


    .vf-interior-image {
        border-radius: 14px;
    }


    .vf-interior-content {
        padding-top: 22px;
    }


    .vf-interior-content h2 {
        font-size: clamp(25px, 8vw, 31px);
    }


    .vf-interior-content p {
        font-size: 12px;

        line-height: 1.65;
    }


    .vf-interior-points {
        gap: 9px;
    }


    .vf-interior-points div {
        gap: 8px;

        font-size: 11px;
    }


    .vf-interior-points i {
        flex-basis: 22px;

        width: 22px;
        height: 22px;

        font-size: 9px;
    }

}


/* =========================================================
   VINFAST MODEL DETAIL
   TECHNOLOGY / VIDEO / COLORS / SPECIFICATIONS / CTA
========================================================= */


/* =========================================================
   TECHNOLOGY
========================================================= */

.vf-model-technology {
    width: 100%;

    padding:
        120px
        0;

    background: #f5f6f7;
}


.vf-tech-card {
    width: 100%;
    height: 100%;

    min-width: 0;

    padding: 35px;

    border-radius: 25px;

    background: #fff;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.vf-tech-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);
}


.vf-tech-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 25px;

    border-radius: 16px;

    background: #111;

    color: #fff;

    font-size: 22px;
}


.vf-tech-card h3 {
    margin:
        0
        0
        12px;

    font-size: 20px;
    line-height: 1.3;

    font-weight: 700;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-tech-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.7;

    color: #707070;

    overflow-wrap: anywhere;
}


/* =========================================================
   VIDEO
========================================================= */

.vf-model-video {
    width: 100%;

    padding:
        120px
        0;

    background: #111;
}


.vf-video-wrapper {
    position: relative;

    width: 100%;
    max-width: 1100px;

    margin:
        0
        auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 25px;

    background: #000;
}


.vf-video-wrapper iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


.vf-video-content {
    width: 100%;
    max-width: 700px;

    margin:
        45px
        auto
        0;

    min-width: 0;
}


.vf-video-content span {
    color:
        rgba(255, 255, 255, .55);
}


.vf-video-content h2 {
    margin:
        0
        0
        15px;

    font-size: clamp(35px, 5vw, 58px);
    line-height: 1;

    letter-spacing: -2px;

    color: #fff;

    overflow-wrap: anywhere;
}


.vf-video-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .65);

    overflow-wrap: anywhere;
}


/* =========================================================
   COLORS
========================================================= */

.vf-model-colors {
    width: 100%;

    padding:
        120px
        0;

    background: #fff;
}


.vf-color-showcase {
    width: 100%;
    max-width: 1100px;

    margin:
        0
        auto
        40px;

    text-align: center;
}


.vf-color-main {
    position: relative;

    width: 100%;
    min-height: 480px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    border-radius: 30px;

    background: #f5f6f7;
}


.vf-color-main img {
    display: block;

    width: 100%;
    max-width: 1000px;
    height: auto;

    object-fit: contain;

    transition:
        opacity .18s ease;
}


.vf-color-name {
    margin-top: 20px;

    font-size: 18px;
    line-height: 1.3;

    font-weight: 700;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-color-list {
    display: flex;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    gap: 12px;
}


.vf-color-item {
    flex:
        0
        0
        65px;

    width: 65px;
    height: 65px;

    padding: 3px;

    overflow: hidden;

    border:
        2px
        solid
        transparent;

    border-radius: 50%;

    background: #f5f5f5;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.vf-color-item:hover {
    transform: translateY(-2px);
}


.vf-color-item.active {
    border-color: #111;

    transform: translateY(-3px);
}


.vf-color-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


/* =========================================================
   SPECIFICATIONS
========================================================= */

.vf-model-specifications {
    width: 100%;

    padding:
        120px
        0;

    background: #f5f6f7;
}


.vf-spec-list {
    width: 100%;
    max-width: 950px;

    margin:
        0
        auto;
}


.vf-spec-item {
    border-top:
        1px
        solid
        #d7d7d7;
}


.vf-spec-item:last-child {
    border-bottom:
        1px
        solid
        #d7d7d7;
}


.vf-spec-item summary {
    display: grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        30px;

    align-items: center;

    gap: 20px;

    padding:
        28px
        0;

    list-style: none;

    cursor: pointer;
}


.vf-spec-item summary::-webkit-details-marker {
    display: none;
}


.vf-spec-item summary > span {
    font-size: 12px;
    line-height: 1.4;

    letter-spacing: 2px;

    color: #999;
}


.vf-spec-item summary strong {
    min-width: 0;

    font-size: 22px;
    line-height: 1.3;

    font-weight: 700;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-spec-item summary i {
    font-size: 18px;

    line-height: 1;

    transition:
        transform .25s ease;
}


.vf-spec-item[open] summary i {
    transform:
        rotate(45deg);
}


.vf-spec-content {
    padding:
        0
        0
        30px
        70px;

    min-width: 0;
}


.vf-spec-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding:
        16px
        0;

    border-bottom:
        1px
        solid
        #e2e2e2;
}


.vf-spec-row span,
.vf-spec-row strong {
    min-width: 0;

    overflow-wrap: anywhere;
}


.vf-spec-row span {
    color: #777;
}


.vf-spec-row strong {
    color: #111;

    text-align: right;
}


.vf-spec-actions {
    margin-top: 50px;
}


/* =========================================================
   CTA
========================================================= */

.vf-model-cta {
    width: 100%;

    padding:
        100px
        0;

    background: #111;
}


.vf-cta-box {
    width: 100%;
    max-width: 850px;

    margin:
        0
        auto;

    text-align: center;

    min-width: 0;
}


.vf-cta-box span {
    color:
        rgba(255, 255, 255, .5);
}


.vf-cta-box h2 {
    margin:
        0
        0
        20px;

    font-size: clamp(40px, 6vw, 75px);
    line-height: .98;

    letter-spacing: -3px;

    color: #fff;

    overflow-wrap: anywhere;
}


.vf-cta-box p {
    max-width: 600px;

    margin:
        0
        auto
        30px;

    font-size: 16px;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .6);

    overflow-wrap: anywhere;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-model-technology,
    .vf-model-video,
    .vf-model-colors,
    .vf-model-specifications {
        padding:
            130px
            0;
    }


    .vf-tech-card {
        padding: 40px;
    }


    .vf-tech-icon {
        width: 58px;
        height: 58px;

        margin-bottom: 27px;

        font-size: 23px;
    }


    .vf-tech-card h3 {
        font-size: 21px;
    }


    .vf-tech-card p {
        font-size: 15px;
    }


    .vf-color-main {
        min-height: 520px;
    }


    .vf-spec-item summary {
        padding:
            30px
            0;
    }


    .vf-spec-item summary strong {
        font-size: 23px;
    }


    .vf-model-cta {
        padding:
            110px
            0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    /* TECHNOLOGY */

    .vf-model-technology {
        padding:
            80px
            0;
    }


    .vf-tech-card {
        padding: 28px;

        border-radius: 20px;
    }


    .vf-tech-icon {
        width: 50px;
        height: 50px;

        margin-bottom: 20px;

        border-radius: 14px;

        font-size: 20px;
    }


    .vf-tech-card h3 {
        font-size: 18px;
    }


    .vf-tech-card p {
        font-size: 13px;
    }


    /* VIDEO */

    .vf-model-video {
        padding:
            80px
            0;
    }


    .vf-video-wrapper {
        border-radius: 20px;
    }


    .vf-video-content {
        margin-top: 35px;
    }


    .vf-video-content h2 {
        font-size: clamp(32px, 5.5vw, 48px);

        letter-spacing: -1.5px;
    }


    .vf-video-content p {
        font-size: 15px;
    }


    /* COLORS */

    .vf-model-colors {
        padding:
            80px
            0;
    }


    .vf-color-main {
        min-height: 390px;

        border-radius: 24px;
    }


    .vf-color-item {
        flex-basis: 58px;

        width: 58px;
        height: 58px;
    }


    /* SPECIFICATIONS */

    .vf-model-specifications {
        padding:
            80px
            0;
    }


    .vf-spec-list {
        max-width: 850px;
    }


    .vf-spec-item summary {
        grid-template-columns:
            55px
            minmax(0, 1fr)
            25px;

        gap: 15px;

        padding:
            24px
            0;
    }


    .vf-spec-item summary strong {
        font-size: 19px;
    }


    .vf-spec-content {
        padding-left: 55px;
    }


    .vf-spec-row {
        gap: 20px;

        font-size: 14px;
    }


    /* CTA */

    .vf-model-cta {
        padding:
            80px
            0;
    }


    .vf-cta-box {
        max-width: 700px;
    }


    .vf-cta-box h2 {
        font-size: clamp(38px, 6vw, 60px);

        letter-spacing: -2px;
    }


    .vf-cta-box p {
        font-size: 15px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    /* TECHNOLOGY */

    .vf-model-technology {
        padding:
            60px
            0;
    }


    .vf-tech-card {
        padding: 22px;

        border-radius: 18px;
    }


    .vf-tech-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 17px;

        border-radius: 13px;

        font-size: 18px;
    }


    .vf-tech-card h3 {
        margin-bottom: 9px;

        font-size: 17px;
    }


    .vf-tech-card p {
        font-size: 13px;

        line-height: 1.7;
    }


    /* VIDEO */

    .vf-model-video {
        padding:
            60px
            0;
    }


    .vf-video-wrapper {
        border-radius: 16px;
    }


    .vf-video-content {
        margin-top: 28px;
    }


    .vf-video-content h2 {
        margin-bottom: 12px;

        font-size: clamp(28px, 8vw, 40px);

        line-height: 1.05;

        letter-spacing: -1px;
    }


    .vf-video-content p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* COLORS */

    .vf-model-colors {
        padding:
            60px
            0;
    }


    .vf-color-showcase {
        margin-bottom: 28px;
    }


    .vf-color-main {
        min-height: 310px;

        border-radius: 20px;
    }


    .vf-color-name {
        margin-top: 15px;

        font-size: 16px;
    }


    .vf-color-list {
        gap: 9px;
    }


    .vf-color-item {
        flex-basis: 52px;

        width: 52px;
        height: 52px;

        padding: 2px;
    }


    /* SPECIFICATIONS */

    .vf-model-specifications {
        padding:
            60px
            0;
    }


    .vf-spec-item summary {
        grid-template-columns:
            40px
            minmax(0, 1fr)
            20px;

        gap: 10px;

        padding:
            21px
            0;
    }


    .vf-spec-item summary > span {
        font-size: 9px;

        letter-spacing: 1.4px;
    }


    .vf-spec-item summary strong {
        font-size: 17px;

        line-height: 1.35;
    }


    .vf-spec-item summary i {
        font-size: 16px;
    }


    .vf-spec-content {
        padding:
            0
            0
            22px;
    }


    .vf-spec-row {
        flex-direction: column;

        gap: 5px;

        padding:
            13px
            0;

        font-size: 13px;
    }


    .vf-spec-row strong {
        text-align: left;
    }


    .vf-spec-actions {
        margin-top: 35px;
    }


    /* CTA */

    .vf-model-cta {
        padding:
            65px
            0;
    }


    .vf-cta-box h2 {
        margin-bottom: 15px;

        font-size: clamp(32px, 9vw, 46px);

        line-height: 1;

        letter-spacing: -1.5px;
    }


    .vf-cta-box p {
        margin-bottom: 24px;

        font-size: 14px;

        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    /* TECHNOLOGY */

    .vf-model-technology {
        padding:
            50px
            0;
    }


    .vf-tech-card {
        padding: 20px;

        border-radius: 16px;
    }


    .vf-tech-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 15px;

        border-radius: 11px;

        font-size: 17px;
    }


    .vf-tech-card h3 {
        font-size: 16px;
    }


    .vf-tech-card p {
        font-size: 12px;
    }


    /* VIDEO */

    .vf-model-video {
        padding:
            50px
            0;
    }


    .vf-video-wrapper {
        border-radius: 14px;
    }


    .vf-video-content {
        margin-top: 24px;
    }


    .vf-video-content h2 {
        font-size: clamp(26px, 8vw, 35px);
    }


    .vf-video-content p {
        font-size: 13px;
    }


    /* COLORS */

    .vf-model-colors {
        padding:
            50px
            0;
    }


    .vf-color-main {
        min-height: 250px;

        border-radius: 17px;
    }


    .vf-color-name {
        margin-top: 13px;

        font-size: 15px;
    }


    .vf-color-list {
        gap: 8px;
    }


    .vf-color-item {
        flex-basis: 48px;

        width: 48px;
        height: 48px;
    }


    /* SPECIFICATIONS */

    .vf-model-specifications {
        padding:
            50px
            0;
    }


    .vf-spec-item summary {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            18px;

        gap: 8px;

        padding:
            18px
            0;
    }


    .vf-spec-item summary > span {
        font-size: 8px;

        letter-spacing: 1.1px;
    }


    .vf-spec-item summary strong {
        font-size: 15px;
    }


    .vf-spec-item summary i {
        font-size: 14px;
    }


    .vf-spec-content {
        padding-bottom: 18px;
    }


    .vf-spec-row {
        padding:
            11px
            0;

        font-size: 12px;
    }


    /* CTA */

    .vf-model-cta {
        padding:
            55px
            0;
    }


    .vf-cta-box h2 {
        font-size: clamp(28px, 9vw, 40px);

        letter-spacing: -1px;
    }


    .vf-cta-box p {
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    /* TECHNOLOGY */

    .vf-model-technology {
        padding:
            42px
            0;
    }


    .vf-tech-card {
        padding: 17px;

        border-radius: 14px;
    }


    .vf-tech-icon {
        width: 38px;
        height: 38px;

        margin-bottom: 13px;

        border-radius: 10px;

        font-size: 15px;
    }


    .vf-tech-card h3 {
        font-size: 15px;
    }


    .vf-tech-card p {
        font-size: 11px;

        line-height: 1.65;
    }


    /* VIDEO */

    .vf-model-video {
        padding:
            42px
            0;
    }


    .vf-video-wrapper {
        border-radius: 12px;
    }


    .vf-video-content {
        margin-top: 20px;
    }


    .vf-video-content h2 {
        font-size: clamp(24px, 8vw, 31px);
    }


    .vf-video-content p {
        font-size: 12px;

        line-height: 1.65;
    }


    /* COLORS */

    .vf-model-colors {
        padding:
            42px
            0;
    }


    .vf-color-main {
        min-height: 215px;

        border-radius: 14px;
    }


    .vf-color-name {
        margin-top: 11px;

        font-size: 14px;
    }


    .vf-color-list {
        gap: 7px;
    }


    .vf-color-item {
        flex-basis: 44px;

        width: 44px;
        height: 44px;
    }


    /* SPECIFICATIONS */

    .vf-model-specifications {
        padding:
            42px
            0;
    }


    .vf-spec-item summary {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            16px;

        gap: 7px;

        padding:
            16px
            0;
    }


    .vf-spec-item summary > span {
        font-size: 7px;

        letter-spacing: .8px;
    }


    .vf-spec-item summary strong {
        font-size: 14px;
    }


    .vf-spec-item summary i {
        font-size: 13px;
    }


    .vf-spec-content {
        padding-bottom: 15px;
    }


    .vf-spec-row {
        padding:
            10px
            0;

        font-size: 11px;
    }


    .vf-spec-actions {
        margin-top: 28px;
    }


    /* CTA */

    .vf-model-cta {
        padding:
            45px
            0;
    }


    .vf-cta-box h2 {
        font-size: clamp(25px, 9vw, 34px);

        letter-spacing: -.7px;
    }


    .vf-cta-box p {
        font-size: 12px;

        line-height: 1.65;
    }

}



/* =========================================================
   VINFAST PRICE PAGE
========================================================= */


/* =========================================================
   PRICE HERO
========================================================= */

.vf-price-hero {
    width: 100%;

    padding:
        120px
        0
        90px;

    background: #f4f6f8;
}


.vf-price-hero-inner {
    width: 100%;
    max-width: 850px;

    margin:
        0
        auto;

    text-align: center;

    min-width: 0;
}


.vf-price-eyebrow,
.vf-price-heading > span,
.vf-price-cta-inner > span {
    display: block;

    margin-bottom: 16px;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #777;
}


.vf-price-hero h1 {
    margin: 0;

    font-size: clamp(48px, 7vw, 88px);

    line-height: .95;

    letter-spacing: -4px;

    font-weight: 800;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-price-hero h1 span {
    display: block;
}


.vf-price-hero p {
    max-width: 650px;

    margin:
        25px
        auto
        0;

    font-size: 16px;
    line-height: 1.8;

    color: #707070;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE FILTER
========================================================= */

.vf-price-filter {
    width: 100%;

    padding:
        20px
        0;

    background: #fff;

    border-bottom:
        1px
        solid
        #eee;
}


.vf-price-filter-inner {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    min-width: 0;
}


.vf-filter-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex:
        0
        0
        auto;

    min-height: 40px;

    padding:
        10px
        20px;

    border:
        1px
        solid
        #ddd;

    border-radius: 50px;

    background: #fff;

    color: #666;

    font-size: 13px;
    line-height: 1.2;

    font-weight: 600;

    cursor: pointer;

    white-space: nowrap;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.vf-filter-btn:hover,
.vf-filter-btn.active {
    background: #111;

    color: #fff;

    border-color: #111;
}


/* =========================================================
   PRICE LIST
========================================================= */

.vf-price-list {
    width: 100%;

    padding:
        110px
        0;

    background: #fff;
}


/* =========================================================
   PRICE HEADING
========================================================= */

.vf-price-heading {
    width: 100%;
    max-width: 700px;

    margin:
        0
        auto
        55px;

    text-align: center;

    min-width: 0;
}


.vf-price-heading h2 {
    margin:
        0
        0
        15px;

    font-size: clamp(42px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -2px;

    font-weight: 800;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-price-heading p {
    margin: 0;

    font-size: 16px;
    line-height: 1.7;

    color: #777;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE CARD
========================================================= */

.vf-price-card {
    width: 100%;
    height: 100%;

    min-width: 0;

    overflow: hidden;

    border:
        1px
        solid
        #e8e8e8;

    border-radius: 28px;

    background: #fff;

    box-shadow:
        0
        15px
        50px
        rgba(0, 0, 0, .05);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.vf-price-card:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0
        25px
        60px
        rgba(0, 0, 0, .08);
}


/* =========================================================
   PRICE IMAGE
========================================================= */

.vf-price-image {
    position: relative;

    width: 100%;

    min-height: 310px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #f3f4f5;
}


.vf-price-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 310px;

    object-fit: cover;

    transition:
        transform .5s ease;
}


.vf-price-card:hover .vf-price-image img {
    transform:
        scale(1.03);
}


.vf-price-category {
    position: absolute;

    top: 18px;
    left: 18px;

    max-width: calc(100% - 36px);

    padding:
        8px
        13px;

    border-radius: 50px;

    background:
        rgba(255, 255, 255, .9);

    backdrop-filter:
        blur(8px);

    font-size: 10px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE CONTENT
========================================================= */

.vf-price-content {
    width: 100%;

    padding: 30px;

    min-width: 0;
}


.vf-price-title-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    min-width: 0;
}


.vf-price-number {
    display: block;

    margin-bottom: 4px;

    font-size: 10px;
    line-height: 1.3;

    color: #999;

    letter-spacing: 2px;
}


.vf-price-title-row h3 {
    min-width: 0;

    margin: 0;

    font-size: 34px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -1px;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-variant-select {
    flex:
        0
        0
        auto;

    min-width: 105px;

    min-height: 36px;

    padding:
        8px
        12px;

    border:
        1px
        solid
        #ddd;

    border-radius: 8px;

    background: #fff;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 600;
}


.vf-variant-badge {
    flex:
        0
        0
        auto;

    padding:
        8px
        13px;

    border-radius: 50px;

    background: #f3f4f5;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 600;

    white-space: nowrap;
}


.vf-price-description {
    min-height: 50px;

    margin:
        15px
        0
        25px;

    font-size: 14px;
    line-height: 1.7;

    color: #707070;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE MODE
========================================================= */

.vf-price-mode {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 5px;

    padding: 4px;

    margin-bottom: 25px;

    border-radius: 10px;

    background: #f1f2f3;
}


.vf-mode-btn {
    min-width: 0;

    padding:
        10px
        8px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    font-size: 11px;
    line-height: 1.2;

    font-weight: 700;

    color: #777;

    cursor: pointer;
}


.vf-mode-btn.active {
    background: #fff;

    color: #111;

    box-shadow:
        0
        2px
        8px
        rgba(0, 0, 0, .06);
}


/* =========================================================
   MAIN PRICE
========================================================= */

.vf-main-price {
    margin-bottom: 15px;
}


.vf-main-price small {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;
    line-height: 1.3;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #999;
}


.vf-main-price strong {
    display: block;

    font-size: 32px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   SUBSCRIPTION INFO
========================================================= */

.vf-subscription-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding:
        13px
        0;

    margin-bottom: 20px;

    border-top:
        1px
        solid
        #eee;

    border-bottom:
        1px
        solid
        #eee;
}


.vf-subscription-info span {
    min-width: 0;

    font-size: 11px;
    line-height: 1.4;

    color: #888;

    overflow-wrap: anywhere;
}


.vf-subscription-info strong {
    flex:
        0
        0
        auto;

    font-size: 12px;
    line-height: 1.3;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE SPECS
========================================================= */

.vf-price-specs {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 0;

    margin-bottom: 25px;
}


.vf-price-specs > div {
    min-width: 0;

    padding:
        5px
        10px;

    border-right:
        1px
        solid
        #eee;
}


.vf-price-specs > div:first-child {
    padding-left: 0;
}


.vf-price-specs > div:last-child {
    padding-right: 0;

    border-right: 0;
}


.vf-price-specs strong {
    display: block;

    margin-bottom: 5px;

    font-size: 15px;
    line-height: 1.25;

    color: #111;

    overflow-wrap: anywhere;
}


.vf-price-specs span {
    display: block;

    font-size: 9px;
    line-height: 1.4;

    text-transform: uppercase;

    letter-spacing: .8px;

    color: #999;

    overflow-wrap: anywhere;
}


/* =========================================================
   WARRANTY
========================================================= */

.vf-price-warranty {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 10px;

    margin-bottom: 25px;
}


.vf-price-warranty > div {
    min-width: 0;

    display: grid;

    grid-template-columns:
        25px
        minmax(0, 1fr);

    align-items: center;

    padding: 13px;

    border-radius: 12px;

    background: #f6f7f8;
}


.vf-price-warranty i {
    grid-row:
        span 2;

    font-size: 17px;

    color: #111;
}


.vf-price-warranty span {
    font-size: 9px;
    line-height: 1.3;

    color: #888;
}


.vf-price-warranty strong {
    font-size: 12px;
    line-height: 1.3;

    color: #111;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE BUTTONS
========================================================= */

.vf-price-actions {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 10px;
}


.vf-price-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    min-width: 0;
    min-height: 46px;

    padding:
        12px
        16px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform .2s ease,
        background-color .2s ease,
        color .2s ease;
}


.vf-price-btn.primary {
    background: #111;

    color: #fff;
}


.vf-price-btn.secondary {
    border:
        1px
        solid
        #ddd;

    background: #fff;

    color: #111;
}


.vf-price-btn:hover {
    transform:
        translateY(-2px);

    text-decoration: none;
}


/* =========================================================
   PRICE NOTE
========================================================= */

.vf-price-note {
    width: 100%;

    padding:
        0
        0
        100px;

    background: #fff;
}


.vf-price-note-box {
    width: 100%;
    max-width: 950px;

    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin:
        0
        auto;

    padding: 22px;

    border-radius: 18px;

    background: #f5f6f7;

    min-width: 0;
}


.vf-price-note-box > i {
    flex:
        0
        0
        auto;

    font-size: 22px;
}


.vf-price-note-box strong {
    display: block;

    margin-bottom: 5px;
}


.vf-price-note-box p {
    margin: 0;

    font-size: 12px;
    line-height: 1.7;

    color: #777;

    overflow-wrap: anywhere;
}


/* =========================================================
   PRICE CTA
========================================================= */

.vf-price-cta {
    width: 100%;

    padding:
        110px
        0;

    background: #111;
}


.vf-price-cta-inner {
    width: 100%;
    max-width: 800px;

    margin:
        0
        auto;

    text-align: center;

    min-width: 0;
}


.vf-price-cta-inner > span {
    color:
        rgba(255, 255, 255, .5);
}


.vf-price-cta-inner h2 {
    margin:
        0
        0
        18px;

    font-size: clamp(42px, 6vw, 72px);

    line-height: 1;

    letter-spacing: -3px;

    color: #fff;

    overflow-wrap: anywhere;
}


.vf-price-cta-inner p {
    margin:
        0
        0
        30px;

    font-size: 16px;
    line-height: 1.8;

    color:
        rgba(255, 255, 255, .6);

    overflow-wrap: anywhere;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-price-hero {
        padding:
            130px
            0
            100px;
    }


    .vf-price-list {
        padding:
            125px
            0;
    }


    .vf-price-content {
        padding: 34px;
    }


    .vf-price-image {
        min-height: 330px;
    }


    .vf-price-image img {
        min-height: 330px;
    }


    .vf-price-heading {
        margin-bottom: 60px;
    }


    .vf-price-note {
        padding-bottom: 110px;
    }


    .vf-price-cta {
        padding:
            125px
            0;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-price-hero {
        padding:
            85px
            0
            65px;
    }


    .vf-price-hero h1 {
        font-size: clamp(44px, 7vw, 68px);

        letter-spacing: -3px;
    }


    .vf-price-hero p {
        max-width: 600px;

        font-size: 15px;
    }


    /* FILTER */

    .vf-price-filter {
        padding:
            16px
            0;
    }


    .vf-price-filter-inner {
        justify-content: flex-start;

        flex-wrap: nowrap;

        overflow-x: auto;

        overflow-y: hidden;

        padding:
            0
            20px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .vf-price-filter-inner::-webkit-scrollbar {
        display: none;
    }


    .vf-filter-btn {
        flex-shrink: 0;

        padding:
            9px
            17px;

        font-size: 12px;
    }


    /* PRICE LIST */

    .vf-price-list {
        padding:
            80px
            0;
    }


    .vf-price-heading {
        margin-bottom: 40px;
    }


    .vf-price-heading h2 {
        font-size: clamp(36px, 5.5vw, 50px);

        letter-spacing: -1.5px;
    }


    .vf-price-heading p {
        font-size: 15px;
    }


    /* CARD */

    .vf-price-card {
        border-radius: 22px;
    }


    .vf-price-image {
        min-height: 270px;
    }


    .vf-price-image img {
        min-height: 270px;
    }


    .vf-price-content {
        padding: 25px;
    }


    .vf-price-title-row {
        gap: 15px;
    }


    .vf-price-title-row h3 {
        font-size: 29px;
    }


    .vf-price-description {
        margin-bottom: 22px;

        font-size: 13px;
    }


    .vf-main-price strong {
        font-size: 29px;
    }


    .vf-price-specs strong {
        font-size: 14px;
    }


    .vf-price-warranty > div {
        padding: 11px;
    }


    .vf-price-actions {
        gap: 8px;
    }


    .vf-price-btn {
        min-height: 44px;

        padding:
            11px
            14px;

        font-size: 11px;
    }


    /* NOTE */

    .vf-price-note {
        padding-bottom: 80px;
    }


    .vf-price-note-box {
        padding: 18px;

        border-radius: 15px;
    }


    /* CTA */

    .vf-price-cta {
        padding:
            80px
            0;
    }


    .vf-price-cta-inner h2 {
        font-size: clamp(38px, 6vw, 58px);

        letter-spacing: -2px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-price-hero {
        padding:
            65px
            0
            50px;
    }


    .vf-price-hero h1 {
        font-size: clamp(38px, 12vw, 54px);

        letter-spacing: -2px;
    }


    .vf-price-hero p {
        margin-top: 18px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* PRICE LIST */

    .vf-price-list {
        padding:
            60px
            0;
    }


    .vf-price-heading {
        margin-bottom: 30px;
    }


    .vf-price-heading h2 {
        font-size: clamp(30px, 8vw, 42px);

        letter-spacing: -1px;
    }


    .vf-price-heading p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* CARD */

    .vf-price-card {
        border-radius: 20px;
    }


    .vf-price-image {
        min-height: 230px;
    }


    .vf-price-image img {
        min-height: 230px;
    }


    .vf-price-category {
        top: 14px;
        left: 14px;

        max-width: calc(100% - 28px);

        padding:
            7px
            11px;

        font-size: 9px;
    }


    .vf-price-content {
        padding: 22px;
    }


    .vf-price-title-row {
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .vf-price-title-row h3 {
        font-size: 26px;
    }


    .vf-variant-select {
        width: 100%;
    }


    .vf-variant-badge {
        align-self: flex-start;
    }


    .vf-price-description {
        min-height: 0;

        margin:
            14px
            0
            20px;

        font-size: 13px;
    }


    .vf-price-mode {
        margin-bottom: 20px;
    }


    .vf-main-price {
        margin-bottom: 13px;
    }


    .vf-main-price strong {
        font-size: 27px;
    }


    .vf-subscription-info {
        align-items: flex-start;

        gap: 10px;
    }


    /* SPECS */

    .vf-price-specs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        row-gap: 15px;
    }


    .vf-price-specs > div {
        padding:
            5px
            10px;

        border-right: 0;
    }


    .vf-price-specs > div:nth-child(odd) {
        padding-left: 0;
    }


    .vf-price-specs > div:nth-child(even) {
        padding-right: 0;
    }


    .vf-price-specs strong {
        font-size: 13px;
    }


    .vf-price-specs span {
        font-size: 8px;
    }


    /* WARRANTY */

    .vf-price-warranty {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .vf-price-warranty > div {
        padding: 11px;
    }


    /* BUTTONS */

    .vf-price-actions {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .vf-price-btn {
        width: 100%;

        min-height: 43px;

        font-size: 12px;
    }


    /* NOTE */

    .vf-price-note {
        padding-bottom: 60px;
    }


    .vf-price-note-box {
        flex-direction: column;

        gap: 10px;

        padding: 16px;
    }


    .vf-price-note-box > i {
        font-size: 20px;
    }


    .vf-price-note-box p {
        font-size: 11px;
    }


    /* CTA */

    .vf-price-cta {
        padding:
            60px
            0;
    }


    .vf-price-cta-inner h2 {
        font-size: clamp(30px, 9vw, 45px);

        letter-spacing: -1.5px;
    }


    .vf-price-cta-inner p {
        font-size: 14px;

        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-price-hero {
        padding:
            52px
            0
            42px;
    }


    .vf-price-eyebrow,
    .vf-price-heading > span,
    .vf-price-cta-inner > span {
        margin-bottom: 11px;

        font-size: 9px;

        letter-spacing: 2px;
    }


    .vf-price-hero h1 {
        font-size: clamp(34px, 12vw, 48px);

        letter-spacing: -1.5px;
    }


    .vf-price-hero p {
        font-size: 13px;
    }


    .vf-price-filter {
        padding:
            12px
            0;
    }


    .vf-price-filter-inner {
        padding:
            0
            12px;

        gap: 7px;
    }


    .vf-filter-btn {
        min-height: 36px;

        padding:
            8px
            14px;

        font-size: 11px;
    }


    .vf-price-list {
        padding:
            50px
            0;
    }


    .vf-price-heading {
        margin-bottom: 25px;
    }


    .vf-price-heading h2 {
        font-size: clamp(27px, 8vw, 35px);
    }


    .vf-price-heading p {
        font-size: 13px;
    }


    .vf-price-image {
        min-height: 200px;
    }


    .vf-price-image img {
        min-height: 200px;
    }


    .vf-price-content {
        padding: 18px;
    }


    .vf-price-title-row h3 {
        font-size: 22px;
    }


    .vf-price-description {
        font-size: 12px;
    }


    .vf-main-price strong {
        font-size: 23px;
    }


    .vf-price-specs {
        row-gap: 12px;
    }


    .vf-price-specs strong {
        font-size: 12px;
    }


    .vf-price-specs span {
        font-size: 7px;
    }


    .vf-price-warranty span {
        font-size: 8px;
    }


    .vf-price-warranty strong {
        font-size: 11px;
    }


    .vf-price-note {
        padding-bottom: 45px;
    }


    .vf-price-cta {
        padding:
            50px
            0;
    }


    .vf-price-cta-inner h2 {
        font-size: clamp(27px, 9vw, 40px);

        letter-spacing: -1px;
    }


    .vf-price-cta-inner p {
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-price-hero {
        padding:
            42px
            0
            35px;
    }


    .vf-price-hero h1 {
        font-size: clamp(31px, 12vw, 43px);

        letter-spacing: -1px;
    }


    .vf-price-hero p {
        font-size: 12px;
    }


    .vf-price-list {
        padding:
            42px
            0;
    }


    .vf-price-heading h2 {
        font-size: clamp(25px, 8vw, 31px);
    }


    .vf-price-heading p {
        font-size: 12px;
    }


    .vf-price-image {
        min-height: 185px;
    }


    .vf-price-image img {
        min-height: 185px;
    }


    .vf-price-content {
        padding: 15px;
    }


    .vf-price-title-row h3 {
        font-size: 20px;
    }


    .vf-price-description {
        font-size: 11px;

        line-height: 1.65;
    }


    .vf-main-price strong {
        font-size: 21px;
    }


    .vf-price-specs strong {
        font-size: 11px;
    }


    .vf-price-specs span {
        font-size: 6.5px;
    }


    .vf-price-btn {
        min-height: 40px;

        font-size: 11px;
    }


    .vf-price-note-box {
        padding: 13px;
    }


    .vf-price-note-box p {
        font-size: 10px;
    }


    .vf-price-cta {
        padding:
            42px
            0;
    }


    .vf-price-cta-inner h2 {
        font-size: clamp(25px, 9vw, 34px);
    }


    .vf-price-cta-inner p {
        font-size: 12px;
    }



/* =========================================================
   VINFAST PARUNG - EVENTS PAGE
========================================================= */


/* =========================================================
   EVENT EYEBROW
========================================================= */

.vf-event-eyebrow {
    display: block;

    margin-bottom: 25px;

    color:
        rgba(255, 255, 255, .48);

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


/* =========================================================
   EVENT HERO TITLE
========================================================= */

.vf-event-hero h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(58px, 7vw, 100px);

    font-weight: 800;

    line-height: .88;

    letter-spacing: -5px;

    text-wrap: balance;

    overflow-wrap: anywhere;
}


.vf-event-hero h1 span {
    display: block;

    color: #fff;
}


/* =========================================================
   EVENT HERO DESCRIPTION
========================================================= */

.vf-event-hero p {
    max-width: 600px;

    margin:
        35px
        0
        0;

    color:
        rgba(255, 255, 255, .62);

    font-size: 17px;

    font-weight: 400;

    line-height: 1.8;

    overflow-wrap: anywhere;
}


/* =========================================================
   EVENT LIST
========================================================= */

.vf-event-list {
    position: relative;

    width: 100%;

    padding:
        100px
        0;

    background: #f5f6f7;
}


/* =========================================================
   EVENT CARD
========================================================= */

.vf-event-card {
    position: relative;

    width: 100%;
    height: 100%;

    min-width: 0;

    overflow: hidden;

    border:
        1px
        solid
        rgba(0, 0, 0, .05);

    border-radius: 22px;

    background: #fff;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.vf-event-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0
        25px
        60px
        rgba(0, 0, 0, .09);
}


/* =========================================================
   EVENT IMAGE
========================================================= */

.vf-event-image {
    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #111;
}


.vf-event-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s
        cubic-bezier(.2, .6, .2, 1);
}


.vf-event-card:hover
.vf-event-image img {
    transform:
        scale(1.05);
}


/* =========================================================
   EVENT IMAGE OVERLAY
========================================================= */

.vf-event-image::after {
    content: '';

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent 60%,
            rgba(0, 0, 0, .12)
        );
}


/* =========================================================
   EVENT PLACEHOLDER
========================================================= */

.vf-event-placeholder {
    width: 100%;
    height: 100%;

    min-height: 220px;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(255, 255, 255, .08),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #101010,
            #292929
        );

    color:
        rgba(255, 255, 255, .22);

    font-size: 45px;
}


/* =========================================================
   EVENT CONTENT
========================================================= */

.vf-event-content {
    width: 100%;

    min-width: 0;

    padding:
        27px
        27px
        30px;
}


/* =========================================================
   EVENT DATE
========================================================= */

.vf-event-date {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    max-width: 100%;

    margin-bottom: 14px;

    color: #1464f4;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: .5px;

    text-transform: uppercase;

    overflow-wrap: anywhere;
}


/* =========================================================
   EVENT TITLE
========================================================= */

.vf-event-content h3 {
    margin: 0;

    color: #111;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: -.5px;

    overflow-wrap: anywhere;
}


.vf-event-content h3 a {
    color: inherit;

    text-decoration: none;

    transition:
        color .25s ease;
}


.vf-event-content h3 a:hover {
    color: #1464f4;
}


/* =========================================================
   EVENT LOCATION
========================================================= */

.vf-event-location {
    display: flex;

    align-items: flex-start;

    gap: 6px;

    margin-top: 13px;

    color: #777;

    font-size: 12px;

    line-height: 1.5;
}


.vf-event-location i {
    flex:
        0
        0
        auto;

    margin-top: 2px;
}


/* =========================================================
   EVENT EXCERPT
========================================================= */

.vf-event-excerpt {
    margin:
        15px
        0
        0;

    color: #666;

    font-size: 14px;

    line-height: 1.75;

    overflow-wrap: anywhere;
}


/* =========================================================
   EVENT LINK
========================================================= */

.vf-event-link {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    max-width: 100%;

    margin-top: 21px;

    color: #111;

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .5px;

    text-decoration: none;

    transition:
        gap .25s ease,
        color .25s ease;
}


.vf-event-link:hover {
    gap: 12px;

    color: #1464f4;

    text-decoration: none;
}


/* =========================================================
   EMPTY STATE
========================================================= */

.vf-event-empty {
    width: 100%;

    padding:
        100px
        20px;

    text-align: center;
}


.vf-event-empty i {
    display: block;

    color: #aaa;

    font-size: 45px;
}


.vf-event-empty h3 {
    margin:
        20px
        0
        8px;

    color: #222;

    font-size: 24px;

    line-height: 1.25;

    overflow-wrap: anywhere;
}


.vf-event-empty p {
    margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.7;

    overflow-wrap: anywhere;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .vf-event-hero {
        min-height: 620px;

        background-position:
            center center;
    }


    .vf-event-hero-content {
        max-width: 680px;
    }


    .vf-event-hero h1 {
        font-size: 105px;

        letter-spacing: -6px;
    }


    .vf-event-hero p {
        font-size: 18px;
    }


    .vf-event-list {
        padding:
            120px
            0;
    }


    .vf-event-content {
        padding:
            30px
            30px
            34px;
    }


    .vf-event-content h3 {
        font-size: 25px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991.98px) {

    .vf-event-hero {
        min-height: 560px;

        background-position:
            55%
            center;
    }


    .vf-event-hero-content {
        max-width: 580px;

        padding:
            60px
            0;
    }


    .vf-event-eyebrow {
        margin-bottom: 20px;

        font-size: 11px;

        letter-spacing: 4px;
    }


    .vf-event-hero h1 {
        font-size: clamp(52px, 8vw, 82px);

        letter-spacing: -4px;
    }


    .vf-event-hero p {
        max-width: 520px;

        margin-top: 28px;

        font-size: 16px;

        line-height: 1.75;
    }


    /* EVENT LIST */

    .vf-event-list {
        padding:
            80px
            0;
    }


    /* CARD */

    .vf-event-card {
        border-radius: 20px;
    }


    .vf-event-content {
        padding:
            23px
            23px
            27px;
    }


    .vf-event-date {
        margin-bottom: 12px;

        font-size: 10px;
    }


    .vf-event-content h3 {
        font-size: 21px;
    }


    .vf-event-location {
        margin-top: 11px;

        font-size: 11px;
    }


    .vf-event-excerpt {
        margin-top: 13px;

        font-size: 13px;

        line-height: 1.7;
    }


    .vf-event-link {
        margin-top: 18px;

        font-size: 10px;
    }


    .vf-event-empty {
        padding:
            80px
            20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .vf-event-hero {
        min-height: 520px;

        align-items: flex-end;

        background-position:
            58%
            center;
    }


    .vf-event-hero-content {
        width: 100%;

        max-width: 100%;

        padding:
            40px
            20px
            50px;
    }


    .vf-event-eyebrow {
        margin-bottom: 17px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .vf-event-hero h1 {
        font-size: clamp(42px, 12vw, 68px);

        line-height: .9;

        letter-spacing: -3px;
    }


    .vf-event-hero p {
        max-width: 100%;

        margin-top: 22px;

        font-size: 14px;

        line-height: 1.7;
    }


    /* EVENT LIST */

    .vf-event-list {
        padding:
            60px
            0;
    }


    .vf-event-card {
        border-radius: 18px;
    }


    .vf-event-image {
        aspect-ratio: 16 / 10;
    }


    .vf-event-content {
        padding:
            20px
            20px
            23px;
    }


    .vf-event-date {
        margin-bottom: 10px;

        font-size: 9px;

        letter-spacing: .4px;
    }


    .vf-event-content h3 {
        font-size: 19px;

        line-height: 1.25;
    }


    .vf-event-location {
        margin-top: 10px;

        font-size: 11px;
    }


    .vf-event-excerpt {
        margin-top: 12px;

        font-size: 13px;

        line-height: 1.7;
    }


    .vf-event-link {
        margin-top: 17px;

        font-size: 10px;
    }


    .vf-event-empty {
        padding:
            60px
            15px;
    }


    .vf-event-empty i {
        font-size: 38px;
    }


    .vf-event-empty h3 {
        margin-top: 16px;

        font-size: 21px;
    }


    .vf-event-empty p {
        font-size: 13px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {

    .vf-event-hero {
        min-height: 480px;

        background-position:
            60%
            center;
    }


    .vf-event-hero-content {
        padding:
            35px
            15px
            40px;
    }


    .vf-event-eyebrow {
        margin-bottom: 14px;

        font-size: 9px;

        letter-spacing: 2.5px;
    }


    .vf-event-hero h1 {
        font-size: clamp(37px, 12vw, 55px);

        letter-spacing: -2px;
    }


    .vf-event-hero p {
        margin-top: 18px;

        font-size: 13px;

        line-height: 1.7;
    }


    /* EVENT LIST */

    .vf-event-list {
        padding:
            50px
            0;
    }


    .vf-event-card {
        border-radius: 16px;
    }


    .vf-event-content {
        padding:
            18px
            18px
            21px;
    }


    .vf-event-content h3 {
        font-size: 18px;
    }


    .vf-event-location {
        font-size: 10px;
    }


    .vf-event-excerpt {
        font-size: 12px;
    }


    .vf-event-link {
        margin-top: 15px;

        font-size: 9px;
    }


    .vf-event-placeholder {
        min-height: 190px;

        font-size: 38px;
    }


    .vf-event-empty {
        padding:
            50px
            12px;
    }


    .vf-event-empty i {
        font-size: 34px;
    }


    .vf-event-empty h3 {
        font-size: 19px;
    }


    .vf-event-empty p {
        font-size: 12px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 375px) {

    .vf-event-hero {
        min-height: 450px;

        background-position:
            62%
            center;
    }


    .vf-event-hero-content {
        padding:
            30px
            12px
            35px;
    }


    .vf-event-eyebrow {
        margin-bottom: 12px;

        font-size: 8px;

        letter-spacing: 2px;
    }


    .vf-event-hero h1 {
        font-size: clamp(33px, 12vw, 48px);

        letter-spacing: -1.5px;
    }


    .vf-event-hero p {
        margin-top: 15px;

        font-size: 12px;

        line-height: 1.65;
    }


    /* EVENT LIST */

    .vf-event-list {
        padding:
            42px
            0;
    }


    .vf-event-content {
        padding:
            16px
            15px
            19px;
    }


    .vf-event-content h3 {
        font-size: 16px;
    }


    .vf-event-location {
        font-size: 9px;
    }


    .vf-event-excerpt {
        font-size: 11px;

        line-height: 1.65;
    }


    .vf-event-link {
        margin-top: 13px;

        font-size: 8px;
    }


    .vf-event-placeholder {
        min-height: 170px;

        font-size: 32px;
    }


    .vf-event-empty {
        padding:
            42px
            10px;
    }


    .vf-event-empty h3 {
        font-size: 17px;
    }


    .vf-event-empty p {
        font-size: 11px;
    }

}

/* =========================================================
   VINFAST PARUNG
   EVENT & PROMOTION RESPONSIVE CLEANUP
   ========================================================= */


/* =========================================================
   EVENT PAGE
   ---------------------------------------------------------
   NOTE:
   Core desktop styles untuk Event Hero, Event List,
   Event Card, dll tetap mengikuti CSS Event sebelumnya.

   Di sini hanya kita berikan responsive override yang
   benar-benar diperlukan.
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

   @media (max-width: 991.98px) {

    .vf-event-hero {
        min-height: 560px;
        background-position: 60% center;
    }

    .vf-event-hero-content {
        max-width: 100%;
        padding: 60px 0 45px;
    }

    .vf-event-eyebrow {
        margin-bottom: 20px;
        font-size: 10px;
        letter-spacing: 4px;
    }

    .vf-event-hero h1 {
        font-size: clamp(48px, 8vw, 68px);
        line-height: .92;
        letter-spacing: -3px;
    }

    .vf-event-hero p {
        max-width: 500px;
        margin-top: 25px;
        font-size: 15px;
        line-height: 1.7;
    }

    .vf-event-list {
        padding: 80px 0;
    }

    .vf-event-card {
        min-width: 0;
    }

    .vf-event-content {
        min-width: 0;
        padding: 23px 22px 27px;
    }

    .vf-event-content h3 {
        font-size: 22px;
    }

    .vf-event-excerpt {
        overflow-wrap: anywhere;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .vf-event-hero {
        min-height: 500px;
        align-items: flex-end;
        background-position: 67% center;
    }

    .vf-event-hero .container {
        height: 100%;
    }

    .vf-event-hero-content {
        max-width: 100%;
        padding: 40px 0 45px;
    }

    .vf-event-eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 3.5px;
    }

    .vf-event-hero h1 {
        max-width: 100%;
        font-size: clamp(40px, 10vw, 58px);
        line-height: .92;
        letter-spacing: -2.5px;
        overflow-wrap: anywhere;
    }

    .vf-event-hero p {
        max-width: 420px;
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .vf-event-list {
        padding: 60px 0;
    }

    .vf-event-card {
        border-radius: 18px;
    }

    .vf-event-image {
        aspect-ratio: 16 / 10;
    }

    .vf-event-content {
        padding: 22px 20px 25px;
    }

    .vf-event-content h3 {
        font-size: 21px;
        line-height: 1.2;
    }

    .vf-event-date,
    .vf-event-location {
        font-size: 11px;
    }

    .vf-event-excerpt {
        font-size: 13px;
        line-height: 1.65;
    }

    .vf-event-link {
        margin-top: 18px;
    }

    .vf-event-empty {
        padding: 70px 20px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .vf-event-hero {
        min-height: 480px;
        background-position: 68% center;
    }

    .vf-event-hero-content {
        padding: 35px 0 38px;
    }

    .vf-event-eyebrow {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .vf-event-hero h1 {
        font-size: clamp(36px, 11vw, 52px);
        letter-spacing: -2px;
    }

    .vf-event-hero p {
        max-width: 340px;
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.7;
    }

    .vf-event-list {
        padding: 50px 0;
    }

    .vf-event-card {
        border-radius: 16px;
    }

    .vf-event-content {
        padding: 20px 17px 23px;
    }

    .vf-event-content h3 {
        font-size: 19px;
    }

    .vf-event-date,
    .vf-event-location {
        gap: 6px;
        font-size: 10px;
    }

    .vf-event-excerpt {
        margin-top: 13px;
        font-size: 12px;
        line-height: 1.65;
    }

    .vf-event-link {
        font-size: 10px;
    }

    .vf-event-empty {
        padding: 55px 15px;
    }

    .vf-event-empty h3 {
        font-size: 21px;
    }

    .vf-event-empty p {
        font-size: 13px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 375px) {

    .vf-event-hero {
        min-height: 450px;
        background-position: 70% center;
    }

    .vf-event-hero-content {
        padding: 30px 0 32px;
    }

    .vf-event-eyebrow {
        margin-bottom: 15px;
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .vf-event-hero h1 {
        font-size: clamp(33px, 11vw, 46px);
        letter-spacing: -1.8px;
    }

    .vf-event-hero p {
        max-width: 300px;
        margin-top: 18px;
        font-size: 12px;
    }

    .vf-event-list {
        padding: 42px 0;
    }

    .vf-event-content {
        padding: 18px 14px 21px;
    }

    .vf-event-content h3 {
        font-size: 18px;
    }

    .vf-event-excerpt {
        font-size: 11.5px;
    }

    .vf-event-empty {
        padding: 45px 12px;
    }
}


/* =========================================================
   PROMOTION & EVENTS PAGE
   ---------------------------------------------------------
   Core desktop styles tetap digunakan dari block utama.
   Responsive di bawah ini menggantikan seluruh responsive
   lama agar tidak terjadi override berlapis.
   ========================================================= */


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    .vf-promotion-hero {
        min-height: 620px;
        background-position: center center;
    }

    .vf-promotion-hero-content {
        max-width: 680px;
    }

    .vf-promotion-hero h1 {
        font-size: 105px;
    }

    .vf-promotion-hero p {
        font-size: 17px;
    }

    .vf-promotion-content {
        padding: 110px 0;
    }

    .vf-promotion-grid {
        gap: 32px;
    }

    .vf-promotion-card-content {
        padding: 30px 30px 32px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .vf-promotion-hero {
        min-height: 560px;
        background-position: 55% center;
    }

    .vf-promotion-hero-content {
        max-width: 580px;
        padding: 60px 0;
    }

    .vf-promotion-eyebrow {
        margin-bottom: 20px;
        font-size: 10px;
        letter-spacing: 4px;
    }

    .vf-promotion-hero h1 {
        font-size: clamp(52px, 8vw, 85px);
        letter-spacing: -4px;
    }

    .vf-promotion-hero p {
        max-width: 500px;
        margin-top: 28px;
        font-size: 15px;
        line-height: 1.75;
    }

    .vf-promotion-content {
        padding: 80px 0;
    }

    .vf-promotion-heading {
        margin-bottom: 30px;
    }

    .vf-promotion-heading h2 {
        font-size: clamp(38px, 6vw, 52px);
        letter-spacing: -2.5px;
    }

    .vf-promotion-filter {
        margin-bottom: 32px;
    }

    .vf-promotion-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .vf-promotion-card {
        min-width: 0;
        border-radius: 20px;
    }

    .vf-promotion-card-content {
        min-width: 0;
        padding: 23px 22px 26px;
    }

    .vf-promotion-card h3 {
        font-size: 21px;
    }

    .vf-promotion-excerpt {
        overflow-wrap: anywhere;
    }

    .vf-promotion-empty {
        padding: 80px 20px;
    }

    .vf-promotion-cta {
        padding: 90px 0;
    }

    .vf-promotion-cta h2 {
        font-size: clamp(45px, 7vw, 68px);
        letter-spacing: -3px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .vf-promotion-hero {
        min-height: 520px;
        align-items: flex-end;
        background-position: 67% center;
    }

    .vf-promotion-hero-content {
        max-width: 100%;
        padding: 40px 0 45px;
    }

    .vf-promotion-eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: 3.5px;
    }

    .vf-promotion-hero h1 {
        max-width: 100%;
        font-size: clamp(42px, 11vw, 58px);
        line-height: .92;
        letter-spacing: -2.8px;
        overflow-wrap: anywhere;
    }

    .vf-promotion-hero p {
        max-width: 420px;
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .vf-promotion-content {
        padding: 60px 0;
    }

    .vf-promotion-heading {
        margin-bottom: 25px;
    }

    .vf-promotion-heading span {
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .vf-promotion-heading h2 {
        font-size: clamp(34px, 9vw, 45px);
        line-height: .95;
        letter-spacing: -2px;
    }

    .vf-promotion-filter {
        gap: 7px;
        margin-bottom: 28px;
        padding-bottom: 3px;
    }

    .vf-promotion-filter button {
        padding: 9px 16px;
        font-size: 10px;
    }

    .vf-promotion-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vf-promotion-card {
        border-radius: 18px;
    }

    .vf-promotion-card-content {
        padding: 22px 20px 25px;
    }

    .vf-promotion-type {
        margin-bottom: 13px;
        padding: 6px 10px;
        font-size: 8px;
    }

    .vf-promotion-card h3 {
        font-size: 20px;
        line-height: 1.2;
    }

    .vf-promotion-date,
    .vf-promotion-location {
        font-size: 10px;
    }

    .vf-promotion-excerpt {
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.65;
    }

    .vf-promotion-link {
        margin-top: 19px;
        font-size: 10px;
    }

    .vf-promotion-empty {
        padding: 65px 15px;
    }

    .vf-promotion-empty i {
        font-size: 40px;
    }

    .vf-promotion-empty h3 {
        margin-top: 17px;
        font-size: 22px;
    }

    .vf-promotion-empty p {
        font-size: 13px;
    }

    .vf-promotion-cta {
        padding: 70px 0;
    }

    .vf-promotion-cta-inner {
        max-width: 600px;
    }

    .vf-promotion-cta-inner span {
        margin-bottom: 13px;
        font-size: 9px;
        letter-spacing: 2.5px;
    }

    .vf-promotion-cta h2 {
        font-size: clamp(42px, 11vw, 55px);
        letter-spacing: -2.5px;
    }

    .vf-promotion-cta p {
        margin-top: 20px;
        font-size: 13px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

    .vf-promotion-hero {
        min-height: 480px;
        background-position: 68% center;
    }

    .vf-promotion-hero-content {
        padding: 35px 0 38px;
    }

    .vf-promotion-eyebrow {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .vf-promotion-hero h1 {
        font-size: clamp(38px, 11vw, 52px);
        letter-spacing: -2.2px;
    }

    .vf-promotion-hero p {
        max-width: 340px;
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.7;
    }

    .vf-promotion-content {
        padding: 50px 0;
    }

    .vf-promotion-heading {
        margin-bottom: 22px;
    }

    .vf-promotion-heading h2 {
        font-size: 40px;
    }

    .vf-promotion-filter {
        margin-bottom: 24px;
    }

    .vf-promotion-card {
        border-radius: 16px;
    }

    .vf-promotion-card-content {
        padding: 20px 17px 23px;
    }

    .vf-promotion-card h3 {
        font-size: 19px;
    }

    .vf-promotion-excerpt {
        font-size: 12px;
    }

    .vf-promotion-cta {
        padding: 60px 0;
    }

    .vf-promotion-cta h2 {
        font-size: 42px;
        letter-spacing: -2px;
    }

    .vf-promotion-cta p {
        font-size: 12px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 375px) {

    .vf-promotion-hero {
        min-height: 450px;
        background-position: 70% center;
    }

    .vf-promotion-hero-content {
        padding: 30px 0 32px;
    }

    .vf-promotion-eyebrow {
        margin-bottom: 15px;
        font-size: 8px;
        letter-spacing: 2.5px;
    }

    .vf-promotion-hero h1 {
        font-size: clamp(35px, 11vw, 46px);
        letter-spacing: -1.8px;
    }

    .vf-promotion-hero p {
        max-width: 300px;
        margin-top: 18px;
        font-size: 12px;
    }

    .vf-promotion-content {
        padding: 42px 0;
    }

    .vf-promotion-heading h2 {
        font-size: 36px;
    }

    .vf-promotion-card-content {
        padding: 18px 14px 21px;
    }

    .vf-promotion-card h3 {
        font-size: 18px;
    }

    .vf-promotion-excerpt {
        font-size: 11.5px;
    }

    .vf-promotion-cta {
        padding: 52px 0;
    }

    .vf-promotion-cta h2 {
        font-size: 38px;
    }
}

}