/* MygreenWay · "Hệ sinh thái trong một khối": light mist ground, Greenway leaf green, pebble-shaped photos,
   eco-cube hero, onboarding vine. Bricolage Grotesque (display) + Nunito (body), both with Vietnamese. */
:root{
  --paper:#F5F8F1; --tint:#E7F0DF; --tint2:#DCEBD0; --sheet:#FFFFFF;
  --ink:#10261A; --ink2:#2A4033; --mute:#5B6E60; --line:rgba(16,38,26,.12); --line-d:rgba(255,255,255,.14);
  --leaf:#2F8A3E; --leaf-d:#1E6A2D; --forest:#0E2C1B; --forest-d:#081D11; --lime:#C3E37A; --lime-l:#E6F5C4; --sun:#E9A93A;
  --r:22px; --rs:14px; --pill:999px; --gut:clamp(16px,4vw,48px);
  --disp:'Bricolage Grotesque', 'Nunito', system-ui, sans-serif; --body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1); --sh:0 24px 50px -30px rgba(14,44,27,.35);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink2);font:400 16.5px/1.65 var(--body)}
img{max-width:100%;height:auto;display:block}
a{color:var(--leaf-d)}
h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0;font-optical-sizing:auto}
h1 em,h2 em,h3 em{font-style:normal;color:var(--leaf)}
p{margin:0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.sec{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
.sec.tight{padding-top:50px;padding-bottom:50px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.eyebrow::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--leafsvg) center/contain no-repeat;mask:var(--leafsvg) center/contain no-repeat}
:root{--leafsvg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C9 3 4 9 4 16c0 1.7.4 3.3 1 5 1-4 4-8 9-10-4 3-6.5 6.5-7.5 10.5C15 21 20 15 20 3z'/%3E%3C/svg%3E")}
.h2{font-size:clamp(32px,4.6vw,58px);margin-top:14px;max-width:18ch}
.lede{font-size:clamp(17px,1.5vw,19px);color:var(--mute);max-width:62ch;margin-top:16px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--forest);color:#fff;padding:10px 16px;border-radius:var(--pill)}
.skip:focus{left:8px}
.num{font-variant-numeric:tabular-nums}

/* buttons + chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:var(--pill);border:1.5px solid transparent;font:700 15.5px/1 var(--body);text-decoration:none;cursor:pointer;transition:transform .35s var(--ease),background .3s,box-shadow .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn.leaf{background:var(--leaf);color:#fff;box-shadow:0 14px 30px -16px rgba(47,138,62,.9)}
.btn.leaf:hover{background:var(--leaf-d)}
.btn.lime{background:var(--lime);color:var(--forest)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--sheet)}
.btn.ghost:hover{border-color:var(--leaf)}
.btn.on-dark{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
.btn.sm{min-height:42px;padding:0 18px;font-size:14.5px}
.btn .ar{transition:transform .3s}
.btn:hover .ar{transform:translateX(3px)}
.chip{text-decoration:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--sheet);color:var(--ink);font:600 14.5px/1 var(--body);cursor:pointer;transition:all .25s;white-space:nowrap}
.chip:hover{border-color:var(--leaf)}
.chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}
.chip small{font-weight:700;font-size:12px;opacity:.6}
.chip .ic{width:20px;height:20px}

/* header */
.bar{position:fixed;inset:0 0 auto;z-index:50;padding:12px 0;transition:background .35s,box-shadow .35s,padding .35s}
.bar.solid,.bar.always{background:rgba(245,248,241,.9);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line);padding:8px 0}
.bar-in{display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand .mk{width:40px;height:40px;flex:none}
.brand b{font:700 21px/1 var(--disp);letter-spacing:-.02em}
.brand b i{font-style:normal;color:var(--leaf)}
.brand small{display:block;font:600 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.nav{display:flex;align-items:center;gap:2px}
.nav a{padding:10px 13px;border-radius:var(--pill);text-decoration:none;color:var(--ink2);font-weight:700;font-size:15px;transition:background .25s,color .25s}
.nav a:hover{background:var(--tint)}
.nav a[aria-current="page"]{color:var(--leaf-d);background:var(--tint)}
.nav a.ask{background:var(--forest);color:#fff;padding:10px 18px;margin-left:6px}
.nav a.ask:hover{background:var(--leaf-d)}
html:not(.news-on) [data-nav="bang-tin"]{display:none!important}
#menuBtn{display:none;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--sheet);font:700 15px/1 var(--body);color:var(--ink);cursor:pointer}
#menuBtn i{width:18px;height:10px;border-top:2px solid currentColor;border-bottom:2px solid currentColor}
@media(max-width:1080px){.nav{display:none}#menuBtn{display:inline-flex}}

#mmenu{margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:var(--forest);color:#fff}
#mmenu::backdrop{background:transparent}
#mmenu[open]{display:flex;animation:mm .5s var(--ease)}
@keyframes mm{from{opacity:0;transform:translateY(-12px)}}
.mm-in{width:100%;display:flex;flex-direction:column;padding:18px var(--gut) 30px;overflow:auto;background:radial-gradient(circle at 90% 0%,rgba(195,227,122,.18),transparent 45%)}
.mm-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mm-head .brand{color:#fff}
.mm-head .brand small{color:rgba(255,255,255,.6)}
#menuClose{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-d);background:none;color:#fff;font-size:26px;cursor:pointer}
.mm-list{display:grid;gap:2px;margin-top:4vh}
.mm-list a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-d);text-decoration:none;color:#fff;opacity:0;transform:translateY(12px);animation:mmi .5s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*.04s)}
@keyframes mmi{to{opacity:1;transform:none}}
.mm-list b{font:600 clamp(26px,7vw,40px)/1.1 var(--disp)}
.mm-list small{font-size:13px;color:rgba(255,255,255,.6);text-align:right}
.mm-list a[aria-current="page"] b{color:var(--lime)}

/* hero: eco cube */
.hero{position:relative;padding:clamp(110px,14vh,150px) 0 clamp(50px,7vw,90px);overflow:hidden;background:radial-gradient(1200px 600px at 85% 10%,var(--lime-l),transparent 60%),radial-gradient(800px 500px at 0% 100%,var(--tint2),transparent 60%)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,70px);align-items:center}
.hero h1{font-size:clamp(40px,5.8vw,80px);font-weight:600;letter-spacing:-.035em}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);animation:wup .9s var(--ease) forwards;animation-delay:calc(.1s + var(--d)*.08s)}
@keyframes wup{to{opacity:1;transform:none}}
.hero h1 .hl{position:relative;color:var(--leaf);white-space:nowrap}
.hero h1 .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.06em;height:.26em;background:var(--lime);border-radius:var(--pill);z-index:-1;transform-origin:left;transform:scaleX(0);animation:hl 1s .9s var(--ease) forwards}
@keyframes hl{to{transform:scaleX(1)}}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:34px;max-width:640px}
.door{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:var(--rs);background:rgba(255,255,255,.7);border:1px solid var(--line);text-decoration:none;color:var(--ink);transition:transform .35s var(--ease),border-color .3s,background .3s}
.door:hover{transform:translateY(-3px);border-color:var(--leaf);background:#fff}
.door b{font:600 16px/1.2 var(--disp)}
.door small{font-size:13px;color:var(--mute);line-height:1.4}
.door .n{font:700 12px/1 var(--body);color:var(--leaf)}
.cube-stage{position:relative;aspect-ratio:1;max-width:520px;width:100%;justify-self:center;perspective:1400px}
.cube-orbit{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed rgba(47,138,62,.3);animation:spin 60s linear infinite}
.cube-orbit::before,.cube-orbit::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lime);top:12%;left:12%;box-shadow:0 0 0 6px rgba(195,227,122,.35)}
.cube-orbit::after{top:auto;left:auto;bottom:6%;right:28%;background:var(--leaf);width:10px;height:10px;box-shadow:0 0 0 5px rgba(47,138,62,.18)}
@keyframes spin{to{transform:rotate(360deg)}}
.cube{--cs:min(290px,46vw);position:absolute;left:50%;top:50%;width:var(--cs);aspect-ratio:1;transform-style:preserve-3d;translate:-50% -50%;transform:rotateX(-24deg) rotateY(-38deg);animation:cube 22s var(--ease) infinite}
@keyframes cube{0%,20%{transform:rotateX(-24deg) rotateY(-38deg)}33%,53%{transform:rotateX(-24deg) rotateY(-128deg)}66%,86%{transform:rotateX(-24deg) rotateY(-218deg)}100%{transform:rotateX(-24deg) rotateY(-398deg)}}
.cube .f{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#fff;border:1px solid rgba(16,38,26,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);backface-visibility:hidden}
.cube .f img{width:100%;height:100%;object-fit:cover}
.cube .f span{position:absolute;left:10px;bottom:10px;padding:6px 11px;border-radius:var(--pill);background:rgba(255,255,255,.92);font:700 12.5px/1 var(--body);color:var(--forest)}
.cube .f1{transform:translateZ(calc(var(--cs) / 2))}
.cube .f2{transform:rotateY(90deg) translateZ(calc(var(--cs) / 2))}
.cube .f3{transform:rotateY(180deg) translateZ(calc(var(--cs) / 2))}
.cube .f4{transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2))}
.cube .f5{transform:rotateX(90deg) translateZ(calc(var(--cs) / 2));background:var(--leaf);display:grid;place-items:center}
.cube .f5 svg{width:46%;color:var(--lime)}
.cube-shadow{position:absolute;left:50%;bottom:9%;width:46%;height:8%;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(14,44,27,.28),transparent);filter:blur(4px)}
.cube-tag{position:absolute;padding:10px 14px;border-radius:var(--rs);background:#fff;box-shadow:var(--sh);font-size:13px;line-height:1.35;color:var(--mute);animation:bob 6s ease-in-out infinite}
.cube-tag b{display:block;font:700 20px/1.1 var(--disp);color:var(--ink)}
.cube-tag.t1{top:8%;right:0}
.cube-tag.t2{bottom:16%;left:0;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-8px)}}
@media(max-width:900px){.hero-in{grid-template-columns:minmax(0,1fr)}.cube-stage{max-width:300px;order:-1;margin-top:-20px}.cube{--cs:min(170px,42vw)}.doors{grid-template-columns:minmax(0,1fr)}.door{flex-direction:row;align-items:baseline;gap:10px}.door small{margin-left:auto;text-align:right}}
@media(max-width:520px){.door small{display:none}.cube-tag{font-size:12px;padding:8px 10px}.cube-tag b{font-size:16px}}

