/* ระบบดีไซน์ GITH — ฟอนต์ Anuphan, โทนเขียวแบรนด์, มุมมน, เงานุ่ม, เคลื่อนไหวตอนเลื่อนหน้า */

/* ---------- ค่ากลาง ---------- */
:root{
  --forest:#0A2216; --forest-2:#10301E; --forest-3:#174029;
  --leaf:#23884A; --leaf-deep:#17703A; --leaf-ink:#0F4F28; --sprout:#9ED24F; --mint:#5FD39A;
  --paper:#F6F8F3; --surface:#FFFFFF; --surface-2:#EDF4E8; --surface-3:#E2EEDB;
  --ink:#0F1E15; --ink-2:#4A5A4F; --ink-3:#7B8A7F;
  --line:#E2E9DE; --line-2:#CDDBC7;
  --straw:#8A6414; --straw-soft:#F7EFDC;
  --on-dark:#EEF6EB; --on-dark-2:#AFC5B4;
  --maxw:1240px; --gutter:clamp(20px,4vw,40px);
  --r-sm:12px; --r:20px; --r-lg:28px;
  --sh-1:0 1px 2px rgba(15,40,24,.05),0 12px 32px -20px rgba(15,40,24,.28);
  --sh-2:0 2px 6px rgba(15,40,24,.06),0 30px 60px -28px rgba(15,40,24,.4);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:'Anuphan',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
main{overflow-x:clip}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
::selection{background:var(--sprout); color:var(--forest)}
:focus-visible{outline:3px solid var(--mint); outline-offset:3px; border-radius:6px}

.w{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
h1,h2,h3,h4{font-family:var(--font); color:inherit}
h2{font-weight:650; font-size:clamp(30px,3.5vw,48px); line-height:1.22; margin:0 0 16px; letter-spacing:-.018em; text-wrap:pretty}
h3{font-weight:600; font-size:20px; line-height:1.42; margin:0 0 8px; letter-spacing:-.005em}
p{margin:0 0 14px}
.lede{font-size:clamp(17px,1.35vw,19px); color:var(--ink-2); max-width:60ch; margin:0}

/* ป้ายหัวข้อ */
.eyebrow{display:flex; width:fit-content; max-width:100%; align-items:center; gap:9px; font-size:14px; font-weight:600; line-height:1; color:var(--leaf-deep); background:rgba(35,136,74,.09); padding:8px 14px 8px 12px; border-radius:999px; margin:0 0 20px}
.eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(35,136,74,.16)}
.eyebrow.on{color:var(--sprout); background:rgba(158,210,79,.12)}
.eyebrow.on::before{box-shadow:0 0 0 4px rgba(158,210,79,.18)}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font); font-weight:600; font-size:16px; line-height:1.2; padding:15px 26px; border-radius:999px; background:var(--leaf-deep); color:#fff; border:1.5px solid transparent; cursor:pointer; text-align:center;
  box-shadow:0 10px 24px -12px rgba(23,112,58,.65); transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s}
.btn:hover{transform:translateY(-2px); background:var(--leaf-ink); box-shadow:0 16px 30px -14px rgba(23,112,58,.75)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--leaf-deep); border-color:var(--line-2); box-shadow:none}
.btn.ghost:hover{background:var(--surface); border-color:var(--leaf-deep)}
.btn.on-dark{background:var(--sprout); color:#0B2A12; box-shadow:0 12px 30px -14px rgba(158,210,79,.7)}
.btn.on-dark:hover{background:#B4E26C}
.btn.on-dark.ghost{background:rgba(255,255,255,.06); color:var(--on-dark); border-color:rgba(255,255,255,.2); box-shadow:none}
.btn.on-dark.ghost:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4)}

