/* =========================================================

   VINFAST LANDING PAGE

   Visual direction:

   - clean automotive dealer website

   - compact typography

   - strong photography

   - restrained blue accent

   - section proportions inspired by the 8 reference screens

========================================================= */


@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@500;600;700&display=swap');


:root {

    --blue: #0068ff;

    --blue-dark: #0052c9;

    --black: #101114;

    --charcoal: #1b1d21;

    --gray-900: #292c31;

    --gray-700: #62666d;

    --gray-500: #92969d;

    --gray-300: #dfe2e6;

    --gray-100: #f5f6f7;

    --white: #fff;

    --container: 1200px;

}


* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    color: var(--gray-900);

    background: var(--white);

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

    font-size: 14px;

    line-height: 1.6;

}


a {

    color: inherit;

    text-decoration: none;

}


button {

    font: inherit;

}


img {

    display: block;

    max-width: 100%;

}


.container {

    width: min(var(--container), calc(100% - 40px));

    margin: 0 auto;

}


.section-padding {

    padding: 78px 0;

}


/* =========================================================

   TYPOGRAPHY

========================================================= */


.eyebrow {

    display: block;

    margin-bottom: 9px;

    color: var(--blue);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

}


.section-heading {

    margin: 0 auto 42px;

    text-align: center;

}


.section-heading h2,

.value-container h2 {

    margin: 0 0 12px;

    color: var(--black);

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

    font-size: clamp(29px, 3.2vw, 43px);

    font-weight: 600;

    line-height: 1.15;

    letter-spacing: -.035em;

}


.section-heading p {

    max-width: 680px;

    margin: 0 auto;

    color: var(--gray-700);

    font-size: 14px;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    color: #fff;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .52),
        rgba(0, 0, 0, 0)
    );
    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease;
}

.site-header.scrolled {
    color: var(--black);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .10);
}

.nav-container {
    width: min(1400px, calc(100% - 60px));
    height: 92px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
}

.brand-logo {
    display: block;
    width: 150px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-logo-vinfast {
    height: 42px;
    width: auto;
}

.brand-logo-alfix {
    height: 38px;
    width: auto;
}

.brand-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    border: 2px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-family: 'Montserrat', sans-serif;
    font-size: 17px;
    font-weight: 700;
}

.brand-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .13em;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.main-nav > a,
.dropdown-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 32px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .14em;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}

.main-nav > a:hover,
.dropdown-toggle:hover {
    color: var(--blue);
}

.nav-dropdown {
    position: relative;
    flex-shrink: 0;
}

.dropdown-toggle {
    justify-content: center;
    gap: 7px;
}

.dropdown-toggle i {
    font-size: 10px;
    transition: transform .2s ease;
}

.nav-dropdown.is-open .dropdown-toggle i {
    transform: rotate(180deg);
}

/* ---------------------------------------------------------
   DESKTOP DROPDOWN
--------------------------------------------------------- */

.dropdown-menu {
    position: absolute;
    top: calc(100% - 8px);
    left: 50%;
    width: 210px;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px);
    background: #fff;
    color: var(--black);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
    transition:
        opacity .2s ease,
        visibility .2s ease,
        transform .2s ease;
}

.dropdown-menu a {
    display: block;
    width: 100%;
    padding: 13px 20px;
    color: var(--black);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .07em;
    text-decoration: none;
    transition:
        color .2s ease,
        background-color .2s ease;
}

.dropdown-menu a:hover {
    color: var(--blue);
    background: #f4f7fb;
}