/* marquee of brands */
.marq{overflow:hidden;border-block:1px solid var(--line);background:var(--sheet);padding:16px 0}
.marq-in{display:flex;gap:46px;width:max-content;animation:marq 40s linear infinite}
.marq span{display:inline-flex;align-items:center;gap:46px;font:600 clamp(20px,2.4vw,28px)/1 var(--disp);color:var(--ink);white-space:nowrap}
.marq span::after{content:"";width:18px;height:18px;background:var(--leaf);-webkit-mask:var(--leafsvg) center/contain no-repeat;mask:var(--leafsvg) center/contain no-repeat}
@keyframes marq{to{transform:translateX(-50%)}}

/* need grid */
.needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,44%),1fr));gap:12px;margin-top:40px}
.need{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;min-height:150px;padding:18px;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.need:hover{transform:translateY(-4px);border-color:var(--leaf);box-shadow:var(--sh)}
.need .ic{width:42px;height:42px;padding:9px;border-radius:14px;background:var(--tint);color:var(--leaf-d)}
.need b{font:600 18px/1.15 var(--disp)}
.need small{display:block;font-size:13px;color:var(--mute);margin-top:4px}
.need::after{content:"";position:absolute;right:-30px;top:-30px;width:100px;height:100px;border-radius:50%;background:var(--lime-l);opacity:0;transition:opacity .4s}
.need:hover::after{opacity:1}
.need>*{position:relative;z-index:1}

/* product cards */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.pc{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line);overflow:hidden;cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.pc:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(47,138,62,.4)}
.pc .ph{aspect-ratio:1;background:linear-gradient(160deg,#fff,var(--tint));display:grid;place-items:center;overflow:hidden}
.pc .ph img{width:100%;height:100%;object-fit:contain;padding:10px;transition:transform .6s var(--ease)}
.pc:hover .ph img{transform:scale(1.05)}
.pc .bd{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1}
.pc .cat{font:700 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.pc h3{font-size:18px;line-height:1.2}
.pc .sub{font-size:13.5px;color:var(--mute);line-height:1.4}
.pc .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:10px}
.pc .price{font:700 17px/1 var(--disp);color:var(--ink)}
.pc .code{font:700 12px/1 var(--body);color:var(--mute);padding:5px 8px;border-radius:var(--pill);background:var(--paper)}
.pc .vid{position:absolute;top:10px;right:10px;padding:5px 9px;border-radius:var(--pill);background:var(--forest);color:#fff;font:700 11.5px/1 var(--body)}
.shop-top{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:34px 0 14px}
.shop-search{flex:1 1 280px;max-width:420px;display:flex;align-items:center;gap:8px;padding:0 6px 0 18px;min-height:50px;border-radius:var(--pill);background:var(--sheet);border:1px solid var(--line)}
.shop-search input{flex:1;min-width:0;border:0;background:none;font:inherit;color:var(--ink);outline:none}
.shop-count{font-size:14px;color:var(--mute)}
.filters{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin;-webkit-mask:linear-gradient(90deg,#000 92%,transparent);mask:linear-gradient(90deg,#000 92%,transparent)}
.filters+.filters{margin-top:2px}
.flab{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.empty{padding:40px;text-align:center;color:var(--mute);grid-column:1/-1}
.disclaim{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:var(--rs);background:#FFF7E6;border:1px solid #F3DDA9;color:#6B4E12;font-size:14px;line-height:1.5}
.disclaim::before{content:"!";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--sun);color:#fff;font-weight:800;font-size:13px}

/* product dialog */
dialog.sheet{margin:auto 0 auto auto;width:min(720px,100%);max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:var(--paper);color:var(--ink2);box-shadow:-30px 0 80px -30px rgba(0,0,0,.35)}
dialog.sheet::backdrop{background:rgba(8,29,17,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.sheet[open]{display:flex;flex-direction:column;animation:sh .45s var(--ease)}
@keyframes sh{from{transform:translateX(40px);opacity:0}}
.sh-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--sheet)}
.sh-top .nv{display:flex;gap:6px}
.sh-top .nv button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font-size:17px}
.sh-body{flex:1;overflow:auto;padding:22px clamp(16px,4vw,34px) 120px;overscroll-behavior:contain}
.pd-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:center}
.pd-img{aspect-ratio:1;border-radius:var(--r);background:linear-gradient(160deg,#fff,var(--tint));display:grid;place-items:center;overflow:hidden;cursor:zoom-in}
.pd-img img{width:100%;height:100%;object-fit:contain;padding:12px}
.pd-kick{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.pd h2{font-size:clamp(26px,3.4vw,36px);margin-top:8px}
.pd .sub{color:var(--mute);margin-top:6px}
.pd-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pd-meta span{padding:7px 12px;border-radius:var(--pill);background:var(--sheet);border:1px solid var(--line);font-size:13.5px;font-weight:700}
.pd-meta .pr{background:var(--forest);color:#fff;border-color:var(--forest)}
.pd-sec{margin-top:24px}
.pd-sec h3{font-size:15px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--body);font-weight:800;color:var(--leaf-d);margin-bottom:8px}
.pd-sec ul{margin:0;padding-left:20px}
.pd-sec li{margin:4px 0}
.pd-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pd-src{font-size:12.5px;color:var(--mute);margin-top:22px}
@media(max-width:620px){.pd-hero{grid-template-columns:minmax(0,1fr)}.pd-img{max-width:300px}}

/* video */
.film{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--forest)}
.film img{width:100%;height:100%;object-fit:cover;opacity:.85;transition:transform .8s var(--ease),opacity .4s}
.film:hover img{transform:scale(1.04);opacity:1}
.film button{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:6px;padding:18px;border:0;background:linear-gradient(transparent 40%,rgba(8,29,17,.8));color:#fff;text-align:left;cursor:pointer;font:inherit}
.film button b{font:600 18px/1.2 var(--disp)}
.film button small{font-size:12.5px;opacity:.75}
.film button::before{content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230E2C1B' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 55% 50%/26px no-repeat;transition:transform .35s var(--ease)}
.film:hover button::before{transform:scale(1.08)}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.films{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:34px}
.film-note{font-size:13px;color:var(--mute);margin-top:12px}

/* story band (dark) */
.band{background:var(--forest);color:rgba(255,255,255,.78);position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band h2 em{color:var(--lime)}
.band .eyebrow{color:var(--lime)}
.band .lede{color:rgba(255,255,255,.7)}
.band::before{content:"";position:absolute;right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(195,227,122,.16),transparent)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:44px}
.stat{padding:22px;border-radius:var(--r);border:1px solid var(--line-d);background:rgba(255,255,255,.03)}
.stat b{display:block;font:600 clamp(36px,4.4vw,56px)/1 var(--disp);color:var(--lime);letter-spacing:-.03em}
.stat span{display:block;margin-top:10px;font-size:14.5px;line-height:1.45}
@media(max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:860px){.split{grid-template-columns:minmax(0,1fr)}}
.pebble{border-radius:58% 42% 52% 48% / 46% 54% 46% 54%;overflow:hidden;aspect-ratio:1.05;box-shadow:var(--sh)}
.pebble img{width:100%;height:100%;object-fit:cover}

/* criteria (13 tiêu chí) */
.crit{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:40px;counter-reset:c}
.crit li{list-style:none;position:relative;padding:20px 20px 20px 66px;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line);counter-increment:c}
.crit li::before{content:counter(c,decimal-leading-zero);position:absolute;left:18px;top:18px;font:700 22px/1 var(--disp);color:var(--leaf)}
.crit b{display:block;font:600 17px/1.2 var(--disp);color:var(--ink)}
.crit small{display:block;font-size:14px;color:var(--mute);margin-top:4px}
.crit{padding:0}

/* onboarding vine */
.vine{position:relative;margin-top:50px;padding-left:76px}
.vine-line{position:absolute;left:28px;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--tint2);overflow:hidden}
.vine-line i{position:absolute;inset:0;background:linear-gradient(var(--lime),var(--leaf));transform-origin:top;transform:scaleY(var(--p,0));transition:transform .2s linear}
.step{position:relative;padding:26px 26px 26px;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line);margin-bottom:18px;transition:border-color .3s,box-shadow .3s}
.step.done{border-color:rgba(47,138,62,.55);box-shadow:0 0 0 4px rgba(195,227,122,.25)}
.step .dot{position:absolute;left:-66px;top:22px;width:44px;height:44px;border-radius:50%;background:var(--sheet);border:2px solid var(--tint2);display:grid;place-items:center;font:700 16px/1 var(--disp);color:var(--leaf-d);transition:all .3s}
.step.done .dot{background:var(--leaf);border-color:var(--leaf);color:#fff}
.step .dot::after{content:"";position:absolute;right:-16px;top:-8px;width:18px;height:18px;background:var(--leaf);-webkit-mask:var(--leafsvg) center/contain no-repeat;mask:var(--leafsvg) center/contain no-repeat;transform:scale(0) rotate(-40deg);transition:transform .5s var(--ease)}
.step.in .dot::after{transform:scale(1) rotate(0)}
.step h3{font-size:clamp(22px,2.4vw,28px)}
.step .when{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.step p,.step li{max-width:70ch}
.step ol,.step ul{margin:12px 0 0;padding-left:22px}
.step li{margin:6px 0}
.step .acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.tick{display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 16px 0 12px;border-radius:var(--pill);border:1.5px dashed rgba(47,138,62,.5);background:none;cursor:pointer;font:700 14.5px/1 var(--body);color:var(--leaf-d)}
.tick i{width:20px;height:20px;border-radius:6px;border:2px solid var(--leaf);display:grid;place-items:center}
.step.done .tick{border-style:solid;background:var(--lime-l)}
.step.done .tick i{background:var(--leaf)}
.step.done .tick i::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.progress{display:flex;align-items:center;gap:14px;margin-top:26px;padding:14px 18px;border-radius:var(--pill);background:var(--sheet);border:1px solid var(--line);max-width:520px}
.progress .bar2{flex:1;height:10px;border-radius:10px;background:var(--tint);overflow:hidden}
.progress .bar2 i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lime),var(--leaf));border-radius:10px;transition:width .6s var(--ease)}
.progress b{font:700 15px/1 var(--disp);color:var(--ink);white-space:nowrap}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:14px}
.shot{border-radius:var(--rs);border:1px solid var(--line);background:var(--paper);padding:12px;font-size:13.5px;line-height:1.4}
.shot b{display:block;font:700 13px/1 var(--body);color:var(--leaf);margin-bottom:6px}
.gd{margin-top:14px}
.gd summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:800;color:var(--leaf-d);list-style:none;padding:8px 0}
.gd summary::-webkit-details-marker{display:none}
.gd summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint);transition:transform .3s}
.gd[open] summary::before{transform:rotate(45deg)}
.gd-steps{display:flex;gap:14px;overflow-x:auto;padding:8px 2px 14px;margin:0;list-style:none;scroll-snap-type:x mandatory}
.gd-steps li{flex:0 0 200px;scroll-snap-align:start}
.gd-steps figure{margin:0;border-radius:var(--rs);overflow:hidden;border:1px solid var(--line);background:var(--paper);cursor:zoom-in}
.gd-steps img{width:100%;height:auto;aspect-ratio:auto}
.gd-steps p{font-size:14px;line-height:1.45;margin-top:8px}
@media(max-width:620px){.vine{padding-left:0}.vine-line{display:none}.step .dot{position:relative;left:0;top:0;margin-bottom:12px}}

/* legal docs */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-top:30px}
.doc{border-radius:var(--rs);overflow:hidden;background:var(--sheet);border:1px solid var(--line);cursor:zoom-in;transition:transform .35s var(--ease),box-shadow .35s}
.doc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.doc img{aspect-ratio:.72;object-fit:cover;object-position:top;width:100%}
.doc figcaption{padding:10px 12px;font-size:13.5px;font-weight:700;color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:30px}
.facts div{padding:18px;border-radius:var(--rs);background:var(--sheet);border:1px solid var(--line)}
.facts dt{font:700 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:6px 0 0;font-weight:700;color:var(--ink)}

