/* ==========================================================================
   Daily Chat with Chloe: design system (rev 9)
   Hand-written, committed CSS (no build step). See /DESIGN.md for the world.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Rev 9 palette: owner mood board (warm white / orange / black / sea blue) + logo navy */
  --ink:#1B1B1B;
  --cream:#F6F4F1;
  --cream-deep:#EFEBE4;
  --tint-blue:#E9EFF8;
  --line-strong:#CFC9BB;
  --surface:#FFFFFF;
  --teal-900:#0F3473;
  --teal-700:#0F3473;
  --teal-600:#0F3473;
  --teal-100:#DCE6F5;
  --teal-050:#F3EFE6;
  --coral-500:#F45305;   /* accent (marks, dots, quote glyphs, large numerals) */
  --orange-ui:#CF4403;   /* filled surfaces with white text: AA 4.69:1 */
  --coral-600:#B33A00;
  --coral-100:#FDE3D3;
  --zalo:#0068FF;
  --line:#E4DFD6;
  --muted:#5B5F66;
  --on-teal:#32373C;
  --on-teal-muted:#5B6166;
  --on-ink:#32373C;
  --on-ink-muted:#5B6166;

  --font-display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
  --font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --radius-card:16px;
  --radius-bubble:16px;
  --wrap:72rem;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{margin:0;font-family:var(--font-body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--cream)}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
a{color:var(--teal-700);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
button{font:inherit}
:focus-visible{outline:3px solid var(--teal-600);outline-offset:2px;border-radius:6px}
::selection{background:var(--teal-100);color:var(--ink)}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;overflow-wrap:break-word}
h1{font-weight:700;font-size:clamp(2.05rem,5.4vw + .6rem,3.35rem);line-height:1.22;padding-top:.1em;letter-spacing:-.01em}
h2{font-weight:700;font-size:clamp(1.6rem,3vw + .6rem,2.35rem);line-height:1.24;padding-top:.06em}
h3{font-weight:700;font-size:1.17rem;line-height:1.35}
.small{font-size:.9rem}
.muted{color:var(--muted)}
strong{font-weight:700}
p{max-width:70ch}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:1.25rem}
.wrap--narrow{max-width:52rem}
section{padding-block:4rem}
@media(min-width:768px){section{padding-block:6rem}}
.band-deep{background:var(--cream-deep)}
.band-teal{background:var(--tint-blue)}
.band-teal .muted{color:var(--on-teal-muted)}
.band-ink{background:var(--surface)}
.band-ink .muted{color:var(--on-ink-muted)}
.grid{display:grid;gap:1.25rem}
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
}

/* Section header: kicker bubble + display heading */
.section-head{margin-bottom:2rem}
.kicker{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:800;color:var(--teal-700);margin-bottom:.8rem;letter-spacing:.02em}
.kicker::before{content:"●";color:var(--coral-500);font-size:.55rem}
.band-teal .kicker{color:var(--on-teal)}
.band-ink .kicker{color:var(--on-ink)}
.section-head p{margin-top:.7rem}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:12px;padding:.85rem 1.7rem;font-weight:600;font-size:1rem;line-height:1.3;cursor:pointer;text-decoration:none;transition:background .15s ease,color .15s ease}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--orange-ui);color:#fff}
.btn--primary:hover{background:var(--coral-600)}
.btn--teal{background:var(--teal-100);color:var(--teal-900)}
.btn--teal:hover{background:#CBD9EE}
.btn--zalo{background:var(--zalo);color:#fff}
.btn--zalo:hover{background:#0059DB}
.btn--lg{padding:1rem 1.9rem;font-size:1.06rem}
@media(max-width:429px){.btn--lg{font-size:.95rem;padding:1rem 1.2rem}}
.btn--block{width:100%}
.btn[disabled]{opacity:.6;cursor:default;transform:none}

/* ---------- Bubbles (the signature) ---------- */
.bubble{position:relative;display:inline-block;max-width:36ch;background:var(--surface);border-radius:var(--radius-bubble);padding:.65rem .95rem;font-size:.98rem;line-height:1.5}
.bubble--in{border-bottom-left-radius:6px}
.bubble--out{background:var(--teal-100);border-bottom-right-radius:6px}
.bubble-meta{font-size:.78rem;color:var(--muted);margin-top:.35rem}
.thread{display:flex;flex-direction:column;gap:.55rem}
.thread .from-me{align-self:flex-end;text-align:left}
.thread .from-them{align-self:flex-start}


/* ---------- Chat window card ---------- */
.chat-card__head{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);background:var(--teal-050)}
.avatar{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--teal-100);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:var(--teal-700);font-size:1.05rem;text-align:center;flex-shrink:0;overflow:hidden;object-fit:cover}
.chat-card__name{font-weight:700;line-height:1.2}
.chat-card__status{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--muted)}



