/*
 * site.css — header / ตัวเลือกภาษา / footer ของหน้าบ้าน (static_page_layout)
 *
 * ขนาดบน desktop อิงแบบกว้าง 1920px: ใช้หน่วย var(--u) = 1px ของแบบ
 * เนื้อหากว้างไม่เกิน 1440px (พื้นหลังยังเต็มจอ) — จอ ≥1440 ทุกอย่างคงที่ที่ 75% ของแบบ
 */
:root {
    --u: calc(min(100vw, 1440px) / 1920);
    --zb-indigo: #343bef;
    --zb-indigo-dark: #262cd0;
    --zb-ink: #545454;
    --zb-black: #111;
    --zb-ease: cubic-bezier(.22, .61, .36, 1);
}

.zb-home, .zb-inner { color: var(--zb-ink); }

/* ---------- Wordmark: Zmart•B ---------- */
.zb-word {
    display: inline-flex;
    align-items: center;
    font-family: Prompt, sans-serif;
    white-space: nowrap;
    letter-spacing: .01em;
}
.zb-word i {
    display: inline-block;
    width: .2em;
    height: .2em;
    margin: 0 .09em 0 .1em;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(.02em);
}
.zb-word--indigo { color: var(--zb-indigo); }

/* ---------- Buttons ---------- */
.zb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4em;
    border-radius: 999px;
    border: 2px solid var(--zb-indigo);
    font-family: Prompt, sans-serif;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
}
.zb-btn--outline { color: var(--zb-indigo); background: #fff; }
.zb-btn--outline:hover { background: #eef0ff; }
.zb-btn--solid { color: #fff; background: var(--zb-indigo); font-weight: 600; }
.zb-btn--solid:hover { background: var(--zb-indigo-dark); border-color: var(--zb-indigo-dark); }
.zb-btn svg { width: 1.15em; height: 1.15em; flex: none; }
a.zb-btn:not([href]) { cursor: pointer; }

/* ---------- Header ---------- */
.zb-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    padding-top: 16px;
    transition: padding-top .3s var(--zb-ease);
    pointer-events: none;
}
.zb-header__bar {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100% - 32px);
    height: 60px;
    margin: 0 auto;
    padding: 0 10px 0 18px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(10, 30, 120, .12);
    transition: box-shadow .3s;
}
.zb-header.is-scrolled .zb-header__bar { box-shadow: 0 8px 30px rgba(10, 30, 120, .22); }

.zb-brand { display: flex; align-items: center; gap: 8px; color: var(--zb-ink); }
.zb-brand img { width: 44px; height: auto; }
.zb-brand .zb-word { font-size: 20px; font-weight: 500; }

.zb-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.zb-header__login, .zb-header__signup { display: none; }

/* language dropdown */
.zb-lang { position: relative; }
.zb-lang__btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--zb-indigo);
    background: #fff;
    color: var(--zb-indigo);
    font: 500 15px/1 Prompt, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s;
}
.zb-lang__btn:hover, .zb-lang__btn[aria-expanded="true"] { background: #eef0ff; }
.zb-lang__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    min-width: 188px;
    padding: 8px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(15, 30, 110, .22), 0 0 0 1px rgba(52, 59, 239, .08);
    transform-origin: top right;
    animation: zb-pop .18s var(--zb-ease);
    z-index: 5;
}
.zb-lang__menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 15px;
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}
.zb-lang__menu li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #2a2a35;
    font: 500 15px/1.2 Prompt, sans-serif;
    cursor: pointer;
    outline: none;
}
.zb-lang__menu li:hover, .zb-lang__menu li:focus-visible { background: #f1f2ff; }
.zb-lang__badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #d5d7fb;
    color: var(--zb-indigo);
    font-size: 12px;
    letter-spacing: .05em;
}
.zb-lang__menu li[aria-selected="true"] .zb-lang__badge { background: var(--zb-indigo); border-color: var(--zb-indigo); color: #fff; }
.zb-lang__check { width: 18px; height: 18px; margin-left: auto; color: var(--zb-indigo); visibility: hidden; }
.zb-lang__menu li[aria-selected="true"] .zb-lang__check { visibility: visible; }
@keyframes zb-pop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }

