:root{--o:#f57c00;--od:#c45e00;--ol:#fff4e5;--t:#2b2118;--m:#6b5d52;--bg:#fff;--card:#fff;--b:#f0e0cc}
@media(prefers-color-scheme:dark){:root{--t:#f6ece2;--m:#c9b8a8;--bg:#1c1611;--card:#271f18;--ol:#2e2218;--b:#443526}}
*{box-sizing:border-box;margin:0}
body{font-family:'Prompt','Sarabun',system-ui,sans-serif;color:var(--t);background:var(--bg);line-height:1.75}
img{max-width:100%;display:block}a{color:var(--od)}
.w{max-width:1100px;margin:auto;padding:0 20px}
header{position:sticky;top:0;z-index:9;background:var(--bg);border-bottom:1px solid var(--b)}
header .w{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;padding-top:12px;padding-bottom:12px}
.logo{font-weight:700;font-size:1.3rem;color:var(--o);text-decoration:none}
nav a{margin-left:18px;color:var(--t);text-decoration:none;font-weight:500}
nav a:hover,nav a.on{color:var(--o)}
.hero{background:linear-gradient(135deg,#f57c00,#ff9d2e);color:#fff;padding:64px 0}
.hero .w{display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:2.2rem;line-height:1.3;margin-bottom:12px}
.hero img,.pic{border-radius:16px;width:100%;height:320px;object-fit:cover;background:#ffd9a8}
.btn{display:inline-block;margin-top:18px;background:#fff;color:var(--od);padding:10px 24px;border-radius:30px;font-weight:600;text-decoration:none}
.ph{background:var(--ol);padding:44px 0;text-align:center}.ph h1{color:var(--o)}
section{padding:52px 0}h2{color:var(--o);margin-bottom:8px;font-size:1.6rem}
.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:22px}
.c{background:var(--card);border:1px solid var(--b);border-top:4px solid var(--o);border-radius:12px;padding:22px}
.c h3{margin-bottom:6px}.c p,.m{color:var(--m)}
.alt{background:var(--ol)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
ol{padding-left:20px}li{margin:6px 0}
footer{background:#2b2118;color:#f3e6d8;padding:32px 0;font-size:.95rem}
footer a{color:#ffb15c}footer .w{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
@media(max-width:760px){.hero .w,.two{grid-template-columns:1fr}.hero h1{font-size:1.7rem}nav a{margin:0 12px 0 0}}