/* กฎพื้นฐาน: 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;
/* --faint เดิม #9a9e94 ได้ contrast 2.56:1 บนพื้นเว็บ ต่ำกว่าเกณฑ์ขั้นต่ำ 4.5:1 มาก
อ่านไม่ออกกลางแดดบนมือถือ ซึ่งเป็นสภาพใช้งานจริงของเว็บสายแคมป์
#74786e ได้ 4.23:1 ยังจางกว่า --muted ชัดเจน ลำดับชั้นของข้อความยังอยู่ครบ */
--bg:#f7f8f4; --surface:#fff; --text:#232821; --muted:#6d7268; --faint:#74786e;
--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 */
/* align-items:start สำคัญมาก — ถ้าเป็น stretch ตัว .g-main จะถูกยืดความสูงก่อน
แล้ว aspect-ratio จะคำนวณความกว้างย้อนจากความสูงนั้น (สูง 319 x 1.6 = กว้าง 510)
ซึ่งกว้างเกินช่อง 2fr ของตัวเอง แล้วไปทับคอลัมน์ขวา */
.gallery-strip { display:grid; grid-template-columns:2fr 1fr; gap:6px; margin:14px 0; align-items:start; }
/* ช่องของ grid มีความกว้างขั้นต่ำเท่าเนื้อหาโดยปริยาย
รูปต้นฉบับกว้าง 1400px จึงดันคอลัมน์ซ้ายให้กว้างเกินสัดส่วน 2fr แล้วไปทับคอลัมน์ขวา
min-width:0 ปลดล็อกให้ย่อลงมาตามสัดส่วนได้จริง */
.gallery-strip > * { min-width:0; }
/* ใบใหญ่เป็นตัวกำหนดความสูงของทั้งแถว — ตั้ง aspect-ratio ที่กล่อง ไม่ใช่ที่ ![]()
ถ้าตั้งที่ img ความสูงแถวจะมาจากรูปจริง แล้วคอลัมน์ขวาจะดันแถวให้สูงเกินจนล้น */
.g-main { aspect-ratio:16/10; width:100%; min-height:0; overflow:hidden; border-radius:12px; }
/* ลิงก์ที่ครอบรูปไว้ (สำหรับกดขยาย) ต้องสูงเต็มกรอบด้วย
ไม่งั้น height:100% ของ ![]()
จะอ้างอิงกับ ที่สูงเท่าเนื้อหา แล้วรูปจะล้นออกนอกกรอบ */
.g-main > a { display:block; width:100%; height:100%; }
.g-main img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
/* ใบรองข้างรูปปก — จำนวนไม่แน่นอน (1–4 ใบ)
ทุกแถวใช้ minmax(0,1fr) เพื่อไม่ให้ขนาดรูปจริงไปกำหนดความสูง คอลัมน์นี้จึงสูงเท่าใบใหญ่พอดี */
/* กล่องครอบไม่มีความสูงของตัวเอง แถวจึงถูกกำหนดโดยใบใหญ่เท่านั้น
แล้ว .g-side วางทับเต็มกล่อง (absolute) ทำให้สูงเท่าใบใหญ่เป๊ะ ๆ */
.g-side-wrap { position:relative; min-width:0; align-self:stretch; }
.g-side { position:absolute; inset:0; display:grid; gap:6px; }
.g-side-1 { grid-template-rows:minmax(0,1fr); }
.g-side-2 { grid-template-rows:repeat(2,minmax(0,1fr)); }
.g-side-3, .g-side-4 {
grid-template-columns:repeat(2,minmax(0,1fr));
grid-template-rows:repeat(2,minmax(0,1fr));
}
/* มี 3 ใบ ให้ใบสุดท้ายกินเต็มแถวล่าง ไม่ทิ้งช่องว่างข้าง ๆ */
.g-side-3 > :last-child { grid-column:1 / -1; }
.g-side a { display:block; min-width:0; min-height:0; overflow:hidden; border-radius:12px; }
.g-side img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.gallery-link { margin:-6px 0 14px; font-size:14px; }
.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 */
/* เมนูหลังบ้าน — ดูส่วน "เมนูหลังบ้านแบบแถบซ้าย" ท้ายไฟล์ */
.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 */
/* ดาวต้องกดง่ายบนมือถือ — เป้ากดกว้าง 48px ตามขนาดนิ้วมาตรฐาน
ตัวอักษร ★ เองไม่มีพื้นที่กดรอบตัว ต้องขยายที่ label ไม่ใช่แค่ font-size */
.stars { display:flex; flex-direction:row-reverse; justify-content:flex-end; font-size:40px; margin:2px 0 4px; }
.stars label {
margin:0; cursor:pointer; line-height:1;
min-width:48px; min-height:48px;
display:flex; align-items:center; justify-content:center;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation; /* กันซูมเมื่อกดถี่ ๆ บน iOS */
}
.stars label:active span { transform:scale(.88); }
.stars input { display:none; }
.stars span { color:#d8d5c8; transition:color .12s, transform .12s; }
.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-main { aspect-ratio:4/3; }
/* auto-fit ยุบช่องที่ไม่มีรูป แล้วยืดที่เหลือให้เต็มแถว
ไม่งั้นมีรูป 3 ใบจะเหลือช่องว่างค้างทางขวา */
/* มือถือเรียงลงล่าง ไม่ต้องวางทับแล้ว */
.g-side { position:static; }
.g-side, .g-side-1, .g-side-2, .g-side-3, .g-side-4 {
grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); grid-template-rows:none;
grid-auto-rows:auto; height:auto;
}
.g-side-3 > :last-child { grid-column:auto; }
.g-side a { aspect-ratio:1; }
/* 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; }
/* ปุ่มลอย */
/* ปุ่มลอยทั้งหมดใช้ทรงเดียวกัน (ดู .fab ท้ายไฟล์) ต่างกันแค่สีตามความหมาย */
.fab-em:hover { background:#c0392b; }
/* 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); }
}
/* ---- สิ่งอำนวยความสะดวก (ปุ่มเขียวมีเครื่องหมายถูก) ---- */
.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 { opacity:0; visibility:hidden; transform:translateY(8px); transition:.22s; }
.checkin-float.show { opacity:1; visibility:visible; transform:none; }
.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; }
/* เครดิตผู้เพิ่ม/ผู้ร่วมแก้ไข (หน้าสถานที่)
ตั้งใจให้เด่นกว่าข้อความบรรทัดเดียว เพราะเว็บอยู่ได้ด้วยคนที่ยอมเสียเวลากรอกข้อมูลให้ */
.credit-box { border-top:1px solid var(--border); margin:22px 0 0; padding:16px 0 0; }
.contrib-head { margin:0 0 8px; font-size:13px; color:var(--faint); }
.contrib-card {
display:flex; align-items:center; gap:13px;
background:linear-gradient(135deg, var(--mint-l), var(--surface) 70%);
border:1px solid var(--border); border-radius:14px;
padding:13px 15px; margin:0 0 10px; transition:.15s;
}
.contrib-card:hover { border-color:var(--green); box-shadow:var(--shadow-h); }
.contrib-avatar {
width:56px; height:56px; flex:0 0 auto; border-radius:50%; object-fit:cover;
border:2px solid #fff; box-shadow:0 2px 8px rgba(20,50,30,.14);
}
.contrib-info { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.contrib-info strong { color:var(--text); font-size:15.5px; line-height:1.3; }
.contrib-level { font-size:12.5px; color:var(--green-d); font-weight:600; }
.contrib-stats { font-size:12.5px; color:var(--muted); }
.contrib-go { flex:0 0 auto; font-size:13px; color:var(--green-d); font-weight:600; white-space:nowrap; }
.credit-line { margin:0 0 6px; font-size:14px; color:var(--muted); }
.credit-line a { font-weight:600; }
@media (max-width:480px) {
.contrib-go { display:none; } /* จอแคบ ทั้งการ์ดกดได้อยู่แล้ว ไม่ต้องมีคำว่าดูโปรไฟล์ */
.contrib-avatar { width:48px; height:48px; }
}
.credit-more { margin:0 0 6px; }
.credit-more summary { cursor:pointer; font-size:13.5px; color:var(--green-d); width:fit-content; }
.credit-more ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px; }
.credit-more li { font-size:13.5px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
/* แจ้งเจ้าของโปรไฟล์ว่ามีโพสต์ค้างอยู่ */
.pending-note { margin:2px 0 6px; font-size:13.5px; color:var(--clay); }
.pending-note a { color:inherit; font-weight:600; text-decoration:underline; }
/* เตือนเมื่อเปิดในเบราว์เซอร์ฝังของแอป (หน้าเข้าสู่ระบบ) */
.box-warn { border-color:#eec98a; background:#fdf6e8; }
.inapp-warn { text-align:left; margin-bottom:16px; }
.inapp-warn p { margin:8px 0; }
.btn-muted { opacity:.55; }
/* ฟอร์มเข้าสู่ระบบ / สมัครสมาชิก */
.auth-or { display:flex; align-items:center; gap:12px; margin:18px 0; color:var(--faint); font-size:13px; }
.auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-form { text-align:left; margin:0 0 10px; }
.auth-form label { display:block; margin:10px 0 4px; font-size:14px; font-weight:600; }
.auth-form input { width:100%; }
.auth-form .btn { width:100%; margin-top:14px; }
/* ช่องติ๊กกับปุ่มตัวเลือกต้องไม่โดน width:100% ของช่องกรอก
ไม่งั้นตัวติ๊กจะยืดเต็มบรรทัดแล้วดันข้อความไปชิดขอบขวา */
.auth-form input[type="checkbox"],
.auth-form input[type="radio"] { width:auto; flex:0 0 auto; margin:0; }
/* ข้อความยินยอมยาวหลายบรรทัด ต้องให้ตัวติ๊กอยู่บรรทัดแรกเสมอ */
.auth-form label.inline {
display:flex; align-items:flex-start; gap:9px;
margin:14px 0 4px; font-weight:400; line-height:1.55; white-space:normal;
}
/* ค้นหาสถานที่ตอนเช็คอินแล้วไม่เจอ — ต้องเด่นพอให้คนไม่เลิกกลางคัน */
.ac-empty { background:var(--clay-l); border:1px solid #f0c4b1; border-radius:0 0 var(--radius) var(--radius);
padding:14px 15px; }
.ac-empty strong { display:block; font-size:15px; margin-bottom:5px; }
.ac-empty p { margin:0 0 10px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.ac-empty .btn { width:100%; text-align:center; }
.ac-empty .fine-print { margin:9px 0 0; }
.ac-foot { background:var(--bg); border:1px solid var(--border); border-top:0; padding:8px 13px; font-size:13px; color:var(--muted); }
/* ฟีดเช็คอินล่าสุด (หน้าแรก) */
.checkin-feed { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.ci-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.15s; }
.ci-card:hover { box-shadow:var(--shadow-h); border-color:var(--border-s); }
.ci-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.ci-nopic { display:flex; align-items:center; justify-content:center; aspect-ratio:4/3;
background:var(--bg); font-size:26px; opacity:.4; }
.ci-body { padding:9px 11px 11px; display:flex; flex-direction:column; gap:2px; }
.ci-body strong { font-size:14.5px; line-height:1.35; color:var(--text); }
.ci-body small { color:var(--muted); font-size:12.5px; }
.ci-conds { display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 2px; }
.ci-conds .cond { background:var(--mint-l); color:var(--green-d); }
.ci-by { margin-top:2px; font-size:12px !important; color:var(--faint) !important; }
/* บนหน้าสถานที่ใช้สองคอลัมน์ เพราะคอลัมน์เนื้อหาแคบกว่าหน้าแรก
สามคอลัมน์จะทำให้การ์ดเล็กจนอ่านชื่อคนโพสต์ไม่ออก */
.checkin-feed-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ci-excerpt { color:var(--muted) !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:760px) { .checkin-feed { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:380px) { .checkin-feed, .checkin-feed-2 { grid-template-columns:1fr; } }
@media (max-width:420px) { .ci-body strong { font-size:13.5px; } }
/* ปุ่มเข้าสู่ระบบบนแถบหัว — ของเดิมยาวจนตกบรรทัดและดันโลโก้แคบบนมือถือ
ไม่ต้องบอกว่า Google ตรงนี้ เพราะหน้า /login มีทั้งปุ่ม Google และอีเมลให้เลือกอยู่แล้ว */
.btn-login { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:7px 13px; font-size:14px; }
@media (max-width:520px) {
/* จอแคบเหลือแค่ไอคอน แต่ยังกดง่ายเพราะบังคับความกว้างขั้นต่ำไว้ */
.btn-login-txt { display:none; }
.btn-login { min-width:42px; justify-content:center; padding:7px 10px; font-size:17px; }
}
/* ไอคอนแชร์ในคำแนะนำติดตั้งบน iOS */
.pwa-share { display:inline-block; color:#0a84ff; font-weight:700; padding:0 1px; }
/* เลือกรูปปกตอนเพิ่มสถานที่ */
.cover-pick { margin:9px 0 2px; }
.cover-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; margin-top:6px; }
.cover-cell { position:relative; padding:0; border:2px solid var(--border); border-radius:10px; overflow:hidden;
background:none; cursor:pointer; aspect-ratio:1; }
.cover-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.cover-cell .cover-tag { position:absolute; left:5px; top:5px; background:var(--clay); color:#fff;
font-size:11px; font-weight:600; padding:2px 8px; border-radius:10px; display:none; }
.cover-cell.is-cover { border-color:var(--clay); }
.cover-cell.is-cover .cover-tag { display:block; }
/* กล่องรูปที่ใช้อยู่ในหน้าแก้ไข ไม่ใช่ปุ่ม จึงไม่ต้องมี cursor */
span.cover-cell { cursor:default; display:block; }
/* ============ ปุ่มลอยมุมจอ ============
ทุกปุ่มใช้ทรงเดียวกันหมด — วงกลมขนาดเท่ากัน เงาแบบเดียวกัน เรียงชิดขวาระยะห่างเท่ากัน
ต่างกันแค่สี เพราะสีคือสิ่งที่บอกความหมาย เขียว = ทำเรื่องปกติ แดง = เรื่องด่วน */
.fab {
position:fixed; right:16px; z-index:250;
width:54px; height:54px; border-radius:50%; border:0; padding:0;
display:flex; align-items:center; justify-content:center;
font-size:24px; line-height:1; cursor:pointer; font-family:inherit;
color:#fff; text-decoration:none; transition:.15s;
}
.fab:hover { transform:scale(1.05); color:#fff; }
.fab:active { transform:scale(.96); }
/* ล่างสุด = แจ้งเหตุ (นิ้วโป้งถึงง่ายที่สุดตอนฉุกเฉิน) ถัดขึ้นไป = เช็คอิน */
.fab-em { bottom:80px; background:#d9534f; box-shadow:0 4px 16px rgba(217,83,79,.45); }
.fab-checkin { bottom:146px; background:var(--green); box-shadow:0 4px 16px rgba(29,158,117,.42); }
.fab-checkin:hover { background:var(--green-d); }
@media (max-width:640px) {
.fab { right:13px; width:50px; height:50px; font-size:22px; }
.fab-em { bottom:70px; }
.fab-checkin { bottom:132px; }
}
/* ตัวดูรูปเต็มจอ */
.lb {
position:fixed; inset:0; z-index:900;
background:rgba(10,14,11,.97); /* ทึบพอให้เนื้อหาข้างหลังไม่รบกวนสายตา */
display:flex; align-items:center; justify-content:center;
opacity:0; transition:opacity .18s;
padding:56px 12px;
}
.lb.show { opacity:1; }
.lb-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lb-close {
position:absolute; top:12px; right:12px; z-index:2;
width:44px; height:44px; border:0; border-radius:50%;
background:rgba(255,255,255,.16); color:#fff; font-size:20px; cursor:pointer;
display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.lb-close:hover { background:rgba(255,255,255,.3); }
.lb-nav {
position:absolute; top:50%; transform:translateY(-50%); z-index:2;
width:46px; height:46px; border:0; border-radius:50%;
background:rgba(255,255,255,.14); color:#fff; font-size:30px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.lb-nav:hover { background:rgba(255,255,255,.28); }
.lb-prev { left:10px; }
.lb-next { right:10px; }
.lb-count {
position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
color:rgba(255,255,255,.8); font-size:13px;
}
/* รูปที่กดขยายได้ ให้รู้ว่ากดได้ */
[data-lightbox] { display:block; cursor:zoom-in; }
@media (max-width:560px) {
.lb { padding:52px 6px; }
.lb-nav { width:40px; height:40px; font-size:26px; background:rgba(255,255,255,.2); }
}
/* ผู้ให้บริการในพื้นที่ (ไกด์ / เรือ / รถรับส่ง) */
.svc-list { display:grid; gap:9px; margin:0 0 10px; }
/* ชื่ออยู่ซ้าย ปุ่มโทรอยู่ขวาบรรทัดเดียวกัน — สายตากวาดทีเดียวเห็นครบว่าใครและเบอร์อะไร */
.svc-item { display:flex; align-items:center; justify-content:space-between; gap:12px;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:11px 14px; flex-wrap:wrap; }
.svc-info { display:grid; gap:2px; min-width:0; flex:1; }
.svc-role { font-size:11.5px; font-weight:600; color:var(--green-d); }
.svc-item strong { font-size:15px; color:var(--text); }
.svc-item small { color:var(--muted); font-size:13px; }
.svc-call { flex:0 0 auto; white-space:nowrap; }
@media (max-width:380px) {
/* จอแคบมาก เบอร์กับชื่อเบียดกันจนอ่านยาก ยอมให้ปุ่มลงบรรทัดใหม่เต็มความกว้าง */
.svc-call { flex:1 1 100%; text-align:center; }
}
/* แถวเปรียบเทียบรูปในคิวคำขอแก้ไข */
.diff-photos { padding:9px 0; border-top:1px dashed var(--border); }
.dp-set { margin:7px 0 0; }
.dp-set small { display:block; color:var(--muted); font-size:12.5px; margin-bottom:4px; }
.dp-row { display:flex; gap:6px; flex-wrap:wrap; }
.dp-row img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:2px solid transparent; display:block; }
.dp-row .dp-cover img { border-color:var(--clay); }
/* ============ หน้าชวนติดตั้งแอป (/install) ============ */
.install-page { max-width:520px; margin:0 auto; }
.ins-hero { text-align:center; padding:22px 0 6px; }
.ins-icon { border-radius:22px; box-shadow:0 6px 22px rgba(20,50,30,.18); }
.ins-hero h1 { margin:14px 0 4px; font-size:1.5rem; }
.ins-tag { margin:0 0 8px; color:var(--muted); font-size:14.5px; line-height:1.55; }
.ins-meta { margin:0; color:var(--faint); font-size:12.5px; }
.ins-box { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:18px; margin:18px 0; text-align:center; box-shadow:var(--shadow); }
.ins-ready { margin:0 0 12px; font-weight:600; color:var(--green-d); }
.ins-cta { width:100%; font-size:16px; padding:14px; }
/* ขั้นตอนสำหรับเครื่องที่กดติดตั้งอัตโนมัติไม่ได้ */
.ins-steps { text-align:left; margin:0; padding-left:22px; display:grid; gap:9px; }
.ins-steps li { line-height:1.6; }
.ins-ic { display:inline-block; color:#0a84ff; font-weight:700; padding:0 2px; }
.ins-perks { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.ins-perks li { display:flex; gap:12px; align-items:flex-start; }
.ins-perks li span { font-size:22px; flex:0 0 auto; line-height:1.3; }
.ins-perks strong { display:block; color:var(--text); }
.ins-perks div { font-size:14px; color:var(--muted); line-height:1.55; }
.ins-share { text-align:center; margin:22px 0 8px; }
/* กล่องเตือนสถานที่ซ้ำ (หน้าเพิ่มสถานที่) */
.dup-box { background:#fdf6e8; border:1px solid #eec98a; border-radius:var(--radius);
padding:13px 15px; margin:14px 0; }
.dup-box strong { display:block; margin-bottom:5px; }
.dup-box p { margin:0 0 9px; font-size:13.5px; color:var(--muted); line-height:1.6; }
.dup-list { list-style:none; margin:0 0 11px; padding:0; display:grid; gap:7px; }
.dup-list li { display:flex; flex-direction:column; gap:1px; }
.dup-list a { font-weight:600; }
.dup-list small { color:var(--muted); font-size:12.5px; }
/* ============ กล่องข้อความประชาสัมพันธ์ (หน้าสถานที่) ============ */
.share-sec { margin:26px 0 0; }
.share-tabs { display:flex; gap:7px; margin:0 0 9px; }
.share-tabs .btn.is-on { background:var(--green-d); color:#fff; border-color:var(--green-d); }
.share-text {
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
padding:14px 16px; margin:0 0 11px; white-space:pre-wrap; word-break:break-word;
font-family:inherit; font-size:14px; line-height:1.75; color:var(--text);
max-height:340px; overflow:auto; user-select:all;
}
.share-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 6px; }
.share-actions .btn { flex:1 1 auto; }
@media (max-width:480px) { .share-actions .btn { flex:1 1 100%; } }
/* ============ คอลเลกชันสถานที่ ============ */
.col-page h1 { margin-bottom:6px; }
.col-desc { color:var(--muted); margin:0 0 14px; line-height:1.65; }
.col-author { display:flex; align-items:center; gap:12px; flex-wrap:wrap;
background:linear-gradient(135deg,var(--mint-l),var(--surface) 70%);
border:1px solid var(--border); border-radius:14px; padding:12px 15px; margin:0 0 16px; }
.col-author-main { display:flex; align-items:center; gap:11px; flex:1; min-width:0; }
.col-author img { width:46px; height:46px; border-radius:50%; object-fit:cover;
border:2px solid #fff; box-shadow:0 2px 8px rgba(20,50,30,.14); }
.col-author strong { display:block; color:var(--text); }
.col-author small { color:var(--muted); font-size:12.5px; }
.col-links { display:flex; gap:6px; flex-wrap:wrap; }
.col-owner-bar { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.col-list { list-style:none; margin:0 0 20px; padding:0; display:grid; gap:11px; counter-reset:col; }
.col-item { display:flex; gap:11px; align-items:stretch; }
.col-num { flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--green-d); color:#fff;
display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px; margin-top:4px; }
.col-card { flex:1; display:flex; gap:12px; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.15s; min-width:0; }
.col-card:hover { box-shadow:var(--shadow-h); border-color:var(--border-s); }
.col-card img { width:104px; flex:0 0 auto; object-fit:cover; align-self:stretch; }
.col-noimg { width:104px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
background:var(--bg); font-size:26px; opacity:.45; }
.col-body { padding:10px 13px 11px; display:flex; flex-direction:column; gap:2px; min-width:0; }
.col-body strong { color:var(--text); font-size:15px; line-height:1.35; }
.col-body small { color:var(--muted); font-size:12.5px; }
.col-note { color:var(--green-d) !important; margin-top:3px; }
/* คอลเลกชันของฉัน */
.col-mine { display:grid; gap:9px; margin:14px 0; }
.col-mine-item { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:11px 14px; }
.col-mine-info strong { display:block; }
.col-mine-info small { color:var(--muted); font-size:12.5px; }
.col-mine-acts { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.col-live { color:var(--green-d); font-weight:600; }
.col-hidden { color:#a12222; font-weight:600; }
/* หน้าแก้ไข */
.col-search { position:relative; margin-bottom:4px; }
.col-search input { width:100%; }
.col-edit-list { display:grid; gap:9px; margin:12px 0; }
.col-edit-item { display:flex; gap:10px; align-items:flex-start; background:var(--surface);
border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
.col-order { width:58px; flex:0 0 auto; }
.col-edit-main { flex:1; min-width:0; display:grid; gap:3px; }
.col-edit-main strong { font-size:14.5px; }
.col-edit-main small { color:var(--muted); font-size:12.5px; }
.col-edit-main input { width:100%; font-size:13.5px; }
.ac-none { color:var(--muted); cursor:default; }
/* ปุ่มเพิ่มเข้าคอลเลกชันในหน้าสถานที่ */
.col-add { margin:24px 0 0; }
.col-add-form { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 4px; }
.col-add-form select { flex:1; min-width:180px; }
/* ============ ตลาดมือสอง ============ */
.mk-warn { margin:0 0 14px; }
.mk-actions { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.mk-filter { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 16px; }
.mk-filter input[type="search"] { flex:1 1 180px; }
.mk-filter select { flex:0 1 auto; }
.mk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.mk-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.15s; }
.mk-card:hover { box-shadow:var(--shadow-h); border-color:var(--border-s); }
.mk-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.mk-noimg { display:flex; align-items:center; justify-content:center; aspect-ratio:1;
background:var(--bg); font-size:30px; opacity:.4; }
.mk-noimg.sm { width:64px; aspect-ratio:1; font-size:22px; border-radius:8px; flex:0 0 auto; }
.mk-body { padding:9px 11px 11px; display:flex; flex-direction:column; gap:2px; }
.mk-body strong { font-size:14px; line-height:1.35; color:var(--text); }
.mk-price { font-weight:700; color:var(--clay-d); font-size:15px; }
.mk-body small { color:var(--muted); font-size:12px; }
.mk-meta { color:var(--faint) !important; }
/* หน้าประกาศ */
.mk-price-big { font-size:1.5rem; font-weight:700; color:var(--clay-d); margin:0 0 12px; }
.mk-photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin:0 0 16px; }
.mk-photos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }
.mk-spec { width:100%; border-collapse:collapse; margin:0 0 14px; }
.mk-spec th { text-align:left; padding:8px 0; color:var(--muted); font-weight:500; width:110px; font-size:14px; }
.mk-spec td { padding:8px 0; border-bottom:1px solid var(--border); font-size:14px; }
.mk-desc { white-space:pre-wrap; line-height:1.75; margin:0 0 18px; }
.mk-contact { background:var(--mint-l); border-radius:var(--radius); padding:12px 15px; margin:0 0 6px; }
.mk-contact p { margin:4px 0; }
.mk-report { margin:18px 0 0; }
.mk-report summary { cursor:pointer; color:var(--muted); font-size:13.5px; }
.mk-report form { margin-top:9px; }
/* ประกาศของฉัน */
.mk-mine { display:grid; gap:9px; margin:12px 0; }
.mk-mine-item { display:flex; gap:11px; align-items:center; flex-wrap:wrap;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:10px 12px; }
.mk-mine-item img { width:64px; height:64px; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.mk-mine-info { flex:1; min-width:140px; }
.mk-mine-info strong { display:block; }
.mk-mine-info small { color:var(--muted); font-size:12.5px; }
.mk-mine-acts { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
/* จำนวนรูปที่เลือก + รูปย่อในฟอร์มลงขาย */
.mk-count { margin:6px 0 0; font-size:13.5px; font-weight:600; }
.mk-count.ok { color:var(--green-d); }
.mk-count.bad { color:#a12222; }
.mk-preview { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 0; }
.mk-preview img { width:64px; height:64px; object-fit:cover; border-radius:8px;
border:1px solid var(--border); display:block; }
/* จัดการรูปในหน้าแก้ไขประกาศ */
.mk-edit-photos { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 4px; }
.mk-edit-photo { display:block; text-align:center; margin:0; font-weight:400; }
.mk-edit-photo img { width:76px; height:76px; object-fit:cover; border-radius:8px;
border:1px solid var(--border); display:block; }
.mk-edit-photo span { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
.mk-edit-photo input { width:auto; margin-right:3px; }
/* ============ แอปในเครือ ============ */
.sister-links { font-size:13px; }
.sister-links a { margin:0 6px; }
.sister-sec { margin:28px 0 0; }
.sister-grid { display:grid; gap:10px; }
.sister-card { display:flex; align-items:center; gap:13px; background:var(--surface);
border:1px solid var(--border); border-radius:var(--radius);
padding:13px 15px; box-shadow:var(--shadow); transition:.15s; }
.sister-card:hover { box-shadow:var(--shadow-h); border-color:var(--border-s); }
.sister-ic { font-size:28px; flex:0 0 auto; }
.sister-txt { flex:1; min-width:0; display:grid; gap:2px; }
.sister-txt strong { color:var(--text); font-size:15.5px; }
.sister-txt small { color:var(--muted); font-size:13px; line-height:1.55; }
.sister-go { flex:0 0 auto; color:var(--green-d); font-size:18px; }
/* ============ ปุ่มแคปซูล สิ่งอำนวยความสะดวก ============ */
.tool-pills { display:flex; flex-wrap:wrap; gap:9px; }
.tool-pill {
display:inline-flex; align-items:center; gap:7px;
background:var(--surface); border:1.5px solid var(--border);
border-radius:999px; padding:10px 18px;
font-size:15px; font-weight:600; color:var(--text);
box-shadow:var(--shadow); transition:.15s; white-space:nowrap;
}
.tool-pill:hover { border-color:var(--green); background:var(--mint-l);
color:var(--green-d); transform:translateY(-1px); }
.tool-pill:active { transform:scale(.97); }
.tool-pill .tool-ic { font-size:19px; line-height:1; }
.tool-pill .tool-ext { color:var(--faint); font-size:11px; font-weight:400; }
@media (max-width:420px) {
/* จอแคบ ยืดเต็มความกว้างทีละปุ่ม เป้ากดใหญ่ขึ้นและอ่านง่าย */
.tool-pills { flex-direction:column; }
.tool-pill { justify-content:center; padding:12px 18px; }
}
/* รูปย่อในตัวเลือกรูปแบบสะสม — มีปุ่มกากบาทเอาออกทีละรูป */
.pp-item { position:relative; display:inline-block; }
.pp-item img { width:72px; height:72px; object-fit:cover; border-radius:8px;
border:1px solid var(--border); display:block; }
.pp-del { position:absolute; top:-6px; right:-6px; width:22px; height:22px; padding:0;
border:0; border-radius:50%; background:#a12222; color:#fff;
font-size:12px; line-height:1; cursor:pointer; font-family:inherit;
display:flex; align-items:center; justify-content:center;
box-shadow:0 1px 4px rgba(0,0,0,.3); }
.pp-del:hover { background:#7d1a1a; }
/* ช่องค้นหาตลาดพร้อมคำแนะนำ */
.mk-search { position:relative; flex:1 1 180px; display:block; }
.mk-search input { width:100%; }
.mk-search .autocomplete { position:absolute; left:0; right:0; top:100%; z-index:60;
border-radius:0 0 var(--radius) var(--radius); overflow:hidden;
box-shadow:0 6px 20px rgba(20,50,30,.14); }
.mk-ac { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mk-ac img { width:42px; height:42px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.mk-ac-noimg { width:42px; height:42px; display:flex; align-items:center; justify-content:center;
background:var(--bg); border-radius:6px; font-size:18px; flex:0 0 auto; }
.mk-ac-txt { display:grid; gap:1px; min-width:0; }
.mk-ac-txt strong { font-size:14px; color:var(--text); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.mk-ac-txt small { font-size:12.5px; color:var(--clay-d); font-weight:600; }
.ac-more { color:var(--muted); font-size:12.5px; cursor:default; text-align:center; }
/* รวมประกาศไปโพสต์ (หลังบ้าน) */
.dg-opts { display:flex; flex-wrap:wrap; gap:14px; margin:8px 0 4px; }
.dg-opts label { font-weight:400; margin:0; }
.dg-opts input { width:auto; margin-right:5px; }
.dg-head { display:flex; align-items:center; justify-content:space-between;
gap:12px; flex-wrap:wrap; margin:16px 0 8px; }
.dg-head label { font-weight:600; margin:0; }
.dg-head input { width:auto; margin-right:6px; }
.dg-list { display:grid; gap:6px; max-height:340px; overflow:auto;
border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
.dg-item { display:flex; align-items:flex-start; gap:10px; margin:0; font-weight:400; cursor:pointer; }
.dg-item input { width:auto; margin-top:4px; flex:0 0 auto; }
.dg-txt strong { display:block; font-size:14.5px; }
.dg-txt small { color:var(--muted); font-size:12.5px; }
.dg-text { width:100%; font-family:inherit; font-size:13.5px; line-height:1.7;
white-space:pre; margin:8px 0 10px; }
.dg-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* ============ ช่องค้นหาหน้าแรก ============ */
.home-search { display:flex; gap:8px; margin:0 0 16px; }
.home-search-box { position:relative; flex:1; display:block; min-width:0; }
.home-search-box input { width:100%; font-size:15.5px; padding:13px 16px;
border-radius:999px; border:1.5px solid var(--border-s); }
.home-search-box input:focus { border-color:var(--green); outline:none;
box-shadow:0 0 0 3px rgba(29,158,117,.15); }
.home-search .btn { border-radius:999px; padding:0 22px; flex:0 0 auto; }
.home-search-box .autocomplete { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:60;
border-radius:var(--radius); overflow:hidden;
box-shadow:0 8px 24px rgba(20,50,30,.16); }
.hs-item { display:flex; align-items:center; gap:10px; text-decoration:none; }
.hs-item img { width:42px; height:42px; object-fit:cover; border-radius:6px; flex:0 0 auto; }
.hs-noimg { width:42px; height:42px; display:flex; align-items:center; justify-content:center;
background:var(--bg); border-radius:6px; font-size:18px; flex:0 0 auto; }
.hs-txt { display:grid; gap:1px; min-width:0; text-align:left; }
.hs-txt strong { font-size:14.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hs-txt small { font-size:12.5px; color:var(--muted); }
@media (max-width:420px) {
.home-search .btn { padding:0 16px; }
.home-search-box input { font-size:15px; padding:12px 14px; }
}
/* รวมสถานที่ซ้ำ (หลังบ้าน) */
.mg-pick { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin:10px 0 4px; }
.mg-pick label { display:grid; gap:4px; font-size:13.5px; margin:0; }
.mg-pick input { width:160px; }
.mg-pair { display:flex; align-items:stretch; gap:10px; flex-wrap:wrap; margin:14px 0; }
.mg-card { flex:1 1 220px; background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); padding:11px 14px; display:grid; gap:2px; }
.mg-card small { color:var(--muted); font-size:12px; }
.mg-card strong { font-size:15px; }
.mg-card span { color:var(--muted); font-size:12.5px; }
.mg-empty { color:var(--faint); font-style:italic; }
.mg-arrow { align-self:center; font-size:22px; color:var(--green-d); }
.mg-list { margin:8px 0 12px; padding-left:20px; line-height:1.8; }
.mg-history { display:grid; gap:7px; }
.mg-row { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:9px 13px; }
.mg-row small { display:block; color:var(--muted); font-size:12px; }
.mg-undone { opacity:.55; }
/* คำอธิบายฟีเจอร์คอลเลกชัน (พับได้) */
.col-explain { background:var(--mint-l); border-radius:var(--radius); padding:10px 14px; margin:8px 0 12px; }
.col-explain summary { cursor:pointer; font-weight:600; color:var(--green-d); font-size:14px; }
.col-explain ul { margin:9px 0 6px; padding-left:20px; display:grid; gap:6px; }
.col-explain li { font-size:13.5px; line-height:1.65; color:var(--text); }
.col-explain code { background:#fff; padding:1px 6px; border-radius:5px; font-size:12.5px; }
.col-explain-steps { margin:6px 0 2px; font-size:13.5px; }
.col-draft-note { color:#8a5a00; background:#fdf6e8; border-radius:8px; padding:7px 11px; }
/* ดูแลคอลเลกชัน (หลังบ้าน) */
.adc-list { display:grid; gap:8px; margin:12px 0; }
.adc-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0; }
.adc-main { flex:1; min-width:220px; display:grid; gap:3px; }
.adc-main small { color:var(--muted); font-size:12.5px; }
.adc-st { justify-self:start; font-size:11.5px; font-weight:600; padding:2px 9px; border-radius:999px; }
.adc-st-published { background:var(--mint-l); color:var(--green-d); }
.adc-st-draft { background:var(--bg); color:var(--muted); }
.adc-st-hidden { background:#fbe9e9; color:#a12222; }
.adc-act { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:0; }
.adc-act select, .adc-act input { font-size:13px; }
.adc-act input[type="text"] { width:190px; }
/* ============ ยืนยันตัวตน ============ */
.badge-verified { background:#e3f1fb; color:#155a8a; font-weight:500; }
.vf-intro { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 18px; margin:10px 0 18px; }
.vf-steps { margin:8px 0 8px 20px; padding:0; line-height:1.9; }
.vf-code-box { text-align:center; background:var(--mint-l); border:2px dashed var(--green); border-radius:16px; padding:18px 16px; margin:12px 0 18px; }
.vf-code-label { font-size:13px; color:var(--green-d); }
.vf-code { font:700 34px/1.2 ui-monospace,Menlo,Consolas,monospace; letter-spacing:3px; color:var(--green-dd); margin:4px 0 10px; user-select:all; }
.vf-msg { width:100%; max-width:420px; text-align:center; font-size:15px; border-radius:10px; resize:none; }
.vf-btns { justify-content:center; }
.vf-summary dl, .vf-dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:8px 0; font-size:14px; }
.vf-summary dt, .vf-dl dt { color:var(--muted); }
.vf-summary dd, .vf-dl dd { margin:0; overflow-wrap:anywhere; }
.vf-edit { margin:10px 0; }
.vf-edit > summary { list-style:none; display:inline-flex; }
.vf-edit > summary::-webkit-details-marker { display:none; }
.vf-form h3 { margin:22px 0 2px; font-size:16px; }
.vf-form textarea { width:100%; }
.vf-consent { background:#f4f2ec; border-radius:12px; padding:10px 14px; margin-top:18px; font-size:13.5px; }
.vf-consent ul { margin:4px 0 8px 18px; padding:0; line-height:1.7; }
.vf-delete { margin:22px 0 0; text-align:right; }
.vf-search { display:flex; gap:8px; margin:12px 0; }
.vf-search input { flex:1; min-width:0; font-size:16px; }
.vf-card-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:4px; }
.vf-code-sm { font:700 17px ui-monospace,Menlo,Consolas,monospace; letter-spacing:1px; }
.vf-st { font-size:12px; border-radius:10px; padding:2px 10px; }
.vf-st-pending { background:#fdf3e0; color:var(--amber-d); }
.vf-st-verified { background:#e3f1fb; color:#155a8a; }
.vf-st-rejected { background:var(--clay-l); color:var(--clay-d); }
.vf-stale { font-size:12px; color:var(--clay-d); }
.vf-fb-url { display:block; font-size:12px; color:var(--faint); margin-top:3px; }
.vf-private { background:#fff8e6; border:1px solid #f0d58a; border-radius:10px; padding:10px 14px; margin:8px 0; font-size:14px; }
.vf-acts { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; margin-top:8px; }
.vf-reject > summary { list-style:none; display:inline-flex; }
.vf-reject > summary::-webkit-details-marker { display:none; }
.vf-reject[open] { flex-basis:100%; }
.vf-reject form { margin-top:8px; display:grid; gap:6px; }
.vf-reject label.inline { display:flex; gap:6px; align-items:flex-start; font-size:13.5px; font-weight:400; }
.vf-reject input[type="text"] { width:100%; }
.vf-howto ol { margin:8px 0 6px 20px; padding:0; line-height:1.8; }
.vf-settings { max-width:560px; }
/* ============ ทริปส่วนกลาง ============ */
.trip-st { display:inline-block; font-size:12px; border-radius:10px; padding:2px 10px; background:#f4f2ec; color:var(--muted); font-weight:500; vertical-align:2px; }
.trip-st-open { background:var(--mint-l); color:var(--green-d); }
.trip-st-full { background:#fdf3e0; color:var(--amber-d); }
.trip-st-draft { background:#eceaf6; color:#4b3f8f; }
.trip-st-cancelled { background:var(--clay-l); color:var(--clay-d); }
.trip-st-started { background:var(--blue-l); color:var(--blue-d); }
.badge-official { background:var(--green-d); color:#fff; }
.badge-beginner { background:var(--leaf-l); color:#3b6d11; }
/* การ์ดทริป */
.trip-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; margin:10px 0 18px; }
.trip-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; color:var(--text); box-shadow:var(--shadow); transition:.15s; }
.trip-card:hover { box-shadow:var(--shadow-h); transform:translateY(-1px); }
.tc-img { aspect-ratio:16/9; background:var(--mint-l); display:flex; align-items:center; justify-content:center; font-size:40px; overflow:hidden; }
.tc-img img { width:100%; height:100%; object-fit:cover; }
.tc-body { display:flex; flex-direction:column; gap:4px; padding:10px 13px 13px; font-size:13.5px; }
.tc-body strong { font-size:15.5px; line-height:1.35; }
.tc-date { color:var(--green-d); font-weight:500; }
.tc-tags { display:flex; flex-wrap:wrap; gap:5px; }
.tc-comm { color:#3b6d11; font-size:12.5px; }
.trip-cards-past .trip-card { opacity:.85; }
.trip-filter { display:flex; gap:8px; margin:10px 0; }
.trip-std-list, .trip-std ul { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:8px; }
.trip-std-list li, .trip-std li { display:flex; gap:10px; align-items:flex-start; font-size:13.5px; }
.trip-std-list li > span, .trip-std li > span { font-size:20px; line-height:1.2; }
.trip-comm-all { background:var(--leaf-l); border-radius:12px; padding:10px 14px; color:#3b6d11; }
/* หน้าทริป */
.trip .crumb { margin:0 0 8px; font-size:13.5px; }
.trip-gallery { display:grid; grid-template-columns:2fr 1fr; gap:6px; margin:4px 0 14px; }
.trip-cover img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:14px; display:block; }
.trip-thumbs { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-content:start; }
.trip-thumbs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }
.trip-gallery:not(:has(.trip-thumbs)) { grid-template-columns:1fr; }
.trip h1 { margin:6px 0 4px; }
.trip-meta { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.trip-when { font-size:15px; margin:4px 0; }
.trip-summary { font-size:15.5px; color:var(--text); }
.trip-hl { list-style:none; padding:0; margin:8px 0 14px; display:grid; gap:4px; }
.trip-book { border:2px solid var(--green); }
.tb-seats { font-size:15px; }
.tb-seats strong { font-size:22px; color:var(--green-d); }
.tb-bar { height:8px; background:#eef0ea; border-radius:6px; overflow:hidden; margin:6px 0 4px; }
.tb-bar span { display:block; height:100%; background:var(--green); }
.tb-mine { font-size:16px; font-weight:600; margin:8px 0 4px; }
.tb-ok { color:var(--green-d); font-weight:500; }
.tb-closed { font-weight:500; color:var(--muted); }
.tb-label { font-weight:600; margin:12px 0 4px; font-size:14px; }
.tb-form label.inline, .tb-gear label.inline { display:flex; gap:7px; align-items:center; margin:4px 0; font-size:14px; }
.tb-form textarea { width:100%; margin-top:8px; }
.tb-health { background:#f6f5f0; border-radius:10px; padding:8px 12px; font-size:13px; margin-bottom:6px; }
.tb-cta { width:100%; justify-content:center; margin-top:10px; font-size:15.5px; padding:12px; }
.trip-std { margin-top:12px; border-top:1px dashed var(--border-s); padding-top:8px; }
.trip-std summary { cursor:pointer; font-size:13.5px; color:var(--green-d); font-weight:500; }
.trip-sec { margin:22px 0; }
.trip-sec h2 { font-size:18px; margin-bottom:8px; }
.trip-sec h3 { font-size:15px; margin:12px 0 4px; }
.trip-dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 14px; margin:0; font-size:14.5px; }
.trip-dl dt { color:var(--muted); }
.trip-dl dd { margin:0; }
.trip-day { border-left:3px solid var(--green); padding:2px 0 2px 14px; margin:0 0 14px; }
.trip-day h3 { margin:0 0 4px; }
.trip-tl { list-style:none; margin:0; padding:0; }
.trip-tl li { display:flex; gap:10px; padding:3px 0; font-size:14.5px; }
.tl-time { flex:0 0 52px; color:var(--green-d); font-weight:600; font-variant-numeric:tabular-nums; }
.trip-day-foot { font-size:13px; color:var(--muted); margin:4px 0 0; }
.trip-cost { font-size:15px; }
.trip-cost strong { font-size:20px; color:var(--clay-d); }
.trip-costs { border-collapse:collapse; margin:6px 0 10px; font-size:14px; min-width:260px; }
.trip-costs td { border-bottom:1px solid var(--border); padding:5px 14px 5px 0; }
.trip-yes, .trip-no { list-style:none; padding:0; margin:0; font-size:14px; }
.trip-yes li::before { content:'✓ '; color:var(--green-d); font-weight:700; }
.trip-no li::before { content:'✕ '; color:var(--clay-d); font-weight:700; }
.trip-community { background:var(--leaf-l); border-radius:12px; padding:12px 14px; margin-top:10px; font-size:14px; }
.trip-community table { width:100%; border-collapse:collapse; margin-top:6px; }
.trip-community td { padding:3px 0; border-bottom:1px solid #d6e6c4; }
.trip-community td:last-child { text-align:right; white-space:nowrap; }
.tc-total strong { font-size:18px; color:#3b6d11; }
.trip-staff { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-bottom:10px; }
.ts-card { display:flex; gap:10px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:8px 10px; }
.ts-card img { border-radius:50%; object-fit:cover; }
.ts-card small { display:block; color:var(--muted); }
.trip-check { list-style:none; padding:0; columns:2; column-gap:20px; font-size:14px; }
.trip-check li::before { content:'☐ '; color:var(--green-d); }
.trip-faq { border-bottom:1px solid var(--border); padding:8px 0; }
.trip-faq summary { cursor:pointer; font-weight:500; }
.trip-faq p { margin:6px 0 0; color:var(--muted); }
.trip-people { display:flex; flex-wrap:wrap; gap:12px; }
.trip-people a { display:flex; flex-direction:column; align-items:center; width:64px; font-size:12px; color:var(--text); text-align:center; }
.trip-people img { border-radius:50%; object-fit:cover; margin-bottom:3px; }
.trip-people span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:64px; }
@media (min-width:900px) {
.trip { display:grid; grid-template-columns:minmax(0,1fr) 330px; column-gap:26px; align-items:start; }
.trip > * { grid-column:1; }
.trip > .trip-book { grid-column:2; grid-row:1 / span 20; position:sticky; top:76px; margin-top:0; }
}
@media (max-width:600px) {
.trip-gallery { grid-template-columns:1fr; }
.trip-thumbs { grid-template-columns:repeat(4,1fr); }
.trip-check { columns:1; }
}
/* สถานที่ → ทริป */
.place-trips a { display:block; padding:4px 0; color:var(--green-d); }
.pt-comm { color:#3b6d11; margin-top:4px; }
/* ทริปที่ฉันจอง */
.mb-row { display:flex; flex-direction:column; gap:3px; color:var(--text); }
.mb-act { border-color:var(--clay); background:#fff8f4; }
/* ฟอร์มสร้างทริป (หลังบ้าน) */
.te-status { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px; }
.te-toc { display:flex; flex-wrap:wrap; gap:6px; position:sticky; top:62px; z-index:5; background:var(--bg); padding:8px 0; margin-bottom:8px; }
.te-toc a { font-size:12.5px; padding:4px 10px; border-radius:14px; background:var(--mint-l); color:var(--green-d); }
.te-form { max-width:760px; }
.te-sec { border:1px solid var(--border); border-radius:14px; padding:10px 16px 16px; margin:0 0 16px; background:var(--surface); scroll-margin-top:110px; }
.te-sec legend { font-weight:700; font-size:16px; padding:0 6px; color:var(--green-dd); }
.te-form textarea, .te-form select { width:100%; }
.te-form .btn { width:auto; margin-top:6px; }
.te-form label.inline { display:inline-flex; gap:6px; align-items:center; margin:4px 12px 4px 0; font-weight:400; }
.te-row { display:flex; gap:6px; align-items:center; margin:5px 0; }
.te-row input, .te-row select { flex:1; min-width:0; }
.te-row .te-time { flex:0 0 74px; }
.te-row .te-amt { flex:0 0 120px; }
.te-row .te-del { flex:0 0 auto; margin:0; padding:6px 10px; color:#a12222; }
.te-day { border:1px dashed var(--border-s); border-radius:12px; padding:8px 10px; margin:8px 0; background:#fbfbf8; }
.te-day > .te-row input { font-weight:600; }
.te-items { padding-left:8px; }
.te-meals { font-size:13px; margin:6px 0; }
.te-staff select:first-child { flex:1.2; }
.te-staff input[type="tel"] { flex:0 0 120px; }
.te-faq { border-bottom:1px solid var(--border); padding:4px 0 8px; }
.te-photos { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.te-photo { display:flex; flex-direction:column; align-items:center; font-size:12px; font-weight:400 !important; margin:0 !important; }
.te-photo img { width:88px; height:88px; object-fit:cover; border-radius:10px; }
.te-total { font-weight:600; margin:8px 0 0; }
.te-total.ok { color:var(--green-d); } .te-total.bad { color:#a12222; }
.te-actions { position:sticky; bottom:0; background:var(--bg); padding:10px 0; display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--border); z-index:5; }
.te-actions .btn { width:auto; margin:0; }
.te-pre { background:#f4f2ec; padding:8px 10px; border-radius:8px; overflow-x:auto; font-size:12.5px; }
@media (max-width:600px) {
.te-staff { flex-wrap:wrap; }
.te-staff select, .te-staff input { flex:1 1 45%; }
.te-row .te-amt { flex-basis:90px; }
}
.adt-row { display:flex; gap:10px; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
.adt-main { flex:1 1 260px; min-width:0; }
.adt-act { display:flex; gap:6px; flex-wrap:wrap; }
.tp-list { padding:6px 12px; }
.tp-row { display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.tp-row:last-child { border-bottom:0; }
.tp-av { border-radius:50%; object-fit:cover; flex:0 0 auto; }
.tp-main { flex:1 1 200px; min-width:0; font-size:14px; }
.tp-gear, .tp-note { font-size:12.5px; color:var(--muted); }
.tp-act { display:flex; gap:6px; flex-wrap:wrap; }
.tp-cancel form { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.tp-q { display:inline-block; font-size:11px; background:#fdf3e0; color:var(--amber-d); border-radius:8px; padding:0 6px; margin-top:10px; }
.tp-pay { width:100%; border-collapse:collapse; font-size:14px; margin-bottom:10px; }
.tp-pay td { border-bottom:1px solid var(--border); padding:6px 4px; vertical-align:top; }
.tp-amt { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tp-sum td { font-weight:700; border-bottom:0; }
.tp-payform { display:grid; grid-template-columns:2fr 1.5fr 90px; gap:6px; }
.tp-payform input[name="note"] { grid-column:1 / 3; }
@media (max-width:600px) { .tp-payform { grid-template-columns:1fr 1fr; } .tp-payform input[name="note"] { grid-column:1 / -1; } }
.tp-danger summary { color:#a12222; cursor:pointer; }
.tp-danger form { display:grid; gap:8px; margin-top:8px; }
.tg-table { display:grid; gap:4px; }
.tg-head, .tg-row { display:grid; grid-template-columns:52px 1fr 70px 50px 50px 60px 36px; gap:6px; align-items:center; }
.tg-head { font-size:12px; color:var(--muted); }
.tg-row input[type="checkbox"] { justify-self:center; }
.tg-icon { text-align:center; }
.tg-using { font-size:12px; color:var(--muted); padding:0 0 4px 58px; }
.tg-new { grid-template-columns:52px 1fr 70px auto 1fr; }
@media (max-width:600px) { .tg-head, .tg-row { grid-template-columns:44px 1fr 56px 34px 34px 46px 30px; gap:4px; font-size:13px; } .tg-new { grid-template-columns:1fr 1fr; } }
.trip-thumbs.one { grid-template-columns:1fr; }
.trip-thumbs.one img { aspect-ratio:auto; height:100%; max-height:none; }
@media (max-width:600px) { .trip-thumbs.one { grid-template-columns:repeat(4,1fr); } .trip-thumbs.one img { aspect-ratio:1; } }
/* ============ เมนูหลังบ้านแบบแถบซ้าย ============
มือถือ: ปุ่ม ☰ + ลิ้นชักเลื่อนจากซ้าย · จอกว้าง ≥ 980px: แถบซ้ายค้าง เนื้อหาอยู่ขวา
ไม่ต้องแก้หน้าหลังบ้านทีละหน้า — ใช้ main:has(.admin-side) จัดเลย์เอาต์ */
.admin-side-btn { display:flex; align-items:center; gap:8px; width:100%; margin:12px 0 4px; padding:10px 14px;
background:var(--surface); border:1px solid var(--border); border-radius:12px; font:inherit; font-size:14.5px;
font-weight:600; color:var(--green-dd); cursor:pointer; box-shadow:var(--shadow); }
.as-badge { margin-left:auto; background:var(--clay); color:#fff; border-radius:12px; padding:1px 10px; font-size:12.5px; font-weight:600; }
.admin-side-backdrop { position:fixed; inset:0; background:rgba(15,30,20,.38); z-index:260; }
.admin-side { position:fixed; top:0; left:0; bottom:0; width:min(290px, 86vw); z-index:261; background:var(--surface);
overflow-y:auto; padding:10px 10px 24px; box-shadow:4px 0 24px rgba(0,0,0,.15);
transform:translateX(-105%); transition:transform .22s ease; font-size:14px; }
.admin-side.open { transform:none; }
body.as-lock { overflow:hidden; }
.as-head { display:flex; justify-content:space-between; align-items:center; padding:4px 8px 10px; border-bottom:1px solid var(--border); margin-bottom:6px; }
.as-close { background:none; border:0; font-size:18px; cursor:pointer; color:var(--muted); padding:4px 8px; }
.as-group { padding:6px 0; border-bottom:1px solid var(--border); }
.as-group:last-of-type { border-bottom:0; }
.as-title { font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.2px; padding:6px 10px 4px; display:flex; align-items:center; gap:6px; }
.as-fold > summary { cursor:pointer; list-style:none; }
.as-fold > summary::-webkit-details-marker { display:none; }
.as-fold > summary::after { content:'▸'; margin-left:auto; transition:transform .15s; }
.as-fold[open] > summary::after { transform:rotate(90deg); }
.as-link { display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:9px; color:var(--text); line-height:1.3; }
.as-link:hover { background:var(--bg); }
.as-ic { width:20px; text-align:center; flex:0 0 auto; }
.as-tx { flex:1; min-width:0; }
.as-n { background:var(--clay); color:#fff; border-radius:10px; padding:0 8px; font-size:12px; font-weight:600; line-height:1.6; }
.as-link.has .as-tx { font-weight:600; }
.as-link.zero { color:var(--faint); }
.as-link.active { background:var(--green-d); color:#fff; }
.as-link.active .as-n { background:#fff; color:var(--green-d); }
.as-foot { padding-top:8px; font-size:13px; }
@media (min-width:980px) {
main:has(> .admin-side) { max-width:1200px; display:grid; grid-template-columns:230px minmax(0,1fr); column-gap:26px; align-items:start; }
main:has(> .admin-side) > * { grid-column:2; min-width:0; }
main:has(> .admin-side) > .admin-side { grid-column:1; grid-row:1 / span 40; }
body:has(main > .admin-side) .topbar-inner { max-width:1200px; }
.admin-side-btn, .admin-side-backdrop, .as-head { display:none !important; }
.admin-side { position:sticky; top:72px; bottom:auto; width:auto; max-height:calc(100vh - 88px); transform:none; transition:none;
margin:16px 0; border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); z-index:1; padding:8px 8px 14px; }
}
/* รายการสินค้ามือสอง (หลังบ้าน) */
.mi-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.mi-img { flex:0 0 72px; height:72px; border-radius:10px; overflow:hidden; background:var(--mint-l); display:flex; align-items:center; justify-content:center; font-size:28px; }
.mi-img img { width:100%; height:100%; object-fit:cover; }
.mi-main { flex:1 1 220px; min-width:0; }
.mi-price { color:var(--clay-d); font-weight:500; margin:2px 0; }
.mi-flag { font-size:12.5px; color:#a12222; margin-top:3px; }
.mi-act { display:flex; gap:6px; flex-wrap:wrap; }
/* คอมเมนต์: ลบ/ซ่อน/รายงาน */
.cm-acts { display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-size:12.5px; }
.cm-acts .btn-link { font-size:12.5px; padding:0; }
.cm-report > summary { list-style:none; cursor:pointer; display:inline; }
.cm-report > summary::-webkit-details-marker { display:none; }
.cm-report form { display:flex; gap:6px; margin-top:4px; }
.cm-report select { font-size:13px; padding:4px 6px; }
/* หลังบ้าน: คอมเมนต์ */
.cm-row.cm-hidden { opacity:.75; background:#faf8f3; }
.cm-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cm-head img { border-radius:50%; object-fit:cover; }
.cm-text { margin:8px 0; font-size:15px; white-space:normal; overflow-wrap:anywhere; }
/* หลังบ้าน: ระดับสมาชิก */
.lv-head { display:flex; justify-content:space-between; margin-bottom:6px; }
.lv-num { font-weight:700; color:var(--green-dd); }
.lv-grid { display:grid; grid-template-columns:70px 1.6fr 1fr 1fr 1fr; gap:8px; }
.lv-grid label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.lv-grid input { width:100%; min-width:0; }
.lv-icon { text-align:center; }
.lv-row label.inline { display:flex; gap:6px; align-items:center; margin:8px 0 4px; font-size:13.5px; }
.lv-note { width:100%; font-size:13px; }
@media (max-width:600px) {
.lv-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
.lv-grid label:nth-child(2) { grid-column:span 2; }
}
.lv-row label.inline { align-items:flex-start; white-space:normal; }
.lv-row label.inline input { margin-top:3px; }
/* หลังบ้าน: จังหวัดและอำเภอ */
.ar-prov > summary { cursor:pointer; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ar-row { display:flex; gap:8px; align-items:center; padding:4px 0; flex-wrap:wrap; }
.ar-row input[type="text"] { flex:1 1 180px; min-width:0; }
.ar-sort { width:70px; }
.ar-row label.inline { display:flex; gap:5px; align-items:center; font-size:13px; }
.ar-head-row { border-bottom:1px solid var(--border); padding-bottom:8px; margin:8px 0 4px; }
.ar-head-row input[type="text"] { font-weight:600; }
.ar-list { padding-left:14px; }
.ar-n { font-size:12px; min-width:70px; }
.ar-add { margin-top:14px; align-items:start; }
@media (max-width:700px) { .ar-add { grid-template-columns:1fr; } }
/* ============ สิ่งอำนวยความสะดวก (หน้าแรก) — การ์ดพร้อมคำอธิบาย ============ */
.hero-below .tools-sec { margin:18px 0 6px; text-align:left; }
.hero-below .tools-sec h2 { font-size:17px; margin:0 0 10px; }
.tool-cards { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.tool-card { display:flex; flex-direction:column; gap:4px; background:var(--surface); border:1px solid var(--border);
border-radius:14px; padding:13px 13px 11px; color:var(--text); box-shadow:var(--shadow); transition:.15s; min-width:0; }
.tool-card:hover { border-color:var(--green); box-shadow:var(--shadow-h); transform:translateY(-1px); }
.tool-card:active { transform:scale(.98); }
.tool-card .tool-ic { width:42px; height:42px; border-radius:12px; background:var(--mint-l); display:flex;
align-items:center; justify-content:center; font-size:24px; margin-bottom:4px; }
.tool-card strong { font-size:15px; line-height:1.3; }
.tool-card small { font-size:12.5px; color:var(--muted); line-height:1.45; flex:1; }
.tool-card .tool-go { font-size:12.5px; color:var(--green-d); font-weight:600; margin-top:4px; }
@media (max-width:700px) { .tool-cards { grid-template-columns:repeat(2, minmax(0,1fr)); } }
/* ตั้งค่าอีเมลของสมาชิก */
.mail-prefs label.inline { display:flex; gap:10px; align-items:flex-start; margin:8px 0; font-weight:400; }
.mail-prefs label.inline input { margin-top:4px; }
/* หลังบ้าน: อีเมลแจ้งเตือน */
.em-status { display:flex; flex-direction:column; gap:10px; }
.em-on { color:var(--green-d); } .em-off { color:var(--clay-d); } .em-bad { color:#a12222; }
.em-nums { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
.em-nums span { background:var(--bg); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; }
.em-nums b { font-size:20px; color:var(--green-dd); }
.em-nums small { font-size:12px; color:var(--muted); }
.em-form h2 { margin-top:0; } .em-form h3 { margin:18px 0 4px; font-size:15.5px; }
.em-form label.inline { display:flex; gap:8px; align-items:flex-start; font-weight:400; margin:8px 0; }
.em-form label.inline input { margin-top:4px; }
.em-form .btn { width:auto; }
.em-groups { margin:4px 0 8px 18px; padding:0; font-size:13.5px; color:var(--muted); }
.em-actions { align-items:start; } .em-actions .btn { width:auto; margin:6px 6px 0 0; }
.em-log { display:grid; gap:6px; }
.em-row { display:flex; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 12px; font-size:13.5px; }
.em-st { flex:0 0 74px; font-size:12.5px; }
.em-main { min-width:0; overflow-wrap:anywhere; } .em-main small { display:block; color:var(--muted); }
.em-failed { border-color:#f0c4c4; background:#fff6f6; }
.em-guide ol { margin:8px 0 0 18px; padding:0; line-height:1.75; font-size:14px; }
@media (max-width:600px) { .em-nums { grid-template-columns:repeat(2, minmax(0,1fr)); } .em-actions { grid-template-columns:1fr; } }
.em-main { flex:1; text-align:left; }
.mail-prefs label.inline, .em-form label.inline { white-space:normal; }
.mail-prefs label.inline span { min-width:0; flex:1; }
/* label.inline ตั้งค่าเริ่มต้นเป็น nowrap — ข้อความยาวในฟอร์มเหล่านี้ต้องตัดบรรทัดได้ ไม่งั้นล้นจอมือถือ */
.tb-form label.inline, .tb-gear label.inline, .vf-reject label.inline, .te-form label.inline,
.lv-row label.inline, .ar-row label.inline, .tp-cancel label.inline { white-space:normal; }