/* ============================================================
   Language switcher for the production one-pager.

   Same visual design as the other Octon site, but sized in `rem`
   because this stylesheet scales the whole layout with the root
   font size (10px on desktop, 2.56vw on mobile).

   i18n.js appends the switcher into `.nav .content.w124`; the rules
   below are what actually place it. css/style.css is never edited -
   every production override lives here.
   ============================================================ */

.lang-switch {
    position: relative;
    flex-shrink: 0;
}

/* ---- trigger: globe + current language code, deliberately quiet
   so it never competes with the green CTA next to it ---- */
.lang-switch__toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0.1rem solid #d8dde3;
    border-radius: 10rem;
    color: #4c4c52;
    font-family: inherit;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.lang-switch__toggle:hover,
.lang-switch__toggle[aria-expanded="true"] {
    border-color: #00A1E9;
    color: #00A1E9;
    background: rgba(0, 161, 233, 0.06);
}

.lang-switch__toggle:focus-visible {
    outline: 0.2rem solid #00A1E9;
    outline-offset: 0.2rem;
}

.lang-switch__globe {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
}

/* ---- dropdown ---- */
.lang-switch__menu {
    position: absolute;
    top: calc(100% + 1rem);
    right: 0;
    min-width: 15rem;
    margin: 0;
    padding: 0.6rem;
    list-style: none;
    background: #fff;
    border: 0.1rem solid #ececf1;
    border-radius: 1rem;
    box-shadow: 0 0.8rem 2.4rem rgba(26, 26, 46, 0.12);
    z-index: 20;
}

.lang-switch__menu li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.lang-switch__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-radius: 0.7rem;
    color: #1a1a2e;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.4;
    padding: 0.9rem 1rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.lang-switch__item:hover {
    background: #f2f9fd;
    color: #00A1E9;
}

.lang-switch__item.is-active {
    color: #00A1E9;
    font-weight: 700;
}

.lang-switch__check {
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0;
    opacity: 0;
}

.lang-switch__item.is-active .lang-switch__check {
    opacity: 1;
}

/* ============================================================
   Placement inside the production nav.

   The nav positions the logo and the CTA absolutely against
   `.nav .content`, so the switcher is placed the same way rather
   than being squeezed into the centred menu.
   ============================================================ */

.nav .content.w124 {
    position: relative;
}

.nav .lang-switch {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

@media (min-width: 769px) {
    /* css/style.css pins .header_action to right:0 - move it inboard so the
       switcher owns the right edge */
    .header_action {
        right: 7.4rem;
    }
}

@media (max-width: 768px) {
    /* the hamburger is a 5.8rem square pinned to the right edge; sit just
       left of it and widen the CTA's reserved margin to match */
    .nav .lang-switch {
        right: 6.6rem;
    }

    .lang-switch__toggle {
        padding: 0.8rem;
    }

    .lang-switch__code {
        display: none;
    }

    /* css/style.css gives the CTA a fixed 11.8rem pill, which the longer
       Vietnamese label overflows into the logo. Size the pill to its label
       in every language and keep a gap after the logo; on very narrow
       screens the logo shrinks first, never the pill. */
    .nav .logo-wrap {
        flex: 0 1 14rem;
        min-width: 0;
        margin-right: 1.2rem;
    }

    .mobile-header-contact-btn {
        flex-shrink: 0;
        width: auto;
        padding: 0 1.2rem;
        font-size: 1.2rem;
        margin-right: 10.2rem;
    }
}

/* ---- fallback mount: pages with no header (legal, thank-you) put the
   switcher in the footer, where the menu has to open upwards ---- */
footer .lang-switch {
    display: flex;
    width: fit-content;
    margin: 2.4rem auto 0;
}

footer .lang-switch__menu {
    top: auto;
    bottom: calc(100% + 1rem);
    right: 50%;
    transform: translateX(50%);
}

footer .lang-switch__toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

footer .lang-switch__toggle:hover,
footer .lang-switch__toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.18);
    border-color: #fff;
    color: #fff;
}

/* ============================================================
   Vietnamese-only adjustments.

   Vietnamese runs longer than Japanese, and a couple of labels are
   baked into css/style.css as pseudo-element content.
   ============================================================ */

/* css/style.css hardcodes the required badge as content:"必須" */
html[lang="vi"] .form label.label.required::after {
    content: "Bắt buộc";
}