/* ---------- เมนูบน ---------- */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(246,248,243,.8); -webkit-backdrop-filter:saturate(1.5) blur(16px); backdrop-filter:saturate(1.5) blur(16px); border-bottom:1px solid transparent; transition:box-shadow .3s, border-color .3s, background .3s}
.site-nav.scrolled{background:rgba(255,255,255,.86); border-color:var(--line); box-shadow:0 10px 30px -22px rgba(15,40,24,.45)}
.navi{display:flex; align-items:center; gap:20px; height:78px; transition:height .3s var(--ease)}
.site-nav.scrolled .navi{height:66px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand img{width:46px; height:auto; transition:transform .4s var(--ease)}
.brand:hover img{transform:rotate(-6deg) scale(1.05)}
.brand b{font-weight:700; font-size:17px; line-height:1.15; letter-spacing:-.01em}
.brand span{display:block; font-size:10px; font-weight:600; letter-spacing:.16em; color:var(--ink-3); text-transform:uppercase; margin-top:3px}
.menu{display:flex; gap:2px; margin-left:auto}
.menu a{padding:9px 13px; border-radius:999px; font-size:15.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; transition:color .2s, background .2s}
.menu a:hover{color:var(--ink); background:rgba(23,112,58,.07)}
.menu a[aria-current]{color:var(--leaf-deep); background:rgba(23,112,58,.1); font-weight:600}
.lang{display:flex; flex:none; padding:3px; background:var(--surface-2); border-radius:999px; font-size:12.5px; font-weight:700; letter-spacing:.04em}
.lang a{padding:6px 11px; border-radius:999px; color:var(--ink-3); line-height:1; transition:color .2s}
.lang a:hover{color:var(--ink)}
.lang .on{background:var(--surface); color:var(--leaf-deep); box-shadow:0 1px 4px rgba(15,40,24,.15)}
.nav-cta{padding:12px 22px; font-size:15px; white-space:nowrap}
.burger{display:none; width:46px; height:46px; flex:none; border:0; border-radius:14px; background:var(--surface-2); cursor:pointer; position:relative; padding:0}
.burger span{position:absolute; left:13px; right:13px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), top .3s var(--ease)}
.burger span:first-child{top:18px}
.burger span:last-child{top:26px}
.burger[aria-expanded="true"] span:first-child{top:22px; transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:22px; transform:rotate(-45deg)}

/* เมนูมือถือ */
.mnav{position:fixed; inset:0; top:66px; z-index:45; background:var(--paper); padding:12px var(--gutter) 120px; overflow-y:auto; animation:drop .35s var(--ease)}
.mnav[hidden]{display:none}
.mnav nav{display:grid}
.mnav nav a{display:flex; justify-content:space-between; align-items:center; font-size:24px; font-weight:600; padding:16px 0; border-bottom:1px solid var(--line); letter-spacing:-.01em}
.mnav nav a::after{content:'→'; font-size:20px; color:var(--leaf); transition:transform .25s var(--ease)}
.mnav nav a:hover::after{transform:translateX(4px)}
.mnav nav a[aria-current]{color:var(--leaf-deep)}
.mnav .mfoot{display:grid; gap:12px; margin-top:28px}
.mnav .lang{justify-self:start; margin-left:0; font-size:14px}
.mnav .lang a{padding:9px 16px}
@keyframes drop{from{opacity:0; transform:translateY(-10px)}to{opacity:1; transform:none}}

/* ปุ่มลัดติดขอบล่าง (มือถือ) */
.mbar{display:none}