/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.1rem}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:700;font-size:1.14rem;color:var(--ink);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:auto;height:2.7rem;display:block}
@media(max-width:479px){.brand img{height:2.3rem}}
.nav-links{display:none;gap:1.35rem;font-size:.94rem;font-weight:500}
.nav-links a{color:var(--ink)}
.nav-links a:hover{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1080px){.nav-links{display:flex}}
.head-actions{display:flex;align-items:center;gap:.7rem}
.lang{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:.76rem;font-weight:700}
.lang a{padding:.3rem .6rem;color:var(--muted)}
.lang a:hover{text-decoration:none}
.lang .on{background:var(--teal-600);color:#fff}
.head-cta{padding:.55rem 1.05rem;font-size:.85rem;background:var(--teal-100);color:var(--teal-900)}
.head-cta:hover{background:#CBD9EE}
@media(max-width:639px){.head-cta{display:none}}

/* ---------- Hero ---------- */
.hero{padding-block:3.5rem 4.5rem}
.display-kicker{font-family:var(--font-display);font-weight:700;font-size:clamp(1.35rem,2vw + .35rem,2rem);color:var(--teal-700);letter-spacing:.01em;line-height:1.25;padding-top:.12em}
.hero-h1{font-size:clamp(1.75rem,1.7vw + 1rem,2.4rem);font-weight:700;line-height:1.32;margin-top:.8rem;max-width:26ch}
.hero-h1 mark{background:linear-gradient(transparent 58%,var(--teal-100) 58%);color:inherit;padding:0 .08em}
.hero-menu{margin-top:2.6rem;max-width:26rem;display:grid;gap:0}
.hero-menu a{display:flex;align-items:center;gap:.7rem;padding:.95rem .2rem;border-bottom:1px solid var(--line-strong);color:var(--ink);font-weight:600}
.hero-menu a:hover{text-decoration:none;background:rgb(15 52 115 / .06)}
.hero-menu .num{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:1.5rem}
.hero-menu .tri{color:var(--teal-700);font-size:.8rem}
.hero-cred{color:var(--teal-700);font-weight:600;text-align:center;font-family:var(--font-display)}
@media(min-width:900px){.hero{padding-block:5rem 6.5rem}}
.hero .wrap{display:grid;gap:2.75rem;align-items:center}
@media(max-width:899px){
  .hero .wrap{gap:1.1rem}
  .hero .wrap>div:first-child{display:contents}
  .hero .display-kicker{grid-row:1}
  .hero .hero-h1{grid-row:2;margin-top:-.4rem}
  .hero .hero-ctas{grid-row:3;margin-top:.4rem}
  .hero .hero-chat{grid-row:4;margin-top:1.4rem}
  .hero .hero-menu{grid-row:5;width:100%;margin-top:.6rem;max-width:none}
}
@media(min-width:900px){.hero .wrap{grid-template-columns:1fr 1fr;gap:4rem}.hero .hero-chat{max-width:30rem}.hero .meet{max-width:30rem}}
.hero h1{max-width:22ch}
.hero-ctas{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-top:1.9rem}
.hero-chat{max-width:24.5rem;justify-self:center;width:100%}
/* "Meet Chloe" poster (owner reference: Meet Desi): giant name behind, cutout in front, no arrows */
.meet{position:relative;container-type:inline-size;margin:0 auto;width:100%;max-width:26rem}
.meet-script{display:inline-block;margin-left:6%;font-family:var(--font-display);font-weight:700;font-style:italic;font-size:clamp(1.7rem,4.5vw,2.3rem);color:var(--coral-500);transform:rotate(-8deg);line-height:1}
.meet-word{display:block;text-align:center;font-family:var(--font-display);font-weight:800;font-size:clamp(5.2rem,36cqw,8.4rem);line-height:.92;letter-spacing:-.03em;color:var(--teal-900);opacity:.26;white-space:nowrap;user-select:none;margin-top:.15em}
.meet-photo{width:88%;height:auto;margin:-.9rem auto 0;display:block}
@media(max-width:899px){.meet-photo{margin-top:0}}
.hero-cred{display:none}

/* ---------- Result claim (owner copy) ---------- */
.claim{padding-block:2.75rem;background:var(--surface);border-bottom:1px solid var(--line)}
.claim-text{max-width:44ch;margin-inline:auto;text-align:center;font-family:var(--font-display);font-weight:600;font-size:clamp(1.15rem,1.2vw + .9rem,1.55rem);line-height:1.4;padding-top:.08em;color:var(--teal-900)}
.claim-text strong{color:var(--orange-ui);font-weight:800;font-size:1.25em;white-space:nowrap}
@media(min-width:768px){.claim{padding-block:3.2rem}}

/* ---------- Trust strip ---------- */
.trust{padding-block:2.5rem}
.trust .wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1rem}
.trust-item{display:flex;gap:.6rem;align-items:flex-start;padding:.2rem 0}
@media(min-width:900px){.trust .wrap{display:flex;gap:1.25rem}.trust-item{flex:1;padding:.35rem 1.25rem;border-left:1px solid var(--line-strong)}.trust-item:first-child{border-left:0;padding-left:0}}
.trust-item svg{width:1.5rem;height:1.5rem;flex-shrink:0;margin-top:.15rem}
.trust-item b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.3;padding-top:.05em}
@media(min-width:900px){.trust-item b{font-size:1.22rem}}
.trust-item span{font-size:.9rem;color:var(--muted)}

