/* ช่องค้นหาช่องเดียว หน้าเว็บ (2026-10-07 · index_search_bar.php + rh_search_ui.js) · ทุก class ขึ้นต้น rhs- (กันชน Bootstrap)
   strip = แถบบางใต้เมนูจอคอม (≥1200px · ไม่ลอยค้าง) · modal = กล่องค้นหามือถือ · hero = หน้าแรก */
.rhs { --rhs-navy: #141B4C; --rhs-blue: #4267B2; --rhs-ink: #334257; --rhs-line: #cfd5e2; --rhs-soft: #eef2fb; --rhs-mark: #fff1a8; --rhs-muted: #7a8193;
  font-size: 15px; color: var(--rhs-ink); margin: 0; }
.rhs *, .rhs-sheet * { box-sizing: border-box; }
.rhs-seg { display: inline-flex; background: #e9ecf3; border-radius: 20px; padding: 3px; gap: 2px; flex: none; }
.rhs-seg button { border: 0; background: none; font: inherit; color: #555; padding: 5px 16px; border-radius: 17px; cursor: pointer; line-height: 1.3; }
.rhs-seg button[aria-pressed="true"] { background: var(--rhs-blue); color: #fff; }
.rhs-fld { position: relative; min-width: 0; }
/* .rhs .rhs-q (0,2,0) ชนะ index.php ที่ตั้ง input[type=text] { border: none } (0,1,1) */
.rhs .rhs-q, .rhs-sheet .rhs-q { width: 100%; height: 40px; border: 1px solid var(--rhs-line); border-radius: 20px; padding: 0 36px 0 38px; font: inherit; color: var(--rhs-ink); background: #fff; outline: none; text-overflow: ellipsis; box-shadow: none; }
.rhs .rhs-q:focus, .rhs-sheet .rhs-q:focus { border-color: var(--rhs-blue); box-shadow: 0 0 0 3px rgba(66, 103, 178, .18); }
.rhs .rhs-q.rhs-picked { background: var(--rhs-soft); border-color: var(--rhs-blue); }
.rhs-ico { position: absolute; left: 13px; top: 12px; width: 16px; height: 16px; color: #8a8f99; pointer-events: none; }
.rhs-clr { position: absolute; right: 7px; top: 8px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: #dfe4f2; color: #334; font: 15px/24px sans-serif; cursor: pointer; padding: 0; }
.rhs-clr[hidden] { display: none; }
.rhs .rhs-sel { height: 40px; border: 1px solid var(--rhs-line); border-radius: 20px; padding: 0 30px 0 14px; font: inherit; color: var(--rhs-ink); min-width: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23777'/%3E%3C/svg%3E") no-repeat right 12px center; }
.rhs .rhs-sel.rhs-auto { background-color: var(--rhs-soft); border-color: #9fb1df; }
.rhs-go { height: 40px; border: 0; border-radius: 20px; background: var(--rhs-blue); color: #fff; font: inherit; padding: 0 22px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.rhs-go svg { width: 15px; height: 15px; }
.rhs-go:hover { background: #3a5ca0; }
.rhs-seg button:focus-visible, .rhs-sel:focus-visible, .rhs-go:focus-visible, .rhs-clr:focus-visible, .rhs-opt:focus-visible, .rhs-back:focus-visible, .rhs-more:focus-visible { outline: 3px solid rgba(66, 103, 178, .4); outline-offset: 1px; }
.rhs-opts { display: contents; }
.rhs-extra { display: contents; }
.rhs-extra[hidden] { display: none; }
.rhs-more { font: inherit; font-size: 13.5px; color: var(--rhs-blue); background: none; border: 0; padding: 2px 4px; cursor: pointer; justify-self: start; text-align: left; }

/* ช่วงราคา: ปุ่ม + กล่องเล็ก (พิมพ์ต่ำสุด/สูงสุด + ช่วงสำเร็จรูป) */
.rhs-price { position: relative; min-width: 0; }
.rhs .rhs-price-btn { width: 100%; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 38px; }
.rhs .rhs-price-btn.rhs-has { background-color: var(--rhs-soft); border-color: #9fb1df; }
.rhs-price-pop { position: absolute; left: 0; top: 46px; z-index: 40; width: 320px; background: #fff; border: 1px solid var(--rhs-line); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20, 30, 80, .18); padding: 14px; display: grid; gap: 12px; text-align: left; }
.rhs-price-pop[hidden] { display: none; }
.rhs-price-in { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.rhs-price-in label { display: grid; gap: 4px; margin: 0; font-weight: normal; font-size: 12.5px; color: var(--rhs-muted); min-width: 0; }
.rhs .rhs-price-in input { width: 100%; height: 38px; border: 1px solid var(--rhs-line); border-radius: 10px; padding: 0 10px; font: inherit; font-size: 15px; color: var(--rhs-ink); background: #fff; box-shadow: none; }
.rhs .rhs-price-in input:focus { outline: none; border-color: var(--rhs-blue); box-shadow: 0 0 0 3px rgba(66, 103, 178, .18); }
.rhs-dash { padding-bottom: 9px; color: var(--rhs-muted); }
.rhs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rhs-chip { border: 1px solid var(--rhs-line); background: #fff; color: var(--rhs-ink); border-radius: 16px; padding: 4px 11px; font: inherit; font-size: 13.5px; cursor: pointer; }
.rhs-chip:hover { border-color: var(--rhs-blue); color: var(--rhs-blue); }
.rhs-chip[aria-pressed="true"] { background: var(--rhs-blue); border-color: var(--rhs-blue); color: #fff; }
.rhs-chip[hidden] { display: none; }
.rhs-price-act { display: flex; justify-content: space-between; gap: 8px; }
.rhs-price-clear { border: 0; background: none; color: var(--rhs-muted); font: inherit; font-size: 14px; cursor: pointer; padding: 6px 4px; }
.rhs-price-ok { border: 0; background: var(--rhs-blue); color: #fff; font: inherit; font-size: 14px; border-radius: 16px; padding: 6px 20px; cursor: pointer; }
.rhs-chip:focus-visible, .rhs-price-ok:focus-visible, .rhs-price-clear:focus-visible, .rhs .rhs-price-btn:focus-visible { outline: 3px solid rgba(66, 103, 178, .4); outline-offset: 1px; }

/* รายชื่อ (ใต้ช่อง + เต็มจอ) */
.rhs-drop { position: absolute; left: 0; right: 0; top: 44px; z-index: 30; background: #fff; border: 1px solid var(--rhs-line); border-radius: 12px; box-shadow: 0 8px 24px rgba(20, 30, 80, .18); max-height: 380px; overflow-y: auto; padding: 4px; text-align: left; }
.rhs-grp { font-size: 12.5px; color: var(--rhs-muted); padding: 8px 10px 3px; display: flex; gap: 6px; align-items: center; }
.rhs-grp svg { width: 13px; height: 13px; flex: none; }
.rhs-opt { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; color: var(--rhs-ink); padding: 7px 10px; border-radius: 8px; cursor: pointer; line-height: 1.4; }
.rhs-opt.rhs-on, .rhs-opt:hover { background: var(--rhs-soft); }
.rhs-opt mark { background: var(--rhs-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.rhs-sm { color: #8a8f99; font-size: 12.5px; margin-left: 6px; }
.rhs-kw { color: var(--rhs-blue); border-top: 1px solid #eee; border-radius: 0 0 8px 8px; margin-top: 2px; }
.rhs-hint { font-size: 13px; color: #8a8f99; padding: 8px 10px; }
.rhs-sheet { --rhs-blue: #4267B2; --rhs-ink: #334257; --rhs-line: #cfd5e2; --rhs-soft: #eef2fb; --rhs-mark: #fff1a8; --rhs-muted: #7a8193;
  position: fixed; inset: 0; z-index: 2000; background: #fff; display: flex; flex-direction: column; font-size: 16px; color: var(--rhs-ink);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.rhs-sheet-h { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid #e3e5ea; flex: none; }
.rhs-sheet-h .rhs-fld { flex: 1; }
.rhs-sheet .rhs-q { height: 42px; border-radius: 21px; font-size: 16px; }
.rhs-sheet .rhs-ico { top: 13px; }
.rhs-back { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f0f2f7; font-size: 19px; cursor: pointer; flex: none; color: #223; }
.rhs-sheet-list { overflow-y: auto; flex: 1; padding: 2px 6px 16px; -webkit-overflow-scrolling: touch; }
.rhs-sheet .rhs-opt { padding: 12px 10px; border-bottom: 1px solid #f0f1f4; border-radius: 0; }
.rhs-sheet .rhs-kw { border-top: 0; }
.rhs-sheet .rhs-grp { padding-top: 12px; }
html.rhs-lock, html.rhs-lock body { overflow: hidden; }
/* แผ่นตัวกรองเต็มจอ (มือถือ/แท็บเล็ต หน้ารายการ · ปุ่ม "ตัวกรอง") · หมวดเรียงลง · ปุ่มล่างติดจอ */
.rhs-fsheet { padding-bottom: 0; }
.rhs-fs-h { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid #e3e5ea; flex: none; }
.rhs-fs-h b { flex: 1; text-align: center; font-size: 17px; padding-right: 48px; }
.rhs-fs-h .rhs-back { font-size: 24px; line-height: 40px; }
.rhs-fs-body { flex: 1; overflow-y: auto; padding: 2px max(16px, calc((100% - 640px) / 2)) 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.rhs-fs-sec { padding: 14px 0 6px; border-bottom: 1px solid #f0f1f4; }
.rhs-fs-sec:last-child { border-bottom: 0; }
.rhs-fs-t { font-weight: bold; font-size: 15px; margin-bottom: 10px; }
.rhs-fs-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #e9ecf3; border-radius: 22px; padding: 3px; }
.rhs-fs-seg .rhs-fs-chip { border: 0; background: none; border-radius: 19px; color: #555; }
.rhs-fs-seg .rhs-fs-chip[aria-pressed="true"] { background: var(--rhs-blue); color: #fff; font-weight: normal; }
.rhs-fs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rhs-fs-chip { min-height: 38px; padding: 0 14px; border: 1px solid var(--rhs-line); border-radius: 19px; background: #fff; font: inherit; font-size: 15px; color: var(--rhs-ink); cursor: pointer; }
.rhs-fs-chip[aria-pressed="true"] { background: var(--rhs-soft); border-color: var(--rhs-blue); color: var(--rhs-blue); font-weight: bold; }
.rhs-fs-chip[hidden] { display: none; }
.rhs-fs-chip:focus-visible, .rhs-fs-go:focus-visible, .rhs-fs-clear:focus-visible { outline: 3px solid rgba(66, 103, 178, .4); outline-offset: 1px; }
.rhs-fs-price { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; color: var(--rhs-muted); }
.rhs-fs-price input { width: 100%; height: 42px; border: 1px solid var(--rhs-line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 16px; color: var(--rhs-ink); background: #fff; box-shadow: none; }
.rhs-fs-price input:focus { outline: none; border-color: var(--rhs-blue); box-shadow: 0 0 0 3px rgba(66, 103, 178, .18); }
.rhs-fs-f { display: flex; gap: 10px; padding: 10px max(16px, calc((100% - 640px) / 2)) calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #e3e5ea; flex: none; background: #fff; }
.rhs-fs-clear { flex: 1; height: 46px; border: 1px solid var(--rhs-line); border-radius: 23px; background: #fff; font: inherit; color: var(--rhs-ink); cursor: pointer; }
.rhs-fs-go { flex: 2; height: 46px; border: 0; border-radius: 23px; background: var(--rhs-blue); color: #fff; font: inherit; font-weight: bold; cursor: pointer; }

/* strip: แถบบางใต้เมนู จอคอมเท่านั้น (เมนูจอคอม = visible-lg) */
.rhs--strip { position: relative; z-index: 1020; display: flex; align-items: center; gap: 8px; background: #f3f5fa; border-bottom: 1px solid #e3e6ee;
  padding: 9px max(15px, calc((100% - 1140px) / 2)); }
.rhs--strip .rhs-fld { flex: 1 1 340px; }
.rhs--strip .rhs-sel, .rhs--strip .rhs-price { flex: 0 1 165px; }
.rhs--strip .rhs-extra .rhs-sel { flex: 0 1 120px; }
/* หน้ารายการ: ลอยตามใต้เมนู (เมนูจอคอม fixed สูง 64px · JS ปรับ top ตามความสูงจริง) */
.rhs--strip.rhs--sticky { position: -webkit-sticky; position: sticky; top: 64px; transition: box-shadow .2s; }
.rhs--strip.rhs--sticky.rhs-stuck { box-shadow: 0 4px 14px rgba(20, 30, 80, .12); }
@media (max-width: 1199px) { .rhs--strip { display: none; } }
/* ปุ่มตัวกรอง: เฉพาะแถบลอยแบบย่อ (มือถือ/แท็บเล็ต หน้ารายการ) */
.rhs-filter { display: none; height: 40px; border: 1px solid var(--rhs-line); border-radius: 20px; background: #fff; color: var(--rhs-ink); font: inherit; padding: 0 14px;
  align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; flex: none; position: relative; }
.rhs-filter svg { width: 16px; height: 16px; }
.rhs-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--rhs-blue); color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; }
/* มือถือ/แท็บเล็ต (เมนูมือถือโผล่ถึง 1200px): หน้ารายการ 2 แถว (เจ้าของขอ 2026-10-07 แบบ LivingInsider · เลือกแบบ ค)
   แถว 1 ช่องค้นหา + ตัวกรอง (ลอยตาม) · แถว 2 เช่า/ขาย + ประเภท + ราคา (เห็นตอนอยู่บนสุด · เลื่อนลงแล้วจางหาย) · แตะแล้วค้นทันที (JS goIfCompact)
   ห้องนอน/ห้องน้ำ อยู่ในกล่องตัวกรอง · พื้นแถว 1 = 56px (บน 8 + ช่อง 40 + ช่องไฟ 8) */
@media (max-width: 1199px) {
  .rhs--strip.rhs--sticky { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "fld fld filter" "seg opts opts";
    padding: 8px 12px; gap: 8px; top: 68px; }
  .rhs--sticky .rhs-fld { grid-area: fld; }
  .rhs--sticky .rhs-filter { grid-area: filter; display: inline-flex; }
  .rhs--sticky .rhs-seg { grid-area: seg; height: 40px; }
  .rhs--sticky .rhs-seg button { padding: 0 13px; }
  .rhs--sticky .rhs-opts { grid-area: opts; display: flex; gap: 8px; min-width: 0; }
  .rhs--sticky .rhs-opts > .rhs-sel, .rhs--sticky .rhs-opts > .rhs-price { flex: 0 1 200px; min-width: 0; }
  .rhs--sticky .rhs-sel { padding: 0 26px 0 12px; background-position: right 10px center; }
  .rhs--sticky .rhs-extra, .rhs--sticky .rhs-go { display: none; }
  .rhs--sticky .rhs-price-pop { left: auto; right: 0; width: 320px; max-width: calc(100vw - 24px); }
  .rhs--sticky .rhs-price-in input { font-size: 16px; }
  .rhs--sticky .rhs-seg, .rhs--sticky .rhs-opts { transition: opacity .15s, visibility .15s; }
  /* เลื่อนลง: แถว 2 จางหาย · พื้น+เงาเหลือแค่แถว 1 · ส่วนที่ว่างกดทะลุถึงการ์ดห้องได้ (ไม่ยุบความสูง = หน้าไม่กระตุก) */
  .rhs--strip.rhs--sticky.rhs-stuck { box-shadow: none; border-bottom-color: transparent; pointer-events: none;
    background: linear-gradient(#f3f5fa, #f3f5fa) 0 0 / 100% 56px no-repeat, linear-gradient(rgba(20, 30, 80, .13), rgba(20, 30, 80, 0)) 0 56px / 100% 8px no-repeat; }
  .rhs-stuck .rhs-fld, .rhs-stuck .rhs-filter { pointer-events: auto; }
  .rhs-stuck .rhs-seg, .rhs-stuck .rhs-opts { opacity: 0; visibility: hidden; }
}
@media (max-width: 360px) { .rhs--sticky .rhs-filter span { display: none; } .rhs--sticky .rhs-filter { padding: 0 11px; } }

/* modal: กล่องค้นหามือถือ (แนวตั้ง) */
.rhs--modal { display: grid; gap: 10px; padding: 4px 2px; }
.rhs--modal .rhs-seg { justify-self: start; }
.rhs--modal .rhs-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
/* มือถือ: กล่องราคากางในกล่องค้นหา (ไม่ลอยทับหน้า) · display: contents ให้ปุ่มอยู่ช่องเดิม กล่องลงแถวใหม่เต็มกว้าง */
.rhs--modal .rhs-price { display: contents; }
.rhs--modal .rhs-price-pop { position: static; grid-column: 1 / -1; width: auto; box-shadow: none; background: #f7f8fb; }
.rhs--modal .rhs-more { grid-column: 1 / -1; }
.rhs--modal .rhs-extra { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 8px; }
.rhs--modal .rhs-extra[hidden] { display: none; }
.rhs--modal .rhs-sel { width: 100%; }
.rhs--modal .rhs-go { width: 100%; height: 44px; border-radius: 22px; font-size: 16px; }

/* hero: หน้าแรก (การ์ดขาวบนรูปพื้นหลัง) */
.rhs--hero { background: #fff; border-radius: 20px; box-shadow: 0 6px 24px rgba(20, 30, 80, .18); padding: 16px; display: grid; gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; margin-bottom: 20px; }
.rhs--hero .rhs-q { height: 46px; border-radius: 23px; font-size: 16px; }
.rhs--hero .rhs-ico { top: 15px; } .rhs--hero .rhs-clr { top: 11px; } .rhs--hero .rhs-drop { top: 50px; }
.rhs--hero .rhs-opts { display: flex; gap: 10px; grid-column: 1 / -1; order: 3; }
.rhs--hero .rhs-sel, .rhs--hero .rhs-price { flex: 0 1 220px; }
.rhs--hero .rhs-go { height: 46px; border-radius: 23px; padding: 0 28px; font-size: 16px; }
@media (max-width: 767px) {
  .rhs--hero { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .rhs--hero .rhs-seg { justify-self: start; }
  .rhs--hero .rhs-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; order: 0; position: relative; }
  .rhs--hero .rhs-price { display: contents; }
  .rhs--hero .rhs-price-pop { position: static; grid-column: 1 / -1; width: auto; box-shadow: none; background: #f7f8fb; }
  .rhs--hero .rhs-sel { width: 100%; }
  .rhs--hero .rhs-go { width: 100%; }
}