:root{--green-900:#123528;--green-700:#1b5e3f;--green-600:#2e7d52;--green-500:#3d9970;--teal-600:#0f8a7e;--teal-500:#14a89a;--sand:#f5f1e8;--bg:#fff;--surface:#f8faf8;--card:#fff;--text:#16271f;--muted:#5a6b62;--border:#e2e8e3;--shadow:0 1px 3px rgba(18,53,40,.08),0 4px 16px rgba(18,53,40,.05);--radius:14px;--maxw:1180px}body.high-contrast{--bg:#fff;--surface:#fff;--card:#fff;--text:#000;--muted:#1a1a1a;--green-700:#0a3d27;--green-600:#0a3d27;--border:#000;--shadow:none}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:Noto Sans Thai,Segoe UI,system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--green-700);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0}.skip-link:focus{left:0}a:focus-visible,button:focus-visible{outline:3px solid var(--teal-500);outline-offset:2px}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}.topbar{background:var(--green-900);color:#d8e8df;font-size:.82rem}.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:38px;flex-wrap:wrap}.a11y-controls{display:flex;align-items:center;gap:.35rem}.a11y-controls button,.lang-toggle button{background:transparent;border:1px solid hsla(0,0%,100%,.35);color:#eaf3ee;border-radius:7px;padding:.15rem .55rem;font-size:.82rem;cursor:pointer;line-height:1.4}.a11y-controls button:hover,.lang-toggle button:hover{background:hsla(0,0%,100%,.14)}.lang-toggle button.active{background:var(--teal-500);border-color:var(--teal-500);color:#fff}.mainbar .container{justify-content:space-between;gap:1rem;min-height:68px}.brand,.mainbar .container{display:flex;align-items:center}.brand{gap:.7rem;font-weight:700}.brand .logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--green-600),var(--teal-500));display:grid;place-items:center;color:#fff;flex-shrink:0}.brand .brand-text strong{display:block;font-size:1.02rem;color:var(--green-900);line-height:1.25}.brand .brand-text span{font-size:.74rem;color:var(--muted);font-weight:400}.nav{display:flex;align-items:center;gap:.3rem}.nav a{padding:.5rem .8rem;border-radius:9px;font-size:.95rem;color:var(--text);font-weight:500}.nav a:hover{background:var(--surface);color:var(--green-700)}.nav a.cta{background:var(--green-700);color:#fff}.nav a.cta:hover{background:var(--green-600)}.menu-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:9px;padding:.45rem .6rem;cursor:pointer}.hero{background:linear-gradient(135deg,var(--green-900),var(--green-700) 60%,var(--teal-600));color:#fff;padding:4rem 0 4.5rem}.hero h1{font-size:2.5rem;line-height:1.2;font-weight:700;max-width:22ch}.hero p.lead{margin-top:1.1rem;font-size:1.15rem;color:#d7ece1;max-width:60ch}.hero-actions{margin-top:2rem;display:flex;gap:.8rem;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.4rem;border-radius:11px;font-weight:600;font-size:1rem;cursor:pointer;border:2px solid transparent}.btn-primary{background:#fff;color:var(--green-700)}.btn-primary:hover{background:var(--sand)}.btn-ghost{border-color:hsla(0,0%,100%,.5);color:#fff}.btn-ghost:hover{background:hsla(0,0%,100%,.12)}.stats{margin-top:-2.5rem;margin-bottom:3rem}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1rem;gap:1rem}.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.3rem 1.2rem;box-shadow:var(--shadow);text-align:center}.stat-card .num{font-size:2rem;font-weight:700;color:var(--green-700);line-height:1.1}.stat-card .label{margin-top:.3rem;color:var(--muted);font-size:.92rem}.section{padding:1rem 0 3.5rem}.section-head{margin-bottom:1.6rem}.section-head h2{font-size:1.6rem;color:var(--green-900)}.section-head p{color:var(--muted);margin-top:.3rem}.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:1.1rem;gap:1.1rem}.menu-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow);transition:transform .15s ease,border-color .15s ease;display:flex;flex-direction:column;gap:.55rem;height:100%}.menu-card:hover{transform:translateY(-3px);border-color:var(--green-500)}.menu-card .icon{width:46px;height:46px;border-radius:12px;background:var(--surface);color:var(--green-600);display:grid;place-items:center}.menu-card h3{font-size:1.12rem;color:var(--green-900)}.menu-card .en{font-size:.8rem;color:var(--muted);font-weight:400}.menu-card p{color:var(--muted);font-size:.92rem;flex:1 1}.menu-card .badge{align-self:flex-start;background:#eaf5ef;color:var(--green-700);font-size:.82rem;font-weight:600;padding:.2rem .65rem;border-radius:20px}.site-footer{background:var(--green-900);color:#c8dcd1;padding:2.5rem 0 2rem;margin-top:auto}.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;grid-gap:2rem;gap:2rem}.site-footer h4{color:#fff;margin-bottom:.7rem;font-size:1rem}.site-footer a:hover{color:#fff;text-decoration:underline}.site-footer .copyright{margin-top:2rem;padding-top:1.2rem;border-top:1px solid hsla(0,0%,100%,.12);font-size:.85rem;color:#9fb8aa}.app-shell{display:flex;flex-direction:column;min-height:100vh}.article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.8rem;box-shadow:var(--shadow);margin-bottom:2rem}.article-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.8rem}.article-head h3{font-size:1.35rem;color:var(--green-900)}.article p{margin-top:.8rem;color:var(--text)}.tts-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--green-700);color:#fff;border:none;border-radius:10px;padding:.55rem 1rem;font-size:.95rem;font-weight:600;font-family:inherit;cursor:pointer;flex-shrink:0}.tts-btn:hover{background:var(--green-600)}.tts-btn.on{background:#d4537e;animation:pulse 1.1s ease-in-out infinite}.video-block{margin-bottom:2rem}.video-block h3{font-size:1.2rem;color:var(--green-900);margin-bottom:.7rem}.a11y-note{background:#eaf5ef;border:1px solid var(--border);border-left:4px solid var(--green-600);border-radius:0 12px 12px 0;padding:1rem 1.2rem}.a11y-note strong{color:var(--green-900)}.a11y-note p{margin-top:.3rem;color:var(--text);font-size:.95rem}.tr-grid{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:1rem;gap:1rem;align-items:stretch}.tr-panel{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}.tr-panel-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .9rem;background:var(--surface);border-bottom:1px solid var(--border)}.tr-lang{font-weight:600;color:var(--green-900)}.tr-tag{font-size:.78rem;color:var(--muted)}.tr-panel textarea{border:none;outline:none;resize:vertical;font-family:inherit;background:transparent}.tr-output,.tr-panel textarea{padding:.9rem;font-size:1.02rem;line-height:1.6;color:var(--text);min-height:150px}.tr-output{white-space:pre-wrap}.tr-output .tr-ph{color:var(--text-muted,#9aa)}.tr-swap{align-self:center;background:var(--green-700);color:#fff;border:none;width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex-shrink:0}.tr-swap:hover{background:var(--green-600)}.tr-samples{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:1rem;font-size:.9rem;color:var(--muted)}.tr-samples button{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.3rem .8rem;font-size:.85rem;font-family:inherit;color:var(--green-700);cursor:pointer}.tr-samples button:hover{border-color:var(--green-500);background:#eaf5ef}.tr-powered{margin-top:1rem;font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:.4rem}.tr-powered:before{content:"●";color:var(--teal-500)}@media (max-width:720px){.tr-grid{grid-template-columns:1fr}.tr-swap{transform:rotate(90deg)}}.search-bar{display:flex;align-items:center;gap:.5rem;background:var(--card);border:2px solid var(--border);border-radius:14px;padding:.5rem .7rem;box-shadow:var(--shadow)}.search-bar:focus-within{border-color:var(--green-500)}.search-bar .search-ic{color:var(--muted);display:flex}.search-bar input{flex:1 1;border:none;outline:none;font-size:1.05rem;font-family:inherit;background:transparent;color:var(--text);padding:.4rem 0}.mic-btn{border:none;background:var(--surface);color:var(--green-600);width:40px;height:40px;border-radius:10px;cursor:pointer;display:grid;place-items:center;flex-shrink:0}.mic-btn:hover{background:#e6f1ea}.mic-btn.listening{background:#d4537e;color:#fff;animation:pulse 1.1s ease-in-out infinite}@keyframes pulse{0%,to{box-shadow:0 0 0 0 rgba(212,83,126,.5)}50%{box-shadow:0 0 0 8px rgba(212,83,126,0)}}.search-meta{min-height:1.4rem;margin:.6rem .2rem;font-size:.9rem;color:var(--muted)}.search-meta .listening-hint{color:#d4537e;font-weight:600}.search-results{list-style:none;display:flex;flex-direction:column;gap:.6rem}.result{display:flex;align-items:center;gap:.8rem;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem}.result:hover{border-color:var(--green-500)}.result .pill{font-size:.74rem;font-weight:600;padding:.2rem .6rem;border-radius:14px;white-space:nowrap;background:#eaf5ef;color:var(--green-700)}.result .pill.poi{background:#fdf0e3;color:#b5651d}.result-body{flex:1 1}.result-body strong{display:block;color:var(--green-900)}.result-body mark{background:#fff1a8;color:inherit;padding:0 1px;border-radius:2px}.result-body .r-en{font-size:.82rem;color:var(--muted);margin-right:.5rem}.result-body .r-sci{font-size:.8rem;font-style:italic;color:var(--teal-600)}.result .r-area{font-size:.82rem;color:var(--muted);white-space:nowrap}.no-result{color:var(--muted);padding:1rem .2rem}.map-intro{background:var(--surface);border-bottom:1px solid var(--border);padding:1.6rem 0}.map-intro h1{font-size:1.7rem;color:var(--green-900)}.map-intro p{color:var(--muted);margin-top:.3rem;max-width:70ch}.map-wrap{position:relative;height:72vh;min-height:500px}.map-canvas{width:100%;height:100%}.layer-panel{position:absolute;top:1rem;right:1rem;z-index:5;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:.9rem 1.05rem;min-width:210px}.layer-panel h4{font-size:.95rem;color:var(--green-900);margin-bottom:.6rem}.layer-row{display:flex;align-items:center;gap:.55rem;padding:.28rem 0;font-size:.92rem;cursor:pointer}.layer-row input{width:17px;height:17px;accent-color:var(--green-600);cursor:pointer}.swatch{width:13px;height:13px;border-radius:4px;flex-shrink:0}.map-status{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);z-index:5;background:var(--card);border:1px solid var(--border);border-radius:20px;padding:.4rem 1.1rem;font-size:.9rem;box-shadow:var(--shadow)}.map-status.error{color:#b00020;border-color:#f0b3bd}.map-popup strong{display:block;font-size:1rem;color:var(--green-900);margin-top:.2rem}.map-popup .en{font-size:.82rem;color:var(--muted)}.map-popup .sci{font-style:italic;font-size:.82rem;color:var(--teal-600);margin-top:.15rem}.map-popup p{margin-top:.4rem;font-size:.88rem;color:var(--text)}.map-popup .tag{display:inline-block;font-size:.72rem;font-weight:600;padding:.1rem .5rem;border-radius:12px;background:#eaf5ef;color:var(--green-700)}@media (max-width:680px){.layer-panel{top:auto;bottom:1rem;right:.7rem;left:.7rem;min-width:0}}@media (max-width:900px){.menu-grid,.stats-grid{grid-template-columns:repeat(2,1fr)}.site-footer .cols{grid-template-columns:1fr;gap:1.4rem}}@media (max-width:680px){.menu-toggle{display:inline-flex}.nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--border);padding:.6rem 1.25rem 1rem;gap:.2rem;box-shadow:var(--shadow);display:none}.nav.open{display:flex}.mainbar .container{position:relative}.hero h1{font-size:1.9rem}.hero p.lead{font-size:1.05rem}.stats-grid{grid-template-columns:1fr 1fr}.menu-grid{grid-template-columns:1fr}}