/* ---------- Course cards ---------- */
.course{padding:1.6rem 0}
@media(max-width:767px){.course+.course{border-top:1px solid var(--line)}}

.course h3{font-size:1.38rem;padding-top:.05em}
.course p{margin-top:.8rem;color:var(--muted);font-size:.98rem}
.chip{display:inline-block;background:var(--coral-100);color:var(--coral-600);font-size:.78rem;font-weight:700;line-height:1.4;border-radius:999px;padding:.25rem .7rem;margin-bottom:.7rem}
.chip--teal{background:var(--teal-100);color:var(--teal-700)}
.course-foot{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:space-between;margin-top:1.5rem}
.price-bubble{display:inline-block;background:var(--teal-100);color:var(--ink);font-weight:600;font-size:.92rem;border-radius:var(--radius-bubble);border-bottom-left-radius:6px;padding:.55rem .9rem}
.course-link{font-weight:700;font-size:.94rem;white-space:nowrap}
.course-foot--stack{flex-direction:column;align-items:flex-start;gap:.55rem}

/* ---------- Schedule table ---------- */
.table-wrap{overflow:visible}
.sched{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--surface);border-radius:var(--radius-card);overflow:hidden}
@media(max-width:639px){
  .sched,.sched tbody,.sched tr,.sched td{display:block}
  .sched thead{display:none}
  .sched tr{border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem;margin-bottom:.8rem;background:var(--surface)}
  table.sched tbody td{border:0;padding:.1rem 0;font-size:.93rem;line-height:1.5}
  table.sched tbody td:first-child{font-size:1.02rem;margin-bottom:.35rem}
  table.sched tbody td[data-l]::before{content:attr(data-l) ": ";color:var(--muted)}
  table.sched tbody tr:nth-child(even){background:var(--surface)}
  table.sched tbody tr:last-child{margin-bottom:0}
}
.sched th{background:var(--teal-050);color:var(--ink);text-align:left;font-weight:700;padding:.8rem 1rem;font-size:.88rem}
.sched td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.sched tbody tr:last-child td{border-bottom:0}
.sched tbody tr:nth-child(even){background:var(--teal-050)}
.sched-note{margin-top:1rem;font-size:.88rem;color:var(--muted);max-width:60ch}

/* ---------- Work checklist ---------- */
.checklist{display:grid;gap:1.05rem;margin-top:2rem}
@media(min-width:768px){.checklist{grid-template-columns:1fr 1fr;column-gap:2.5rem}}
.check{display:flex;gap:.8rem;align-items:flex-start}
.check svg{width:1.35rem;height:1.35rem;flex-shrink:0;margin-top:.2rem}
.check b{display:block;font-weight:700}
.check span{font-size:.93rem;color:var(--muted)}
.proof-chat{margin-top:2.4rem;max-width:26rem}
.guarantee{margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:56ch}
.guarantee h3{color:var(--coral-600);padding-top:.05em}
.guarantee p{margin-top:.55rem;font-size:.97rem}