.nav-toggle {
    display: none;
    width: 45px;
    height: 45px;
    padding: 8px;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle span {
    display: block;
    width: 29px;
    height: 2px;
    margin: 6px auto;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform .2s ease,
        opacity .2s ease;
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

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

@media (max-width: 992px) {

    .nav-container {
        width: calc(100% - 32px);
        height: 78px;
    }

    .brand-logo {
        width: 135px;
    }

    .brand-logo-vinfast {
        width: auto;
        height: 36px;
    }

    .brand-text {
        font-size: 17px;
        letter-spacing: .10em;
    }

    .brand-mark {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    .nav-toggle {
        display: block;
        position: relative;
        z-index: 1002;
    }

    .main-nav {
        position: fixed;
        top: 78px;
        left: 0;
        width: 100%;
        height: auto;
        max-height: calc(100vh - 78px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 15px 20px 25px;
        background: rgba(255, 255, 255, .98);
        color: var(--black);
        box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        z-index: 1001;
        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .main-nav > a,
    .dropdown-toggle {
        width: 100%;
        min-height: 48px;
        padding: 15px 5px;
        color: var(--black);
        font-size: 12px;
        line-height: 1.2;
        text-align: left;
        letter-spacing: .12em;
    }

    .main-nav > a:hover,
    .dropdown-toggle:hover {
        color: var(--blue);
    }

    .nav-dropdown {
        width: 100%;
    }

    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* Mobile must not inherit desktop dropdown positioning. */
    .dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        padding: 0;
        margin: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        background: transparent;
        color: var(--black);
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .nav-dropdown.is-open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        display: block;
        width: 100%;
        padding: 12px 20px;
        color: var(--black);
        background: transparent;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: .08em;
        text-align: left;
    }

    .dropdown-menu a:hover {
        color: var(--blue);
        background: #f4f7fb;
    }

    .site-header.scrolled {
        background: rgba(255, 255, 255, .98);
    }
}

/* =========================================================
   DESKTOP DROPDOWN INTERACTION
========================================================= */

@media (min-width: 993px) {

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-50%, 0);
    }
}

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

@media (max-width: 576px) {

    .nav-container {
        width: calc(100% - 24px);
        height: 72px;
    }

    .main-nav {
        top: 72px;
        max-height: calc(100vh - 72px);
    }

    .brand-logo {
        width: 120px;
    }

    .brand-logo-vinfast {
        height: 32px;
        width: auto;
    }

    .brand-text {
        font-size: 15px;
        letter-spacing: .08em;
    }

    .brand-mark {
        width: 31px;
        height: 31px;
        font-size: 14px;
    }

    .nav-toggle {
        width: 42px;
        height: 42px;
        padding: 7px;
    }

    .nav-toggle span {
        width: 27px;
        margin: 5px auto;
    }

    .main-nav > a,
    .dropdown-toggle {
        min-height: 46px;
        padding: 14px 5px;
        font-size: 11px;
    }

    .dropdown-menu a {
        padding: 11px 15px;
        font-size: 10px;
    }
}

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

@media (max-width: 380px) {

    .nav-container {
        width: calc(100% - 20px);
    }

    .brand-logo {
        width: 108px;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
    }

    .nav-toggle span {
        width: 25px;
    }
}


/* =========================================================

   HERO

========================================================= */


.hero {

    position: relative;

    min-height: 720px;

    height: 100vh;

    max-height: 900px;

    overflow: hidden;

    color: #fff;

    background: #15171a;

}


.hero-slides,

.hero-slide,

.hero-overlay {

    position: absolute;

    inset: 0;

}


.hero-slide {

    background-position: center;

    background-size: cover;

    opacity: 0;

    transition: opacity .7s ease;

}


.hero-slide.is-active {

    opacity: 1;

}


.hero-overlay {

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.56) 0%,

            rgba(0,0,0,.25) 45%,

            rgba(0,0,0,.05) 100%

        ),

        linear-gradient(

            0deg,

            rgba(0,0,0,.35),

            transparent 38%

        );

}


.hero-content {

    position: relative;

    z-index: 2;

    width: min(var(--container), calc(100% - 40px));

    height: 100%;

    margin: auto;

    padding-top: 235px;

}


.hero-content .eyebrow {

    color: #c9ddff;

}


.hero-content h1 {

    max-width: 720px;

    margin: 0 0 20px;

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

    font-size: clamp(39px, 5vw, 68px);

    font-weight: 600;

    line-height: 1.02;

    letter-spacing: -.045em;

}


.hero-content h1 span {

    color: #dce9ff;

}


.hero-content p {

    max-width: 510px;

    margin: 0 0 28px;

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

    font-size: 14px;

    line-height: 1.7;

}


.hero-actions {

    display: flex;

    gap: 9px;

}


.hero-button {

    min-width: 142px;

    padding: 13px 20px;

    border: 1px solid var(--blue);

    background: var(--blue);

    color: #fff;

    text-align: center;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .1em;

    transition: .2s ease;

}


.hero-button:hover {

    background: var(--blue-dark);

    border-color: var(--blue-dark);

}


.hero-button-light {

    border-color: rgba(255,255,255,.7);

    background: transparent;

}


.hero-button-light:hover {

    color: var(--black);

    background: #fff;

    border-color: #fff;

}


.slider-dots {

    position: absolute;

    bottom: 34px;

    left: 0;

    display: flex;

    gap: 7px;

}


.dot {

    width: 25px;

    height: 2px;

    border: 0;

    padding: 0;

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

    cursor: pointer;

}