/* page head */
.phead{padding:clamp(120px,16vh,160px) 0 clamp(30px,5vw,56px);background:radial-gradient(900px 400px at 100% 0,var(--lime-l),transparent 60%)}
.phead h1{font-size:clamp(40px,6vw,78px);max-width:16ch}
.plede{font-size:clamp(17px,1.6vw,20px);color:var(--mute);max-width:64ch;margin-top:18px}
.crumb{display:flex;gap:8px;font-size:14px;color:var(--mute);margin-bottom:18px}
.crumb a{color:var(--mute)}
.crumb i{font-style:normal;opacity:.5}

/* reveal */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.hero h1 .w{opacity:1;transform:none}.hero h1 .hl::after{transform:none}}

/* callouts */
.cta-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:clamp(26px,4vw,46px);border-radius:calc(var(--r) + 8px);background:linear-gradient(120deg,var(--leaf),var(--leaf-d));color:#fff;position:relative;overflow:hidden}
.cta-band h2{color:#fff;font-size:clamp(28px,3.4vw,42px)}
.cta-band p{color:rgba(255,255,255,.85);margin-top:10px;max-width:56ch}
.cta-band .btns{display:flex;flex-wrap:wrap;gap:10px}
.cta-band::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;background:rgba(195,227,122,.25);-webkit-mask:var(--leafsvg) center/contain no-repeat;mask:var(--leafsvg) center/contain no-repeat;transform:rotate(-20deg)}
@media(max-width:760px){.cta-band{grid-template-columns:minmax(0,1fr)}}
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.card{padding:26px;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line)}
.card h3{font-size:22px;margin:14px 0 8px}
.card .ic{width:46px;height:46px;padding:10px;border-radius:14px;background:var(--tint);color:var(--leaf-d)}
.card p{font-size:15.5px}
@media(max-width:860px){.cards3{grid-template-columns:minmax(0,1fr)}}
.note{font-size:14px;color:var(--mute);margin-top:14px;max-width:80ch}

