/* Layout: brochure proportions (1080 units = 100cqw) for the story pages, plus a sticky bar, USP cards, occasion cards and ordering steps for conversion */
:root{
  --paper:#f5f0e4; --paper2:#fbf8f0; --ink:#4a3a2a; --tag:#5e4b3c; --gold:#8e6420; --gold2:#b0842a; --band:#d6b16d;
  --pink:#ed5e85; --olive:#7e9b5c; --red:#c8462e; --zalo:#0068ff; --line:rgba(74,58,42,.18);
  --font:'Baloo 2','Trebuchet MS',sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:#f5f0e4;color:var(--ink);font-family:var(--font);font-size:clamp(15px,1.85vw,20px);line-height:1.3;
  padding-left:var(--gl);padding-right:var(--gr);padding-block:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:#f5f0e4;z-index:90}
img{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;container-type:inline-size;position:relative}
.wrap *{min-width:0}
p{margin:0}
h1,h2{margin:0;font-family:var(--font);font-weight:600;text-transform:uppercase;line-height:1.15;text-wrap:balance;
  background:linear-gradient(90deg,var(--gold),var(--gold2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)}
h2{font-size:clamp(20px,3.7cqw,40px)}
h3{margin:0;font-family:var(--font);font-weight:600}
.head{position:relative;text-align:center;margin:8cqw 0 3cqw}
.head h2{display:inline-block;position:relative}
.dec{position:absolute;height:auto;pointer-events:none}
.sub{text-align:center;max-width:64ch;margin:-1.4cqw auto 3.4cqw;font-size:clamp(15px,1.85cqw,20px)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.62em 1.35em;border-radius:99px;font:700 clamp(15px,1.9cqw,19px)/1.2 var(--font);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(74,58,42,.18)}
.btn .zi{width:1.15em;height:1.15em;flex:none}
.btn-primary{background:var(--pink);color:#fff}
.btn-zalo{background:var(--zalo);color:#fff}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cta-strip{text-align:center;margin-top:4cqw}

/* sticky top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:80;margin-inline:calc(-1*var(--gl)) calc(-1*var(--gr));padding:8px var(--gr) 8px var(--gl);background:#f5f0e4;border-bottom:1px solid var(--line)}
.top .in{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:10px;justify-content:space-between}
.brand{font:700 20px/1 var(--font);color:var(--pink);letter-spacing:.04em;text-decoration:none;white-space:nowrap}
.brand small{font-weight:500;color:var(--tag);letter-spacing:.02em;font-size:13px;margin-left:6px}
.top .right{display:flex;align-items:center;gap:10px}
.langs{display:flex;gap:6px}
.flag{width:36px;height:26px;padding:0;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;opacity:.55;overflow:hidden;display:block}
.flag svg{width:100%;height:100%;display:block;border-radius:3px}
.flag[aria-current]{opacity:1;border-color:var(--ink)}
.top .btn{padding:.35em .95em;font-size:15px}
@media(max-width:520px){.brand small{display:none}.top .btn span{display:none}.top .btn{padding:.4em .7em}}

/* hero */
.hero{position:relative;text-align:center;padding-top:5.4cqw}
.hero .tag{font-size:clamp(17px,3cqw,33px);line-height:1.2;color:var(--tag);font-weight:500;position:relative;z-index:1}
.hero .logo{width:clamp(54px,8cqw,90px);margin:5cqw auto 0;position:relative;z-index:1}
.hero .birdL{left:-.5cqw;top:10.4cqw;width:27cqw}
.hero .branchR{right:-2.4cqw;top:1.9cqw;width:35cqw}
.hero .h1w{position:relative;display:inline-block;margin-top:6cqw}
.hero h1{font-size:clamp(22px,4.2cqw,46px)}
.hero .dragon{right:-5.5cqw;top:-4.2cqw;width:7.4cqw}
.hero .lede{max-width:56ch;margin:2cqw auto 3cqw;font-size:clamp(16px,2cqw,22px);position:relative;z-index:1}
.hero .cta-row{position:relative;z-index:1}
.hero .trust{margin-top:2.6cqw;font-size:clamp(13px,1.6cqw,17px);color:var(--tag);position:relative;z-index:1}

/* USP cards */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.usp{border-radius:24px;padding:22px 20px 24px;position:relative;min-height:290px;display:flex;flex-direction:column;gap:8px;background:var(--bg);color:var(--fg)}
.usp:nth-child(even){margin-top:22px}
.usp .ico{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.3);display:grid;place-items:center}
.usp .ico svg{width:32px;height:32px}
.usp .stat{font:700 clamp(38px,5.4cqw,58px)/1 var(--font);margin-top:10px;letter-spacing:-.01em}
.usp .stat small{font-size:.38em;font-weight:600;letter-spacing:.02em;display:block;margin-top:4px}
.usp h3{font-size:clamp(18px,2.1cqw,22px);line-height:1.15;margin-top:6px}
.usp p{font-size:clamp(14px,1.55cqw,17px);line-height:1.3}
.u1{--bg:#7e9b5c;--fg:#1f2a14}.u2{--bg:#d6b16d;--fg:#3a2a10}.u3{--bg:#ed5e85;--fg:#3a1220}.u4{--bg:#c8462e;--fg:#fff}
@media(max-width:900px){.usps{grid-template-columns:repeat(2,1fr)}.usp{min-height:0}}
@media(max-width:520px){.usps{grid-template-columns:1fr}.usp:nth-child(even){margin-top:0}}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:.9cqw;margin-top:4cqw}
.three img{width:100%;aspect-ratio:283/341;object-fit:cover;border-radius:4px}

/* occasions */
.occ{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{background:var(--paper2);border:1.5px solid var(--line);border-radius:20px;overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card .b{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:clamp(18px,2.1cqw,22px);color:var(--gold)}
.card p{font-size:clamp(14px,1.55cqw,17px);line-height:1.3;flex:1}
.card .btn{padding:.45em 1em;font-size:15px;align-self:flex-start}
@media(max-width:900px){.occ{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.occ{grid-template-columns:1fr}}

/* story */
.story{display:grid;grid-template-columns:1.25fr 1fr;gap:3cqw;align-items:start}
.story p{text-align:justify;line-height:1.28;margin-bottom:.7em}
.story .ph{display:grid;gap:1.5cqw}
.story img{width:100%;height:auto}
@media(max-width:640px){.story{grid-template-columns:1fr}}

/* sweeteners */
.four{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}
.four figure{margin:0}
.four img{width:100%;aspect-ratio:1;object-fit:cover}
.four figcaption{margin-top:.7cqw;border:1.5px solid var(--ink);border-radius:8px;text-align:center;font-weight:500;font-size:clamp(12px,1.75cqw,19px);padding:.1cqw .3cqw;white-space:nowrap}
@media(max-width:640px){.four{grid-template-columns:repeat(2,1fr);gap:10px}.four figcaption{font-size:14px;padding:2px 4px;margin-top:6px}}

/* farms */
.farms{max-width:90%;margin:0 auto;display:grid;gap:2cqw}
.farms .r3{display:grid;grid-template-columns:repeat(3,1fr);gap:.9cqw}
.farms .r2{display:grid;grid-template-columns:repeat(2,1fr);gap:.9cqw}
.farms figure{margin:0;text-align:center;font-weight:500;font-size:clamp(12px,1.6cqw,18px);line-height:1.25}
.farms img{width:100%;object-fit:cover;margin-bottom:.8cqw}
.r3 img{aspect-ratio:237/336}.r2 img{aspect-ratio:358/312}
@media(max-width:640px){.farms{max-width:100%}}

/* collage rows */
.row{display:grid;gap:.9cqw;margin-top:.9cqw}
.row img{width:100%;height:auto}
.row img.fill{height:100%;object-fit:cover}
.stack{display:grid;gap:.7cqw;align-content:start}
.gifts{display:grid;grid-template-columns:1fr 1fr;gap:1.3cqw}
.gifts>div{display:grid;gap:1.3cqw;align-content:start}
.gifts img{width:100%;height:auto}
.party{display:grid;grid-template-columns:repeat(3,1fr);gap:1cqw}
.party img{width:100%;aspect-ratio:1;object-fit:cover}

/* co-create */
.lead{text-align:center;text-transform:uppercase;max-width:84cqw;margin:0 auto 3cqw;letter-spacing:.02em;font-size:clamp(13px,1.85cqw,20px)}
.lead b{font-weight:700}.g{color:var(--gold);font-weight:700}
.tubs{display:grid;grid-template-columns:repeat(4,1fr);gap:.8cqw}
.tubs img{width:100%;aspect-ratio:1;object-fit:cover}
.partner{text-align:center;max-width:80cqw;margin:4cqw auto 0}

/* boutique + map */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:2cqw}
.mapcard{position:relative;border-radius:22px;overflow:hidden;padding:26px 24px;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  background:#ece4cf;background-image:linear-gradient(rgba(74,58,42,.07) 2px,transparent 2px),linear-gradient(90deg,rgba(74,58,42,.07) 2px,transparent 2px),linear-gradient(35deg,transparent 46%,rgba(255,255,255,.7) 46% 49%,transparent 49%),linear-gradient(120deg,transparent 60%,rgba(126,155,92,.35) 60% 80%,transparent 80%);
  background-size:46px 46px,46px 46px,100% 100%,100% 100%}
.mapcard .pin{position:absolute;top:22px;right:24px;width:44px;color:var(--red);filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.mapcard .pin svg{width:100%;height:auto;display:block}
.mapcard h3{font-size:clamp(20px,2.4cqw,26px);color:var(--ink)}
.mapcard address{font-style:normal;font-size:clamp(15px,1.85cqw,20px)}
.visit .ph{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.visit .ph img{width:100%;height:100%;object-fit:cover;border-radius:14px;aspect-ratio:1}
.visit .ph img:first-child{grid-row:span 2;aspect-ratio:auto}
@media(max-width:720px){.visit{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.step{background:var(--paper2);border:1.5px solid var(--line);border-radius:20px;padding:18px 18px 20px;display:flex;flex-direction:column;gap:6px}
.step .n{font:700 40px/1 var(--font);color:var(--pink)}
.step h3{font-size:clamp(18px,2.1cqw,22px);color:var(--gold)}
.step p{font-size:clamp(14px,1.6cqw,17px);line-height:1.3}
@media(max-width:700px){.steps{grid-template-columns:1fr}}

/* contact band */
.bandw{position:relative;margin:10cqw 5.1cqw 15cqw}
.band{background:var(--band);border-radius:3.7cqw;padding:3.8cqw 3cqw 3.4cqw;position:relative}
.band h2{display:block;text-align:center;background:none;-webkit-text-fill-color:currentColor;color:var(--ink);font-size:clamp(18px,3.15cqw,34px);font-weight:500}
.band .cols{display:grid;grid-template-columns:290fr 272fr 380fr;gap:1.5cqw;margin-top:3.2cqw}
.band .c{display:flex;gap:1.2cqw;align-items:flex-start;font-size:clamp(13px,1.85cqw,20px)}
.band .c svg{flex:none;width:2.8cqw;min-width:20px;height:auto;margin-top:.5cqw;color:var(--ink)}
.band .c b{display:block;font-weight:700;overflow-wrap:anywhere}
.band .c a{color:inherit;text-decoration:none}
.band .cta-row{margin-top:3cqw}
.copy{margin-top:4px;font:600 13px/1 var(--font);border:1.5px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:4px 10px;cursor:pointer}
.q{position:absolute;left:9.5cqw;top:-3.8cqw;width:6.2cqw;color:var(--ink)}
.birdB{left:-6.9cqw;top:auto;bottom:-16cqw;width:20.6cqw}
.branchB{right:-9.1cqw;top:-8.8cqw;width:25.9cqw}
@media(max-width:640px){.band .cols{grid-template-columns:1fr;gap:12px}.band .c svg{width:22px}
  .bandw{margin:12cqw 2cqw 24cqw}.birdB{bottom:-16cqw;left:-4cqw;width:24cqw}.branchB{width:28cqw;right:-6cqw;top:-10cqw}
  .band{padding:7cqw 5cqw 6cqw}.band h2{margin-top:3cqw}.q{left:6cqw;top:-5cqw;width:8cqw}}


/* wholesale */
.whole{scroll-margin-top:72px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px;align-items:center;margin-top:8cqw;background:var(--paper2);border:1.5px solid var(--line);border-radius:26px;padding:clamp(20px,3.4cqw,40px)}
.whole h2{font-size:clamp(22px,3.2cqw,34px);margin-bottom:12px}
.whole p{font-size:clamp(15px,1.8cqw,19px);line-height:1.3;margin-bottom:12px}
.whole ul{margin:0 0 16px;padding-left:1.2em;font-size:clamp(15px,1.8cqw,19px)}
.whole li{margin-bottom:4px}
.whole .wmeta{font-size:clamp(13px,1.5cqw,16px);color:var(--tag);margin:14px 0 0;overflow-wrap:anywhere}
.whole .wi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.whole .wi img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px}
.wl{color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.whole{grid-template-columns:1fr}}

/* floating zalo + toast */
.fz{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));z-index:85;display:flex;align-items:center;gap:8px;background:var(--zalo);color:#fff;border-radius:99px;padding:10px 16px 10px 12px;text-decoration:none;font:700 17px/1 var(--font);box-shadow:0 8px 22px rgba(0,104,255,.38)}
.fz svg{width:26px;height:26px}
.fz:hover{filter:brightness(1.08)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font:600 15px/1.25 var(--font);z-index:95;max-width:min(92vw,420px);text-align:center;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
footer{text-align:center;font-size:14px;color:var(--tag);padding-bottom:90px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn,.toast{transition:none}}