/* หน้าห้อง product_detail.php (รีดีไซน์ ② r2-2 · rh_room_lib.php · mockup v3 แบบ ก) · ทุก class ขึ้นต้น rhr- (กันชน Bootstrap 3)
   โครงชุดเดียวทุกจอ: ≥ 992 = 2 คอลัมน์ 2 ช่วง (r2-6) [รูป/รายละเอียด/ทำเล | การ์ดเต็มติดตาม] → [โครงการ/ห้องว่างอื่น | กล่องติดต่อย่อ + โครงการใกล้เคียง ติดตาม]
   < 992 = คอลัมน์เดียว รูป → หัวข้อ → การ์ด → รายละเอียด/ทำเล → โครงการ/ห้องว่างอื่น → โครงการใกล้เคียง (กล่องย่อซ่อน · มีแถบล่างจอแล้ว)
   navbar ของเว็บ fixed-top → การ์ด sticky เว้นความสูง navbar (--rhr-top) · รูปหลักใช้ padding-bottom (ไม่พึ่ง aspect-ratio = LINE in-app iOS เก่ายังได้) */
.rhr { --rr-ink: #17213A; --rr-muted: #5B6578; --rr-line: #E3E8F0; --rr-blue: #1F4FB5; --rr-soft: #F4F6FA; --rr-chip: #EEF2FB; --rr-green: #06C755;
  --rhn-ink: #17213A; --rhn-muted: #5B6578; --rhn-line: #E3E8F0; --rhn-blue: #1F4FB5; --rhn-chip: #EEF2FB; /* กล่องทำเลของ 3k (rhn_zone) ใช้ตัวแปรชุดนี้ */
  --rhr-top: 84px; /* navbar คอมสูง 66 + ช่องว่าง */
  padding-top: 6px; padding-bottom: 36px; color: var(--rr-ink); font-size: 15px; line-height: 1.6; }
.rhr * { box-sizing: border-box; }
.rhr a, .rhr a:hover, .rhr a:focus { text-decoration: none; }
.rhr a:focus-visible, .rhr button:focus-visible { outline: 3px solid rgba(31, 79, 181, .45); outline-offset: 2px; }
.rhr-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "gal" "head" "side" "body" "body2" "side2"; gap: 16px; }
.rhr-a-gal { grid-area: gal; min-width: 0; }
.rhr-a-head { grid-area: head; min-width: 0; }
.rhr-a-side { grid-area: side; min-width: 0; }
.rhr-a-body { grid-area: body; min-width: 0; display: grid; gap: 18px; align-content: start; }
.rhr-a-body2 { grid-area: body2; min-width: 0; display: grid; gap: 18px; align-content: start; }
.rhr-a-side2 { grid-area: side2; min-width: 0; padding-top: 16px; border-top: 1px solid var(--rr-line); }
@media (min-width: 992px) {
  /* r2-5 แบบ ค1: หัวข้อเต็มกว้างเหนือรูป+การ์ด · การ์ดเริ่มแถวเดียวกับรูป */
  .rhr-grid { grid-template-columns: minmax(0, 1fr) 330px; grid-template-rows: auto auto auto auto; grid-template-areas: "head head" "gal side" "body side" "body2 side2"; column-gap: 26px; row-gap: 18px; }
  .rhr-grid.rhr-no-s2 { grid-template-areas: "head head" "gal side" "body side" "body2 side"; } /* ไม่มีโครงการใกล้เคียง = การ์ดเต็มติดตามถึงท้าย */
  /* ไม่มีห้องว่างอื่น (ช่วง 2 ซ้ายว่าง · โครงการย้ายขึ้นช่วง 1 แล้ว) = โครงการใกล้เคียงมาซ้าย 2 คอลัมน์ · การ์ดเต็มติดตามถึงท้าย (เจ้าของเลือกทาง ก 2026-10-09) */
  .rhr-grid.rhr-s2-left { grid-template-areas: "head head" "gal side" "body side" "side2 side"; }
  .rhr-s2-left .rhr-a-side2 { align-self: start; }
  .rhr-s2-left .rhr-sticky2 { position: static; }
  .rhr-s2-left .rhn-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .rhr-s2-left .rhn-i:nth-child(2) { border-top: 0; padding-top: 4px; }
  .rhr-a-side, .rhr-a-side2 { align-self: stretch; } /* สูงเท่าช่วงซ้าย → ของในนั้นติดตามลงมาได้ตลอดช่วง */
  .rhr-sticky, .rhr-sticky2 { position: sticky; top: var(--rhr-top); }
  .rhr-sticky2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } /* minmax(0,…) = บรรทัดไม่ขึ้นบรรทัดใหม่ในรายชื่อ ("คอนโดรอบ …") ไม่ดันให้กว้างเกินคอลัมน์ */
}
@media (min-width: 1200px) { .rhr-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 30px; } }