/* The hero headline is sized for 6 Japanese characters per line and the
   artwork starts at the right of the copy column. Vietnamese words are far
   longer, so drop the desktop headline a step to keep the lines clear of the
   image - exactly like the Japanese ones. */
@media (min-width: 769px) {
    html[lang="vi"] .fv-copy h1 {
        font-size: 5.4rem;
    }
}

/* Up to 1160px css/style.css scales the page with the viewport and pins the
   artwork 1rem from the right, which pulls the app-icon row further left;
   just above that the hero is still narrower than .fv-inner. In both cases
   5.4rem "Thu thập hồ sơ" runs into the Zalo icon. */
@media (min-width: 769px) and (max-width: 1200px) {
    html[lang="vi"] .fv-copy h1 {
        font-size: 5rem;
    }
}

/* The header CTA is a fixed 14rem pill with 2rem/3.6rem of padding reserved
   for the arrow; "Đăng ký demo miễn phí" in Be Vietnam Pro measures ~16.3rem
   of text on its own, so widen the pill for Vietnamese only. Re-measure with
   `range.getBoundingClientRect()` whenever the label changes. */
html[lang="vi"] .header_action {
    flex: 0 0 22.5rem;
}

html[lang="vi"] .header-contact-btn {
    width: 22.5rem;
}

/* ============================================================
   Vietnamese typography.

   LINE Seed JP (css/style.css) has no precomposed Vietnamese glyphs, so
   "hồ sơ" renders as "hô`sơ" with a detached mark. i18n.js loads
   Be Vietnam Pro for lang=vi and these rules switch the whole page to it.
   Anton (section numbers / marquee) already ships a Vietnamese subset.
   ============================================================ */
html[lang="vi"],
html[lang="vi"] body,
html[lang="vi"] input,
html[lang="vi"] textarea,
html[lang="vi"] button,
html[lang="vi"] select {
    font-family: "Be Vietnam Pro", "LINE Seed JP", Arial, sans-serif;
}

/* the switcher itself always shows both scripts */
.lang-switch__item[lang="vi"] {
    font-family: "Be Vietnam Pro", "LINE Seed JP", Arial, sans-serif;
}

/* Between 769px and ~1150px the centred Vietnamese menu runs into the wider
   CTA; nudge the menu left (its own padding keeps it clear of the logo). */
@media (min-width: 769px) and (max-width: 1150px) {
    html[lang="vi"] .header_nav > ul {
        padding-right: 7rem;
    }
}

/* ============================================================
   Vietnamese sizing overrides.

   The 0914 delivery from Japan restored css/style.css to the Japanese
   type scale (hero 6.4rem, section h2 5.6rem, price 5rem on mobile ...).
   Those sizes were tuned for short Japanese strings; the Vietnamese-only
   build that shipped before had them a step smaller. Rather than editing
   css/style.css - which has to stay diffable against the next delivery -
   the smaller values live here, scoped to lang=vi.
   ============================================================ */

@media (min-width: 769px) {
    /* section headings: "Những lĩnh vực và tình huống sử dụng" is three
       times the length of 対象業種・活用シーン and wraps at 5.6rem */
    html[lang="vi"] body h2,
    html[lang="vi"] body .service-intro h2 {
        font-size: 4.2rem !important;
    }
}

@media (max-width: 768px) {
    /* the label sits on its own line above the underline in Vietnamese */
    html[lang="vi"] .sec-2-target {
        text-align: center;
    }

    /* "2.000" plus "đồng" is wider than "2,000円" */
    html[lang="vi"] .pricing-price {
        font-size: 3rem;
    }

    html[lang="vi"] .pricing-cta {
        font-size: 1.6rem;
    }

    /* "vài giây" / "1 phút" need more room than 数秒 / 1分 */
    html[lang="vi"] .benefits-results-value strong {
        font-size: 2.8rem;
    }
}

/* ============================================================
   privacy.html.

   Japan's 0914 pages link straight to https://dellaforce.com/privacy,
   which only exists in Japanese, so the local privacy.html is kept for
   Vietnamese (common.footer.privacyHref). Its layout rules used to live
   in css/style.css and were dropped with the new delivery.
   ============================================================ */
#privacy-content {
    max-width: 96rem;
    margin: 0 auto;
}

#privacy-content section + section {
    margin-top: 3.2rem;
}

#privacy-content h3 {
    margin-bottom: 1rem;
}

.commerce-law .privacy-back {
    margin-top: 4rem;
    text-align: center;
}