:root{
  --brand:#0a6d3b; /* เขียวสุภาพ */
  --brand-dark:#065a31;
  --accent:#f5b300; /* เหลืองอุ่น */
  --text:#1b1b1b;
  --muted:#666;
  --bg:#ffffff;
  --bg-soft:#f7f7f8;
  --card:#ffffff;
  --radius:16px;
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: 'Segoe UI', system-ui, -apple-system, Roboto, 'Noto Sans Thai', sans-serif;
  color:var(--text); background:var(--bg);
}
img{max-width:100%; height:auto; display:block}
a{color:var(--brand); text-decoration:none}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* เฮดเดอร์/นำทาง */
.topbar{background:var(--bg-soft); border-bottom:1px solid #eee}
.topbar .container{display:flex; align-items:center; gap:12px; padding:8px 20px; font-size:.95rem}
.topbar .right{margin-left:auto; display:flex; gap:12px; align-items:center}
.topbar a{color:var(--muted)}

.nav{position:sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid #eee}
.nav .container{display:flex; align-items:center; gap:20px; padding:14px 20px}
.brand{display:flex; align-items:center; gap:12px}
.brand-logo{width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg, var(--brand), var(--brand-dark)); box-shadow:var(--shadow)}
.brand h1{font-size:1.25rem; margin:0}
.menu{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.menu a{padding:10px 12px; border-radius:10px}
.menu a.active, .menu a:hover{background:var(--bg-soft)}
.cta{background:var(--brand); color:#fff; padding:10px 16px; border-radius:12px; box-shadow:var(--shadow)}
.cta:hover{background:var(--brand-dark)}

/* ฮีโร่ */
.hero{position:relative; background:linear-gradient(180deg, #f7fff9, #fff)}
.hero-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:center; padding:48px 0}
.hero h2{font-size:2.25rem; line-height:1.25; margin:0 0 12px}
.hero p{font-size:1.05rem; color:var(--muted)}
.badges{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0 22px}
.badge{background:var(--bg-soft); border:1px solid #eee; padding:8px 12px; border-radius:999px; font-size:.92rem}
.hero-card{background:var(--card); border:1px solid #eee; border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.hero-card h3{margin:0 0 6px}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px}
.stat{background:var(--bg-soft); border:1px solid #eee; border-radius:12px; padding:12px; text-align:center}
.stat b{display:block; font-size:1.15rem}

/* การ์ดและส่วนต่าง ๆ */
.section{padding:52px 0; background:#fff}
.section.alt{background:var(--bg-soft)}
.section h3{font-size:1.6rem; margin:0 0 12px}
.section p{color:var(--muted); line-height:1.85}
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:18px}
.card{background:var(--card); border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.card .pad{padding:16px}
.card h4{margin:0 0 6px}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}

.faq details{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px 16px; margin-bottom:10px}
.faq summary{font-weight:600; cursor:pointer}

/* ฟุตเตอร์ */
.footer{background:#0f1f16; color:#d9e6dd}
.footer .container{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px; padding:36px 20px}
.footer a{color:#d9e6dd}
.copy{border-top:1px solid rgba(255,255,255,.12); padding:12px 0; font-size:.9rem; color:#b5c7b7}

/* แบนเนอร์มือถือแบบป๊อปอัพเลื่อนลง (slide-down) */
.mobile-pop{display:none}
@keyframes slideDown{from{transform:translateY(-100%); opacity:0} to{transform:translateY(0); opacity:1}}
@media (max-width: 768px){$1body{padding-top:0}$2}

/* ป้ายคำเตือน/การปฏิบัติตามกฎหมาย */
.notice{background:#fff6db; border:1px solid #ffe3a1; color:#6a4b00; border-radius:12px; padding:12px 14px}

/* ปุ่มทั่วไป */
.btn{display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid #ccc; background:#fff}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-primary:hover{background:var(--brand-dark)}