/* ===== รูป ===== */
.rhr-gal { display: grid; gap: 8px; }
.rhr-main { position: relative; height: 0; padding-bottom: 75%; border-radius: 14px; overflow: hidden; background: #E9EDF3; }
.rhr-main-img { position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: block; cursor: zoom-in; }
.rhr-nopic span { position: absolute; top: 50%; left: 0; right: 0; margin-top: -12px; text-align: center; color: var(--rr-muted); }
.rhr-cnt { position: absolute; right: 12px; bottom: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(23, 33, 58, .72); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; }
.rhr-zoom { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--rr-ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rhr-nav { position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92);
  color: var(--rr-ink); font-size: 26px; line-height: 38px; cursor: pointer; box-shadow: 0 2px 8px rgba(20, 30, 80, .2); }
.rhr-prev { left: 12px; } .rhr-next { right: 12px; }
.rhr-nav:hover, .rhr-zoom:hover { background: #fff; }
.rhr-thumbs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.rhr-th { position: relative; display: block; height: 0; padding: 0 0 75%; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #DDE3EC; cursor: pointer; }
.rhr-th img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rhr-th.rhr-on { border-color: var(--rr-blue); }
.rhr-th-x { display: none; }
.rhr-more-n { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(23, 33, 58, .55); color: #fff; font-weight: 700; }

/* ===== หัวข้อ + ข้อมูลห้อง ===== */
.rhr-head { display: grid; gap: 8px; }
.rhr .rhr-title { margin: 0; font-family: inherit; font-size: 20px; line-height: 1.4; font-weight: 600; color: var(--rr-ink); overflow-wrap: anywhere; } /* r2-6 เจ้าของขอเล็กลง: คอม/แท็บเล็ต 20 (เดิม 24) · มือถือ 18 */
.rhr-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13.5px; color: var(--rr-muted); }
.rhr-m { position: relative; display: inline-block; padding-left: 20px; min-width: 0; overflow-wrap: anywhere; }
.rhr a.rhr-proj, .rhr a.rhr-proj:hover { color: var(--rr-blue); font-weight: 600; }
.rhr-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rhr-f { position: relative; display: inline-flex; align-items: center; padding: 5px 12px 5px 32px; border-radius: 10px; background: var(--rr-soft); font-weight: 600; font-size: 13.5px; }
/* r2-6b ป้ายเหนือหัวข้อ: ตลาด (เช่า ฟ้า · ขาย เขียวหัวเป็ด · สีทึบ ต่างจากป้ายสถานะที่เป็นสีอ่อน) + ประเภท (ไอคอนตามประเภท) */
.rhr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rhr-tag { position: relative; display: inline-flex; align-items: center; min-height: 26px; padding: 2px 10px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.rhr-tag-m2 { background: var(--rr-blue); color: #fff; }
.rhr-tag-m1 { background: #0F766E; color: #fff; }
.rhr-tag-type { padding-left: 30px; background: var(--rr-chip); color: var(--rr-ink); }
.rhr-tag-type::before { content: ""; position: absolute; left: 9px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; background: var(--rr-blue); -webkit-mask: var(--rri) no-repeat center / contain; mask: var(--rri) no-repeat center / contain; }
/* r2-5: โครงการ/ทำเล/สถานี 2 ชุด · ใต้หัวข้อ (มือถือ/แท็บเล็ต/คอมจอเตี้ย) หรือบนสุดของการ์ด (คอม) · ข้อมูลห้องอยู่ในการ์ดทุกจอ */
.rhr-meta-c { display: none; }
.rhr-card .rhr-facts { margin-top: 0; gap: 6px; }
.rhr-card .rhr-f { padding: 4px 10px 4px 30px; font-size: 13px; }
.rhr-card .rhr-f::before { left: 10px; }
@media (min-width: 992px) {
  .rhr-meta-h { display: none; }
  .rhr-meta-c { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--rr-line); }
}
/* คอมจอเตี้ย (โน้ตบุ๊ก 1366×768 เบราว์เซอร์เหลือ ~657): การ์ดเต็มใบต้องพอดีจอตอนติดตามลงมา → โครงการ/ทำเล/สถานีกลับไปใต้หัวข้อ (บรรทัดเดียว) */
@media (min-width: 992px) and (max-height: 759px) {
  .rhr-meta-h { display: flex; }
  .rhr-meta-c { display: none; }
}

/* ===== การ์ดราคา / ติดต่อ ===== */
.rhr-card { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--rr-line); border-radius: 16px; background: #fff; box-shadow: 0 6px 22px rgba(20, 30, 80, .08); }
.rhr-mk { display: block; font-size: 13px; color: var(--rr-muted); }
.rhr-price b { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--rr-blue); font-variant-numeric: tabular-nums; }
.rhr-price small { margin-left: 3px; font-size: 14px; color: var(--rr-muted); }
.rhr-charges { margin-top: -6px; font-size: 13px; color: var(--rr-muted); overflow-wrap: anywhere; }
.rhr-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.rhr-s-free { background: #DFF3E7; color: #11603A; }
.rhr-s-soon, .rhr-s-booked { background: #FFEFD2; color: #7A4300; }
.rhr-s-done { background: #E9ECF2; color: #3F4A60; }
.rhr-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--rr-soft); font-size: 13.5px; min-width: 0; }
.rhr-code > span { min-width: 0; overflow-wrap: anywhere; }
.rhr-copy { flex: none; padding: 3px 10px; border: 1px solid var(--rr-line); border-radius: 8px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--rr-blue); cursor: pointer; white-space: nowrap; }
.rhr-upd { font-size: 12.5px; color: var(--rr-muted); }
.rhr-agent { padding-top: 10px; border-top: 1px solid var(--rr-line); font-size: 13.5px; color: var(--rr-muted); overflow-wrap: anywhere; }
.rhr-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 6px 12px; border: 1px solid transparent; border-radius: 12px;
  background: #fff; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.rhr .rhr-line, .rhr .rhr-line:hover, .rhr .rhr-line:focus { background: var(--rr-green); color: #fff; }
.rhr .rhr-tel, .rhr .rhr-tel:hover, .rhr .rhr-tel:focus { background: var(--rr-blue); color: #fff; }
.rhr .rhr-line:hover, .rhr .rhr-tel:hover { filter: brightness(.94); }
.rhr .rhr-ghost, .rhr .rhr-ghost:hover, .rhr .rhr-ghost:focus { border-color: var(--rr-line); color: var(--rr-ink); font-weight: 600; font-size: 14px; min-height: 40px; }
.rhr .rhr-ghost:hover { border-color: #C9D3E6; background: var(--rr-soft); }
.rhr-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rhr-btn-row.rhr-one { grid-template-columns: 1fr; }
.rhr-toast { margin: 0; font-size: 12.5px; color: var(--rr-blue); text-align: center; overflow-wrap: anywhere; }

/* ===== ส่วนเนื้อหา ===== */
.rhr-sec { display: grid; gap: 10px; min-width: 0; padding-top: 16px; border-top: 1px solid var(--rr-line); }
.rhr-sec h2 { margin: 0; font-family: inherit; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--rr-ink); }
.rhr-desc { min-width: 0; overflow-wrap: anywhere; } /* block ไม่ใช่ grid: grid + รีวิว overflow-x = ตอนพับรีวิวโดนบีบให้เลื่อนในตัว (วัดความยาวไม่ได้) */
.rhr-desc > * + * { margin-top: 10px; }
.rhr-desc p { margin: 0; }
.rhr-review { min-width: 0; overflow-x: auto; }
.rhr-review p { margin: 0 0 4px; }
.rhr-review img, .rhr-media img { max-width: 100%; height: auto; border-radius: 10px; }
.rhr-review table { max-width: 100%; }
.rhr-kv b { margin-right: 6px; font-weight: 600; color: var(--rr-muted); }
.rhr-kv a { color: var(--rr-blue); }
.rhr-media { display: grid; gap: 12px; }
.rhr-media video { width: 100%; border-radius: 10px; }
.rhr-media .rhr-btn { justify-self: start; width: auto; }
.rhr-embed { position: relative; min-width: 0; border-radius: 12px; overflow: hidden; }
.rhr-169 { height: 0; padding-bottom: 56.25%; }
.rhr-169 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.rhr-map iframe { display: block; width: 100% !important; height: 320px !important; border: 0; }
.rhr-loc { display: grid; gap: 10px; }
.rhr-lr { position: relative; padding-left: 26px; }
.rhr-lr span { display: grid; }
.rhr-lr small { font-size: 12.5px; color: var(--rr-muted); }
.rhr-places { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--rr-line); border-radius: 12px; }
.rhr-places li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-top: 1px solid var(--rr-line); font-size: 14px; }
.rhr-places li:first-child { border-top: 0; }
.rhr-places li span + span { flex: none; color: var(--rr-muted); }
.rhr-mapbtn { justify-self: start; width: auto; padding: 0 16px; }
.rhr-mapimg { display: block; max-width: 100%; }
.rhr-mapimg img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rr-line); cursor: zoom-in; }
.rhr-h3 { margin: 4px 0 0; font-size: 14px; font-weight: 600; color: var(--rr-muted); }
.rhr .rhz { margin-top: 0; }
.rhr-pb { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.rhr-pb.rhr-pb-noimg { grid-template-columns: minmax(0, 1fr); }
.rhr-pb-img { display: block; height: 0; padding-bottom: 100%; position: relative; border-radius: 12px; overflow: hidden; background: #DDE3EC; }
.rhr-pb-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.rhr-pb-body { display: grid; gap: 6px; min-width: 0; }
.rhr a.rhr-pb-name { font-weight: 600; font-size: 15.5px; color: var(--rr-ink); overflow-wrap: anywhere; }
.rhr a.rhr-pb-name:hover { color: var(--rr-blue); }
.rhr-pb .rhr-m { font-size: 13px; color: var(--rr-muted); }
.rhr-pb-desc { margin: 0; font-size: 13.5px; color: #36405A; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; overflow-wrap: anywhere; }
.rhr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.rhr-pillink { display: inline-flex; align-items: center; padding: 2px 10px; border: 1px solid var(--rr-line); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.rhr a.rhr-pillink, .rhr a.rhr-pillink:hover, .rhr a.rhr-pillink:focus { color: var(--rr-blue); }
.rhr a.rhr-pillink:hover { border-color: #9FB1DF; }
.rhr-pillink.rhr-off { color: #8A94A8; font-weight: 400; border-style: dashed; }
/* ปุ่มดูแผนที่ในกล่องโครงการ: ฟ้าอ่อนให้ต่างจากเพื่อน · ไอคอนแผนที่หน้า + ลูกศรออกนอกเว็บท้าย */
.rhr-pillink.rhr-pillmap { gap: 5px; background: #E6EEFC; border-color: #C9D8F5; }
.rhr a.rhr-pillmap:hover { border-color: #9FB1DF; }
.rhr-pillmap::before, .rhr-pillmap::after { content: ""; flex: none; background: currentColor; -webkit-mask: var(--rri) no-repeat center / contain; mask: var(--rri) no-repeat center / contain; }
.rhr-pillmap::before { width: 14px; height: 14px; }
.rhr-pillmap::after { width: 11px; height: 11px; --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 11 11 5M6.2 5H11v4.8'/%3E%3C/svg%3E"); }
/* ห้องว่างอื่นในโครงการนี้ (r2-3) · คอม/แท็บเล็ต 4 ใบ · มือถือ 2 ใบ */
.rhr-sec h2 small { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--rr-muted); }
.rhr-sib { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rhr a.rhr-sc { display: grid; align-content: start; min-width: 0; border: 1px solid var(--rr-line); border-radius: 12px; overflow: hidden; background: #fff; color: var(--rr-ink); transition: box-shadow .15s, border-color .15s, transform .2s ease; }
.rhr a.rhr-sc:hover { border-color: #C9D3E6; box-shadow: 0 6px 18px rgba(20, 30, 80, .10); }
/* ชี้เมาส์ = การ์ดลอยขึ้นนิดหน่อย (เจ้าของขอ 2026-10-09 · ชุดเดียวกับ rh_cards.css) · เฉพาะเครื่องที่ชี้เมาส์ได้ · ลดการเคลื่อนไหว = ไม่ลอย */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rhr a.rhr-sc:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(20, 30, 80, .14); }
}
.rhr-sc-img { position: relative; display: block; height: 0; padding-bottom: 75%; background: #DDE3EC; }
.rhr-sc-img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rhr-sc-b { display: grid; gap: 2px; padding: 8px 10px 10px; min-width: 0; }
.rhr-sc-b > b { font-size: 16px; line-height: 1.35; color: var(--rr-blue); }
.rhr-sc-b > b small { margin-left: 2px; font-size: 11.5px; font-weight: 400; color: var(--rr-muted); }
.rhr-sc-t, .rhr-sc-m { font-size: 12.5px; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhr-sc-t { font-weight: 600; }
.rhr-sc-m { color: var(--rr-muted); }
.rhr-sc .rhr-pill { justify-self: start; max-width: 100%; margin-top: 4px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhr a.rhr-all, .rhr a.rhr-all:hover { justify-self: start; font-size: 14px; font-weight: 600; color: var(--rr-blue); }
/* โครงการใกล้เคียง (rhn_nearby ของ 3k · CSS หลักใน rh_cards.css) · r2-6 อยู่ช่วงที่ 2 (คอม = ฝั่งขวาใต้การ์ดเต็ม · มือถือ = ท้ายเนื้อหา)
   ความสูงจอ (วัด r2-6: รายชื่อ 4 อัน ~466–484 · navbar+ช่องว่าง 84 = ~570 พอดีจอเตี้ยสุดที่เทส 657): 4 อันทุกจอ
   (เดิม < 760 = 3 อัน ตอนมีกล่องติดต่อย่อ ~150 อยู่ด้านบน · กล่องย่อตัดออก + เจ้าของเลือก "4 ทุกจอ" 2026-10-09) */
.rhr .rhn { margin-top: 0; }
/* แบนเนอร์ท้ายหน้า */
.rhr-ads { display: grid; gap: 12px; margin-top: 28px; }
.rhr-ad { min-width: 0; }
.rhr-ad img { display: block; width: 100%; height: auto; border-radius: 12px; }
.rhr-ad p { margin: 6px 0 0; font-size: 13.5px; color: var(--rr-muted); text-align: center; }
@media (min-width: 768px) { .rhr-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rhr-ad:only-child { grid-column: 1 / -1; } }
.rhr-none { padding: 40px 15px 60px; display: grid; gap: 14px; justify-items: start; }
.rhr-none p { margin: 0; font-size: 17px; }
.rhr-none .rhr-btn { width: auto; padding: 0 18px; }

/* ===== ไอคอน (CSS mask · สีตามตัวอักษร) ===== */
.rhr-m::before, .rhr-f::before, .rhr-lr::before, .rhr-btn[class*="rhr-i-"]::before { content: ""; background: currentColor;
  -webkit-mask: var(--rri) no-repeat center / contain; mask: var(--rri) no-repeat center / contain; }
.rhr-m::before { position: absolute; left: 0; top: 3px; width: 15px; height: 15px; }
.rhr-f::before { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--rr-blue); background: var(--rr-blue); }
.rhr-lr::before { position: absolute; left: 0; top: 4px; width: 17px; height: 17px; background: var(--rr-blue); }
.rhr-btn[class*="rhr-i-"]::before { flex: none; width: 18px; height: 18px; }
.rhr-i-bld, .rhr-ft-bld { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 14.5V3.2L9 1.5v13M9 6.5l4.5 1.5v6.5M1 14.5h14'/%3E%3Cpath d='M5 5h1.5M5 7.8h1.5M5 10.6h1.5M11 10h.5M11 12.3h.5' stroke-linecap='round'/%3E%3C/svg%3E"); }
.rhr-i-pin { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Cpath d='M8 14.5s4.5-4.2 4.5-7.8A4.5 4.5 0 0 0 3.5 6.7C3.5 10.3 8 14.5 8 14.5z'/%3E%3Ccircle cx='8' cy='6.7' r='1.6'/%3E%3C/svg%3E"); }
.rhr-i-train { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='4' y='1.8' width='8' height='9.5' rx='2.2'/%3E%3Cpath d='M4 7h8M6 14.2l1-2.9M10 14.2l-1-2.9'/%3E%3C/svg%3E"); }
.rhr-f-area, .rhr-f-land { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5'/%3E%3Cpath d='M5.5 10.5l5-5M8 5.5h2.5V8'/%3E%3C/svg%3E"); }
.rhr-f-room { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1.5 12.5v-8M1.5 10h13v2.5M14.5 10V8.2a2 2 0 0 0-2-2H7V10'/%3E%3Ccircle cx='4.3' cy='7.7' r='1.3'/%3E%3C/svg%3E"); }
.rhr-f-bath { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M2 8h12v1.5a3.5 3.5 0 0 1-3.5 3.5h-5A3.5 3.5 0 0 1 2 9.5V8zM4 8V3.8a1.8 1.8 0 0 1 3.2-1.2'/%3E%3C/svg%3E"); }
.rhr-f-floor, .rhr-f-bld { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M8 2l6 3-6 3-6-3 6-3zM2 8l6 3 6-3M2 11l6 3 6-3'/%3E%3C/svg%3E"); }
.rhr-f-type, .rhr-ft-home { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2 7.3 8 2.5l6 4.8v6.2a.7.7 0 0 1-.7.7H10v-4H6v4H2.7a.7.7 0 0 1-.7-.7V7.3z'/%3E%3C/svg%3E"); }
.rhr-ft-land { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 13.5h13M3 13.5l2.8-4.3 2.2 2.6 2.4-4.3 3.1 6'/%3E%3Ccircle cx='11.5' cy='3.8' r='1.5'/%3E%3C/svg%3E"); }
.rhr-ft-shop { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 7v7h11V7M1.5 4l1.5-2.5h10L14.5 4v1a1.8 1.8 0 0 1-3.3 1 1.8 1.8 0 0 1-3.2 0 1.8 1.8 0 0 1-3.2 0A1.8 1.8 0 0 1 1.5 5V4zM6.5 14v-4h3v4'/%3E%3C/svg%3E"); }
.rhr-i-line { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 3.5C6.8 3.5 2.6 6.9 2.6 11c0 3.7 3.3 6.8 7.8 7.4.3.1.7.2.8.5.1.3.1.6 0 .9l-.1.8c0 .2-.2.9.8.5s5.3-3.1 7.2-5.3c1.3-1.4 1.9-2.9 1.9-4.6 0-4.2-4.2-7.7-9.4-7.7z'/%3E%3C/svg%3E"); }
.rhr-i-tel { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.rhr-i-map { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M9 4 3.5 6v14L9 18l6 2 5.5-2V4L15 6 9 4zM9 4v14M15 6v14'/%3E%3C/svg%3E"); }
.rhr-i-share { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='18' cy='5.5' r='2.5'/%3E%3Ccircle cx='6' cy='12' r='2.5'/%3E%3Ccircle cx='18' cy='18.5' r='2.5'/%3E%3Cpath d='m8.2 10.8 7.6-4M8.2 13.2l7.6 4'/%3E%3C/svg%3E"); }
.rhr-i-link { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E"); }
.rhr-i-dl { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5 12 15l5-4.5M4.5 19.5h15'/%3E%3C/svg%3E"); }

/* ===== แท็บเล็ต / มือถือ ===== */
@media (max-width: 991px) {
  .rhr-card { box-shadow: none; }
  /* คอลัมน์เดียว: การ์ดต่อจากหัวข้อ · โครงการใกล้เคียงท้ายเนื้อหา (ช่อง side2 ของ grid ฐาน) */
}
@media (max-width: 767px) { .rhr-sib { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== r2-4 แถบติดต่อติดล่างจอ (< 992 = การ์ดไม่ได้ติดข้าง) · mockup [LINE @mproperty] [โทร] [แชร์] ===== */
.rhr-bar { display: none; }
.rhr-cnt-m { display: none; }
.rhr-btn.rhr-sq { padding: 0; }
@media (max-width: 991px) {
  .rhr-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--rr-line); box-shadow: 0 -6px 18px rgba(20, 30, 80, .08); }
  .rhr-bar.rhr-bar3 { grid-template-columns: minmax(0, 1fr) 96px 44px; }
  .rhr-bar .rhr-btn { min-height: 46px; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rhr-has-bar .rhr-card .rhr-line, .rhr-has-bar .rhr-card .rhr-tel { display: none; } /* อยู่ในแถบล่างแล้ว */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } /* ท้ายเว็บไม่โดนแถบบัง (ไฟล์นี้โหลดเฉพาะหน้าห้อง) */
}
/* r2-5: ปุ่มลอย "ติดต่อเรา" ของเว็บ (index_footer.php ใช้ทุกหน้า) ซ่อนเฉพาะหน้าห้องทุกจอ (เจ้าของเลือก 2026-10-08 · บังปุ่มในการ์ด · หน้าห้องมี LINE/โทรทุกจอแล้ว) · ไฟล์นี้โหลดเฉพาะหน้าห้อง */
#chat { display: none !important; }
/* ===== r2-4 มือถือ: รูปเต็มกว้างปัดได้ "k / n" · รายละเอียดพับ ===== */
@media (max-width: 767px) {
  .rhr-gal { position: relative; }
  .rhr-multi .rhr-main { display: none; }
  .rhr-multi .rhr-thumbs { grid-auto-columns: 100%; gap: 0; margin: 0 -15px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .rhr-multi .rhr-th { padding-bottom: 75%; border: 0; border-radius: 0; background: #E9EDF3; scroll-snap-align: start; cursor: zoom-in; }
  .rhr-multi .rhr-th img { object-fit: contain; }
  .rhr-multi .rhr-cnt-m { display: block; right: 10px; bottom: 10px; }
  .rhr-desc.rhr-fold { max-height: 15em; overflow: hidden; position: relative; }
  .rhr-desc.rhr-fold::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
  .rhr-desc.rhr-fold.rhr-open { max-height: none; }
  .rhr-desc.rhr-fold.rhr-open::after { display: none; }
  .rhr-more { justify-self: start; padding: 4px 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--rr-blue); cursor: pointer; }
}
@media (max-width: 767px) {
  .rhr { font-size: 14.5px; padding-top: 0; }
  .rhr-grid { gap: 14px; }
  .rhr .rhr-title { font-size: 18px; }
  .rhr-main { border-radius: 12px; }
  .rhr-thumbs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 22%; overflow-x: auto; scrollbar-width: none; }
  .rhr-thumbs::-webkit-scrollbar { display: none; }
  .rhr-th-x { display: block; }
  .rhr-more-n { display: none; }
  .rhr-f { padding: 4px 10px 4px 30px; font-size: 13px; }
  .rhr-price b { font-size: 24px; }
  .rhr-pb { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .rhr-map iframe { height: 260px !important; }
  .rhr-pillink { min-height: 32px; padding: 4px 12px; }
}
@media (prefers-reduced-motion: reduce) { .rhr * { scroll-behavior: auto; } }

/* ===== r2-7 แผงแชร์ (แทน #share_modal เดิม) · คอม = กล่องเล็กใต้ปุ่ม · จอ < 768 / แถบล่าง = แผ่นเลื่อนขึ้นจากล่าง · อยู่ใน .rhr (ใช้ตัวแปรสีชุดเดียวกัน) ===== */
.rhr-sh-back { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; background: rgba(15, 22, 45, .38); }
.rhr-sh { position: fixed; z-index: 1060; width: 340px; max-width: calc(100vw - 24px); display: grid; gap: 14px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px rgba(15, 22, 45, .28); font-size: 15px; line-height: 1.5; }
.rhr-sh[hidden], .rhr-sh-back[hidden] { display: none; } /* class ตั้ง display แล้ว → hidden ต้องชนะเอง */
.rhr-sh-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rhr-sh-h b { font-size: 16px; }
.rhr-sh-x { position: relative; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--rr-muted); cursor: pointer; }
.rhr-sh-x::before, .rhr-sh-x::after { content: ""; position: absolute; left: 8px; right: 8px; top: 15px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
.rhr-sh-x::after { transform: rotate(-45deg); }
.rhr-sh-room { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: var(--rr-soft); }
.rhr-sh-room.rhr-noimg { grid-template-columns: minmax(0, 1fr); }
.rhr-sh-room img { display: block; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.rhr-sh-room > div { display: grid; gap: 2px; min-width: 0; }
.rhr-sh-room span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.rhr-sh-room small { font-size: 13px; font-weight: 700; color: var(--rr-blue); }
.rhr-sh-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rhr a.rhr-sh-app, .rhr a.rhr-sh-app:hover, .rhr a.rhr-sh-app:focus { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--rr-ink); text-align: center; }
@media (hover: hover) { .rhr a.rhr-sh-app:hover { background: var(--rr-soft); } }
.rhr-sh-ic { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; color: #fff; }
.rhr-sh-ic::before { content: ""; position: absolute; left: 11px; top: 11px; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--rri) no-repeat center / contain; mask: var(--rri) no-repeat center / contain; }
.rhr-sh-ic.rhr-i-line { background: var(--rr-green); }
.rhr-sh-ic.rhr-i-fb { background: #1877F2; }
.rhr-sh-ic.rhr-i-mail { background: #5B6578; }
.rhr-i-fb { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.5-1.5h1.6V4.4c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.2H7.8v3h2.6V21h3.1z'/%3E%3C/svg%3E"); }
.rhr-i-mail { --rri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6.5 8.5-6.5'/%3E%3C/svg%3E"); }
.rhr-sh-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 6px 6px 12px; border: 1px solid var(--rr-line); border-radius: 12px; }
.rhr-sh-link input { min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--rr-muted); }
.rhr-sh-link input:focus { outline: none; }
.rhr .rhr-sh-copy, .rhr .rhr-sh-copy:hover, .rhr .rhr-sh-copy:focus { width: auto; min-height: 36px; padding: 4px 14px; border-radius: 9px; background: var(--rr-blue); color: #fff; font-size: 14px; white-space: nowrap; }
.rhr-sh.rhr-sh-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none; border-radius: 18px 18px 0 0; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.rhr-sh.rhr-sh-sheet::before { content: ""; justify-self: center; width: 40px; height: 4px; margin-bottom: -4px; border-radius: 4px; background: var(--rr-line); }

/* ===== r2-8 ดูรูปเต็มจอ (PhotoSwipe 5.4.4 · CSS หลัก vendor/photoswipe/5.4.4/photoswipe.css โหลดตอนกดครั้งแรก) · ส่วนปรับเอง · .pswp อยู่ใต้ body (นอก .rhr) ===== */
.pswp { --pswp-bg: #0B0F1A; }
.pswp__counter { height: 28px; margin-top: 16px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 600; line-height: 28px; text-shadow: none; }
.rhr-ps-thumbs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 6px; padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-x: auto; scrollbar-width: none; }
.rhr-ps-thumbs::-webkit-scrollbar { display: none; }
.rhr-ps-thumbs > :first-child { margin-left: auto; } .rhr-ps-thumbs > :last-child { margin-right: auto; } /* พอดีจอ = อยู่กลาง · ล้นจอ = เลื่อนได้ไม่ตกขอบซ้าย */
.rhr-ps-thumbs button { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #222; opacity: .5; cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; }
.rhr-ps-thumbs button[aria-current="true"] { opacity: 1; outline-color: #fff; }
.rhr-ps-thumbs button:focus-visible { outline-color: #8FB0FF; opacity: 1; }
.rhr-ps-thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* มือถือมีแถบด้วย (เจ้าของ 2026-10-09) · รูปย่อเล็กลง · แถบอยู่นอกพื้นที่ปัดรูป (appendTo root) → เลื่อนแนวนอนเองได้ (.pswp ตั้ง touch-action: none) */
.rhr-ps-thumbs { z-index: 2; touch-action: pan-x; overscroll-behavior-x: contain; }
@media (max-width: 767px) { .rhr-ps-thumbs { gap: 5px; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); } .rhr-ps-thumbs button { width: 52px; height: 39px; border-radius: 5px; } }