.dot.is-active {

    background: #fff;

}


/* =========================================================

   WHATSAPP FLOAT

========================================================= */


.whatsapp-float {

    position: fixed;


    right: 22px;

    bottom: 22px;


    z-index: 999;


    display: flex;

    flex-direction: column;


    align-items: flex-end;


    gap: 8px;

}


/* =========================================================

   WHATSAPP ITEM

========================================================= */


.wa-item {

    min-height: 50px;


    display: flex;

    align-items: center;


    gap: 10px;


    padding: 7px 16px 7px 7px;


    border-radius: 50px;


    background: #00c765;

    color: #fff;


    text-decoration: none;


    box-shadow:

        0 6px 20px rgba(0, 0, 0, .15);


    transition:

        background-color .2s ease,

        transform .2s ease,

        box-shadow .2s ease;

}


/* =========================================================

   WHATSAPP IMAGE

========================================================= */


.wa-icon {

    width: 36px;

    height: 36px;


    flex-shrink: 0;


    display: flex;

    align-items: center;

    justify-content: center;


    overflow: hidden;


    border-radius: 50%;

}


.wa-icon img {

    display: block;


    width: 100%;

    height: 100%;


    object-fit: contain;

}


/* =========================================================

   TEXT

========================================================= */


.wa-text {

    color: #fff;


    font-size: 11px;

    font-weight: 600;


    line-height: 1;


    white-space: nowrap;

}


/* =========================================================

   HOVER

========================================================= */


.wa-item:hover {

    background: #00b85c;


    color: #fff;


    transform: translateX(-3px);


    box-shadow:

        0 8px 25px rgba(0, 0, 0, .20);

}


/* =========================================================

   MOBILE

========================================================= */


@media (max-width: 576px) {


    .whatsapp-float {

        right: 14px;

        bottom: 14px;

    }


    .wa-item {

        min-height: 46px;


        padding: 5px 13px 5px 5px;

    }


    .wa-icon {

        width: 34px;

        height: 34px;

    }


    .wa-text {

        font-size: 10px;

    }


}


/* =========================================================

   MODELS

========================================================= */


.models-section {

    background: #fff;

}


/* =========================================================

   FILTER

========================================================= */


.model-filter {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 4px;

    margin-bottom: 35px;

}


.filter-btn {

    min-width: 74px;

    padding: 9px 15px;


    border: 1px solid var(--gray-300);

    background: #fff;

    color: var(--gray-700);


    cursor: pointer;


    font-size: 9px;

    font-weight: 700;

    letter-spacing: .08em;


    transition:

        color .2s ease,

        background-color .2s ease,

        border-color .2s ease;

}


.filter-btn:hover,

.filter-btn.is-active {

    color: #fff;

    background: var(--blue);

    border-color: var(--blue);

}


/* =========================================================

   MODELS GRID

========================================================= */


.models-grid {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;


    align-items: stretch;

}


/* =========================================================

   MODEL CARD

========================================================= */


.model-card {

    display: flex;

    flex-direction: column;


    height: 100%;

    min-width: 0;


    overflow: hidden;


    border: 1px solid #e5e7e9;

    background: #fff;


    transition:

        transform .25s ease,

        box-shadow .25s ease;

}


.model-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 35px rgba(0, 0, 0, .08);

}


.model-card.is-hidden {

    display: none;

}


/* =========================================================

   MODEL IMAGE

========================================================= */


.model-image {

    position: relative;


    height: 250px;

    min-height: 250px;


    overflow: hidden;


    display: flex;

    align-items: center;

    justify-content: center;


    background:

        linear-gradient(

            180deg,

            #f7f8f9 0%,

            #e6e9ed 100%

        );

}


.model-image img {

    position: relative;

    z-index: 1;


    display: block;


    width: 100%;

    height: 100%;


    object-fit: contain;

}


.model-image::after {

    content: "";


    position: absolute;

    z-index: 0;


    width: 65%;

    height: 15px;


    left: 17.5%;

    bottom: 30px;


    border-radius: 50%;


    background: rgba(0, 0, 0, .16);


    filter: blur(8px);

}


/* =========================================================

   MODEL PLACEHOLDER

========================================================= */


.model-placeholder {

    position: relative;

    z-index: 1;


    text-align: center;

}


.model-placeholder strong {

    display: block;


    color: #15171a;


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

    font-size: 47px;

    font-weight: 600;

    line-height: 1;


    letter-spacing: -.06em;

}


