/* =========================================================
   ELEPHANT RISE V8 — VIEWPORT SECTIONS + MOBILE CARD SLIDER
   ========================================================= */

:root {
    --er-header-desktop: 79px;
    --er-header-tablet: 76px;
    --er-header-mobile: 72px;

    --er-screen-desktop:
        calc(100svh - var(--er-header-desktop));

    --er-screen-tablet:
        calc(100svh - var(--er-header-tablet));

    --er-screen-mobile:
        calc(100svh - var(--er-header-mobile));
}

/* Chống mọi nguyên nhân gây tràn ngang */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

html {
    scroll-behavior: smooth;
    scroll-snap-type: y proximity;
    scroll-padding-top: var(--er-header-desktop);
}

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

img,
video,
svg,
canvas,
iframe {
    max-width: 100%;
}

.site-main,
main,
.page,
.section,
.container {
    max-width: 100%;
}

/* Container luôn nằm trong màn hình */
.container {
    width: min(
        var(--cms-container-width, 1200px),
        calc(100% - 40px)
    ) !important;

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

/* Mỗi section chính tối thiểu bằng một màn hình */
[data-cms-section] {
    width: 100%;
    max-width: 100%;

    min-height: var(--er-screen-desktop) !important;

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

    scroll-snap-align: start;
    scroll-margin-top: var(--er-header-desktop);

    padding-top: clamp(42px, 6vh, 76px) !important;
    padding-bottom: clamp(42px, 6vh, 76px) !important;

    overflow-x: clip;
}

/* Header không phải section toàn màn hình */
[data-cms-section="header"] {
    min-height: 0 !important;
    padding: 0 !important;
    display: block;
    scroll-snap-align: none;
}

/* Hero vừa chính xác phần màn hình dưới Header */
[data-cms-section="hero"] {
    height: var(--er-screen-desktop) !important;
    min-height: var(--er-screen-desktop) !important;
    max-height: var(--er-screen-desktop) !important;

    justify-content: center;
    overflow: hidden !important;

    padding-top: clamp(24px, 4vh, 54px) !important;
    padding-bottom: clamp(24px, 4vh, 54px) !important;
}

[data-cms-section="hero"] .hero-content {
    width: 100%;
    max-width: min(900px, 86vw);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

[data-cms-section="hero"] h1 {
    font-size: clamp(46px, 5.8vw, 88px) !important;
    line-height: 0.98 !important;
    margin-top: clamp(12px, 2vh, 22px) !important;
    margin-bottom: clamp(16px, 2.2vh, 28px) !important;
}

[data-cms-section="hero"] .hero-content > p {
    font-size: clamp(17px, 1.35vw, 21px) !important;
    line-height: 1.48 !important;
    margin-bottom: clamp(18px, 2.5vh, 30px) !important;
}

[data-cms-section="hero"] .actions {
    margin-top: 0 !important;
}

/* Tiêu đề section gọn để nội dung vừa màn hình */
[data-cms-section] .section-head {
    margin-bottom: clamp(22px, 3.5vh, 42px) !important;
}

/* Tablet */
@media (max-width: 1024px) {
    html {
        scroll-padding-top: var(--er-header-tablet);
    }

    .container {
        width: calc(100% - 36px) !important;
    }

    [data-cms-section] {
        min-height: var(--er-screen-tablet) !important;
        scroll-margin-top: var(--er-header-tablet);

        padding-top: clamp(34px, 5vh, 58px) !important;
        padding-bottom: clamp(34px, 5vh, 58px) !important;
    }

    [data-cms-section="hero"] {
        height: var(--er-screen-tablet) !important;
        min-height: var(--er-screen-tablet) !important;
        max-height: var(--er-screen-tablet) !important;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 700px) {
    :root {
        --er-mobile-side: 18px;
        --er-card-width: calc(100vw - 54px);
    }

    html {
        scroll-snap-type: y proximity;
        scroll-padding-top: var(--er-header-mobile);
    }

    body {
        width: 100vw;
        max-width: 100vw;
        overflow-x: clip;
    }

    .container {
        width: calc(100% - 36px) !important;
        max-width: calc(100% - 36px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    [data-cms-section] {
        width: 100%;
        min-height: var(--er-screen-mobile) !important;
        scroll-margin-top: var(--er-header-mobile);

        padding-top: clamp(28px, 4.5vh, 42px) !important;
        padding-right: var(--er-mobile-side) !important;
        padding-bottom: clamp(28px, 4.5vh, 42px) !important;
        padding-left: var(--er-mobile-side) !important;
    }

    [data-cms-section="hero"] {
        height: var(--er-screen-mobile) !important;
        min-height: var(--er-screen-mobile) !important;
        max-height: var(--er-screen-mobile) !important;

        padding-top: clamp(18px, 3vh, 32px) !important;
        padding-bottom: clamp(18px, 3vh, 32px) !important;

        background-position: center center !important;
    }

    [data-cms-section="hero"] .hero-content {
        width: 100%;
        max-width: 100% !important;
    }

    [data-cms-section="hero"] .eyebrow {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    [data-cms-section="hero"] h1 {
        font-size: clamp(34px, 10.8vw, 54px) !important;
        line-height: 0.98 !important;
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        font-size: clamp(15px, 4vw, 17px) !important;
        line-height: 1.43 !important;
        margin-bottom: 18px !important;
    }

    [data-cms-section="hero"] .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 9px !important;
    }

    [data-cms-section="hero"] .actions .btn {
        width: 100% !important;
        min-height: 45px !important;
        justify-content: center !important;
    }

    [data-cms-section="hero"] .scroll,
    [data-cms-section="hero"] .scroll-hint,
    [data-cms-section="hero"] [class*="scroll"] {
        display: none !important;
    }

    /* -----------------------------------------
       CARD SLIDER NGANG TRÊN MOBILE
       ----------------------------------------- */

    [data-cms-section="ecosystem"] .grid-3,
    [data-cms-section="latest"] .grid-3,
    [data-cms-section="values"] .values,
    [data-cms-section="values"] .grid-3 {
        display: grid !important;
        grid-auto-flow: column !important;
        grid-auto-columns: var(--er-card-width) !important;
        grid-template-columns: none !important;

        width: calc(100vw - var(--er-mobile-side)) !important;
        max-width: none !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        margin-right: calc(var(--er-mobile-side) * -1) !important;
        padding-right: var(--er-mobile-side) !important;
        padding-bottom: 14px !important;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;

        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }

    [data-cms-section="ecosystem"] .grid-3::-webkit-scrollbar,
    [data-cms-section="latest"] .grid-3::-webkit-scrollbar,
    [data-cms-section="values"] .values::-webkit-scrollbar,
    [data-cms-section="values"] .grid-3::-webkit-scrollbar {
        display: none;
    }

    [data-cms-section="ecosystem"] .grid-3 > *,
    [data-cms-section="latest"] .grid-3 > *,
    [data-cms-section="values"] .values > *,
    [data-cms-section="values"] .grid-3 > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;

        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Card không quá cao */
    [data-cms-section="ecosystem"] .card,
    [data-cms-section="latest"] .news-card,
    [data-cms-section="values"] .value {
        min-height: 0 !important;
        height: auto !important;
    }

    [data-cms-section] .section-head {
        margin-bottom: 20px !important;
    }

    /* Footer không được rộng hơn màn hình */
    [data-cms-section="footer"] {
        width: 100%;
        max-width: 100%;
    }

    [data-cms-section="footer"] .footer-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 22px !important;
    }

    [data-cms-section="footer"] .footer-grid > * {
        width: 100%;
        min-width: 0;
    }

    /* Chuỗi dài và URL không đẩy rộng màn hình */
    [data-cms-section] h1,
    [data-cms-section] h2,
    [data-cms-section] h3,
    [data-cms-section] h4,
    [data-cms-section] p,
    [data-cms-section] a,
    [data-cms-section] span {
        overflow-wrap: anywhere;
        word-break: normal;
    }
}

/* Mobile thấp */
@media (max-width: 700px) and (max-height: 720px) {
    [data-cms-section] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    [data-cms-section="hero"] {
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    [data-cms-section="hero"] h1 {
        font-size: clamp(31px, 9.5vw, 45px) !important;
        margin-top: 7px !important;
        margin-bottom: 11px !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        font-size: 14px !important;
        line-height: 1.36 !important;
        margin-bottom: 13px !important;
    }

    [data-cms-section="hero"] .actions .btn {
        min-height: 41px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
        scroll-snap-type: none;
    }
}

/* =========================================================
   FIX: HEADER KHÔNG PHẢI FULL-SCREEN SECTION
   FIX: CHỐNG TRÀN NGANG DESKTOP VÀ MOBILE
   ========================================================= */

/* Header tuyệt đối không được nhận chiều cao của section */
html body header.site-header[data-cms-section="header"],
html body [data-cms-section="header"].site-header {
    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 0 !important;
    margin: 0 !important;

    display: block !important;
    overflow: visible !important;

    scroll-snap-align: none !important;
    scroll-margin-top: 0 !important;
}

/* Chiều cao thật của thanh điều hướng */
.site-header .nav {
    width: 100% !important;
    max-width: 100% !important;

    min-height: 79px !important;
    height: 79px !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Chống tràn ngang toàn trang */
html {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

.site-header,
.site-main,
main,
section,
footer,
.container {
    max-width: 100% !important;
}

/* Tablet */
@media (max-width: 1024px) {
    html body header.site-header[data-cms-section="header"],
    html body [data-cms-section="header"].site-header {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 !important;
    }

    .site-header .nav {
        height: 76px !important;
        min-height: 76px !important;
    }
}

/* Mobile */
@media (max-width: 700px) {
    html body header.site-header[data-cms-section="header"],
    html body [data-cms-section="header"].site-header {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 !important;
        margin: 0 !important;

        display: block !important;
        justify-content: initial !important;

        overflow: visible !important;
    }

    .site-header .nav {
        width: 100% !important;
        max-width: 100% !important;

        height: 72px !important;
        min-height: 72px !important;
        max-height: 72px !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .site-header .brand,
    .site-header .brand img {
        max-height: 48px !important;
        width: auto !important;
    }

    /*
     * Không dùng 100vw cho slider vì 100vw có thể rộng hơn
     * vùng hiển thị thực tế và gây tràn ngang.
     */
    [data-cms-section="ecosystem"] .grid-3,
    [data-cms-section="latest"] .grid-3,
    [data-cms-section="values"] .values,
    [data-cms-section="values"] .grid-3 {
        width: calc(100% + 18px) !important;
        max-width: calc(100% + 18px) !important;

        grid-auto-columns: calc(100% - 36px) !important;

        margin-left: 0 !important;
        margin-right: -18px !important;
    }

    [data-cms-section] {
        width: 100% !important;
        max-width: 100% !important;
    }

    [data-cms-section] > .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    img,
    video,
    svg,
    iframe {
        max-width: 100% !important;
    }
}

/* Desktop: loại bỏ tràn nhẹ do 100vw hoặc transform */
@media (min-width: 701px) {
    [data-cms-section] {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    .container {
        max-width: min(
            var(--cms-container-width, 1200px),
            calc(100% - 40px)
        ) !important;
    }
}


/* =========================================================
   ELEPHANT RISE V8 — MOBILE PRO CORRECTION
   Ghi đè toàn bộ các rule mobile chưa phù hợp trước đó
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --er-mobile-header: 74px;
        --er-mobile-edge: 20px;
        --er-mobile-screen:
            calc(100svh - var(--er-mobile-header));
    }

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        position: relative;
    }

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

    header.site-header,
    .site-header,
    [data-cms-section="header"] {
        width: 100% !important;
        height: var(--er-mobile-header) !important;
        min-height: var(--er-mobile-header) !important;
        max-height: var(--er-mobile-header) !important;

        padding: 0 !important;
        margin: 0 !important;

        display: block !important;
        position: relative !important;

        background: #fffaf0 !important;
        overflow: visible !important;

        z-index: 1000 !important;
    }

    .site-header .nav {
        width: 100% !important;
        height: var(--er-mobile-header) !important;
        min-height: var(--er-mobile-header) !important;
        max-height: var(--er-mobile-header) !important;

        padding: 0 var(--er-mobile-edge) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        overflow: visible !important;
    }

    /* Bắt buộc hiện lại logo */
    .site-header .brand {
        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: 190px !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .brand img,
    .site-header .brand svg {
        display: block !important;

        width: auto !important;
        height: 45px !important;
        max-width: 185px !important;
        max-height: 45px !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Nút hamburger */
    .site-header .menu-toggle,
    .site-header button[aria-label*="menu" i],
    .site-header button[aria-expanded] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;

        margin-left: auto !important;
        padding: 0 !important;

        border: 1px solid rgba(48, 30, 17, .45) !important;
        border-radius: 8px !important;

        background: rgba(255, 255, 255, .55) !important;
        color: #2f1d12 !important;

        position: relative !important;
        z-index: 1002 !important;
    }

    /*
     * Menu mở thành bảng nổi rõ ràng.
     * Không để menu bị nhét vào chiều cao Header.
     */
    .site-header .nav-links,
    .site-header nav > ul {
        position: absolute !important;
        top: calc(var(--er-mobile-header) + 8px) !important;
        left: var(--er-mobile-edge) !important;
        right: var(--er-mobile-edge) !important;

        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: calc(100svh - 100px) !important;

        padding: 12px !important;
        margin: 0 !important;

        flex-direction: column !important;
        align-items: stretch !important;
        gap: 5px !important;

        overflow-y: auto !important;

        border: 1px solid rgba(48, 30, 17, .15) !important;
        border-radius: 16px !important;

        background: rgba(255, 250, 240, .98) !important;
        box-shadow: 0 22px 60px rgba(48, 30, 17, .22) !important;

        z-index: 1001 !important;
    }

    .site-header .nav-links a,
    .site-header nav > ul a {
        display: flex !important;
        align-items: center !important;

        width: 100% !important;
        min-height: 48px !important;

        padding: 11px 14px !important;

        border-radius: 10px !important;

        font-size: 16px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /* =====================================================
       CẤU TRÚC SECTION MOBILE
       ===================================================== */

    main,
    .site-main {
        width: 100% !important;
        max-width: 100% !important;
    }

    [data-cms-section]:not([data-cms-section="header"]) {
        width: 100% !important;
        max-width: 100% !important;

        min-height: var(--er-mobile-screen) !important;
        height: auto !important;
        max-height: none !important;

        padding:
            38px
            var(--er-mobile-edge)
            38px !important;

        justify-content: center !important;
        overflow: hidden !important;
    }

    [data-cms-section] > .container {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

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

    [data-cms-section="hero"] {
        height: var(--er-mobile-screen) !important;
        min-height: var(--er-mobile-screen) !important;
        max-height: var(--er-mobile-screen) !important;

        padding:
            clamp(26px, 4vh, 42px)
            var(--er-mobile-edge) !important;

        background-position: center center !important;
    }

    [data-cms-section="hero"] .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    [data-cms-section="hero"] .eyebrow {
        font-size: 11px !important;
        line-height: 1.25 !important;
        letter-spacing: .14em !important;
    }

    [data-cms-section="hero"] h1 {
        max-width: 100% !important;

        font-size: clamp(39px, 11vw, 55px) !important;
        line-height: .97 !important;

        margin:
            13px
            0
            17px !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        max-width: 100% !important;

        font-size: 16px !important;
        line-height: 1.45 !important;

        margin-bottom: 21px !important;
    }

    [data-cms-section="hero"] .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 10px !important;
    }

    [data-cms-section="hero"] .actions .btn {
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;

        padding: 0 18px !important;

        justify-content: center !important;

        border-radius: 999px !important;

        font-size: 16px !important;
        white-space: nowrap !important;
    }

    /* =====================================================
       TIÊU ĐỀ SECTION
       ===================================================== */

    [data-cms-section] .section-head {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 16px !important;

        width: 100% !important;

        margin-bottom: 27px !important;
    }

    [data-cms-section] .section-head > div {
        min-width: 0 !important;
    }

    [data-cms-section] .section-head h2 {
        max-width: 100% !important;

        font-size: clamp(42px, 11.5vw, 61px) !important;
        line-height: .98 !important;

        margin: 0 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
    }

    /*
     * View all luôn nằm trên một dòng,
     * không còn rơi từng chữ như ảnh.
     */
    [data-cms-section] .section-head > a,
    [data-cms-section] .section-head .view-all,
    [data-cms-section="latest"] .section-head a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: 102px !important;
        max-width: none !important;
        height: 46px !important;
        aspect-ratio: auto !important;

        padding: 0 16px !important;

        border-radius: 999px !important;

        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    /* =====================================================
       ECOSYSTEM CARD — SLIDER NGANG
       ===================================================== */

    [data-cms-section="ecosystem"] .grid-3 {
        display: flex !important;

        width: calc(100% + var(--er-mobile-edge)) !important;
        max-width: none !important;

        margin-right: calc(var(--er-mobile-edge) * -1) !important;
        padding-right: var(--er-mobile-edge) !important;
        padding-bottom: 12px !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    [data-cms-section="ecosystem"] .grid-3::-webkit-scrollbar {
        display: none !important;
    }

    [data-cms-section="ecosystem"] .grid-3 > * {
        flex:
            0
            0
            calc(100% - 28px) !important;

        width: calc(100% - 28px) !important;
        min-width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    [data-cms-section="ecosystem"] .card {
        min-height: 390px !important;
        height: 390px !important;
        max-height: 390px !important;

        padding: 32px 28px !important;

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

        border-radius: 24px !important;
    }

    [data-cms-section="ecosystem"] .card .icon {
        margin-bottom: 25px !important;
    }

    [data-cms-section="ecosystem"] .card h3 {
        font-size: 25px !important;
        line-height: 1.15 !important;
    }

    [data-cms-section="ecosystem"] .card p {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }

    /* =====================================================
       CORE VALUES
       Không dùng cấu trúc slider sai trước đó
       ===================================================== */

    [data-cms-section="values"] {
        min-height: var(--er-mobile-screen) !important;
        height: var(--er-mobile-screen) !important;
        max-height: var(--er-mobile-screen) !important;

        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    [data-cms-section="values"] .values,
    [data-cms-section="values"] .values-list,
    [data-cms-section="values"] .grid-3 {
        display: flex !important;
        flex-direction: row !important;

        width: calc(100% + var(--er-mobile-edge)) !important;
        max-width: none !important;

        margin-right: calc(var(--er-mobile-edge) * -1) !important;
        padding-right: var(--er-mobile-edge) !important;
        padding-bottom: 12px !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    [data-cms-section="values"] .values::-webkit-scrollbar,
    [data-cms-section="values"] .values-list::-webkit-scrollbar,
    [data-cms-section="values"] .grid-3::-webkit-scrollbar {
        display: none !important;
    }

    [data-cms-section="values"] .value {
        flex:
            0
            0
            calc(100% - 24px) !important;

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

        min-height: 480px !important;
        height: 480px !important;
        max-height: 480px !important;

        padding: 34px 24px !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        border:
            1px solid
            rgba(255, 255, 255, .12) !important;

        border-radius: 24px !important;
    }

    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        font-size: clamp(40px, 10vw, 53px) !important;
        line-height: .99 !important;
    }

    [data-cms-section="values"] .value .number,
    [data-cms-section="values"] .value [class*="number"] {
        position: static !important;

        margin-left: auto !important;

        font-size: 56px !important;
        line-height: 1 !important;
    }

    /* =====================================================
       LATEST NEWS — SLIDER NGANG
       ===================================================== */

    [data-cms-section="latest"] .grid-3 {
        display: flex !important;

        width: calc(100% + var(--er-mobile-edge)) !important;
        max-width: none !important;

        margin-right: calc(var(--er-mobile-edge) * -1) !important;
        padding-right: var(--er-mobile-edge) !important;
        padding-bottom: 12px !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    [data-cms-section="latest"] .grid-3::-webkit-scrollbar {
        display: none !important;
    }

    [data-cms-section="latest"] .grid-3 > * {
        flex:
            0
            0
            calc(100% - 28px) !important;

        width: calc(100% - 28px) !important;
        min-width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    [data-cms-section="latest"] .news-card {
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    [data-cms-section="latest"] .news-card img,
    [data-cms-section="latest"] .news-card .news-image {
        width: 100% !important;
        height: 250px !important;

        object-fit: cover !important;
    }

    [data-cms-section="latest"] .news-card .content,
    [data-cms-section="latest"] .news-card-body {
        padding: 27px 24px !important;
    }

    /* =====================================================
       FOOTER MOBILE — GỌN HƠN
       ===================================================== */

    [data-cms-section="footer"] {
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;

        padding:
            52px
            var(--er-mobile-edge)
            30px !important;
    }

    [data-cms-section="footer"] .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        width: 100% !important;
        gap: 34px 22px !important;
    }

    [data-cms-section="footer"] .footer-grid > :first-child {
        grid-column: 1 / -1 !important;
    }

    [data-cms-section="footer"] .footer-logo {
        width: auto !important;
        height: 53px !important;
        max-width: 220px !important;
    }

    [data-cms-section="footer"] p,
    [data-cms-section="footer"] a {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    [data-cms-section="footer"] .footer-cta,
    [data-cms-section="footer"] [class*="cta"] {
        grid-column: 1 / -1 !important;

        padding: 28px 20px !important;
        margin-top: 5px !important;

        border-radius: 22px !important;
    }

    [data-cms-section="footer"] .footer-cta h2,
    [data-cms-section="footer"] .footer-cta h3,
    [data-cms-section="footer"] [class*="cta"] h2,
    [data-cms-section="footer"] [class*="cta"] h3 {
        font-size: 37px !important;
        line-height: 1.02 !important;
    }

    [data-cms-section="footer"] .btn {
        width: 100% !important;
        min-height: 50px !important;

        justify-content: center !important;

        white-space: nowrap !important;
    }
}

/* Màn hình mobile thấp */
@media (max-width: 700px) and (max-height: 720px) {

    [data-cms-section="hero"] h1 {
        font-size: clamp(35px, 9.5vw, 48px) !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        font-size: 14px !important;
        line-height: 1.38 !important;
    }

    [data-cms-section="hero"] .actions .btn {
        height: 45px !important;
        min-height: 45px !important;
    }

    [data-cms-section="ecosystem"] .card {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;
    }

    [data-cms-section="values"] .value {
        height: 420px !important;
        min-height: 420px !important;
        max-height: 420px !important;
    }
}

/* END ELEPHANT RISE V8 — MOBILE PRO CORRECTION */

/* =========================================================
   ELEPHANT RISE V8 — MOBILE FINAL FIX
   Menu hiển thị ngoài + Hero cân lại + Core Values slider
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --er-mobile-logo-row: 72px;
        --er-mobile-menu-row: 48px;
        --er-mobile-header-total:
            calc(
                var(--er-mobile-logo-row)
                + var(--er-mobile-menu-row)
            );
        --er-mobile-screen:
            calc(
                100svh
                - var(--er-mobile-header-total)
            );
    }

    /* =====================================================
       HEADER MOBILE HAI HÀNG
       Hàng 1: logo
       Hàng 2: menu nằm ngoài, trượt ngang
       ===================================================== */

    header.site-header,
    .site-header,
    [data-cms-section="header"] {
        width: 100% !important;

        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        padding: 0 !important;
        margin: 0 !important;

        background: #fffaf0 !important;

        overflow: visible !important;
        position: relative !important;
        z-index: 1000 !important;
    }

    .site-header .nav {
        width: 100% !important;

        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows:
            var(--er-mobile-logo-row)
            var(--er-mobile-menu-row) !important;

        align-items: center !important;

        overflow: visible !important;
    }

    .site-header .brand {
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: 190px !important;

        margin-left: 18px !important;
        margin-right: 18px !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .brand img,
    .site-header .brand svg {
        display: block !important;

        width: auto !important;
        height: 45px !important;
        max-width: 185px !important;
        max-height: 45px !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
     * Ẩn hamburger vì menu được đưa ra ngoài.
     */
    .site-header .menu-toggle,
    .site-header button[aria-label*="menu" i],
    .site-header button[aria-expanded] {
        display: none !important;
    }

    /*
     * Menu luôn hiện trên hàng thứ hai.
     * Có thể vuốt ngang nếu màn hình hẹp.
     */
    .site-header .nav-links,
    .site-header nav > ul {
        grid-row: 2 !important;

        position: static !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        width: 100% !important;
        height: var(--er-mobile-menu-row) !important;
        max-height: var(--er-mobile-menu-row) !important;

        padding: 0 14px !important;
        margin: 0 !important;

        gap: 6px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        border: 0 !important;
        border-top:
            1px solid rgba(48, 30, 17, .10) !important;
        border-radius: 0 !important;

        background: rgba(255, 250, 240, .98) !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;

        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .site-header .nav-links::-webkit-scrollbar,
    .site-header nav > ul::-webkit-scrollbar {
        display: none !important;
    }

    .site-header .nav-links li,
    .site-header nav > ul li {
        flex: 0 0 auto !important;
        display: block !important;
    }

    .site-header .nav-links a,
    .site-header nav > ul a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;
        min-width: max-content !important;
        height: 36px !important;
        min-height: 36px !important;

        padding: 0 13px !important;

        border-radius: 999px !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        background: transparent !important;
        color: #2f1d12 !important;
    }

    .site-header .nav-links a:hover,
    .site-header .nav-links a.active,
    .site-header nav > ul a:hover,
    .site-header nav > ul a.active {
        background: #2f1d12 !important;
        color: #fffaf0 !important;
    }

    /*
     * Những nút riêng trong Header vẫn nằm ở menu ngang.
     */
    .site-header .nav-actions,
    .site-header .header-actions {
        grid-row: 2 !important;
    }

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

    [data-cms-section="hero"] {
        height: var(--er-mobile-screen) !important;
        min-height: var(--er-mobile-screen) !important;
        max-height: var(--er-mobile-screen) !important;

        padding:
            24px
            20px
            22px !important;

        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;

        /*
         * Đưa trọng tâm nền lên trên.
         * Không để hình voi đè trực tiếp vào chữ.
         */
        background-position: center 28% !important;
        background-size: cover !important;

        overflow: hidden !important;
    }

    /*
     * Làm vùng chữ rõ hơn và gọn.
     */
    [data-cms-section="hero"] .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding:
            18px
            0
            0 !important;

        position: relative !important;
        z-index: 3 !important;
    }

    [data-cms-section="hero"] .eyebrow {
        font-size: 10px !important;
        line-height: 1.25 !important;
        letter-spacing: .13em !important;

        margin-bottom: 9px !important;
    }

    [data-cms-section="hero"] h1 {
        width: 100% !important;
        max-width: 100% !important;

        font-size: clamp(37px, 10.5vw, 52px) !important;
        line-height: .96 !important;

        margin:
            0
            0
            14px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        width: 100% !important;

        font-size: 15px !important;
        line-height: 1.4 !important;

        margin:
            0
            0
            17px !important;
    }

    [data-cms-section="hero"] .actions {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;

        gap: 9px !important;
    }

    [data-cms-section="hero"] .actions .btn {
        width: 100% !important;
        min-width: 0 !important;

        height: 48px !important;
        min-height: 48px !important;

        padding: 0 11px !important;

        font-size: 13px !important;
        line-height: 1 !important;

        white-space: nowrap !important;

        border-radius: 999px !important;
    }

    /*
     * Lớp tối nhẹ ở dưới Hero để chữ luôn đọc được.
     */
    [data-cms-section="hero"]::after {
        content: "" !important;

        position: absolute !important;
        inset:
            32%
            0
            0 !important;

        background:
            linear-gradient(
                to bottom,
                rgba(42, 25, 12, 0),
                rgba(42, 25, 12, .42) 45%,
                rgba(42, 25, 12, .75) 100%
            ) !important;

        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* =====================================================
       CORE VALUES MOBILE
       Mỗi giá trị là một card ngang đầy đủ
       ===================================================== */

    [data-cms-section="values"] {
        width: 100% !important;

        height: auto !important;
        min-height: var(--er-mobile-screen) !important;
        max-height: none !important;

        padding:
            34px
            20px
            34px !important;

        overflow: hidden !important;
    }

    [data-cms-section="values"] > .container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /*
     * Tiêu đề chung của Core Values.
     */
    [data-cms-section="values"] > .container > .eyebrow,
    [data-cms-section="values"] .section-head .eyebrow {
        font-size: 11px !important;
        line-height: 1.25 !important;
        letter-spacing: .13em !important;

        margin-bottom: 18px !important;
    }

    /*
     * Slider ngang.
     */
    [data-cms-section="values"] .values,
    [data-cms-section="values"] .values-list,
    [data-cms-section="values"] .grid-3 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% + 20px) !important;
        max-width: none !important;

        margin:
            0
            -20px
            0
            0 !important;

        padding:
            0
            20px
            12px
            0 !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;

        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    [data-cms-section="values"] .values::-webkit-scrollbar,
    [data-cms-section="values"] .values-list::-webkit-scrollbar,
    [data-cms-section="values"] .grid-3::-webkit-scrollbar {
        display: none !important;
    }

    /*
     * Reset toàn bộ lỗi ép dọc của từng value.
     */
    [data-cms-section="values"] .value {
        flex:
            0
            0
            calc(100% - 28px) !important;

        width: calc(100% - 28px) !important;
        min-width: calc(100% - 28px) !important;
        max-width: calc(100% - 28px) !important;

        height: 440px !important;
        min-height: 440px !important;
        max-height: 440px !important;

        padding: 28px 25px !important;
        margin: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto 1fr auto !important;

        align-items: start !important;
        align-content: start !important;

        gap: 20px 16px !important;

        border:
            1px solid
            rgba(255, 255, 255, .13) !important;
        border-radius: 24px !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        overflow: hidden !important;

        writing-mode: horizontal-tb !important;
    }

    /*
     * Reset mọi thành phần con về bố cục ngang.
     */
    [data-cms-section="values"] .value > *,
    [data-cms-section="values"] .value h1,
    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3,
    [data-cms-section="values"] .value p,
    [data-cms-section="values"] .value span,
    [data-cms-section="values"] .value div {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        position: static !important;
        inset: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    /*
     * Số thứ tự.
     */
    [data-cms-section="values"] .value .number,
    [data-cms-section="values"] .value [class*="number"],
    [data-cms-section="values"] .value > :first-child {
        grid-column: 2 !important;
        grid-row: 1 !important;

        justify-self: end !important;

        font-size: 48px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #f4cf55 !important;
    }

    /*
     * Tiêu đề value.
     */
    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        align-self: start !important;

        font-size: clamp(34px, 9vw, 45px) !important;
        font-weight: 700 !important;
        line-height: 1.01 !important;

        margin: 0 !important;

        color: #fff !important;
    }

    /*
     * Nội dung value.
     */
    [data-cms-section="values"] .value p {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;

        align-self: end !important;

        font-size: 16px !important;
        line-height: 1.45 !important;

        margin: 0 !important;

        color: rgba(255, 255, 255, .72) !important;
    }
}

/* Điện thoại thấp */
@media (max-width: 700px) and (max-height: 720px) {

    [data-cms-section="hero"] h1 {
        font-size: clamp(33px, 9vw, 44px) !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    [data-cms-section="hero"] .actions .btn {
        height: 42px !important;
        min-height: 42px !important;

        font-size: 12px !important;
    }

    [data-cms-section="values"] .value {
        height: 390px !important;
        min-height: 390px !important;
        max-height: 390px !important;
    }

    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        font-size: 34px !important;
    }
}

/* END ELEPHANT RISE V8 — MOBILE FINAL FIX */

/* =========================================================
   ELEPHANT RISE V8 — MOBILE CLEAN FINAL
   Menu 2 hàng + Hero cân giữa + Core Values 3 card
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --er-mobile-logo-row: 70px;
        --er-mobile-menu-row: 88px;
        --er-mobile-header-total: 158px;
        --er-mobile-content-height:
            calc(100svh - var(--er-mobile-header-total));
    }

    /* =====================================================
       HEADER VÀ MENU HAI HÀNG
       ===================================================== */

    header.site-header,
    .site-header,
    [data-cms-section="header"] {
        width: 100% !important;
        max-width: 100% !important;

        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        padding: 0 !important;
        margin: 0 !important;

        display: block !important;

        background: #fffaf0 !important;
        overflow: hidden !important;

        position: relative !important;
        z-index: 1000 !important;
    }

    .site-header .nav {
        width: 100% !important;
        max-width: 100% !important;

        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows:
            var(--er-mobile-logo-row)
            var(--er-mobile-menu-row) !important;

        overflow: hidden !important;
    }

    .site-header .brand {
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: 190px !important;

        margin: 0 20px !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .brand img,
    .site-header .brand svg {
        display: block !important;

        width: auto !important;
        height: 44px !important;
        max-width: 185px !important;
        max-height: 44px !important;

        object-fit: contain !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    /*
     * Menu đã hiện trực tiếp nên ẩn toàn bộ nút hamburger.
     * Điều này cũng xóa thanh ngang đang rơi xuống Hero.
     */
    .site-header button,
    .site-header .menu-toggle,
    .site-header .nav-toggle,
    .site-header .mobile-menu-toggle,
    .site-header .hamburger,
    .site-header [aria-controls],
    .site-header [aria-expanded] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }

    /*
     * Menu 3 cột × 2 hàng.
     * Không cần vuốt ngang.
     */
    .site-header .nav-links,
    .site-header nav > ul {
        grid-row: 2 !important;

        position: static !important;
        inset: auto !important;

        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: 36px !important;

        align-items: center !important;

        width: 100% !important;
        max-width: 100% !important;
        height: var(--er-mobile-menu-row) !important;
        max-height: var(--er-mobile-menu-row) !important;

        padding: 8px 10px 9px !important;
        margin: 0 !important;

        gap: 5px 6px !important;

        overflow: hidden !important;

        border: 0 !important;
        border-top:
            1px solid rgba(48, 30, 17, .10) !important;
        border-radius: 0 !important;

        background: #fffaf0 !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .site-header .nav-links li,
    .site-header nav > ul li {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .nav-links a,
    .site-header nav > ul a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 36px !important;
        min-height: 36px !important;

        padding: 0 5px !important;

        border-radius: 8px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1.05 !important;

        text-align: center !important;
        white-space: nowrap !important;

        color: #2f1d12 !important;
        background: transparent !important;
    }

    .site-header .nav-links a.active,
    .site-header .nav-links a:hover,
    .site-header nav > ul a.active,
    .site-header nav > ul a:hover {
        color: #fffaf0 !important;
        background: #2f1d12 !important;
    }

    /*
     * Mục dài như ELP Exchange thu nhỏ nhẹ.
     */
    .site-header .nav-links a[href*="elp"],
    .site-header nav > ul a[href*="elp"] {
        font-size: 11px !important;
    }

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

    [data-cms-section="hero"] {
        width: 100% !important;

        height: var(--er-mobile-content-height) !important;
        min-height: var(--er-mobile-content-height) !important;
        max-height: var(--er-mobile-content-height) !important;

        padding: 22px 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        /*
         * Đẩy hình nền lên để con voi không đè chữ.
         */
        background-position: center 12% !important;
        background-size: cover !important;

        overflow: hidden !important;
        position: relative !important;
    }

    [data-cms-section="hero"] .hero-content {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        z-index: 4 !important;

        /*
         * Đưa toàn bộ nội dung lên nhẹ.
         */
        transform: translateY(-3vh) !important;
    }

    [data-cms-section="hero"] .eyebrow {
        font-size: 10px !important;
        line-height: 1.25 !important;
        letter-spacing: .12em !important;

        margin: 0 0 8px !important;
    }

    [data-cms-section="hero"] h1 {
        width: 100% !important;

        font-size: clamp(37px, 10.3vw, 50px) !important;
        line-height: .97 !important;

        margin: 0 0 13px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        width: 100% !important;

        font-size: 14px !important;
        line-height: 1.38 !important;

        margin: 0 0 16px !important;
    }

    [data-cms-section="hero"] .actions {
        width: 100% !important;

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

        gap: 9px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /*
     * Căn chữ chính giữa tuyệt đối trong nút.
     */
    [data-cms-section="hero"] .actions .btn,
    [data-cms-section="hero"] .btn-primary,
    [data-cms-section="hero"] .btn-ghost {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;

        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;

        padding: 0 10px !important;
        margin: 0 !important;

        border-radius: 999px !important;

        font-size: 12px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: center !important;
        vertical-align: middle !important;
        white-space: nowrap !important;

        transform: none !important;
    }

    [data-cms-section="hero"] .actions .btn > *,
    [data-cms-section="hero"] .btn-primary > *,
    [data-cms-section="hero"] .btn-ghost > * {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    [data-cms-section="hero"]::after {
        content: "" !important;

        position: absolute !important;
        inset: 28% 0 0 !important;

        background:
            linear-gradient(
                to bottom,
                rgba(43, 25, 11, 0),
                rgba(43, 25, 11, .30) 45%,
                rgba(43, 25, 11, .72) 100%
            ) !important;

        pointer-events: none !important;
        z-index: 2 !important;
    }

    /* =====================================================
       CORE VALUES — 3 CARD VUỐT NGANG
       ===================================================== */

    [data-cms-section="values"] {
        width: 100% !important;
        max-width: 100% !important;

        height: var(--er-mobile-content-height) !important;
        min-height: var(--er-mobile-content-height) !important;
        max-height: var(--er-mobile-content-height) !important;

        padding: 28px 20px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        overflow: hidden !important;
    }

    [data-cms-section="values"] > .container {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    [data-cms-section="values"] .eyebrow {
        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .13em !important;

        margin: 0 0 17px !important;
    }

    /*
     * Tự tìm phần tử đang chứa trực tiếp các .value.
     * :has được hỗ trợ trên Chrome mobile hiện tại.
     */
    [data-cms-section="values"]
    :has(> .value) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% + 20px) !important;
        max-width: none !important;

        margin: 0 -20px 0 0 !important;
        padding: 0 20px 10px 0 !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;

        overscroll-behavior-x: contain !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: none !important;
    }

    [data-cms-section="values"]
    :has(> .value)::-webkit-scrollbar {
        display: none !important;
    }

    /*
     * Mỗi .value trở thành một card hoàn chỉnh.
     */
    [data-cms-section="values"] .value {
        flex:
            0
            0
            calc(100% - 26px) !important;

        width: calc(100% - 26px) !important;
        min-width: calc(100% - 26px) !important;
        max-width: calc(100% - 26px) !important;

        height: 445px !important;
        min-height: 445px !important;
        max-height: 445px !important;

        margin: 0 !important;
        padding: 28px 24px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: space-between !important;

        gap: 18px !important;

        border:
            1px solid
            rgba(255, 255, 255, .13) !important;
        border-radius: 24px !important;

        overflow: hidden !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        writing-mode: horizontal-tb !important;
    }

    /*
     * Reset toàn bộ lỗi width hẹp, grid và vị trí cũ.
     */
    [data-cms-section="values"] .value *,
    [data-cms-section="values"] .value > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        position: static !important;
        inset: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    [data-cms-section="values"] .value .number,
    [data-cms-section="values"] .value [class*="number"] {
        align-self: flex-end !important;

        font-size: 48px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        color: #f4cf55 !important;
    }

    [data-cms-section="values"] .value h1,
    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        font-size: clamp(34px, 8.8vw, 43px) !important;
        font-weight: 700 !important;
        line-height: 1.01 !important;

        margin: 0 !important;

        color: #fff !important;
    }

    [data-cms-section="values"] .value p {
        font-size: 15px !important;
        line-height: 1.45 !important;

        margin: 0 !important;

        color: rgba(255, 255, 255, .72) !important;
    }
}

/* Điện thoại thấp hơn */
@media (max-width: 700px) and (max-height: 720px) {

    :root {
        --er-mobile-logo-row: 64px;
        --er-mobile-menu-row: 82px;
        --er-mobile-header-total: 146px;
    }

    [data-cms-section="hero"] .hero-content {
        transform: translateY(-1vh) !important;
    }

    [data-cms-section="hero"] h1 {
        font-size: 34px !important;
    }

    [data-cms-section="hero"] .hero-content > p {
        font-size: 13px !important;
    }

    [data-cms-section="hero"] .actions .btn {
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
    }

    [data-cms-section="values"] .value {
        height: 385px !important;
        min-height: 385px !important;
        max-height: 385px !important;
    }

    [data-cms-section="values"] .value h1,
    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        font-size: 32px !important;
    }
}

/* END ELEPHANT RISE V8 — MOBILE CLEAN FINAL */

/* =========================================================
   ELEPHANT RISE V8 — MOBILE STICKY MENU + CARD CONTROLS
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --er-mobile-logo-row: 68px;
        --er-mobile-menu-row: 78px;
        --er-mobile-header-total: 146px;
        --er-mobile-screen:
            calc(100svh - var(--er-mobile-header-total));
    }

    /* =====================================================
       HEADER CỐ ĐỊNH TRÊN CÙNG
       ===================================================== */

    header.site-header,
    .site-header,
    [data-cms-section="header"] {
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100% !important;

        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        margin: 0 !important;
        padding: 0 !important;

        background: rgba(255, 250, 240, .98) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;

        border-bottom:
            1px solid rgba(48, 30, 17, .12) !important;

        overflow: hidden !important;
        z-index: 9999 !important;
    }

    .site-header .nav {
        width: 100% !important;
        height: var(--er-mobile-header-total) !important;
        min-height: var(--er-mobile-header-total) !important;
        max-height: var(--er-mobile-header-total) !important;

        padding: 0 !important;

        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows:
            var(--er-mobile-logo-row)
            var(--er-mobile-menu-row) !important;

        overflow: hidden !important;
    }

    .site-header .brand {
        grid-row: 1 !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 20px !important;
        padding: 0 !important;

        width: auto !important;
        max-width: 190px !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .site-header .brand img,
    .site-header .brand svg {
        display: block !important;

        width: auto !important;
        height: 43px !important;
        max-width: 185px !important;
        max-height: 43px !important;

        object-fit: contain !important;
    }

    /* Ẩn toàn bộ hamburger cũ */
    .site-header button,
    .site-header .menu-toggle,
    .site-header .nav-toggle,
    .site-header .mobile-menu-toggle,
    .site-header .hamburger,
    .site-header [aria-controls],
    .site-header [aria-expanded] {
        display: none !important;
    }

    /*
     * Menu 3 cột × 2 hàng.
     * Không cuộn ngang và không bị Hero che.
     */
    .site-header .nav-links,
    .site-header nav > ul {
        grid-row: 2 !important;

        position: static !important;
        inset: auto !important;

        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        grid-auto-rows: 32px !important;

        width: 100% !important;
        height: var(--er-mobile-menu-row) !important;
        max-height: var(--er-mobile-menu-row) !important;

        padding: 7px 9px 8px !important;
        margin: 0 !important;

        gap: 5px 6px !important;

        overflow: hidden !important;

        border: 0 !important;
        border-top:
            1px solid rgba(48, 30, 17, .10) !important;
        border-radius: 0 !important;

        background: transparent !important;
        box-shadow: none !important;

        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .site-header .nav-links li,
    .site-header nav > ul li {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .site-header .nav-links a,
    .site-header nav > ul a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;

        padding: 0 4px !important;

        border-radius: 8px !important;

        color: #2f1d12 !important;
        background: transparent !important;

        font-size: 11.5px !important;
        font-weight: 700 !important;
        line-height: 1 !important;

        text-align: center !important;
        white-space: nowrap !important;
    }

    .site-header .nav-links a.active,
    .site-header .nav-links a:hover,
    .site-header nav > ul a.active,
    .site-header nav > ul a:hover {
        color: #fffaf0 !important;
        background: #2f1d12 !important;
    }

    /*
     * Hero bắt đầu ngay dưới sticky Header.
     */
    [data-cms-section="hero"] {
        scroll-margin-top:
            var(--er-mobile-header-total) !important;

        height: var(--er-mobile-screen) !important;
        min-height: var(--er-mobile-screen) !important;
        max-height: var(--er-mobile-screen) !important;
    }

    [data-cms-section]:not([data-cms-section="header"]) {
        scroll-margin-top:
            var(--er-mobile-header-total) !important;
    }

    /* =====================================================
       CORE VALUES GIỐNG ECOSYSTEM
       ===================================================== */

    [data-cms-section="values"] {
        width: 100% !important;
        max-width: 100% !important;

        min-height: var(--er-mobile-screen) !important;
        height: auto !important;
        max-height: none !important;

        padding: 34px 20px !important;

        overflow: hidden !important;
    }

    [data-cms-section="values"] > .container {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;
        margin: 0 !important;
    }

    /*
     * Dòng OUR CORE VALUES.
     */
    [data-cms-section="values"] .eyebrow {
        margin: 0 0 18px !important;

        font-size: 11px !important;
        line-height: 1.2 !important;
        letter-spacing: .14em !important;
    }

    /*
     * Vùng chứa 3 card.
     */
    [data-cms-section="values"] :has(> .value),
    [data-cms-section="values"] .values,
    [data-cms-section="values"] .values-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;

        width: calc(100% + 20px) !important;
        max-width: none !important;

        margin: 0 -20px 0 0 !important;
        padding: 0 20px 14px 0 !important;

        gap: 14px !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scroll-snap-type: x mandatory !important;
        overscroll-behavior-x: contain !important;

        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    [data-cms-section="values"] :has(> .value)::-webkit-scrollbar,
    [data-cms-section="values"] .values::-webkit-scrollbar,
    [data-cms-section="values"] .values-list::-webkit-scrollbar {
        display: none !important;
    }

    /*
     * Mỗi Core Value giống kiểu card Ecosystem:
     * số, tiêu đề, mô tả nằm gọn trong cùng một khối.
     */
    [data-cms-section="values"] .value {
        flex:
            0
            0
            calc(100% - 30px) !important;

        width: calc(100% - 30px) !important;
        min-width: calc(100% - 30px) !important;
        max-width: calc(100% - 30px) !important;

        min-height: 390px !important;
        height: 390px !important;
        max-height: 390px !important;

        margin: 0 !important;
        padding: 28px 25px !important;

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

        gap: 18px !important;

        border:
            1px solid
            rgba(255, 255, 255, .14) !important;

        border-radius: 24px !important;

        background:
            rgba(255, 255, 255, .025) !important;

        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;

        overflow: hidden !important;

        writing-mode: horizontal-tb !important;
    }

    /*
     * Reset tất cả các lỗi width hẹp từ CSS cũ.
     */
    [data-cms-section="values"] .value *,
    [data-cms-section="values"] .value > * {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        position: static !important;
        inset: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;

        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
    }

    [data-cms-section="values"] .value .number,
    [data-cms-section="values"] .value [class*="number"] {
        align-self: flex-start !important;

        margin-bottom: 2px !important;

        color: #f4cf55 !important;

        font-size: 44px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
    }

    [data-cms-section="values"] .value h1,
    [data-cms-section="values"] .value h2,
    [data-cms-section="values"] .value h3 {
        margin: 0 !important;

        color: #fff !important;

        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.08 !important;
    }

    [data-cms-section="values"] .value p {
        margin: auto 0 0 !important;

        color: rgba(255, 255, 255, .72) !important;

        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* =====================================================
       MŨI TÊN CHO CÁC SLIDER NGANG
       ===================================================== */

    .er-slider-shell {
        position: relative !important;
        width: 100% !important;
    }

    .er-slider-arrow {
        position: absolute !important;
        top: 50% !important;

        width: 42px !important;
        height: 42px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 0 !important;
        margin: 0 !important;

        border:
            1px solid rgba(48, 30, 17, .15) !important;

        border-radius: 999px !important;

        background: rgba(255, 250, 240, .96) !important;
        color: #2f1d12 !important;

        box-shadow:
            0 10px 28px rgba(48, 30, 17, .20) !important;

        font-size: 26px !important;
        line-height: 1 !important;

        transform: translateY(-50%) !important;

        z-index: 20 !important;
        cursor: pointer !important;
    }

    .er-slider-arrow.left {
        left: -11px !important;
    }

    .er-slider-arrow.right {
        right: -11px !important;
    }

    /*
     * Trên Core Values nền tối:
     * nút dùng màu vàng để dễ thấy.
     */
    [data-cms-section="values"] .er-slider-arrow {
        background: #f4cf55 !important;
        color: #2f1d12 !important;
        border-color: rgba(244, 207, 85, .80) !important;
    }

    .er-slider-arrow:disabled {
        opacity: .30 !important;
        pointer-events: none !important;
    }

    /*
     * Chấm báo số card bên dưới.
     */
    .er-slider-dots {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;

        gap: 7px !important;
        margin-top: 12px !important;
    }

    .er-slider-dot {
        width: 7px !important;
        height: 7px !important;

        padding: 0 !important;
        border: 0 !important;
        border-radius: 999px !important;

        background: rgba(48, 30, 17, .25) !important;
    }

    .er-slider-dot.active {
        width: 22px !important;
        background: #d6a326 !important;
    }

    [data-cms-section="values"] .er-slider-dot {
        background: rgba(255, 255, 255, .28) !important;
    }

    [data-cms-section="values"] .er-slider-dot.active {
        background: #f4cf55 !important;
    }
}

/* Desktop và tablet không hiện mũi tên mobile */
@media (min-width: 701px) {
    .er-slider-arrow,
    .er-slider-dots {
        display: none !important;
    }
}

/* END ELEPHANT RISE V8 — MOBILE STICKY MENU + CARD CONTROLS */