/* Tìm phòng gần tôi: banner xin quyền, nhãn khoảng cách, thanh bán kính */
.nb { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 10px 0; background: var(--primary-soft, #fdeef0); border: 1px solid var(--primary-line, #f6c6ce); border-radius: 14px; color: var(--text, #222); }
.nb-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow, 0 2px 12px rgba(34,34,34,.06)); }
.nb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; }
.nb-txt b { font-size: 14px; font-weight: 700; }
.nb-txt span { color: var(--muted, #6a6963); }
.nb-btns { flex: none; display: flex; gap: 8px; align-items: center; }
.nb-btn { min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid transparent; touch-action: manipulation; }
.nb-ok { background: var(--primary, #d63a52); color: var(--primary-ink, #fff); }
.nb-ok:hover { background: var(--primary-d, #bd2c43); }
.nb-ok.busy, .nb-ok:disabled { opacity: .7; cursor: progress; }
.nb-later { background: transparent; color: var(--text, #222); border-color: var(--line-strong, #d3d0c9); }
.nb-later:hover { background: #fff; }
.nb-err { background: #fff8e6; border-color: #f3d98b; }
.nb-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary, #d63a52) 45%, transparent); outline-offset: 2px; }

/* thanh trạng thái khi đã có vị trí / đang lọc quanh vị trí */
.nb-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 6px 12px; margin: 10px 0; background: #fff; border: 1px solid var(--line, #ebe9e5); border-radius: 14px; font-size: 13px; }
.nb-bar b { font-weight: 700; }
.nb-bar .nb-sp { flex: 1; }
.nb-seg { display: inline-flex; gap: 4px; }
.nb-seg button { min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong, #d3d0c9); background: #fff; border-radius: 999px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.nb-seg button[aria-pressed="true"] { background: var(--primary, #d63a52); border-color: var(--primary, #d63a52); color: #fff; }
.nb-link { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--accent-ink, #b3243b); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; }
.nb-hint { flex-basis: 100%; color: var(--muted, #6a6963); font-size: 12.5px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
.nb-hint:empty { display: none; }

/* thanh trong trang tìm kiếm (giữa thanh chip và vùng bản đồ) */
.ms-near { flex: none; z-index: 30; padding: 0 12px; background: #fff; border-bottom: 1px solid var(--line, #ebe9e5); }
.ms-near[hidden] { display: none; }
.ms-near .nb, .ms-near .nb-bar { margin: 6px 0; padding: 6px 10px; }
.nb-l-short, .nb-x-i { display: none; }
@media (max-width: 600px) {
  /* thanh bán kính: MỘT hàng ngang cuộn được, nhãn ngắn, nút × nhỏ cùng hàng */
  .ms-near { padding: 0 8px; }
  .ms-near .nb-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 3px 0; padding: 0 4px 0 10px; border-radius: 12px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  .ms-near .nb-bar::-webkit-scrollbar { display: none; }
  .ms-near .nb-bar b { flex: none; white-space: nowrap; font-size: 13px; }
  .ms-near .nb-l-full { display: none; } .ms-near .nb-l-short { display: inline; }
  .ms-near .nb-seg { flex: none; gap: 2px; }
  .ms-near .nb-seg button { min-width: 44px; min-height: 44px; padding: 0 6px; font-size: 13px; border-radius: 12px; }
  .ms-near .nb-sp { display: none; }
  .ms-near .nb-link { flex: none; white-space: nowrap; min-height: 44px; padding: 0 8px; }
  .ms-near .nb-x-t { display: none; } .ms-near .nb-x-i { display: inline; font-size: 15px; }
  .ms-near .nb-hint { flex: none; flex-basis: auto; white-space: nowrap; font-size: 12px; }
}
.ms-near .nb-ico { width: 32px; height: 32px; font-size: 16px; }

/* nhãn khoảng cách trên thẻ phòng */
.lcard-loc .lcard-dist { flex: none; white-space: nowrap; overflow: visible; margin-left: auto; padding-left: 6px; color: var(--accent-ink, #b3243b); font-weight: 700; font-size: 12.5px; }
.lcard-loc .lcard-dist::before { content: "· "; color: var(--muted, #6a6963); font-weight: 400; }

/* nút định vị trên bản đồ: vùng bấm >= 44px */
.ms-locate { width: 44px; height: 44px; }
.ms-locate.on { color: #2563eb; }
.hm-nearbox { max-width: 760px; margin: 0 auto; }
.ms-sort select { min-height: 44px; }

@media (max-width: 600px) {
  .nb { flex-wrap: wrap; align-items: flex-start; }
  .nb-txt { flex-basis: calc(100% - 52px); }
  .nb-btns { flex-basis: 100%; justify-content: flex-end; }
  .ms-near .nb-txt span { display: none; }
  .ms-near .nb { flex-wrap: nowrap; align-items: center; }
  .ms-near .nb-txt { flex-basis: auto; }
  .ms-near .nb-btns { flex-basis: auto; }
  .ms-near .nb-err .nb-txt span { display: block; }
  .ms-near .nb-err { flex-wrap: wrap; }
  .ms-near .nb-err .nb-btns { flex-basis: 100%; }
  .ms-near .nb-btn { padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .nb-btn { transition: none; } }