/* muabandauandaquasudung.vn — shared styles. Layout: wide bands, one column of content; hero pairs headline with a quote form. */
:root{
  --bg:#f3f6f2;--surface:#ffffff;--ink:#14261f;--muted:#4d6159;--line:#d5dfd8;
  --deep:#103a2c;--deep-ink:#e9f2ec;--oil:#d99a1e;--oil-soft:#f6e3b8;--leaf:#2f7a55;--on-oil:#1d1404;--sprout:#7cc35a;--ocean:#2f7fb5;--zalo:#0068ff;--land:#6dbb5a;
  --font-display:"Bricolage Grotesque","Be Vietnam Pro",system-ui,sans-serif;
  --font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1714;--surface:#14211c;--ink:#e4ede8;--muted:#9fb3aa;--line:#26372f;
  --deep:#0a2a1f;--deep-ink:#e4ede8;--oil:#e8ad38;--oil-soft:#3a2e14;--leaf:#5fb388;--zalo:#5a9bff;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d1714;--surface:#14211c;--ink:#e4ede8;--muted:#9fb3aa;--line:#26372f;
  --deep:#0a2a1f;--deep-ink:#e4ede8;--oil:#e8ad38;--oil-soft:#3a2e14;--leaf:#5fb388;--zalo:#5a9bff;color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--font-display);line-height:1.14;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--leaf)}
section{padding-block:72px}
section.tight{padding-top:0}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--deep)}
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--deep);color:var(--deep-ink)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;line-height:1.1}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.15rem;display:block}
.brand small{font-size:.72rem;opacity:.7;letter-spacing:.04em}
.logo{width:30px;height:40px;flex:none;overflow:visible}
.logo .dr{fill:var(--oil)}
.logo .lf{fill:var(--sprout)}
.logo .st{stroke:var(--sprout);stroke-width:1.8;stroke-linecap:round;fill:none}
.logo .hl{stroke:#fff;stroke-opacity:.55;stroke-width:1.6;stroke-linecap:round;fill:none}
.brand small{color:var(--sprout);opacity:1;font-weight:600}
.slogan{font-family:var(--font-display);font-weight:600;color:var(--sprout);font-size:1.05rem;margin-bottom:6px}
nav{display:flex;gap:20px;font-size:.9rem}
nav a{text-decoration:none;opacity:.85}
nav a:hover,nav a:focus-visible,nav a[aria-current]{opacity:1;text-decoration:underline;text-underline-offset:4px}
.call{background:var(--oil);color:var(--on-oil);font-weight:700;padding:8px 14px;border-radius:999px;text-decoration:none;font-size:.9rem;white-space:nowrap}
@media (max-width:880px){nav{display:none}}

/* hero */
.hero{background:var(--deep);color:var(--deep-ink);padding-block:56px 72px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.hero .eyebrow{color:var(--oil);margin-bottom:14px}
.hero h1{font-size:clamp(2rem,4.6vw,3.3rem);font-weight:800;letter-spacing:-.02em}
.hero .tagline{margin-top:18px;font-family:var(--font-display);font-size:1.3rem;color:var(--oil);font-weight:600}
.hero .lead{margin-top:14px;max-width:60ch;font-size:1.04rem;opacity:.88}
.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.facts span{border:1px solid color-mix(in srgb,var(--deep-ink) 28%,transparent);padding:6px 12px;border-radius:999px;font-size:.86rem}
.crumbs{font-size:.85rem;opacity:.75;margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* quote form */
.quote{background:var(--surface);color:var(--ink);border-radius:14px;padding:24px;box-shadow:0 18px 40px rgba(0,0,0,.22)}
.quote h2{font-size:1.35rem}
.quote p.sub{color:var(--muted);font-size:.92rem;margin-top:4px}
form{display:grid;gap:12px;margin-top:18px}
label{font-size:.82rem;font-weight:600;display:grid;gap:4px}
input,select{font:inherit;font-size:.95rem;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);width:100%}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--oil);outline-offset:2px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
button.primary{font:inherit;font-weight:700;background:var(--leaf);color:#fff;border:0;border-radius:8px;padding:12px 16px;cursor:pointer}
button.primary:hover{filter:brightness(1.08)}
.ok{background:var(--oil-soft);border-radius:8px;padding:12px;font-size:.92rem}
.fine{font-size:.78rem;color:var(--muted)}

/* section heads */
.sec-head{display:grid;gap:10px;margin-bottom:36px;max-width:700px}
.sec-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.sec-head p{color:var(--muted)}

/* audience grid */
.aud{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.aud article{background:var(--surface);padding:26px;display:grid;gap:8px;align-content:start;min-width:0}
.aud h3{font-size:1.18rem}
.aud p{color:var(--muted);font-size:.95rem}
.aud .tag{font-size:.8rem;font-weight:600;color:var(--leaf)}

/* process */
.band{background:var(--surface);border-block:1px solid var(--line)}
ol.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:s}
ol.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;padding-top:18px;border-top:3px solid var(--oil);min-width:0}
ol.steps li::before{content:"Bước " counter(s);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
ol.steps.en li::before{content:"Step " counter(s)}
ol.steps h3{font-size:1.06rem}
ol.steps p{font-size:.92rem;color:var(--muted)}

/* legal / documents */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:8px;align-content:start;min-width:0}
.doc .code{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.doc h3{font-size:1.08rem}
.doc p{font-size:.93rem;color:var(--muted)}
.ph{background:var(--oil-soft);color:var(--ink);padding:0 4px;border-radius:3px}

/* commitment */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
ul.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
ul.checks li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
ul.checks li::before{content:"";width:20px;height:20px;margin-top:4px;border-radius:50%;border:6px solid var(--leaf)}
ul.checks b{display:block}
ul.checks span{color:var(--muted);font-size:.94rem}
.flow{background:var(--deep);color:var(--deep-ink);border-radius:14px;padding:28px;display:grid;gap:14px}
.flow h3{font-size:1.22rem}
.chain{display:grid;gap:8px}
.chain div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px dashed color-mix(in srgb,var(--deep-ink) 28%,transparent);padding-bottom:8px;font-size:.95rem}
.chain div span:last-child{color:var(--oil);font-weight:600;text-align:right}
.flow .no{background:color-mix(in srgb,var(--oil) 16%,transparent);border-radius:8px;padding:12px;font-size:.92rem}

/* areas */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.area{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:grid;gap:14px;align-content:start;min-width:0}
.area.hq{box-shadow:inset 0 0 0 2px var(--leaf);border-color:transparent}
.area .lbl{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--leaf)}
.area h3{font-size:1.4rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.84rem}
dl.info{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.95rem}
dl.info dt{color:var(--muted)}
dl.info dd{margin:0;min-width:0;overflow-wrap:anywhere}
.more{font-weight:700;color:var(--leaf);text-decoration:none}
.more:hover{text-decoration:underline}