/* ---------- Levels rail ---------- */
.rail{position:relative;display:flex;flex-direction:column;gap:2.1rem;margin-top:2.2rem;padding-left:3.4rem}
.rail::before{content:"";position:absolute;left:1.29rem;top:1.2rem;bottom:1.2rem;border-left:2px dotted var(--line-strong)}
.rail-item{position:relative}
.rail-badge{position:absolute;left:-3.4rem;top:0;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--teal-100);color:var(--teal-700);display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.9rem}
.rail-item h3{padding-top:.3rem}
.rail-item>p{margin-top:.45rem;color:var(--muted);font-size:.97rem;max-width:58ch}

/* ---------- Why: bubble wall ---------- */
.wall{display:grid;gap:1rem;margin-top:2.2rem}
@media(min-width:768px){.wall{grid-template-columns:1fr 1fr;column-gap:2rem}}
.wall .bubble{max-width:46ch;display:block;padding:.85rem 1.1rem}
.wall .bubble b{display:block;font-weight:700;margin-bottom:.15rem}
.wall .bubble span{font-size:.92rem;color:var(--muted)}
.wall .from-me{background:var(--teal-100)}
@media(min-width:768px){
  .wall .from-me{transform:translateX(1.4rem)}
  .wall .from-them{transform:translateX(-.4rem)}
}

/* ---------- Steps ---------- */
.steps{counter-reset:step;display:grid;gap:1.9rem;margin-top:1.75rem}
@media(min-width:768px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;border-top:1px solid var(--line-strong);margin-top:.5rem;padding-top:2.6rem}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;top:0;left:0;font-family:var(--font-display);font-weight:700;font-size:1.7rem;color:var(--coral-600);line-height:1.1}
.step b{display:block;font-weight:700;margin-bottom:.2rem}
.step p{font-size:.93rem;color:var(--muted)}

/* ---------- About ---------- */
.about .wrap{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.about .wrap{grid-template-columns:.9fr 1.1fr}}
.about-photo{aspect-ratio:4/5;height:auto;max-width:22rem;width:100%;justify-self:center;object-fit:cover;object-position:50% 20%;border-radius:20px;display:block}
@media(max-width:899px){.about-photo{max-width:18rem}}
.about p.body{margin-top:1.1rem;color:var(--muted)}

