:root { --green:#2e5c1e; --green-dark:#1d3f12; --accent:#c96f2b; --bg:#faf9f5; --text:#2b2b28; --muted:#73726c; --border:#e3e1d9; --radius:10px; }
* { box-sizing:border-box; } body { margin:0; font-family:'Sarabun','Noto Sans Thai',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; }
main { max-width:760px; margin:0 auto; padding:0 16px 40px; }
a { color:var(--green); text-decoration:none; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.brand { font-weight:700; color:var(--green-dark); }
.topbar nav { display:flex; gap:12px; align-items:center; }
.avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.btn { display:inline-block; padding:8px 16px; border:1px solid var(--border); border-radius:var(--radius); background:#fff; cursor:pointer; font-size:14px; }
.btn-primary { background:var(--green); border-color:var(--green); color:#fff; }
.btn-google { background:#fff; border:1px solid #dadce0; font-weight:500; }
.hero { background-size:cover; background-position:center; border-radius:0 0 16px 16px; min-height:300px; display:flex; align-items:flex-end; margin:0 -16px; }
.hero-overlay { width:100%; padding:60px 16px 16px; background:linear-gradient(180deg,transparent, rgba(20,40,12,.85)); color:#fff; }
.hero h1 { font-size:1.15rem; text-align:center; margin:0 0 10px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.tabs { display:flex; gap:0; border-radius:var(--radius); overflow:hidden; margin-bottom:8px; }
.tab { flex:1; text-align:center; padding:9px 4px; background:rgba(255,255,255,.92); color:#333; font-size:13px; }
.tab.active { background:var(--green); color:#fff; font-weight:600; }
.hero-search { display:flex; gap:6px; } .hero-search input { flex:1; }
input, select, textarea { padding:9px 12px; border:1px solid var(--border); border-radius:var(--radius); font:inherit; width:100%; }
button { font:inherit; }
section { margin:22px 0; } section h2 { font-size:1.05rem; margin:0 0 10px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.chip { border:1px solid var(--border); border-radius:16px; padding:4px 13px; font-size:13px; background:#fff; }
.scroll-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; }
.live-card { min-width:130px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; font-size:12px; display:flex; flex-direction:column; }
.live-card img { width:100%; height:70px; object-fit:cover; }
.live-card strong, .live-card small, .live-card .cond { padding:0 8px; } .live-card .cond { margin-top:6px; }
.cond { font-size:11px; border-radius:8px; padding:1px 8px; width:fit-content; }
.cond-good { background:#e6f4e6; color:#1c7a1c; } .cond-neutral { background:#eee; color:#555; } .cond-warn { background:#fdeee0; color:#b45f14; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.place-card, .review-card { display:block; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px 13px; margin-bottom:8px; }
.place-card small, .review-card small { color:var(--muted); display:block; }
.cta-box { background:#eef4ea; border-radius:12px; padding:18px; text-align:center; }
.auth-box, .prose { max-width:480px; margin:30px auto; background:#fff; border:1px solid var(--border); border-radius:12px; padding:24px; }
.prose { max-width:680px; }
.fine-print { font-size:12px; color:var(--muted); }
.site-footer { text-align:center; font-size:12px; color:var(--muted); padding:24px 16px; border-top:1px solid var(--border); margin-top:30px; }
/* ---- forms ---- */
.form-page { max-width:640px; }
.form-page label { display:block; font-size:14px; color:#555; margin:14px 0 4px; }
.form-page label.inline { display:inline-flex; align-items:center; gap:6px; margin-right:14px; font-size:13px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
.chip-check { cursor:pointer; user-select:none; }
.chip-check input { display:none; }
.chip-check:has(input:checked) { background:#eef4ea; border-color:#2e5c1e; color:#2e5c1e; }
.chip-check:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.chip-main { font-weight:600; }
.optional-block { border-top:1px solid var(--border); margin-top:20px; padding-top:12px; }
.optional-block summary { cursor:pointer; font-weight:600; color:var(--green); padding:6px 0; }
.review-expand { background:#f4f8f1; border:1px dashed #b9cfa9; border-radius:10px; padding:4px 14px 14px; }
.form-actions { margin-top:20px; }
.alert { border-radius:10px; padding:12px 16px; margin:12px 0; font-size:14px; }
.alert-error { background:#fdecec; color:#a12222; }
.alert-warn { background:#fdf3e0; color:#8a5a12; }
.alert-ok { background:#e6f4e6; color:#1c7a1c; }
.stars { display:flex; flex-direction:row-reverse; justify-content:flex-end; font-size:26px; }
.stars label { margin:0; cursor:pointer; } .stars input { display:none; }
.stars span { color:#ccc; }
.stars label:hover span, .stars label:hover ~ label span,
.stars input:checked + span, .stars label:has(input:checked) ~ label span { color:#eab308; }
.autocomplete { position:relative; }
.ac-item { background:#fff; border:1px solid var(--border); border-top:0; padding:8px 12px; cursor:pointer; font-size:14px; }
.ac-item:hover { background:#f4f8f1; }
.ac-item small { color:var(--muted); }
.selected-place { border-color:#2e5c1e; }
.consent { margin-top:16px; font-size:13px; }
.muted { color:var(--muted); font-size:13px; }