/* ห้องที่เก็บไว้ + เทียบ (13 พ.ย. 2569 · rh_saved.js) · ปุ่มบนการ์ด · ไอคอนหัวเว็บ · แถบเทียบล่างจอ · ข้อความเด้ง */
/* ปุ่มบนการ์ด: มุมขวาล่างของรูป (ขวาบนมีป้าย "ใหม่"/"อัปเดต" อยู่แล้ว) · 11-13 เจ้าของ "ใหญ่ไป บังรูป ทำเป็นกระจก" → 30px กระจกฝ้า ไอคอนขาวมีเงา (เดิมกลมขาวทึบ 36) · ที่แตะจริง 44 */
/* 11-13 เจ้าของเคาะแบบ ข (ภาพเทียบ 3 แบบ): ปุ่มขวาบน (ที่คั่นขวาสุด) · ป้ายทั้งหมดไปซ้ายบน: "แนะนำ" บรรทัดแรก "ใหม่/อัปเดต" บรรทัด 2 · ไม่มีแนะนำ = ใหม่/อัปเดตขึ้นบรรทัดแรกแทน
   (เดิม ใหม่/อัปเดต อยู่ขวาบน = ชนปุ่ม) · ป้ายสถานะบนรูป (ติดจอง/เช่าแล้ว/ขายแล้ว) ยังซ้ายบนที่เดิม · กล่องป้ายเว้นขวา 76px ให้ปุ่ม 2 ปุ่ม */