/* ---------- Testimonials: photo cards ---------- */
.tgrid{display:grid;gap:1.6rem;margin-top:1.75rem}
@media(min-width:900px){.tgrid{grid-template-columns:1fr 1fr;align-items:stretch}}
.tcard{position:relative;border-radius:var(--radius-card);padding:2rem 1.5rem 1.5rem;color:#fff}
.tcard--navy{background:var(--teal-100);color:var(--teal-900)}
.tcard--navy .tquote{color:var(--coral-500);opacity:1}
.tcard--navy .twho img{border-color:#fff}
.tcard--orange{background:var(--orange-ui)}
.tquote{position:absolute;top:.4rem;left:1.2rem;font-family:var(--font-display);font-weight:800;font-size:4rem;line-height:1;opacity:.35}
.tsay{position:relative;font-size:1rem;line-height:1.6;max-width:52ch}
.twho{display:flex;align-items:center;gap:.8rem;margin-top:1.4rem}
.twho img{width:3.6rem;height:3.6rem;border-radius:50%;object-fit:cover;border:3px solid rgb(255 255 255 / .85);flex-shrink:0}
.twho b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.05rem;line-height:1.25}
.twho small{display:block;font-size:.85rem;opacity:.9}

/* ---------- Pricing ---------- */
.prices{display:grid;gap:1.25rem;margin-top:2.2rem}
@media(min-width:900px){.prices{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.price-card{padding:1.6rem 1.4rem;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card)}
.price-card--hot{border-color:var(--line-strong);border-top:3px solid var(--orange-ui);padding-top:1.5rem}
.price-card--hot .muted{color:var(--muted)}
.price-card h3{font-size:1.05rem;padding-top:.05em}
.price-card .amount{font-family:var(--font-display);font-weight:700;font-size:1.75rem;line-height:1.25;margin-top:.7rem;padding-top:.05em}
.price-card .amount small{display:block;font-family:var(--font-body);font-weight:500;font-size:.85rem;color:var(--muted);margin-top:.15rem}
.price-card--hot .amount small{color:var(--muted)}
.price-card ul{list-style:none;margin:.9rem 0 1.3rem;padding:0;display:grid;gap:.4rem;font-size:.92rem}
.price-card ul li{padding-left:1.25rem;position:relative}
.price-card ul li::before{content:"✓";position:absolute;left:0;color:var(--teal-600);font-weight:700}
.price-card--hot ul li::before{color:var(--teal-600)}
.price-card .btn{margin-top:auto}
.offer-rows{display:grid;gap:.8rem;margin-top:1.6rem}
@media(min-width:768px){.offer-rows{grid-template-columns:1fr 1fr}}
.offer{padding:.95rem 0 0;font-size:.93rem;border-top:1px solid var(--line)}
.offer--coral b{color:var(--coral-600)}
.offer--teal b{color:var(--teal-700)}
.offer b{font-weight:700}

/* ---------- FAQ: dialogue ---------- */
.faq{max-width:46rem}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex}
.faq summary::-webkit-details-marker{display:none}
.faq summary .bubble{background:transparent;box-shadow:none;font-weight:700;padding:1rem 2.4rem 1rem 0;position:relative;max-width:none;width:100%;border-radius:0}
.faq summary .bubble::after{content:"+";position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--coral-500);transition:transform .18s ease}
.faq details[open] summary .bubble::after{transform:translateY(-50%) rotate(45deg)}
.faq .answer{display:flex;gap:.55rem;align-items:flex-start;padding-bottom:1rem}
.faq .answer .avatar{width:1.9rem;height:1.9rem;font-size:.62rem}
.faq .answer .bubble{background:transparent;box-shadow:none;max-width:60ch;border-radius:0;padding-top:0}

/* ---------- Enquiry ---------- */
.enquiry-grid{display:grid;gap:2.5rem;margin-top:2.2rem;align-items:start}
@media(min-width:900px){.enquiry-grid{grid-template-columns:.85fr 1.15fr}}
.zalo-first p{margin-top:.8rem;font-size:.95rem}
.form-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.form-card form{padding:1.25rem;display:grid;gap:.95rem}
@media(min-width:900px){.form-card form{padding:1.4rem}}
.field{display:grid;gap:.35rem}
.form-status{font-size:.9rem;font-weight:600;min-height:1.2em;margin:0}
.form-status:empty{display:none}
.flabel{font-size:.8rem;font-weight:600;color:var(--muted)}
.form-2col{display:grid;gap:.9rem}
@media(min-width:640px){.form-2col{grid-template-columns:1fr 1fr}}
input,select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid #D9D3C6;border-radius:10px;padding:.8rem .95rem}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:3px solid var(--teal-100);border-color:var(--teal-600)}
textarea{resize:vertical}

/* ---------- Footer ---------- */
.site-foot{padding:3rem 0 2.2rem;border-top:1px solid var(--line)}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start}
.site-foot .brand img{height:3.2rem}
.foot-tag{margin-top:.6rem;font-size:.92rem;max-width:34ch}
.foot-links{display:flex;gap:1.2rem;font-size:.92rem}
.foot-links a{color:var(--muted)}
.foot-links a:hover{color:var(--ink)}
.copyright{width:100%;font-size:.78rem;color:var(--muted)}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:.6rem;justify-content:center;padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line)}
.sticky-cta .btn{flex:1;max-width:18rem;padding:.7rem .5rem;font-size:.88rem}
.sticky-cta .btn--zalo{background:transparent;color:var(--zalo);border:1px solid var(--line-strong)}
.sticky-cta .btn--zalo:hover{background:var(--teal-100)}
.sticky-cta .btn--primary{flex:1.35}
.sticky-cta.is-hidden{display:none}
@media(min-width:768px){.sticky-cta .btn{flex:0 1 16rem}}
body{padding-bottom:calc(4.4rem + env(safe-area-inset-bottom))}
@media(min-width:1024px){.sticky-cta{display:none}body{padding-bottom:0}}



/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}