/* lightbox */
#lb{margin:0;width:100%;max-width:none;height:100dvh;max-height:none;border:0;padding:0;background:rgba(8,29,17,.95);color:#fff}
#lb[open]{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0}}
#lb .fr{position:absolute;inset:58px 64px 64px}
#lb .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .3s}
#lb.loading .fr img{opacity:.25}
#lb .wm{position:absolute;right:10px;bottom:8px;font-size:12px;opacity:.45}
#lb p{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:14px;padding:0 70px;color:rgba(255,255,255,.85)}
#lb button{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;font-size:20px;cursor:pointer;z-index:2}
#lb .x{top:10px;right:10px;font-size:26px}
#lb .pv{left:10px;top:50%;translate:0 -50%}
#lb .nx{right:10px;top:50%;translate:0 -50%}
@media(max-width:620px){#lb .fr{inset:60px 8px 70px}#lb .pv,#lb .nx{top:auto;bottom:12px;translate:none}}

/* news */
.nfilter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.nfilter button{min-height:38px;padding:0 16px;border-radius:var(--pill);border:1px solid var(--line);background:var(--sheet);cursor:pointer;font:600 14px var(--body)}
.nfilter button[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.nlist{display:grid;gap:14px}
.npost{padding:22px 24px;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line)}
.nmeta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--mute)}
.ncat{color:var(--leaf);font-weight:700}
.npost h2{font-size:26px;margin-top:10px}
.nsum{margin-top:8px}
.nbody{white-space:pre-line;margin-top:10px}
.nmore{margin-top:10px;background:none;border:0;color:var(--leaf-d);font-weight:700;cursor:pointer;padding:0}
.nempty{color:var(--mute)}