.model-placeholder span {

    display: block;


    margin-top: 8px;


    color: var(--gray-700);


    font-size: 9px;

    font-weight: 600;


    letter-spacing: .08em;

    text-transform: uppercase;

}


/* =========================================================

   MODEL BADGE

========================================================= */


.model-badge {

    position: absolute;

    z-index: 3;


    top: 13px;

    left: 13px;


    padding: 5px 8px;


    background: var(--black);

    color: #fff;


    font-size: 8px;

    font-weight: 700;


    letter-spacing: .1em;

}


/* =========================================================

   MODEL BODY

========================================================= */


.model-body {

    display: flex;

    flex-direction: column;


    flex: 1;


    padding: 22px 23px 23px;


    min-height: 0;

}


/* =========================================================

   MODEL KICKER

========================================================= */


.model-kicker {

    display: block;


    min-height: 12px;


    color: var(--blue);


    font-size: 8px;

    font-weight: 700;


    letter-spacing: .13em;

}


/* =========================================================

   MODEL TITLE

========================================================= */


.model-body h2 {

    margin: 4px 0 13px;


    min-height: 30px;


    color: var(--black);


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

    font-size: 25px;

    font-weight: 600;


    line-height: 1.15;

    letter-spacing: -.035em;

}


/* =========================================================

   PRICE

========================================================= */


.price-label {

    display: block;


    min-height: 12px;


    color: var(--gray-500);


    font-size: 9px;

    line-height: 1.2;

}


.price {

    min-height: 25px;


    margin: 1px 0 1px;


    color: var(--black);


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

    font-size: 20px;

    font-weight: 700;


    line-height: 1.25;

}


/* =========================================================

   PRICE NOTE

========================================================= */


.model-body small {

    display: block;


    min-height: 31px;


    color: var(--gray-500);


    font-size: 9px;

    line-height: 1.45;

}


/* =========================================================

   SPECIFICATION

========================================================= */


.spec-title {

    min-height: 12px;


    margin: 13px 0 5px;


    font-size: 9px;

    font-weight: 700;

    line-height: 1.3;

}


.model-body ul {

    min-height: 75px;


    margin: 0;

    padding-left: 15px;


    color: var(--gray-700);


    font-size: 9px;

    line-height: 1.5;

}


.model-body li {

    margin-bottom: 4px;

}


.model-body li:last-child {

    margin-bottom: 0;

}


/* =========================================================

   MODEL VARIANTS

========================================================= */


.model-variants {

    display: flex;

    align-items: center;


    gap: 6px;


    margin: 0 0 12px;

}


.variant-option {

    min-width: 52px;


    padding: 6px 10px;


    border: 1px solid #d7dadd;


    background: #fff;

    color: var(--gray-700);


    cursor: pointer;


    font-size: 8px;

    font-weight: 700;


    letter-spacing: .08em;


    transition:

        color .2s ease,

        background-color .2s ease,

        border-color .2s ease;

}


.variant-option:hover,

.variant-option.is-active {

    background: var(--blue);

    border-color: var(--blue);


    color: #fff;

}


/* =========================================================

   MODEL BUTTON BASE

========================================================= */


.model-btn {

    width: 100%;


    display: flex;


    align-items: center;

    justify-content: center;


    box-sizing: border-box;


    text-decoration: none;


    transition:

        background-color .2s ease,

        border-color .2s ease,

        color .2s ease,

        transform .2s ease,

        box-shadow .2s ease;

}


/* =========================================================

   WHATSAPP CONTACT BUTTON

========================================================= */


.model-btn.contact-btn {

    width: 100%;

    min-height: 64px;


    margin-top: auto;

    padding: 0 20px;


    display: flex;

    align-items: center;

    justify-content: center;


    gap: 13px;


    border: 0;

    border-radius: 10px;


    background: #00c765;

    color: #fff;


    font-size: 20px;

    font-weight: 500;


    line-height: 1;


    letter-spacing: 0;


    text-decoration: none;


    cursor: pointer;

}


.model-btn.contact-btn i {

    display: inline-flex;


    align-items: center;

    justify-content: center;


    width: 30px;

    height: 30px;


    font-size: 30px;

    line-height: 1;


    flex-shrink: 0;

}


.model-btn.contact-btn span {

    display: inline-block;


    line-height: 1;

}


/* =========================================================

   WHATSAPP HOVER

========================================================= */


.model-btn.contact-btn:hover {

    background: #00b85c;

    color: #fff;


    transform: translateY(-2px);


    box-shadow:

        0 8px 20px rgba(0, 199, 101, .20);

}


.model-btn.contact-btn:active {

    transform: translateY(0);


    box-shadow: none;

}


