:root{
  --green:#0a8a4a; --green-d:#064e3b; --green-l:#e7f6ee;
  --orange:#f15f00; --orange-d:#cc4f00;
  --ink:#13241c; --gray:#5b6b63; --line:#e4eae6; --bg:#f6faf7;
  --shadow:0 10px 30px rgba(6,78,59,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans Thai',sans-serif;color:var(--ink);background:#fff;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;border-radius:12px}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

/* header */
.bhead{border-bottom:1px solid var(--line);background:#fff;position:sticky;top:0;z-index:10}
.bhead .wrap{max-width:1140px;display:flex;align-items:center;justify-content:space-between;height:66px}
.bhead .brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--green-d)}
.bhead .brand img{height:38px;width:auto;border-radius:0}
.bhead nav a{margin-left:18px;font-weight:600;color:var(--ink)}
.bhead .cta{background:var(--orange);color:#fff;padding:9px 18px;border-radius:999px}
.bhead .cta:hover{text-decoration:none;background:var(--orange-d)}

/* breadcrumb */
.crumb{font-size:.9rem;color:var(--gray);margin:22px 0 6px}
.crumb a{color:var(--gray)}

/* article */
article{padding:8px 0 40px}
article h1{font-size:2rem;line-height:1.3;color:var(--green-d);margin:10px 0 12px}
.meta{color:var(--gray);font-size:.92rem;margin-bottom:22px}
.prose h2{font-size:1.45rem;color:var(--green-d);margin:30px 0 12px}
.prose h3{font-size:1.18rem;margin:22px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin:6px 0}
.prose strong{color:var(--green-d)}
.prose img{margin:18px 0}
.prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.96rem}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose thead th{background:var(--green);color:#fff}
.prose tbody tr:nth-child(even){background:var(--bg)}
.prose blockquote{border-left:4px solid var(--green);background:var(--green-l);padding:12px 16px;margin:18px 0;border-radius:0 10px 10px 0}

/* lead image */
.lead-img{margin:0 0 24px}

/* FAQ */
.faq-sec{margin:34px 0}
.faq-sec h2{font-size:1.45rem;color:var(--green-d);margin-bottom:12px}
.faq-sec details{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px;background:#fff}
.faq-sec summary{font-weight:700;cursor:pointer;color:var(--ink)}
.faq-sec details[open]{box-shadow:var(--shadow)}
.faq-sec .a{margin-top:10px;color:var(--gray)}

/* CTA box */
.cta-box{background:linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%);color:#fff;border-radius:18px;padding:28px;margin:34px 0;text-align:center}
.cta-box h3{font-size:1.4rem;margin-bottom:8px}
.cta-box p{opacity:.92;margin-bottom:18px}
.cta-box .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-box .btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;border-radius:999px;padding:13px 26px}
.cta-box .b-orange{background:var(--orange);color:#fff}
.cta-box .b-line{background:#06c755;color:#fff}
.cta-box .btn:hover{text-decoration:none;opacity:.93}

/* index cards */
.bhero{text-align:center;padding:40px 0 10px}
.bhero h1{font-size:2.1rem;color:var(--green-d)}
.bhero p{color:var(--gray);margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:20px;padding:24px 0 50px}
.card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .15s,box-shadow .15s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.card a{text-decoration:none}
.card .ci{aspect-ratio:16/9;object-fit:cover;border-radius:0}
.card .cb{padding:16px 18px}
.card .cdate{font-size:.82rem;color:var(--gray)}
.card .ct{font-size:1.12rem;font-weight:700;color:var(--ink);margin:6px 0}
.card .cd{font-size:.94rem;color:var(--gray)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;margin:18px 0 8px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;transition:transform .15s}
.gallery a:hover img{transform:scale(1.02)}

/* related */
.related{border-top:1px solid var(--line);padding-top:24px;margin-top:34px}
.related h3{margin-bottom:12px;color:var(--green-d)}
.related a{display:block;padding:8px 0;font-weight:600}

/* footer */
.bfoot{background:var(--green-d);color:#bfe6d2;padding:30px 0;margin-top:30px;font-size:.92rem;text-align:center}
.bfoot a{color:#fff}

@media(max-width:600px){
  article h1{font-size:1.55rem}
  .bhero h1{font-size:1.6rem}
  .bhead nav a:not(.cta){display:none}
}