/*
 * home.css — หน้าแรก (hero slider / ทำไมต้อง Zmart•B / ครบทุกฟังก์ชั่น / ข่าวสาร)
 * mobile-first; ตั้งแต่ 1100px ขึ้นไปใช้ตำแหน่งตามแบบ 1920 ผ่าน var(--u) (ดู site.css)
 */
.zb-main { display: block; overflow-x: clip; }
.zb-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap;
}
.zb-word--mint {
    background: linear-gradient(90deg, #a8ffd9 0%, #8ff0ff 55%, #b9d4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.zb-word--mint i { background: #9df5ef; }

/* ======================================================= HERO */
.zb-hero {
    position: relative;
    color: #fff;
    background: #0a2fb0;
    overflow: hidden;
    padding-bottom: 22px;
}
.zb-hero__slides { display: grid; }
.zb-slide {
    grid-area: 1 / 1;
    position: relative;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s .9s;
}
.zb-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.zb-slide__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 18% 50%;
}
.zb-slide--1 { background: #0b34c4; }
.zb-slide--2 { background: #a10b0b; }
.zb-slide--3 { background: #23a51c; }
.zb-slide--4 { background: #d99a06; }
/* slide สีสว่าง (เขียว/เหลือง): ไล่สีเข้มด้านซ้ายจางๆ + เงาตัวอักษร ให้ข้อความขาวอ่านชัด */
.zb-slide--3::after, .zb-slide--4::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.zb-slide--3::after { background: linear-gradient(90deg, rgba(4, 70, 10, .42) 0%, rgba(4, 70, 10, .22) 34%, rgba(4, 70, 10, 0) 58%); }
.zb-slide--4::after { background: linear-gradient(90deg, rgba(110, 58, 0, .46) 0%, rgba(110, 58, 0, .24) 36%, rgba(110, 58, 0, 0) 60%); }
.zb-slide--3 .zb-slide__copy { text-shadow: 0 2px 14px rgba(0, 50, 5, .35); }
.zb-slide--4 .zb-slide__copy { text-shadow: 0 2px 16px rgba(95, 45, 0, .5); }
.zb-slide .zb-stage { z-index: 2; }
.zb-gold, .zb-ai, .zb-mint, .zb-word--mint { text-shadow: none; }

.zb-stage { position: relative; }
.zb-slide .zb-stage { padding: 104px 22px 8px; }
.zb-slide__copy { position: relative; z-index: 2; max-width: 640px; }

.zb-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.zb-hero__title {
    margin-top: 10px;
    font-size: clamp(34px, 8.6vw, 60px);
    line-height: 1.12;
    font-weight: 500;
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 20, 90, .25);
}
.zb-hero__title .zb-word { font-weight: 500; }
.zb-gold {
    display: inline-block;
    background: linear-gradient(180deg, #ffe35a 0%, #ffc21a 55%, #f59e0b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
    filter: drop-shadow(0 .04em 0 rgba(90, 0, 0, .6));
}
.zb-hero__title-sub { display: block; font-size: .64em; line-height: 1.25; }
.zb-ai {
    position: relative;
    display: inline-block;
    padding-right: .08em;
    font-weight: 800;
    font-style: italic;
    background: linear-gradient(165deg, #f2ff6a 0%, #c8f72e 34%, #74e02f 64%, #22b843 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .03em 0 #0b5a1c) drop-shadow(0 0 .12em rgba(220, 255, 120, .45));
}
.zb-sparkle {
    position: absolute;
    top: -.1em;
    right: -.34em;
    width: .4em;
    height: .4em;
    color: #fff;
    filter: drop-shadow(0 0 .08em rgba(255, 255, 255, .9)) drop-shadow(0 0 .2em rgba(190, 255, 120, .9));
}
.zb-mint {
    background: linear-gradient(90deg, #4fefc4 0%, #8ff8de 55%, #c9fff1 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 .03em .04em rgba(70, 40, 0, .45));
}
.zb-hero__tagline {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .05em;
}
.zb-hero__lead {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: .03em;
    font-weight: 500;
}
.zb-hero__lead br { display: none; }

.zb-price {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    padding: 4px 18px 4px 4px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 0 0 2px #ff5b4f, 0 10px 30px rgba(80, 0, 0, .35);
    color: #1d1d1d;
}
.zb-price__label {
    padding: 8px 16px 8px 18px;
    background: #f7d6d2;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 500;
    color: #2b1515;
}
.zb-price__num {
    margin: 0 8px 0 12px;
    font-size: 46px;
    line-height: 1;
    font-weight: 800;
    color: #e8302a;
    letter-spacing: -.01em;
}
.zb-price__unit { font-size: 19px; font-weight: 500; }

.zb-hero__actions { display: flex; align-items: center; gap: 22px; margin-top: 20px; }
.zb-hero__cta { height: 46px; padding: 0 20px; font-size: 16px; font-weight: 600; border-color: #fff; box-shadow: 0 8px 24px rgba(0, 0, 60, .25); }
.zb-hero__cta:hover { background: #fff; transform: translateY(-1px); }
.zb-hero__video {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.zb-hero__video:hover { color: #fff; opacity: .9; }
.zb-hero__play {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 2.5px solid #fff;
    border-radius: 50%;
}
.zb-hero__play svg { width: 62%; height: 62%; margin-left: 10%; }

.zb-slide__art { position: relative; z-index: 1; margin: 26px auto 0; max-width: 620px; }
.zb-slide__art img { display: block; width: 100%; height: auto; }
.zb-art-phone { display: none !important; }

/* dock: ช่องแชท + ปุ่มหมวด + จุด (คงที่ทุก slide) */
.zb-hero__dock { z-index: 3; padding: 4px 16px 0; }
.zb-chat {
    display: flex;
    align-items: center;
    max-width: 760px;
    height: 54px;
    margin: 0 auto;
    padding: 0 6px 0 22px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 12px 34px rgba(0, 15, 80, .25);
}
.zb-chat input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 14px;
    border: 0;
    border-left: 2px solid #b5b5b5;
    border-radius: 0;
    background: none;
    outline: none;
    color: #222;
    font: 400 14px/1 Prompt, sans-serif;
    letter-spacing: .02em;
    height: 26px;
}
.zb-chat input::placeholder { color: #a6a6a6; }
.zb-chat__send {
    flex: none;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--zb-indigo);
    color: #fff;
    font: 600 15px/1 Prompt, sans-serif;
    cursor: pointer;
    transition: background-color .2s;
}
.zb-chat__send:hover { background: var(--zb-indigo-dark); }

.zb-chips {
    display: flex;
    gap: 8px;
    margin: 14px -16px 0;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.zb-chips::-webkit-scrollbar { display: none; }
.zb-chips a {
    display: grid;
    place-items: center;
    min-width: 88px;
    height: 38px;
    padding: 0 16px;
    background: #fff;
    border-radius: 999px;
    color: #48494c;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color .2s, transform .2s;
}
.zb-chips a:hover { color: var(--zb-indigo); transform: translateY(-1px); }

.zb-hero__controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.zb-dots { display: flex; align-items: center; gap: 12px; }
.zb-dot {
    --dot: 12px;
    position: relative;
    width: var(--dot);
    height: var(--dot);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .28);
    overflow: hidden;
    cursor: pointer;
    transition: width .35s var(--zb-ease), background-color .3s;
}
/* จุดที่เลือก: แถบยาว + เส้นเติมตามเวลาเลื่อนอัตโนมัติ */
.zb-dot[aria-selected="true"] { width: calc(var(--dot) * 2.8); background: rgba(255, 255, 255, .42); }
.zb-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left;
    visibility: hidden;
}
.zb-dot.is-timing::after { visibility: visible; animation: zb-progress var(--zb-interval, 6s) linear forwards; }
.zb-hero.is-held .zb-dot.is-timing::after { animation-play-state: paused; }
.zb-hero.is-stopped .zb-dot[aria-selected="true"] { background: #fff; }
@keyframes zb-progress { to { transform: scaleX(1); } }
.zb-dot:focus-visible, .zb-hero__pause:focus-visible, .zb-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.zb-hero__pause {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
    transition: background-color .2s;
}
.zb-hero__pause:hover { background: rgba(255, 255, 255, .3); }
.zb-hero__pause svg { width: 15px; height: 15px; }
.zb-hero__pause .zb-i-play { display: none; margin-left: 2px; }
.zb-hero__pause[aria-pressed="true"] .zb-i-play { display: block; }
.zb-hero__pause[aria-pressed="true"] .zb-i-pause { display: none; }

.zb-hero__arrow { display: none; }

/* ======================================================= CONTENT (พื้นหลังฟ้าอ่อน) */
.zb-content {
    background: #eef6fd url(/img/home/content-bg.webp) center top / 100% auto no-repeat;
    padding: 0 16px 56px;
}

/* ---------- ทำไมต้อง Zmart•B ---------- */
.zb-why { padding-top: 48px; }
.zb-why__sub { max-width: 760px; margin-left: auto; margin-right: auto; }
.zb-bento { display: grid; gap: 18px; max-width: 680px; margin: 30px auto 0; }
.zb-bento__row { display: grid; gap: 18px; }

.zb-why-card {
    --w: 650;
    position: relative;
    container-type: inline-size;
    border-radius: 22px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 40px rgba(40, 90, 180, .12);
}
.zb-why-card--2 { --w: 390; }
.zb-why-card--3 { --w: 633; }
.zb-why-card--4 { --w: 1020; }
.zb-why-card--5 { --w: 680; }
.zb-why-card__art { position: relative; }
.zb-why-card__art img { display: block; width: 100%; height: auto; }
.zb-why-card__body { padding: 18px 20px 22px; color: #333; }
.zb-why-card__body h3 { color: var(--zb-black); font-size: 21px; line-height: 1.25; font-weight: 500; }
.zb-why-card__body p { margin-top: 8px; font-size: 14px; line-height: 1.6; letter-spacing: .02em; }
.zb-why-card__body p br { display: none; }
.zb-why-card__body .zb-btn { margin-top: 14px; height: 40px; padding: 0 18px; font-size: 15px; font-weight: 600; }
.zb-why-card.is-dark .zb-why-card__body { background: linear-gradient(135deg, #1f63f2, #1347db); color: #fff; }
.zb-why-card.is-dark .zb-why-card__body h3 { color: #fff; }
.zb-why-card.is-dark .zb-btn--outline { border-color: #fff; }

/* ข้อความที่อยู่บนภาพ (ตำแหน่งเป็นสัดส่วนของการ์ด: 1 หน่วย = 1px ของแบบ) */
.zb-why-card__checks li,
.zb-why-card__tag {
    position: absolute;
    color: #1b1b1b;
    font-weight: 600;
    white-space: nowrap;
    transform: translateY(-50%);
}
.zb-why-card__checks li { left: calc(100cqw * 263 / var(--w)); font-size: calc(100cqw * 21 / var(--w)); line-height: 1; }
.zb-why-card__checks li:nth-child(1) { top: calc(100cqw * 123 / var(--w)); }
.zb-why-card__checks li:nth-child(2) { top: calc(100cqw * 184 / var(--w)); }
.zb-why-card__checks li:nth-child(3) { top: calc(100cqw * 244 / var(--w)); }
.zb-why-card__tag { font-size: calc(100cqw * 20 / var(--w)); line-height: 1.08; }
.zb-why-card__tag--sme { left: calc(100cqw * 520 / var(--w)); top: calc(100cqw * 160 / var(--w)); font-size: calc(100cqw * 23 / var(--w)); }
.zb-why-card__tag--mid { left: calc(100cqw * 663 / var(--w)); top: calc(100cqw * 91 / var(--w)); }
.zb-why-card__tag--ent { left: calc(100cqw * 862 / var(--w)); top: calc(100cqw * 48 / var(--w)); }

/* ---------- ครบทุกฟังก์ชั่น ---------- */
.zb-features { padding-top: 64px; }
.zb-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 680px;
    margin: 28px auto 0;
}
.zb-feature a {
    --c: #a2c7f9;
    --bg: rgba(162, 199, 249, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 16px 10px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)), var(--bg);
    border: 1.5px solid var(--c);
    border-radius: 20px;
    text-align: center;
    color: #737373;
    cursor: pointer;
    transition: transform .25s var(--zb-ease), box-shadow .25s;
}
.zb-feature a:hover { transform: translateY(-4px); box-shadow: 0 16px 34px -12px var(--c); }
.zb-feature--acc a { --c: #9fd582; --bg: rgba(159, 213, 130, .12); }
.zb-feature--inv a { --c: #ffb37f; --bg: rgba(255, 179, 127, .12); }
.zb-feature--mfg a { --c: #ffa7a7; --bg: rgba(255, 167, 167, .12); }
.zb-feature--pur a { --c: #b896ff; --bg: rgba(184, 150, 255, .12); }
.zb-feature--pos a { --c: #94e3f1; --bg: rgba(148, 227, 241, .12); }
.zb-feature img { width: 56px; height: auto; border-radius: 14px; }
.zb-feature strong { margin-top: 8px; color: var(--zb-black); font-size: 24px; line-height: 1.15; font-weight: 600; }
.zb-feature__sub { margin-top: 2px; color: #222; font-size: 14px; font-weight: 600; line-height: 1.3; }
.zb-feature__desc { margin-top: 4px; font-size: 12px; line-height: 1.35; }

/* mobile/tablet: พื้นหลังของ slide ขยายลงไปใต้ช่องแชทและจุดด้วย (ไม่ใช่สีน้ำเงินของ hero) */
@media (max-width: 1099.98px) {
    .zb-slide { position: static; }
    .zb-slide__bg, .zb-slide--3::after, .zb-slide--4::after { position: absolute; inset: 0; }
    .zb-slide .zb-stage, .zb-hero__dock { z-index: 2; }
    .zb-slide.is-active .zb-stage { z-index: 3; }
}

/* ======================================================= tablet */
@media (min-width: 600px) {
    .zb-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zb-hero__lead br { display: inline; }
}
@media (min-width: 700px) and (max-width: 1279.98px) {
    /* bento 2 คอลัมน์: การ์ดกว้าง (เหมาะกับทุกธุรกิจ) เต็มแถว */
    .zb-bento { max-width: 980px; grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }
    .zb-bento__row { display: contents; }
    .zb-why-card--4 { grid-column: 1 / -1; }
    .zb-why-card { display: flex; flex-direction: column; }
    .zb-why-card__body { flex: 1; }
    .zb-slide__art { max-width: 560px; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
    .zb-slide .zb-stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; padding: 120px 32px 8px; }
    .zb-slide__art { margin-top: 0; }
    .zb-hero__title { font-size: clamp(36px, 4.3vw, 46px); }
    .zb-hero__lead br { display: none; }
}

/* ======================================================= desktop: ตามแบบ 1920 */
@media (min-width: 1100px) {
    .zb-hero { height: calc(var(--u) * 1100); padding: 0; }
    .zb-hero__slides { position: absolute; inset: 0; }
    .zb-slide__bg { object-position: 50% 30%; }
    .zb-stage {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: calc(var(--u) * 1920);
        transform: translateX(-50%);
    }
    .zb-slide .zb-stage { padding: 0; }
    .zb-slide__copy { position: absolute; left: calc(var(--u) * 138); top: 0; width: calc(var(--u) * 760); max-width: none; }

    .zb-eyebrow { position: absolute; top: calc(var(--u) * 256); left: 0; font-size: calc(var(--u) * 28); letter-spacing: .1em; white-space: nowrap; line-height: 1.2; }
    .zb-hero__title { position: absolute; left: 0; margin: 0; white-space: nowrap; text-shadow: none; }
    .zb-hero__lead { position: absolute; left: calc(var(--u) * 4); margin: 0; white-space: nowrap; font-size: calc(var(--u) * 28); line-height: calc(var(--u) * 33.5); letter-spacing: .08em; }
    .zb-hero__actions { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 721); margin: 0; gap: 0; }
    .zb-hero__cta { min-width: calc(var(--u) * 234); height: calc(var(--u) * 63); padding: 0 calc(var(--u) * 26); font-size: calc(var(--u) * 27); border-width: calc(var(--u) * 2.5); box-shadow: none; }
    .zb-hero__video { margin-left: calc(var(--u) * 50); gap: calc(var(--u) * 15); font-size: calc(var(--u) * 28); white-space: nowrap; }
    .zb-hero__play { flex: none; }
    .zb-hero__play { width: calc(var(--u) * 59); height: calc(var(--u) * 59); border-width: calc(var(--u) * 3.2); }

    .zb-slide--1 .zb-hero__title { top: calc(var(--u) * 305); font-size: calc(var(--u) * 80); line-height: calc(var(--u) * 90); }
    .zb-slide--1 .zb-hero__lead { top: calc(var(--u) * 586); }
    .zb-slide--2 .zb-hero__title { top: calc(var(--u) * 305); font-size: calc(var(--u) * 86); line-height: calc(var(--u) * 94); }
    .zb-slide--2 .zb-gold { font-size: 1.1em; }
    .zb-hero__title .zb-word { font-size: 1.12em; }
    .zb-slide--2 .zb-hero__lead { top: calc(var(--u) * 497); font-size: calc(var(--u) * 31); line-height: calc(var(--u) * 40); letter-spacing: .02em; }

    .zb-hero__tagline { position: absolute; left: calc(var(--u) * 2); margin: 0; white-space: nowrap; font-size: calc(var(--u) * 36); line-height: calc(var(--u) * 42); letter-spacing: .05em; }
    .zb-slide--3 .zb-hero__title { top: calc(var(--u) * 317); font-size: calc(var(--u) * 100); line-height: calc(var(--u) * 96); }
    .zb-slide--3 .zb-hero__title-sub { font-size: calc(var(--u) * 58); line-height: calc(var(--u) * 80); }
    .zb-slide--3 .zb-ai { font-size: 1.12em; }
    .zb-slide--3 .zb-hero__tagline { top: calc(var(--u) * 511); }
    .zb-slide--3 .zb-hero__lead { top: calc(var(--u) * 594); line-height: calc(var(--u) * 37.5); letter-spacing: .03em; }
    .zb-slide--4 .zb-hero__title { top: calc(var(--u) * 296); font-size: calc(var(--u) * 88); line-height: calc(var(--u) * 92); }
    .zb-slide--4 .zb-hero__title-sub { font-size: calc(var(--u) * 70); line-height: calc(var(--u) * 66); }
    .zb-slide--4 .zb-hero__tagline { top: calc(var(--u) * 466); }
    .zb-slide--4 .zb-hero__lead { top: calc(var(--u) * 535); line-height: calc(var(--u) * 36.5); letter-spacing: .03em; }

    .zb-price { position: absolute; left: calc(var(--u) * 9); top: calc(var(--u) * 566); margin: 0; width: calc(var(--u) * 663); height: calc(var(--u) * 110); padding: 0; box-shadow: 0 0 0 calc(var(--u) * 2) #ff5b4f, 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(80, 0, 0, .35); }
    .zb-price__label { display: flex; align-items: center; align-self: stretch; width: calc(var(--u) * 258); padding: 0 0 0 calc(var(--u) * 35); font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 35); }
    .zb-price__num { display: inline-block; margin: 0 calc(var(--u) * 30) 0 calc(var(--u) * 32); font-size: calc(var(--u) * 100); transform: scaleX(1.2); }
    .zb-price__unit { font-size: calc(var(--u) * 41); }

    .zb-slide__art { position: absolute; inset: 0; margin: 0; max-width: none; }
    .zb-slide__art img { position: absolute; width: auto; }
    .zb-art-laptop { left: calc(var(--u) * 836); top: calc(var(--u) * 252); width: calc(var(--u) * 832) !important; }
    .zb-art-phone { display: block !important; left: calc(var(--u) * 1619); top: calc(var(--u) * 462); width: calc(var(--u) * 184) !important; filter: drop-shadow(0 calc(var(--u) * 14) calc(var(--u) * 24) rgba(0, 10, 70, .35)); }
    .zb-art-services { left: calc(var(--u) * 826); top: calc(var(--u) * 200); width: calc(var(--u) * 960) !important; }
    .zb-art-ai { left: calc(var(--u) * 816); top: calc(var(--u) * 227); width: calc(var(--u) * 990) !important; }
    .zb-art-erp { left: calc(var(--u) * 828); top: calc(var(--u) * 185); width: calc(var(--u) * 980) !important; }

    /* ลูกศรเลื่อน: อยู่ในพื้นที่ว่างนอกกรอบเนื้อหาเมื่อจอกว้างพอ */
    .zb-hero__arrow {
        position: absolute;
        top: calc(var(--u) * 470);
        z-index: 4;
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, .4);
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: #fff;
        cursor: pointer;
        opacity: .6;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        transition: opacity .25s, background-color .2s, transform .2s;
    }
    .zb-hero:hover .zb-hero__arrow, .zb-hero__arrow:focus-visible { opacity: 1; }
    .zb-hero__arrow:hover { background: rgba(255, 255, 255, .3); }
    .zb-hero__arrow svg { width: 26px; height: 26px; }
    .zb-hero__arrow--prev { left: max(14px, calc(50% - var(--u) * 960 - 96px)); }
    .zb-hero__arrow--prev svg { transform: rotate(90deg); }
    .zb-hero__arrow--next { right: max(14px, calc(50% - var(--u) * 960 - 96px)); }
    .zb-hero__arrow--next svg { transform: rotate(-90deg); }
    .zb-hero__arrow--prev:active { transform: translateX(-2px); }
    .zb-hero__arrow--next:active { transform: translateX(2px); }

    .zb-hero__dock { padding: 0; pointer-events: none; }
    .zb-hero__dock > * { pointer-events: auto; }
    .zb-chat {
        position: absolute;
        left: calc(var(--u) * 383);
        top: calc(var(--u) * 847);
        width: calc(var(--u) * 1170);
        max-width: none;
        height: calc(var(--u) * 83);
        padding: 0 calc(var(--u) * 47) 0 calc(var(--u) * 64);
        box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 15, 80, .18);
    }
    .zb-chat input { height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 14); border-left-width: max(1.5px, calc(var(--u) * 2.5)); font-size: calc(var(--u) * 27); }
    .zb-chat__send { width: calc(var(--u) * 155); height: calc(var(--u) * 47); padding: 0; font-size: calc(var(--u) * 23); }
    .zb-chips {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(var(--u) * 950);
        justify-content: center;
        gap: calc(var(--u) * 11);
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .zb-chips a { min-width: calc(var(--u) * 139); height: calc(var(--u) * 46); padding: 0 calc(var(--u) * 10); font-size: calc(var(--u) * 26); }
    .zb-chips li:nth-child(3) a { min-width: calc(var(--u) * 158); }
    .zb-chips li:nth-child(6) a { min-width: calc(var(--u) * 153); }
    .zb-hero__controls { position: absolute; left: 0; right: 0; top: calc(var(--u) * 1040); margin: 0; gap: calc(var(--u) * 30); }
    .zb-dots { gap: calc(var(--u) * 26); }
    .zb-dot { --dot: max(11px, calc(var(--u) * 20)); }
    .zb-hero__pause { width: max(26px, calc(var(--u) * 34)); height: max(26px, calc(var(--u) * 34)); }

}

/* content (ทำไมต้อง / ฟังก์ชั่น / ข่าว) ใช้ตำแหน่งตามแบบตั้งแต่ 1280px — แคบกว่านี้ข้อความบนการ์ดเล็กเกินไป จึงใช้ layout แบบ tablet */
@media (min-width: 1280px) {
    /* ---------- content: ตำแหน่งตามแบบ ---------- */
    .zb-content { padding: 0 0 calc(var(--u) * 82); }

    .zb-why { padding-top: calc(var(--u) * 52); }
    .zb-why__sub { max-width: none; margin-top: calc(var(--u) * 11); }
    .zb-bento { width: calc(var(--u) * 1735); max-width: none; margin: calc(var(--u) * 58) auto 0; gap: calc(var(--u) * 33); }
    .zb-bento__row { display: flex; align-items: flex-start; gap: calc(var(--u) * 28); }
    .zb-bento__row--2 { gap: calc(var(--u) * 35); padding-left: calc(var(--u) * 8); }
    .zb-bento__row--1 .zb-why-card--1 { flex: 650 1 0; }
    .zb-bento__row--1 .zb-why-card--2 { flex: 389 1 0; }
    .zb-bento__row--1 .zb-why-card--3 { flex: 633 1 0; }
    .zb-bento__row--2 .zb-why-card--4 { flex: 1023 1 0; }
    .zb-bento__row--2 .zb-why-card--5 { flex: 682 1 0; }
    .zb-why-card { box-shadow: none; background: none; border-radius: calc(var(--u) * 24); }
    .zb-why-card.is-dark .zb-why-card__body { background: none; }

    /* ข้อความวางบนภาพ — หน่วยเป็น px ของแบบ เทียบความกว้างการ์ด */
    .zb-why-card__body { position: absolute; inset: 0; padding: 0; color: #2b2b2b; pointer-events: none; }
    .zb-why-card__body > * { pointer-events: auto; }
    .zb-why-card__body h3 { position: absolute; font-size: max(14px, calc(100cqw * 29 / var(--w))); line-height: max(15.5px, calc(100cqw * 31 / var(--w))); }
    .zb-why-card__body p { position: absolute; margin: 0; font-size: max(10.5px, calc(100cqw * 15 / var(--w))); line-height: max(12.5px, calc(100cqw * 17 / var(--w))); letter-spacing: .05em; }
    .zb-why-card__body p br { display: inline; }
    .zb-why-card__body .zb-btn { position: absolute; margin: 0; padding: 0; gap: .45em; height: calc(100cqw * 39 / var(--w)); width: calc(100cqw * 145 / var(--w)); font-size: calc(100cqw * 17 / var(--w)); border-width: max(1px, calc(100cqw * 1.6 / var(--w))); }

    .zb-why-card--1 h3 { left: calc(100cqw * 28 / var(--w)); top: calc(100cqw * 124 / var(--w)); }
    .zb-why-card--1 p  { left: calc(100cqw * 28 / var(--w)); top: calc(100cqw * 193 / var(--w)); }
    .zb-why-card--1 .zb-btn { left: calc(100cqw * 28 / var(--w)); top: calc(100cqw * 261 / var(--w)); }

    .zb-why-card--2 h3 { left: calc(100cqw * 28 / var(--w)); top: calc(100cqw * 112 / var(--w)); }
    .zb-why-card--2 p  { left: calc(100cqw * 28 / var(--w)); top: calc(100cqw * 182 / var(--w)); font-size: calc(100cqw * 15 / var(--w)); line-height: calc(100cqw * 19.2 / var(--w)); }

    .zb-why-card--3 h3 { left: calc(100cqw * 32 / var(--w)); top: calc(100cqw * 125 / var(--w)); }
    .zb-why-card--3 p  { left: calc(100cqw * 32 / var(--w)); top: calc(100cqw * 196 / var(--w)); }

    .zb-why-card--4 h3 { left: calc(100cqw * 158 / var(--w)); top: calc(100cqw * 32 / var(--w)); line-height: calc(100cqw * 35 / var(--w)); }
    .zb-why-card--4 p  { left: calc(100cqw * 37 / var(--w)); top: calc(100cqw * 136 / var(--w)); font-size: calc(100cqw * 18 / var(--w)); line-height: calc(100cqw * 26 / var(--w)); letter-spacing: .04em; }
    .zb-why-card--4 .zb-btn { left: calc(100cqw * 37 / var(--w)); top: calc(100cqw * 231 / var(--w)); height: calc(100cqw * 43 / var(--w)); }

    .zb-why-card--5 h3 { left: calc(100cqw * 150 / var(--w)); top: calc(100cqw * 43 / var(--w)); font-size: calc(100cqw * 27 / var(--w)); line-height: calc(100cqw * 29 / var(--w)); }
    .zb-why-card--5 p  { left: calc(100cqw * 39 / var(--w)); top: calc(100cqw * 136 / var(--w)); line-height: calc(100cqw * 19 / var(--w)); letter-spacing: .06em; }
    .zb-why-card--5 .zb-btn { left: calc(100cqw * 36 / var(--w)); top: calc(100cqw * 233 / var(--w)); }

    .zb-why-card.is-dark .zb-why-card__body { color: #fff; }
    .zb-why-card--2 .zb-why-card__body h3, .zb-why-card--3 .zb-why-card__body h3, .zb-why-card--4 .zb-why-card__body h3 { color: #0e0e14; }

    /* features */
    .zb-features { padding-top: calc(var(--u) * 115); }
    .zb-features__title { font-size: calc(var(--u) * 57); line-height: calc(var(--u) * 73); font-weight: 400; color: #23232d; }
    .zb-features__sub { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 27); color: #111; letter-spacing: .06em; }
    .zb-feature-grid { grid-template-columns: repeat(6, calc(var(--u) * 187)); justify-content: center; gap: calc(var(--u) * 28); max-width: none; margin-top: calc(var(--u) * 48); }
    .zb-feature a { height: calc(var(--u) * 182); padding: calc(var(--u) * 17) 0 0; border-width: max(1px, calc(var(--u) * 1.5)); border-radius: calc(var(--u) * 20); }
    .zb-feature img { width: calc(var(--u) * 64); border-radius: calc(var(--u) * 14); }
    .zb-feature strong { margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 31); line-height: calc(var(--u) * 37); }
    .zb-feature__sub { margin-top: 0; font-size: max(11px, calc(var(--u) * 16)); line-height: calc(var(--u) * 21); }
    .zb-feature__desc { margin-top: calc(var(--u) * 2); font-size: max(10px, calc(var(--u) * 13)); line-height: calc(var(--u) * 15); }
}

/* ======================================================= โหมดภาษาอังกฤษ (Google Translate)
 * ข้อความอังกฤษยาวกว่าไทย: ให้ข้อความใน hero ไหลต่อกันแทนการวางตำแหน่งตายตัว และให้ตัดบรรทัดเองในการ์ด */
@media (min-width: 1100px) {
    .translated-ltr .zb-slide__copy { top: calc(var(--u) * 252); width: calc(var(--u) * 680); display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--u) * 18); }
    .translated-ltr .zb-slide__copy > * { position: static !important; }
    .translated-ltr .zb-hero__title { white-space: normal; font-size: calc(var(--u) * 64) !important; line-height: 1.08 !important; }
    .translated-ltr .zb-hero__lead { white-space: normal; font-size: calc(var(--u) * 24) !important; line-height: 1.45 !important; letter-spacing: .01em !important; }
    .translated-ltr .zb-hero__lead br, .translated-ltr .zb-hero__title br { display: none; }
    .translated-ltr .zb-price { margin-top: calc(var(--u) * 4); }
    .translated-ltr .zb-hero__actions { margin-top: calc(var(--u) * 8); }

    .translated-ltr .zb-why-card__body h3 { font-size: calc(100cqw * 24 / var(--w)); line-height: 1.15; }
    .translated-ltr .zb-why-card__body p { white-space: normal; font-size: calc(100cqw * 13.5 / var(--w)); line-height: 1.3; letter-spacing: 0; }
    .translated-ltr .zb-why-card__body p br { display: none; }
    .translated-ltr .zb-why-card--1 p { width: calc(100cqw * 205 / var(--w)); }
    .translated-ltr .zb-why-card--2 p { width: calc(100cqw * 175 / var(--w)); }
    .translated-ltr .zb-why-card--3 p { width: calc(100cqw * 215 / var(--w)); }
    .translated-ltr .zb-why-card--4 p { width: calc(100cqw * 400 / var(--w)); }
    .translated-ltr .zb-why-card--5 p { width: calc(100cqw * 330 / var(--w)); }
    .translated-ltr .zb-why-card__body .zb-btn { width: auto; padding: 0 calc(100cqw * 16 / var(--w)); }
    .translated-ltr .zb-chips a, .translated-ltr .zb-feature__sub { white-space: nowrap; }
    .translated-ltr .zb-price__label { font-size: calc(var(--u) * 21); line-height: 1.2; padding-right: calc(var(--u) * 14); }
    .translated-ltr .zb-price__label br { display: none; }
}
.translated-ltr .zb-why-card__checks li,
.translated-ltr .zb-why-card__tag { white-space: normal; font-size: calc(100cqw * 14 / var(--w)); line-height: 1.05; }
.translated-ltr .zb-why-card__checks li { width: calc(100cqw * 105 / var(--w)); }
.translated-ltr .zb-why-card__tag { width: calc(100cqw * 110 / var(--w)); }
.translated-ltr .zb-why-card__tag br { display: none; }

@media (prefers-reduced-motion: reduce) {
    .zb-slide, .zb-slide.is-active { transition: none; }
    .zb-dot { transition: none; }
    .zb-feature a { transition: none; }
}