/* =========================================================

   ACCESSIBILITY

========================================================= */


.model-btn.contact-btn:focus-visible {

    outline: 2px solid #111;

    outline-offset: 3px;

}


/* =========================================================

   TABLET

========================================================= */


@media (max-width: 992px) {


    .models-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }


}


/* =========================================================

   MOBILE

========================================================= */


@media (max-width: 640px) {


    .model-filter {

        gap: 5px;

        margin-bottom: 25px;

    }


    .filter-btn {

        min-width: 65px;

        padding: 8px 12px;


        font-size: 8px;

    }


    .models-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }


    .model-image {

        height: 230px;

        min-height: 230px;

    }


    .model-body {

        padding: 20px;

    }


    .model-body h2 {

        font-size: 23px;

    }


    .price {

        font-size: 19px;

    }


    .model-body small {

        min-height: 31px;

    }


    .model-body ul {

        min-height: auto;

        margin-bottom: 18px;

    }


    .model-btn.contact-btn {

        min-height: 58px;


        font-size: 20px;


        gap: 11px;

    }


    .model-btn.contact-btn i {

        width: 27px;

        height: 27px;


        font-size: 27px;

    }


}


/* =========================================================

   DISCOVER

========================================================= */


.discover-section {

    background: #f3f4f5;

}


/* =========================================================

   DISCOVER BANNER

========================================================= */


.discover-banner {

    position: relative;


    min-height: 520px;


    overflow: hidden;


    display: flex;

    align-items: center;


    background: #123d32;

}


/* =========================================================

   BACKGROUND IMAGE

========================================================= */


.discover-bg {

    position: absolute;


    inset: 0;


    width: 100%;

    height: 100%;


    display: block;


    object-fit: cover;

    object-position: center;


    z-index: 1;

}


/* =========================================================

   CONTENT

========================================================= */


.discover-content {

    position: relative;


    z-index: 3;


    width: 50%;


    margin-left: auto;


    padding: 60px 55px;


    color: #fff;

}


/* =========================================================

   EYEBROW

========================================================= */


.discover-content .eyebrow {

    display: block;


    margin-bottom: 14px;


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


    font-size: 9px;

    font-weight: 700;


    letter-spacing: .22em;


    text-transform: uppercase;

}


/* =========================================================

   TITLE

========================================================= */


.discover-content h2 {

    margin: 0 0 20px;


    max-width: 570px;


    color: #fff;


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


    font-size: clamp(32px, 4vw, 52px);


    font-weight: 600;


    line-height: 1.08;


    letter-spacing: -.045em;

}


/* GREEN HIGHLIGHT */


.discover-content h2 span {

    color: #00c765;

}


/* =========================================================

   DESCRIPTION

========================================================= */


.discover-content p {

    max-width: 520px;


    margin: 0 0 28px;


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


    font-size: 13px;


    line-height: 1.7;

}


/* =========================================================

   WHATSAPP BUTTON

========================================================= */


.discover-whatsapp {

    width: 100%;

    max-width: 360px;


    min-height: 58px;


    display: flex;


    align-items: center;

    justify-content: center;


    gap: 12px;


    padding: 0 25px;


    border-radius: 9px;


    background: #00c765;


    color: #fff;


    font-size: 17px;

    font-weight: 600;


    line-height: 1;


    text-decoration: none;


    transition:

        background-color .2s ease,

        transform .2s ease,

        box-shadow .2s ease;

}


/* WHATSAPP ICON */


.discover-whatsapp i {

    display: flex;


    align-items: center;

    justify-content: center;


    width: 28px;

    height: 28px;


    font-size: 28px;


    line-height: 1;

}


/* BUTTON TEXT */


.discover-whatsapp span {

    display: inline-block;


    line-height: 1;

}


/* HOVER */


.discover-whatsapp:hover {

    background: #00b85c;


    color: #fff;


    transform: translateY(-2px);


    box-shadow:

        0 10px 25px rgba(0, 199, 101, .25);

}


/* ACTIVE */


.discover-whatsapp:active {

    transform: translateY(0);


    box-shadow: none;

}


/* =========================================================

   TABLET

========================================================= */


@media (max-width: 992px) {


    .discover-banner {

        min-height: 480px;

    }


    .discover-content {

        width: 54%;


        padding: 45px 40px;

    }


    .discover-content h2 {

        font-size: 38px;

    }


    .discover-content p {

        font-size: 12px;

    }


}


/* =========================================================

   MOBILE

========================================================= */


