/* ============================================================
   Zalo Mini App service page — themesieuviet
   CSS thật (tailwind.css build sẵn thiếu nhiều utility). Namespace zma-*.
   Accent DUY NHẤT: var(--site-primary…) (đỏ brand). Xanh Zalo chỉ nằm trong
   ẢNH mockup (nội dung ứng dụng), KHÔNG dùng làm accent giao diện trang.
   Glass đồng bộ header/footer: alpha .58–.72, blur 18px, saturate 160%.
   ============================================================ */

.zma-page { color: #0f172b; overflow-x: clip; }
.zma-page section { position: relative; }

/* ---- Reveal (gate .zma-anim; no-JS / reduced-motion → hiện đủ) ---- */
.zma-anim [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.zma-anim [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .zma-anim [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .zma-phone, .zma-orb, .zma-hero__shot { animation: none !important; }
}

/* ---- Section rhythm + nền giao thoa fade về trắng (liquid-glass §4b) ---- */
.zma-sect { padding: 76px 0; }
.zma-sect--tight { padding: 56px 0; }
.zma-soft {
    background:
        linear-gradient(180deg,
            rgba(var(--site-primary-rgb), 0) 0,
            rgba(var(--site-primary-rgb), .045) 130px,
            rgba(var(--site-primary-rgb), .045) calc(100% - 130px),
            rgba(var(--site-primary-rgb), 0) 100%),
        #ffffff;
}

/* ---- Eyebrow · headings ---- */
.zma-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    height: 30px; padding: 0 14px; border-radius: 999px;
    background: rgba(var(--site-primary-rgb), .09);
    border: 1px solid rgba(var(--site-primary-rgb), .18);
    color: var(--site-primary, #dc2626);
    font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.zma-eyebrow svg { width: 14px; height: 14px; }
.zma-h2 {
    font-size: clamp(27px, 3vw, 38px); line-height: 1.16; font-weight: 900;
    letter-spacing: -.01em; color: #0f172b; text-wrap: balance;
}
.zma-h2 em { color: var(--site-primary, #dc2626); font-style: normal; }
.zma-lead { color: #475569; font-size: 15.5px; line-height: 1.7; max-width: 62ch; }
.zma-kicker { color: #64748b; font-size: 14.5px; line-height: 1.7; }

/* ---- Buttons ---- */
.zma-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 24px; border-radius: 12px;
    font-size: 14.5px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    text-decoration: none; white-space: nowrap;
}
.zma-btn svg { width: 18px; height: 18px; }
.zma-btn--primary {
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    color: #fff; box-shadow: 0 12px 26px rgba(var(--site-primary-rgb), .32);
}
.zma-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(var(--site-primary-rgb), .42); color: #fff; }
.zma-btn--ghost {
    background: rgba(255,255,255,.7); color: var(--site-primary, #dc2626);
    border-color: rgba(var(--site-primary-rgb), .35);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.zma-btn--ghost:hover { transform: translateY(-2px); background: #fff; border-color: var(--site-primary, #dc2626); }
.zma-btn:focus-visible { outline: 3px solid rgba(var(--site-primary-rgb), .45); outline-offset: 2px; }

/* ---- Glass helper ---- */
.zma-glass {
    background: rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 10px 30px rgba(15,23,43,.08), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .zma-glass, .zma-vs__panel, .zma-tour__row, .zma-stat, .zma-ind__card, .zma-flow__card,
    .zma-benefits, .zma-plan, .zma-case, .zma-tour__aside { background: rgba(255,255,255,.94) !important; }
}

/* ---- Phone frame (khung, ảnh bên trong là screenshot minh hoạ) ---- */
.zma-phone {
    position: relative; width: 100%; max-width: 280px; margin: 0 auto;
    border-radius: 42px; padding: 11px;
    background: linear-gradient(158deg, #232a3b 0%, #0f172b 100%);
    box-shadow: 0 34px 70px rgba(15,23,43,.30), inset 0 1px 0 rgba(255,255,255,.22), 0 0 0 1px rgba(15,23,43,.6);
}
.zma-phone__notch {
    position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 116px; height: 20px; border-radius: 0 0 13px 13px; background: #0f172b; z-index: 2;
}
.zma-phone__screen { display: block; width: 100%; height: auto; border-radius: 32px; background: #fff; }
.zma-phone--float { animation: zma-float 7s ease-in-out infinite; }
@keyframes zma-float { 0%,100% { transform: translate3d(0,0,0);} 50% { transform: translate3d(0,-12px,0);} }

/* =========================================================================
   1) HERO — split text + phone, aurora đỏ
   ========================================================================= */
.zma-hero {
    background:
        radial-gradient(1000px 440px at 88% -8%, rgba(var(--site-primary-rgb), .16), transparent 60%),
        radial-gradient(760px 380px at 4% 8%, rgba(var(--site-primary-rgb), .08), transparent 58%),
        linear-gradient(180deg, #fbf7f7 0%, #f7eff0 60%, #fdf7f7 100%);
    overflow: hidden;
}
.zma-hero::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: 40%;
    background: linear-gradient(180deg, transparent, #ffffff); pointer-events: none;
}
.zma-hero__grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
    padding-bottom: 56px;
}
/* Hero giờ dùng MỘT ảnh thật (nền trong suốt) thay cho hai khung .zma-phone dựng bằng div.
   Rule .zma-hero__phones .zma-phone:nth-child(2) cũ đã bỏ vì không còn phần tử nào khớp.
   CSS .zma-phone GIỮ NGUYÊN — section "case study" (.zma-case .zma-phone) vẫn đang dùng. */
.zma-hero__phones { position: relative; display: flex; justify-content: center; }
.zma-hero__shot {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    /* Ảnh đã có sẵn bóng đổ và bệ đỏ trong chính nó nên không thêm drop-shadow
       (filter trên ảnh lớn đang animate sẽ phải raster lại mỗi frame). */
    animation: zma-float 7s ease-in-out infinite;
}
.zma-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.zma-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #475569;
    background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 4px 14px rgba(15,23,43,.07), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(12px) saturate(155%); backdrop-filter: blur(12px) saturate(155%);
}
.zma-chip svg { width: 15px; height: 15px; color: var(--site-primary, #dc2626); }
.zma-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

@media (min-width: 1024px) {
    .zma-hero__grid { grid-template-columns: .90fr 1fr; gap: 0; }
}

/* =========================================================================
   2) DECISION SPLIT — Mini App vs App riêng
   ========================================================================= */
.zma-vs__wrap {
    display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 36px; position: relative;
}
.zma-vs__panel { border-radius: 22px; padding: 26px 24px 24px; }
.zma-vs__panel--pick {
    background:
        radial-gradient(360px 220px at 100% 0, rgba(var(--site-primary-rgb), .12), transparent 60%),
        rgba(255,255,255,.66);
    border: 1px solid rgba(var(--site-primary-rgb), .28);
    box-shadow: 0 18px 44px rgba(var(--site-primary-rgb), .12), inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.zma-vs__panel--alt {
    background: rgba(248,250,252,.7); border: 1px solid #e6eaf0;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.zma-vs__tag {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800;
    letter-spacing: .04em; text-transform: uppercase; margin-bottom: 12px;
}
.zma-vs__panel--pick .zma-vs__tag { color: var(--site-primary, #dc2626); }
.zma-vs__panel--alt .zma-vs__tag { color: #64748b; }
.zma-vs__title { font-size: 20px; font-weight: 800; color: #0f172b; margin-bottom: 6px; }
.zma-vs__sub { font-size: 13.5px; color: #64748b; line-height: 1.6; margin-bottom: 16px; }
.zma-vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.zma-vs__list li { display: flex; gap: 10px; font-size: 14px; color: #334155; line-height: 1.5; }
.zma-vs__list li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 1px; }
.zma-vs__panel--pick .zma-vs__list li svg { color: var(--site-primary, #dc2626); }
.zma-vs__panel--alt .zma-vs__list li svg { color: #94a3b8; }
.zma-vs__panel--alt .zma-vs__list li.zma-warn svg { color: #f59e0b; } /* amber = cảnh báo (semantic) */
.zma-vs__foot { margin-top: 18px; padding-top: 15px; border-top: 1px dashed #dbe1ea; font-size: 13px; color: #475569; }
.zma-vs__foot b { color: #0f172b; }
.zma-vs__medal {
    justify-self: center; z-index: 2;
    width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
    font-weight: 900; font-size: 13px; color: #fff; margin: -6px 0;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    box-shadow: 0 10px 24px rgba(var(--site-primary-rgb), .4), inset 0 1px 0 rgba(255,255,255,.4);
}
@media (min-width: 900px) {
    .zma-vs__wrap { grid-template-columns: 1fr 52px 1fr; align-items: stretch; gap: 0; }
    .zma-vs__medal { align-self: center; margin: 0 -14px; }
}

/* =========================================================================
   3) PRODUCT TOUR — phone sticky + feature list (KHÔNG bento)
   ========================================================================= */
.zma-tour { display: grid; grid-template-columns: 1fr; gap: 34px; }
/* Khối này giờ dùng MỘT ảnh thật (nền trong suốt) thay cho khung .zma-phone dựng bằng div.
   CSS .zma-phone GIỮ NGUYÊN — section case study (.zma-case .zma-phone) vẫn đang dùng. */
.zma-tour__aside { display: flex; justify-content: center; }
.zma-tour__shot {
    display: block;
    width: 100%;
    max-width: 340px;   /* cột aside rộng 360px ở desktop */
    height: auto;
}
.zma-tour__list { display: grid; gap: 14px; }
.zma-tour__row {
    display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start;
    border-radius: 18px; padding: 18px 20px;
    background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 22px rgba(15,23,43,.06), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(16px) saturate(158%); backdrop-filter: blur(16px) saturate(158%);
    transition: transform .25s ease, box-shadow .25s ease;
}
.zma-tour__row:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,43,.10); }
.zma-tour__ico {
    width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    box-shadow: 0 8px 18px rgba(var(--site-primary-rgb), .28), inset 0 1px 0 rgba(255,255,255,.35);
}
.zma-tour__ico svg { width: 24px; height: 24px; }
.zma-tour__row h3 { font-size: 16.5px; font-weight: 800; color: #0f172b; margin-bottom: 4px; }
.zma-tour__row p { font-size: 13.8px; color: #64748b; line-height: 1.6; }
@media (min-width: 1024px) {
    .zma-tour { grid-template-columns: 360px 1fr; gap: 48px; align-items: start; }
    .zma-tour__aside { position: sticky; top: 104px; }
    .zma-tour__list { grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   4) STATS STRIP — dải số liệu glass
   ========================================================================= */
.zma-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
    border-radius: 22px; padding: 10px;
    background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 14px 40px rgba(15,23,43,.08), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.zma-stat { text-align: center; padding: 20px 12px; }
.zma-stat__num {
    font-size: clamp(24px, 3vw, 32px); font-weight: 900; letter-spacing: -.01em;
    color: var(--site-primary, #dc2626); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.zma-stat__label { margin-top: 6px; font-size: 12.8px; color: #475569; font-weight: 600; }
.zma-stat__note { margin-top: 2px; font-size: 11px; color: #94a3b8; }
@media (min-width: 900px) {
    .zma-stats { grid-template-columns: repeat(4, 1fr); }
    .zma-stat { position: relative; }
    .zma-stat + .zma-stat::before {
        content: ''; position: absolute; left: 0; top: 22%; height: 56%; width: 1px; background: #e6eaf0;
    }
}

/* =========================================================================
   5) INDUSTRIES — 1 lớn + 3 nhỏ
   ========================================================================= */
.zma-ind__grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zma-ind__feature {
    position: relative; overflow: hidden; border-radius: 24px; padding: 30px;
    display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
    background:
        radial-gradient(520px 320px at 100% 0, rgba(var(--site-primary-rgb), .12), transparent 62%),
        rgba(255,255,255,.64);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 18px 46px rgba(15,23,43,.08), inset 0 1px 0 rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
/* Ảnh đã TÁCH NỀN (trong suốt) → KHÔNG bo góc, KHÔNG đổ bóng: cả hai đều bám theo hộp
   chữ nhật của thẻ <img>, nên sẽ vẽ ra một khung/bóng hình chữ nhật quanh vùng rỗng.

   max-width BẮT BUỘC: từ 1200px trở lên hộp về 1 cột, ảnh `width: 100%` sẽ bị kéo lên
   737px — trong khi file gốc chỉ 560px → phóng to 1.32× và VỠ NÉT. Cap ở 420px để ảnh
   luôn được thu nhỏ (nét) chứ không phóng to. Ở chế độ 2 cột (cột ảnh 190px) thì
   max-width này không đụng tới. */
.zma-ind__shot {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin-inline: auto;
}
.zma-ind__ftag { color: var(--site-primary, #dc2626); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.zma-ind__feature h3 { font-size: 23px; font-weight: 900; color: #0f172b; margin: 8px 0 8px; letter-spacing: -.01em; }
.zma-ind__feature p { font-size: 14.5px; color: #475569; line-height: 1.7; }
.zma-ind__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.zma-ind__pill { font-size: 12px; font-weight: 600; color: #475569; background: rgba(255,255,255,.72); border: 1px solid #e6eaf0; padding: 6px 12px; border-radius: 999px; }
/* align-content: center — hộp trái giờ xếp DỌC (ảnh trên, chữ dưới) nên cao gần gấp đôi
   cột phải. Lưới ngoài dùng align-items: stretch nên cột này bị kéo cao theo, còn 3 thẻ
   thì giữ chiều cao tự nhiên và dồn hết lên đỉnh, để lại một mảng trắng lớn phía dưới.
   Căn giữa cho khoảng trắng chia đều trên–dưới. KHÔNG cho thẻ giãn ra lấp cột: mỗi thẻ
   chỉ có ~69px nội dung, giãn lên 400px là ba cái hộp rỗng ruột. */
.zma-ind__col { display: grid; gap: 14px; align-content: center; }
.zma-ind__card {
    display: grid; grid-template-columns: 46px 1fr; gap: 15px; align-items: start;
    height: fit-content;
    border-radius: 18px; padding: 18px;
    background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 8px 22px rgba(15,23,43,.06), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(16px) saturate(158%); backdrop-filter: blur(16px) saturate(158%);
    transition: transform .25s ease, box-shadow .25s ease;
}
.zma-ind__card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(15,23,43,.10); }
.zma-ind__cico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(var(--site-primary-rgb), .1); color: var(--site-primary, #dc2626); }
.zma-ind__cico svg { width: 23px; height: 23px; }
.zma-ind__card h4 { font-size: 15.5px; font-weight: 800; color: #0f172b; margin-bottom: 3px; }
.zma-ind__card p { font-size: 13.2px; color: #64748b; line-height: 1.55; }
@media (min-width: 500px) { .zma-ind__feature { grid-template-columns: 190px 1fr; } }

/* Ảnh mới là composition dày chi tiết (chat, phone, giỏ hàng, thanh toán, tích điểm) nên
   đáng được rộng hơn 190px — NHƯNG chỉ khi hộp đủ chỗ. Hộp này nằm trong lưới 1.28fr/1fr,
   nên ở 1024px nó chỉ rộng ~529px: cho ảnh 240px thì cột chữ tụt còn ~204px và đoạn văn vỡ
   nát. Từ 1200px trở lên hộp mới đủ rộng để cột chữ vẫn giữ trên 340px. */
@media (min-width: 1200px) { .zma-ind__feature { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .zma-ind__grid { grid-template-columns: 2fr 1fr; align-items: stretch; } }

/* =========================================================================
   6) FLOW — quy trình zig-zag timeline
   ========================================================================= */
.zma-flow { position: relative; margin-top: 40px; }
.zma-flow::before {
    content: ''; position: absolute; top: 6px; bottom: 6px; left: 22px; width: 2px;
    background: linear-gradient(180deg, rgba(var(--site-primary-rgb), .35), rgba(var(--site-primary-rgb), .1));
}
.zma-flow__step { position: relative; padding-left: 60px; padding-bottom: 26px; }
.zma-flow__step:last-child { padding-bottom: 0; }
.zma-flow__node {
    position: absolute; left: 8px; top: 4px; width: 30px; height: 30px; border-radius: 999px;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; z-index: 1;
    background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    box-shadow: 0 6px 16px rgba(var(--site-primary-rgb), .35), 0 0 0 5px #fff;
}
.zma-flow__card { border-radius: 16px; padding: 18px 20px; }
.zma-flow__verb { display: flex; align-items: center; gap: 9px; font-size: 16.5px; font-weight: 800; color: #0f172b; }
.zma-flow__verb svg { width: 19px; height: 19px; color: var(--site-primary, #dc2626); }
.zma-flow__card p { margin-top: 6px; font-size: 13.8px; color: #64748b; line-height: 1.6; }
@media (min-width: 860px) {
    .zma-flow::before { left: 50%; transform: translateX(-50%); }
    .zma-flow__step { padding-left: 0; width: 50%; padding-bottom: 8px; margin-bottom: 20px; }
    .zma-flow__step:nth-child(odd) { left: 0; padding-right: 46px; text-align: right; }
    .zma-flow__step:nth-child(even) { left: 50%; padding-left: 46px; }
    .zma-flow__node { left: auto; }
    .zma-flow__step:nth-child(odd) .zma-flow__node { right: -15px; left: auto; }
    .zma-flow__step:nth-child(even) .zma-flow__node { left: -15px; }
    .zma-flow__step:nth-child(odd) .zma-flow__verb { justify-content: flex-end; }
}

/* =========================================================================
   7) BENEFITS — checklist panel (1 khối glass, 2 cột)
   ========================================================================= */
.zma-benefits {
    border-radius: 26px; padding: 34px;
    background:
        radial-gradient(600px 300px at 0 0, rgba(var(--site-primary-rgb), .07), transparent 60%),
        rgba(255,255,255,.62);
    border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 20px 50px rgba(15,23,43,.08), inset 0 1px 0 rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
}
.zma-benefits__grid { display: grid; grid-template-columns: 1fr; gap: 16px 30px; margin-top: 22px; }
.zma-benefit { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; }
.zma-benefit__tick {
    width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px;
    background: rgba(var(--site-primary-rgb), .12); color: var(--site-primary, #dc2626);
}
.zma-benefit__tick svg { width: 15px; height: 15px; }
.zma-benefit h3 { font-size: 15px; font-weight: 800; color: #0f172b; margin-bottom: 2px; }
.zma-benefit p { font-size: 13.4px; color: #64748b; line-height: 1.55; }
@media (min-width: 780px) { .zma-benefits__grid { grid-template-columns: 1fr 1fr; } }

/* =========================================================================
   8) PRICING — 1 lớn (featured) + 2 nhỏ
   ========================================================================= */
.zma-pricing { display: grid; grid-template-columns: 1fr; gap: 18px; }
.zma-plan {
    border-radius: 22px; padding: 28px 26px;
    background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 12px 34px rgba(15,23,43,.07), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
    display: flex; flex-direction: column;
}
.zma-plan--feature {
    background:
        radial-gradient(460px 300px at 100% 0, rgba(var(--site-primary-rgb), .14), transparent 62%),
        rgba(255,255,255,.68);
    border: 1.5px solid rgba(var(--site-primary-rgb), .3);
    box-shadow: 0 24px 56px rgba(var(--site-primary-rgb), .16), inset 0 1px 0 rgba(255,255,255,.9);
}
.zma-plan__badge {
    align-self: flex-start; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: #fff; background: linear-gradient(135deg, var(--site-primary-light, #ef4444), var(--site-primary, #dc2626));
    padding: 5px 12px; border-radius: 999px; margin-bottom: 14px;
}
.zma-plan__name { font-size: 19px; font-weight: 800; color: #0f172b; }
.zma-plan__desc { font-size: 13.4px; color: #64748b; line-height: 1.6; margin: 6px 0 16px; }
.zma-plan__price { font-size: 20px; font-weight: 900; color: var(--site-primary, #dc2626); margin-bottom: 4px; }
.zma-plan__price small { display: block; font-size: 12px; font-weight: 600; color: #94a3b8; margin-top: 2px; }
.zma-plan__list { list-style: none; margin: 16px 0 22px; padding: 0; display: grid; gap: 10px; }
.zma-plan__list li { display: flex; gap: 9px; font-size: 13.6px; color: #334155; line-height: 1.5; }
.zma-plan__list li svg { width: 17px; height: 17px; color: var(--site-primary, #dc2626); flex: 0 0 auto; margin-top: 1px; }
.zma-plan__cta { margin-top: auto; }
.zma-pricing__mini { display: grid; gap: 18px; }
@media (min-width: 1024px) {
    .zma-pricing { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
}

/* =========================================================================
   9) CASE showcase — 3 khung điện thoại (placeholder)
   ========================================================================= */
.zma-cases { display: grid; grid-template-columns: 1fr; gap: 24px; }
.zma-case {
    border-radius: 22px; padding: 28px 22px 26px; text-align: center;
    background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.72);
    box-shadow: 0 12px 34px rgba(15,23,43,.07), inset 0 1px 0 rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(16px) saturate(158%); backdrop-filter: blur(16px) saturate(158%);
}
/* Ba case giờ dùng ảnh mockup thật (nền trong suốt) thay cho khung .zma-phone dựng bằng div.
   CSS .zma-phone vẫn giữ vì các section khác còn dùng. */
.zma-case__shot {
    display: block;
    width: 100%;
    /* max-width: 240px; */
    height: auto;
    margin: 0 auto;
}

/* Dưới 780px lưới .zma-cases sập về MỘT cột, thẻ rộng gần hết container nên ảnh chạy
   theo width:100% sẽ phình lên ~674×1011px — to quá khổ so với chữ bên dưới.
   Chỉ chặn ở chế độ 1 cột; từ 780px trở lên ảnh vẫn lấp đầy thẻ như hiện tại. */
@media (max-width: 779px) {
    .zma-case__shot { max-width: 300px; }
}
.zma-case h3 { margin-top: 20px; font-size: 16.5px; font-weight: 800; color: #0f172b; }
.zma-case p { margin-top: 5px; font-size: 13.4px; color: #64748b; line-height: 1.6; }
.zma-case__todo {
    display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--site-primary, #dc2626);
    background: rgba(var(--site-primary-rgb), .1); padding: 4px 11px; border-radius: 999px;
}
@media (min-width: 780px) { .zma-cases { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   10) CTA + form inline
   ========================================================================= */
.zma-cta {
    position: relative; overflow: hidden; border-radius: 28px; padding: 40px 34px;
    display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center;
    background:
        radial-gradient(560px 320px at 0 0, rgba(var(--site-primary-rgb), .5), transparent 60%),
        radial-gradient(520px 320px at 100% 100%, rgba(var(--site-primary-rgb), .3), transparent 60%),
        linear-gradient(150deg, #0f172b, #14101a);
    box-shadow: 0 30px 70px rgba(15,23,43,.28);
}
.zma-cta h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; color: #fff; line-height: 1.18; letter-spacing: -.01em; }
.zma-cta p { margin-top: 12px; color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.7; }
.zma-cta__points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.zma-cta__points li { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-size: 13.6px; }
.zma-cta__points svg { width: 17px; height: 17px; color: var(--site-primary-light, #ef4444); flex: 0 0 auto; }
.zma-form {
    border-radius: 20px; padding: 24px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.zma-form label { display: block; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.8); margin: 0 0 6px; }
.zma-form .zma-field + .zma-field { margin-top: 14px; }
.zma-form input, .zma-form textarea {
    width: 100%; height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.95); color: #0f172b; font-size: 14.5px; padding: 0 14px; outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.zma-form textarea { height: 82px; padding: 12px 14px; resize: vertical; }
.zma-form input:focus, .zma-form textarea:focus {
    border-color: var(--site-primary-light, #ef4444); box-shadow: 0 0 0 3px rgba(var(--site-primary-rgb), .35);
}
.zma-form .zma-btn { width: 100%; margin-top: 16px; }
.zma-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.zma-cta__ok {
    margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; font-size: 13.8px; font-weight: 600;
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.24);
}
@media (min-width: 940px) { .zma-cta { grid-template-columns: 1.1fr .9fr; gap: 44px; padding: 46px 44px; } }

/* Section head helper */
.zma-head { max-width: 720px; }
.zma-head--center { margin: 0 auto; text-align: center; }
.zma-head .zma-eyebrow { margin-bottom: 14px; }
.zma-head .zma-lead, .zma-head .zma-kicker { margin-top: 12px; }