:root{--g:#8dc63f;--lg:#8dc63f;--lk:#231f20;--g2:#68933f;--g3:#2c5629;--ink:#231f20;--bg:#fff;--bg2:#f6efdb;--card:#fff;--text:#231f20;--mute:#414042;--line:rgba(35,31,32,.14);
--hd:'Bungee',Impact,'Arial Black',sans-serif;--bd:'Fraunces',Georgia,'Times New Roman',serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#141a13;--bg2:#1b2319;--card:#222c20;--text:#f3f1ea;--mute:#c5c9bc;--line:rgba(255,255,255,.16);--lk:#f3f1ea}}
:root[data-theme="dark"]{--bg:#141a13;--bg2:#1b2319;--card:#222c20;--text:#f3f1ea;--mute:#c5c9bc;--line:rgba(255,255,255,.16);--lk:#f3f1ea}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--bd);font-weight:400;font-size:1.05rem;line-height:1.65}
h1,h2,h3{font-family:var(--hd);font-weight:400;line-height:1.08;margin:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--g);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.sec{padding:88px 0}
h2{font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:18px}
.lead{max-width:60ch;color:var(--mute);font-weight:300}
.btn{display:inline-block;font-family:var(--hd);font-size:.95rem;padding:14px 26px;border-radius:999px;text-decoration:none;background:var(--g);color:var(--ink);border:2px solid var(--g)}
.btn:hover{background:#a3d45c}
.btn.o{background:transparent;color:#fff;border-color:#fff}
.btn.o:hover{background:rgba(255,255,255,.12)}
/* header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo svg{height:60px;width:150px}
.g{fill:var(--lg)}.k{fill:var(--lk)}
nav{display:flex;gap:26px;align-items:center;font-size:.98rem}
nav a{text-decoration:none}
nav a:hover{color:var(--g2)}
@media(max-width:760px){header .wrap{height:auto;flex-wrap:wrap;padding-top:6px;padding-bottom:8px}nav{width:100%;overflow-x:auto;white-space:nowrap;gap:20px;padding-bottom:4px}}
/* hero */
.hero{position:relative;background:var(--g3);color:#fff;overflow:hidden}
.hero>svg.pt{position:absolute;inset:0;width:100%;height:100%}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:center;padding-top:84px;padding-bottom:92px}
.slogan{font-size:1rem;font-weight:300;letter-spacing:.42em;color:var(--g);margin-bottom:22px}
.hero h1{font-size:clamp(2.2rem,6.2vw,4.6rem);margin-bottom:24px}
.hero p.lead{color:#e6eedb;margin-bottom:34px}
.cta{display:flex;flex-wrap:wrap;gap:14px}
.big{width:100%;max-width:360px;justify-self:center}
.big{--c1:#fff;--c2:var(--g);--c3:var(--g);--c4:#fff}
@media(max-width:760px){.hero .wrap{grid-template-columns:1fr;padding-top:56px;padding-bottom:64px}.big{max-width:150px;justify-self:start;order:-1}}
/* about */
.about{background:var(--bg2)}
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:44px;border-top:2px solid var(--g2)}
.vals div{padding:24px 26px 0 0}
.vals h3{font-size:1.15rem;margin-bottom:8px}
.vals p{font-weight:300;color:var(--mute);font-size:1rem}
.fam{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px;font-weight:700;font-size:.95rem}
.fam span{border:2px solid var(--g2);border-radius:999px;padding:6px 16px}
@media(max-width:760px){.vals{grid-template-columns:1fr}.vals div{padding-right:0}}
/* products */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:34px 28px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px 6px 26px 6px;overflow:hidden;display:flex;flex-direction:column}
.pic{height:170px;border-radius:0 100% 0 100%/0 100% 0 100%;margin:14px 14px 0;overflow:hidden}
.pic svg{width:100%;height:100%;display:block}
.card .in{padding:18px 22px 24px}
.card h3{font-size:1.35rem;margin-bottom:4px}
.tag{display:inline-block;background:var(--g);color:var(--ink);font-weight:700;font-size:.8rem;padding:2px 12px;border-radius:999px;margin-bottom:12px}
.origin{color:var(--mute);font-size:.92rem;margin-bottom:12px}
dl{margin:0;font-size:.95rem}
dt{font-weight:700;margin-top:9px}
dd{margin:0;font-weight:300;color:var(--mute)}
.note{margin-top:30px;font-size:.88rem;color:var(--mute);font-style:italic}
/* process */
.proc{background:var(--g3);color:#fff}
.proc .lead{color:#dfe9d3}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:44px;counter-reset:s}
.steps div{border-top:3px solid var(--g);padding-top:16px;counter-increment:s}
.steps h3{font-size:1.1rem;margin-bottom:8px;color:var(--g)}
.steps h3::before{content:counter(s) ". "}
.steps p{font-weight:300;font-size:.98rem;color:#e6eedb}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}
/* contact */
.contact .box{background:var(--g);color:var(--ink);border-radius:8px 8px 8px 90px;padding:54px 44px 54px 44px;display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:center}
.contact h2{margin-bottom:12px}
.contact p{font-weight:400}
.info{font-size:1rem;line-height:1.6}.loc{list-style:none;margin:14px 0 0;padding:0}.loc li{margin-bottom:9px}
.info b{font-weight:900}
.contact .btn{background:var(--ink);color:#fff;border-color:var(--ink);margin:18px 10px 0 0}
.contact .btn.o{background:transparent;color:var(--ink)}
@media(max-width:760px){.contact .box{grid-template-columns:1fr;padding:38px 26px 58px}}
footer{background:var(--ink);color:#e9e9e4;padding:36px 0;font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
footer .logo{--lg:#fff;--lk:#fff}
.top{background:var(--g3);color:#fff;font-size:.85rem}.top .wrap{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 24px;padding-top:6px;padding-bottom:6px}.top a{text-decoration:none}
nav a.on{box-shadow:0 3px 0 var(--g)}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}.tabs button{font:700 .95rem var(--bd);background:transparent;color:var(--text);border:2px solid var(--g2);border-radius:999px;padding:7px 18px;cursor:pointer}.tabs button.on{background:var(--g);border-color:var(--g);color:var(--ink)}
a.card{text-decoration:none;color:inherit}a.card:hover{border-color:var(--g2)}a.card .in{padding-bottom:22px}
.back{font-weight:700;text-decoration:none}.det{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:26px}.dp{aspect-ratio:1;max-width:460px;border-radius:0 100% 0 100%/0 100% 0 100%;overflow:hidden}.dp svg{width:100%;height:100%;display:block}.det h2{margin-bottom:6px}.btn.d{background:transparent;color:var(--text);border-color:var(--text)}
@media(max-width:760px){.det{grid-template-columns:1fr}}
@media(min-width:1000px){#fgrid{grid-template-columns:repeat(4,1fr)}}

.stats{display:flex;flex-wrap:wrap;gap:34px;margin-top:36px}
.stats div{display:flex;flex-direction:column}
.stats b{font-family:var(--hd);font-size:2rem;color:var(--g3)}
.stats span{color:var(--mute);font-size:.92rem}
.vals.four{grid-template-columns:repeat(4,1fr)}
.fam span.on{background:var(--g);border-color:var(--g);color:var(--ink)}
.fam span.soon{border-style:dashed;color:var(--mute)}
.soc{margin-top:16px;font-size:.95rem}
.soc a{font-weight:700;text-decoration:underline}
.hl{background:var(--bg2);border-left:3px solid var(--g);padding:8px 14px;font-size:.9rem;color:var(--mute);margin:10px 0 18px;border-radius:0 6px 6px 0}
.coop{max-width:780px;margin-top:34px;display:grid;gap:16px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.coop label{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.92rem}
.coop input,.coop select,.coop textarea{font:400 1rem var(--bd);padding:11px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)}
.coop input:focus,.coop select:focus,.coop textarea:focus{outline:none;border-color:var(--g2)}
.full{grid-column:1/-1}
.fbtn{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.fmsg{font-weight:700;color:var(--g3)}
@media(max-width:640px){.frow{grid-template-columns:1fr}.vals.four{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.vals.four{grid-template-columns:1fr}}

/* ===== Bảng màu tươi sáng (giữ xanh lá & đen thương hiệu Duy Dũng) ===== */
#pat g{stroke:#fff;stroke-opacity:.5}
.top{background:#eef7dc;color:var(--g3);border-bottom:1px solid rgba(104,147,63,.25)}
.hero{background:radial-gradient(circle at 82% 18%,#e2f3a0 0,rgba(226,243,160,0) 46%),linear-gradient(135deg,#8dc63f 0%,#a6da4f 60%,#c4e86a 100%);color:var(--ink)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:54px;background:var(--bg);clip-path:ellipse(62% 100% at 50% 100%);pointer-events:none}
.hero h1{color:var(--ink)}
.hero .slogan{color:var(--g3);font-weight:700}
.hero p.lead{color:#23401f}
.hero .btn{background:var(--g3);border-color:var(--g3);color:#fff}
.hero .btn:hover{background:#1d3a1a;border-color:#1d3a1a}
.hero .btn.o{background:transparent;color:var(--ink);border-color:var(--ink)}
.hero .btn.o:hover{background:rgba(255,255,255,.4)}
.hero .big{--c1:#fff;--c2:var(--g3);--c3:var(--g3);--c4:#fff;filter:drop-shadow(0 14px 22px rgba(44,86,41,.28))}
.stats b{color:#4c8f23}
footer{background:#8dc63f;color:var(--ink)}
footer a{color:var(--ink)}
footer .logo{--lg:#fff;--lk:var(--ink)}

/* ===== Điểm nhấn vàng nắng lúa + nền xanh nhạt ===== */
.about{background:#f1f8e2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .about{background:var(--bg2)}}
:root[data-theme="dark"] .about{background:var(--bg2)}
.tag{background:#f2be37;color:var(--ink)}
.hl{border-left-color:#f2be37}
.sec:not(.contact) h2::after{content:"";display:block;width:58px;height:5px;border-radius:3px;background:#f2be37;margin-top:12px}
.hero::before{content:"";position:absolute;right:-90px;top:-110px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#ffe58a 0,#f7cd4f 52%,rgba(242,190,55,0) 71%);opacity:.6;pointer-events:none}
.fam span.on{background:#f2be37;border-color:#f2be37}
.grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}