@media (max-width: 768px) {


    .discover-banner {

        min-height: 600px;


        align-items: flex-end;

    }


    .discover-bg {

        object-position: 35% center;

    }


    .discover-content {

        width: 100%;


        margin: 0;


        padding: 120px 25px 30px;


        background:

            linear-gradient(

                180deg,

                rgba(0, 40, 30, 0) 0%,

                rgba(0, 35, 27, .72) 35%,

                rgba(0, 25, 20, .96) 100%

            );

    }


    .discover-content .eyebrow {

        margin-bottom: 10px;


        font-size: 8px;

    }


    .discover-content h2 {

        margin-bottom: 14px;


        font-size: 31px;

    }


    .discover-content p {

        margin-bottom: 20px;


        font-size: 11px;


        line-height: 1.6;

    }


    .discover-whatsapp {

        max-width: none;


        min-height: 56px;


        font-size: 17px;

    }


}


/* =========================================================

   SMALL MOBILE

========================================================= */


@media (max-width: 480px) {


    .discover-banner {

        min-height: 570px;

    }


    .discover-content {

        padding: 100px 20px 25px;

    }


    .discover-content h2 {

        font-size: 28px;

    }


    .discover-content p {

        font-size: 10px;

    }


    .discover-whatsapp {

        min-height: 54px;


        font-size: 16px;

    }


    .discover-whatsapp i {

        font-size: 25px;

    }


}


/* =========================================================

   OFFERS

========================================================= */


.offers-section {

    background: #fff;

}


.offers-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

}


.offer-card {

    display: grid;

    grid-template-columns: 45% 55%;

    min-height: 300px;

    border: 1px solid #e4e6e8;

}


.offer-image {

    position: relative;

    min-height: 300px;

    overflow: hidden;

    background:

        linear-gradient(

            135deg,

            #dce7f5,

            #5e7da4 50%,

            #15273c

        );

}


.offer-image-charging {

    background:

        linear-gradient(

            135deg,

            #dceefa,

            #3d81c8 50%,

            #101d2e

        );

}


.offer-image::after {

    content: "VINFAST";

    position: absolute;

    right: -15px;

    bottom: -13px;

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

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

    font-size: 55px;

    font-weight: 700;

}


.offer-image-label {

    position: absolute;

    left: 18px;

    bottom: 18px;

    z-index: 2;

    padding: 5px 7px;

    color: #fff;

    background: rgba(0,0,0,.55);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .12em;

}


.offer-copy {

    padding: 30px;

}


.offer-copy h2 {

    margin: 0 0 10px;

    color: var(--black);

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

    font-size: 25px;

    line-height: 1.2;

}


.offer-copy p {

    margin: 0 0 18px;

    color: var(--gray-700);

    font-size: 12px;

}


/* =========================================================

   VALUE

========================================================= */


.value-section {

    background: #f5f6f7;

}


.value-container {

    max-width: 780px;

    text-align: center;

}


.value-container p {

    margin: 0 auto 14px;

    color: var(--gray-700);

    font-size: 13px;

}


/* =========================================================

   FEATURES

========================================================= */


.wonder-section {

    background: #fff;

}


.features-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--gray-300);

    border-bottom: 1px solid var(--gray-300);

}


.feature {

    min-height: 260px;

    padding: 34px 32px;

    border-right: 1px solid var(--gray-300);

}


.feature:last-child {

    border-right: 0;

}


.feature-icon {

    width: 43px;

    height: 43px;

    display: grid;

    place-items: center;

    margin-bottom: 18px;

    color: var(--blue);

    border: 1px solid #c8daf5;

    border-radius: 50%;

    font-size: 17px;

}


.feature h3 {

    margin: 0 0 9px;

    color: var(--black);

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

    font-size: 18px;

    font-weight: 600;

}


.feature p {

    margin: 0;

    color: var(--gray-700);

    font-size: 12px;

}


/* =========================================================

   CHARGING / TEST DRIVE ACTION

========================================================= */


.action-section {

    min-height: 270px;

    display: flex;

    align-items: center;

    background:

        linear-gradient(

            rgba(245,247,249,.94),

            rgba(245,247,249,.94)

        );

}


.action-grid {

    width: min(900px, calc(100% - 40px));

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1px 1fr;

    align-items: center;

}


.action-item {

    min-height: 190px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

}


.action-icon {

    width: 48px;

    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 13px;

    border: 1px solid #cbd1d8;

    border-radius: 50%;

    color: var(--blue);

    font-size: 18px;

}


