/* แผนที่ย่านหน้าห้อง (78 · 11-12 · rh_amap.js) — หมุด/ปุ่ม/การ์ด = ชุดเดียวกับแผนที่ Yes! Sure (rh_yes.css .ys .rhm-* / .ysm-*) และหลังบ้าน (admin/rh_map.css) · ขอบเขต .ram-w */
.ram-w { --n:#0E1E3D; --red:#E2302B; --mut:#4A5470; --bd:#E3E6EE; position:relative; display:grid; gap:6px; min-width:0; }
.ram { position:relative; height:340px; border-radius:12px; overflow:hidden; background:#eef0f5; border:1px solid var(--bd); font-family:'Sarabun',sans-serif; }
.ram-ph0 { margin:0; height:100%; display:grid; place-items:center; color:var(--mut); font-size:14px; }
.ram-cap { margin:0; display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--mut); }
.ram-cap i { width:10px; height:10px; border-radius:50%; background:var(--red); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:none; }
/* เต็มจอ (FullscreenControl · iPhone = เต็มหน้าเว็บแทน) */
.ram-w.ram-full, .ram-w.maplibregl-pseudo-fullscreen { background:#fff; gap:0; }
.ram-w.ram-full .ram, .ram-w.maplibregl-pseudo-fullscreen .ram { height:100%; border-radius:0; border:0; }
.ram-w.ram-full .ram-cap, .ram-w.maplibregl-pseudo-fullscreen .ram-cap { display:none; }

/* หมุดโครงการ = แบบหลังบ้าน */
.ram .rhm-pin { border:2px solid #1e2a7a; background:#fff; color:#1e2a7a; border-radius:999px; padding:2px 9px; font:700 12.5px/1.35 'Sarabun',sans-serif; white-space:nowrap; box-shadow:0 2px 6px rgba(11,17,80,.35); cursor:pointer; }
.ram .rhm-pin small, .ram .ram-me small { font-weight:600; opacity:.8; margin-left:4px; font-size:11.5px; }
.ram .rhm-pin.sel { background:#f97316; color:#fff; border-color:#fff; box-shadow:0 0 0 3px rgba(249,115,22,.35), 0 3px 10px rgba(150,60,0,.45); z-index:5; }   /* 11-12 เลิก scale(1.18) = ยืดภาพตัวหนังสือเบลอ → วงส้มรอบแทน */
.ram .rhm-pin .nm, .ram .ram-me .nm { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:3px; font-size:11.5px; font-weight:600; color:#151a3a; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; max-width:160px; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
.ram.z15 .rhm-pin .nm, .ram .rhm-pin.sel .nm { display:block; }
/* 11-12 หมุดแยกประเภท (เจ้าของ "แยกประเภทให้เห็นชัดๆ บ้าน คอนโด · มีรูปโครงการให้เห็นเลย"): สีขอบ+ไอคอน · คอนโด = กรมท่าเดิม · เลือก = ส้มเดิมทุกประเภท */
.ram .ty-i { width:13px; height:13px; flex:none; display:inline-block; vertical-align:-2px; margin-right:3px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.ram .rhm-pin.ty-h { border-color:#15803d; color:#15803d; box-shadow:0 2px 6px rgba(21,128,61,.35); }
.ram .rhm-pin.ty-t { border-color:#7c3aed; color:#7c3aed; box-shadow:0 2px 6px rgba(124,58,237,.3); }
.ram .rhm-pin.ty-o { border-color:#92400e; color:#92400e; box-shadow:0 2px 6px rgba(146,64,14,.3); }
.ram .rhm-pin.sel { color:#fff; border-color:#fff; }
.ram .rhm-pin img.th, .ram .ram-me img.th { display:none; }
.ram.z15 .rhm-pin.ph, .ram.z15 .ram-me.ph { display:flex; align-items:center; justify-content:center; padding:2px 10px 2px 2px; border-radius:12px; }
.ram.z15 .rhm-pin.ph img.th, .ram.z15 .ram-me.ph img.th { display:block; width:34px; height:34px; margin-right:7px; border-radius:9px; object-fit:cover; background:#E3E6EE; }
.ram.z15 .ram-me.ph::after { bottom:-7px; }
.ram-leg { position:absolute; z-index:6; left:10px; top:52px; display:flex; flex-wrap:wrap; gap:4px 10px; max-width:calc(100% - 20px); padding:5px 11px; border-radius:12px; background:rgba(255,255,255,.95); box-shadow:0 2px 10px rgba(14,30,61,.18); font-size:12.5px; font-weight:700; line-height:1.4; pointer-events:none; }
.ram-leg[hidden] { display:none; }
.ram-leg span { display:inline-flex; align-items:center; white-space:nowrap; color:#1e2a7a; }
.ram-leg .ty-h { color:#15803d; } .ram-leg .ty-t { color:#7c3aed; } .ram-leg .ty-o { color:#92400e; }
.rmp-on .ram-leg { top:104px; }
@media (max-width:767px) { .ram-leg { gap:3px 8px; padding:4px 9px; font-size:12px; } .ram .ram-leg .ty-i { width:12px; height:12px; margin-right:2px; } }
.rmp-pop .ram-xpw { display:none; }
.ram .rhm-cl { display:grid; place-items:center; min-width:54px; padding:5px 9px; border-radius:16px; border:2px solid #fff; background:rgba(30,42,122,.9); color:#fff; box-shadow:0 2px 8px rgba(11,17,80,.35); cursor:pointer; line-height:1.2; font-family:'Sarabun',sans-serif; }
.ram .rhm-cl b { font-size:13px; } .ram .rhm-cl small { font-size:10.5px; opacity:.85; }
.ram .rhm-st { display:none; font-size:11px; font-weight:600; color:#3c4266; text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space:nowrap; pointer-events:none; border-left:3px solid var(--c, #555b80); padding-left:3px; }
.ram.z13 .rhm-st { display:block; }
.ram .rhm-st, .ram-poi { height:16px; line-height:16px; }
.ram .maplibregl-marker { will-change:auto; }   /* 11-12 หมุดไม่แยกเลเยอร์ = ไม่โดนยืดภาพตอนจอซูมเศษ (Windows 125%) · ตัวหนังสือคม */   /* ป้ายชื่อ anchor ซ้าย = เลื่อน -50% ของความสูง → สูงเลขคู่ ไม่เบลอ */
/* หมุดโครงการนี้ = แดงเด่น ชื่อใต้หมุดตลอด · อยู่เหนือหมุดอื่น */
.ram .ram-mew { z-index:4; }
.ram .ram-me { position:relative; border:2px solid #fff; background:var(--red); color:#fff; border-radius:999px; padding:3px 11px; font:800 13px/1.35 'Sarabun',sans-serif; white-space:nowrap; box-shadow:0 3px 10px rgba(150,20,20,.45); cursor:pointer; }
.ram .ram-me::after { content:''; position:absolute; left:50%; bottom:-7px; width:10px; height:10px; margin-left:-5px; background:var(--red); border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg); border-radius:0 0 3px 0; }
.ram .ram-me .nm { display:block; margin-top:9px; padding:1px 7px; border-radius:6px; background:rgba(255,255,255,.94); box-shadow:0 1px 4px rgba(14,30,61,.18); text-shadow:none; font-size:12px; font-weight:700; color:var(--red); max-width:200px; }
/* สถานที่ใกล้เคียง */
.ram-poib { position:absolute; z-index:6; left:10px; top:10px; display:inline-flex; align-items:center; gap:3px; min-height:34px; padding:0 12px 0 10px; border:0; border-radius:999px; background:#fff; color:var(--n); box-shadow:0 2px 10px rgba(14,30,61,.18); font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.ram-poib i { width:9px; height:9px; border-radius:50%; background:var(--c); border:1.5px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.ram-poib span { margin-left:4px; }
.ram-poib[aria-pressed="false"] { background:#F4F5F8; color:var(--mut); } .ram-poib[aria-pressed="false"] i { opacity:.35; }
.ram-poi { font:600 11.5px/1.2 'Sarabun',sans-serif; color:var(--c); text-shadow:0 0 3px #fff, 0 0 3px #fff, 0 0 2px #fff; white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; pointer-events:none; }
/* การ์ดลอยล่างแผนที่ (= .ysm-card) */
.ram-card { position:absolute; z-index:8; left:10px; right:10px; bottom:10px; max-width:520px; display:flex; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 6px 24px rgba(14,30,61,.25); }
.ram-ph { width:120px; flex:none; background:linear-gradient(135deg,#D9DEE8,#C3CBD9); }
.ram-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.ram-ph { position:relative; }
.ram-gm { position:absolute; left:6px; bottom:6px; padding:3px 9px; border-radius:999px; background:rgba(255,255,255,.95); color:#1a2577; font-size:12px; font-weight:700; line-height:1.4; text-decoration:none; white-space:nowrap; box-shadow:0 2px 8px rgba(11,17,80,.2); }   /* 11-12 = .rhm-tip .gm หลังบ้าน */
.ram-gm:hover, .ram-gm:focus { background:#1a2577; color:#fff; text-decoration:none; }
@media (max-width:767px) { .ram-gm { left:5px; bottom:5px; padding:2px 7px; font-size:11px; } }
.ram-bd { flex:1; min-width:0; padding:10px 12px; display:flex; flex-direction:column; gap:2px; }
.ram-bd b { font-size:15.5px; line-height:1.3; color:var(--n); padding-right:30px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ram-m { color:var(--mut); font-size:13.5px; }
.ram-card-me .ram-m { color:var(--red); }
a.ram-go { margin-top:6px; border-top:1px solid var(--bd); font-weight:700; color:#1e2a7a; display:flex; justify-content:space-between; align-items:center; min-height:44px; text-decoration:none; }
a.ram-go:hover, a.ram-go:focus { color:#1e2a7a; text-decoration:underline; }
.ram-go i { font-style:normal; font-size:20px; }
.ram-x { position:absolute; top:6px; right:6px; width:32px; height:32px; border-radius:999px; border:0; background:rgba(14,30,61,.08); color:var(--n); font-size:20px; line-height:1; cursor:pointer; }
/* ปุ่มรูปย่อวนแบบแผนที่ (= admin/rh_map.css .rhm-skin) */
.ram .rhm-skin { display:grid; gap:2px; justify-items:center; width:64px; padding:3px 3px 4px; border:0; border-radius:10px; background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.3); font:inherit; font-size:11px; font-weight:600; line-height:1.3; color:#1a2577; cursor:pointer; }
.ram .rhm-skin:focus-visible { outline:3px solid #1a2577; outline-offset:2px; }
.ram .rhm-skin-i { display:block; width:58px; height:44px; border-radius:7px; background-color:#eff1f4; background-position:center; background-size:cover; }
.ram .rhm-skin.to-g .rhm-skin-i { background-image:linear-gradient(0deg, transparent 44%, #fff 44% 58%, transparent 58%), linear-gradient(90deg, transparent 36%, #fff 36% 48%, transparent 48%), linear-gradient(118deg, transparent 62%, #9dd5f6 62% 76%, transparent 76%), linear-gradient(30deg, #cbe8cc 0 22%, transparent 22%); }
.ram .rhm-skin.to-p .rhm-skin-i { background-color:#f3f3f1; background-image:linear-gradient(0deg, transparent 44%, #fff 44% 58%, transparent 58%), linear-gradient(90deg, transparent 36%, #fff 36% 48%, transparent 48%), linear-gradient(118deg, transparent 62%, #d4dadc 62% 76%, transparent 76%); box-shadow:inset 0 0 0 1px #e2e3e6; }
.ram .rhm-skin.to-d .rhm-skin-i { background-color:#22252b; background-image:linear-gradient(0deg, transparent 44%, #3a3f48 44% 58%, transparent 58%), linear-gradient(90deg, transparent 36%, #3a3f48 36% 48%, transparent 48%), linear-gradient(118deg, transparent 62%, #12161c 62% 76%, transparent 76%); }
.ram .maplibregl-cooperative-gesture-screen { font-family:'Sarabun',sans-serif; font-size:16px; }
@media (max-width:767px) {
	.ram { height:300px; }
	.ram .rhm-skin { width:54px; } .ram .rhm-skin-i { width:48px; height:34px; }
	.ram-ph { width:96px; }
	.ram-bd b { font-size:15px; }
}

/* ── หน้าแผนที่ห้องว่าง map.php (.rmp · rh_amap_page.js) · เจ้าของ 11-12 "ชอบ living ดูง่ายกว่า" = ตัวกรองแถวเดียวปุ่มมน + การ์ดโครงการเรียงตาราง ── */
.rmp { --n:#0E1E3D; --red:#E2302B; --mut:#4A5470; --bd:#E3E6EE; --soft:#F4F5F8; max-width:1240px; margin:0 auto; padding:14px 20px 40px; color:var(--n); font-family:'Sarabun',sans-serif; }
.rmp-crumb { margin:0 0 6px; padding:0; background:none; font-size:13px; }
.rmp h1 { margin:0; font-size:28px; font-weight:800; line-height:1.25; color:var(--n); }
.rmp-sub { margin:4px 0 14px; color:var(--mut); font-size:14.5px; }
.rmp-sub b { color:var(--n); }
.rmp-f { display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 2px 10px; margin:0 -2px; }
.rmp-f::-webkit-scrollbar { display:none; }
.rmp-seg { flex:none; display:inline-flex; padding:3px; border-radius:999px; background:var(--soft); border:1px solid var(--bd); }
.rmp-seg label { margin:0; cursor:pointer; }
.rmp-seg input { position:absolute; opacity:0; pointer-events:none; }
.rmp-seg span { display:grid; place-items:center; min-width:64px; min-height:38px; padding:0 16px; border-radius:999px; font-weight:700; font-size:15px; color:var(--mut); }
.rmp-seg input:checked + span { background:var(--n); color:#fff; box-shadow:0 2px 6px rgba(14,30,61,.25); }
.rmp-seg input:focus-visible + span { outline:2px solid var(--n); outline-offset:2px; }
.rmp-sel { flex:none; display:inline-flex; align-items:center; height:44px; min-height:44px; line-height:normal; padding:0 34px 0 16px; border:1px solid var(--bd); border-radius:999px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234A5470' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; -webkit-appearance:none; appearance:none; font:inherit; font-size:15px; font-weight:600; color:var(--n); cursor:pointer; }
.rmp-sel:focus-visible { outline:2px solid var(--n); outline-offset:1px; }
.rmp-go { flex:none; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:var(--n); color:#fff; font:inherit; font-weight:700; }
.rmp-mapw { position:relative; }
.rmp-map { height:min(620px, 68vh); min-height:380px; }
.rmp-mapw.ram-full .rmp-map, .rmp-mapw.maplibregl-pseudo-fullscreen .rmp-map { height:100%; }
.rmp-map[data-loading] .rhm-pin, .rmp-map[data-loading] .rhm-cl { opacity:.45; transition:opacity .2s; }
/* ช่องค้นสถานที่ + ตำแหน่งฉัน บนแผนที่ (แบบ Yes! Sure .ysm-top) */
.ram-top { position:absolute; z-index:7; left:10px; top:10px; right:60px; display:flex; gap:8px; align-items:flex-start; pointer-events:none; }
.ram-top > * { pointer-events:auto; }
.ram-q { position:relative; flex:1; max-width:380px; display:flex; align-items:center; background:#fff; border-radius:12px; box-shadow:0 4px 16px rgba(14,30,61,.2); }
.ram-qi { position:absolute; left:12px; width:18px; height:18px; fill:none; stroke:var(--mut); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }
.ram-q input { width:100%; min-height:44px; border:0; border-radius:12px; padding:0 12px 0 40px; font:inherit; font-size:16px; color:var(--n); background:transparent; }
.ram-q input:focus { outline:2px solid var(--n); outline-offset:0; }
.ram-sugg { position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border-radius:12px; box-shadow:0 10px 30px rgba(14,30,61,.2); padding:6px; max-height:300px; overflow:auto; }
.ram-gh { padding:8px 10px; color:var(--mut); font-size:13.5px; }
.ram-opt { display:flex; width:100%; align-items:baseline; gap:8px; min-height:44px; padding:8px 10px; border:0; border-radius:8px; background:none; font:inherit; color:var(--n); text-align:left; cursor:pointer; }
.ram-opt:hover, .ram-opt.hl { background:#EEF0F5; }
.ram-opt .n { flex:1; min-width:0; font-weight:600; font-size:15px; }
.ram-opt .sub { flex:none; color:var(--mut); font-size:12.5px; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ram-meb { flex:none; width:44px; height:44px; border-radius:50%; border:0; background:#fff; color:#1e2a7a; box-shadow:0 4px 16px rgba(14,30,61,.2); display:grid; place-items:center; cursor:pointer; }
.ram-meb[disabled] { opacity:.6; cursor:progress; }
.rmp-on .ram-poib { top:62px; }
.ysm-place { display:block; line-height:0; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
a.ram-oth { display:inline-block; margin-top:2px; font-size:13.5px; font-weight:600; color:var(--mut); text-decoration:underline; }
/* กล่องโครงการที่เลือก + ห้องว่างปัดดู */
.rmp-body { margin-top:18px; }
.rmp-selp { margin:0 0 22px; padding:16px; border:1px solid var(--bd); border-radius:16px; background:#fff; box-shadow:0 4px 18px rgba(14,30,61,.08); scroll-margin-top:96px; }
.rmp-sh { display:flex; gap:12px; align-items:flex-start; }
.rmp-st { flex:1; min-width:0; }
.rmp .rmp-st h2 { margin:0; font-size:20px; font-weight:800; line-height:1.3; }
.rmp-sm { display:block; margin-top:2px; color:var(--mut); font-size:14px; }
.rmp-x { flex:none; width:40px; height:40px; border-radius:999px; border:0; background:var(--soft); color:var(--n); font-size:22px; line-height:1; cursor:pointer; }
.rmp-rooms { display:flex; align-items:flex-start; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:14px 2px 6px; margin:0 -2px; scrollbar-width:thin; }
.rmp-r { flex:none; width:220px; scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--bd); border-radius:12px; overflow:hidden; background:#fff; color:var(--n); text-decoration:none; }
.rmp-r:hover, .rmp-r:focus { text-decoration:none; color:var(--n); box-shadow:0 4px 14px rgba(14,30,61,.14); }
.rmp-ri { position:relative; display:block; flex:none; height:0; padding-top:75%; overflow:hidden; background:linear-gradient(135deg,#D9DEE8,#C3CBD9); }   /* รูป 4:3 ทุกใบ (aspect-ratio ใน flex คอลัมน์โดนรูปสูงดันยืด) */
.rmp-ri img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.rmp-rb { display:flex; flex-direction:column; gap:2px; padding:8px 10px 10px; }
.rmp-rb b { font-size:17px; } .rmp-rb b small { font-size:12.5px; font-weight:500; color:var(--mut); margin-left:2px; }
.rmp-rt { font-size:13.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rmp-rf { font-size:12.5px; color:var(--mut); }
.rmp-rmore { width:140px; align-self:stretch; justify-content:center; align-items:center; gap:4px; background:var(--soft); }
.rmp-rmore b { font-size:22px; }
.rmp-wait { margin:6px 0; color:var(--mut); font-size:14px; }
.rmp-act { display:flex; gap:10px 16px; align-items:center; flex-wrap:wrap; margin-top:10px; }
a.rmp-all { display:inline-flex; gap:14px; align-items:center; min-height:44px; padding:0 18px; border-radius:999px; background:var(--n); color:#fff; font-weight:700; text-decoration:none; }
a.rmp-all:hover, a.rmp-all:focus { color:#fff; text-decoration:none; background:#17294D; }
a.rmp-all i { font-style:normal; font-size:20px; }
a.rmp-oth { color:var(--n); font-weight:600; text-decoration:underline; }
/* การ์ดโครงการใต้แผนที่ (ตาราง 3 คอลัมน์ · มือถือ 1) */
.rmp-lh { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:0 0 12px; }
.rmp .rmp-lh h2 { margin:0; font-size:20px; font-weight:800; }
.rmp-ln { color:var(--mut); font-size:14px; }
.rmp-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; }
.rmp-c { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--bd); border-radius:14px; background:#fff; color:var(--n); text-decoration:none; min-width:0; }
.rmp-c:hover, .rmp-c:focus { color:var(--n); text-decoration:none; box-shadow:0 4px 14px rgba(14,30,61,.12); }
.rmp-c.on { border-color:var(--n); box-shadow:0 0 0 1px var(--n); }
.rmp-ci { flex:none; width:104px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,#D9DEE8,#C3CBD9); }
.rmp-ci img { width:100%; height:100%; object-fit:cover; display:block; }
.rmp-cb { min-width:0; display:flex; flex-direction:column; gap:2px; }
.rmp-cb b { font-size:15.5px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.rmp-cn { font-size:14px; font-weight:700; color:#1E7B4A; }
.rmp-cd { font-size:13px; color:var(--mut); }
.rmp-more { display:block; margin:16px auto 0; min-height:44px; padding:0 22px; border:1px solid var(--bd); border-radius:999px; background:#fff; font:inherit; font-weight:700; color:var(--n); cursor:pointer; }
.rmp-empty { margin:12px 0; padding:16px; border-radius:12px; background:var(--soft); color:var(--mut); }
@media (max-width:991px) { .rmp-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:767px) {
	.rmp { padding:8px 16px 32px; }
	.rmp-map .maplibregl-ctrl-bottom-right { margin-bottom:64px; }   /* ปุ่มซูมพ้นปุ่มลอยน้องคาปิ */
	.rmp h1 { font-size:22px; }
	.rmp-sub { font-size:13.5px; margin-bottom:10px; }
	.rmp-mapw { margin:0 -16px; }
	.rmp-map { height:62vh; min-height:340px; border-radius:0; border-left:0; border-right:0; }
	.rmp-grid { grid-template-columns:minmax(0, 1fr); gap:10px; }
	.ram-top { right:56px; }
	.ram-q { max-width:none; }
	.rmp-r { width:72vw; max-width:260px; }
	.rmp-selp { padding:14px 12px; }
	.rmp .rmp-st h2 { font-size:18px; }
}

/* 11-12 (ต่อ) ป้ายจุดที่ค้น + ระยะ (เจ้าของ "ให้เลือกระยะห่างด้วย") · ปุ่มลอย "ดูแผนที่" (เจ้าของชอบปุ่มลอยของ LivingInsider) */
.rmp-near { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:-2px 0 10px; font-size:13.5px; color:var(--mut); }   /* บรรทัด 2 เล็กๆ (เจ้าของ 11-12) */
.rmp-near[hidden] { display:none; }
.rmp-pt { display:inline-flex; align-items:center; gap:4px; min-height:32px; max-width:min(260px, 60vw); padding:0 2px 0 9px; border-radius:999px; background:#FDECEC; border:1px solid #F6C9C7; color:#B4231F; font-weight:700; font-size:13.5px; }
.rmp-pt[hidden], .rmp-fab[hidden], .rmp-more[hidden], .ram-top[hidden], .rmp-selp[hidden], .rmp-empty[hidden] { display:none; }   /* 11-12 เจ้าของ "ดูเพิ่มกดแล้วไม่มีอะไรเกิดขึ้น" = display:block ของ .rmp-more ทับ hidden → ปุ่มค้าง "ดูเพิ่มอีก -329" */
.rmp-pt svg { flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.2; }
.rmp-pt span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmp-pt button { flex:none; width:30px; height:30px; border:0; border-radius:999px; background:none; color:#B4231F; font-size:20px; line-height:1; cursor:pointer; }
.rmp-pt button:hover { background:rgba(226,48,43,.1); }
.rmp-rad { flex:none; width:auto; display:inline-flex; align-items:center; height:32px; padding:0 28px 0 11px; border:1px solid #F6C9C7; border-radius:999px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23B4231F' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; -webkit-appearance:none; appearance:none; font:inherit; font-size:13.5px; font-weight:700; color:#B4231F; line-height:normal; cursor:pointer; }   /* ตัวหนังสือลอยบนในมือถือ = ใช้ height ตายตัว (min-height อย่างเดียว Chrome มือถือจัดชิดบน) */
.rmp-fab { position:fixed; z-index:40; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); display:inline-flex; align-items:center; gap:8px; min-height:48px; padding:0 22px; border:0; border-radius:999px; background:var(--n); color:#fff; font:inherit; font-size:15.5px; font-weight:700; box-shadow:0 8px 24px rgba(14,30,61,.35); cursor:pointer; }
.rmp-fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round; }
.rmp-fab:hover { background:#17294D; }
.rmp-fab:focus-visible { outline:3px solid #fff; outline-offset:-5px; }

/* ป๊อปอัปแผนที่จากปุ่มลอย "ดูแผนที่" (เจ้าของ 11-12) · แผนที่ตัวเดิมย้ายเป็น fixed (กล่องกันที่ = รายการไม่กระโดด) · ปุ่มล่าง = ไปที่การ์ด (แบบ "สำรวจเลย!" ของ LivingInsider) */
.rmp-back { position:fixed; inset:0; z-index:2000; background:rgba(10,15,40,.55); }
.rmp-mapw.rmp-pop { position:fixed; z-index:2001; top:4vh; left:4vw; right:4vw; bottom:4vh; margin:0; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.rmp-mapw.rmp-pop .rmp-map { height:100%; min-height:0; border:0; border-radius:16px; }
.rmp-mapw.rmp-pop .maplibregl-ctrl-fullscreen { display:none; }
.rmp-popx { position:absolute; z-index:9; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px 0 12px; border:0; border-radius:999px; background:var(--n); color:#fff; font:inherit; font-size:15px; font-weight:700; box-shadow:0 4px 14px rgba(14,30,61,.3); cursor:pointer; }
.rmp-popx span { font-size:22px; line-height:1; }
.rmp-popgo { position:absolute; z-index:9; left:50%; bottom:22px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:12px; max-width:calc(100% - 150px); min-height:48px; padding:0 20px; border:0; border-radius:999px; background:var(--red); color:#fff; font:inherit; font-size:15.5px; font-weight:700; box-shadow:0 8px 24px rgba(150,20,20,.35); cursor:pointer; }
.rmp-popgo span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmp-popgo i { font-style:normal; font-size:22px; }
.rmp-pop .ram-card { bottom:84px; }
.rmp-pop .ram-top { right:110px; }
html.rmp-lock, html.rmp-lock body { overflow:hidden; }
@media (max-width:767px) {
	.rmp-mapw.rmp-pop { top:0; left:0; right:0; bottom:0; border-radius:0; }
	.rmp-mapw.rmp-pop .rmp-map { border-radius:0; }
	.rmp-pop .ram-top { top:62px; right:10px; }
	.rmp-pop .ram-poib { top:114px; }
	.rmp-popgo { bottom:calc(18px + env(safe-area-inset-bottom, 0px)); max-width:calc(100% - 24px); font-size:14.5px; padding:0 16px; }
	.rmp-pop .maplibregl-ctrl-bottom-right, .rmp-pop .maplibregl-ctrl-bottom-left { margin-bottom:70px; }
}

/* 11-12 เจ้าของ "ดรอปดาวน์เหลี่ยมเชียว หลุด UI เรามาก" → ปุ่ม = หน้าตาช่องเลือกเดิม · เมนูมน = แบบรายการค้นหา (.ram-sugg/.ram-opt) · select เดิมซ่อนไว้ในฟอร์ม */
select.rmp-native { display:none !important; }
button.rmp-dd { font:inherit; cursor:pointer; text-align:left; max-width:240px; }
button.rmp-sel.rmp-dd { color:var(--n); font-size:15px; font-weight:600; }
.rmp-dd .rmp-ddt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rmp-dd[aria-expanded="true"] { border-color:var(--n); box-shadow:0 0 0 1px var(--n); }
.rmp-rad.rmp-dd[aria-expanded="true"] { border-color:#B4231F; box-shadow:0 0 0 1px #B4231F; }
.rmp-menu { --n:#0E1E3D; position:fixed; z-index:2100; display:grid; gap:2px; max-width:calc(100vw - 16px); padding:6px; overflow-y:auto; background:#fff; border:1px solid #E3E6EE; border-radius:14px; box-shadow:0 10px 30px rgba(14,30,61,.2); font-family:'Sarabun',sans-serif; overscroll-behavior:contain; }
.rmp-mo { display:flex; align-items:center; gap:8px; width:100%; min-height:42px; padding:8px 34px 8px 12px; border:0; border-radius:9px; background:none; font:inherit; font-size:15px; font-weight:600; color:var(--n); text-align:left; white-space:nowrap; cursor:pointer; position:relative; }
.rmp-mo:hover, .rmp-mo.hl { background:#EEF0F5; }
.rmp-mo:focus-visible { outline:2px solid var(--n); outline-offset:-2px; }
.rmp-mo[aria-selected="true"] { color:var(--n); font-weight:800; }
.rmp-mo[aria-selected="true"]::after { content:''; position:absolute; right:12px; top:50%; width:6px; height:11px; margin-top:-7px; border:solid currentColor; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.rmp-menu-r .rmp-mo { min-height:38px; font-size:14px; color:#B4231F; }
.rmp-menu-r .rmp-mo:hover, .rmp-menu-r .rmp-mo.hl { background:#FDECEC; }
@media (max-width:767px) { .rmp-mo { min-height:44px; } }
/* 11-12 ปุ่ม "กลับไปที่ …" (= .rhm-back หลังบ้าน) · ล่างกลาง · มีการ์ด = ยกขึ้นเหนือการ์ด · ป๊อปอัป = เหนือปุ่มแดง */
.ram { container-type:inline-size; }   /* 11-12 ปุ่มกลับไปที่: แผนที่กว้างพอ = ข้างการ์ด */
.ram-back { position:absolute; z-index:9; left:50%; bottom:16px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; max-width:min(230px, calc(100% - 140px)); height:30px; padding:0 11px 0 9px; border:1px solid rgba(26,37,119,.22); border-radius:999px; background:#fff; color:#1a2577; font:inherit; font-size:12.5px; font-weight:600; box-shadow:0 1px 6px rgba(16,22,70,.18); cursor:pointer; }   /* 11-13 เจ้าของ "เอาเล็กๆ พอ อยู่ข้างบนแล้วเกะกะ" = ปุ่มขาวเล็ก (เดิมกรมท่าสูง 38) */
.ram-back svg { width:14px; height:14px; }
.ram-back:hover { background:#f2f4fa; }
/* ป๊อปอัปแผนที่หน้าห้อง (กดขยาย = แบบ map.php) */
.ram-w.rmp-pop { display:block; }
.ram-w.rmp-pop .ram { height:100%; border:0; border-radius:16px; }
.ram-w.rmp-pop .ram-cap { display:none; }
@media (max-width:767px) { .ram-w.rmp-pop .ram { border-radius:0; } }
.ram-back[hidden] { display:none; }
.ram-back span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.ram-back svg { flex:none; }
.ram-back:focus-visible { outline:3px solid #f97316; outline-offset:2px; }
.ram.has-card .ram-back { bottom:calc(var(--cardh, 120px) + 20px); }
.rmp-pop .ram-back { bottom:84px; }
.rmp-pop .ram.has-card .ram-back { bottom:calc(var(--cardh, 120px) + 94px); }
/* 11-12 เจ้าของ "กลับไปมันสูงไป": แผนที่กว้าง ≥ 820 + มีการ์ด = ปุ่มอยู่ขวาของการ์ด ระดับล่างเดียวกัน (ไม่ลอยกลางแผนที่) */
@container (min-width: 820px) { .ram.has-card .ram-back { left:552px; bottom:20px; transform:none; max-width:calc(100% - 620px); } .rmp-pop .ram.has-card .ram-back { bottom:94px; } }

/* 11-13 งบ = แผงสไลด์ (rh_bslider.js/.css · ตัวเดียวกับ Yes! Sure) · คอม = กล่องลอยใต้ปุ่ม · มือถือ = แผงล่างจอ */
.rmp-bsp { width:min(380px, calc(100vw - 16px)); display:flex; flex-direction:column; gap:10px; padding:12px 14px 14px; }
.rmp-bsh { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rmp-bsh b { font-size:15.5px; color:var(--n); }
.rmp-bsx { width:36px; height:36px; border:0; border-radius:50%; background:#F4F5F8; color:var(--n); font-size:20px; line-height:1; cursor:pointer; }
.rmp-bcs { display:flex; flex-wrap:wrap; gap:6px; }
.rmp-bc { min-height:38px; padding:0 13px; border:1px solid #E3E6EE; border-radius:999px; background:#fff; font:inherit; font-size:14px; font-weight:600; color:var(--n); cursor:pointer; white-space:nowrap; }
.rmp-bc[aria-pressed="true"] { background:var(--n); border-color:var(--n); color:#fff; }
.rmp-bsp .ys-bs { margin-top:2px; }
.rmp-bsp.sheet { left:0 !important; right:0; bottom:0 !important; top:auto !important; width:100%; max-width:none; max-height:85vh !important; border-radius:18px 18px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
html:has(.rmp-bsp.sheet) #chat { visibility:hidden; }   /* มือถือ: ปุ่มลอยน้องคาปิไม่ทับแผง (แบบแผงบนแผนที่ Yes! Sure) */
/* 11-14 มือถือ: ปุ่มลงไปรายการ ล่างกลางแผนที่ (เจ้าของ "ลากนิ้วเดียว เผลอแล้วเลื่อนหน้าลงไม่ได้") · คอม/เต็มจอ/ป๊อปอัปแผนที่ = ซ่อน */
.rmp-tolist { display:none; }
@media (max-width:767px) {
  .rmp-tolist { position:absolute; z-index:5; left:50%; bottom:12px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border:0; border-radius:999px; background:rgba(14,30,61,.92); color:#fff; font:inherit; font-size:15px; font-weight:700; white-space:nowrap; box-shadow:0 6px 18px rgba(14,30,61,.3); cursor:pointer; }
  .rmp-tolist svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  .rmp-tolist:focus-visible { outline:3px solid #fff; outline-offset:-5px; }
  .rmp-mapw.ram-full .rmp-tolist, .rmp-mapw.maplibregl-pseudo-fullscreen .rmp-tolist, .rmp-mapw.rmp-pop .rmp-tolist { display:none; }
  .rmp-map.has-card ~ .rmp-tolist, .rmp-map:has(.ram-back:not([hidden])) ~ .rmp-tolist { display:none; }   /* การ์ดหมุด/ปุ่มกลับไปจุดค้นอยู่ล่างกลางเหมือนกัน (เทส map_page_ui จับได้) = หลบ */
  .rmp-map { height:56vh; }
  .rmp-tolist .rmp-tln { margin-left:-2px; }
}
@media (max-width:359px) {   /* จอ 320: ปุ่มยาวทับปุ่มสลับสีแผนที่มุมซ้ายล่าง → เหลือ "ดูรายการ ↓" */
  .rmp-tolist .rmp-tln { display:none; }   /* เดิม 62vh = เห็นหัวรายการโผล่ใต้แผนที่ + มีที่ให้นิ้วเลื่อนหน้า */
}