/* burger + mobile nav */
.zb-burger {
    display: grid;
    align-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: 50%;
    background: var(--zb-indigo);
    cursor: pointer;
}
.zb-burger span { display: block; height: 2px; border-radius: 2px; background: #fff; transition: transform .25s, opacity .2s; }
.zb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.zb-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(15, 30, 110, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .2s, transform .2s var(--zb-ease), visibility 0s .2s;
}
.zb-nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s var(--zb-ease); }
.zb-nav__list a {
    display: block;
    padding: 13px 16px;
    border-radius: 14px;
    color: var(--zb-ink);
    font: 500 17px/1.2 Prompt, sans-serif;
}
.zb-nav__list a:hover { background: #f3f4ff; }
.zb-nav__list a.is-active { color: var(--zb-indigo); background: #eef0ff; font-weight: 600; }
.zb-nav__auth { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 6px 4px; }
.zb-nav__auth .zb-btn { height: 46px; font-size: 16px; }

/* หน้าอื่น (ไม่ใช่หน้าแรก): แถบสีน้ำเงินรองใต้ header */
.zb-topband {
    height: 92px;
    background: #0a33c8 url(/img/home/hero1-bg-1280.webp) 30% 78% / cover no-repeat;
}
.zb-inner section.container { margin-top: 40px; }

/* ---------- Footer ---------- */
.zb-footer {
    position: relative;
    color: #fff;
    background: #0346e6 url(/img/home/footer-bg.webp) center bottom / cover no-repeat;
    overflow: hidden;
}
.zb-footer a { color: #fff; }
.zb-footer a:hover { color: #cfe3ff; }
.zb-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 24px;
    width: calc(100% - 48px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 44px 0 40px;
}
.zb-footer__brand { grid-column: 1 / -1; }
.zb-footer__logo { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
.zb-footer__logo img { width: 110px; height: auto; }
.zb-footer__logo .zb-word { font-size: 22px; font-weight: 600; }
.zb-footer__tagline { margin-top: 14px; font-size: 14px; line-height: 1.6; }
.zb-footer__tagline span { font-weight: 500; letter-spacing: .1em; font-size: .9em; }
.zb-footer__social { display: flex; gap: 12px; margin-top: 18px; }
.zb-footer__social a {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #1b5df0;
    transition: transform .2s;
}
.zb-footer__social a:hover { transform: translateY(-2px); color: #1b5df0; }
.zb-footer__social svg { width: 70%; height: 70%; }
.zb-footer__col h2 {
    font: 500 19px/1.2 Prompt, sans-serif;
    letter-spacing: .02em;
    margin-bottom: 12px;
    color: #fff;
}
.zb-footer__col li { margin-bottom: 8px; }
.zb-footer__col li a, .zb-footer__email { font: 500 15px/1.5 Prompt, sans-serif; }
.zb-footer__email { letter-spacing: .03em; }
.zb-footer__copy { margin-top: 12px; font-size: 14px; line-height: 1.55; opacity: .92; }
.zb-footer__contact { grid-column: 1 / -1; }

@media (min-width: 640px) {
    .zb-footer__inner { grid-template-columns: repeat(3, 1fr); }
    .zb-footer__contact { grid-column: auto; }
}

/* ===================== Desktop: อิงแบบ 1920 ===================== */
@media (min-width: 1100px) {
    .zb-header { padding-top: calc(var(--u) * 77); }
    .zb-header.is-scrolled { padding-top: 14px; }
    .zb-header__bar {
        width: calc(var(--u) * 1694);
        height: calc(var(--u) * 87);
        min-height: 54px;
        padding: 0 calc(var(--u) * 27) 0 calc(var(--u) * 52);
        box-shadow: none;
    }
    .zb-header.is-scrolled .zb-header__bar { box-shadow: 0 10px 34px rgba(10, 30, 120, .22); }
    .zb-inner .zb-header__bar { box-shadow: 0 6px 24px rgba(10, 30, 120, .10); }

    .zb-brand { gap: calc(var(--u) * 13); }
    .zb-brand img { width: calc(var(--u) * 67); min-width: 40px; }
    .zb-brand .zb-word { font-size: max(17px, calc(var(--u) * 30)); }

    .zb-burger, .zb-nav__auth { display: none; }
    .zb-nav {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--u) * 472);
        right: auto;
        display: flex;
        align-items: center;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }
    .zb-nav__list { display: flex; gap: calc(var(--u) * 71); }
    .zb-nav__list a {
        position: relative;
        padding: calc(var(--u) * 10) 0;
        border-radius: 0;
        font-size: max(14px, calc(var(--u) * 25));
        color: var(--zb-ink);
        background: none !important;
    }
    .zb-nav__list a:hover { color: var(--zb-indigo); }
    .zb-nav__list a.is-active { color: var(--zb-indigo); }
    .zb-nav__list a.is-active::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(var(--u) * -6);
        width: calc(var(--u) * 32);
        height: max(2px, calc(var(--u) * 3));
        border-radius: 2px;
        background: var(--zb-indigo);
        transform: translateX(-50%);
    }

    .zb-header__actions { gap: calc(var(--u) * 16); }
    .zb-header__login, .zb-header__signup {
        display: inline-flex;
        height: calc(var(--u) * 55);
        min-height: 34px;
        font-size: max(13px, calc(var(--u) * 24));
    }
    .zb-header__login { min-width: calc(var(--u) * 143); padding: 0 calc(var(--u) * 22); }
    .zb-header__signup { min-width: calc(var(--u) * 174); padding: 0 calc(var(--u) * 22); }

    /* โหมดภาษาอังกฤษ (Google Translate ใส่ class translated-ltr ที่ <html>) — ข้อความยาวกว่าไทย */
    .translated-ltr .zb-nav__list { gap: calc(var(--u) * 40); }
    .translated-ltr .zb-nav__list a { font-size: max(13px, calc(var(--u) * 22)); white-space: nowrap; }
    .translated-ltr .zb-header__login, .translated-ltr .zb-header__signup { font-size: max(12px, calc(var(--u) * 21)); }
    .translated-ltr .zb-footer__col li a { white-space: nowrap; font-size: max(11px, calc(var(--u) * 19)); }
    .zb-lang__btn {
        width: calc(var(--u) * 56);
        height: calc(var(--u) * 56);
        min-width: 34px;
        min-height: 34px;
        font-size: max(13px, calc(var(--u) * 24));
    }

    .zb-topband { height: calc(var(--u) * 204); min-height: 120px; background-image: url(/img/home/hero1-bg-1920.webp); }
    .zb-inner section.container { margin-top: 48px; }

    /* footer — ตำแหน่งตามแบบ (กว้าง 1920 สูง 366) */
    .zb-footer__inner {
        position: relative;
        display: block;
        width: calc(var(--u) * 1920);
        max-width: none;
        height: calc(var(--u) * 366);
        min-height: 230px;
        padding: 0;
    }
    .zb-footer__brand { position: absolute; left: calc(var(--u) * 148); top: calc(var(--u) * 37); }
    .zb-footer__logo { gap: calc(var(--u) * 4); }
    .zb-footer__logo img { width: calc(var(--u) * 164); }
    .zb-footer__logo .zb-word { font-size: calc(var(--u) * 31); }
    .zb-footer__tagline { margin-top: calc(var(--u) * 20); font-size: max(11px, calc(var(--u) * 19)); line-height: 1.38; }
    .zb-footer__social { gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 30); }
    .zb-footer__social a { width: calc(var(--u) * 27); height: calc(var(--u) * 27); min-width: 18px; min-height: 18px; }
    .zb-footer__col { position: absolute; top: calc(var(--u) * 45); }
    .zb-footer__col:nth-child(2) { left: calc(var(--u) * 623); }
    .zb-footer__col:nth-child(3) { left: calc(var(--u) * 915); }
    .zb-footer__col:nth-child(4) { left: calc(var(--u) * 1172); }
    .zb-footer__col:nth-child(5) { left: calc(var(--u) * 1495); }
    .zb-footer__col h2 { font-size: max(15px, calc(var(--u) * 28)); margin-bottom: calc(var(--u) * 18); font-weight: 400; }
    .zb-footer__col li { margin-bottom: 0; }
    .zb-footer__col li a, .zb-footer__email { font-size: max(12px, calc(var(--u) * 21)); line-height: calc(var(--u) * 37); }
    .zb-footer__email { line-height: calc(var(--u) * 33); }
    .zb-footer__copy { margin-top: calc(var(--u) * 6); font-size: max(11px, calc(var(--u) * 19)); line-height: calc(var(--u) * 29); }
}

/* ===================== ส่วนหัวของหน้าใน (page hero) — /news, /contact ใช้ร่วม =====================
 * <section class="zb-phero"> <img class="zb-phero__bg" srcset> <div class="zb-phero__stage"> ...เนื้อหา... </div></section>
 * header ลอยทับ (layout ไม่แสดง .zb-topband เมื่อ controller ส่ง has_hero = true)
 * desktop (≥1100): stage กว้าง 1920u กึ่งกลาง — วางของในหน้าด้วยพิกัดจากแบบ (position: absolute + var(--u))
 */
.zb-phero { position: relative; overflow: hidden; background: #dcecfb; }
.zb-phero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.zb-phero__stage { position: relative; padding: 104px 20px 0; }
@media (min-width: 1100px) {
    .zb-has-hero .zb-header__bar { box-shadow: none; }
    .zb-phero__stage { width: calc(var(--u) * 1920); height: 100%; margin: 0 auto; padding: 0; }
    .zb-phero__stage > * { position: absolute; margin: 0; }
}

/* ===================== ส่วนที่ใช้ร่วมหลายหน้า: หัวข้อ section + การ์ดข่าว (หน้าแรก, /news) ===================== */
.zb-section-title {
    color: var(--zb-black);
    font-size: clamp(26px, 6vw, 40px);
    line-height: 1.25;
    font-weight: 500;
    text-align: center;
}
.zb-section-sub {
    margin-top: 10px;
    color: var(--zb-ink);
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: .04em;
    text-align: center;
}
.zb-section-sub br { display: none; }

/* ---------- วงกลมติ๊กถูก (หน้าบริการ, หน้าราคา) — <span class="zb-tick"><svg><use href="#zb-i-check"/></svg></span>
 * สี: --tick (ค่าเริ่มต้นน้ำเงิน) · --muted = เทา (ข้อจำกัด) · --violet = ม่วง · ขนาด desktop ตั้งในหน้าของตัวเอง */
.zb-tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tick, #0a4ff0); color: #fff; flex: none; }
.zb-tick svg { width: 64%; height: 64%; }
.zb-tick--muted { --tick: #a8a8a8; }
.zb-tick--violet { --tick: #6c2ae4; }

/* ---------- ข่าวสาร และ โปรโมชั่น ---------- */
.zb-news { padding-top: 64px; }
.zb-news__title { color: #48494c; font-weight: 400; }
.zb-news__title span { color: var(--zb-indigo); font-weight: 500; }
.zb-news-grid { display: grid; gap: 18px; max-width: 600px; margin: 28px auto 0; }
.zb-news-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: #062139;
    box-shadow: 0 16px 36px -14px rgba(10, 40, 110, .45);
    cursor: pointer;
    transition: transform .25s var(--zb-ease), box-shadow .25s;
}
.zb-news-card a:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -14px rgba(10, 40, 110, .55); }
.zb-news-card__img { display: block; aspect-ratio: 565 / 266; background: #fff; overflow: hidden; }
.zb-news-card__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .5s var(--zb-ease); }
.zb-news-card a:hover .zb-news-card__img img { transform: scale(1.03); }
.zb-news-card__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-height: 66px;
    margin-top: -10px;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(4, 54, 110, .96) 0%, #04304f 40%, #062139 100%);
    color: #fff;
}
.zb-news-card__title { flex: 1; font-size: 14px; line-height: 1.4; }
.zb-news-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.zb-news-card__more svg { width: 18px; height: 18px; }
.zb-news__more { margin-top: 34px; text-align: center; }
.zb-news__more .zb-btn { height: 52px; padding: 0 34px; font-size: 18px; background: transparent; border-width: 2.5px; }
.zb-news__more .zb-btn:hover { background: #fff; }

@media (min-width: 700px) {
    .zb-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; }
    .zb-section-sub br { display: inline; }
}
/* ตามแบบตั้งแต่ 1280px (แคบกว่านี้ข้อความบนการ์ดเล็กเกินไป) */
@media (min-width: 1280px) {
    .zb-section-title { font-size: calc(var(--u) * 64); line-height: calc(var(--u) * 77); }
    .zb-section-sub { margin-top: 0; font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 34); letter-spacing: .09em; }

    /* news */
    .zb-news { padding-top: calc(var(--u) * 54); }
    .zb-news__title { font-size: calc(var(--u) * 58); line-height: calc(var(--u) * 73); }
    .zb-news__sub { margin-top: calc(var(--u) * 1); font-size: calc(var(--u) * 26); letter-spacing: .04em; }
    .zb-news-grid { grid-template-columns: repeat(3, calc(var(--u) * 564)); justify-content: center; gap: calc(var(--u) * 17) calc(var(--u) * 30); max-width: none; margin-top: calc(var(--u) * 50); }
    .zb-news-card a { height: calc(var(--u) * 338); border-radius: calc(var(--u) * 18); }
    .zb-news-card__bar { min-height: 0; margin-top: calc(var(--u) * -6); padding: 0 calc(var(--u) * 30); }
    .zb-news-card__title { font-size: calc(var(--u) * 19); line-height: calc(var(--u) * 26); }
    .zb-news-card__more { font-size: calc(var(--u) * 18); gap: calc(var(--u) * 8); }
    .zb-news-card__more svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
    .zb-news__more { margin-top: calc(var(--u) * 48); }
    .zb-news__more .zb-btn { width: calc(var(--u) * 237); height: calc(var(--u) * 65); padding: 0; font-size: calc(var(--u) * 30); border-width: calc(var(--u) * 2.5); }
}
@media (prefers-reduced-motion: reduce) {
    .zb-news-card a, .zb-news-card__img img { transition: none; }
}

/* ---------- Google Translate: ซ่อนแถบ/ป๊อปอัปของ Google ---------- */
body { top: 0 !important; position: static !important; }
.goog-te-banner-frame, iframe.skiptranslate, .skiptranslate > iframe,
#goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip,
.VIpgJd-ZVi9od-ORHb-OEVmcd, .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-L7lbkb { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#zb-gt { display: none; }
font { vertical-align: inherit !important; }

@media (prefers-reduced-motion: reduce) {
    .zb-header, .zb-nav, .zb-lang__menu, .zb-burger span { transition: none; animation: none; }
}