.action-item h3 {

    margin: 0 0 6px;

    color: var(--black);

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

    font-size: 19px;

    font-weight: 600;

}


.action-item p {

    max-width: 330px;

    margin: 0;

    color: var(--gray-700);

    font-size: 11px;

}


.action-divider {

    width: 1px;

    height: 110px;

    background: #d2d5d9;

}


/* =========================================================

   CONTACT / TEST DRIVE

========================================================= */


.dealer-section {

    color: #fff;

    background: #111315;

}


.dealer-section .section-heading h2 {

    color: #fff;

}


.dealer-section .section-heading p {

    color: #a8adb4;

}


.contact-grid {

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}


.dealer-card {

    position: relative;

    min-height: 285px;

    overflow: hidden;

    background: #1b1e22;

}


.dealer-card::before {

    content: "";

    position: absolute;

    right: -40px;

    bottom: -120px;

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

    content: "V";

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

    font-size: 300px;

    font-weight: 700;

    line-height: 1;

}


.contact-card {

    display: flex;

    align-items: flex-end;

    border: 1px solid rgba(255,255,255,.08);

}


.dealer-copy {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 27px;

}


.dealer-copy .eyebrow {

    color: #8eb8ff;

}


.dealer-copy h3 {

    margin: 0 0 8px;

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

    font-size: 21px;

    font-weight: 600;

}


.dealer-copy p {

    min-height: 55px;

    margin: 0 0 16px;

    color: #aeb3ba;

    font-size: 11px;

}


/* =========================================================

   FOOTER

========================================================= */


.site-footer {

    min-height: 90px;

    padding: 24px max(20px, calc((100% - var(--container)) / 2));

    display: grid;

    grid-template-columns: 1fr auto 1fr;

    align-items: center;

    gap: 25px;

    color: #858b92;

    background: #08090b;

    font-size: 10px;

}


.site-footer strong {

    display: block;

    color: #fff;

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

    font-size: 12px;

    letter-spacing: .08em;

}


.site-footer span {

    display: block;

    margin-top: 2px;

}


.site-footer > div:last-child {

    text-align: right;

}


.footer-links {

    display: flex;

    gap: 18px;

}


.footer-links a:hover {

    color: #fff;

}


/* =========================================================

   TABLET

========================================================= */


@media (max-width: 1050px) {


    .main-nav {

        gap: 17px;

    }


    .models-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .contact-grid {

        grid-template-columns: repeat(2, 1fr);

    }


    .contact-grid .dealer-card:last-child {

        grid-column: 1 / -1;

    }

}


/* =========================================================

   MOBILE

========================================================= */


@media (max-width: 780px) {


    .container {

        width: calc(100% - 30px);

    }


    .section-padding {

        padding: 58px 0;

    }


    .nav-container {

        width: calc(100% - 30px);

        height: 68px;

    }


    .nav-toggle {

        display: block;

    }


    .main-nav {

        position: absolute;

        top: 68px;

        left: 0;

        width: 100%;

        padding: 10px 18px 18px;

        display: none;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        background: rgba(12,14,17,.98);

        color: #fff;

    }


    .site-header.menu-open .main-nav {

        display: flex;

    }


    .main-nav > a,

    .dropdown-toggle {

        padding: 12px 0;

    }


    .dropdown-menu {

        position: static;

        display: none;

        width: 100%;

        padding: 0;

        opacity: 1;

        visibility: visible;

        transform: none;

        box-shadow: none;

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

        color: #fff;

    }


    .nav-dropdown.open .dropdown-menu {

        display: block;

    }


    .dropdown-menu a {

        padding: 9px 14px;

    }


    .hero {

        min-height: 650px;

        height: 760px;

    }


    .hero-content {

        width: calc(100% - 30px);

        padding-top: 175px;

    }


    .hero-content h1 {

        font-size: 42px;

    }


    .hero-content p {

        max-width: 430px;

        font-size: 13px;

    }


    .models-grid,

    .offers-grid,

    .features-grid,

    .contact-grid {

        grid-template-columns: 1fr;

    }


    .contact-grid .dealer-card:last-child {

        grid-column: auto;

    }


    .offer-card {

        grid-template-columns: 1fr;

    }


    .offer-image {

        min-height: 220px;

    }


    .features-grid {

        border-bottom: 0;

    }


    .feature {

        min-height: auto;

        border-right: 0;

        border-bottom: 1px solid var(--gray-300);

    }


    .action-grid {

        grid-template-columns: 1fr;

    }


    .action-divider {

        width: 75%;

        height: 1px;

        margin: auto;

    }


    .discover-banner {

        min-height: 460px;

    }


    .discover-content {

        width: 100%;

        padding: 32px 25px;

    }


    .discover-content h2 {

        font-size: 34px;

    }


    .site-footer {

        grid-template-columns: 1fr;

        text-align: center;

    }


    .site-footer > div:last-child {

        text-align: center;

    }


    .footer-links {

        justify-content: center;

        flex-wrap: wrap;

    }

}