/* KCN table */
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:.94rem}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
tr:last-child td{border-bottom:0}
td:first-child{font-weight:600}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding-block:16px}
.faq summary{cursor:pointer;font-weight:600;font-size:1.04rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--leaf);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;color:var(--muted);max-width:72ch}

/* cta strip */
.cta{background:var(--oil-soft);border-radius:14px;padding:28px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.cta h2{font-size:1.4rem}
.cta a{background:var(--leaf);color:#fff;text-decoration:none;font-weight:700;padding:12px 18px;border-radius:8px}

footer{background:var(--deep);color:var(--deep-ink);padding-block:40px;font-size:.9rem}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
footer h4{margin:0 0 8px;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
footer a{text-decoration:none;opacity:.85}
footer a:hover{text-decoration:underline}
footer .legal{margin-top:28px;opacity:.65;font-size:.82rem}

@media (prefers-reduced-motion:no-preference){.hero h1{animation:up .7s ease-out both}@keyframes up{from{transform:translateY(10px)}to{transform:none}}}
@media (max-width:900px){
  .hero .grid,.split{grid-template-columns:1fr}
  ol.steps{grid-template-columns:1fr 1fr}
  .docs{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .aud,.areas,ol.steps,.row2,.docs,footer .cols{grid-template-columns:1fr}
  section{padding-block:52px}
}

/* hero scene: bottle pours a drop, earth sprouts */
.scene{margin:32px 0 0;max-width:400px}
.scene svg{width:100%;height:auto;display:block;overflow:visible}
.scene figcaption{margin-top:6px;font-family:var(--font-display);font-weight:600;color:var(--sprout);font-size:1.05rem}
.scene .glow{fill:var(--sprout);opacity:.12}
.scene .ocean{fill:var(--ocean)}
.scene .land{fill:var(--land)}
.scene .shade{fill:none;stroke:#000;stroke-opacity:.12;stroke-width:8}
.scene .bottle{fill:var(--oil);fill-opacity:.88;stroke:var(--deep-ink);stroke-opacity:.6;stroke-width:2;stroke-linejoin:round}
.scene .label{fill:var(--deep-ink);opacity:.85}
.scene .fall{fill:var(--oil)}
.scene .stem{fill:none;stroke:var(--sprout);stroke-width:4;stroke-linecap:round}
.scene .leaf{fill:var(--sprout)}
.scene .ripple{fill:none;stroke:var(--oil);stroke-width:1.5;opacity:0}
@media (prefers-reduced-motion:no-preference){
  .scene .fall{animation:fall 3s ease-in infinite}
  .scene .ripple{transform-box:fill-box;transform-origin:center;animation:ripple 3s ease-out infinite}
  .scene .stem{stroke-dasharray:40;stroke-dashoffset:40;animation:grow 1.2s ease-out .9s forwards}
  .scene .leaf{transform-box:fill-box;transform:scale(0);animation:leaf .8s cubic-bezier(.3,1.6,.6,1) forwards}
  .scene .leaf-l{transform-origin:100% 80%;animation-delay:1.9s}
  .scene .leaf-r{transform-origin:0% 90%;animation-delay:2.2s}
}
@keyframes fall{0%{transform:translateY(0);opacity:0}8%{opacity:1}30%{transform:translateY(54px);opacity:1}33%{transform:translateY(56px) scale(1.3,.4);opacity:0}100%{transform:translateY(56px);opacity:0}}
@keyframes ripple{0%,30%{opacity:0;transform:scale(.4)}34%{opacity:.9}55%{opacity:0;transform:scale(2.4)}100%{opacity:0}}
@keyframes grow{to{stroke-dashoffset:0}}
@keyframes leaf{to{transform:scale(1)}}

.hdr-r{display:flex;align-items:center;gap:12px}
.tel{font-weight:700;text-decoration:none;color:var(--oil);font-variant-numeric:tabular-nums;white-space:nowrap}
.tel:hover{text-decoration:underline}
@media (max-width:520px){.hdr-r .call{display:none}}
.direct{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.direct span{grid-column:1/-1;font-size:.82rem;color:var(--muted)}
.direct b{font-family:var(--font-display);font-size:1rem}
.direct .big{grid-column:1;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--leaf);text-decoration:none;font-variant-numeric:tabular-nums}
.direct .zalo{grid-column:2;grid-row:2/4;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-weight:600;font-size:.88rem;text-decoration:none}
.fcontact{margin-top:8px}
.fcontact a{opacity:1;font-weight:600}

.opt{font-weight:400;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.choose{font-size:.82rem;font-weight:600;margin-top:4px}
.send2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.send2 button{font:inherit;border-radius:10px;padding:12px 14px;cursor:pointer;display:grid;gap:2px;text-align:left;line-height:1.3}
.send2 b{font-size:1rem}
.send2 small{font-size:.76rem;opacity:.85;font-weight:400}
.zalo-btn{background:var(--surface);color:var(--zalo);border:2px solid var(--zalo)}
.zalo-btn:hover{background:color-mix(in srgb,var(--zalo) 8%,var(--surface))}
.send2 button:disabled{opacity:.6;cursor:wait}
@media (max-width:420px){.send2{grid-template-columns:1fr}}

.landmark{font-weight:600;color:var(--leaf)}
.map{font-weight:600;color:var(--leaf)}
.hero .map{color:var(--oil)}
.pluscode{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* blog */
.post-hero{padding-block:48px 56px}
.post-hero h1{font-size:clamp(1.8rem,4vw,2.8rem);max-width:24ch}
.post-meta{margin-top:14px;opacity:.75;font-size:.92rem}
.post{max-width:68ch;font-size:1.06rem;line-height:1.75}
.post>*+*{margin-top:1em}
.post h2{font-size:1.45rem;margin-top:1.8em;color:var(--ink)}
.post ul{padding-left:1.2em;display:grid;gap:.4em}
.post li::marker{color:var(--leaf)}
.post .note{background:var(--oil-soft);border-radius:10px;padding:16px 18px;font-size:.98rem}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.post-card .tag{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.post-card h3{font-size:1.15rem}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline;color:var(--leaf)}
.post-card p{color:var(--muted);font-size:.94rem}
.post-card .meta{font-size:.82rem;color:var(--muted)}

/* blog: covers, figures, toc, faq */
.post-sec{padding-top:40px}
.post-sec .wrap{display:grid;gap:36px}
figure{margin:0}
.cover{max-width:900px}
.cover img,.post figure img,.post-card .thumb img{width:100%;height:auto;display:block;border-radius:12px}
.post figure{margin-block:1.6em}
.post figcaption{font-size:.88rem;color:var(--muted);margin-top:8px}
.post .lede{font-size:1.15rem;color:var(--ink)}
.post ol{padding-left:1.3em;display:grid;gap:.5em}
.post ol li::marker{color:var(--leaf);font-weight:700}
.post a{color:var(--leaf);font-weight:600}
.post .tbl{margin-block:1.4em}
.post table{font-size:.92rem;min-width:520px}
.post tr.sum td{background:var(--oil-soft);font-weight:700}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-block:1.4em}
.toc b{font-family:var(--font-display);font-size:1rem}
.toc ol{margin:10px 0 0;font-size:.96rem}
.toc a{text-decoration:none;font-weight:500}
.toc a:hover{text-decoration:underline}
.inline-cta{border-left:4px solid var(--oil);background:var(--surface);padding:14px 18px;border-radius:0 10px 10px 0;font-size:.98rem}
.post ol.checklist{list-style:none;padding:0;counter-reset:c;gap:12px}
.post ol.checklist li{counter-increment:c;display:grid;grid-template-columns:40px 1fr;gap:2px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.post ol.checklist li::before{content:counter(c);grid-row:span 2;width:34px;height:34px;border-radius:50%;background:var(--leaf);color:#fff;display:grid;place-items:center;font-weight:800;font-family:var(--font-display)}
.post ol.checklist span{color:var(--muted);font-size:.96rem}
.post ul.warn li::marker{color:var(--red,#c4553a)}
.post-faq details{border-bottom:1px solid var(--line);padding-block:12px}
.post-faq summary{cursor:pointer;font-weight:600}
.post-faq p{margin-top:8px;color:var(--muted)}
.sources{margin-top:2em;font-size:.88rem;color:var(--muted);max-width:68ch}
.sources ul{padding-left:1.2em;margin:6px 0 0}
.sources a{color:var(--muted)}
.post-card .thumb{display:block;margin:-22px -22px 4px;border-radius:12px 12px 0 0;overflow:hidden}
.post-card .thumb img{border-radius:0}
.post-card h2{font-size:1.15rem}
.post-card h2 a{text-decoration:none}
.post-card h2 a:hover{text-decoration:underline;color:var(--leaf)}
.post,.cover{min-width:0}

.scene .lbl-t{fill:var(--deep);font-family:var(--font-display);font-weight:700;letter-spacing:.04em}
.scene .lbl-b{font-weight:800;fill:var(--leaf)}

/* hero visual row: scene + closed loop */
.hero-visual{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;border-top:1px solid color-mix(in srgb,var(--deep-ink) 15%,transparent);padding-top:36px}
.hero-visual .scene{margin:0;width:100%;max-width:440px;justify-self:center}
.loop{margin:0;min-width:0}
.loop svg{width:100%;max-width:600px;height:auto;display:block;margin-inline:auto;overflow:visible}
.loop figcaption{text-align:center;margin-top:6px;font-size:.9rem;opacity:.75}
.loop .ring{fill:none;stroke:color-mix(in srgb,var(--deep-ink) 14%,transparent);stroke-width:2}
.loop .arc{fill:none;stroke:var(--oil);stroke-width:3;stroke-dasharray:6 7;stroke-linecap:round}
.loop .node>circle:first-child{fill:color-mix(in srgb,var(--deep-ink) 9%,var(--deep));stroke:var(--sprout);stroke-width:2.5}
.loop .num{fill:var(--oil)}
.loop .numt{fill:var(--on-oil);font:800 13px var(--font-display)}
.loop .lt{fill:var(--deep-ink);font:700 15px var(--font-display)}
.loop .ls{fill:var(--deep-ink);opacity:.7;font:500 12.5px var(--font-body)}
.loop .core{fill:color-mix(in srgb,var(--sprout) 10%,var(--deep));stroke:color-mix(in srgb,var(--sprout) 40%,transparent);stroke-width:1.5}
.loop .ct{fill:var(--deep-ink);font:800 17px var(--font-display)}
.loop .cs{fill:var(--sprout);font:600 12px var(--font-body)}
.loop .spark{fill:var(--sprout);filter:drop-shadow(0 0 6px var(--sprout))}
.ico .i-oil{fill:var(--oil)} .ico .i-dk{fill:#a8700f} .ico .i-st{fill:#b9c8c0} .ico .i-pp{fill:#e9f2ec}
.ico .i-lf{fill:var(--leaf)} .ico .i-dk2{fill:#0a1f17} .ico .i-leaf{fill:var(--sprout)} .ico .i-drop{fill:var(--oil)} .ico .i-wat{fill:#6fb3e0}
.ico .i-bolt{fill:var(--oil)} .ico .i-vein{stroke:var(--deep);stroke-width:2;fill:none}
.ico .i-steam,.ico .i-steam2{fill:none;stroke:#e9f2ec;stroke-opacity:.6;stroke-width:2.5;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .loop .arc{animation:flow 1.6s linear infinite}
  .loop .orbit{transform-origin:260px 250px;animation:orbit 9s ease-in-out infinite}
  .loop .node{animation:pop .6s cubic-bezier(.3,1.5,.6,1) both;animation-delay:var(--d);transform-box:fill-box;transform-origin:center}
}
@keyframes flow{to{stroke-dashoffset:-26}}
@keyframes orbit{0%{transform:rotate(0);opacity:0}6%{opacity:1}82%{transform:rotate(300deg);opacity:1}90%,100%{transform:rotate(300deg);opacity:0}}
@keyframes pop{from{transform:scale(.85)}to{transform:none}}
@media (max-width:900px){.hero-visual{grid-template-columns:1fr}.hero-visual .scene{max-width:340px}}
.loop{overflow:hidden}
.loop-legend{display:none}
@media (max-width:620px){
  .loop svg{width:154%;max-width:none;margin-left:-27%}
  .loop .lt,.loop .ls{display:none}
  .loop-legend{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;list-style:none;padding:0;margin:8px 0 0;counter-reset:lg;font-size:.84rem}
  .loop-legend li{counter-increment:lg;display:grid;grid-template-columns:22px 1fr;gap:0 8px;opacity:.9}
  .loop-legend li::before{content:counter(lg);grid-row:span 2;width:20px;height:20px;border-radius:50%;background:var(--oil);color:var(--on-oil);font-weight:800;font-size:.75rem;display:grid;place-items:center}
  .loop-legend b{display:block}
}
.loop .arc-dead{stroke:color-mix(in srgb,var(--deep-ink) 22%,transparent);animation:none!important}
.loop .stop circle{fill:#c4553a;stroke:var(--deep);stroke-width:3}
.loop .stop path{stroke:#fff;stroke-width:3.5;stroke-linecap:round}
.loop .stop-t{fill:#e8917a;font:700 12.5px var(--font-body)}
.loop .orbit{opacity:0}
@media (prefers-reduced-motion:reduce){.loop .orbit{display:none}}

/* option B: vertical one-way steps */
.hero-visual .scene figcaption{text-align:center}
.flow-v{min-width:0;max-width:520px}
.flow-h{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--sprout);margin-bottom:16px}
.flow-v ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:fs;position:relative}
.flow-v ol::before{content:"";position:absolute;left:27px;top:28px;bottom:28px;border-left:2px dashed var(--oil);opacity:.7}
.flow-v li{counter-increment:fs;display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;position:relative}
.flow-v .ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--deep-ink) 9%,var(--deep));border:2px solid var(--sprout);position:relative;z-index:1}
.flow-v .ico svg{width:40px;height:40px}
.flow-v .ico::after{content:counter(fs);position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--oil);color:var(--on-oil);font:800 11px/20px var(--font-display);text-align:center}
.flow-v li b{display:block;font-family:var(--font-display);font-size:1.02rem}
.flow-v li span{font-size:.88rem;opacity:.75}
.flow-v li:last-child .ico{border-color:var(--oil)}
.flow-stop{margin-top:16px;display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;color:#f0a58f;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,#c4553a 16%,transparent)}
.flow-stop span{flex:none;width:18px;height:18px;border-radius:50%;background:#c4553a;position:relative}
.flow-stop span::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:2.5px;background:#fff;border-radius:2px;transform:rotate(-45deg)}
@media (prefers-reduced-motion:no-preference){.flow-v li{animation:slidein .5s ease-out both}.flow-v li:nth-child(2){animation-delay:.08s}.flow-v li:nth-child(3){animation-delay:.16s}.flow-v li:nth-child(4){animation-delay:.24s}.flow-v li:nth-child(5){animation-delay:.32s}.flow-v li:nth-child(6){animation-delay:.4s}}
@keyframes slidein{from{transform:translateX(8px)}to{transform:none}}
@media (max-width:900px){.flow-v{justify-self:center;width:100%}}

/* scene v3: larger earth, smaller bottle */
.scene .glow{opacity:.1}.scene .glow2{opacity:.12}
.scene .shine{fill:none;stroke:#fff;stroke-opacity:.28;stroke-width:5;stroke-linecap:round}
.scene .glass{fill:#fff;opacity:.22}
.scene .shade{stroke-width:10;stroke-opacity:.14}
@media (prefers-reduced-motion:no-preference){
  .scene .fall{animation:fall3 3s ease-in infinite}
  .scene .stem{stroke-dasharray:50;stroke-dashoffset:50}
}
@keyframes fall3{0%{transform:translateY(0);opacity:0}8%{opacity:1}30%{transform:translateY(34px);opacity:1}33%{transform:translateY(36px) scale(1.3,.4);opacity:0}100%{transform:translateY(36px);opacity:0}}

/* services */
footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
.svc-strip{padding-bottom:0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;display:grid;gap:8px;align-content:start;padding:0 0 20px;min-width:0;transition:border-color .2s}
.svc:hover,.svc:focus-visible{border-color:var(--leaf)}
.svc img{width:100%;height:auto;display:block;margin-bottom:6px}
.svc>*:not(img){margin-inline:20px}
.svc h3{font-size:1.2rem}
.svc p{color:var(--muted);font-size:.94rem}
.svc .go{font-weight:700;color:var(--leaf);font-size:.92rem}
.pill{justify-self:start;font-size:.75rem;font-weight:700;letter-spacing:.04em;padding:3px 10px;border-radius:999px}
.pill.ok{background:color-mix(in srgb,var(--leaf) 15%,transparent);color:var(--leaf)}
.pill.soon{background:var(--oil-soft);color:#8a5b0c}
.status{margin-top:22px;display:flex;gap:12px;align-items:flex-start;max-width:68ch;background:color-mix(in srgb,var(--oil) 16%,transparent);border:1px solid color-mix(in srgb,var(--oil) 45%,transparent);border-radius:12px;padding:14px 16px;font-size:.95rem}
.status .dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--oil);margin-top:7px;box-shadow:0 0 0 4px color-mix(in srgb,var(--oil) 30%,transparent)}
.products{display:grid;gap:14px;margin-block:1.2em}
.prod{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 20px;display:grid;gap:6px}
.prod.green{border-color:color-mix(in srgb,var(--leaf) 50%,var(--line))}
.prod .tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.prod h3{font-size:1.15rem}
.prod p{color:var(--muted);font-size:.97rem}
.prod .src{font-size:.88rem}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}}
.svc-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:620px){.svc-grid.two{grid-template-columns:1fr}}

/* video card */
.video-sec{padding-top:72px}
.video-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:40px;align-items:center}
.video-wrap .sec-head{margin:0}
.video-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.post .video-card{margin-block:1.6em}
.vthumb{display:block;position:relative}
.vthumb img{width:100%;height:auto;display:block;border-radius:0!important;transition:filter .2s}
.vthumb:hover img,.vthumb:focus-visible img{filter:brightness(1.12)}
.video-card figcaption{padding:16px 18px;display:grid;gap:6px;margin:0!important}
.video-card .vmeta{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--leaf)}
.video-card b{font-family:var(--font-display);font-size:1.12rem;line-height:1.3}
.video-card b a{text-decoration:none;color:var(--ink)}
.video-card b a:hover{text-decoration:underline}
.video-card figcaption>span:last-child{font-size:.92rem;color:var(--muted)}
@media (max-width:900px){.video-wrap{grid-template-columns:1fr}}

/* long brand name */
.brand{min-width:0}
.brand b{font-size:clamp(.98rem,1.4vw,1.15rem);line-height:1.15}
footer h4{overflow-wrap:anywhere}
@media (max-width:520px){.brand b{font-size:.98rem}.brand small{font-size:.68rem}.tel{font-size:.9rem}header.top .wrap{gap:10px}}

/* hub homepage: two product categories */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;max-width:620px}
.pick-a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px 16px;border-radius:12px;text-decoration:none;background:color-mix(in srgb,var(--deep-ink) 8%,transparent);border:1px solid color-mix(in srgb,var(--deep-ink) 22%,transparent);transition:border-color .2s,background .2s}
.pick-a:hover,.pick-a:focus-visible{border-color:var(--oil);background:color-mix(in srgb,var(--deep-ink) 13%,transparent)}
.pick-a b{display:block;font-family:var(--font-display);font-size:1.08rem}
.pick-a small{opacity:.75;font-size:.82rem}
.pk-dot{width:14px;height:18px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;transform:rotate(180deg)}
.pk-dot.oil{background:var(--oil)}
.pk-dot.lube{background:#2b2620;box-shadow:0 0 0 2px color-mix(in srgb,var(--deep-ink) 50%,transparent)}
.mh-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.mh{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;min-width:0}
.mh-an{border-top:5px solid var(--oil)}
.mh-nhot{border-top:5px solid #3a332b}
.mh-img img{width:100%;height:auto;display:block}
.mh-body{padding:22px 24px 24px;display:grid;gap:12px;align-content:start}
.mh-tag{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leaf)}
.mh h3{font-size:1.5rem}
.mh h3 a{text-decoration:none}
.mh h3 a:hover{text-decoration:underline}
.mh-body>p{color:var(--muted)}
.mh dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:.94rem}
.mh dt{color:var(--muted);font-weight:600}
.mh dd{margin:0;min-width:0}
.mh-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.94rem}
.mh-checks li{display:flex;gap:10px;align-items:center}
.mh-checks li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:5px solid var(--leaf)}
.mh-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn-solid,.btn-line{font-weight:700;text-decoration:none;padding:10px 16px;border-radius:8px;font-size:.94rem}
.btn-solid{background:var(--leaf);color:#fff}
.btn-line{border:2px solid var(--leaf);color:var(--leaf)}
.btn-solid:hover{filter:brightness(1.08)}
.btn-line:hover{background:color-mix(in srgb,var(--leaf) 10%,transparent)}
.mh-warn{margin-top:20px;display:flex;gap:10px;align-items:center;font-size:.95rem;color:var(--muted)}
.mh-warn span{flex:none;width:18px;height:18px;border-radius:50%;background:#c4553a;position:relative}
.mh-warn span::after{content:"";position:absolute;left:3px;right:3px;top:8px;height:2.5px;background:#fff;border-radius:2px;transform:rotate(-45deg)}
.mh-warn a{color:var(--leaf);font-weight:600}
.extra{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;padding-right:28px}
.extra:hover{border-color:var(--leaf)}
.extra img{width:100%;height:auto;display:block}
.extra div{display:grid;gap:8px;padding-block:20px}
.extra h3{font-size:1.35rem}
.extra p{color:var(--muted)}
.extra .go{font-weight:700;color:var(--leaf)}
@media (max-width:900px){.mh-grid{grid-template-columns:1fr}}
@media (max-width:620px){.pick{grid-template-columns:1fr}.extra{grid-template-columns:1fr;padding:0 0 4px}.extra div{padding:0 20px 20px}}
.pick{grid-template-columns:repeat(3,1fr);max-width:none}
.pk-dot.fuel{background:#e26a2c}
.mh-grid.three{grid-template-columns:repeat(3,1fr);gap:20px}
.mh-grid.three .mh-body{padding:20px}
.mh-grid.three .mh h3{font-size:1.3rem}
.mh-fuel{border-top:5px solid #e26a2c}
@media (max-width:1100px){.pick{grid-template-columns:1fr}}
@media (max-width:1000px){.mh-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.mh-grid.three{grid-template-columns:1fr}}

/* compact quote form, Zalo first */
.qf{gap:14px}
.seg{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg legend{font-size:.82rem;font-weight:600;margin-bottom:6px;padding:0}
.seg label{display:block;font-weight:600}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;min-height:46px;padding:8px 6px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);font-size:.86rem;line-height:1.25;cursor:pointer;transition:border-color .15s,background .15s}
.seg input:checked+span{border-color:var(--leaf);background:color-mix(in srgb,var(--leaf) 12%,var(--surface));color:var(--ink)}
.seg input:focus-visible+span{outline:3px solid var(--oil);outline-offset:2px}
.seg .dot{flex:none;width:9px;height:9px;border-radius:50%}
.seg .dot.an{background:var(--oil)}.seg .dot.nhot{background:#2b2620;box-shadow:0 0 0 1.5px #8a8070}.seg .dot.dot-f{background:#e26a2c}
.zalo-main{font:inherit;cursor:pointer;border:0;border-radius:12px;padding:14px 16px;background:var(--zalo);color:#fff;display:grid;gap:2px;text-align:center}
.zalo-main b{font-size:1.1rem}
.zalo-main small{font-size:.8rem;opacity:.9}
.zalo-main:hover{filter:brightness(1.08)}
.qf-alt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:.86rem;color:var(--muted)}
.qf-alt a{color:var(--leaf);font-weight:700;text-decoration:none}
.linkbtn{font:inherit;font-size:.86rem;background:none;border:0;padding:0;color:var(--leaf);font-weight:600;text-decoration:underline;cursor:pointer}
@media (max-width:420px){.seg{grid-template-columns:1fr}.seg span{justify-content:flex-start;padding-left:14px}}
.areas.one{grid-template-columns:1fr;max-width:720px}
/* header with 6 nav links */
nav{gap:16px}
nav a{white-space:nowrap}
.brand b{white-space:nowrap}
@media (max-width:1240px){nav a[lang="en"]{display:none}}
@media (max-width:1100px){header.top .hdr-r .tel{display:none}}
@media (max-width:520px){.brand b{white-space:normal}header.top .hdr-r .tel{display:inline}}

/* real photos */
.photos{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px}
.photo{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0}
.photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.photo figcaption{padding:14px 16px;font-size:.92rem;color:var(--muted)}
.photo figcaption b{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.02rem;margin-bottom:2px}
.post img.tall{max-width:440px;margin-inline:auto;aspect-ratio:3/4;object-fit:cover}
@media (max-width:560px){.photos{grid-template-columns:1fr}}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-block:1.2em}
.gallery figure{margin:0!important;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}
.gallery img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:0!important}
.gallery .g-wide{grid-column:1/-1}
.gallery .g-wide img{aspect-ratio:4/3}
.gallery figcaption{padding:10px 12px;font-size:.86rem;color:var(--muted);margin:0!important}
.mh-img img{aspect-ratio:1200/630;object-fit:cover}
@media (max-width:480px){.gallery{grid-template-columns:1fr}}
.gallery{grid-template-columns:repeat(3,1fr)}
@media (max-width:560px){.gallery{grid-template-columns:1fr 1fr}.gallery figure:nth-child(4){grid-column:1/-1}.gallery figure:nth-child(4) img{aspect-ratio:4/3}}
.gallery .g-half{grid-column:span 1}
.gallery:has(.g-half){grid-template-columns:1fr 1fr}
.gallery .g-half img{aspect-ratio:4/3}
.consent{font-size:.78rem;color:var(--muted);margin:0}
.consent a{color:var(--leaf)}
footer .legal a{color:inherit}

/* price blocks */
.price{display:grid;gap:2px;padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--oil) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--oil) 40%,transparent)}
.price span{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price b{font-family:var(--font-display);font-size:1.45rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.price small{font-size:.82rem;color:var(--muted)}
.price.contact{background:color-mix(in srgb,var(--leaf) 10%,var(--surface));border-color:color-mix(in srgb,var(--leaf) 35%,transparent)}
.price-hero{margin-top:22px;display:inline-grid;gap:2px;padding:14px 20px;border-radius:12px;background:color-mix(in srgb,var(--oil) 20%,transparent);border:1px solid color-mix(in srgb,var(--oil) 55%,transparent)}
.price-hero span{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--oil)}
.price-hero b{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.2rem);font-variant-numeric:tabular-nums;line-height:1.15}
.price-hero small{font-size:.86rem;opacity:.8}
.price-hero.contact{background:color-mix(in srgb,var(--sprout) 14%,transparent);border-color:color-mix(in srgb,var(--sprout) 45%,transparent)}
.price-hero.contact span{color:var(--sprout)}
.price-box{display:grid;gap:2px;padding:16px 20px;border-radius:12px;background:var(--oil-soft);margin-block:1.2em}
.price-box span{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price-box b{font-family:var(--font-display);font-size:1.6rem;font-variant-numeric:tabular-nums}
.price-box small{font-size:.88rem;color:var(--muted)}