/* ============================================================
   จุดกางเต็นท์ อุบลราชธานี — โทนสายแคมป์ (เขียว/ส้มอิฐ/ฟ้า)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&display=swap');
:root {
  --green:#1d9e75; --green-d:#0f6e56; --green-dd:#04342c;
  --clay:#d85a30; --clay-d:#993c1d; --clay-l:#faece7;
  --blue:#378add; --blue-d:#185fa5; --blue-l:#e6f1fb;
  --amber:#ef9f27; --amber-d:#854f0b;
  --leaf-l:#eaf3de; --mint-l:#e1f5ee;
  --bg:#f7f8f4; --surface:#fff; --text:#232821; --muted:#6d7268; --faint:#9a9e94;
  --border:#e6e4da; --border-s:#d4d2c6;
  --radius:12px; --shadow:0 2px 10px rgba(20,50,30,.06); --shadow-h:0 6px 20px rgba(20,50,30,.11);
}
* { box-sizing:border-box; }
body { margin:0; font-family:'Kanit','Sarabun','Noto Sans Thai',system-ui,sans-serif; background:var(--bg); color:var(--text); line-height:1.6; font-size:15px; }
main { max-width:760px; margin:0 auto; padding:0 16px 48px; }
a { color:var(--green-d); text-decoration:none; }
h1 { font-size:1.35rem; font-weight:600; } h2 { font-size:1.1rem; font-weight:600; }
.brand, .btn, .tab, .btn-primary, strong { font-weight:500; }

/* topbar */
.topbar { display:flex; justify-content:center; padding:11px 18px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; box-shadow:0 1px 6px rgba(20,50,30,.04); }
.topbar-inner { width:100%; max-width:760px; display:flex; justify-content:space-between; align-items:center; }
.brand { font-weight:600; color:var(--green-dd); font-size:1.15rem; display:flex; align-items:center; gap:6px; }
.topbar nav { display:flex; gap:14px; align-items:center; }
.avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1.5px solid var(--mint-l); }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:5px; padding:9px 17px; border:1px solid var(--border-s); border-radius:var(--radius); background:var(--surface); cursor:pointer; font-size:14px; font-weight:500; color:var(--text); transition:.15s; text-align:center; }
.btn:hover { border-color:var(--green); box-shadow:var(--shadow); }
.btn-primary { background:var(--clay); border-color:var(--clay); color:#fff; }
.btn-primary:hover { background:var(--clay-d); border-color:var(--clay-d); }
.btn-green { background:var(--green-d); border-color:var(--green-d); color:#fff; }
.btn-green:hover { background:var(--green-dd); }
.btn-google { background:#fff; border:1px solid #dadce0; font-weight:500; }
.btn-sm { padding:6px 13px; font-size:13px; }

/* hero — โลโก้เต็มใบ + ค้นหาใต้ภาพ */
.hero { margin:0 -16px; }
.hero-img { width:100%; display:block; border-radius:0 0 20px 20px; }
.hero-below { padding:16px 4px 0; }
.hero-tagline { text-align:center; font-size:1.05rem; font-weight:600; color:var(--green-dd); margin:2px 0 14px; }
.tabs { display:flex; gap:5px; background:var(--mint-l); padding:5px; border-radius:14px; margin-bottom:10px; }
.tab { flex:1; text-align:center; padding:9px 4px; border-radius:10px; font-size:13.5px; color:var(--green-d); font-weight:500; transition:.15s; }
.tab.active { background:var(--clay); color:#fff; box-shadow:var(--shadow); }
.hero-search { display:flex; gap:7px; }
.hero-search input { flex:1; }
.hero-search .btn, .hero-search button { background:var(--clay); border-color:var(--clay); color:#fff; }

/* forms */
input, select, textarea { padding:10px 13px; border:1px solid var(--border-s); border-radius:var(--radius); font:inherit; width:100%; background:var(--surface); color:var(--text); transition:.15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(29,158,117,.13); }
button { font:inherit; cursor:pointer; }
/* radio/checkbox ต้องไม่กว้าง 100% ไม่งั้นข้อความตกบรรทัด */
input[type=radio], input[type=checkbox] { width:auto; margin:0; flex-shrink:0; accent-color:var(--green); }
label { display:block; font-size:14px; color:var(--muted); margin:14px 0 4px; }
label.inline { display:inline-flex; align-items:center; gap:6px; margin:4px 14px 4px 0; font-size:14px; color:var(--text); white-space:nowrap; cursor:pointer; }
/* กลุ่มตัวเลือก radio/checkbox ของหัวข้อไดนามิก — จัดเป็นแถว wrap สวย */
.dyn-field { margin:14px 0; }
.dyn-field > label:first-child { margin-bottom:6px; }
.opt-group { display:flex; flex-wrap:wrap; gap:6px; }
.opt-group label.inline { border:1px solid var(--border-s); border-radius:20px; padding:7px 14px; margin:0; background:var(--surface); transition:.15s; }
.opt-group label.inline:has(input:checked) { background:var(--mint-l); border-color:var(--green); color:var(--green-d); font-weight:500; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

/* sections */
section { margin:24px 0; }
section h2 { font-size:1.08rem; margin:0 0 12px; display:flex; align-items:center; gap:7px; }

/* chips */
.chip-row { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.chip { border:1px solid var(--border-s); border-radius:18px; padding:5px 14px; font-size:13px; background:var(--surface); color:var(--muted); transition:.15s; cursor:pointer; }
.chip:hover { border-color:var(--green); color:var(--green-d); }
.chip-active { background:var(--clay); color:#fff; border-color:var(--clay); }
.chip-check { cursor:pointer; user-select:none; }
.chip-check input { display:none; }
.chip-check:has(input:checked) { background:var(--mint-l); border-color:var(--green); color:var(--green-d); }
.chip-check:has(input:disabled) { opacity:.4; cursor:not-allowed; }
.chip-main { font-weight:600; }

/* live cards / scroll row */
.scroll-row { display:flex; gap:11px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; }
.live-card { min-width:135px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; font-size:12px; box-shadow:var(--shadow); transition:.15s; }
.live-card:hover { box-shadow:var(--shadow-h); transform:translateY(-2px); }
.live-card img { width:100%; height:78px; object-fit:cover; }
.live-card strong { display:block; padding:0 9px; margin:5px 0 1px; font-size:12.5px; color:var(--text); }
.live-card small { display:block; padding:0 9px 8px; color:var(--faint); }
.live-card .cond { margin:7px 9px 0; }
.cond { display:inline-block; font-size:11px; border-radius:8px; padding:2px 9px; width:fit-content; font-weight:500; }
.cond-good { background:var(--mint-l); color:var(--green-d); }
.cond-neutral { background:#f0efe8; color:#5f5e56; }
.cond-warn { background:var(--clay-l); color:var(--clay-d); }

/* place cards / grid */
.grid-2-card { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.place-card, .review-card { display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 15px; margin-bottom:9px; box-shadow:var(--shadow); transition:.15s; }
.place-card:hover, .review-card:hover { box-shadow:var(--shadow-h); border-color:var(--border-s); }
.place-card strong, .review-card strong { color:var(--text); }
.place-card small, .review-card small { color:var(--muted); display:block; margin-top:2px; }

/* result cards (search) */
.result-card { display:flex; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:11px; margin-bottom:11px; box-shadow:var(--shadow); transition:.15s; }
.result-card:hover { box-shadow:var(--shadow-h); transform:translateY(-1px); }
.rc-img { width:88px; height:88px; border-radius:10px; background:var(--mint-l); display:flex; align-items:center; justify-content:center; font-size:28px; overflow:hidden; flex-shrink:0; }
.rc-img img { width:100%; height:100%; object-fit:cover; }
.rc-body { flex:1; min-width:0; }
.rc-body strong { color:var(--text); }
.rc-body small { color:var(--muted); display:block; margin:2px 0; }
.rc-styles { font-size:15px; letter-spacing:3px; margin:3px 0; }
.style-dim { opacity:.22; filter:grayscale(1); }
.rc-badges { display:flex; flex-wrap:wrap; gap:5px; margin-top:5px; }
.bd { font-size:11px; background:#f0efe8; color:#5f5e56; border-radius:9px; padding:2px 9px; }
.bd-green { background:var(--mint-l); color:var(--green-d); }

/* filter row */
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0; align-items:center; }
.filter-row select { width:auto; font-size:13px; padding:8px 11px; }

/* แบนเนอร์หมวด (หน้าค้นหา) — ปรับรูปได้จากหลังบ้าน */
.cat-banner { margin:0 -16px 4px; height:300px; background-size:cover; background-position:center; display:flex; align-items:flex-end; border-radius:0 0 20px 20px; overflow:hidden; }
.cat-banner-inner { width:100%; max-width:760px; margin:0 auto; padding:18px 20px; color:#fff; }
.cat-banner-inner h1 { margin:0 0 3px; font-size:1.5rem; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.cat-banner-inner p { margin:0; font-size:13.5px; opacity:.95; text-shadow:0 1px 5px rgba(0,0,0,.4); }
/* พื้นหลังไล่สี default เมื่อไม่มีรูป */
.cat-banner-camp { background-image:linear-gradient(135deg,#2d5a15,#1d9e75); }
.cat-banner-trail { background-image:linear-gradient(135deg,#04342c,#0f6e56); }
.cat-banner-nature { background-image:linear-gradient(135deg,#185fa5,#378add); }

/* CTA box */
.cta-box { background:var(--leaf-l); border-radius:16px; padding:20px; text-align:center; }
.cta-box p { color:var(--green-dd); margin:0 0 14px; font-weight:500; }
.cta-box .btn-primary { margin:0 4px; }

/* auth / prose */
.auth-box, .prose { max-width:480px; margin:32px auto; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px; box-shadow:var(--shadow); }
.prose { max-width:680px; }
.form-page { max-width:640px; }
.fine-print { font-size:12px; color:var(--faint); }
.muted { color:var(--muted); font-size:13px; }

/* place page */
.gallery-strip { display:grid; grid-template-columns:2fr 1fr; gap:6px; margin:14px 0; }
.g-main img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px; }
.g-side { display:grid; grid-template-rows:1fr auto; gap:6px; }
.g-side img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.g-more { display:flex; align-items:center; justify-content:center; background:var(--mint-l); color:var(--green-d); border-radius:12px; padding:10px; font-size:13px; font-weight:500; }
.place-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-top:6px; }
.place-head h1 { margin:0; }
.rating-line { font-size:13px; margin:4px 0; color:var(--muted); }
.fav-btn { font-size:20px; padding:6px 12px; }
.style-bar { display:flex; flex-wrap:wrap; gap:8px 15px; background:#f4f2ec; border-radius:12px; padding:11px 15px; font-size:12.5px; margin:10px 0; }
.style-ok { color:var(--green-d); font-weight:500; } .style-no { color:var(--faint); text-decoration:line-through; }
.box { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:13px 17px; margin:12px 0; font-size:14px; box-shadow:var(--shadow); }
.box-head { display:flex; justify-content:space-between; margin-bottom:8px; }
.box-head a { font-size:12px; color:var(--muted); }
.box-live { border-color:#f0c98a; background:#fffbf3; }
.box-border { border-color:#a9cdf0; background:#f5f9fd; }
.box-emergency { border-color:#eeae86; background:#fff6f0; }
.box-credit { border-color:#bcd9a9; background:#f6faf1; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 15px; color:#555; font-size:13px; margin-bottom:10px; }
.btn-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.em-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 0; font-size:13px; border-top:1px solid var(--border); }
.em-row:first-of-type { border-top:0; }
.coord-row button { font-family:monospace; }

/* post page */
.trip-summary { display:flex; flex-wrap:wrap; gap:7px 16px; background:var(--mint-l); border-radius:12px; padding:11px 15px; font-size:13px; margin:12px 0; color:var(--green-dd); }
.post-page h1 { margin:6px 0; }
.post-img { margin:15px 0; } .post-img img { width:100%; border-radius:12px; }
.post-img figcaption { font-size:12px; color:var(--faint); margin-top:4px; }
.ph-date { background:#f4f2ec; border-radius:6px; padding:1px 7px; }
.post-content { font-size:15.5px; line-height:1.85; margin:15px 0; }
.video-embed { position:relative; padding-top:56.25%; margin:15px 0; }
.video-embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:12px; }
.video-link { display:block; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px; text-align:center; margin:10px 0; box-shadow:var(--shadow); }
.credit-row { display:flex; align-items:center; gap:13px; }
.credit-avatar { width:46px; height:46px; border-radius:50%; background:var(--green-d); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:19px; flex-shrink:0; }
.credit-info { flex:1; } .credit-info small { display:block; color:var(--muted); }
.action-bar { display:flex; align-items:center; gap:14px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px 0; margin:15px 0; font-size:13px; flex-wrap:wrap; }
.report-box summary { cursor:pointer; color:var(--muted); }
.report-box form { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.report-box select, .report-box input { width:auto; }
.comment { border-bottom:1px solid var(--border); padding:9px 0; font-size:14px; }
.comment p { margin:3px 0 0; }

/* photo grid */
.photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:9px; margin:14px 0; }
.ph { position:relative; display:block; border-radius:12px; overflow:hidden; background:#eee; aspect-ratio:1; box-shadow:var(--shadow); }
.ph img { width:100%; height:100%; object-fit:cover; }
.ph-meta { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(4,52,44,.82)); color:#fff; font-size:10.5px; padding:16px 7px 5px; }

/* profile */
.profile-head { display:flex; gap:15px; align-items:flex-start; margin:20px 0; }
.avatar-lg { width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid var(--mint-l); }
.profile-head h1 { font-size:1.2rem; margin:0 0 3px; }
.badge { font-size:11px; background:#f4f2ec; border-radius:10px; padding:2px 10px; vertical-align:3px; font-weight:400; }
.badge-creator { background:var(--blue-l); color:var(--blue-d); }
.tabs-flat { border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:4px; }
.tabs-flat .tab { background:transparent; border-radius:9px; }
.tabs-flat .tab.active { background:var(--green-d); color:#fff; }

/* admin & member */
.admin-nav { display:flex; flex-wrap:wrap; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:9px; margin:14px 0; font-size:13px; box-shadow:var(--shadow); }
.admin-nav a { padding:6px 12px; border-radius:9px; color:var(--muted); }
.admin-nav a:hover { background:var(--bg); }
.admin-nav a.active { background:var(--green-d); color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(110px,1fr)); gap:9px; margin:12px 0; }
.stat { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 8px; text-align:center; box-shadow:var(--shadow); }
.stat strong { font-size:1.3rem; display:block; color:var(--green-dd); } .stat small { color:var(--muted); font-size:11.5px; }
.stat-accent { background:var(--leaf-l); border-color:#bcd9a9; }
.approve-row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.approve-row select, .approve-row input[type=text] { width:auto; flex:1; min-width:120px; font-size:13px; padding:7px 11px; }
.progress { display:inline-block; width:120px; height:7px; background:#e8e6de; border-radius:4px; vertical-align:middle; overflow:hidden; }
.progress span { display:block; height:100%; background:var(--green); }
.bar-chart { display:flex; align-items:flex-end; gap:2px; height:74px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px; box-shadow:var(--shadow); }
.bar { flex:1; background:var(--green); border-radius:3px 3px 0 0; min-height:3px; }
.noti-dot { background:var(--clay); color:#fff; border-radius:9px; font-size:10px; padding:0 5px; vertical-align:6px; }

/* alerts */
.alert { border-radius:12px; padding:12px 16px; margin:12px 0; font-size:14px; }
.alert-error { background:var(--clay-l); color:var(--clay-d); }
.alert-warn { background:#fdf3e0; color:var(--amber-d); }
.alert-ok { background:var(--mint-l); color:var(--green-d); }

/* stars */
.stars { display:flex; flex-direction:row-reverse; justify-content:flex-end; font-size:27px; }
.stars label { margin:0; cursor:pointer; } .stars input { display:none; }
.stars span { color:#d8d5c8; }
.stars label:hover span, .stars label:hover ~ label span,
.stars label:has(input:checked) span, .stars label:has(input:checked) ~ label span { color:var(--amber); }

/* autocomplete */
.autocomplete { position:relative; }
.ac-item { background:var(--surface); border:1px solid var(--border); border-top:0; padding:9px 13px; cursor:pointer; font-size:14px; }
.ac-item:hover { background:var(--mint-l); }
.ac-item small { color:var(--muted); }
.selected-place { border-color:var(--green); }
.consent { margin-top:16px; font-size:13px; }
.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-d); padding:7px 0; }
.review-expand { background:var(--mint-l); border:1px dashed #9dcbb5; border-radius:12px; padding:5px 15px 15px; }
.form-actions { margin-top:20px; }

/* footer */
.site-footer { text-align:center; font-size:12px; color:var(--muted); padding:26px 16px; border-top:1px solid var(--border); margin-top:32px; }
.site-footer a { color:var(--green-d); }
/* แถวรูปแบบการพักแรม (หน้าแรก + หน้าค้นหา) */
.style-picker { margin:12px 0; padding:12px 14px; background:var(--mint-l); border-radius:14px; }
.style-picker-label { display:block; font-size:13px; font-weight:500; color:var(--green-dd); margin-bottom:8px; }
.style-picker .chip-row { margin:0; }
.style-picker .chip { background:#fff; }
.style-picker .chip:hover { border-color:var(--green); color:var(--green-d); }
.style-picker .chip-active { background:var(--clay); color:#fff; border-color:var(--clay); }
/* รูปปกในการ์ดสถานที่แนะนำหน้าแรก */
.card-cover { width:100%; height:170px; object-fit:cover; border-radius:10px; margin-bottom:8px; }
.grid-2-card .place-card { padding:10px; }

/* ============================================================
   MOBILE — จอแคบ ≤640px
   ============================================================ */
@media (max-width: 640px) {
  body { font-size:14.5px; }

  /* การ์ดสถานที่ → 1 คอลัมน์เต็มจอ รูปสูง 220px */
  .grid-2-card { grid-template-columns:1fr; gap:12px; }
  .grid-2-card .place-card { padding:0 0 12px; overflow:hidden; }
  .card-cover { height:220px; border-radius:12px 12px 0 0; margin-bottom:10px; }
  .grid-2-card .place-card strong,
  .grid-2-card .place-card small { padding:0 14px; }

  /* แท็บ 3 อัน → ตัวอักษรเล็กลง ไอคอนบรรทัดเดียว ไม่ล้น */
  .tabs { gap:3px; padding:4px; }
  .tab { padding:9px 2px; font-size:12px; }

  /* hero โลโก้ — ลดความสูงมุมโค้ง */
  .hero-img { border-radius:0 0 14px 14px; }
  .hero-tagline { font-size:.98rem; }

  /* แถวตัวกรอง → เลื่อนแนวนอนแทนล้น */
  .filter-row { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; }
  .filter-row select { flex-shrink:0; }

  /* gallery หน้าสถานที่ → คอลัมน์เดียว */
  .gallery-strip { grid-template-columns:1fr; }
  .g-side { grid-template-columns:1fr 1fr; grid-template-rows:none; }

  /* info-grid → คอลัมน์เดียว อ่านง่าย */
  .info-grid { grid-template-columns:1fr; }

  /* แบนเนอร์หมวด → เตี้ยลงนิด */
  .cat-banner { height:230px; }
  .cat-banner-inner h1 { font-size:1.3rem; }

  /* photo grid → 2 คอลัมน์แทน auto-fill */
  .photo-grid { grid-template-columns:1fr 1fr; }

  /* topbar → ชื่อเว็บเด่น ปุ่มเช็คอินกระชับ */
  .topbar { padding:10px 14px; }
  .brand { font-size:1.08rem; }
  .btn { padding:8px 13px; font-size:13px; }
  .topbar nav .btn-primary { padding:7px 11px; font-size:12.5px; }

  /* CTA box → ปุ่มเรียงลงถ้าแคบ */
  .cta-box .btn-primary, .cta-box .btn { display:inline-flex; margin:3px; }

  /* หัวข้อ section เล็กลงนิด */
  section h2 { font-size:1.02rem; }

  /* live card สภาพสด → เล็กลงพอดีจอ */
  .live-card { min-width:125px; }
}

/* จอเล็กมาก ≤380px */
@media (max-width: 380px) {
  .tab { font-size:11px; }
  .tab-icon { display:block; }
  .card-cover { height:190px; }
  .cat-banner { height:200px; }
}

/* ---- preview รูปที่อัปโหลด ---- */
.img-preview-single { margin-top:10px; }
.img-preview-single img { max-width:100%; max-height:200px; border-radius:12px; border:1px solid var(--border); object-fit:cover; }
.photo-add-btn { display:inline-block; cursor:pointer; }
.img-preview-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); gap:8px; margin-top:10px; }
.img-cell { position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--border); }
.img-cell img { width:100%; height:100%; object-fit:cover; }
.img-del { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; line-height:1; }
.img-del:hover { background:var(--clay); }
.img-cover-tag { position:absolute; bottom:4px; left:4px; background:var(--clay); color:#fff; font-size:10px; padding:2px 7px; border-radius:6px; z-index:1; }

/* ---- autocomplete ค้นหาสถานที่หลัก (พร้อมรูป) ---- */
.ac-wrap { position:relative; flex:1; }
.ac-dropdown { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-h); z-index:50; overflow:hidden; max-height:70vh; overflow-y:auto; }
.ac-row { display:flex; align-items:center; gap:11px; padding:9px 12px; border-bottom:1px solid var(--border); transition:.1s; }
.ac-row:last-child { border-bottom:0; }
.ac-row.active, .ac-row:hover { background:var(--mint-l); }
.ac-thumb { width:52px; height:52px; border-radius:9px; overflow:hidden; flex-shrink:0; background:var(--mint-l); display:flex; align-items:center; justify-content:center; }
.ac-thumb img { width:100%; height:100%; object-fit:cover; }
.ac-noimg { font-size:22px; }
.ac-info { min-width:0; flex:1; }
.ac-info strong { display:block; color:var(--text); font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-info small { color:var(--muted); font-size:12.5px; }
.ac-empty { padding:14px 16px; color:var(--muted); font-size:13.5px; text-align:center; }

/* ---- toast แจ้งผลค้นหา ---- */
.search-toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.92); background:var(--green-dd); color:#fff; padding:20px 30px; border-radius:20px; text-align:center; box-shadow:0 10px 40px rgba(4,52,44,.4); z-index:200; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:82vw; }
.search-toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.search-toast .toast-count { display:block; font-size:20px; font-weight:600; line-height:1.3; }
.search-toast .toast-hint { display:block; font-size:13px; opacity:.8; margin-top:6px; }

/* ============ wizard ค้นหาแบบนำทาง ============ */
.wiz-cta { display:block; text-align:center; margin-top:10px; padding:11px; background:var(--mint-l); border:1px dashed var(--green); border-radius:12px; color:var(--green-dd); font-size:13.5px; font-weight:500; transition:.15s; }
.wiz-cta:hover { background:var(--green); color:#fff; border-style:solid; }
.wizard { max-width:620px; margin:0 auto; }
.wiz-head { text-align:center; margin-bottom:18px; }
.wiz-head h1 { margin:0 0 5px; }
.btn-link { background:none; border:0; color:var(--muted); font-size:13px; text-decoration:underline; cursor:pointer; }

/* ============ wizard หน้าเดียว (กรองสด) ============ */
.wizard-live { max-width:760px; margin:0 auto; }
.wiz-section { margin-bottom:18px; }
.wiz-section h2 { font-size:1.05rem; margin:0 0 9px; }
.wiz-chips { display:flex; flex-wrap:wrap; gap:8px; }
.wiz-chip { cursor:pointer; }
.wiz-chip input { position:absolute; opacity:0; pointer-events:none; }
.wiz-chip span { display:inline-block; border:1.5px solid var(--border); background:var(--surface); border-radius:20px; padding:8px 15px; font-size:13.5px; color:var(--text); transition:.15s; }
.wiz-chip:hover span { border-color:var(--clay); }
.wiz-chip.on span { background:var(--clay); color:#fff; border-color:var(--clay); }
.wiz-resultbar { position:sticky; top:64px; z-index:20; display:flex; align-items:center; gap:12px; background:var(--green-dd); color:#fff; padding:11px 18px; border-radius:12px; margin:20px 0 16px; box-shadow:0 3px 12px rgba(4,52,44,.2); }
.wiz-resultbar strong { font-size:15px; }
.wiz-resultbar .btn-link { color:#fff; opacity:.85; margin-left:auto; }
.wiz-resultbar .btn-link:hover { opacity:1; }
.wiz-empty { text-align:center; padding:30px 20px; }
@media (max-width:640px) {
  .wiz-resultbar { top:56px; }
}

/* ---- Master: ปุ่มลบรายการ ---- */
.master-item { display:inline-flex; align-items:center; gap:2px; margin:0 4px 6px 0; }
.master-chip { margin:0 !important; }
.master-del { border:1px solid var(--border); background:var(--surface); color:#a12222; border-radius:50%; width:22px; height:22px; font-size:12px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; transition:.15s; }
.master-del:hover { background:#a12222; color:#fff; border-color:#a12222; }
.master-lock { font-size:11px; opacity:.4; padding:0 3px; cursor:help; }

/* ---- ปุ่มค้นหา 3 แบบ หน้าแรก ---- */
.home-cta-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin:14px 0 10px; }
.home-cta { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:20px 12px 16px; border-radius:16px; color:#fff; box-shadow:0 4px 14px rgba(20,50,30,.15); transition:.18s; }
.home-cta:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(20,50,30,.22); color:#fff; }
.home-cta-ico { font-size:34px; line-height:1; margin-bottom:4px; }
.home-cta strong { font-size:15.5px; font-weight:600; }
.home-cta small { font-size:11.5px; opacity:.9; }
.home-cta-camp { background:linear-gradient(135deg,#2d5a15,#1d9e75); }
.home-cta-trail { background:linear-gradient(135deg,#04342c,#0f6e56); }
.home-cta-nature { background:linear-gradient(135deg,#185fa5,#378add); }
@media (max-width:640px) {
  .home-cta-grid { grid-template-columns:1fr; gap:9px; }
  .home-cta { display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; text-align:left; padding:13px 16px; column-gap:13px; row-gap:1px; align-items:center; }
  .home-cta-ico { grid-row:1 / 3; font-size:28px; margin:0; }
  .home-cta strong { font-size:15px; }
}

/* ---- เบอร์ฉุกเฉิน ---- */
.form-sep { border:0; border-top:1px solid var(--border); margin:22px 0 16px; }
.ec-row { display:flex; gap:7px; align-items:center; margin-bottom:8px; flex-wrap:wrap; }
.ec-row select { flex:0 0 150px; }
.ec-row input[name="ec_name[]"] { flex:1 1 160px; }
.ec-row input[name="ec_phone[]"] { flex:0 0 130px; }
.ec-row input[name="ec_notes[]"] { flex:1 1 140px; }
.ec-del { flex:0 0 auto; border:1px solid var(--border); background:var(--surface); color:#a12222; border-radius:8px; width:32px; height:32px; cursor:pointer; font-size:13px; }
.ec-del:hover { background:#a12222; color:#fff; border-color:#a12222; }
.ec-badge { flex:0 0 auto; font-size:11px; color:#8a6d00; background:#fff5d6; padding:3px 8px; border-radius:10px; }
@media (max-width:640px) {
  .ec-row select, .ec-row input { flex:1 1 100% !important; }
  .ec-del { width:auto; padding:0 14px; }
}

/* ---- เลือกหมวดใหญ่ในฟอร์มเพิ่มสถานที่ ---- */
.grp-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:14px; }
.grp-btn { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 8px; border:1.5px solid var(--border); background:var(--surface); border-radius:14px; cursor:pointer; font-size:13.5px; font-weight:500; color:var(--text); transition:.15s; }
.grp-btn:hover { border-color:var(--clay); }
.grp-btn.active { border-color:var(--clay); background:var(--clay); color:#fff; }
.grp-ico { font-size:26px; line-height:1; }
@media (max-width:640px) {
  .grp-picker { grid-template-columns:repeat(3,1fr); gap:7px; }
  .grp-btn { padding:12px 4px; font-size:12.5px; }
  .grp-ico { font-size:22px; }
}

/* ---- บทความบรรยายสถานที่ (ขึ้นก่อนข้อมูลจำเพาะ) ---- */
.place-desc { margin:2px 0 14px; line-height:1.7; color:var(--text); }

/* ---- คำอธิบายพิกัดแจ้งเหตุ ---- */
.coord-hint { margin:6px 0 0; line-height:1.55; opacity:.85; }

/* ============ ป้ายรางวัล ============ */
.prof-badges { margin:16px 0 20px; }
.prof-badges h2 { font-size:1.05rem; margin:0 0 9px; }
.badge-wrap { display:flex; flex-wrap:wrap; gap:7px; }
.badge-pill { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:16px; font-size:12.5px; font-weight:500; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:help; }
/* tier 1 = ทั่วไป, 2 = เก่ง, 3 = หายาก */
.badge-t2 { background:var(--mint-l); border-color:var(--green); color:var(--green-dd); }
.badge-t3 { background:linear-gradient(135deg,#fff4d6,#ffe9b0); border-color:#e0a800; color:#7a5c00; font-weight:600; }

/* ============ อันดับผู้มีส่วนร่วม ============ */
.rank-list { list-style:none; padding:0; margin:14px 0 24px; }
.rank-item { display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:12px; margin-bottom:8px; background:var(--surface); }
.rank-top { border-color:var(--clay); background:linear-gradient(90deg,#fdf6ee,var(--surface)); }
.rank-no { flex:0 0 34px; text-align:center; font-size:17px; font-weight:700; color:var(--muted); }
.rank-top .rank-no { font-size:22px; }
.rank-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.rank-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rank-name { font-weight:600; color:var(--text); font-size:14.5px; }
.rank-body small { font-size:11.5px; }
.rank-score { flex:0 0 auto; text-align:right; font-weight:700; color:var(--clay); font-size:16px; display:flex; flex-direction:column; line-height:1.1; }
.rank-score small { font-size:10px; font-weight:400; color:var(--muted); }
.rank-howto { margin-top:22px; padding:14px 16px; background:var(--mint-l); border-radius:12px; }
.rank-howto h3 { margin:0 0 5px; font-size:14px; }
.rank-howto p { margin:0; font-size:12.5px; line-height:1.6; }
.creator-tag { font-size:11px; }
@media (max-width:640px) {
  .rank-item { padding:9px 10px; gap:8px; }
  .rank-avatar { width:36px; height:36px; }
  .rank-no { flex:0 0 26px; font-size:15px; }
  .rank-score { font-size:14px; }
}

/* ============ ระบบติดตาม ============ */
.follow-counts { margin:2px 0 8px !important; }
.prof-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.btn-following { background:var(--mint-l); color:var(--green-dd); border:1px solid var(--green); }
.btn-following:hover { background:#ffe9e4; color:#a12222; border-color:#a12222; }
.nav-feed { font-size:20px; text-decoration:none; }

/* ฟีด */
.feed-list { display:flex; flex-direction:column; gap:13px; margin:16px 0; }
.feed-card { border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; }
.feed-head { display:flex; align-items:center; gap:10px; padding:11px 13px 9px; }
.feed-head .avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.feed-meta { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.feed-author { font-weight:600; color:var(--text); font-size:14px; }
.feed-meta small { font-size:11.5px; }
.feed-rating { flex:0 0 auto; background:var(--clay); color:#fff; font-size:12px; font-weight:600; padding:3px 9px; border-radius:12px; }
.feed-body { display:flex; gap:11px; padding:0 13px 10px; }
.feed-thumb { width:96px; height:96px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.feed-text { min-width:0; flex:1; }
.feed-text strong { display:block; color:var(--text); font-size:14.5px; margin-bottom:3px; }
.feed-text p { margin:0; font-size:13px; color:var(--muted); line-height:1.55; }
.feed-foot { padding:8px 13px; border-top:1px solid var(--border); font-size:12px; }
.feed-empty { text-align:center; padding:34px 20px; background:var(--mint-l); border-radius:14px; margin:16px 0; }
.feed-empty p { margin:0 0 5px; }

/* แนะนำคนน่าติดตาม */
.suggest-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:11px; margin-top:12px; }
.suggest-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:15px 10px; border:1px solid var(--border); border-radius:13px; background:var(--surface); transition:.15s; }
.suggest-card:hover { border-color:var(--clay); transform:translateY(-2px); }
.suggest-card .avatar { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.suggest-card strong { font-size:13.5px; color:var(--text); }
.suggest-card small { font-size:11.5px; }
@media (max-width:640px) {
  .feed-thumb { width:76px; height:76px; }
  .suggest-grid { grid-template-columns:repeat(2,1fr); }
}