/* =========================================================

   SMALL MOBILE

========================================================= */


@media (max-width: 480px) {


    .brand-text {

        font-size: 16px;

    }


    .hero-content h1 {

        font-size: 37px;

    }


    .hero-actions {

        flex-direction: column;

        align-items: stretch;

    }


    .hero-button {

        width: 100%;

    }


    .model-image {

        height: 225px;

    }


    .model-placeholder strong {

        font-size: 42px;

    }


    .model-body {

        padding: 20px;

    }


    .model-body ul {

        min-height: auto;

    }


    .whatsapp-float {

        right: 10px;

        bottom: 10px;

    }


    .wa-item {

        width: 43px;

        height: 43px;

        min-width: 43px;

        padding: 5px;

        justify-content: center;

    }


    .wa-item > span:last-child {

        display: none;

    }


    .model-variants {

        display: flex;

        gap: 8px;

        margin: 0 0 30px;

    }


    .variant-option {

        min-width: 90px;

        height: 42px;

        padding: 0 18px;


        border: 1px solid #d5d9de;

        background: #fff;


        color: #555b63;


        font-size: 12px;

        font-weight: 700;

        letter-spacing: .08em;


        cursor: pointer;


        transition:

            background .2s ease,

            color .2s ease,

            border-color .2s ease;

    }


    .variant-option:hover {

        border-color: #111216;

        color: #111216;

    }


    .variant-option.is-active {

        background: #111216;

        border-color: #111216;

        color: #fff;

    }


    /* =========================================================
   FINAL MOBILE NAVIGATION FIX
   ========================================================= */

@media (max-width: 780px) {

    .main-nav {
        position: fixed !important;

        top: 68px !important;
        left: 0 !important;

        width: 100% !important;

        height: auto !important;
        max-height: calc(100vh - 68px) !important;

        overflow-y: auto !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 0 !important;

        padding: 15px 20px 25px !important;

        background: rgba(255, 255, 255, .98) !important;
        color: var(--black) !important;

        box-shadow:
            0 10px 25px rgba(0, 0, 0, .12) !important;

        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        transform: translateY(-10px) !important;

        z-index: 1001 !important;

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease !important;
    }


    /* MENU OPEN */

    .main-nav.is-open {
        display: flex !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: translateY(0) !important;
    }


    /* NAV LINKS */

    .main-nav > a,
    .dropdown-toggle {

        width: 100% !important;

        min-height: 48px !important;

        padding: 15px 5px !important;

        color: var(--black) !important;

        font-size: 12px !important;

        line-height: 1.2 !important;

        text-align: left !important;

        letter-spacing: .12em !important;
    }


    /* DROPDOWN WRAPPER */

    .nav-dropdown {
        width: 100% !important;
    }


    /* DROPDOWN BUTTON */

    .dropdown-toggle {

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px !important;

        border: 0 !important;

        background: transparent !important;

        cursor: pointer !important;
    }


    /* DROPDOWN */

    .dropdown-menu {

        position: static !important;

        display: none !important;

        width: 100% !important;

        max-width: none !important;

        height: auto !important;

        max-height: none !important;

        padding: 0 !important;

        margin: 0 !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;

        background: transparent !important;

        color: var(--black) !important;

        border: 0 !important;

        border-radius: 0 !important;

        box-shadow: none !important;
    }


    /* DROPDOWN OPEN */

    .nav-dropdown.is-open .dropdown-menu {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;

        transform: none !important;
    }


    /* DROPDOWN LINKS */

    .dropdown-menu a {

        display: block !important;

        width: 100% !important;

        padding: 12px 20px !important;

        color: var(--black) !important;

        font-size: 11px !important;

        font-weight: 600 !important;

        line-height: 1.4 !important;

        letter-spacing: .08em !important;

        text-decoration: none !important;

        background: transparent !important;
    }


    .dropdown-menu a:hover {

        color: var(--blue) !important;

        background: #f4f7fb !important;
    }
}


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

@media (max-width: 576px) {

    .main-nav {

        top: 72px !important;

        max-height:
            calc(100vh - 72px) !important;
    }
}







}