/* site.css — th2app : override/adjustment บน theme.css ของ th23 template */
/* (theme.css = โครงจากเว็บตัวอย่าง · site.css = ดีไซน์เฉพาะของ th2app) */

:root{
  --th2-primary:#0f9d58;      /* เขียวหลัก th2app */
  --th2-primary-dark:#0b7a43;
  --th2-primary-soft:#e6f5ed;
  --th2-accent:#d4a017;       /* ทอง */
  --th2-ink:#14231c;
  --th2-muted:#5c6b62;
  --th2-surface:#ffffff;
  --th2-bg:#f7f9f8;
  --th2-radius:14px;
  --th2-shadow:0 6px 24px rgba(15,60,40,.10);
}

/* ---------- ฟอนต์ Inter (self-host 6 weights) ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/inter-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:900;font-display:swap;src:url('/assets/fonts/inter-900.woff2') format('woff2')}

body{font-family:'Inter',system-ui,sans-serif;background:var(--th2-bg);color:var(--th2-ink)}

/* ---------- nav ---------- */
.portal-nav{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid #e4eae6}
.navbar-brand{font-weight:800;color:var(--th2-ink)}
.portal-nav .nav-link{font-weight:600;color:var(--th2-ink);border-radius:8px;padding:.4rem .75rem}
.portal-nav .nav-link:hover{color:var(--th2-primary-dark);background:var(--th2-primary-soft)}
.portal-nav .nav-link.active{color:var(--th2-primary-dark);background:var(--th2-primary-soft)}

.btn-cta{background:linear-gradient(135deg,var(--th2-primary),var(--th2-primary-dark));color:#fff;font-weight:700;border:0;border-radius:999px;padding:.55rem 1.4rem;box-shadow:0 4px 14px rgba(15,157,88,.35)}
.btn-cta:hover{color:#fff;filter:brightness(1.06)}
.btn-ghost{border:2px solid rgba(255,255,255,.85);color:#fff;font-weight:700;border-radius:999px;padding:.5rem 1.3rem;background:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}

/* ---------- hero ---------- */
.hero{background:linear-gradient(140deg,#0b7a43 0%,#0f9d58 55%,#12b465 100%);color:#fff;border-radius:0 0 28px 28px;padding:3.5rem 0 3rem;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.18),transparent 45%);pointer-events:none}
.hero-title{font-weight:900;font-size:clamp(1.8rem,4.2vw,3rem);line-height:1.15;margin:0 0 1rem}
.hero-title-accent{color:#ffe08a}
.hero-lead{font-size:1.08rem;max-width:62ch;opacity:.95;margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.85rem}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.badge-pill{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.35rem .9rem;font-weight:600;font-size:.85rem}
.hero-img{border-radius:var(--th2-radius);box-shadow:0 18px 46px rgba(0,0,0,.28);width:100%;height:auto}

/* ---------- quick facts ---------- */
.quick-facts{list-style:none;margin:0;padding:1.4rem 1.5rem;background:var(--th2-surface);border-radius:var(--th2-radius);box-shadow:var(--th2-shadow)}
.quick-facts-title{font-weight:800;font-size:1.05rem;margin-bottom:.85rem;color:var(--th2-primary-dark)}
.quick-facts li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px dashed #e2e9e4;font-size:.95rem}
.quick-facts li:last-child{border-bottom:0}
.quick-facts li b{color:var(--th2-ink)}

/* ---------- article ---------- */
.article-body{background:var(--th2-surface);border-radius:var(--th2-radius);box-shadow:var(--th2-shadow);padding:2rem 2.2rem}
.article-body h2{font-weight:800;font-size:clamp(1.25rem,2.4vw,1.6rem);margin:2.2rem 0 .9rem;color:var(--th2-ink);scroll-margin-top:90px}
.article-body h3{font-weight:700;font-size:1.1rem;margin:1.5rem 0 .6rem;color:var(--th2-primary-dark)}
.article-body p{line-height:1.85;margin-bottom:1.05rem}
.article-body a{color:var(--th2-primary-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.article-figure{margin:1.6rem 0;border-radius:var(--th2-radius);overflow:hidden;box-shadow:var(--th2-shadow)}
.article-figure img{width:100%;height:auto;display:block}
.article-figure figcaption{background:#f0f5f2;color:var(--th2-muted);font-size:.85rem;padding:.6rem .9rem}

/* ---------- TOC ---------- */
.toc{background:var(--th2-primary-soft);border-radius:var(--th2-radius);padding:1.3rem 1.5rem;margin:1.6rem 0;border:1px solid #cdebd9}
.toc-title{font-weight:800;margin-bottom:.6rem;color:var(--th2-primary-dark)}
.toc-list{margin:0;padding-left:1.2rem}
.toc-list li{margin:.3rem 0}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto;margin:1.6rem 0;border-radius:var(--th2-radius);box-shadow:var(--th2-shadow)}
.data-table{width:100%;border-collapse:collapse;background:var(--th2-surface);font-size:.95rem}
.data-table thead th{background:var(--th2-primary);color:#fff;font-weight:700;padding:.8rem 1rem;text-align:left;white-space:nowrap}
.data-table td{padding:.75rem 1rem;border-bottom:1px solid #e8eee9}
.data-table tbody tr:nth-child(even){background:#f5f9f6}
.data-table tbody tr:hover{background:var(--th2-primary-soft)}

/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:1rem;margin:1.6rem 0}
.faq-item{background:var(--th2-surface);border:1px solid #e2e9e4;border-radius:var(--th2-radius);padding:1.1rem 1.3rem;box-shadow:0 2px 10px rgba(15,60,40,.06)}
.faq-q{font-weight:700;margin:0 0 .5rem;color:var(--th2-ink)}
.faq-a{margin:0;color:var(--th2-muted);line-height:1.8;font-size:.97rem}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(135deg,var(--th2-primary),var(--th2-primary-dark));color:#fff;border-radius:var(--th2-radius);padding:2rem 1.8rem;margin:2rem 0;text-align:center}
.cta-text{font-size:1.1rem;font-weight:600;margin-bottom:1.1rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* ---------- steps ---------- */
.step-list{counter-reset:step;list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:1rem}
.step-item{display:flex;gap:1rem;background:var(--th2-surface);border-radius:var(--th2-radius);padding:1.1rem 1.3rem;box-shadow:var(--th2-shadow);align-items:flex-start}
.step-num{flex:0 0 42px;height:42px;border-radius:50%;background:var(--th2-primary);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-title{font-weight:700;margin:0 0 .3rem}
.step-desc{margin:0;color:var(--th2-muted);font-size:.95rem;line-height:1.75}

/* ---------- feature grid ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1.6rem 0}
.feat-card{background:var(--th2-surface);border-radius:var(--th2-radius);padding:1.3rem;box-shadow:var(--th2-shadow)}
.feat-icon{font-size:1.6rem;color:var(--th2-primary);margin-bottom:.6rem;display:block}
.feat-title{font-weight:700;margin:0 0 .35rem}
.feat-desc{margin:0;color:var(--th2-muted);font-size:.93rem;line-height:1.7}

/* ---------- note ---------- */
.note-box{background:#fff8e6;border-left:4px solid var(--th2-accent);border-radius:8px;padding:1rem 1.2rem;margin:1.4rem 0;color:#6b5310;font-size:.95rem;line-height:1.75}

/* ---------- link grid ---------- */
.link-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin:1.6rem 0}
.link-card{display:block;background:var(--th2-surface);border:1px solid #e2e9e4;border-radius:var(--th2-radius);padding:1rem 1.2rem;text-decoration:none;color:var(--th2-ink);font-weight:600;box-shadow:0 2px 10px rgba(15,60,40,.05)}
.link-card:hover{border-color:var(--th2-primary);color:var(--th2-primary-dark)}
.link-card i{color:var(--th2-primary);margin-right:.5rem}

/* ---------- section title / stats ---------- */
.section-title{font-weight:800;font-size:clamp(1.3rem,2.6vw,1.75rem);margin:2.4rem 0 1rem;text-align:center}
.section-sub{text-align:center;color:var(--th2-muted);max-width:64ch;margin:0 auto 1.6rem}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:1.6rem 0}
.stat-item{background:var(--th2-surface);border-radius:var(--th2-radius);padding:1.2rem;text-align:center;box-shadow:var(--th2-shadow)}
.stat-num{font-size:1.7rem;font-weight:900;color:var(--th2-primary);display:block}
.stat-label{color:var(--th2-muted);font-size:.88rem}

/* ---------- footer ---------- */
.portal-footer{background:#10231b;color:#c9d6cf}
.portal-footer .footer-title{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:.8rem}
.footer-link{display:block;color:#c9d6cf;text-decoration:none;font-size:.9rem;padding:.18rem 0}
.footer-link:hover{color:#7ee2a8}
.footer-link-grid{display:grid}
.footer-brand-logo{filter:brightness(0) invert(1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);color:#9fb3a8;font-size:.85rem}

/* ---------- bottom bar ---------- */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;background:#fff;border-top:1px solid #e2e9e4;box-shadow:0 -4px 20px rgba(15,60,40,.10);padding:.4rem .3rem calc(.4rem + env(safe-area-inset-bottom))}
.bottom-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.35rem .2rem;color:var(--th2-muted);text-decoration:none;font-size:.72rem;font-weight:600}
.bottom-bar-item i{font-size:1.25rem}
.bottom-bar-item.active{color:var(--th2-primary-dark)}
.bottom-bar-play{color:#0b7a43!important;font-weight:700}
.bottom-bar-play i{font-size:1.3rem!important;color:#d4a017!important}
.bottom-bar-cta{flex:1.15;display:flex;flex-direction:column;align-items:center;gap:.15rem;color:#fff;text-decoration:none;font-size:.75rem;font-weight:700}
.bottom-bar-cta-btn{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--th2-primary),var(--th2-primary-dark));display:flex;align-items:center;justify-content:center;font-size:1.35rem;box-shadow:0 4px 14px rgba(15,157,88,.4);margin-top:-14px}
body{padding-bottom:74px}

/* ---------- back top ---------- */
.back-top{right:18px;bottom:86px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--th2-primary);color:#fff;font-size:1.4rem;box-shadow:var(--th2-shadow);z-index:1020;text-decoration:none}
.back-top:hover{background:var(--th2-primary-dark);color:#fff}

@media(max-width:991.98px){
  .article-body{padding:1.3rem 1.1rem}
  .hero{padding:2.4rem 0 2.2rem;border-radius:0 0 22px 22px}
}