@media(max-width:1180px){.menu a{padding:8px 9px; font-size:14.5px}.nav-cta{padding:11px 16px; font-size:14.5px}}
@media(max-width:1060px){
  .menu,.nav-cta{display:none}
  .lang{margin-left:auto}
  .burger{display:block}
  .navi{height:66px}
  .mbar{display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed; z-index:40; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); padding:7px; background:rgba(10,34,22,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-radius:20px; box-shadow:0 18px 40px -14px rgba(0,0,0,.5); transition:transform .35s var(--ease)}
  .mbar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:13px 10px; border-radius:14px; font-weight:600; font-size:16px; line-height:1; color:#fff}
  .mbar svg{width:19px; height:19px; flex:none}
  .mbar .call{background:var(--sprout); color:#0B2A12}
  .mbar .chat{background:#06C755}
  html.lock .mbar{transform:translateY(160%)}
  body{padding-bottom:84px}
}
@media(max-width:420px){.navi{gap:10px}.brand{gap:9px}.brand img{width:38px}.brand b{font-size:14.5px}.brand span{font-size:8.5px; letter-spacing:.08em}.lang a{padding:6px 9px}}

/* ---------- หน้าแรก: hero ---------- */
.hero{position:relative; overflow:hidden; isolation:isolate; background:var(--forest); color:var(--on-dark)}
.hero::before{content:''; position:absolute; z-index:-1; right:-15%; top:-35%; width:min(900px,90vw); aspect-ratio:1; background:radial-gradient(closest-side,rgba(158,210,79,.22),transparent 72%); animation:glow 14s ease-in-out infinite alternate}
.hero::after{content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 30%,#000 10%,transparent 75%); mask-image:radial-gradient(ellipse 70% 80% at 70% 30%,#000 10%,transparent 75%)}
.hero .w{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(36px,5.5vw,84px); align-items:center; padding-top:clamp(56px,8vw,120px); padding-bottom:clamp(48px,7vw,104px)}
.hero h1{font-weight:700; font-size:clamp(38px,4.3vw,62px); line-height:1.2; letter-spacing:-.025em; margin:0 0 26px; text-wrap:pretty}
.nw{white-space:nowrap}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,#B7E36D 10%,var(--mint) 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero p{color:var(--on-dark-2); font-size:clamp(17px,1.4vw,19.5px); line-height:1.8; max-width:46ch; margin:0 0 38px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero .w>div:first-child>*{animation:rise .9s var(--ease) both}
.hero .w>div:first-child>:nth-child(2){animation-delay:.08s}
.hero .w>div:first-child>:nth-child(3){animation-delay:.16s}
.hero .w>div:first-child>:nth-child(4){animation-delay:.24s}
.hero .w>img,.hero .shot{animation:pop 1.2s var(--ease) .1s both}
.hero .w>img{border-radius:var(--r-lg)!important; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08)}
.shot{position:relative}
.shot img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-lg); box-shadow:0 40px 90px -40px rgba(0,0,0,.7); border:1px solid rgba(255,255,255,.08)}
.chip{position:absolute; left:-28px; bottom:44px; background:rgba(10,34,22,.62); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:14px 18px; font-size:14.5px; color:var(--on-dark); line-height:1.5; box-shadow:0 24px 50px -20px rgba(0,0,0,.6); animation:float 6s ease-in-out infinite}
.chip b{display:block; color:var(--sprout); font-weight:600; font-size:12.5px; letter-spacing:.03em; margin-bottom:2px}
@keyframes rise{from{opacity:0; transform:translateY(26px)}to{opacity:1; transform:none}}
@keyframes pop{from{opacity:0; transform:scale(.94) translateY(20px)}to{opacity:1; transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glow{from{transform:translate(0,0) scale(1)}to{transform:translate(-8%,10%) scale(1.15)}}
@media(max-width:900px){
  .hero .w,.hero .w[style]{grid-template-columns:1fr!important; padding-top:44px}
  .shot img{aspect-ratio:4/3}
  .eyebrow{font-size:13px}
  .hero .eyebrow{font-size:12px; padding:7px 12px 7px 10px; gap:8px}
  .hero-cta .btn{flex:1 1 100%}
  .chip{left:14px; bottom:14px}
}

/* จุดเด่น 4 ช่องใต้ hero */
.strip{background:var(--forest); color:var(--on-dark); padding:0 0 clamp(48px,6vw,88px)}
.strip .w{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.strip .w>div{background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09); border-radius:var(--r); padding:22px 24px; transition:background .3s, border-color .3s}
.strip .w>div:hover{background:rgba(255,255,255,.07); border-color:rgba(158,210,79,.35)}
.strip .k{font-size:13.5px; font-weight:600; color:var(--sprout); margin:0 0 6px}
.strip .v{font-size:16px; line-height:1.55; margin:0; color:var(--on-dark)}
@media(max-width:900px){.strip .w{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.strip .w{gap:10px}.strip .w>div{padding:16px 16px 18px; border-radius:16px}.strip .k{font-size:12.5px}.strip .v{font-size:14.5px}}

/* แถบพันธมิตร */
.partners{background:var(--surface); border-bottom:1px solid var(--line); padding:28px 0}
.partners .w{display:flex; align-items:center; gap:14px 36px; flex-wrap:wrap}
.partners p{margin:0; font-size:14px; font-weight:600; color:var(--ink-3); flex:none}
.partners ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0}
.partners li{font-size:16.5px; font-weight:600; color:var(--ink-2); position:relative; padding:0 18px}
.partners li:first-child{padding-left:0}
.partners li+li::before{content:''; position:absolute; left:-2px; top:50%; width:5px; height:5px; margin-top:-2px; border-radius:50%; background:var(--line-2)}
@media(max-width:700px){.partners .w{gap:12px}.partners ul{gap:8px}.partners li,.partners li:first-child{padding:6px 13px; font-size:14.5px; background:var(--surface-2); border-radius:999px}.partners li+li::before{display:none}}

/* ---------- ส่วนเนื้อหาทั่วไป ---------- */
section{padding:clamp(72px,9vw,128px) 0}
.sec-top{margin-bottom:clamp(34px,4vw,56px); max-width:760px}
.alt{background:var(--surface)}

/* การ์ดสินค้า */
.prods{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:20px}
.prod{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s}
.prod:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.prod .pic{aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:22px; position:relative; background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#EEF5EA 58%,#E2EEDB 100%)}
.prod .pic img{max-height:100%; width:auto; object-fit:contain; filter:drop-shadow(0 16px 18px rgba(15,40,24,.2)); transition:transform .6s var(--ease)}
.prod:hover .pic img{transform:scale(1.07) translateY(-4px)}
.prod .pic .ph{font-size:13px; font-weight:600; color:var(--ink-3)}
.badge{position:absolute; top:12px; right:12px; font-size:12px; font-weight:700; background:var(--straw-soft); color:var(--straw); padding:5px 10px; border-radius:999px; letter-spacing:.02em}
.prod .body{padding:18px 20px 20px; display:flex; flex-direction:column; flex:1}
.prod .cat{font-size:12.5px; font-weight:700; color:var(--leaf); margin:0 0 6px; letter-spacing:.02em}
.prod h3{margin:0 0 6px; font-size:19px; line-height:1.35}
.prod .desc{font-size:14.5px; color:var(--ink-2); line-height:1.65; margin:0 0 14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.prod .size{font-size:13px; color:var(--ink-3); margin:0 0 14px; font-weight:500}
.prod .more{margin-top:auto; font-size:15px; font-weight:600; color:var(--leaf-deep)}
.prod .more:hover{color:var(--leaf)}
@media(max-width:560px){
  .prods,.prods[style]{grid-template-columns:1fr 1fr!important; gap:12px}
  .prod .pic{padding:14px}
  .prod .body{padding:14px 14px 16px}
  .prod h3{font-size:16.5px}
  .prod .desc{font-size:13.5px; -webkit-line-clamp:2}
  .prod .cat{font-size:11.5px}
  .prod .more{font-size:14px}
}

/* ห้องแล็บ / การ์ดสายพันธุ์ */
.lab{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:20px; margin-top:0}
.plate{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:0; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.plate:hover{transform:translateY(-6px); box-shadow:var(--sh-2)}
.plate img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:filter .6s var(--ease)}
.plate:hover img{filter:brightness(1.08) saturate(1.1)}
.plate .cap{padding:18px 20px 20px}
.plate .sp{font-weight:600; font-size:17px; font-style:italic; margin:0 0 6px}
.plate .code{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--straw); background:var(--straw-soft); padding:3px 10px; border-radius:999px; margin:0 0 10px}
.plate .use{font-size:14.5px; color:var(--ink-2); line-height:1.65; margin:0}

/* ส่วนสีเข้ม: ห้องแล็บ (หน้าแรก) และคลังสายพันธุ์ (หน้า OEM) */
#lab,#strains{background:var(--forest); color:var(--on-dark); position:relative; overflow:hidden; isolation:isolate}
#lab::before,#strains::before{content:''; position:absolute; z-index:-1; left:-20%; bottom:-40%; width:min(900px,90vw); aspect-ratio:1; background:radial-gradient(closest-side,rgba(95,211,154,.14),transparent 70%)}
#lab h2,#strains h2{color:#fff}
#lab .lede,#strains .lede{color:var(--on-dark-2)}
#lab .eyebrow,#strains .eyebrow{color:var(--sprout); background:rgba(158,210,79,.12)}
#lab .eyebrow::before,#strains .eyebrow::before{box-shadow:0 0 0 4px rgba(158,210,79,.18)}
#lab .plate,#strains .plate{background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.09)}
#lab .plate:hover,#strains .plate:hover{border-color:rgba(158,210,79,.35); box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
#lab .use,#strains .use{color:var(--on-dark-2)}
#lab .code,#strains .code{background:rgba(158,210,79,.14); color:var(--sprout)}

/* โรงงาน */
.fac{display:grid; grid-template-columns:1.6fr 1fr; gap:16px; margin-top:0}
.fac img{border-radius:var(--r); width:100%; height:100%; object-fit:cover}
.fac .big{border-radius:var(--r); overflow:hidden}
.fac .big img{aspect-ratio:16/10; transition:transform 1.2s var(--ease)}
.fac .big:hover img{transform:scale(1.03)}
.fac .col{display:grid; gap:16px}
.fac .col img{aspect-ratio:16/10}
@media(max-width:760px){.fac,.fac[style]{grid-template-columns:1fr!important}.fac .col{grid-template-columns:1fr 1fr}}

/* รายการแบบแถว (โรคพืช ช่องทางติดต่อ) */
.rowlist{display:grid; gap:12px}
.rowlist>a,.rowlist>div{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 26px; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; transition:border-color .3s, transform .3s var(--ease), box-shadow .3s}
.rowlist>a:hover{border-color:var(--leaf); transform:translateY(-3px); box-shadow:var(--sh-1)}
.rowlist b{font-weight:650; font-size:18.5px; line-height:1.4}
.rowlist .sub{display:block; font-size:15px; color:var(--ink-2); margin-top:3px; line-height:1.55}
.rowlist .go{font-size:15px; font-weight:600; color:var(--leaf-deep); background:var(--surface-2); padding:10px 18px; border-radius:999px; white-space:nowrap; transition:background .25s, color .25s}
.rowlist>a:hover .go,.rowlist a.go:hover{background:var(--leaf-deep); color:#fff}
@media(max-width:600px){.rowlist>a,.rowlist>div{grid-template-columns:1fr; gap:12px; padding:20px}.rowlist .go{justify-self:start; white-space:normal}}

/* ข่าว (หน้าแรก) */
.newsgrid{display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:start}
.lead-news{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:block; transition:transform .4s var(--ease), box-shadow .4s var(--ease)}
.lead-news:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.lead-news img{aspect-ratio:16/10; object-fit:cover; width:100%; transition:transform 1s var(--ease)}
.lead-news:hover img{transform:scale(1.04)}
.lead-news .b{padding:26px 30px 30px; position:relative; background:var(--surface)}
.d{font-size:14px; font-weight:600; color:var(--leaf-deep)}
.lead-news .d{margin:0 0 10px}
.lead-news h3{font-size:clamp(21px,2vw,27px); line-height:1.38; margin-bottom:10px; letter-spacing:-.012em}
.lead-news p{font-size:16px; color:var(--ink-2); margin:0}
.nlist{display:grid; gap:12px}
.nitem{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 24px; display:block; transition:border-color .3s, transform .3s var(--ease), box-shadow .3s}
.nitem:hover{border-color:var(--leaf); transform:translateX(6px); box-shadow:var(--sh-1)}
.nitem .d{margin:0 0 6px; font-size:13.5px}
.nitem b{font-weight:600; font-size:16.5px; line-height:1.5; display:block}
@media(max-width:900px){.newsgrid{grid-template-columns:1fr}}

/* การ์ดข่าว/งานวิจัย (หน้ารวม) */
.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ncard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s}
.ncard:hover{transform:translateY(-6px); box-shadow:var(--sh-2); border-color:transparent}
.ncard>a{display:block; overflow:hidden}
.ncard img{aspect-ratio:16/10; object-fit:cover; width:100%; transition:transform .9s var(--ease)}
.ncard:hover img{transform:scale(1.05)}
.ncard .noimg{aspect-ratio:16/10; background:radial-gradient(circle at 50% 40%,#fff,var(--surface-3)); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; color:var(--ink-3)}
.ncard .b{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}
.ncard .d{font-size:13.5px; font-weight:500; color:var(--ink-3); margin:0 0 8px}
.ncard .d b{color:var(--leaf-deep); font-weight:600}
.ncard h3{font-size:19.5px; line-height:1.45; margin:0 0 10px}
.ncard p{font-size:15px; color:var(--ink-2); line-height:1.7; margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.ncard .more{margin-top:auto; font-size:15px; font-weight:600; color:var(--leaf-deep)}
@media(max-width:960px){.cardgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cardgrid{grid-template-columns:1fr}}

/* แผงชวนติดต่อ */
.band{padding:0 var(--gutter) clamp(72px,9vw,120px); background:transparent; text-align:center}
section+.band,.alt+.band{padding-top:clamp(8px,2vw,24px)}
.band .w{position:relative; overflow:hidden; isolation:isolate; max-width:calc(var(--maxw) - 2 * var(--gutter)); padding:clamp(48px,6vw,88px) clamp(24px,5vw,80px); border-radius:32px; color:var(--on-dark);
  background:radial-gradient(ellipse 60% 90% at 90% 0%,rgba(158,210,79,.28),transparent 60%),radial-gradient(ellipse 50% 80% at 0% 100%,rgba(95,211,154,.18),transparent 60%),var(--forest)}
.band .w::after{content:''; position:absolute; z-index:-1; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse at center,#000 20%,transparent 75%)}
.band h2{color:#fff; margin:0 auto 14px; max-width:24ch}
.band p{color:var(--on-dark-2); max-width:54ch; margin:0 auto 32px; font-size:clamp(16.5px,1.3vw,18.5px)}
.band .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ท้ายเว็บ */
.site-footer{background:var(--forest); color:var(--on-dark-2); padding:clamp(56px,7vw,96px) 0 36px; font-size:15.5px}
.fgrid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px}
.site-footer h4{font-size:15px; font-weight:600; color:#fff; margin:6px 0 14px}
.site-footer ul{list-style:none; margin:0; padding:0; line-height:2.2}
.site-footer ul a,.fbot a{transition:color .2s}
.site-footer ul a:hover,.fbot a:hover{color:var(--sprout)}
.fbrand{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.fbrand img{width:48px; filter:brightness(1.6) saturate(1.1)}
.fbrand b{font-weight:700; font-size:18px; color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1); margin-top:48px; padding-top:24px; font-size:14px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}

/* ---------- หน้ารายละเอียด ---------- */
.crumb{font-size:14.5px; color:var(--ink-3); padding:30px 0 0; margin:0}
.crumb a{color:var(--leaf-deep); font-weight:500}
.crumb a:hover{text-decoration:underline; text-underline-offset:3px}
.crumb span{margin:0 9px; color:var(--line-2)}

.phero{display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,5.5vw,80px); align-items:center; padding:34px 0 clamp(56px,7vw,100px)}
.pshot{aspect-ratio:1/1; border-radius:var(--r-lg); padding:clamp(28px,4.5vw,64px); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#EDF5E8 55%,#DCEAD3 100%); animation:pop 1.1s var(--ease) both}
.pshot img{max-height:100%; max-width:88%; width:auto; object-fit:contain; filter:drop-shadow(0 34px 34px rgba(15,40,24,.28)); animation:float 7s ease-in-out infinite}
.phero>div:last-child>*{animation:rise .9s var(--ease) both}
.phero>div:last-child>:nth-child(2){animation-delay:.06s}
.phero>div:last-child>:nth-child(3){animation-delay:.12s}
.phero>div:last-child>:nth-child(4){animation-delay:.18s}
.phero h1{font-weight:700; font-size:clamp(38px,4.8vw,62px); line-height:1.16; letter-spacing:-.025em; margin:0 0 14px}
.phero .tag{font-size:clamp(17px,1.5vw,20px); color:var(--ink-2); line-height:1.7; margin:0 0 30px; max-width:46ch}
.specs{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:28px}
.specs>div{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px}
.specs .k{font-size:13px; font-weight:500; color:var(--ink-3); margin:0 0 4px; line-height:1.4}
.specs .v{font-weight:650; font-size:17px; margin:0; line-height:1.4}
.buy{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.seal{display:inline-flex; align-items:center; gap:10px; font-size:14.5px; line-height:1.5; color:var(--ink-2); background:var(--straw-soft); border-radius:16px; padding:11px 18px; margin:0 8px 10px 0}
.seal b{color:var(--straw); font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; flex:none}
@media(max-width:900px){.phero{grid-template-columns:1fr; gap:28px; padding-top:22px}.pshot{aspect-ratio:4/3}}
@media(max-width:700px){.specs,.specs[style]{grid-template-columns:1fr 1fr!important}}

.tw{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); margin:0; box-shadow:var(--sh-1)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:15.5px}
th{text-align:left; font-weight:600; font-size:14px; color:var(--ink-2); padding:16px 22px; background:var(--surface-2); white-space:nowrap}
td{padding:18px 22px; border-top:1px solid var(--line); vertical-align:top; line-height:1.7; color:var(--ink-2)}
td:first-child{color:var(--ink); font-weight:600}
tbody tr{transition:background .2s}
tbody tr:hover{background:#FAFCF8}

.bens{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:0}
.bens>div{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 22px; font-size:16px; line-height:1.7; display:grid; grid-template-columns:42px 1fr; gap:16px; align-items:start; color:var(--ink-2); transition:border-color .3s, box-shadow .3s}
.bens>div:hover{border-color:var(--line-2); box-shadow:var(--sh-1)}
.bens .t{width:42px; height:42px; border-radius:13px; background:var(--surface-2); color:var(--leaf-deep); font-weight:700; font-size:14.5px; display:grid; place-items:center; line-height:1}
.bens b{color:var(--ink); font-weight:600}
@media(max-width:760px){.bens{grid-template-columns:1fr}}

.faq{display:grid; gap:12px; margin-top:24px}
.faq>div{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 26px}
.faq h3{margin:0 0 8px; font-size:18px}
.faq p{margin:0; color:var(--ink-2); font-size:16px; line-height:1.8}

/* บทความ */
.abody{max-width:72ch}
.abody h1{font-weight:700; font-size:clamp(32px,4.4vw,54px); line-height:1.2; letter-spacing:-.022em; margin:0 0 18px; text-wrap:pretty}
.abody h2{font-size:clamp(24px,2.6vw,32px); margin:48px 0 14px}
.abody p{font-size:17.5px; line-height:1.9; color:var(--ink-2); margin:0 0 20px}
.abody ul,.abody ol{color:var(--ink-2); line-height:1.9; font-size:17px; padding-left:1.3em; margin:0 0 22px}
.abody li{margin-bottom:6px}
.abody li::marker{color:var(--leaf)}
.abody img{border-radius:var(--r); margin:10px 0}
.byline{display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px; color:var(--ink-3); margin-bottom:30px}
.byline b{color:var(--leaf-deep); font-weight:600}
.lead-img{border-radius:var(--r-lg); aspect-ratio:16/9; object-fit:cover; width:100%; max-width:960px; margin-bottom:12px}
.imgcap{font-size:14px; color:var(--ink-3); margin:0 0 40px; max-width:960px}

/* คำตอบสั้น */
.qa{background:linear-gradient(135deg,#E9F5E1,#F6FAF2); border:1px solid #CFE3C4; border-left:5px solid var(--leaf); border-radius:var(--r); padding:26px 30px; margin-bottom:38px}
.qa .lab{font-size:13.5px; font-weight:700; color:var(--leaf-deep); letter-spacing:.03em; margin:0 0 10px}
.qa p{font-size:18px; line-height:1.85; color:var(--ink); margin:0; max-width:66ch}

/* อาการ (มีเลขลำดับ) */
.sym{display:grid; gap:10px; margin:24px 0}
.sym>div{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:18px 22px 18px 72px; position:relative; font-size:16.5px; line-height:1.75; color:var(--ink-2)}
.sym>div::before{content:attr(data-s); position:absolute; left:20px; top:17px; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; font-size:13.5px; font-weight:700; color:var(--straw); background:var(--straw-soft); line-height:1}

/* ขั้นตอน (เส้นเวลา) */
.plan{display:grid; margin:28px 0}
.pstep{display:grid; grid-template-columns:54px 1fr; gap:20px; padding:0 0 22px; position:relative}
.pstep::before{content:''; position:absolute; left:26px; top:62px; bottom:6px; width:2px; border-radius:2px; background:linear-gradient(var(--line-2),rgba(205,219,199,.2))}
.pstep:last-child{padding-bottom:0}
.pstep:last-child::before{display:none}
.pstep .n{width:54px; height:54px; border-radius:50%; background:var(--leaf-deep); color:#fff; display:grid; place-items:center; font-weight:700; font-size:20px; line-height:1; box-shadow:0 0 0 6px var(--surface-2); position:relative}
.pstep>div{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 24px 20px}
.pstep h3{margin:0 0 6px; font-size:18.5px}
.pstep p{margin:0; font-size:16px; color:var(--ink-2); line-height:1.75}

/* ผู้เขียน */
.author{display:flex; gap:18px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:22px 26px; margin-top:40px}
.avatar{width:56px; height:56px; border-radius:50%; background:var(--surface-2); flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ink-3); text-align:center}
.avatar img{width:100%; height:100%; object-fit:cover}
.author .k{font-size:13px; font-weight:600; color:var(--ink-3); margin:0 0 2px}
.author p{margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.65}
.author b{color:var(--ink)}

/* ฟอร์ม */
.form{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--sh-1)}
.frow{margin-bottom:16px}
.frow.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form label{display:block; font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:8px}
.form input,.form textarea,.form select{width:100%; border:1.5px solid var(--line-2); border-radius:13px; background:#FBFCFA; padding:13px 16px; font-size:16px; font-family:inherit; color:var(--ink); transition:border-color .2s, box-shadow .2s, background .2s; -webkit-appearance:none; appearance:none}
.form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 22px) 55%,calc(100% - 16px) 55%; background-size:6px 6px; background-repeat:no-repeat; padding-right:44px}
.form textarea{min-height:130px; resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:none; border-color:var(--leaf); background:#fff; box-shadow:0 0 0 4px rgba(35,136,74,.15)}
.form .btn{padding:17px 26px; font-size:17px}
.hint{font-size:14px; color:var(--ink-3); margin:12px 0 0; line-height:1.6}
.contact-grid{gap:28px!important}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr!important}}
@media(max-width:560px){.frow.two{grid-template-columns:1fr}}

/* หัวหน้ารวม (สินค้า ข่าว งานวิจัย ฯลฯ) */
.lhead{position:relative; padding:clamp(52px,7vw,104px) 0 clamp(34px,4vw,56px)}
.lhead::before{content:''; position:absolute; z-index:-1; inset:0 -100vmax; background:radial-gradient(ellipse 55% 110% at 18% 0%,#E1EFD7 0%,rgba(225,239,215,0) 70%)}
.lhead h1{font-weight:700; font-size:clamp(38px,5.4vw,70px); line-height:1.14; letter-spacing:-.028em; margin:0 0 18px; max-width:20ch; text-wrap:pretty}
.lhead p{color:var(--ink-2); font-size:clamp(17px,1.4vw,19.5px); margin:0; max-width:60ch; line-height:1.8}
.lhead>*{animation:rise .9s var(--ease) both}
.lhead>:nth-child(2){animation-delay:.07s}
.lhead>:nth-child(3){animation-delay:.14s}

/* ---------- เคลื่อนไหวตอนเลื่อนหน้า (site.js ใส่ class ให้) ---------- */
.rv{opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--i,0) * 80ms)}
.rv.in{opacity:1; transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
}