.rhc .rsv-acts { grid-area: img; justify-self: end; align-self: start; z-index: 2; margin: 8px; display: flex; gap: 6px; }   /* 11-13 เจ้าของ "ห่างไปหน่อย" 10 → 6 */
.rhc .rhc-flags { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; margin-right: 72px; }
.rhc .rhc-flags .rhc-rec { margin-right: 0; }
.rhv--side .rhc .rhc-flags { margin-right: 8px; }   /* กล่องข้างไม่มีปุ่ม */
.rsv-b { position: relative; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: rgba(14, 30, 61, .28); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(6px) saturate(140%); backdrop-filter: blur(6px) saturate(140%); }
.rsv-b::before { content: ""; position: absolute; inset: -9px -3px; border-radius: 12px; }   /* ที่แตะ: สูง 44 · ข้างขยายแค่ 3 (ห่างกัน 6 = ไม่แย่งกัน) */
.rsv-b .rsv-i { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .45)); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rsv-b { background: rgba(14, 30, 61, .5); } }
/* 11-13 เจ้าของ "เล็กได้อีก" → 26px · "กดแล้วใส ดูเหมือนไม่กด" → กดแล้ว = กลับขั้ว: วงขาวทึบ + ไอคอนกรมท่าทึบ (ไม่กด = กระจกเข้ม ไอคอนเส้นขาว) เห็นต่างทุกรูป */
.rsv-b[aria-pressed="true"] { background: #fff; border-color: #fff; color: #0E1E3D; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); -webkit-backdrop-filter: none; backdrop-filter: none; }
.rsv-b[aria-pressed="true"] .rsv-i { filter: none; }
.rsv-b[aria-pressed="true"] .rsv-i { fill: currentColor; }

.rsv-b:focus-visible { outline: 3px solid #f97316; outline-offset: 2px; }
.rhv--side .rsv-acts { display: none; }   /* กล่องข้างรูปเล็ก = ไม่ใส่ (รก) */
/* ไอคอนหัวเว็บ */
.rnav-saved { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; color: var(--rnav-navy, #0E1E3D) !important; flex: none; margin-left: 6px; }
.rnav-saved svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.rnav-saved:hover { background: none; }   /* 11-13 ดึก เจ้าของ "จังหวะเอาเมาส์ไปชี้ มันแปลกๆ" = พื้นเทาสี่เหลี่ยมโผล่หลังไพ่หน้า แต่ไพ่หลังยื่นนอกกรอบ → ไม่มีพื้น ใช้ไพ่ขยับแทน (ล่างไฟล์) */
.rnav-saved-n { position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 99px; background: #E2302B; color: #fff; font: 700 10px/16px 'Sarabun', sans-serif; text-align: center; }   /* 11-13 ค่ำ เจ้าของ "เด่นไปนิด" → เลขแดงเล็กลง (เดิม 18px/11px) */
.rnav-saved-n[hidden] { display: none; }
/* 11-13 บ่าย ไอคอนเทียบรวมเข้าที่คั่น (เจ้าของ: ประหยัดที่ · ทุกจอ) · เลขกรมท่ามุมล่าง = ห้องที่เลือกเทียบ */
.rnav-saved-c { position: absolute; bottom: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #0E1E3D; color: #fff; border: 1.5px solid #fff; font: 700 10.5px/14px 'Sarabun', sans-serif; text-align: center; }
.rnav-saved-c[hidden] { display: none; }
/* 11-13 เย็น เจ้าของเอาไอเดีย "ไพ่ซ้อน" (Gemini): เลข 2 วงเบียดกันแปลก → ไพ่ใบหน้า = ที่คั่น (ขาว + เงาบาง + เลขแดง) · ไพ่ใบหลัง = การ์ดกรมท่าเยื้องโผล่มุมขวาล่าง + เลขเทียบ (ขึ้นเมื่อเลือกเทียบ · .has-cmp จาก rh_saved.js) · กด = แผ่นล่างจอ (กล่องเทียบ) */
.rnav-saved.has-cmp { isolation: isolate; }
.rnav-saved.has-cmp::before { content: ""; position: absolute; inset: 6px 5px 5px 8px; z-index: -1; border-radius: 9px; background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(5px) saturate(140%); backdrop-filter: blur(5px) saturate(140%); box-shadow: 0 1px 4px rgba(14, 30, 61, .12); }   /* 11-13 ค่ำ เจ้าของ "ใสๆ ขุ่นๆ" → กระจกฝ้า .6 blur 5 (เห็นเงาไพ่หลังจางๆ · แบบ ข) · เดิม: 11-13 เย็น เจ้าของ "ไม่ใสเหมือนเดิม เด่นไป" → กระจกขาวชุดแถบเมนู (ไม่ใสจนไพ่หลังทะลุ) */
.rnav-saved.has-cmp svg { width: 21px; height: 21px; margin: 1px -1px 0 2px; }
.rnav-saved-c { top: 6px; left: 8px; right: 5px; bottom: 5px; z-index: -2; width: auto; height: auto; min-width: 0; padding: 3px 0 0 2px; border: 0; border-radius: 9px; display: flex; align-items: flex-start; justify-content: flex-start; transform: rotate(-12deg); transform-origin: 50% 170%; background: #6B7A99; box-shadow: 0 1px 3px rgba(14, 30, 61, .18); font: 800 11.5px/1 'Sarabun', sans-serif; }   /* 11-13 ค่ำ เจ้าของเลือกแบบ ข: ไพ่หลังเทาอมกรม #6B7A99 (เดิมกรมเข้ม เด่นไป) เอียง -12 (เดิม -18) ·  11-13 เย็น เจ้าของ "ขนาดเท่ากัน อยู่ตำแหน่งเดียวกัน เปิดมาด้านซ้าย เอียงๆ โดนอันแรกทับ" = ไพ่บาน: ไพ่หลังทับที่เดียวกับไพ่หน้า หมุนจากมุมล่างไปซ้าย · เลขมุมซ้ายบนที่โผล่ */
.rnav-saved-c::before { content: none; }   /* 11-13 เย็น เจ้าของลองแล้ว "ไม่ต้องมีไอคอน" → เลขอย่างเดียว */
.rnav-saved-c[hidden] { display: none; }
.rnav-saved-n { z-index: 1; }
.rnav-saved.bump .rnav-saved-c { animation: rsv-deal .5s ease-out; }
@keyframes rsv-deal { 0% { transform: rotate(-12deg); } 35% { transform: rotate(-20deg); } 100% { transform: rotate(-12deg); } }   /* บานออกอีกนิดตอนเพิ่มห้องเทียบ */   /* ไพ่หลังขยับตอนเพิ่มห้องเทียบ */
@keyframes rsv-bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.rnav-saved.tuck .rnav-saved-c { animation: rsv-tuck .38s ease-out; }   /* 11-13 ค่ำ เจ้าของ "กดออกไม่มีอนิเม" → เอาออก = ไพ่หลังหุบเข้าแว้บแล้วกลับ */
.rnav-saved.fold .rnav-saved-c { animation: rsv-fold .3s ease-in forwards; }   /* เอาออกจนหมด = หุบเข้าใต้ไพ่หน้าแล้วจาง (rh_saved.js ซ่อนหลัง 320ms) */
@keyframes rsv-tuck { 45% { transform: rotate(-3deg); } }   /* ไม่ใส่ 0%/100% = เริ่ม/จบที่มุมเดิมของจอนั้น (-12 หรือ -11) */
@keyframes rsv-fold { to { transform: rotate(0deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rnav-saved.bump .rnav-saved-c, .rnav-saved.tuck .rnav-saved-c, .rnav-saved.fold .rnav-saved-c { animation: none; } }
/* กล่องรายการที่เลือกเทียบ (คอม = กลางจอ · มือถือ = แผ่นล่างจอ) */
.rsv-pop { position: fixed; inset: 0; z-index: 2150; display: flex; align-items: center; justify-content: center; background: rgba(14, 30, 61, .45); padding: 16px; font-family: 'Sarabun', sans-serif; }
.rsv-pop[hidden] { display: none; }
html.rsv-pop-on { overflow: hidden; }
.rsv-pin { width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow: auto; background: #fff; border-radius: 16px; padding: 18px 18px 16px; color: #0E1E3D; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.rsv-phd { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.rsv-pt { margin: 0; font-size: 19px; font-weight: 800; }
.rsv-pn { color: #4A5470; font-size: 14px; margin-right: auto; }
.rsv-pclose { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F4F5F8; color: #0E1E3D; font-size: 24px; line-height: 1; cursor: pointer; }
.rsv-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rsv-pi { display: flex; align-items: center; gap: 12px; padding: 6px; border: 1px solid #E3E6EE; border-radius: 12px; }
.rsv-pw { width: 64px; height: 48px; border-radius: 8px; overflow: hidden; background: #E3E6EE; flex: none; }
.rsv-pw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rsv-pc { color: #0E1E3D !important; margin-right: auto; min-width: 0; text-decoration: none !important; }
.rsv-ptx { display: grid; gap: 1px; min-width: 0; }
.rsv-pl1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .rsv-pl1 b { font-size: 15px; }
.rsv-ppr { font-size: 14px; font-weight: 700; color: #0E1E3D; } .rsv-ppr small { font-weight: 500; color: #4A5470; }
.rsv-ppj, .rsv-pf { font-size: 13px; color: #4A5470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsv-pc:hover b { text-decoration: underline; }
/* ลิงก์ห้องที่เก็บไว้ท้ายกล่อง */
.rsv-psv { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 6px 2px; border-top: 1px solid #E3E6EE; color: #0E1E3D !important; text-decoration: none !important; font-size: 15px; }
.rsv-psv .rsv-i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.rsv-psv b { margin-right: auto; } .rsv-par { font-size: 22px; line-height: 1; color: #4A5470; }
.rsv-psv:hover b { text-decoration: underline; }
.rsv-px { width: 36px; height: 36px; border: 0; border-radius: 50%; background: #F4F5F8; color: #0E1E3D; font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.rsv-px:hover, .rsv-pclose:hover { background: #E3E6EE; }
.rsv-ph { margin: 10px 0 0; color: #4A5470; font-size: 14px; }
.rsv-ph[hidden] { display: none; }
.rsv-pft { margin-top: 14px; }
.rsv-pclr { border: 0; background: none; color: #4A5470; font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; padding: 8px 4px; flex: none; }   /* หัวกล่อง ข้าง × */
.rsv-pgo { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 10px; background: #0E1E3D; color: #fff !important; font-weight: 700; font-size: 16px; text-decoration: none !important; }
.rsv-pgo[aria-disabled="true"] { background: #E3E6EE; color: #4A5470 !important; pointer-events: none; }
.rsv-px:focus-visible, .rsv-pclose:focus-visible, .rsv-pgo:focus-visible { outline: 3px solid #FF8A80; outline-offset: 2px; }
@media (max-width: 600px) {
  .rsv-pop { align-items: flex-end; padding: 0; }
  .rsv-pin { max-width: none; border-radius: 16px 16px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 1200px) {
  .rnav-saved { margin-left: auto; margin-right: -4px; }   /* มือถือ: ข้างแว่นขยาย */
  .rnav-saved.has-cmp { margin-right: 1px; }   /* 11-13 เย็น ไพ่ซ้อน: เว้นจากแว่นขยาย กันนิ้วกดพลาด (Gemini ทัก · Claude เห็นด้วย) */
  .rnav-in .rnav-logo { position: absolute; left: 50%; transform: translateX(-50%); }   /* โลโก้ยังกลางแถบ (ขวามี 2 ปุ่ม) */
}
@media (max-width: 379px) { .rnav-saved.has-cmp { margin-right: -4px; } .rnav-saved-c { transform: rotate(-11deg); } .rnav-saved.bump .rnav-saved-c { animation: none; } }   /* จอ 360: บานน้อยลง + ไม่บานเพิ่มตอนกด (กันเฉียดโลโก้) */   /* จอ 360: เว้นแล้วชนโลโก้ (เทส saved_ui จับได้) → ระยะเดิม */
/* แถบเทียบล่างจอ (แบบ Yes! Sure) */
.rsv-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex; align-items: center; gap: 12px; justify-content: center; background: #fff; box-shadow: 0 -6px 20px rgba(14, 30, 61, .12);
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font-family: 'Sarabun', sans-serif; color: #0E1E3D; }
.rsv-tray[hidden] { display: none; }
.rsv-th { display: flex; gap: 8px; }
.rsv-tw { position: relative; width: 44px; height: 44px; border-radius: 9px; background: #E3E6EE; }
.rsv-tw img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; display: block; }
.rsv-tx { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #0E1E3D; color: #fff; font-size: 14px; line-height: 22px; padding: 0; cursor: pointer; }
.rsv-tn { font-weight: 700; font-size: 15px; white-space: nowrap; }
.rsv-go { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 10px; background: #0E1E3D; color: #fff !important; font-weight: 700; font-size: 15px; text-decoration: none !important; white-space: nowrap; }
.rsv-go[aria-disabled="true"] { background: #E3E6EE; color: #4A5470 !important; }
body.rsv-tray-on { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
body.rsv-tray-on #chat.rhf-chat { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }   /* ปุ่มลอยน้องคาปิอยู่เหนือแถบ (แบบ Yes! Sure) */
@media (max-width: 600px) { .rsv-tray { justify-content: space-between; gap: 8px; } .rsv-go { padding: 0 14px; } }
/* ข้อความเด้ง */
.rsv-toast { position: fixed; left: 50%; bottom: 24px; z-index: 2200; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; width: max-content; max-width: calc(100vw - 32px);   /* max-content: left 50% = กว้างได้ครึ่งจอ ข้อความตกบรรทัด */ background: #0E1E3D; color: #fff; border-radius: 12px; padding: 10px 16px;
  font: 600 15px/1.4 'Sarabun', sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); transition: opacity .18s, transform .18s; }
/* 11-13 บ่าย เจ้าของ "แอบกระจก": กรมท่าโปร่ง 82% + เบลอข้างหลัง + ขอบขาวบาง · ลองกระจกขาวแบบแถบเมนูแล้ว = กลืนกับการ์ดขาว → เจ้าของ+Claude เลือกกรมท่า · ไม่รองรับ backdrop-filter = ทึบแบบเดิม */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .rsv-toast { background: rgba(14, 30, 61, .82); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 8px 28px rgba(14, 30, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .12); }
}
.rsv-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rsv-toast a { color: #ffd166 !important; text-decoration: underline; margin-left: 4px; }
body.rsv-tray-on .rsv-toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .rsv-toast { transition: none; } }
/* 11-14 มือถือ: ข้อความยาวกว้างเต็มจอ ทับปุ่มลอยน้องคาปิมุมขวาล่าง (เทส yes_sure_ui จับได้) → ชิดซ้าย เว้นขวา 96px ให้น้อง */
@media (max-width: 640px) { .rsv-toast { left: 12px; right: 96px; width: auto; max-width: none; transform: translateY(20px); } .rsv-toast.on { transform: none; } }
/* 11-13 ดึก ชี้เมาส์ (คอมเท่านั้น): ไพ่หน้ายกขึ้นนิด + ไพ่หลังบานออกอีกนิด แบบนุ่ม (แทนพื้นเทา) · มือถือไม่มี hover = ไม่โดน */
@media (hover: hover) and (pointer: fine) {
  .rnav-saved svg, .rnav-saved-n, .rnav-saved-c, .rnav-saved.has-cmp::before { transition: transform .18s ease; }
  .rnav-saved:hover svg, .rnav-saved:hover .rnav-saved-n, .rnav-saved.has-cmp:hover::before { transform: translateY(-2px); }
  .rnav-saved:hover .rnav-saved-c { transform: rotate(-17deg); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) { .rnav-saved svg, .rnav-saved-n, .rnav-saved-c, .rnav-saved.has-cmp::before { transition: none; } }