/* =========================================================
   ELEPHANT RISE V8 — MOBILE CORRECTION
   1. Thu gọn Header và hiện đủ menu
   2. Khôi phục đúng bố cục Ecosystem V8
   Chỉ áp dụng <= 700px
   ========================================================= */

@media (max-width: 700px) {

    :root {
        --er-correct-logo-row: 56px;
        --er-correct-menu-row: 62px;
        --er-correct-header:
            calc(
                var(--er-correct-logo-row)
                + var(--er-correct-menu-row)
            );

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

    /* =====================================================
       HEADER GỌN VÀ CỐ ĐỊNH THẬT
       ===================================================== */

    html {
        scroll-padding-top:
            var(--er-correct-header) !important;
    }

    body {
        padding-top:
            var(--er-correct-header) !important;
    }

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

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

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

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

        background: rgba(255, 250, 240, .99) !important;

        overflow: hidden !important;

        z-index: 999999 !important;
    }

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

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

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

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

        align-items: stretch !important;

        overflow: hidden !important;
    }

    /* Hàng logo chỉ còn 56px */

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

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

        width: auto !important;
        max-width: 180px !important;
        height: var(--er-correct-logo-row) !important;

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

        position: static !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: 37px !important;

        max-width: 170px !important;
        max-height: 37px !important;

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

        object-fit: contain !important;
    }

    /* Ẩn hamburger cũ */

    .site-header .menu-toggle,
    .site-header .nav-toggle,
    .site-header .mobile-menu-toggle,
    .site-header .hamburger,
    .site-header button[aria-controls],
    .site-header button[aria-expanded],
    .site-header button[aria-label*="menu" i] {
        display: none !important;
    }

    /* Menu 3 mục hàng đầu, 2 mục hàng dưới */

    .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(6, minmax(0, 1fr)) !important;
        grid-template-rows:
            repeat(2, 25px) !important;

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

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

        height: var(--er-correct-menu-row) !important;
        min-height: var(--er-correct-menu-row) !important;
        max-height: var(--er-correct-menu-row) !important;

        margin: 0 !important;
        padding: 4px 8px 5px !important;

        gap: 3px 6px !important;

        overflow: hidden !important;

        border: 0 !important;
        border-top:
            1px solid rgba(45, 27, 16, .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;
        height: 25px !important;

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

    .site-header .nav-links li:nth-child(1),
    .site-header nav > ul li:nth-child(1) {
        grid-column: 1 / span 2 !important;
        grid-row: 1 !important;
    }

    .site-header .nav-links li:nth-child(2),
    .site-header nav > ul li:nth-child(2) {
        grid-column: 3 / span 2 !important;
        grid-row: 1 !important;
    }

    .site-header .nav-links li:nth-child(3),
    .site-header nav > ul li:nth-child(3) {
        grid-column: 5 / span 2 !important;
        grid-row: 1 !important;
    }

    .site-header .nav-links li:nth-child(4),
    .site-header nav > ul li:nth-child(4) {
        grid-column: 1 / span 3 !important;
        grid-row: 2 !important;
    }

    .site-header .nav-links li:nth-child(5),
    .site-header nav > ul li:nth-child(5) {
        grid-column: 4 / span 3 !important;
        grid-row: 2 !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: 25px !important;
        min-height: 25px !important;
        max-height: 25px !important;

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

        border-radius: 7px !important;

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

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

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

        overflow: visible !important;
        text-overflow: clip !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: #2d1b10 !important;
    }

    /* Hero và section không còn bị menu che */

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

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

    /* =====================================================
       KHÔI PHỤC ECOSYSTEM GIỐNG GIAO DIỆN V8 BAN ĐẦU
       ===================================================== */

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

    /*
     * Slide vẫn rộng một màn hình,
     * nhưng không ép nội dung card căn giữa.
     */
    [data-cms-section="ecosystem"]
    .er-final-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        align-self: stretch !important;
    }

    /*
     * Khôi phục card:
     * icon trên
     * tiêu đề
     * mô tả
     * liên kết dưới cùng
     */
    [data-cms-section="ecosystem"]
    .er-final-slide > .card,
    [data-cms-section="ecosystem"]
    .card {
        width: 100% !important;

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

        margin: 0 !important;
        padding: 34px 30px !important;

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

        gap: 0 !important;

        border-radius: 24px !important;

        overflow: hidden !important;
    }

    [data-cms-section="ecosystem"]
    .card > * {
        flex: 0 0 auto !important;

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

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

        transform: none !important;
    }

    [data-cms-section="ecosystem"]
    .card .icon {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;

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

        margin: 0 0 30px !important;

        border-radius: 20px !important;
    }

    [data-cms-section="ecosystem"]
    .card h2,
    [data-cms-section="ecosystem"]
    .card h3,
    [data-cms-section="ecosystem"]
    .card h4 {
        width: 100% !important;

        margin: 0 0 22px !important;

        color: #2d1b10 !important;

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

        text-align: left !important;
    }

    [data-cms-section="ecosystem"]
    .card p {
        width: 100% !important;

        margin: 0 0 24px !important;

        color: #2d1b10 !important;

        font-size: 17px !important;
        line-height: 1.55 !important;

        text-align: left !important;
    }

    [data-cms-section="ecosystem"]
    .card a {
        display: inline-flex !important;
        align-items: center !important;

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

        margin-top: auto !important;
        margin-bottom: 0 !important;

        padding: 0 !important;

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

        font-size: 17px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

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

    /*
     * Không để các phần trang trí hoặc badge
     * bị kéo rộng toàn card.
     */
    [data-cms-section="ecosystem"]
    .card .badge,
    [data-cms-section="ecosystem"]
    .card [class*="badge"],
    [data-cms-section="ecosystem"]
    .card .status,
    [data-cms-section="ecosystem"]
    .card [class*="status"] {
        width: auto !important;
        max-width: max-content !important;

        margin-top: auto !important;
    }

    /*
     * Mũi tên slider nằm ngoài nội dung card,
     * không che chữ.
     */
    [data-cms-section="ecosystem"]
    .er-final-arrow.prev {
        left: -12px !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-arrow.next {
        right: -12px !important;
    }
}

/* Điện thoại thấp */

@media (max-width: 700px) and (max-height: 720px) {

    :root {
        --er-correct-logo-row: 52px;
        --er-correct-menu-row: 58px;
    }

    .site-header .brand img,
    .site-header .brand svg {
        height: 34px !important;
        max-height: 34px !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-slide > .card,
    [data-cms-section="ecosystem"]
    .card {
        height: 410px !important;
        min-height: 410px !important;
        max-height: 410px !important;

        padding: 28px 24px !important;
    }

    [data-cms-section="ecosystem"]
    .card .icon {
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;

        margin-bottom: 23px !important;
    }

    [data-cms-section="ecosystem"]
    .card h2,
    [data-cms-section="ecosystem"]
    .card h3,
    [data-cms-section="ecosystem"]
    .card h4 {
        font-size: 26px !important;
        margin-bottom: 17px !important;
    }

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

/* Không ảnh hưởng desktop */

@media (min-width: 701px) {
    body {
        padding-top: 0 !important;
    }
}

/* ER MOBILE ECOSYSTEM EXACT START */

@media (max-width: 700px) {

    /*
     * Chỉ sửa Ecosystem.
     * Không ảnh hưởng Header, Hero, Core Values,
     * Latest Editorial hoặc Footer.
     */

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

        padding-top: 34px !important;
        padding-bottom: 36px !important;

        overflow: hidden !important;
    }

    /*
     * Giữ nguyên slider ngang hiện tại.
     */
    [data-cms-section="ecosystem"]
    .er-final-slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-track {
        align-items: stretch !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-slide {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        display: flex !important;
        align-items: stretch !important;
    }

    /*
     * Card mobile giống đúng cấu trúc desktop:
     * icon → title → description → link/status.
     */
    [data-cms-section="ecosystem"]
    .er-final-slide > .card,
    [data-cms-section="ecosystem"]
    .card {
        width: 100% !important;

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

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

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

        gap: 0 !important;

        border-radius: 24px !important;

        overflow: hidden !important;
    }

    /*
     * Hủy mọi rule cũ làm nội dung biến mất,
     * lệch vị trí hoặc bị ép chiều cao.
     */
    [data-cms-section="ecosystem"]
    .card > * {
        position: static !important;
        inset: auto !important;

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

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

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

        transform: none !important;

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

        writing-mode: horizontal-tb !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /*
     * Icon.
     */
    [data-cms-section="ecosystem"]
    .card .icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

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

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

        border-radius: 18px !important;

        flex: 0 0 64px !important;

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

    /*
     * Tiêu đề.
     */
    [data-cms-section="ecosystem"]
    .card h2,
    [data-cms-section="ecosystem"]
    .card h3,
    [data-cms-section="ecosystem"]
    .card h4 {
        display: block !important;

        width: 100% !important;

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

        color: #2d1b10 !important;

        font-size: 27px !important;
        font-weight: 700 !important;
        line-height: 1.14 !important;

        text-align: left !important;

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

    /*
     * Mô tả.
     */
    [data-cms-section="ecosystem"]
    .card p {
        display: block !important;

        width: 100% !important;

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

        color: #2d1b10 !important;

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

        text-align: left !important;

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

    /*
     * Link đặt sát đáy giống desktop.
     */
    [data-cms-section="ecosystem"]
    .card a {
        display: inline-flex !important;
        align-items: center !important;

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

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

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

        font-size: 16px !important;
        font-weight: 500 !important;
        line-height: 1.2 !important;

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

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

    /*
     * Badge Coming Soon.
     */
    [data-cms-section="ecosystem"]
    .card .badge,
    [data-cms-section="ecosystem"]
    .card [class*="badge"],
    [data-cms-section="ecosystem"]
    .card .status,
    [data-cms-section="ecosystem"]
    .card [class*="status"] {
        display: inline-flex !important;
        align-items: center !important;

        width: auto !important;
        max-width: max-content !important;

        margin: auto 0 0 !important;
        padding: 8px 13px !important;

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

    /*
     * Mũi tên không che nội dung.
     */
    [data-cms-section="ecosystem"]
    .er-final-arrow {
        top: 55% !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-arrow.prev {
        left: 5px !important;
    }

    [data-cms-section="ecosystem"]
    .er-final-arrow.next {
        right: 5px !important;
    }
}

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

    [data-cms-section="ecosystem"]
    .er-final-slide > .card,
    [data-cms-section="ecosystem"]
    .card {
        height: 350px !important;
        min-height: 350px !important;
        max-height: 350px !important;

        padding: 24px 23px !important;
    }

    [data-cms-section="ecosystem"]
    .card .icon {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;

        flex-basis: 56px !important;

        margin-bottom: 20px !important;
    }

    [data-cms-section="ecosystem"]
    .card h2,
    [data-cms-section="ecosystem"]
    .card h3,
    [data-cms-section="ecosystem"]
    .card h4 {
        font-size: 24px !important;
        margin-bottom: 14px !important;
    }

    [data-cms-section="ecosystem"]
    .card p,
    [data-cms-section="ecosystem"]
    .card a {
        font-size: 15px !important;
    }
}

/* ER MOBILE ECOSYSTEM EXACT END */


/* ===== MENU MOBILE ĐẬM HƠN ===== */
@media (max-width:700px){

.site-header nav a,
.site-header .nav a,
.site-header .menu a,
.site-header .navigation a{
    color:#24160d !important;
    font-weight:700 !important;
    text-shadow:none !important;
}

.site-header nav a:hover,
.site-header nav a.active,
.site-header .nav a:hover,
.site-header .nav a.active{
    color:#000 !important;
}

}

/* ===== MOBILE MENU TEXT — FORCE DARK ===== */
@media screen and (max-width: 700px) {

    html body .site-header .nav-links > li > a,
    html body .site-header nav > ul > li > a,
    html body header.site-header .nav-links a,
    html body header.site-header nav a,
    html body .site-header .nav-links a *,
    html body .site-header nav > ul > li > a * {
        color: #160c06 !important;
        font-weight: 800 !important;
        opacity: 1 !important;
        text-shadow: none !important;
        -webkit-text-fill-color: #160c06 !important;
    }

    html body .site-header .nav-links > li > a:hover,
    html body .site-header .nav-links > li > a.active,
    html body .site-header nav > ul > li > a:hover,
    html body .site-header nav > ul > li > a.active {
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
    }
}


/* ===== MOBILE MENU GOLD THEME ===== */
@media (max-width:700px){

.site-header .nav-links,
.site-header nav>ul{
    background:#F5E5B8 !important;
    border-top:1px solid rgba(139,102,43,.25) !important;
    box-shadow:0 3px 12px rgba(0,0,0,.08) !important;
}

.site-header .nav-links a,
.site-header nav>ul>li>a{
    color:#2B1A10 !important;
    font-weight:700 !important;
}

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

}

/* ===== DESKTOP HEADER REFINEMENT ===== */
@media (min-width:701px){

.site-header .header-inner,
.site-header .container{max-width:1360px!important;margin:0 auto!important;padding:0 24px!important;display:flex!important;align-items:center!important;gap:24px!important;}

.site-header nav,
.site-header .main-nav,
.site-header .navigation{flex:1!important;display:flex!important;justify-content:center!important;margin:0!important;}

.site-header .nav-links,
.site-header nav>ul{display:flex!important;align-items:center!important;justify-content:center!important;gap:26px!important;margin:0!important;padding:0!important;}

.site-header .nav-links a,
.site-header nav>ul>li>a{font-size:15px!important;font-weight:700!important;letter-spacing:-.01em!important;color:#2b1a10!important;white-space:nowrap!important;font-family:"inter","Manrope",Arial,sans-serif!important;}

.site-header .nav-links a:hover,
.site-header nav>ul>li>a:hover{color:#b77719!important;}

.site-header .launch-bot,
.site-header .launch-btn,
.site-header .btn-primary{min-height:40px!important;height:40px!important;padding:0 18px!important;border-radius:20px!important;font-size:13px!important;font-weight:700!important;line-height:40px!important;box-shadow:0 4px 12px rgba(43,26,16,.12)!important;white-space:nowrap!important;}
}

/* ===== DESKTOP HEADER FINAL TUNING ===== */
@media (min-width: 701px){

    .site-header .nav-links a,
    .site-header nav > ul > li > a,
    .site-header .main-nav > ul > li > a{
        font-size:17px !important;
        font-weight:700 !important;
        letter-spacing:-0.015em !important;
        color:#25150d !important;
        line-height:1.2 !important;
    }

    .site-header .nav-links,
    .site-header nav > ul,
    .site-header .main-nav > ul{
        gap:31px !important;
    }

    .site-header a[href*="bot"],
    .site-header a[href*="telegram"],
    .site-header .launch-bot,
    .site-header .launch-btn,
    .site-header .btn-launch,
    .site-header .header-cta,
    .site-header .btn-primary{
        width:auto !important;
        min-width:0 !important;
        max-width:none !important;
        height:38px !important;
        min-height:38px !important;
        padding:0 17px !important;
        border-radius:19px !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:38px !important;
        background:#2b1a10 !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
        opacity:1 !important;
        box-shadow:0 4px 12px rgba(43,26,16,.16) !important;
        white-space:nowrap !important;
    }

    .site-header a[href*="bot"] *,
    .site-header a[href*="telegram"] *,
    .site-header .launch-bot *,
    .site-header .launch-btn *,
    .site-header .btn-launch *,
    .site-header .header-cta *,
    .site-header .btn-primary *{
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
    }

    .site-header a[href*="bot"]:hover,
    .site-header a[href*="telegram"]:hover,
    .site-header .launch-bot:hover,
    .site-header .launch-btn:hover,
    .site-header .btn-launch:hover,
    .site-header .header-cta:hover,
    .site-header .btn-primary:hover{
        background:#9a6516 !important;
        color:#ffffff !important;
        -webkit-text-fill-color:#ffffff !important;
    }
}

/* ===== FORCE LAUNCH BOT TEXT WHITE ===== */
@media (min-width:701px){

.site-header a[href*="bot"],
.site-header a[href*="launch"],
.site-header .launch-bot,
.site-header .launch-btn,
.site-header .btn-launch,
.site-header .header-cta,
.site-header .btn-primary{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
}

.site-header a[href*="bot"] *,
.site-header a[href*="launch"] *,
.site-header .launch-bot *,
.site-header .launch-btn *,
.site-header .btn-launch *,
.site-header .header-cta *,
.site-header .btn-primary *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}

}


/* ===== LAUNCH BOT EXACT FIX ===== */
@media (min-width:701px){

html body .force-launch-bot,
html body .force-launch-bot:link,
html body .force-launch-bot:visited,
html body .force-launch-bot:focus,
html body .force-launch-bot:active{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}

html body .force-launch-bot *,
html body .force-launch-bot:link *,
html body .force-launch-bot:visited *,
html body .force-launch-bot:focus *,
html body .force-launch-bot:active *{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    opacity:1 !important;
}

html body .force-launch-bot:hover,
html body .force-launch-bot:hover *{
    color:#f6d25e !important;
    -webkit-text-fill-color:#f6d25e !important;
}

}

/* ===== FIXED HEADER LOGO + MENU ===== */
.site-header,
header.site-header{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:99999 !important;
    background:#fffaf1 !important;
    box-shadow:0 4px 18px rgba(43,26,16,.10) !important;
}

/* Bù khoảng trống để nội dung không bị header che */
body{
    padding-top:80px !important;
}

@media (max-width:700px){
    body{
        padding-top:118px !important;
    }
}