/* กฎพื้นฐาน: attribute hidden ต้องซ่อนเสมอ แม้ class จะกำหนด display */
[hidden] { display: none !important; }

/* ============================================================
   จุดกางเต็นท์ อุบลราชธานี — โทนสายแคมป์ (เขียว/ส้มอิฐ/ฟ้า)
   ============================================================ */
@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;
  /* label.inline ตั้ง nowrap ไว้ ข้อความยินยอมยาวจึงดันล้นจอบนมือถือ */
  white-space:normal; align-items:flex-start; line-height:1.55;
}
.consent input[type=checkbox] { flex:0 0 auto; margin-top:2px; }
.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 ค้นหาแบบนำทาง ============ */
.wizard { max-width:620px; margin:0 auto; }
.btn-link { background:none; border:0; color:var(--muted); font-size:13px; text-decoration:underline; cursor:pointer; }


/* ---- 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); }
}

/* ============ Master: แก้ชื่อ + เรียงลำดับ ============ */
.master-list { margin-bottom:14px; }
.master-row { display:flex; align-items:center; gap:9px; padding:7px 10px; border:1px solid var(--border); border-radius:10px; margin-bottom:6px; background:var(--surface); flex-wrap:wrap; }
.master-row.master-off { opacity:.5; }
.master-row form { display:inline; margin:0; }
.master-sort { display:flex; flex-direction:column; gap:1px; flex:0 0 auto; }
.sort-btn { border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:5px; width:26px; height:17px; font-size:9px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.sort-btn:hover { background:var(--green); color:#fff; border-color:var(--green); }
.sort-off { opacity:.2; cursor:default; }
.sort-off:hover { background:var(--surface); color:var(--muted); border-color:var(--border); }
.master-name-form { display:flex !important; align-items:center; gap:4px; flex:1 1 190px; min-width:150px; }
.master-name-input { flex:1; padding:6px 10px !important; font-size:14px !important; border:1px solid transparent !important; background:transparent !important; border-radius:7px !important; margin:0 !important; }
.master-name-input:hover { border-color:var(--border) !important; background:var(--surface) !important; }
.master-name-input:focus { border-color:var(--clay) !important; background:#fff !important; }
.master-save { border:0; background:none; cursor:pointer; font-size:14px; opacity:.35; padding:2px 4px; }
.master-save:hover { opacity:1; }
.master-tags { display:flex; gap:4px; flex-wrap:wrap; flex:0 1 auto; }
.bd-used { background:#fff5d6 !important; color:#8a6d00 !important; }
.master-acts { display:flex; align-items:center; gap:6px; flex:0 0 auto; margin-left:auto; }
@media (max-width:640px) {
  .master-row { gap:7px; padding:8px; }
  .master-name-form { flex:1 1 100%; order:1; }
  .master-sort { order:0; }
  .master-tags { order:2; }
  .master-acts { order:3; }
}

/* ============ หัวข้อฟอร์ม: แก้ไข + เรียงลำดับ ============ */
.fld-acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; align-items:center; }
.fld-acts form { margin:0; }
.fld-edit { margin-top:10px; border-top:1px solid var(--border); padding-top:9px; }
.fld-edit summary { cursor:pointer; font-size:13.5px; color:var(--clay); font-weight:500; list-style:none; display:inline-block; padding:4px 0; }
.fld-edit summary::-webkit-details-marker { display:none; }
.fld-edit summary:hover { text-decoration:underline; }
.fld-edit[open] summary { margin-bottom:8px; }
.fld-edit form { background:var(--mint-l); border-radius:10px; padding:13px 15px; }
.fld-edit label { font-size:13px; margin-top:8px; }
.fld-edit input, .fld-edit select, .fld-edit textarea { font-size:14px; }
.fld-edit textarea { font-family:inherit; }
.fld-edit .fine-print { display:block; margin-top:7px; }

/* ============ กรองสดในหน้าค้นหา ============ */
.sr-bar { position:sticky; top:60px; z-index:20; display:flex; align-items:center; gap:12px; background:var(--green-dd); color:#fff; padding:11px 18px; border-radius:12px; margin:14px 0 16px; box-shadow:0 3px 12px rgba(4,52,44,.2); }
.sr-bar strong { font-size:15px; }
.sr-clear { margin-left:auto; color:#fff; opacity:.85; font-size:13px; text-decoration:underline; }
.sr-clear:hover { opacity:1; color:#fff; }
#searchLive { transition:opacity .15s; position:relative; min-height:80px; }
#searchLive.sr-loading { opacity:.45; pointer-events:none; }
#searchLive.sr-loading::after { content:'กำลังค้นหา…'; position:absolute; top:56px; left:50%; transform:translateX(-50%); background:var(--green-dd); color:#fff; padding:8px 18px; border-radius:20px; font-size:13.5px; z-index:30; }
@media (max-width:640px) { .sr-bar { top:56px; padding:10px 14px; } .sr-bar strong { font-size:14px; } }

/* ============ การ์ดเครดิตเพจ (บนสุดของโพสต์) ============ */
.credit-card { display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#fdf6ee,#fff); border:1px solid var(--clay); border-radius:14px; padding:12px 15px; margin:14px 0 18px; }
.credit-logo { width:46px; height:46px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.credit-logo-text { display:flex; align-items:center; justify-content:center; background:var(--clay); color:#fff; font-size:20px; font-weight:700; }
.credit-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.credit-body small { font-size:11.5px; color:var(--muted); }
.credit-body strong { font-size:15.5px; color:var(--text); }
.credit-clicks { color:var(--green) !important; font-size:11px !important; }
.credit-btn { flex:0 0 auto; background:var(--clay); color:#fff !important; border-radius:20px; padding:9px 18px; font-size:13.5px; font-weight:600; white-space:nowrap; }
.credit-btn:hover { background:var(--clay-d,#b8501f); color:#fff !important; }

/* สถิติรายเพจ */
.src-stat { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:12px; padding:11px 14px; margin-bottom:8px; background:var(--surface); }
.src-logo { width:42px; height:42px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.src-logo-text { display:flex; align-items:center; justify-content:center; background:var(--mint-l); font-size:20px; }
.src-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.src-info strong { font-size:14.5px; color:var(--text); }
.src-info small { font-size:12px; color:var(--muted); }
.src-nums { text-align:right; flex:0 0 auto; }
.src-click { display:block; font-size:19px; font-weight:700; color:var(--clay); line-height:1.2; }
.src-nums small { font-size:11px; color:var(--muted); }
.src-hint { background:var(--mint-l); border-radius:12px; padding:16px 18px; margin:14px 0; }
.src-hint strong { display:block; margin-bottom:5px; }
.src-hint p { margin:0 0 10px; font-size:14px; line-height:1.65; }
@media (max-width:640px) {
  .credit-card { flex-wrap:wrap; }
  .credit-btn { width:100%; text-align:center; }
}

/* ============ หน้ารวมครีเอเตอร์ ============ */
.creator-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; margin:14px 0 26px; }
.creator-card { display:flex; align-items:center; gap:12px; border:1px solid var(--border); border-radius:13px; padding:13px 15px; background:var(--surface); flex-wrap:wrap; }
.creator-logo { width:52px; height:52px; border-radius:11px; object-fit:cover; flex-shrink:0; }
.creator-logo-text { display:flex; align-items:center; justify-content:center; background:var(--mint-l); font-size:24px; }
.creator-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.creator-type { font-size:11.5px; color:var(--muted); }
.creator-body strong { font-size:15px; color:var(--text); }
.creator-body small { font-size:12px; }
.creator-acts { display:flex; gap:6px; flex:0 0 auto; }
.member-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px; margin:14px 0 26px; }
.member-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:16px 10px; border:1px solid var(--border); border-radius:13px; background:var(--surface); transition:.15s; }
.member-card:hover { border-color:var(--clay); transform:translateY(-2px); }
.member-card .avatar { width:54px; height:54px; border-radius:50%; object-fit:cover; margin-bottom:3px; }
.member-card strong { font-size:14px; color:var(--text); }
.member-card small { font-size:11.5px; }
.creator-invite { background:var(--mint-l); border-radius:14px; padding:22px 24px; margin-top:26px; }
.creator-invite h2 { margin:0 0 8px; font-size:1.15rem; }
.creator-invite p { margin:0 0 12px; font-size:14.5px; line-height:1.7; }
.invite-points { list-style:none; padding:0; margin:0 0 16px; }
.invite-points li { font-size:14px; padding:3px 0; }

/* ============ โพสต์จากเจ้าของสถานที่ ============ */

/* ============ แถบเชิญติดตั้งแอป (PWA) ============ */
.pwa-bar { position:fixed; left:12px; right:12px; bottom:12px; z-index:300; display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:11px 14px; box-shadow:0 6px 24px rgba(20,50,30,.18); opacity:0; transform:translateY(16px); transition:.25s; max-width:520px; margin:0 auto; }
.pwa-bar.show { opacity:1; transform:translateY(0); }
.pwa-ico { font-size:28px; flex:0 0 auto; }
.pwa-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.pwa-txt strong { font-size:14.5px; color:var(--text); }
.pwa-txt small { font-size:11.5px; color:var(--muted); }
.pwa-add { flex:0 0 auto; background:var(--clay); color:#fff; border:0; border-radius:20px; padding:9px 18px; font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit; }
.pwa-add:hover { background:var(--clay-d,#b8501f); }
.pwa-close { flex:0 0 auto; background:none; border:0; color:var(--muted); font-size:15px; cursor:pointer; padding:4px 6px; }
.pwa-close:hover { color:var(--text); }
@media (max-width:400px) { .pwa-txt small { display:none; } }

/* ---- ป้ายสถานที่มาใหม่ ---- */
.place-card { position:relative; }
.new-badge { position:absolute; top:8px; left:8px; background:var(--clay); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:12px; z-index:1; }
.be-first { color:var(--clay); }

/* ---- โซนอันตราย (ลบโพสต์) ---- */
.danger-zone { margin-top:26px; border-top:1px solid var(--border); padding-top:14px; }
.danger-zone summary { cursor:pointer; color:#a12222; font-size:14px; list-style:none; padding:5px 0; }
.danger-zone summary::-webkit-details-marker { display:none; }
.danger-zone summary:hover { text-decoration:underline; }
.danger-zone p { font-size:13px; margin:8px 0 10px; }
.btn-danger { background:#a12222; color:#fff; border:0; }
.btn-danger:hover { background:#8a1c1c; color:#fff; }

/* ---- แถบกู้ร่างที่เขียนค้าง ---- */
.draft-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff6e5; border:1px solid #e0b850; border-radius:10px; padding:10px 14px; margin-bottom:14px; font-size:13.5px; color:#8a6d00; }
.draft-bar span { flex:1; min-width:0; }
.draft-clear { background:none; border:1px solid #e0b850; color:#8a6d00; border-radius:16px; padding:5px 13px; font-size:12.5px; cursor:pointer; font-family:inherit; }
.draft-clear:hover { background:#e0b850; color:#fff; }

/* ============ หน้ารวมจัดการฟอร์ม ============ */
.struct-help { background:var(--mint-l); border-radius:12px; padding:14px 18px; margin:12px 0 18px; }
.struct-help summary { cursor:pointer; font-weight:600; color:var(--green-dd); list-style:none; font-size:14.5px; }
.struct-help summary::-webkit-details-marker { display:none; }
.struct-help summary:hover { text-decoration:underline; }
.struct-help[open] summary { margin-bottom:12px; }
.struct-help > p { font-size:14px; margin:0 0 10px; line-height:1.7; }
.struct-table { width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:12px; background:#fff; border-radius:8px; overflow:hidden; }
.struct-table th { background:var(--green-dd); color:#fff; padding:8px 11px; text-align:left; font-weight:600; font-size:13px; }
.struct-table td { padding:9px 11px; border-bottom:1px solid var(--border); vertical-align:top; }
.struct-table tr:last-child td { border-bottom:0; }
.struct-table td small { color:var(--muted); font-size:11.5px; }
.struct-table .no { color:#a12222; }
.struct-table .yes { color:var(--green-dd); }
.struct-tip { background:#fff; border-radius:8px; padding:10px 13px; font-size:13.5px; margin:0 0 8px !important; line-height:1.65; }
.form-tabs { margin-bottom:6px; }
.tab-desc { font-size:13.5px; margin:0 0 16px; }
.tab-body { border-top:1px solid var(--border); padding-top:16px; }

/* ============ พรีวิวฟอร์มตามหมวด ============ */
.fp-legend { display:flex; gap:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); margin:12px 0 16px; }
.fp-legend span { display:flex; align-items:center; gap:5px; }
.fp-dot { width:11px; height:11px; border-radius:3px; display:inline-block; }
.fp-dot-core { background:#c9ccc6; }
.fp-dot-master { background:#5aa845; }
.fp-dot-extra { background:#d85a30; }
.form-preview { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.fp-section { border-bottom:1px solid var(--border); }
.fp-section:last-child { border-bottom:0; }
.fp-section h3 { margin:0; padding:11px 16px; font-size:14px; background:var(--mint-l); color:var(--green-dd); font-weight:600; }
.fp-row { display:flex; align-items:flex-start; gap:11px; padding:9px 16px; border-bottom:1px solid #f2f4f0; font-size:14px; }
.fp-row:last-child { border-bottom:0; }
.fp-core { background:#fafbf9; color:var(--muted); }
.fp-master { border-left:3px solid #5aa845; }
.fp-extra { border-left:3px solid #d85a30; }
.fp-num { flex:0 0 26px; text-align:center; font-size:12px; color:var(--muted); padding-top:2px; }
.fp-sort { flex:0 0 26px; display:flex; flex-direction:column; gap:2px; }
.fp-sort form { margin:0; }
.fp-btn { border:1px solid var(--border); background:#fff; color:var(--muted); border-radius:4px; width:24px; height:15px; font-size:8px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.fp-btn:hover { background:var(--clay); color:#fff; border-color:var(--clay); }
.fp-btn-off { opacity:.2; cursor:default; }
.fp-btn-off:hover { background:#fff; color:var(--muted); border-color:var(--border); }
.fp-label { flex:1; min-width:0; color:var(--text); line-height:1.6; }
.fp-core .fp-label { color:var(--muted); }
.fp-req { color:#c0392b; }
.fp-opts { display:block; font-size:11.5px; color:var(--muted); margin-top:1px; }
.fp-tag { display:inline-block; background:var(--mint-l); color:var(--green-dd); border-radius:10px; padding:1px 8px; font-size:11px; margin-left:5px; }
.fp-tag-cat { background:#fff4d6; color:#8a6d00; }
.fp-type { flex:0 0 auto; font-size:11.5px; color:var(--muted); text-align:right; padding-top:2px; }
.fp-edit { display:block; color:var(--clay); font-size:11px; margin-top:2px; }
.fp-note { background:var(--mint-l); border-radius:10px; padding:13px 16px; font-size:13.5px; line-height:1.7; margin-top:16px; }
@media (max-width:640px) {
  .fp-row { flex-wrap:wrap; gap:8px; }
  .fp-type { flex:1 1 100%; text-align:left; padding-left:37px; }
  .fp-edit { display:inline; margin-left:8px; }
}

/* ============ ฟอร์มเพิ่มสถานที่ (ระบบฟอร์มรายหมวด) ============ */
.step-box { background:var(--mint-l); border-radius:12px; padding:15px 18px; margin:16px 0; }
.step-box h2 { margin:0 0 4px; font-size:1.05rem; }
.step-box p { margin:0; font-size:13px; }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin-top:10px; }
.cat-pick { display:flex; align-items:center; gap:7px; background:#fff; border:1.5px solid var(--border); border-radius:10px; padding:10px 13px; cursor:pointer; font-size:14px; transition:.12s; }
.cat-pick:hover { border-color:var(--clay); }
.cat-pick.on { background:var(--clay); color:#fff; border-color:var(--clay); }
.cat-pick input { margin:0; flex:0 0 auto; }
.sub-cats { margin-top:12px; }
.sub-cats summary { cursor:pointer; font-size:13.5px; color:var(--green-dd); padding:5px 0; }
.ff-block { margin-bottom:16px; }
.ff-block:last-of-type { margin-bottom:0; }
.req { color:#c0392b; }
.cur-cover { margin-bottom:8px; }
.cur-cover img { max-width:180px; border-radius:8px; display:block; margin-bottom:4px; }
.ec-row { margin-bottom:7px; }

/* ============ ลากจัดลำดับ (หน้าจัดการฟอร์ม) ============ */
.drag-grip { flex:0 0 auto; cursor:grab; color:#b8bdb4; font-size:17px; line-height:1; padding:3px 4px; user-select:none; touch-action:none; }
.drag-grip:active { cursor:grabbing; color:var(--clay); }
.sortable [data-id] { transition:background .12s; }
.sortable [data-id].dragging { opacity:.55; background:#fff6e5; box-shadow:0 3px 12px rgba(0,0,0,.12); }
.fld-box { position:relative; }
.fld-box .drag-grip { position:absolute; top:10px; right:12px; }
.cf-flash { position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(14px); background:var(--green-dd); color:#fff; padding:9px 20px; border-radius:22px; font-size:13.5px; opacity:0; transition:.2s; z-index:400; pointer-events:none; }
.cf-flash.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ป้ายบอกว่าตัวกรองนี้เลือกได้ข้อเดียว */
.pick-one { display:inline-block; background:var(--mint-l); color:var(--green-dd); border-radius:9px; padding:1px 7px; font-size:10.5px; margin-left:6px; font-weight:400; }

/* ============ กล่องฉุกเฉิน: ระบุพิกัดจุดเกิดเหตุ ============ */
.em-locate { background:#fff; border:2px solid #d9534f; border-radius:12px; padding:13px 15px; margin:11px 0 14px; }
.btn-locate { width:100%; background:#d9534f; color:#fff; border:0; border-radius:10px; padding:14px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.4; }
.btn-locate:hover { background:#c0392b; }
.btn-locate:disabled { opacity:.7; cursor:wait; }
.em-locate .fine-print { margin:8px 0 0; line-height:1.6; }
.locate-result { margin-top:11px; }
.locate-coord { font-size:19px; font-weight:700; color:#b13b37; font-family:ui-monospace,monospace; letter-spacing:.3px; word-break:break-all; }
.locate-acc { font-size:12px; color:var(--muted); margin:3px 0 9px; }
.locate-btns { display:flex; gap:7px; flex-wrap:wrap; }
.locate-btns .btn { flex:1 1 auto; text-align:center; white-space:nowrap; }
.locate-err { background:#fdecea; color:#8a1f22; border-radius:8px; padding:10px 13px; font-size:13.5px; margin:0; line-height:1.6; }
.em-label { font-size:12.5px; color:var(--muted); margin:10px 0 4px; }

/* ============ กล่องแจ้งเหตุฉุกเฉิน (SMS ก่อน แล้วโทร) ============ */
.em-step { margin:18px 0; padding-top:16px; border-top:1px solid #f2d8d5; }
.em-step:first-of-type { border-top:0; padding-top:0; }
.em-step-label { font-size:14.5px; font-weight:600; color:#8a1f22; margin-bottom:11px; display:flex; align-items:center; gap:8px; line-height:1.5; }
.em-num { flex:0 0 auto; background:#d9534f; color:#fff; width:23px; height:23px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; }
.em-types { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:13px; }
.em-type { background:#fff; border:1.5px solid var(--border); border-radius:22px; padding:10px 17px; font-size:13.5px; cursor:pointer; font-family:inherit; color:var(--text-secondary); line-height:1.4; transition:.12s; }
.em-type:hover { border-color:#d9534f; color:#b13b37; }
.em-type.on { background:#d9534f; color:#fff; border-color:#d9534f; font-weight:600; box-shadow:0 2px 8px rgba(217,83,79,.3); }
.em-count { display:flex; align-items:center; gap:9px; font-size:13px; }
.em-count label { margin:0; font-size:13px; color:var(--text-secondary); }
.em-count select { margin:0; width:auto; padding:6px 11px; font-size:13px; }
.btn-locate { width:100%; background:#d9534f; color:#fff; border:0; border-radius:10px; padding:14px; font-size:16px; font-weight:700; cursor:pointer; font-family:inherit; line-height:1.4; }
.btn-locate:hover { background:#c0392b; }
.btn-locate:disabled { opacity:.7; cursor:wait; }
.locate-result { margin-top:11px; }
.locate-coord { font-size:19px; font-weight:700; color:#b13b37; font-family:ui-monospace,monospace; word-break:break-all; }
.locate-acc { font-size:12px; color:var(--muted); margin:3px 0 9px; }
.locate-err { background:#fdecea; color:#8a1f22; border-radius:8px; padding:10px 13px; font-size:13.5px; margin:0; line-height:1.6; }
.em-warn { background:#fff4d6; color:#8a6d00; border-radius:8px; padding:9px 12px; font-size:12.5px; margin:8px 0; line-height:1.6; }
.em-preview { background:#fff; border:1px dashed #d9534f; border-radius:8px; padding:11px 13px; font-size:12.5px; line-height:1.75; color:#4a5148; margin:9px 0; font-family:ui-monospace,monospace; word-break:break-word; }
.em-send-label { font-size:12.5px; color:var(--muted); margin:10px 0 5px; }
.em-sends { display:flex; flex-direction:column; gap:9px; }
.em-send { display:block; background:#fff; border:1.5px solid #d9534f; color:#b13b37 !important; border-radius:24px; padding:13px 18px; font-size:14px; font-weight:600; text-align:center; text-decoration:none !important; line-height:1.4; }
.em-send:hover { background:#fdecea; }
.em-send-main { background:#d9534f; color:#fff !important; }
.em-send-main:hover { background:#c0392b; color:#fff !important; }
.em-send-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
.em-send-row .btn { flex:1 1 auto; text-align:center; white-space:nowrap; }
.em-calls { display:flex; flex-wrap:wrap; gap:9px; }
.em-call { display:inline-block; background:#fff; border:1.5px solid var(--border); border-radius:22px; padding:10px 18px; font-size:13.5px; color:var(--text) !important; text-decoration:none !important; line-height:1.4; }
.em-call:hover { border-color:#d9534f; color:#b13b37 !important; }
.em-call-1669 { border:2px solid #d9534f; background:#fdecea; color:#b13b37 !important; font-weight:700; }
.em-contacts { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px 15px; margin:12px 0; }
.em-contacts summary { cursor:pointer; font-size:14px; font-weight:600; color:var(--text); list-style:none; }
.em-contacts summary::-webkit-details-marker { display:none; }
.em-contacts summary small { font-weight:400; color:var(--muted); font-size:12px; }
.em-contacts[open] summary { margin-bottom:8px; }
.em-ct-row { display:flex; gap:7px; margin-bottom:7px; }
.em-ct-row input { margin:0 !important; flex:1; min-width:0; }
.em-saved { color:var(--green); font-size:13px; margin-left:8px; }
@media (max-width:640px) { .em-ct-row { flex-direction:column; } }

/* ============ ปุ่มเปิด + popup แจ้งเหตุฉุกเฉิน ============ */
.em-open { width:100%; display:flex; align-items:center; gap:12px; background:#fff; border:2px solid #d9534f; border-radius:13px; padding:13px 16px; cursor:pointer; font-family:inherit; text-align:left; margin:14px 0; transition:.15s; }
.em-open:hover { background:#fdecea; }
.em-open-ic { font-size:26px; flex:0 0 auto; line-height:1; }
.em-open-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.em-open-txt strong { color:#b13b37; font-size:16px; }
.em-open-txt small { color:var(--muted); font-size:12.5px; line-height:1.5; }
.em-open-arrow { color:#d9534f; font-size:24px; flex:0 0 auto; line-height:1; }

/* ปุ่มลอย */
.em-fab { position:fixed; right:16px; bottom:80px; z-index:250; width:54px; height:54px; border-radius:50%; background:#d9534f; color:#fff; border:0; font-size:24px; cursor:pointer; box-shadow:0 4px 16px rgba(217,83,79,.45); display:flex; align-items:center; justify-content:center; }
.em-fab:hover { background:#c0392b; transform:scale(1.05); }
.em-fab:active { transform:scale(.96); }

/* popup */
/* [hidden] ต้องชนะ display:flex ไม่งั้น popup โผล่ตลอดและปิดไม่ได้ */
.em-modal[hidden] { display:none !important; }
.em-modal { position:fixed; inset:0; z-index:500; display:flex; align-items:flex-end; justify-content:center; }
.em-backdrop { position:absolute; inset:0; z-index:0; background:rgba(20,30,25,.5); opacity:0; transition:opacity .2s; }
.em-modal.show .em-backdrop { opacity:1; }
.em-panel { position:relative; z-index:1; background:#fdf4f2; width:100%; max-width:560px; max-height:92vh; border-radius:18px 18px 0 0; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .22s cubic-bezier(.3,.8,.4,1); }
.em-modal.show .em-panel { transform:translateY(0); }
.em-head { display:flex; align-items:center; gap:10px; padding:15px 18px 12px; border-bottom:1px solid #f2d8d5; flex:0 0 auto; }
.em-head strong { flex:1; font-size:17px; color:#b13b37; }
.em-close { background:none; border:0; font-size:22px; color:var(--muted); cursor:pointer; padding:8px 12px; border-radius:8px; line-height:1; flex:0 0 auto; }
.em-close:hover { background:#f2d8d5; color:#b13b37; }
.em-body { padding:14px 18px 22px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.em-body .em-step:first-of-type { padding-top:0; border-top:0; margin-top:0; }
.em-body .coord-row { margin-top:16px; padding-top:14px; border-top:1px solid #f2d8d5; }
@media (min-width:641px) {
  .em-modal { align-items:center; }
  .em-panel { border-radius:18px; max-height:88vh; transform:translateY(20px) scale(.97); }
  .em-modal.show .em-panel { transform:translateY(0) scale(1); }
}
@media (max-width:640px) { .em-fab { bottom:70px; right:13px; width:50px; height:50px; font-size:22px; } }

/* ---- สิ่งอำนวยความสะดวก (ปุ่มเขียวมีเครื่องหมายถูก) ---- */
.fac-section { margin:14px 0 16px; padding:13px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.fac-label { font-size:12.5px; color:var(--muted); margin-bottom:10px; letter-spacing:.2px; }
.fac-grid { display:flex; flex-wrap:wrap; gap:7px; }
.fac-item { display:inline-flex; align-items:center; gap:6px; background:var(--green); color:#fff; border-radius:20px; padding:6px 13px 6px 8px; font-size:12.5px; font-weight:400; line-height:1.5; }
.fac-check { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:rgba(255,255,255,.28); font-size:10px; font-weight:700; flex:0 0 auto; }
@media (max-width:640px) { .fac-item { font-size:12px; padding:6px 12px 6px 7px; } .fac-check { width:16px; height:16px; font-size:9.5px; } }

/* ---- สิ่งอำนวยความสะดวกที่ไม่มี ---- */
.fac-no { background:#fdeeed !important; color:#a85450 !important; border:1px solid #f5d5d3; padding:5px 12px 5px 7px; }
.fac-no .fac-check { background:#f0c9c6; color:#b5504b; }
.fac-note { font-size:11px; color:var(--muted); margin:10px 0 0; line-height:1.65; }
.btn-absent-on { background:var(--clay) !important; color:#fff !important; border-color:var(--clay) !important; }
.fac-legend { display:inline-flex; align-items:center; border-radius:10px; padding:1px 7px; font-size:10.5px; margin-right:3px; }
.fac-legend-yes { background:var(--green); color:#fff; }
.fac-legend-no { background:#fdeeed; color:#a85450; border:1px solid #f5d5d3; }

/* ดรอปดาวน์เลือกกลุ่มในหน้าจัดการ Master */
.master-grp-sel { margin:0 !important; width:auto !important; min-width:120px; padding:5px 9px !important; font-size:12px !important; border-radius:7px !important; flex:0 0 auto; }
@media (max-width:640px) { .master-grp-sel { min-width:105px; font-size:11.5px !important; } }

/* ============================================================
   v2 — ชั้นนิยามหมวด (ฟอร์ม / แสดงผล / หลังบ้าน)
   ============================================================ */

/* ---- แท็บที่มีจำนวนมาก (ชุดตัวเลือก 30+ ชุด) ----
   .tabs เดิมใช้ flex:1 หารความกว้างเท่ากัน พอมี 30 แท็บจะเหลืออันละ 30px
   ตัวอักษรไทยตกทีละตัว — form-tabs จึงเลิกหารเท่า แล้วให้ตัดบรรทัดแทน */
.form-tabs { flex-wrap:wrap; justify-content:flex-start; gap:4px; max-height:none; }
.form-tabs .tab {
  flex:0 0 auto; width:auto; white-space:nowrap; padding:7px 12px;
  font-size:13px; background:var(--surface); border:1px solid var(--border);
}
.form-tabs .tab small { color:var(--faint); font-weight:400; }
.form-tabs .tab.active { background:var(--clay); color:#fff; border-color:var(--clay); }
.form-tabs .tab.active small { color:rgba(255,255,255,.75); }

/* ---- ฟอร์มแก้ไขในบรรทัดเดียว ----
   input ตั้ง width:100% ไว้ทั่วไป ต้อง override ไม่งั้นแต่ละช่องกินเต็มบรรทัด */
.inline-form { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:1; min-width:0; }
.inline-form input, .inline-form select { width:auto; min-width:0; padding:7px 10px; font-size:14px; }
.inline-form input[type=text] { flex:1 1 min(100%, 140px); }
.inline-form input[size="2"] { flex:0 0 52px; text-align:center; }
.inline-form input[size="10"], .inline-form input[size="14"] { flex:0 1 120px; min-width:0; }
.inline-form select { flex:0 0 auto; }
.inline-form .btn { flex:0 0 auto; }

/* ---- รายการจัดการหลังบ้าน ---- */
.master-list { display:flex; flex-direction:column; gap:7px; margin:12px 0; }
.master-row {
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; max-width:100%;
  padding:9px 12px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); transition:.15s;
}
.master-row:hover { box-shadow:var(--shadow); }
.master-row.dragging { opacity:.45; }
.master-off { opacity:.5; background:var(--bg); }
.master-name { flex:1 1 min(100%, 180px); min-width:0; display:flex; flex-direction:column; gap:1px; }
.master-name small { font-size:12px; color:var(--faint); }
.master-tags { display:flex; flex-wrap:wrap; gap:4px; flex:0 1 auto; }
.master-acts { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-left:auto; min-width:0; max-width:100%; }
.master-acts form { display:inline-flex; margin:0; }
.master-del {
  background:none; border:none; color:var(--clay); font-size:16px; line-height:1;
  padding:6px 8px; border-radius:8px;
}
.master-del:hover { background:var(--clay-l); }
.drag-grip { cursor:grab; color:var(--faint); font-size:15px; user-select:none; }
.drag-grip:active { cursor:grabbing; }

/* ---- ป้ายกำกับเล็ก ---- */
.bd {
  display:inline-block; padding:2px 8px; border-radius:20px; font-size:11.5px;
  background:var(--bg); color:var(--muted); border:1px solid var(--border); white-space:nowrap;
}
.bd-green { background:var(--mint-l); color:var(--green-d); border-color:transparent; }
.bd-used  { background:var(--clay-l); color:var(--clay-d); border-color:transparent; }

/* ---- กล่องเพิ่มรายการ ---- */
.add-box {
  margin:16px 0; padding:14px 16px; background:var(--surface);
  border:1px dashed var(--border-s); border-radius:14px;
}
.add-box h2 { margin:0 0 10px; font-size:1rem; }
.add-box > input, .add-box > select { margin-bottom:8px; }
.add-box .btn { margin-top:8px; }
.inline-edit > summary { list-style:none; cursor:pointer; }
.inline-edit > summary::-webkit-details-marker { display:none; }
.inline-edit[open] { flex:1 1 100%; min-width:0; max-width:100%; }
/* เมื่อเปิดฟอร์มแก้ไข ให้กินเต็มแถวและดันปุ่มอื่นลงบรรทัดถัดไป
   ไม่งั้น .master-acts (flex) จะบีบฟอร์มจนข้อความล้นออกนอกกรอบ */
.master-acts:has(.inline-edit[open]) { flex:1 1 100%; margin-left:0; flex-wrap:wrap; }
.master-acts:has(.inline-edit[open]) > form,
.master-acts:has(.inline-edit[open]) > .bd { flex:0 0 auto; }
.inline-edit .add-box { margin:8px 0 0; }
/* ฟอร์มแก้ไขช่อง — จัดเป็นตารางแทนแถวยาว ไม่งั้นล้นกรอบเมื่อมีหลายช่อง */
.inline-edit .add-box {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap:8px 10px;
  align-items:end;
}
.inline-edit .add-box > label { grid-column:1 / -1; margin:4px 0 -4px; font-size:13px; font-weight:500; }
.inline-edit .add-box > .hint { grid-column:1 / -1; margin:0; }
.inline-edit .add-box label.inline {
  grid-column:1 / -1; margin:2px 0; font-weight:400;
  white-space:normal; min-width:0;      /* label.inline ตั้ง nowrap ไว้ ทำให้ดันล้นบนจอแคบ */
  display:flex; align-items:center; gap:7px;
}
.inline-edit .add-box .hint { white-space:normal; word-break:break-word; }
.inline-edit .add-box button { grid-column:1 / -1; justify-self:start; }
.inline-edit .add-box > label:not(.inline) { grid-column:1 / -1; }
.inline-edit .add-box input:not([type=checkbox]):not([type=radio]),
.inline-edit .add-box select { width:100%; margin:0; }
.inline-edit .add-box input[type=checkbox] { width:auto; flex:0 0 auto; margin:0; }

/* ---- ฟอร์มที่สร้างจาก category_surface ---- */
.fld-group {
  border:1px solid var(--border); border-radius:14px; padding:6px 16px 16px;
  margin:0 0 16px; background:var(--surface);
}
.fld-group legend { padding:0 8px; font-weight:600; color:var(--green-d); font-size:15px; }
.fld { margin:0 0 14px; }
.fld > label { margin:0 0 5px; font-size:14px; color:var(--text); font-weight:500; }
.fld .req { color:var(--clay); }
.fld .unit { color:var(--faint); font-weight:400; }
.hint { margin:0 0 6px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.err { margin:5px 0 0; font-size:12.5px; color:var(--clay-d); }
.fld-error > label { color:var(--clay-d); }
.fld-error input, .fld-error select, .fld-error textarea { border-color:var(--clay); }
.fld-preview { max-width:160px; border-radius:10px; margin-bottom:8px; display:block; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px) { .grid-2 { grid-template-columns:1fr; } }

/* ---- แถวซ้ำ (เบอร์ฉุกเฉิน ฯลฯ) ---- */
.repeater { display:flex; flex-direction:column; gap:8px; }
.rep-row {
  display:grid; grid-template-columns:minmax(110px,.9fr) 1fr 1fr; gap:7px;
  padding:10px; background:var(--bg); border-radius:10px;
}
.rep-row label.inline { grid-column:1 / -1; margin:0; }
@media (max-width:520px) { .rep-row { grid-template-columns:1fr; } }

/* ---- กลุ่มย่อยในแถว chip ---- */
.chip-grp {
  flex-basis:100%; font-size:12px; color:var(--faint);
  margin:6px 0 -2px; font-weight:500;
}

/* ---- แผงตัวกรองหน้าค้นหา ---- */
.filter-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:0 14px; margin:10px 0;
}
.filter-panel > summary {
  padding:12px 0; cursor:pointer; font-weight:500; color:var(--green-d); list-style:none;
}
.filter-panel > summary::-webkit-details-marker { display:none; }
.filter-panel > summary::after { content:' ▾'; color:var(--faint); }
.filter-panel[open] > summary::after { content:' ▴'; }
.filter-grp { border-top:1px solid var(--border); padding:11px 0 12px; }
.filter-grp:first-child { border-top:none; padding-top:4px; }
.filter-grp-flat { padding:8px 0; }
/* หัวข้อกลุ่ม — กางอยู่แล้ว ไม่ต้องกด */
.filter-head { font-size:13.5px; font-weight:600; color:var(--green-d); margin-bottom:2px; }
.filter-grp .badge {
  display:inline-block; min-width:18px; padding:0 6px; border-radius:20px;
  background:var(--clay); color:#fff; font-size:11px; text-align:center;
}
.filter-grp .chip-row, .filter-grp .grid-2 { margin-top:8px; }

/* ---- หน้าแสดงผลที่วาดจาก surface=display ---- */
/* กล่องนอกที่ครอบการ์ด — ทำพื้นให้จางลง การ์ดขาวข้างในจะได้ลอยเด่น
   (การ์ดขาวซ้อนบนพื้นขาวทำให้เงาจมหายไป) */
.box:has(.info-box) {
  background:var(--bg);
  border-color:transparent;
  box-shadow:none;
  padding:14px;
}

/* การ์ดข้อมูล — ยกให้ลอยเหนือพื้นหลังด้วยเงาสองชั้นและแถบสีที่หัวการ์ด */
.info-box {
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px 18px 14px;
  margin:0 0 16px;
  box-shadow:0 1px 2px rgba(20,50,30,.04), 0 6px 18px rgba(20,50,30,.07);
  overflow:hidden;
  transition:box-shadow .18s, transform .18s;
}
/* แถบสีบาง ๆ ด้านบน ช่วยแยกการ์ดออกจากกันเวลาวางเรียง */
.info-box::before {
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--green) 0%, var(--mint-l) 65%, transparent 100%);
  opacity:.55;
}
.info-box:hover {
  box-shadow:0 2px 4px rgba(20,50,30,.05), 0 10px 28px rgba(20,50,30,.10);
  transform:translateY(-1px);
}
.info-box h3 {
  margin:0 0 12px; padding-bottom:9px;
  font-size:15.5px; color:var(--green-d); font-weight:600;
  border-bottom:1px solid var(--border);
}
.info-row {
  display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--border);
  font-size:14px; align-items:baseline;
}
.info-row:last-child { border-bottom:none; }
.info-label { flex:0 0 38%; color:var(--muted); font-size:13.5px; }
.info-value { flex:1; min-width:0; word-break:break-word; }
@media (max-width:480px) {
  .info-row { flex-direction:column; gap:2px; }
  .info-label { flex:none; }
}

/* ---- ข้อความเมื่อไม่มีข้อมูล ---- */
.empty {
  padding:24px 16px; text-align:center; color:var(--faint);
  background:var(--bg); border-radius:12px; font-size:14px; margin:10px 0;
}

/* ---- ช่องพิกัด: ค้นหา + แผนที่ปักหมุด ---- */
.coords-field { position:relative; }
.coords-search { margin-bottom:8px; }
.coords-suggest {
  position:absolute; z-index:30; left:0; right:0; top:44px;
  background:var(--surface); border:1px solid var(--border-s);
  border-radius:var(--radius); box-shadow:var(--shadow-h);
  max-height:260px; overflow-y:auto;
}
.coords-item {
  display:block; width:100%; text-align:left; padding:9px 12px;
  background:none; border:none; border-bottom:1px solid var(--border);
  font:inherit; font-size:13.5px; color:var(--text); line-height:1.45;
}
.coords-item:last-child { border-bottom:none; }
.coords-item:hover { background:var(--mint-l); color:var(--green-d); }
.coords-map {
  height:230px; margin-top:8px; border-radius:12px;
  border:1px solid var(--border); overflow:hidden; background:var(--bg);
}
.coords-map .leaflet-container { font-family:inherit; }

/* ---- ฟอร์มกำลังโหลดช่องใหม่ตามประเภทที่เลือก ---- */
.form-loading { opacity:.55; pointer-events:none; transition:opacity .15s; }

/* ---- ส่วนหัวหน้าค้นหา (แท็บ/ช่องค้น/เรียงลำดับ/แบ่งหน้า) ---- */
.search-form { margin:10px 0 4px; }
.search-bar { display:flex; gap:8px; margin-bottom:10px; }
.search-bar input { flex:1; min-width:0; }
.search-bar .btn { flex:0 0 auto; }
.sort-row { display:flex; align-items:center; gap:8px; margin:10px 0 4px; }
.sort-row label { margin:0; flex:0 0 auto; color:var(--muted); font-size:13.5px; }
.sort-row select { width:auto; flex:1; max-width:220px; }
.chip-quick { margin-bottom:10px; }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0; }
.pager span { color:var(--muted); font-size:13.5px; }
@media (max-width:640px) {
  .search-bar { flex-direction:column; }
  .search-bar .btn { width:100%; }
  .sort-row select { max-width:none; }
}

/* ---- แท็บหน้าค้นหา/แผนที่: เพิ่มหมวดได้ไม่จำกัด จึงเลื่อนแนวนอนแทนการบีบ ---- */
.search-page .tabs, .map-page .tabs {
  flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; gap:6px;
}
.search-page .tabs::-webkit-scrollbar, .map-page .tabs::-webkit-scrollbar { display:none; }
.search-page .tabs .tab, .map-page .tabs .tab {
  flex:0 0 auto; white-space:nowrap; padding:9px 14px;
}

/* ---- ตัวเลือกแบบติ๊ก: ใช้ .opt-group / label.inline ของระบบเดิม ----
   เดิมผมใช้ .chip ซึ่งเป็นป้ายเล็ก (13px) และซ่อน checkbox ทำให้ดูไม่ออกว่าติ๊กได้
   ที่นี่แค่จัดระยะรอบกล่องให้กระชับ ตัวปุ่มใช้ค่าเดิมของระบบทั้งหมด */
.fld .opt-group,
.filter-grp .opt-group { margin:5px 0 0; }

/* หัวข้อกลุ่มย่อย — แสดงเมื่อชุดนั้นแบ่งกลุ่มจริง */
.opt-grp-label {
  flex-basis:100%;
  margin:7px 0 0;
  font-size:12.5px;
  color:var(--faint);
  font-weight:500;
}
.opt-group .opt-grp-label:first-child { margin-top:0; }

/* ข้อความยาวบนจอแคบ ปล่อยให้ตัดบรรทัดได้ ไม่งั้นดันล้นขอบ */
@media (max-width:640px) {
  .fld .opt-group label.inline,
  .filter-grp .opt-group label.inline { white-space:normal; padding:7px 12px; }
}

/* ---- รายชื่อช่องที่ใช้ชุดตัวเลือกนี้ (.alert-warn มีอยู่แล้วในระบบ) ---- */
.set-usedby { margin:8px 0 0; font-size:13px; line-height:1.9; }
.set-usedby .bd { text-decoration:none; }
.set-usedby .bd:hover { border-color:var(--green); color:var(--green-d); }
.set-warn { color:var(--amber-d); }
.set-note { color:var(--faint); }
.set-hint { margin:10px 0 4px; font-size:13px; line-height:1.8; }
.opt-absent { flex:0 0 auto; margin:0; font-size:12.5px; white-space:nowrap; }

/* ---- ฟอร์มเพิ่มตัวเลือก: มีหัวข้อกำกับทุกช่อง กันกรอกผิดช่อง ---- */
.opt-add .opt-fields {
  display:grid;
  grid-template-columns:2fr 0.8fr 1.2fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.opt-add .opt-f { display:flex; flex-direction:column; gap:3px; min-width:0; }
.opt-add .opt-f label { margin:0; font-size:13px; font-weight:500; color:var(--text); }
.opt-add .opt-f input, .opt-add .opt-f select { width:100%; margin:0; }
.opt-add .opt-f .hint { margin:0; font-size:11.5px; line-height:1.4; }
.opt-add .req { color:var(--clay); }
.hint-inline { color:var(--faint); font-size:12px; font-weight:400; }
@media (max-width:760px) {
  .opt-add .opt-fields { grid-template-columns:1fr 1fr; }
  .opt-add .opt-f-name { grid-column:1 / -1; }
}
@media (max-width:460px) {
  .opt-add .opt-fields { grid-template-columns:1fr; }
}

/* ---- ตัวเลือกโหมดการอนุมัติ ---- */
.mode-picker { display:flex; flex-direction:column; gap:9px; margin:10px 0 18px; }
.mode-opt {
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:start;
  padding:12px 15px; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); cursor:pointer; margin:0; transition:.15s;
}
.mode-opt:hover { border-color:var(--green); }
.mode-opt input { grid-row:1 / span 3; margin-top:3px; }
.mode-title { font-weight:600; font-size:14.5px; }
.mode-desc  { font-size:13px; color:var(--muted); grid-column:2; }
.mode-note  { font-size:12px; color:var(--faint); grid-column:2; }
.mode-on { border-color:var(--green); background:var(--mint-l); }
.mode-on .mode-title { color:var(--green-d); }

/* ---- กล่องชวนช่วยเติมข้อมูลบนหน้าสถานที่ ---- */
.box-help { border-color:#bcd9a9; background:#f6faf1; }
.box-help p { margin:6px 0 10px; font-size:13.5px; }

/* ---- เปรียบเทียบก่อน/หลัง ในคิวคำขอแก้ไข ---- */
.edit-reason {
  margin:6px 0; padding:8px 12px; background:var(--bg);
  border-radius:8px; font-size:13.5px; line-height:1.6;
}
.diff-list { margin:8px 0 12px; }
.diff-row {
  display:grid; grid-template-columns:minmax(110px,26%) 1fr auto 1fr;
  gap:4px 10px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px;
}
.diff-row:last-child { border-bottom:none; }
.diff-label { color:var(--muted); font-size:13px; }
.diff-old   { color:var(--clay-d); text-decoration:line-through; opacity:.75; word-break:break-word; }
.diff-arrow { color:var(--faint); }
.diff-new   { color:var(--green-d); font-weight:500; word-break:break-word; }
@media (max-width:620px) {
  .diff-row { grid-template-columns:1fr; gap:2px; }
  .diff-arrow { display:none; }
  .diff-new::before { content:'→ '; color:var(--faint); }
}

/* ---- ฟอร์มแก้ไขช่องในคลังช่องข้อมูล (ต้องอยู่ท้ายไฟล์เพื่อชนะกฎทั่วไปของ label.inline) ---- */
.inline-edit .add-box label.inline {
  grid-column: 1 / -1 !important;
  display: flex !important;
  align-items: center;
  gap: 7px;
  white-space: normal !important;
  min-width: 0;
  margin: 2px 0;
  font-weight: 400;
}
.inline-edit .add-box label.inline input[type=checkbox] { flex: 0 0 auto; }
.inline-edit .add-box .edit-check { grid-column: 1 / -1; width: 100%; }
.inline-edit .add-box .edit-check label.inline {
  display: flex !important; align-items: center; gap: 7px;
  white-space: normal; margin: 0; width: 100%;
}

/* ---- ชิปสภาพหน้างานในฟอร์มเช็คอิน: กระชับขึ้น ----
   .chip-row เดิม gap 8px / margin 14px ออกแบบไว้สำหรับชิปไม่กี่อัน
   หน้านี้มีได้ถึง 30 อัน จึงลดระยะลงให้กวาดตาได้ในหน้าจอเดียว */
#condChips, .dyn-field .opt-group { gap:6px; margin:6px 0 2px; }

/* ---- ข้อความยินยอมลิขสิทธิ์ในฟอร์มโพสต์ ----
   label.inline ตั้ง white-space:nowrap ไว้ (บรรทัด 61) ข้อความยาวจึงดันล้นจอบนมือถือ
   กฎนี้อยู่ท้ายไฟล์เพื่อให้ชนะกฎทั่วไป */
label.inline.consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  white-space: normal;
  line-height: 1.55;
  margin-top: 16px;
  font-size: 13px;
}
label.inline.consent input[type=checkbox] { flex: 0 0 auto; margin-top: 2px; }
.is-hidden { display:none !important; }

/* ---- ดาวให้คะแนนในฟอร์มที่สร้างจาก config ----
   .stars เป็น flex เต็มความกว้าง ทำให้พื้นที่กดเลยกลุ่มดาวออกไปมาก */
.fld-rating .stars { width:max-content; }

/* ---- ฟอร์มเช็คอิน: แบ่ง 2 ส่วนให้เห็นชัด ---- */
.form-part {
  display:flex; align-items:center; gap:8px;
  margin:2px 0 12px; font-size:16px; font-weight:600; color:var(--green-d);
}
.form-part small { font-weight:400; font-size:13px; color:var(--faint); }
.part-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--green); color:#fff; font-size:13px; font-weight:600; flex:0 0 auto;
}
.review-expand > summary {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:16px; font-weight:600; color:var(--green-d);
  padding:12px 0; cursor:pointer; list-style:none;
}
.review-expand > summary::-webkit-details-marker { display:none; }
.review-expand > summary small { font-weight:400; font-size:13px; color:var(--faint); flex:1 1 100%; margin-left:32px; }
.review-expand > summary .part-num { background:var(--clay); }

/* ---- ปุ่มเช็คอินบนหัวหน้าสถานที่ ----
   ใช้ปุ่มเส้นขอบ ไม่ใช่ปุ่มทึบ เพื่อไม่ให้แย่งสายตาไปจากชื่อสถานที่ */
.head-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.head-actions form { margin:0; }
.head-actions .checkin-btn {
  white-space:nowrap;
  padding:7px 14px;
  font-size:13.5px;
  color:var(--green-d);
  border-color:var(--green);
  background:var(--surface);
}
.head-actions .checkin-btn:hover { background:var(--mint-l); border-color:var(--green-d); }
.head-actions .fav-btn { font-size:17px; padding:6px 10px; }
@media (max-width:560px) {
  .place-head { flex-wrap:wrap; }
  .head-actions { width:100%; margin-top:10px; }
  .head-actions .checkin-btn { flex:1; text-align:center; }
}

/* ปุ่มลอยมุมจอ — เลื่อนอ่านอยู่กลางหน้าก็กดเช็คอินได้ทันที */
.checkin-float {
  /* ปุ่มฉุกเฉิน (.em-fab) อยู่ right:16 bottom:80 กว้าง 54px — วางเหนือมันไม่ให้ทับ */
  position:fixed; right:16px; bottom:148px; z-index:40;
  display:inline-flex; align-items:center; gap:7px;
  padding:10px 16px; border-radius:30px;
  background:var(--green); color:#fff; font-weight:600; font-size:14px;
  box-shadow:0 4px 16px rgba(20,50,30,.22); text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s;
}
.checkin-float.show { opacity:1; visibility:visible; transform:none; }
.checkin-float:hover { background:var(--green-d); color:#fff; }
@media (max-width:560px) { .checkin-float { right:12px; bottom:142px; padding:11px 16px; font-size:14px; } }
.scope-note { margin:-4px 0 12px; font-size:13px; line-height:1.7; }

/* ติ๊กหมวดของช่องโพสต์ (🧩 คลังช่องข้อมูล → ✍️ ช่องของโพสต์ → ⚙️) */
.cat-picks { display:flex; flex-wrap:wrap; gap:6px 14px; margin:6px 0 4px; }
.cat-picks label.inline { margin:0; white-space:nowrap; }

/* ============ เรียงตามระยะทาง (หน้าแรก) ============ */
.near-toggle { display:flex; align-items:center; gap:7px; margin:-4px 0 10px; flex-wrap:wrap; }
.near-toggle .btn.is-on { background:var(--green-d); color:#fff; border-color:var(--green-d); }
.near-toggle .near-msg { flex:1 1 100%; font-size:12.5px; }
.km-text { color:var(--green-d); font-weight:600; white-space:nowrap; }

/* ชอร์ตโค้ดคัดลอกได้ (หน้าจัดการสถานที่) */
.sc-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px; }
.sc-code { font-size:12.5px; background:var(--bg); border:1px solid var(--border); border-radius:6px;
           padding:5px 9px; user-select:all; white-space:nowrap; }