/* Hỏi AI */
.chat{padding-bottom:30px}
.chat>*{max-width:900px}
.log{display:grid;gap:12px;margin-bottom:18px}
.msg p{white-space:pre-line}
.msg{max-width:88%;padding:16px 20px;border-radius:20px 20px 20px 6px;background:var(--sheet);border:1px solid var(--line);color:var(--ink)}
.msg.user{justify-self:end;background:var(--forest);color:#fff;border-color:var(--forest);border-radius:20px 20px 6px 20px}
.msg.thinking p{background:linear-gradient(90deg,var(--mute) 0 40%,var(--leaf) 50%,var(--mute) 60% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.6s linear infinite}
@keyframes shim{to{background-position:-300% 0}}
.srcs{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.srcs a{font-size:12.5px;padding:5px 10px;border-radius:var(--pill);background:var(--tint);text-decoration:none;color:var(--ink2)}
.follow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.follow a,.follow button{font:600 13px var(--body);padding:7px 12px;border-radius:var(--pill);border:1px solid var(--leaf);background:none;color:var(--leaf-d);text-decoration:none;cursor:pointer}
.sugg-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.sugg-tabs button{min-height:38px;padding:0 15px;border-radius:var(--pill);border:1px solid var(--line);background:none;cursor:pointer;font:600 14px var(--body);color:var(--ink2)}
.sugg-tabs button[aria-pressed="true"]{background:var(--forest);color:#fff;border-color:var(--forest)}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sugg button{text-align:left;padding:9px 14px;border-radius:14px;border:1px solid var(--line);background:var(--sheet);cursor:pointer;font:500 14.5px/1.35 var(--body);color:var(--ink);transition:border-color .3s}
.sugg button:hover{border-color:var(--leaf)}
.sugg button.asked{opacity:.55}
.ask-f{position:sticky;bottom:14px;display:flex;gap:8px;padding:8px;border-radius:var(--pill);background:var(--sheet);border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(14,44,27,.45);z-index:5}
.ask-f label{position:absolute;left:-999px}
.ask-f input{flex:1;min-width:0;border:0;background:none;padding:0 16px;font:inherit;color:var(--ink);outline:none}
.ask-f input::placeholder{color:var(--mute)}
.ask-f button{min-height:46px;padding:0 24px;border-radius:var(--pill);border:0;background:var(--leaf);color:#fff;font:700 15px var(--body);cursor:pointer}
.ask-f button:disabled{opacity:.5}
.faq{max-width:900px}
.faq h2{font-size:clamp(30px,3.6vw,44px);margin-bottom:22px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;position:relative;font-weight:700;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font:400 28px/1 var(--disp);color:var(--leaf);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;max-width:75ch}
.join-mini{display:flex;gap:16px;align-items:center;margin-top:22px;padding:16px;border-radius:var(--r);background:var(--tint)}

/* floating AI button */
.fab{position:fixed;right:18px;bottom:18px;z-index:40;display:inline-flex;align-items:center;gap:10px;padding:8px 20px 8px 8px;border-radius:var(--pill);background:var(--forest);color:#fff;text-decoration:none;font-weight:700;font-size:14.5px;box-shadow:0 18px 40px -16px rgba(8,29,17,.7);transition:transform .45s var(--ease)}
.fab:hover{transform:translateY(-3px)}
.fab span.m{width:40px;height:40px;border-radius:50%;background:var(--lime);display:grid;place-items:center}
.fab span.m i{width:22px;height:22px;background:var(--forest);-webkit-mask:var(--leafsvg) center/contain no-repeat;mask:var(--leafsvg) center/contain no-repeat}

/* footer */
footer{background:var(--forest-d);color:rgba(255,255,255,.7);padding-top:80px;position:relative;overflow:hidden}
footer h3,footer h4{color:#fff}
footer h4{font:700 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer a{color:rgba(255,255,255,.85)}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer .cols p{font-size:14.5px}
@media(max-width:860px){footer .cols{grid-template-columns:minmax(0,1fr)}}
.join{padding-bottom:70px;border-bottom:1px solid var(--line-d);margin-bottom:60px}
.join h3{font-size:clamp(30px,3.6vw,46px)}
.join h3 em{color:var(--lime)}
.join .lede{color:rgba(255,255,255,.7)}
.join-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:30px}
.join-card{display:flex;gap:18px;align-items:center;padding:18px;border-radius:var(--r);border:1px solid var(--line-d);text-decoration:none;color:inherit}
.join-qr{width:96px;height:96px;border-radius:8px;background:#fff;padding:4px;flex:none}
.join-txt b{display:block;color:#fff;font-size:16px}
.join-mini .join-txt b{color:var(--ink)}
.join-txt small{display:block;font-size:13.5px;margin-top:3px}
.join-btn{display:inline-block;margin-top:10px;padding:9px 16px;border-radius:var(--pill);background:var(--lime);color:var(--forest);font-weight:700;font-size:14px;text-decoration:none}
.foot-giant{font:700 clamp(70px,17vw,250px)/.85 var(--disp);letter-spacing:-.05em;text-align:center;margin-top:60px;white-space:nowrap;background:linear-gradient(180deg,rgba(195,227,122,.5),rgba(195,227,122,.04));-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.copy{font-size:13px;padding:22px var(--gut);opacity:.6}
.touch-only{display:none!important}
@media(hover:none) and (pointer:coarse){.touch-only{display:inline-block!important}.desk-only{display:none!important}}
@media(max-width:520px){.need{min-height:0;gap:18px;padding:14px}.need b{font-size:16.5px}.shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.pc .bd{padding:10px 12px 12px}.pc h3{font-size:15.5px}.pc .sub{font-size:12px}.pc .price{font-size:15px}.pc .code{display:none}}

/* promotions (site.js, public.promos) */
.promo-strip{background:var(--forest);color:#fff;font-size:14px;margin:-12px 0 10px;transition:margin .35s}
.bar.solid .promo-strip,.bar.always .promo-strip{margin-top:-8px}
.promo-strip .wrap{display:flex;align-items:center;gap:10px;min-height:40px}
.promo-strip b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.promo-strip .pl{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);border:0;background:var(--lime);color:var(--forest);font:700 13px/1 var(--body);text-decoration:none;cursor:pointer}
.promo-strip .px{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;line-height:1;cursor:pointer}
.has-promo .phead{padding-top:clamp(150px,19vh,190px)}
.has-promo .hero{padding-top:clamp(140px,17vh,180px)}
@media(max-width:620px){.promo-strip{font-size:13px}.promo-strip .gift{display:none}.promo-strip .pl{padding:5px 10px}}
#promoHome{display:grid;gap:16px;padding-top:clamp(40px,6vw,70px)}
.promo{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(14px,2vw,22px);border-radius:calc(var(--r) + 8px);background:var(--sheet);border:1px solid var(--line);box-shadow:var(--sh)}
.promo .pi{border-radius:var(--r);overflow:hidden;background:var(--tint)}
.promo .pi img{width:100%;height:auto}
.promo h2{font-size:clamp(26px,3.2vw,40px);margin-top:12px}
.promo p{margin-top:12px;color:var(--mute)}
.promo .pa{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.promo .pd{font:700 14px/1 var(--body);color:var(--leaf-d);padding:9px 14px;border-radius:var(--pill);background:var(--lime-l)}
.promo small{display:block;margin-top:14px;font-size:13px;color:var(--mute)}
@media(max-width:860px){.promo{grid-template-columns:minmax(0,1fr)}}
[data-promo-slot]{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border-radius:var(--rs);background:var(--lime-l);border:1px dashed rgba(47,138,62,.45)}
[data-promo-slot] .gift{font-size:22px;line-height:1}
[data-promo-slot] b{display:block;color:var(--ink)}
[data-promo-slot] small{display:block;font-size:13px;color:var(--mute);margin-top:2px}
#promoHome:not([hidden]) + .marq{margin-top:clamp(40px,6vw,70px)}