/* Chữ cọ khô cho "Yah": Knewave (Tyler Finck, SIL OFL 1.1, xem licenses/) */
@font-face{font-family:"Knewave";src:url("knewave.33e01e7b.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --cream:#F6F1E8; --cream-2:#EFE6D6; --paper:#FFFDF9;
  --charcoal:#262624; --ink:#2E2B26; --muted:#6F675B;
  --wood:#C9A77C; --brush:#B59570; --wood-dark:#7F6240; --leaf:#4F6B3F; --leaf-soft:#E4EBDB;
  --line:#E3D9C8; --radius:20px; --header-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Be Vietnam Pro",system-ui,sans-serif;background:var(--cream);color:var(--ink);line-height:1.65;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.on-dark:focus-visible{outline-color:var(--wood)}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--charcoal);color:var(--cream);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:12px}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--wood-dark)}
h1,h2,h3{line-height:1.2;font-weight:600}
h2{font-family:"Lora",Georgia,serif;font-size:clamp(1.8rem,3.6vw,2.7rem);margin:.5rem 0 1rem;font-weight:500}
section{padding:88px 0}
@media(max-width:600px){section{padding:64px 0}}
.lead{color:var(--muted);max-width:640px;font-size:1.05rem}
.center{text-align:center}.center .lead{margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;font:inherit;font-weight:600;line-height:1.3;text-align:center;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-dark{background:var(--charcoal);color:var(--cream)}
.btn-line{border-color:var(--charcoal);color:var(--charcoal);background:transparent}
.btn-light{background:var(--paper);color:var(--charcoal)}
.btn-line-light{border-color:rgba(255,255,255,.75);color:#fff;background:transparent}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* header */
header{position:sticky;top:0;z-index:30;background:rgba(246,241,232,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;height:var(--header-h);gap:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;flex-shrink:0}
.brand img{width:52px;height:50px;mix-blend-mode:multiply;object-fit:contain}
.brand b{font-size:1.2rem;letter-spacing:.22em;font-weight:500}
.nav-links{display:flex;gap:26px;list-style:none}
.nav-links a{text-decoration:none;font-size:.93rem;color:var(--muted);display:inline-block;padding:10px 0}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-links a[aria-current]{font-weight:600}
.nav-cta{padding:10px 18px;font-size:.9rem;white-space:nowrap}
/* Cáo Xanh nấp sau nút CTA, hover/focus thì trượt ra ôm đầu bo tròn bên phải.
   Lớp: nút (z 1) đè lên khung .fox-clip (z 0, overflow hidden). Khung kéo từ mép trên của cáo khi ló ra tới đáy nút,
   nên lúc nấp mọi phần ngoài nút đều bị cắt thật, chỉ chóp tai trái nhô lên mép trên.
   Toạ độ theo ảnh cao-xanh.png (180×195): giữa hai tay ở 59% chiều cao; 9% trên cùng chỉ có chóp tai trái.
   --fox: chiều rộng mascot, --cta-h: chiều cao nút, --hide-x: khoảng lùi khi nấp (đủ để thân, đuôi nằm trong đường bo). */
.cta-wrap{--fox:47px;--cta-h:42px;--hide-x:60px;position:relative;display:inline-flex;flex-shrink:0;margin-right:calc(var(--fox) * .87)}
.nav-cta{position:relative;z-index:1;height:var(--cta-h)}
.nav-cta:hover{transform:none}
.fox-clip{position:absolute;z-index:0;left:0;right:calc(var(--fox) * -.87);top:calc(var(--cta-h) / 2 - var(--fox) * .639);bottom:0;overflow:hidden}
.fox{position:absolute;right:0;top:0;width:var(--fox);max-width:none;height:auto;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(60,40,10,.18));
  transform:translate(calc(var(--fox) * .13 - var(--hide-x)), calc(var(--fox) * .5415 - var(--cta-h) / 2));transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.nav-cta:focus-visible + .fox-clip .fox,.cta-wrap.peek .fox{transform:none}
@media(hover:hover){.cta-wrap:hover .fox{transform:none}}
@media(prefers-reduced-motion:reduce){.fox{transition:none}}
.nav-toggle{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;place-items:center;flex-shrink:0}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;transition:transform .2s,background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:960px){
  .nav-toggle{display:grid;order:3}
  .cta-wrap{order:2}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--cream);border-bottom:1px solid var(--line);padding:8px 20px 16px;box-shadow:0 18px 30px -18px rgba(0,0,0,.25)}
  .nav-links a{display:block;padding:12px 4px;font-size:1rem;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav-links li:last-child a{border-bottom:0}
  .js .nav-links:not(.open){display:none}
}
@media(max-width:480px){
  .cta-wrap{--fox:42px;--cta-h:38px;--hide-x:54px}
  nav{gap:10px}
  .brand{gap:6px}
  .brand img{width:42px;height:40px}
  .brand b{font-size:1rem;letter-spacing:.14em}
  .nav-cta{padding:9px 12px;font-size:.8rem}
}
@media(max-width:430px){.brand b{display:none}} /* chừa chỗ cho Cáo Xanh cạnh nút CTA */

/* hero */
.hero{padding:56px 0 72px}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.hero h1{font-family:"Lora",serif;font-weight:500;font-size:clamp(2.6rem,6.2vw,4.6rem);letter-spacing:-.01em;margin:.8rem 0 1.2rem}
.hero h1 .say,.hero h1 .tea{color:var(--charcoal)}
/* Cáo Xanh reo "Yah!" theo ảnh mẫu đã chốt, mọi số đo tính theo em của tiêu đề (1em = cỡ chữ h1):
   cao 2,28em (tai ngang dòng giới thiệu, chân ngang đáy dòng "to Tea."), tay cáo cách chữ Yah 0,5em,
   miệng thấp hơn giữa chữ Yah 0,2em; 3 vạch "tiếng hét" màu be nằm giữa chữ và miệng; bóng mờ dưới chân.
   cao-xanh-reo.png (240×276, cắt sát nhân vật): miệng ở 49% chiều cao, tay chụm ở mép trái, 10% trên cùng chỉ có tai (từ 33% chiều ngang). */
.hero h1{--hf:2.28em}
.yah-wrap{position:relative;display:inline-block}
.hero-fox-box{position:absolute;left:calc(100% + .5em);top:calc(50% + .2em - var(--hf) * .49);height:var(--hf);pointer-events:none;
  animation:fox-cheer .7s cubic-bezier(.3,.7,.3,1) .35s both}
.hero-fox-box::after{content:"";position:absolute;left:8%;right:4%;bottom:-.05em;height:.16em;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(60,40,10,.22),rgba(60,40,10,0) 70%)}
.hero-fox{display:block;height:100%;width:auto;max-width:none}
.hero-shout{position:absolute;left:calc(100% + .04em);top:calc(50% + .15em - .24em);width:.42em;height:.48em;overflow:visible;pointer-events:none;
  fill:none;stroke:var(--brush);stroke-width:4.5;stroke-linecap:round;transform-origin:100% 50%;animation:shout .45s ease-out .8s both}
.hero h1 .yah{animation:yah-pop .5s ease-out .85s both}
/* Một lần khi vào trang: cáo nhún, vạch tiếng hét bung ra, chữ Yah nảy nhẹ. translate/scale riêng để không đè transform xoay của chữ. */
@keyframes fox-cheer{0%{translate:0 0}35%{translate:0 -.14em}65%{translate:0 .02em}100%{translate:0 0}}
@keyframes shout{0%{opacity:0;scale:.3 1}100%{opacity:1;scale:1}}
@keyframes yah-pop{0%{scale:1}40%{scale:1.09}70%{scale:.98}100%{scale:1}}
@media(prefers-reduced-motion:reduce){.hero-fox-box,.hero-shout,.hero h1 .yah{animation:none}}
/* Màn hình nhỏ hơn 1188px: chữ tiêu đề co theo màn hình còn dòng giới thiệu giữ cỡ, nên chừa thêm khoảng phía trên
   bằng phần tai cáo nhô lên (giữa chữ Yah ở .57em từ đỉnh tiêu đề) + .5rem để tai không chạm dòng giới thiệu. */
@media(max-width:1187px){.hero h1{margin-top:calc(var(--hf) * .49 - .77em + .5rem)}}
@media(max-width:600px){.hero h1{--hf:2.1em}}
/* Yah: nét cọ khô. Mặt nạ vệt ngang tạo độ sần, phần lớn nét vẫn đặc. */
.yah{display:inline-block;font-family:"Knewave","Lora",serif;font-style:normal;font-weight:400;color:var(--brush);font-size:1.18em;line-height:1;letter-spacing:.01em;padding:.06em .12em .1em .04em;margin:-.06em 0 -.1em -.02em;transform:rotate(-4deg);transform-origin:20% 70%;vertical-align:-.02em;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 10.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .3' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -14 10.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size:2.4em 1.2em;mask-size:2.4em 1.2em}
.hero-photo{position:relative}
.hero-photo img{border-radius:28px;aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:0 30px 60px -20px rgba(60,40,10,.35)}
.hero-tag{position:absolute;left:-28px;bottom:40px;background:var(--paper);border-radius:16px;padding:14px 18px;box-shadow:0 14px 34px rgba(0,0,0,.12);font-size:.88rem;max-width:240px}
.hero-tag b{display:block;font-size:.95rem}
.hero-tag span{color:var(--muted)}
@media(max-width:860px){.hero{padding-top:36px}.hero-grid{grid-template-columns:1fr;gap:36px}.hero-photo{max-width:460px;width:100%;margin:0 auto}.hero-tag{left:12px;bottom:16px}}

/* strip */
.strip{background:var(--charcoal);color:var(--cream);padding:22px 0;overflow:hidden;white-space:nowrap}
.strip-track{display:inline-block;animation:scroll 32s linear infinite;font-family:"Lora",serif;font-size:1.25rem;font-style:italic}
.strip-track span{margin:0 28px;opacity:.9}
.strip-track i{color:var(--wood);font-style:normal}
@keyframes scroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* featured products */
.sig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.sig{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.sig img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .5s}
.sig:hover img{transform:scale(1.04)}
.sig-img{overflow:hidden}
.sig-body{padding:22px;display:flex;flex-direction:column;gap:6px;flex:1}
.sig-body h3{font-size:1.15rem}
.sig-body p{font-size:.92rem;color:var(--muted)}
@media(max-width:860px){.sig-grid{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* menu */
.menu{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 30px}
.tab{border:1px solid var(--line);background:var(--cream);padding:9px 18px;border-radius:999px;font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;color:var(--ink)}
.tab[aria-selected="true"]{background:var(--charcoal);color:var(--cream);border-color:var(--charcoal)}
.menu-list{display:grid;grid-template-columns:1fr 1fr;gap:4px 56px;list-style:none}
.menu-list li{padding:14px 0;border-bottom:1px dashed var(--line);font-weight:500}
.menu-list li span{display:block;font-size:.84rem;color:var(--muted);font-weight:400}
.menu-note{font-size:.88rem;color:var(--muted);margin-top:22px}
@media(max-width:720px){.menu-list{grid-template-columns:1fr}}

/* brand story: bố cục biên tập, tiêu đề cố định bên trái, 5 đoạn bên phải */
.story{display:grid;grid-template-columns:.9fr 1.1fr;column-gap:72px}
.story-head{position:sticky;top:calc(var(--header-h) + 40px);align-self:start}
.story-head .lead{margin-top:6px}
.story-photo{margin-top:28px;border-radius:22px;overflow:hidden;box-shadow:0 24px 48px -24px rgba(60,40,10,.35)}
.story-photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media(max-height:760px){.story-head{position:static}}
.chapters{list-style:none;border-top:1px solid var(--line)}
.chapters li{padding:30px 0;border-bottom:1px solid var(--line)}
.chapters h3{font-family:"Lora",serif;font-weight:500;font-size:1.32rem;margin-bottom:10px;display:flex;align-items:baseline;gap:14px}
.chapters h3 span{font-family:"Be Vietnam Pro",sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.14em;color:var(--wood-dark);flex-shrink:0}
.chapters p{color:var(--muted);font-size:1.02rem;max-width:62ch}
.story-close{grid-column:1/-1;text-align:center;margin-top:64px}
.story-slogan{font-family:"Lora",serif;font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.2;color:var(--charcoal)}
.story-tagline{font-family:"Lora",serif;font-style:italic;font-size:1.2rem;color:var(--muted);margin:10px 0 28px}
@media(max-width:860px){.story{grid-template-columns:1fr}.story-head{position:static;margin-bottom:28px}.story-photo{max-width:560px}.chapters li{padding:24px 0}.story-close{margin-top:48px}}

/* space (renders) */
.space{background:var(--charcoal);color:var(--cream)}
.space .lead{color:#CBC3B4}
.space .eyebrow{color:var(--wood)}
.gallery{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:16px;margin-top:40px}
.gallery figure{position:relative;border-radius:var(--radius);overflow:hidden}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;min-height:220px}
.gallery figcaption{position:absolute;left:14px;bottom:14px;right:14px;width:fit-content;background:rgba(38,38,36,.82);color:var(--cream);padding:6px 12px;border-radius:999px;font-size:.82rem}
.render-note{margin-top:18px;font-size:.88rem;color:#CBC3B4}
@media(max-width:860px){.gallery{grid-template-columns:1fr;grid-template-rows:auto}.gallery figure:first-child{grid-row:auto}}

/* partner CTA block */
.join{background:var(--leaf);color:#fff;border-radius:28px;padding:56px;display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.join h2{color:#fff}
.join .eyebrow{color:#F3E7D0}
.join .lead{color:rgba(255,255,255,.92)}
.join ul{list-style:none;display:grid;gap:10px}
.join li{padding-left:26px;position:relative}
.join li::before{content:"✓";position:absolute;left:0;color:#F3E7D0;font-weight:700}
@media(max-width:860px){.join{grid-template-columns:1fr;padding:34px 22px;gap:24px}}

/* faq */
.faq{max-width:820px}
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{font-weight:600;cursor:pointer;font-size:1.03rem;padding-right:8px}
details p{color:var(--muted);margin-top:10px}

/* partner page */
.p-hero{padding:56px 0 80px}
.p-hero .hero-grid{align-items:center}
.p-hero h1{font-family:"Lora",serif;font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);margin:.8rem 0 1.2rem}
.p-hero figure{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(60,40,10,.35)}
.p-hero figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.p-hero figcaption{position:absolute;left:14px;bottom:14px;background:rgba(38,38,36,.82);color:var(--cream);padding:6px 12px;border-radius:999px;font-size:.82rem}
.model{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.model div{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.model b{display:block;font-size:1.1rem;margin-bottom:6px}
.model p{color:var(--muted);font-size:.95rem}
.support{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px;list-style:none}
.support li{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px}
.support li i{font-style:normal;font-size:1.5rem;display:block;margin-bottom:10px}
.support li b{display:block;margin-bottom:4px}
.support li span{color:var(--muted);font-size:.9rem;display:block}
.fine{font-size:.9rem;color:var(--muted);margin-top:20px}
.process{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px;counter-reset:pr}
.process li{counter-increment:pr;border-top:3px solid var(--wood);padding-top:16px}
.process li::before{content:"Bước " counter(pr);display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--wood)}
.process li b{display:block;margin:6px 0 4px;font-size:1.05rem}
.process li span{font-size:.9rem;color:#CBC3B4;display:block}
.budget{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.budget ul{list-style:none;display:grid;gap:12px}
.budget li{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
@media(max-width:960px){.support{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.model,.budget{grid-template-columns:1fr}}
@media(max-width:520px){.support,.process{grid-template-columns:1fr}}

/* footer: 3 cột cùng nhịp (tiêu đề cột thẳng hàng với logo), đường kẻ mảnh, dòng bản quyền */
footer{background:var(--charcoal);color:#BDB5A6;padding:64px 0 28px;font-size:.92rem}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;align-items:start}
.foot b{color:var(--cream);display:flex;align-items:center;min-height:56px;margin-bottom:6px;font-size:.95rem;letter-spacing:.02em}
.foot ul{list-style:none;display:grid;gap:2px}
.foot ul a{display:inline-block;padding:7px 0}
.foot a{color:#E2DBCD;text-underline-offset:3px}
.foot a:hover{color:#fff}
.foot-brand p{max-width:34ch;line-height:1.7}
.foot-brand .foot-tagline{margin-top:0;font-family:"Lora",serif;font-style:italic;font-size:1.02rem;color:var(--cream)}
.foot-logo{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot-logo img{width:56px;height:56px;border-radius:50%;background:#fff;object-fit:contain;padding:4px}
.foot-logo span{color:var(--cream);letter-spacing:.22em;font-size:1.2rem}
.foot-note{display:block;color:#BDB5A6}
.foot-bottom{margin-top:48px}
.foot-bottom p{border-top:1px solid rgba(239,230,214,.16);padding-top:20px;font-size:.82rem;color:#B3AB9C;letter-spacing:.01em}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr;gap:32px 40px}.foot-brand{grid-column:1/-1}.foot b{min-height:0;margin-bottom:4px}}
@media(max-width:480px){footer{padding:48px 0 24px}.foot{grid-template-columns:1fr;gap:28px}.foot-bottom{margin-top:36px}}

/* đăng ký tư vấn (Google Forms nhúng) */
.signup{background:var(--cream-2);border:1px solid var(--line);border-radius:28px;padding:56px;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.signup-head{position:sticky;top:calc(var(--header-h) + 32px)}
.signup-head .fine a,.signup-form .fine a{color:var(--leaf);font-weight:600}
/* Chiều cao theo nội dung Form thật (đo 11/2026) + chỗ cho thông báo lỗi, để thấy nút Gửi không cần cuộn trong khung */
.signup-form iframe{display:block;width:100%;height:2160px;border:0;border-radius:18px;background:var(--paper)}
.signup-form .fine{text-align:center}
.signup.no-form{display:block;text-align:center}
.signup.no-form .lead{margin:0 auto}
.signup.no-form .btn-row{justify-content:center}
@media(max-width:860px){.signup{grid-template-columns:1fr;padding:34px 20px;gap:28px}.signup-head{position:static}.signup-form iframe{height:2120px}}
@media(max-width:480px){.signup{padding:28px 12px;border-radius:22px}.signup-head{padding:0 6px}.signup-form iframe{height:2420px}}

/* form HTML đăng ký tư vấn (gửi tới Apps Script) */
.yform{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:32px;display:grid;gap:22px}
.yform-note{font-size:.84rem;color:var(--muted)}
.field{display:grid;gap:8px;border:0;min-width:0}
.field>label,.field legend{font-weight:600;font-size:.95rem}
.field legend{padding:0;margin-bottom:8px}
.field small{color:var(--muted);font-size:.84rem;line-height:1.5}
.req{color:#A4502F}
.yform input[type=text],.yform input[type=tel],.yform textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px}
.yform textarea{resize:vertical;min-height:110px}
.yform input:focus,.yform textarea:focus{border-color:var(--leaf)}
.yform input[type=radio],.yform input[type=checkbox]{accent-color:var(--leaf);width:18px;height:18px;flex-shrink:0;margin:0}
.choice label{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#fff;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;font-weight:400;font-size:.95rem}
.choice label:has(input:checked){border-color:var(--leaf);background:var(--leaf-soft)}
.consent label{display:flex;align-items:flex-start;gap:10px;font-weight:400;font-size:.92rem;cursor:pointer}
.consent input{margin-top:3px!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.yform-error{background:#FBEDE7;border:1px solid #E6B7A3;color:#7A2E14;border-radius:12px;padding:12px 14px;font-size:.92rem}
.yform-actions .btn{min-width:190px}
.btn[disabled]{opacity:.72;cursor:progress;transform:none}
.yform .fine{margin-top:0;text-align:center}
.yform .fine a{color:var(--leaf);font-weight:600}
html:not(.js) .yform{display:none}
/* sau khi gửi thành công: thu gọn thành khối cảm ơn, không giữ chiều cao cố định */
.signup.is-done{display:block;padding:44px 24px}
.signup-thanks{text-align:center}
.signup-thanks:focus{outline:none}
.signup-thanks h2{margin-top:0}
.signup-thanks .lead{margin:0 auto}
.signup-thanks .btn-row{justify-content:center;margin-top:22px}
.thanks-icon{width:56px;height:56px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:700;margin:0 auto 16px}
@media(max-width:480px){.yform{padding:22px 16px;border-radius:18px}.yform-actions .btn{width:100%}.signup.is-done{padding:34px 16px}}