/* CSS tối thiểu cho maplibre, dùng khi file CSS của thư viện bị chặn */
.maplibregl-map{position:relative;overflow:hidden}
.maplibregl-canvas-container,.maplibregl-canvas{position:absolute;top:0;left:0}
.maplibregl-canvas-container canvas{width:100%;height:100%}
.maplibregl-control-container .maplibregl-ctrl{background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(19,32,56,.22);margin:10px;overflow:hidden}
/* Header + thanh tìm kiếm nổi chiếm khoảng 160px trên cùng, nên đẩy cụm +/- và
   nút định vị xuống dưới để không bị che. */
.maplibregl-ctrl-top-left{margin-top:150px}
@media(max-width:760px){ .maplibregl-ctrl-top-left{margin-top:190px} }
.maplibregl-ctrl button{width:29px;height:29px;border:0;background:#fff;cursor:pointer;display:block}
/* ==========================================================================
   MAPIN — HỆ THIẾT KẾ
   Một màu chính duy nhất (navy của logo) dùng cho: nút hành động, ghim bản đồ,
   bộ lọc đang bật, link quan trọng. Ngoài ra chỉ còn xanh lá báo "còn mới" và
   đỏ báo "có vấn đề". Bỏ hẳn cam và vàng khỏi giao diện — cam chỉ còn trong
   chính hình logo. Nhiều màu là thứ khiến một marketplace trông như trang rao vặt.
   ========================================================================== */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/bvp-vietnamese-400.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/bvp-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/bvp-vietnamese-600.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/bvp-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/bvp-vietnamese-700.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/bvp-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

:root{
  /* ---- màu ---- */
  --primary:#1c2b4a;        /* navy của logo — nút, ghim, bộ lọc đang bật, link */
  --primary-700:#132038;    /* trạng thái hover / nhấn */
  --primary-50:#eef1f8;     /* nền nhạt của primary */
  --bg:#f8fafc;             /* nền trang */
  --card:#ffffff;           /* nền thẻ */
  --text:#111827;           /* chữ chính */
  --text-2:#64748b;         /* chữ phụ, metadata */
  --line:#e2e8f0;           /* đường kẻ, viền */
  --success:#16a34a; --success-50:#ecfdf3;
  --danger:#b42318;  --danger-50:#fef3f2;
  --neutral:#475569; --neutral-50:#f1f5f9;   /* trạng thái trung tính, thay cho vàng */
  --ccm:#b26a2e; --ccm-700:#8f5222;          /* cam trầm: chỉ dùng cho ghim chung cư mini */

  /* ---- bo góc: một thang duy nhất cho cả site ---- */
  --r-xs:6px;    /* ghim bản đồ — vật nhỏ, 8px nhìn đã quá tròn */
  --r-sm:8px;    /* ô nhập, nút nhỏ, ảnh nhỏ */
  --r-md:12px;   /* thẻ, panel */
  --r-lg:16px;   /* hộp thoại, tấm nổi */
  --r-pill:999px;/* huy hiệu, chip */

  /* ---- cỡ chữ ---- */
  --fs-h1:32px; --fs-h2:24px; --fs-h3:18px;
  --fs-price:20px; --fs-body:15px; --fs-sm:13px; --fs-meta:12.5px;

  /* Tên cũ giữ lại làm bí danh để không phải sửa hàng trăm chỗ một lúc;
     tất cả đều trỏ về bảng màu mới ở trên. */
  --navy:var(--primary); --navy-2:var(--primary-700); --navy-3:var(--text-2); --navy-bg:var(--primary-50);
  --orange:var(--primary); --orange-2:var(--primary-700); --orange-bg:var(--primary-50);
  --blue:var(--primary); --blue-2:var(--primary-700); --blue-bg:var(--primary-50);
  --brand:var(--primary); --brand-bg:var(--primary-50);
  --accent:var(--primary); --accent-bg:var(--primary-50);
  --green:var(--success); --green-bg:var(--success-50);
  --amber:var(--neutral);  --amber-bg:var(--neutral-50);
  --red:var(--danger);     --red-bg:var(--danger-50);
  --ink:var(--text); --muted:var(--text-2);
}
/* Icon outline dùng chung — nhúng sẵn trong index.html, không phụ thuộc CDN nào.
   Kế thừa màu và cỡ chữ của phần tử cha, nên chỉ cần đặt class .ic */
.ic{width:1.15em;height:1.15em;stroke:currentColor;fill:none;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;flex:0 0 auto}
.ic.sm{width:1em;height:1em;stroke-width:1.9}
.ic.lg{width:1.5em;height:1.5em}
.ic.fill{fill:currentColor;stroke:none}
/* chấm trạng thái thay cho emoji 🟢 🟡 */
.sd{display:inline-block;width:7px;height:7px;border-radius:50%;vertical-align:.05em;margin-right:2px;flex:0 0 auto}
.sd.g{background:var(--success)} .sd.a{background:var(--neutral)} .sd.r{background:var(--danger)}
*{box-sizing:border-box}
/* ---- Khung app cố định vào màn hình ----
   Trước đây chỉ .app cao 100vh còn tài liệu vẫn cuộn được. Trên điện thoại 100vh
   là chiều cao KHI ĐÃ ẨN thanh địa chỉ, tức là luôn cao hơn phần nhìn thấy thật —
   nên cả khung app trôi lên trôi xuống theo ngón tay, header và thanh nút đáy nhảy
   loạn. Khoá hẳn tài liệu, chỉ phần nội dung bên trong mới được cuộn. */
html,body{margin:0;padding:0;height:100%;overflow:hidden;overscroll-behavior:none;
  position:relative;-webkit-text-size-adjust:100%}
/* overflow-wrap:break-word chỉ ngắt khi một từ dài hơn cả khung — chữ tiếng Việt
   bình thường không bị ảnh hưởng, nhưng link/slug/email dài sẽ không còn tràn khung. */
body{font-family:'Be Vietnam Pro',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);background:var(--bg);font-size:var(--fs-body);line-height:1.55;
  overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
/* ---- cấp bậc chữ: mỗi mức một trọng lượng riêng, không để mọi thứ cùng đậm ---- */
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
h2{font-size:var(--fs-h2);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.35;color:var(--text)}
.mini,.hint{font-size:var(--fs-meta);color:var(--text-2);line-height:1.6}
button,select,input{font-family:inherit;font-size:inherit}
/* dvh = phần màn hình ĐANG nhìn thấy, co giãn theo thanh địa chỉ của trình duyệt.
   vh giữ lại làm bản dự phòng cho trình duyệt cũ. */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
/* ---- Vùng cuộn của từng màn ----
   BA THỨ phải đi cùng nhau, thiếu một là điện thoại vẫn "lỏng lẻo":
   1. overflow-x:hidden — trục ngang không tồn tại, không có gì để kéo.
   2. overscroll-behavior:none — TẮT hẳn hiệu ứng nảy của iOS. Dùng `contain` chỉ
      chặn việc kéo lan sang khung cha, bản thân khối vẫn nảy khi kéo quá mép.
      Đây chính là thứ làm cả trang quản trị "chuyển động" khi vuốt sang hai bên
      dù nội dung không hề rộng hơn màn hình.
   3. KHÔNG dùng -webkit-overflow-scrolling:touch — nó dựng một UIScrollView kiểu cũ
      có nảy trên CẢ HAI trục. Từ iOS 13 cuộn đã mượt sẵn, thuộc tính này chỉ còn hại.
   Khai ngay tại từng quy tắc gốc, không gom thành nhóm riêng: gom ở đầu file thì
   các quy tắc `overflow:auto` phía dưới ghi đè mất (lỗi vừa gặp). */
.pgscroll,
.auth,.adm,.dash,.mini-wrap,.lsw{overscroll-behavior:none}
/* Trang quản trị chủ trọ không có gì cần vuốt ngang -> chặn hẳn cử chỉ đó ở cấp
   trình duyệt. (Không đặt cho .mini-wrap và .lsw vì trong đó có băng ảnh và bản
   đồ lộ trình cần vuốt ngang thật.) */
.dash,.auth,.adm{touch-action:pan-y}

/* ===== HEADER + THANH TÌM KIẾM NỔI TRÊN BẢN ĐỒ =====
   Bản đồ chiếm trọn khung; header và thanh tìm nằm đè lên, nền trong suốt dần
   để không che mất bản đồ. Nhờ vậy phần nhìn thấy của bản đồ tăng ~40%. */
header{display:flex;align-items:center;gap:14px;padding:10px 16px;flex:0 0 auto;
  position:absolute;left:0;right:0;top:0;z-index:14;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 55%,rgba(255,255,255,0) 100%)}
header>*{pointer-events:auto}
.app{position:relative}
/* các trang không phải bản đồ cần header đặc, không đè lên nội dung */
.app.solid header{position:relative;background:var(--card);border-bottom:1px solid var(--line)}
.app.solid .sbar{display:none}
/* logo Mapin: ảnh wordmark thật + tagline dạng chữ (nét ở mọi cỡ màn hình) */
.logo{white-space:nowrap;line-height:1;text-decoration:none;display:block}
/* Wordmark 322×80 -> ở chiều cao 30px thì rộng đúng 121px. Slogan ép cùng bề
   ngang đó và canh giữa, nếu không nó tràn ra hai bên trông như bị lệch. */
.logo .wm{display:block;height:30px;width:auto}
.logo .tag{display:block;width:121px;margin-top:3px;font-size:8px;font-weight:600;
  letter-spacing:.35px;text-transform:uppercase;color:var(--text-2);text-align:center;white-space:nowrap}
.logo .tag i{font-style:normal;color:var(--primary)}
.logo{margin-right:auto}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:1px solid var(--line);
  background:var(--card);border-radius:var(--r-pill);cursor:pointer;color:var(--text);font-weight:600;
  font-size:var(--fs-sm);font-family:inherit}
.tab:hover{border-color:var(--primary);background:var(--primary-50)}
.tab.on{background:var(--primary);border-color:var(--primary);color:var(--card)}

/* Thanh trạng thái bản đồ: ẩn khỏi giao diện, chỉ giữ lại để phần dò nguồn bản đồ hoạt động */
#bar{display:none !important}
#bar_{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:7px 16px;font-size:12px;line-height:1.6;flex:0 0 auto;
  background:var(--neutral-50);border-bottom:1px solid var(--line);color:var(--text-2)}
#bar.ok{background:var(--success-50);border-color:#bbf0d0;color:var(--success)}
#bar.warn{background:var(--neutral-50);border-color:var(--line);color:var(--text-2)}
#bar.err{background:var(--danger-50);border-color:#f3c7c3;color:var(--danger)}
#bar .grow{flex:1 1 260px;min-width:200px}
#bar select,#bar button,#bar input[type=text],#bar input:not([type]){padding:4px 8px;border:1px solid rgba(0,0,0,.15);border-radius:var(--r-sm);background:var(--card);font-size:12px;color:var(--text)}
#bar select,#bar button{cursor:pointer}
#gwrap{display:flex;gap:6px;align-items:center;white-space:nowrap}

/* ---- nút menu ba gạch (chỉ hiện trên mobile) ---- */
/* ---- cụm tài khoản: một nút duy nhất, mở ra menu ---- */
.acct{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 6px;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-pill);cursor:pointer;
  font-size:var(--fs-sm);color:var(--text);max-width:230px}
.acct:hover{border-color:var(--primary);background:var(--primary-50)}
.acct .av{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 auto;
  border-radius:50%;background:var(--primary);color:var(--card);font-weight:600;font-size:13px}
.acct .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct .ic{color:var(--text-2)}
.hmenu{display:none;position:absolute;right:16px;top:56px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 12px 32px rgba(17,24,39,.16);padding:6px;min-width:232px;z-index:30}
.hmenu.on{display:block}
.hmenu button,.hmenu a{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;
  text-align:left;padding:10px 11px;border-radius:var(--r-sm);cursor:pointer;font-weight:600;
  font-size:var(--fs-sm);color:var(--text);text-decoration:none;font-family:inherit}
.hmenu button:hover,.hmenu a:hover{background:var(--primary-50)}
.hmenu .ic{color:var(--text-2)}
.hmenu .sep{height:1px;background:var(--line);margin:5px 2px}
.hmenu .who2{padding:9px 11px 7px;line-height:1.5;display:flex;flex-direction:column;gap:2px}
.hmenu .who2 b{font-size:var(--fs-sm);color:var(--text)}
.hmenu .who2 span{font-size:var(--fs-meta);color:var(--text-2)}

/* ---- thanh tìm kiếm nổi ---- */
.sbar{position:absolute;left:0;right:0;top:62px;z-index:13;padding:0 16px;pointer-events:none;
  display:flex;flex-direction:column;gap:9px;transition:right .18s ease}
/* hộp chi tiết nổi bên dưới thanh tìm kiếm nên chỉ cần né phần số liệu bên phải */
/* khối số liệu nằm bên trái nên không còn vướng hộp chi tiết bên phải */
.sbar>*{pointer-events:auto}
/* Chiếm khoảng nửa chiều ngang màn hình: đủ chỗ cho 4 thành phần mà vẫn để lộ
   bản đồ hai bên. Dưới 1100px thì cho rộng dần ra vì các ô bắt đầu chật. */
/* Bọc thẻ tìm + ô gợi ý để ô gợi ý ôm khít bề rộng và tự bám dưới đáy thẻ,
   kể cả khi thanh co lại lúc cuộn. */
.swrap{position:relative;width:min(760px,52%);min-width:600px}
.scard{display:flex;align-items:stretch;gap:0;background:var(--card);border:1px solid rgba(17,24,39,.08);
  border-radius:var(--r-lg);box-shadow:0 8px 28px rgba(17,24,39,.16);padding:4px;
  width:100%;min-height:50px}
@media(max-width:1100px){ .swrap{width:auto;min-width:0;max-width:100%} }
/* Mỗi ô là một "ngăn" của thanh công cụ: có đệm riêng, sáng lên khi rê chuột,
   ngăn cách nhau bằng một đường kẻ mảnh — thay vì mấy điều khiển rời rạc. */
.sfind{display:flex;align-items:center;gap:10px;flex:1 1 320px;min-width:0;
  padding:5px 12px;border-radius:var(--r-md)}
.sfind:focus-within{background:var(--primary-50)}
.sfind>.ic{color:var(--text-2);flex:0 0 auto}
.sin{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.sin input{border:0;outline:0;background:transparent;font-size:14px;font-weight:400;
  color:var(--text);width:100%;padding:0;min-width:0}
.sin input::placeholder{color:var(--text);font-weight:400}
.sin .ex{font-size:11px;color:var(--text-2);line-height:1.3;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mepos{display:flex;align-items:center;gap:6px;border:0;background:none;color:var(--primary);
  font-weight:400;font-size:12.5px;cursor:pointer;white-space:nowrap;padding:6px 8px;border-radius:var(--r-sm)}
.mepos:hover{background:var(--primary-50)}
.sdiv{width:1px;background:var(--line);margin:9px 0;flex:0 0 auto;align-self:stretch}
.ssel{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;cursor:pointer;
  padding:5px 14px;border-radius:var(--r-md)}
.ssel:hover{background:var(--primary-50)}
.ssel i{font-style:normal;font-size:11px;color:var(--text-2);font-weight:400;line-height:1.2}
.ssel select{border:0;outline:0;background:transparent;font-weight:400;font-size:13.5px;color:var(--text);
  cursor:pointer;padding:1px 0;max-width:150px}
/* "Bộ lọc" là ngăn cuối của cùng thanh đó, không phải một nút rời bên cạnh */
.sfilt{display:flex;align-items:center;gap:7px;border:0;background:none;
  border-radius:var(--r-md);padding:5px 14px;font-weight:600;font-size:13.5px;color:var(--primary);
  cursor:pointer;white-space:nowrap;flex:0 0 auto}
.sfilt:hover{background:var(--primary-50)}
.sfilt.on{background:var(--primary);color:var(--card)}
.fcount{display:none;background:var(--primary);color:var(--card);border-radius:var(--r-pill);font-size:10.5px;
  font-weight:600;min-width:17px;height:17px;line-height:17px;text-align:center;padding:0 5px}
.fcount.on{display:inline-block}

.srow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:1180px}
/* chú thích màu ghim, thay cho hai nút lọc loại chỗ ở đã bỏ */
.lgnd{display:flex;align-items:center;gap:12px;margin-left:14px;padding-left:14px;
  border-left:1px solid var(--line);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.lg{display:inline-flex;align-items:center;gap:5px}
.lg:before{content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.lg.tro:before{background:var(--primary)}
.lg.ccm:before{background:var(--ccm)}
/* Số liệu + nút thu gọn nằm chung MỘT khối trắng, nếu để chữ trần trên bản đồ
   thì nhìn như bị rơi vãi giữa các con đường. */
.sinfo{display:flex;align-items:center;gap:0;margin-left:0;background:var(--card);
  border:1px solid rgba(17,24,39,.1);border-radius:var(--r-pill);box-shadow:0 3px 14px rgba(17,24,39,.14);
  padding:0 4px 0 15px;height:36px;max-width:100%}
.smeta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.smeta b{color:var(--primary);font-weight:600}
.smeta .mu{color:var(--text-2);display:inline-flex;align-items:center;gap:5px}
.scol{display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--text-2);
  width:28px;height:28px;border-radius:50%;cursor:pointer;margin-left:10px;flex:0 0 auto}
.scol:hover{background:var(--primary-50);color:var(--primary)}
.sinfo:before{content:"";width:1px;height:18px;background:var(--line);order:1;margin-left:12px}
.sinfo .smeta{order:0} .sinfo .scol{order:2;margin-left:2px}
/* trạng thái thu gọn: chỉ còn một hàng mảnh */
.sbar.mini .scard{padding:4px 5px 4px 12px;border-radius:var(--r-md)}
.sbar.mini .sin .ex{display:none}
.sbar.mini .sin input{font-size:13.5px}
.sbar.mini .lgnd{display:none}
.sbar.mini .mepos .tl{display:none}

.f{display:flex;flex-direction:column;gap:4px}
.f label{font-size:11px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.f select,.f input{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);min-width:120px}
.f.grow{flex:1 1 280px;min-width:220px}
.inpwrap{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);padding:0 10px}
.inpwrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50)}
.inpwrap .ic{color:var(--text-2)}
.inpwrap input{border:0;outline:0;padding:8px 0;width:100%;background:transparent;min-width:0}
/* Ô gợi ý ôm khít bề rộng thanh tìm, nền mờ nhẹ để thấy được bản đồ phía sau */
.acbox{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);width:auto;
  background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 12px 32px rgba(17,24,39,.18);z-index:20;
  max-height:340px;overflow:auto}
.acbox .grp{padding:7px 12px 4px;font-size:10.5px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-2);background:var(--bg);border-bottom:1px solid var(--line)}
.acbox.on{display:block}
.acbox div{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line);line-height:1.5}
.acbox div:last-child{border-bottom:0}
.acbox div:hover{background:var(--primary-50)}
.acbox b{color:var(--primary)}
.acbox .mini{display:block;color:var(--text-2);font-size:11.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--card);cursor:pointer;color:var(--text-2);
  font-weight:600;font-size:var(--fs-sm);line-height:1.3;user-select:none}
.chip.on{background:var(--primary-50);border-color:var(--primary);color:var(--primary)}

main{flex:1 1 auto;min-height:0;position:relative}
.view{position:absolute;left:0;right:0;top:0;bottom:0;display:none}
.view.on{display:flex}
#map{flex:1 1 auto;min-width:0;position:relative;background:var(--neutral-50)}
#map.soft .maplibregl-canvas{filter:saturate(.45) brightness(1.06) contrast(.95)}
/* ---- Ghim nhà trọ: chính con số giá là marker ----
   QUAN TRỌNG (lỗi lag từng gặp): MapLibre ghi transform lên .mpin ở MỖI khung
   hình khi kéo/zoom. Nếu đặt transition:transform lên chính .mpin thì mọi chuyển
   động của bản đồ bị ease 120ms -> ghim trôi lệch. Hiệu ứng nằm ở .mi, không bao
   giờ ở .mpin. */
/* Lưới an toàn: chính lớp .maplibregl-marker mới mang position:absolute, mà lớp đó
   có thể bị mất nếu ai đó lỡ ghi đè className. Khai lại ở đây để dù có mất thì ghim
   vẫn neo đúng toạ độ thay vì rơi về vị trí trong luồng. */
.mpin{position:absolute;top:0;left:0;cursor:pointer;line-height:0;color:var(--primary)}
.mpin .mi{display:flex;flex-direction:column;align-items:center;
  transform-origin:bottom center;transition:transform .12s ease}
.mpin:hover .mi{transform:scale(1.08)}
.mpin:hover{z-index:18}
.mpin.sel{z-index:20}
.mpin.sel .mi{transform:scale(1.12)}
/* Thân ghim: chữ nhật bo góc nhỏ, nền màu đặc, icon + giá màu trắng.
   BẪY: `background:currentColor` lấy giá trị `color` của CHÍNH phần tử đó. Nếu đặt
   `color:#fff` cùng chỗ thì nền hoá trắng, chữ trắng -> ghim trắng trơn. Vì vậy màu
   chữ phải đặt ở phần tử con, để nền vẫn ăn theo màu loại chỗ ở. */
.mpin .body{display:inline-flex;align-items:center;gap:5px;background:currentColor;
  border:1.5px solid rgba(255,255,255,.92);border-radius:var(--r-xs);
  padding:4px 9px 4px 7px;box-shadow:0 2px 6px rgba(17,24,39,.26)}
.mpin .body>*{color:#fff}
.mpin .body .ic{width:13px;height:13px;flex:0 0 auto;opacity:.95}
.mpin .lbl{font-weight:700;font-size:12px;line-height:1.3;white-space:nowrap;letter-spacing:-.01em}
/* mũi tên chỉ xuống đúng toạ độ mảnh đất */
.mpin .tail{display:block;width:0;height:0;margin-top:-1px;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid currentColor;filter:drop-shadow(0 2px 2px rgba(17,24,39,.2))}
/* Hai loại chỗ ở dùng CHUNG một hình, phân biệt bằng màu và icon */
.mpin.ccm{color:var(--ccm)}
/* Được chọn: đổi hẳn màu nền sang tông đậm + viền sáng, thấy ngay đang xem cái nào */
.mpin.sel{color:var(--primary-700)}
.mpin.ccm.sel{color:var(--ccm-700)}
/* Lâu chưa ai xác nhận: vẫn hiện trên bản đồ nhưng tô xám — người thuê tự cân nhắc,
   Mapin không tự giấu bớt lựa chọn của họ. */
.mpin.stale{color:#94a3b8}
.mpin.stale .mi{opacity:.85}
.mpin.sel .body{border-color:#fff;box-shadow:0 0 0 3px rgba(28,43,74,.2),0 5px 12px rgba(17,24,39,.32)}
.mpin.ccm.sel .body{box-shadow:0 0 0 3px rgba(178,106,46,.24),0 5px 12px rgba(17,24,39,.32)}
/* ghim địa điểm người dùng vừa tìm — vẫn là giọt nước để khác hẳn ghim nhà trọ */
.mpin.lm{color:var(--primary);z-index:15}
.mpin.lm .mi{flex-direction:column}
.mpin.lm .lbl{display:inline-block;background:var(--primary);color:var(--card);
  border:1.5px solid var(--card);border-radius:var(--r-pill);
  padding:4px 10px;font-size:11.5px;font-weight:600;white-space:nowrap;margin-bottom:2px;
  box-shadow:0 2px 6px rgba(17,24,39,.22)}
.mpin.lm svg{width:24px;height:33px;display:block}

/* ---- Thẻ xem nhanh khi rê chuột lên ghim ---- */
.hovcard{position:absolute;z-index:24;width:272px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:0 12px 32px rgba(17,24,39,.22);cursor:pointer;
  opacity:0;pointer-events:none;transform:translateX(-6px);transition:opacity .13s,transform .13s}
.hovcard.left{transform:translateX(6px)}
.hovcard.on,.hovcard.on.left{opacity:1;pointer-events:auto;transform:translateX(0)}
/* cầu nối vô hình hai bên: chuột đi ngang từ ghim sang thẻ không rơi vào khoảng
   trống -> thẻ không biến mất giữa chừng, bấm được "Xem chi tiết" */
.hovcard:before,.hovcard:after{content:'';position:absolute;top:0;bottom:0;width:16px}
.hovcard:before{left:-16px}
.hovcard:after{right:-16px}
.hovcard .hv-img:first-child{border-radius:var(--r-md) var(--r-md) 0 0;overflow:hidden}
/* Khung 4:3 thay cho dải ngang 2,19:1 — ảnh dọc thấy được 56% chiều cao thay vì 34% */
.hovcard .hv-img{aspect-ratio:4/3;background:var(--neutral-50)}
.hovcard .hv-img img{width:100%;height:100%;object-fit:cover;display:block}
.hovcard .hv-img.nopic{display:flex;align-items:center;justify-content:center;color:#cbd5e1}
.hovcard .hv-b{padding:11px 13px 12px;display:flex;flex-direction:column;gap:3px}
.hovcard .hv-t{font-weight:600;font-size:var(--fs-body);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hovcard .hv-a{font-size:var(--fs-meta);color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hovcard .hv-p{font-size:var(--fs-price);font-weight:700;letter-spacing:-.02em;margin-top:3px}
.hovcard .hv-p span{font-size:var(--fs-meta);font-weight:400;color:var(--text-2)}
.hovcard .hv-m{font-size:var(--fs-meta);color:var(--text-2)}
/* Một hàng, không xuống dòng: nhãn độ tươi co lại và cắt bằng ba chấm nếu dài,
   "Xem chi tiết" luôn giữ nguyên bên phải. */
.hovcard .hv-f{display:flex;align-items:center;gap:8px;margin-top:7px;padding-top:8px;
  border-top:1px solid var(--line);flex-wrap:nowrap;min-width:0}
.hovcard .hv-f .fresh{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  flex:0 1 auto;display:inline-flex}
.hovcard .hv-f em{font-style:normal;font-size:var(--fs-meta);color:var(--text-2);margin-left:auto}
.hovcard .hv-go{display:inline-flex;align-items:center;gap:3px;color:var(--primary);font-weight:600;
  flex:0 0 auto;white-space:nowrap}
.hovcard:hover .hv-go{text-decoration:underline}
.hovcard .hv-go .ic{width:13px;height:13px}
@media(hover:none){ .hovcard{display:none} }

.barnote{font-size:12px;color:var(--text-2);margin-left:auto;align-self:center;line-height:1.5;text-align:right}
.barnote b{color:var(--primary)}
.barnote .lg{display:inline-flex;align-items:center;gap:4px;margin-left:10px;white-space:nowrap}
.barnote .lg i{width:9px;height:9px;border-radius:50%;display:inline-block}
.barnote .lg i.t{background:var(--primary)} .barnote .lg i.c{background:var(--primary)}

/* ---- Cột thông tin chi tiết: chỉ hiện khi bấm vào một ghim ---- */
/* Nút đóng nay nằm đè lên ảnh bìa, nên phải đọc được trên mọi tấm ảnh */
.side-x{position:absolute;top:12px;right:12px;z-index:6;border:0;background:rgba(2,6,23,.55);
  width:34px;height:34px;border-radius:50%;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(17,24,39,.3)}
.side-x:hover{background:rgba(2,6,23,.78)}
/* ===== THẺ CHI TIẾT NHÀ TRỌ (cột phải trên desktop) =====
   Một thẻ trắng bo tròn nổi trên bản đồ, cao vừa phải: phần đầu là thứ khách
   quyết định trong 5 giây (tên · địa chỉ · còn mấy phòng · độ tươi · gọi/Zalo),
   phần sau chỉ liệt kê tối đa 3 phòng rồi mời sang trang riêng. */
.dt{padding:0 18px 22px}
.dt-tags{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding-right:40px;margin:14px 0 10px}

/* ---- Băng ảnh vuốt ngang, nằm trên cùng ----
   Người đi thuê xem ảnh trước rồi mới đọc chữ, nên ảnh tràn hết bề ngang thẻ và
   là thứ đầu tiên đập vào mắt. Cuộn ngang + scroll-snap = vuốt ngón tay tự nhiên,
   không phải đi tìm mũi tên. */
.dtgal{position:relative;margin:0 -18px 2px;background:var(--neutral-50)}
.gstrip{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain}
.gstrip::-webkit-scrollbar{display:none}
.gsl{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  aspect-ratio:4/3;position:relative;cursor:pointer;background:var(--neutral-50)}
.gsl img{width:100%;height:100%;object-fit:cover;display:block}
/* ---- Nền mờ: ảnh hiện trọn vẹn, phần thừa lấp bằng chính tấm ảnh đó ----
   Chỉ dùng ở trang riêng (.mgal). Cột chi tiết trên bản đồ vẫn cắt vừa khung vì ở
   đó ảnh nhỏ và người dùng chỉ liếc qua. */
.gsl .gbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(18px);transform:scale(1.15);pointer-events:none}
.mgal .gsl>img:not(.gbg){position:relative;object-fit:contain}
.gsl.nopix{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:#cbd5e1;cursor:default}
.gsl.nopix span{font-size:var(--fs-sm);color:var(--text-2)}
.dtgal .gcount{position:absolute;right:10px;bottom:10px;background:rgba(2,6,23,.66);color:#fff;
  font-size:var(--fs-meta);font-weight:600;padding:4px 10px;border-radius:var(--r-pill);
  pointer-events:none;letter-spacing:.02em}
.dtgal .gdots{position:absolute;left:0;right:0;bottom:11px;display:flex;justify-content:center;gap:5px;
  pointer-events:none}
.dtgal .gdots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 1px 2px rgba(0,0,0,.35);transition:width .15s}
.dtgal .gdots i.on{width:16px;border-radius:var(--r-pill);background:#fff}
.dtgal .garr{position:absolute;top:50%;margin-top:-17px;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);color:var(--text);cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(17,24,39,.25);
  opacity:0;transition:opacity .14s}
.dtgal .garr.l{left:10px} .dtgal .garr.r{right:10px}
.dtgal:hover .garr{opacity:1}
/* Điện thoại: bỏ hẳn mũi tên, chỉ vuốt */
@media(hover:none){ .dtgal .garr{display:none} }
/* khung giữ chỗ lúc chờ dữ liệu đầy đủ về, tránh nhảy layout */
.dtgal.skel .gsl{background:var(--neutral-50)}

/* nút Lưu để đi xem, đè góc trên trái ảnh bìa — không làm phình thanh liên hệ */
.galsave{position:absolute;left:10px;top:10px;z-index:5}
.lsbt{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  background:rgba(2,6,23,.58);color:#fff;border:0;border-radius:var(--r-pill);
  padding:8px 13px;font-weight:600;font-size:var(--fs-meta);white-space:nowrap;
  box-shadow:0 2px 10px rgba(17,24,39,.28)}
.lsbt:hover{background:rgba(2,6,23,.78)}
.lsbt.on{background:var(--success);}
.lsbt .ic{width:14px;height:14px}
/* trên trang riêng nút nằm trong cột thông tin nên dùng kiểu viền, không đè ảnh */
.lsbt.big{width:100%;justify-content:center;background:var(--card);color:var(--primary);
  border:1px solid var(--line);padding:12px;font-size:var(--fs-sm);box-shadow:none}
.lsbt.big:hover{background:var(--primary-50);border-color:var(--primary)}
.lsbt.big.on{background:var(--success-50);color:var(--success);border-color:var(--success)}

.dtprice{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em;color:var(--text);margin:2px 0 6px}
.dtprice span{font-size:var(--fs-sm);font-weight:400;color:var(--text-2)}
.dt h2{margin:0 0 6px;font-size:var(--fs-h2);font-weight:700;line-height:1.25;color:var(--text);letter-spacing:-.02em}
.dt .kd{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:var(--r-pill)}
.dt .kd.tro{background:var(--primary-50);color:var(--primary-700)}
.dt .kd.ccm{background:var(--neutral-50);color:var(--neutral)}
.dt .adr{color:var(--text-2);font-size:var(--fs-sm);line-height:1.55;margin-bottom:12px}
.dt .badges{display:flex;gap:6px;flex-wrap:wrap}
.dt .b{font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);display:inline-flex;
  align-items:center;gap:5px;white-space:nowrap}
/* độ tươi: chấm màu + con số ngắn, câu đầy đủ ở tooltip — không còn thanh đỏ rực */
.fdot{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card);color:var(--text-2);cursor:help}
.fdot.g{color:var(--success);border-color:rgba(22,163,74,.28)}
.fdot.a{color:var(--neutral)}
.fdot.r{color:var(--danger);border-color:rgba(180,35,24,.3)}
.dt .b.tr-hi{background:var(--primary-50);color:var(--primary-700)}
.dt .b.tr-md{background:var(--neutral-50);color:var(--text-2)}
.dt .b.tr-lo{background:var(--neutral-50);color:var(--neutral)}
/* ---- Thanh liên hệ dính đáy thẻ ----
   Trước đây ba nút này nằm ngay dưới tên, tức là mời gọi điện trước cả khi khách
   kịp xem ảnh. Giờ chúng ở cuối hành trình nhưng luôn dính đáy, cuộn tới đâu vẫn
   với tới được. */
.dtbar{position:sticky;bottom:0;z-index:4;display:flex;gap:8px;padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 18px rgba(17,24,39,.08)}
.dtbar a{display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;
  padding:12px 14px;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);
  border:1px solid transparent;white-space:nowrap}
.dtbar a.c1{flex:1 1 auto;background:var(--primary);color:var(--card)}
.dtbar a.c1:hover{background:var(--primary-700)}
.dtbar a.c2{flex:0 0 auto;background:var(--primary-50);color:var(--primary);border-color:var(--line)}
.dtbar a.c2:hover{border-color:var(--primary)}
.dtbar a.c3{flex:0 0 auto;padding:12px;background:var(--card);color:var(--primary);border-color:var(--line)}
.dtbar a.c3:hover{border-color:var(--primary);background:var(--primary-50)}

.dt h4{margin:22px 0 10px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-weight:600}


/* một dòng phòng: ảnh nhỏ · tên + tiện ích · giá */
.dt .rm{border:1px solid var(--line);border-radius:var(--r-md);padding:9px;margin-bottom:8px;
  display:flex;gap:11px;align-items:center;background:var(--card)}
.dt .rm.soon{background:var(--neutral-50);border-color:var(--line)}
.dt .rm img{width:54px;height:54px;object-fit:cover;border-radius:var(--r-sm);flex:0 0 auto;cursor:pointer}
.dt .rm .info{min-width:0;flex:1}
.dt .rm .info b{font-size:13.5px;color:var(--primary)}
.dt .rm .pr{font-weight:700;color:var(--text);white-space:nowrap;font-size:var(--fs-price)}
.dt .amn{display:flex;flex-wrap:wrap;gap:5px}
.dt .amn span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;
  background:var(--neutral-50);color:var(--text-2);border-radius:var(--r-sm);padding:3px 8px}
.dt .grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dt .kv{background:var(--primary-50);border-radius:var(--r-sm);padding:8px 10px;font-size:11.5px;color:var(--text-2)}
.dt .kv b{display:block;font-size:13px;color:var(--primary);margin-top:1px}
.dt .note{margin-top:12px;font-size:12.5px}

.seeall{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:4px;
  padding:11px;border:0;background:none;color:var(--primary);font-weight:600;font-size:13.5px;cursor:pointer;
  border-top:1px solid var(--line);border-radius:0}
.seeall:hover{background:var(--primary-50)}
.dtmore{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.dtmore summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--primary);
  display:flex;align-items:center;gap:7px;list-style:none;padding:4px 0}
.dtmore summary::-webkit-details-marker{display:none}
.dtmore summary:after{content:"⌄";margin-left:auto;color:var(--text-2);font-size:15px}
.dtmore[open] summary:after{content:"⌃"}
.dt .full.vid{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:12px;
  padding:11px;border-radius:var(--r-md);background:var(--primary);color:var(--card);font-weight:600;font-size:13.5px;
  text-decoration:none;border:0;cursor:pointer}
/* ---- Hai đường dẫn nhỏ "Bạn là chủ nhà này?" / "Số này là môi giới?" ----
   Cố tình để nhỏ và nhạt: đây là việc phụ, không được cạnh tranh với nút Gọi. */
.oask{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line)}
.oask .ol{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;
  border:0;background:none;padding:4px 0;font-size:var(--fs-meta);color:var(--text-2);
  text-decoration:underline;text-underline-offset:3px}
.oask .ol:hover{color:var(--primary)}
.oask .ol+.ol{margin-left:6px}
.odone{display:flex;align-items:flex-start;gap:7px;font-size:var(--fs-meta);
  color:var(--success);line-height:1.6}
/* dòng người nhận là chủ nhà trong trang Quản trị */
.oreq{border-left:2px solid var(--line);padding:2px 0 2px 9px;margin-bottom:7px;font-size:var(--fs-sm)}
.oreq .act{margin-top:4px;display:inline-flex;align-items:center;gap:5px}
.dturl{text-align:center;margin-top:12px;color:var(--text-2)}
/* ============================================================
   LỊCH ĐI XEM — nơi người thuê gom nhà ưng ý để mai đi xem một lượt
   ============================================================ */
.lspill{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:14;
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  background:var(--primary);color:var(--card);border:0;border-radius:var(--r-pill);
  padding:12px 20px;font-weight:600;font-size:var(--fs-sm);white-space:nowrap;
  box-shadow:0 6px 22px rgba(17,24,39,.32)}
.lspill[hidden]{display:none}
.lspill:hover{background:var(--primary-700)}
.lspill b{font-size:var(--fs-body)}

.lsw{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;background:var(--bg)}
.lsw-in{max-width:760px;margin:0 auto;padding:22px 18px 60px}
.lshead .back{display:inline-flex;align-items:center;gap:6px;color:var(--primary);
  font-weight:600;font-size:var(--fs-sm);cursor:pointer;margin-bottom:12px}
.lshead h1{margin:0 0 8px;font-size:var(--fs-h1);font-weight:700;letter-spacing:-.02em}
.lshead p{margin:8px 0 0;color:var(--text-2);font-size:var(--fs-sm);line-height:1.6}
.lshead .lserr{color:var(--neutral)}
.lssum{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.lssum .s{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;
  padding:8px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card)}
.lssum .s.g{background:var(--success-50);color:var(--success);border-color:transparent}
.lssum .s.a{background:var(--neutral-50);color:var(--neutral);border-color:transparent}
.lssum .s.r{background:var(--danger-50);color:var(--danger);border-color:transparent}
.lsload{margin-top:18px;color:var(--text-2);font-size:var(--fs-sm);display:flex;align-items:center;gap:7px}

/* ---- Lộ trình: thứ mà ghi chú trong điện thoại không làm được ---- */
.lsroute{margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px}
.lsr-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:11px}
.lsr-h b{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-body);font-weight:600}
.lsr-h span{font-size:var(--fs-sm);color:var(--text-2);font-weight:600}
.lsr-map{height:230px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);
  background:var(--neutral-50)}
.lsr-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.lsr-act .act,.lsr-act a.act{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;
  font-size:var(--fs-sm);text-decoration:none;border-radius:var(--r-pill)}
.lsroute .mini{margin-top:7px}
/* ghim đánh số trên bản đồ lộ trình */
.rpin{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;
  border:2px solid #fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:12.5px;box-shadow:0 2px 8px rgba(17,24,39,.35)}

.lsimport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;
  background:var(--primary-50);border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:var(--r-md);padding:13px 14px;color:var(--primary)}
.lsimport>div{flex:1 1 220px;display:flex;flex-direction:column;gap:2px}
.lsimport b{font-size:var(--fs-sm)}
.lsimport span{font-size:var(--fs-meta);color:var(--text-2)}

.lstools{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.lstools .act{display:inline-flex;align-items:center;gap:7px;padding:11px 15px;font-size:var(--fs-sm);
  border-radius:var(--r-pill);flex:1 1 220px;justify-content:center}
.lssh{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.lssh input{flex:1 1 220px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-family:inherit;background:var(--card);color:var(--text-2);min-width:0}
.lssh .act{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-size:var(--fs-sm);
  text-decoration:none;border-radius:var(--r-sm)}

/* ---- Chế độ mang đi: một khung duy nhất, chụp màn hình là đủ dùng cả buổi ---- */
.tocard{border:2px solid var(--primary);border-radius:var(--r-md);overflow:hidden;background:var(--card)}
.tc-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--primary);color:var(--card);padding:11px 13px}
.tc-h b{font-size:var(--fs-sm)}
.tc-h span{font-size:var(--fs-meta);opacity:.85}
.tc-r{display:flex;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line)}
.tc-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--primary-50);
  color:var(--primary);font-weight:700;font-size:12.5px;display:flex;align-items:center;
  justify-content:center;margin-top:2px}
.tc-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.tc-b b{font-size:var(--fs-sm);line-height:1.35}
.tc-p{font-size:var(--fs-meta);color:var(--text-2);font-weight:600}
.tc-a{font-size:var(--fs-meta);color:var(--text-2);line-height:1.45}
.tc-ph{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-body);font-weight:700;
  color:var(--primary);letter-spacing:.02em;margin-top:3px}
.tc-ph .ic{width:14px;height:14px}
.tc-no{font-size:var(--fs-meta);color:var(--neutral);font-style:italic;margin-top:2px}
.tc-x{flex:0 0 auto;width:20px;height:20px;border:2px solid var(--line);border-radius:var(--r-sm);
  margin-top:2px}
.tc-f{padding:9px 13px;font-size:var(--fs-meta);color:var(--text-2);background:var(--bg)}

.lsitems{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.lsit{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--success);
  border-radius:var(--r-md);padding:12px}
.lsit.warn{border-left-color:var(--neutral)}
.lsit.dead{border-left-color:var(--danger);background:var(--bg)}
.lsit.dead .lsi-p img{filter:grayscale(1);opacity:.6}
.lsi-t{display:flex;gap:12px;cursor:pointer;align-items:flex-start}
.lsi-no{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--primary);color:#fff;
  font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.lsit.dead .lsi-no{background:var(--line);color:var(--text-2)}
.lsit.warn .lsi-no{background:var(--neutral)}
.lsi-p{flex:0 0 auto;width:92px;height:70px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--neutral-50)}
.lsi-p img{width:100%;height:100%;object-fit:cover;display:block}
.lsi-p.nop{display:flex;align-items:center;justify-content:center;color:#cbd5e1}
.lsi-b{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.lsi-b b{font-size:var(--fs-body);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsi-pr{font-size:var(--fs-price);font-weight:700;letter-spacing:-.02em}
.lsi-a{font-size:var(--fs-meta);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsi-s{display:flex;align-items:center;gap:6px;font-size:var(--fs-meta);font-weight:600;
  color:var(--text-2);margin-top:3px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsit.dead .lsi-s{color:var(--danger)}
.lsit.warn .lsi-s{color:var(--neutral)}
.lsi-n{width:100%;margin-top:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;
  background:var(--bg);color:var(--text)}
.lsi-act{display:flex;gap:8px;margin-top:10px}
.lsi-act a,.lsi-act button{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;cursor:pointer;font-family:inherit;font-weight:600;font-size:var(--fs-meta);
  padding:10px 13px;border-radius:var(--r-pill);border:1px solid var(--line);background:var(--card)}
.lsi-act .a1{flex:1 1 auto;background:var(--primary);color:var(--card);border-color:var(--primary)}
.lsi-act .a2{flex:1 1 auto;color:var(--primary)}
.lsi-act .a3{flex:0 0 auto;color:var(--danger);padding:10px 11px}
.lsi-act .a3:hover{border-color:var(--danger);background:var(--danger-50)}
.lsi-act .a4{flex:0 0 auto;color:var(--text-2);padding:10px 9px}
.lsi-act .a4:hover:not([disabled]){border-color:var(--primary);color:var(--primary)}
.lsi-act .a4[disabled]{opacity:.35;cursor:default}

.lsclean{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:16px;
  padding:12px;border:1px dashed var(--danger);background:var(--card);color:var(--danger);
  border-radius:var(--r-md);font-weight:600;font-size:var(--fs-sm);cursor:pointer;font-family:inherit}
.lsnote{display:flex;align-items:flex-start;gap:8px;margin-top:20px;
  font-size:var(--fs-meta);color:var(--text-2);line-height:1.6}
.lsempty{text-align:center;padding:48px 20px;color:var(--text-2)}
.lsempty .ic{color:#cbd5e1}
.lsempty b{display:block;margin:14px 0 6px;font-size:var(--fs-body);color:var(--text)}
.lsempty span{display:block;max-width:400px;margin:0 auto 20px;font-size:var(--fs-sm);line-height:1.65}
.lsempty i{font-style:normal;font-weight:600;color:var(--primary)}

/* ---- Trang nhận quản lý ---- */
.clm{max-width:820px;margin:0 auto;padding:0 18px 60px}
.clm-hero{background:var(--primary);color:var(--card);border-radius:0 0 16px 16px;margin:0 -18px 22px;padding:26px 22px}
.clm-hero h1{margin:0 0 8px;font-size:25px;line-height:1.25}
.clm-hero p{margin:0;color:#c6d0e6;font-size:13.5px;line-height:1.7}
.clm-hero .pv{display:inline-block;margin-top:12px;background:rgba(255,255,255,.14);color:var(--card);
  font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill)}
.clm-ask{background:var(--card);border:2px solid var(--primary);border-radius:var(--r-lg);padding:20px;margin:24px 0}
.clm-ask h3{margin:0 0 6px;font-size:18px;color:var(--primary)}
.clm-ask p{margin:0 0 16px;color:var(--text-2);font-size:13px;line-height:1.7}
.clm-btns{display:flex;gap:9px;flex-wrap:wrap}
.clm-btns button{flex:1 1 200px;padding:13px 14px;border-radius:var(--r-md);font-weight:600;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--primary)}
.clm-btns button.yes{background:var(--primary);border-color:var(--primary);color:var(--card);flex:1 1 100%}
.clm-btns button.yes:hover{background:var(--primary-700)}
.clm-btns button.no:hover{background:var(--primary-50)}
.clm-btns button.del{color:var(--danger);border-color:#f3c7c3}
.clm-btns button.del:hover{background:var(--danger-50)}
.clm-form{margin-top:16px;border-top:1px dashed var(--line);padding-top:16px;display:none}
.clm-form.on{display:block}
.clm-done{background:var(--success-50);border:1px solid #bbf0d0;color:var(--success);border-radius:var(--r-md);
  padding:20px;font-size:14px;line-height:1.8}
.clm-done.warn{background:var(--neutral-50);border-color:var(--line);color:var(--text-2)}
.unver{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  background:var(--neutral-50);color:var(--text-2);border:1px dashed var(--line);padding:3px 9px;border-radius:var(--r-pill)}
.ver{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  background:var(--success-50);color:var(--success);padding:3px 9px;border-radius:var(--r-pill)}
/* phễu bàn giao trong trang quản trị */
.funnel{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:14px 0}
.funnel div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.funnel i{font-style:normal;font-size:10.5px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.4px}
.funnel b{display:block;font-size:24px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
.funnel div.hot{border-color:var(--danger);background:var(--danger-50)}
.linkbox{display:flex;gap:6px;align-items:center;margin-top:6px}
.linkbox input{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;
  padding:6px 9px;border:1px solid var(--line);border-radius:var(--r-sm);min-width:0}
.dt .empty{padding:40px 20px;text-align:center;color:var(--text-2);line-height:1.8;font-size:13px}
/* Hộp thông tin nổi bên phải bản đồ, không cắt bản đồ làm đôi như trước.
   Bản đồ giữ nguyên toàn bộ chiều ngang, hộp trôi lên trên nó. */
.side{display:none;position:absolute;right:16px;top:168px;bottom:16px;width:392px;z-index:12;
  background:var(--card);border:1px solid rgba(17,24,39,.08);border-radius:var(--r-md);
  box-shadow:0 14px 44px rgba(17,24,39,.24);overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}
.side.show{display:block}
.thumb.sm{width:84px;height:60px}
.nopic{margin-top:9px;font-size:11px;color:var(--text-2);background:var(--neutral-50);border:1px dashed var(--line);border-radius:var(--r-sm);padding:14px;text-align:center}
.rowinfo{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:var(--text-2)}
.rowinfo span{white-space:nowrap}
@media(max-width:1200px){ .side{width:368px} }
.side-head{padding:12px 14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:2}
.side-head b{font-size:15px;color:var(--primary)}
.side-head{border-top:3px solid var(--primary)}
.side-head p{margin:4px 0 0;color:var(--text-2);font-size:12px;line-height:1.5}

.card{padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.card:hover{background:var(--neutral-50)}
.card.stale{opacity:.55}
.card-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.card-top b{font-size:14px}
.price{font-weight:700;color:var(--text);white-space:nowrap;font-size:var(--fs-price)}
.price small{display:block;font-weight:400;color:var(--text-2);font-size:10px;text-align:right}
.addr{color:var(--text-2);font-size:12px;margin:3px 0 7px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.b{font-size:11px;font-weight:600;padding:3px 8px;border-radius:var(--r-sm);white-space:nowrap}
.b.g{background:var(--success-50);color:var(--success)}
.b.a{background:var(--neutral-50);color:var(--neutral)}
.b.r{background:var(--danger-50);color:var(--danger)}
.b.n{background:var(--neutral-50);color:var(--text-2)}
.dist{font-size:12px;color:var(--text-2);margin-top:7px}

.pin{cursor:pointer;display:flex;flex-direction:column;align-items:center;width:-moz-max-content;width:max-content;line-height:1}
.pin:hover{z-index:10}
/* có phòng trống → cam (màu tiền, nổi nhất). chỉ sắp trống → navy. quá 14 ngày → xám */
.pin-label{display:inline-block;width:-moz-max-content;width:max-content;background:var(--card);border:2px solid var(--primary);color:var(--primary);font-weight:600;font-size:12px;padding:3px 7px;border-radius:var(--r-sm);box-shadow:0 2px 7px rgba(17,24,39,.28);white-space:nowrap;position:relative}
.pin-label:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-top-color:var(--primary)}
.pin.amber .pin-label{border-color:var(--text-2);color:var(--text-2)}
.pin.amber .pin-label:after{border-top-color:var(--text-2)}
.pin.stale .pin-label{border-color:#94a3b8;color:#94a3b8;opacity:.75}
.pin.stale .pin-label:after{border-top-color:#94a3b8}
.pin .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin:6px auto 0;box-shadow:0 0 0 3px rgba(244,113,30,.28)}
.pin.amber .dot{background:var(--text-2);box-shadow:0 0 0 3px rgba(44,63,102,.25)}
.pin.stale .dot{background:#94a3b8;box-shadow:none}
/* ghim địa điểm (trường học) → navy đặc, khác hẳn ghim nhà trọ */
.pin-lm .pin-label{border-color:var(--primary);background:var(--primary);color:var(--card)}
.pin-lm .pin-label:after{border-top-color:var(--primary)}
.pin-lm .dot{background:var(--primary);box-shadow:0 0 0 3px rgba(28,43,74,.22)}

/* bản đồ sơ đồ hoá — dùng khi không tải được thư viện bản đồ */
#fbmap{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;
  background:
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 44px),var(--bg)}
#fbmap .ring{position:absolute;border:2px dashed rgba(15,118,110,.5);background:rgba(15,118,110,.06);border-radius:50%;transform:translate(-50%,-50%)}
#fbmap .fp{position:absolute;transform:translate(-50%,-100%)}
#fbmap .scale{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--text-2);background:rgba(255,255,255,.9);padding:3px 8px;border-radius:var(--r-sm)}

.mask{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(15,23,42,.55);display:none;z-index:50;
  align-items:flex-start;justify-content:center;padding:24px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none}
.mask.on{display:flex}
.modal{background:var(--card);border-radius:var(--r-lg);max-width:720px;width:100%;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3)}

/* ============================================================
   BỘ LỌC — tấm trượt lên từ đáy màn hình
   Ba phần cố định: đầu (tiêu đề + đóng), thân cuộn được, chân dính đáy với
   nút "Xem N kết quả". Chân phải luôn nhìn thấy, nếu không người dùng lọc xong
   không biết bấm gì tiếp.
   ============================================================ */
.mask.sheet{align-items:flex-end}
.fsheet{display:flex;flex-direction:column;width:100%;max-width:560px;max-height:84dvh;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 -10px 44px rgba(15,23,42,.3)}
.fs-head{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:15px 16px 13px;border-bottom:1px solid var(--line);background:var(--card)}
.fs-head b{display:flex;align-items:center;gap:8px;font-size:var(--fs-body);font-weight:600;color:var(--text)}
.fs-head b .ic{color:var(--primary)}
.fs-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:none;padding:2px 16px 14px;min-height:0}
.fs-row{padding:14px 0;border-bottom:1px solid var(--line)}
.fs-row:last-child{border-bottom:0}
.fs-row>label{display:block;margin-bottom:9px;font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
.fs-foot{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:12px 16px;
  padding-bottom:calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--card)}
.fs-foot .act{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:11px 14px;font-size:var(--fs-sm)}
.fs-foot .btn-full{flex:1 1 auto;width:auto;padding:12px}

/* thanh kéo hai đầu chọn khoảng giá: hai input range chồng lên một đường ray vẽ tay */
.rng{position:relative;height:26px;margin:2px 2px 0}
.rng .track{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:var(--r-pill);background:var(--line)}
.rng .fill{position:absolute;top:0;bottom:0;background:var(--primary);border-radius:var(--r-pill)}
.rng input[type=range]{position:absolute;left:0;top:3px;width:100%;height:20px;margin:0;padding:0;border:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none}
.rng input[type=range]:focus{outline:none}
.rng input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;
  width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--primary);
  box-shadow:0 1px 4px rgba(17,24,39,.28);cursor:pointer}
.rng input[type=range]::-moz-range-thumb{pointer-events:auto;width:18px;height:18px;border-radius:50%;
  background:var(--card);border:2px solid var(--primary);cursor:pointer}
.rngv{display:block;margin-top:9px;font-size:var(--fs-body);font-weight:600;color:var(--primary)}

/* "+ Thêm" giấu bớt các tiện ích ít dùng để hàng chip không dài lê thê */
.chips .chip.more{display:none}
.chips.all .chip.more{display:inline-flex}
.chips.all .addmore{display:none}
.chip.addmore{font-family:inherit;border-style:dashed;border-color:var(--primary);color:var(--primary)}

.hero{height:150px;background:linear-gradient(135deg,var(--text-2),var(--primary-700));color:var(--card);display:flex;align-items:center;justify-content:center;font-size:13px}
.m-body{padding:16px 18px 22px}
.m-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.m-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em}
.x{border:0;background:var(--neutral-50);width:32px;height:32px;border-radius:var(--r-sm);cursor:pointer;font-size:16px;color:var(--text-2);flex:0 0 auto}
h4.sec{margin:22px 0 9px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-weight:600}
.room{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 12px;margin-bottom:8px}
.room.sap{background:var(--neutral-50);border-color:var(--line)}
.room-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.room-top b{font-size:14px}
.amen{color:var(--text-2);font-size:12px;margin-top:5px}
.break{margin-top:8px;font-size:12px;color:var(--text-2);background:var(--bg);border:1px dashed var(--line);border-radius:var(--r-sm);padding:8px 10px;line-height:1.7}
.break b{color:var(--text)}
.cta{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
/* nút hành động chính = cam; nút phụ = viền navy */
.btn{padding:10px 16px;border-radius:var(--r-sm);border:1px solid var(--primary);background:var(--primary);
  color:var(--card);font-weight:600;font-size:var(--fs-body);cursor:pointer}
.btn:hover{background:var(--primary-700);border-color:var(--primary-700)}
.btn.ghost{background:var(--card);color:var(--primary);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--primary);background:var(--primary-50)}
.note{background:var(--primary-50);border:1px solid var(--line);color:var(--primary);border-radius:var(--r-md);padding:10px 12px;font-size:12px;line-height:1.6;margin-top:14px}

/* ẢNH / VIDEO */
.thumbs{display:flex;gap:6px;margin-top:9px;overflow-x:auto;padding-bottom:3px}
.thumb{position:relative;flex:0 0 auto;width:96px;height:66px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);cursor:pointer;background:var(--line)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.75));color:var(--card);font-size:9px;font-weight:600;padding:9px 4px 3px;text-align:center;line-height:1.15}
.thumb.vid:after{content:"▶";position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;color:var(--card);font-size:20px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.thumb.more{display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text-2);background:var(--neutral-50);font-size:13px}
.mediaAge{font-size:11px;color:var(--text-2);margin-top:6px}
.mediaAge.old{color:var(--danger);font-weight:600}
.hero{position:relative;padding:0}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero .tagm{position:absolute;left:12px;bottom:12px;background:rgba(2,6,23,.65);color:var(--card);font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--r-sm)}
.lb{position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(2,6,23,.93);z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lb.on{display:flex}
.lb img,.lb video{max-width:92vw;max-height:72vh;border-radius:var(--r-md);background:#000}
.lb-bar{color:var(--card);margin-top:14px;display:flex;gap:16px;align-items:center;font-size:13px}
.lb-bar button{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:var(--card);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:16px}
.lb-x{position:absolute;top:16px;right:20px;border:0;background:rgba(255,255,255,.16);color:var(--card);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:18px}
/* ---- Khai các khoản thu ngoài tiền phòng ----
   Mỗi dòng: tên khoản · cách tính · số tiền · đơn vị · nút xoá. Không nằm trong
   .fld nên phải tự khai kiểu cho input/select, nếu không trình duyệt vẽ ô mặc định
   và cả dòng vỡ xuống nhiều hàng. */
.feerow{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);
  padding:7px 9px;margin-bottom:7px}
.feerow.na{background:var(--bg)}
.feerow input,.feerow select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);color:var(--text);font-size:var(--fs-sm);font-family:inherit;min-width:0}
.feerow .fnm{flex:1 1 140px;font-weight:600}
.feerow select{flex:0 0 168px}
.feerow .fpr{flex:0 0 112px;text-align:right}
.feerow .fun{flex:0 0 90px}
.feerow .fsuf{flex:0 0 auto;font-size:var(--fs-sm);color:var(--text-2);white-space:nowrap}
.feerow .fsuf.gray{flex:1 1 auto}
.feerow .rowdel{flex:0 0 auto;margin-left:auto;padding:6px 8px}

/* ---- Ô ảnh phòng trong bảng quản trị: ảnh + một nút tải, không hỏi han gì thêm ---- */
.pics{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pics .pc{position:relative;display:inline-block;flex:0 0 auto;line-height:0}
.pics .pc img{width:46px;height:34px;object-fit:cover;border-radius:var(--r-sm);
  border:1px solid var(--line);display:block;background:var(--neutral-50)}
.pics .pc b{position:absolute;top:-5px;right:-5px;width:16px;height:16px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:11px;line-height:16px;text-align:center;
  font-weight:400;cursor:pointer}
.pics .nopc{font-size:var(--fs-meta);color:var(--text-2);white-space:nowrap}

/* chip bật/tắt tiện ích trong bảng phòng */
/* Nút tiện ích CÓ CHỮ: icon một mình thì chủ trọ mở lần đầu không đoán nổi, mà trên
   điện thoại lại không có hover để đọc tooltip. Bật = tô màu thương hiệu và chữ đậm,
   tắt = viền xám chữ nhạt — trạng thái nhìn là biết, không phải suy luận. */
.amt{display:flex;gap:5px;flex-wrap:wrap;max-width:236px}
.amx{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:var(--card);color:var(--text-2);
  border-radius:var(--r-pill);padding:5px 10px;font-size:11.5px;font-weight:600;
  line-height:1.25;white-space:nowrap;transition:background .12s,border-color .12s}
.amx:hover{border-color:var(--primary);color:var(--primary)}
.amx.on{background:var(--primary-50);border-color:var(--primary);color:var(--primary)}
.amx .ic{width:14px;height:14px;flex:0 0 auto;opacity:.9}
.amx.on .ic{opacity:1}
.rowdel{border:1px solid var(--line);background:var(--card);color:var(--danger);border-radius:var(--r-sm);
  padding:3px 6px;cursor:pointer;line-height:1}
.rowdel:hover{background:var(--danger-50);border-color:var(--danger)}
/* ===== Bảng phòng: phân tách rõ từng phòng bằng màu trạng thái =====
   Trước đây mọi ô đều trắng như nhau nên nhìn thành một mảng chữ. Giờ mỗi hàng
   có dải màu bên trái theo trạng thái, và hàng chẵn/lẻ khác nền một chút. */
#dashRooms td{padding:9px 6px;background:var(--card)}
#dashRooms tr:nth-child(even) td{background:var(--bg)}
#dashRooms tr.rline td:first-child{border-left:4px solid var(--line)}
#dashRooms tr.st-trong td:first-child{border-left-color:var(--success)}
#dashRooms tr.st-sap   td:first-child{border-left-color:var(--neutral)}
#dashRooms tr.st-thue  td:first-child{border-left-color:#cbd5e1}
#dashRooms tr.st-trong td{background:var(--success-50)}
#dashRooms tr.st-trong:nth-child(even) td{background:var(--success-50)}
#dashRooms tr.st-sap td{background:var(--neutral-50)}
#dashRooms tr.st-sap:nth-child(even) td{background:var(--neutral-50)}
#dashRooms tr.rline:hover td{background:var(--primary-50)}
#dashRooms td:first-child input{font-weight:600;color:var(--primary)}
#dashRooms input[type=number]{width:76px}
.addrow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:12px;
  background:var(--primary-50);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.addrow .f label{font-size:10.5px}
.addrow input{width:88px}
#ebGeo{height:200px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--neutral-50)}
.up{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;white-space:nowrap;
  padding:7px 11px;border:1px dashed var(--primary);color:var(--primary);border-radius:var(--r-pill);
  cursor:pointer;font-weight:600;font-size:var(--fs-meta)}
.up:hover{background:var(--primary-50)}
.up .ic{width:14px;height:14px}
.up input{display:none}

/* ---- lời mời "Mở nhanh như App" (chỉ điện thoại, chỉ khi đã đăng nhập) ---- */
.a2hs{display:flex;align-items:flex-start;gap:10px;position:relative;
  background:var(--primary-50);border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:var(--r-md);padding:11px 38px 11px 12px;margin-bottom:12px}
.a2hs[hidden]{display:none}
.a2hs .a2-ic{flex:0 0 auto;color:var(--primary);margin-top:1px}
.a2hs .a2-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.a2hs .a2-b b{font-size:var(--fs-sm);color:var(--primary)}
.a2hs .a2-b span{font-size:var(--fs-meta);color:var(--text);line-height:1.5}
.a2hs .a2-b span .ic{width:13px;height:13px;vertical-align:-2px}
.a2hs .a2-b i{font-style:normal;font-size:var(--fs-meta);color:var(--text-2)}
.a2hs .a2-go{flex:0 0 auto;align-self:center;background:var(--primary);color:var(--card);border:0;
  border-radius:var(--r-pill);padding:8px 14px;font-weight:600;font-size:var(--fs-meta);
  cursor:pointer;font-family:inherit}
.a2hs .a2-x{position:absolute;top:7px;right:7px;background:transparent;border:0;color:var(--text-2);
  cursor:pointer;padding:4px;line-height:0}

/* TÀI KHOẢN · WIZARD · QUẢN TRỊ */
.who{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);margin-left:10px}
/* nút Đăng nhập dạng viên thuốc navy — điểm nhấn duy nhất bên phải header */
.pillin{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:var(--primary);
  color:var(--card);border:0;border-radius:var(--r-pill);font-weight:600;font-size:var(--fs-sm);
  cursor:pointer;font-family:inherit}
.pillin:hover{background:var(--primary-700)}
.who b{color:var(--text)}
.who .role{background:var(--primary-50);color:var(--primary);font-weight:600;font-size:10px;padding:2px 7px;border-radius:var(--r-sm);text-transform:uppercase}
.auth{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:26px 18px;display:block}
.auth-card{max-width:420px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.auth-card h2{margin:0 0 6px;font-size:var(--fs-h2);font-weight:700;letter-spacing:-.02em}
.auth-card p.sub{margin:0 0 20px;color:var(--text-2);font-size:var(--fs-body);line-height:1.65}
.seg{display:flex;gap:6px;margin-bottom:16px}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-sm);font-weight:600;color:var(--text-2);cursor:pointer}
.seg button.on{background:var(--primary);border-color:var(--primary);color:var(--card)}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2);margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-body);background:var(--card);color:var(--text)}
.fld .hint{font-size:var(--fs-meta);color:var(--text-2);margin-top:5px;line-height:1.6}
/* Ô tích KHÔNG phải ô nhập liệu. Quy tắc .fld input{width:100%} ở trên từng kéo
   cái ô vuông ra hết chiều ngang, đẩy chữ xuống dòng dưới. */
.fld input[type=checkbox],.fld input[type=radio]{width:17px;height:17px;flex:0 0 auto;
  padding:0;border:0;border-radius:0;margin:0;accent-color:var(--primary);cursor:pointer}
.fld label.chk{display:flex;align-items:center;gap:9px;min-height:34px;margin:0;
  font-size:var(--fs-sm);font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--text);cursor:pointer}
.fld label.chk span{line-height:1.4}
.btn-full{width:100%;padding:13px;border-radius:var(--r-sm);border:1px solid var(--primary);background:var(--primary);
  color:var(--card);font-weight:600;cursor:pointer;font-size:var(--fs-body)}
.btn-full:hover{background:var(--primary-700)}
.err{background:var(--danger-50);color:var(--danger);border-radius:var(--r-sm);padding:9px 11px;font-size:12px;margin-bottom:12px;font-weight:600;display:none}
.err.on{display:block}
.ok{background:var(--success-50);color:var(--success);border-radius:var(--r-sm);padding:9px 11px;font-size:12px;margin-bottom:12px;font-weight:600}
/* cảnh báo số điện thoại đã dùng ở nhà trọ khác */
.phw{background:var(--neutral-50);border:1px solid var(--line);border-radius:var(--r-md);padding:9px 11px;margin-top:7px;
  font-size:12px;color:var(--text-2);line-height:1.6}
.phw b{color:var(--text)}
.phw ul{margin:5px 0 5px 17px;padding:0}
.phw li{margin:2px 0}
.phw i{font-style:normal;color:var(--success);font-weight:600}
.phw span{display:block;margin-top:4px;color:var(--text-2)}
.upsell{background:var(--primary-50);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin:0 0 16px}
.upsell div{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;line-height:1.6;color:var(--primary);padding:3px 0}
.upsell div span{flex:1 1 auto;min-width:0}
.upsell .ic{color:var(--primary);margin-top:2px}
.upsell b{color:var(--primary)}
.demo{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:11px;color:var(--text-2);line-height:1.7}

.wz{max-width:640px}
/* Bước tải ảnh trong luồng khai báo nhà trọ */
.wzdrop{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--r-lg);padding:22px 16px;background:var(--primary-50);color:var(--primary)}
.wzdrop:hover{border-color:var(--primary);background:var(--primary-50)}
.wzdrop .ic{color:var(--primary)}
.wzdrop b{font-size:14px}
.wzdrop span{font-size:12px;color:var(--text-2);line-height:1.6;max-width:340px}
.wzdrop input{display:none}
.wzpics{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.wzp{width:74px;height:74px;border-radius:var(--r-md);overflow:hidden;background:var(--neutral-50);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-2);text-align:center;padding:4px}
.wzp img{width:100%;height:100%;object-fit:cover;display:block}
.wzp.bad{background:var(--danger-50);color:var(--danger);border-color:#f3c7c3}
.steps{display:flex;gap:6px;margin-bottom:16px}
.steps div{flex:1;height:4px;border-radius:2px;background:var(--line)}
.steps div.on{background:var(--primary)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#geoMap{height:230px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);position:relative;background:var(--neutral-50)}
/* Ghim định vị khi chủ trọ chọn vị trí nhà: dùng đúng ghim thương hiệu,
   mũi ghim nằm chính xác ở tâm khung, kèm bóng đổ để thấy điểm chạm đất. */
.cross{position:absolute;left:50%;top:50%;z-index:5;pointer-events:none;
  transform:translate(-50%,-100%);filter:drop-shadow(0 3px 5px rgba(17,24,39,.35))}
.cross svg{width:34px;height:46px;display:block}
.cross:after{content:"";position:absolute;left:50%;top:100%;width:14px;height:5px;margin-left:-7px;
  border-radius:50%;background:rgba(17,24,39,.28)}
.geohint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:6;pointer-events:none;
  background:rgba(17,24,39,.86);color:var(--card);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap}
/* Ô dán link Google Maps — đường nhanh nhất để ghim đúng nhà */
.pastebox{background:var(--primary-50);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 13px;margin-bottom:10px}
.pb-t{font-size:12.5px;color:var(--primary-700);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.pb-r{display:flex;gap:7px;flex-wrap:wrap}
.pb-r input{flex:1 1 220px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);font-size:14px}
.pb-r .btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pb-h{font-size:11.5px;color:var(--text-2);line-height:1.7;margin-top:7px}
.pb-m{margin-top:8px;font-size:12px;line-height:1.6;padding:8px 10px;border-radius:var(--r-sm)}
.pb-m.ok{background:var(--success-50);color:var(--success)}
.pb-m.bad{background:var(--danger-50);color:var(--danger)}
.pb-m.wait{background:var(--card);color:var(--text-2)}
.orline{display:flex;align-items:center;gap:10px;margin:12px 0 10px;color:var(--text-2);font-size:11.5px}
.orline:before,.orline:after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
@media(max-width:760px){ .pb-r .btn{flex:1 1 100%;justify-content:center} }
.geo-res{border:1px solid var(--line);border-radius:var(--r-sm);max-height:130px;overflow:auto;margin-top:8px}
.geo-res div{padding:8px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:12px;line-height:1.5}
.geo-res div:hover{background:var(--neutral-50)}
.wz-nav{display:flex;gap:8px;margin-top:16px}
.wz-nav button{flex:1;padding:10px;border-radius:var(--r-md);font-weight:600;cursor:pointer}

.adm{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:18px}
.adm-wrap{max-width:1100px;margin:0 auto}
.adm h3{margin:22px 0 10px;font-size:15px}
.pend{background:var(--neutral-50);border:1px solid var(--line)}
.mini{font-size:11px;color:var(--text-2)}
.act{padding:4px 9px;border-radius:var(--r-sm);border:1px solid var(--primary);background:var(--primary);color:var(--card);font-weight:600;cursor:pointer;font-size:11px}
.act:hover{background:var(--primary-700)}
.act.no{background:var(--card);color:var(--danger);border-color:var(--danger)}
.act.gh{background:var(--card);color:var(--primary);border-color:var(--line)}
.act.gh:hover{background:var(--primary-50);border-color:var(--primary)}
@media(max-width:900px){ .grid2{grid-template-columns:1fr} }


/* ---- Huy hiệu độ tươi: xanh mới / xám trung tính / đỏ quá hạn ---- */
.fresh{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-meta);font-weight:600;
  padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;border:1px solid transparent}
.fresh.g{background:var(--success-50);color:var(--success);border-color:#bbf0d0}
.fresh.a{background:var(--neutral-50);color:var(--neutral);border-color:var(--line)}
.fresh.r{background:var(--danger-50);color:var(--danger);border-color:#f3c7c3}
.fresh .sd{width:8px;height:8px}
.fresh.b{font-size:11.5px;padding:3px 9px}

/* ============ TRANG RIÊNG: mapin.vn/ten-nha-tro ============
   Ít khung, nhiều khoảng thở. Chỉ những khối thật sự cần tách bạch mới có viền:
   thẻ phòng, bản đồ, khối hành động. Phần còn lại dùng đường kẻ mảnh và
   khoảng cách để phân nhóm — mắt đọc nhanh hơn nhiều so với một rừng ô vuông. */
.mini-wrap{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;background:var(--card)}
.urlbar{display:flex;align-items:center;gap:14px;padding:0 24px;height:52px;
  background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.urlbar .back{display:inline-flex;align-items:center;gap:7px;color:var(--text);font-weight:600;
  font-size:var(--fs-sm);cursor:pointer;text-decoration:none}
.urlbar .back:hover{color:var(--primary)}
.urlbar .bd{margin-left:auto;font-weight:700;color:var(--primary);letter-spacing:-.01em}
.ms{max-width:1200px;margin:0 auto;padding:0 24px 72px}

/* ---- đầu trang ---- */
.phead{padding:28px 0 18px}
.phead h1{margin:0 0 8px;font-size:var(--fs-h1);font-weight:700;line-height:1.15;letter-spacing:-.025em}
.psub{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--text-2)}
.psub .ok{color:var(--success);font-weight:600}
.psub .no{color:var(--text-2);font-weight:600}
.psub .dot{color:#cbd5e1}

/* ---- ảnh + cột thông tin ---- */
.ptop{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:22px;align-items:start}
/* Trang riêng dùng đúng băng ảnh .dtgal của cột chi tiết, chỉ khác kích thước —
   khách học một lần rồi vuốt được ở mọi màn hình. */
.mgal{position:relative}
.mgal .dtgal{margin:0;border-radius:var(--r-md);overflow:hidden}
.mgal .gsl{aspect-ratio:16/10}
.mgal .gcount{right:14px;bottom:14px;font-size:var(--fs-sm);padding:5px 12px}
.mgal .gdots{bottom:15px}
.mgal .garr{width:40px;height:40px;margin-top:-20px}
.galback{position:absolute;left:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 14px;
  font-size:var(--fs-meta);font-weight:600;color:var(--text);cursor:pointer;box-shadow:0 3px 12px rgba(17,24,39,.16)}

.pinfo{position:sticky;top:70px;display:flex;flex-direction:column;gap:12px;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:20px}
.pprice{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pprice span{font-size:var(--fs-body);font-weight:400;color:var(--text-2)}
.pfacts{font-size:var(--fs-sm);color:var(--text-2);margin-top:-6px}
.pstate{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm);font-weight:600;
  padding:10px 12px;border-radius:var(--r-sm);background:var(--success-50);color:var(--success)}
.pstate.no{background:var(--neutral-50);color:var(--text-2)}
.pstate i{font-style:normal;font-weight:400;color:var(--text-2);width:100%;font-size:var(--fs-meta)}
.pcall{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--primary);
  color:var(--card);border-radius:var(--r-sm);padding:14px;font-weight:600;font-size:var(--fs-body);
  text-decoration:none}
.pcall:hover{background:var(--primary-700)}
.prow2{display:flex;gap:8px}
.prow2 a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px;font-weight:600;font-size:var(--fs-sm);color:var(--text);text-decoration:none}
.prow2 a:hover{border-color:var(--primary);background:var(--primary-50)}
.pfresh{padding-top:2px}
.pnote{font-size:var(--fs-meta);color:var(--text-2);line-height:1.6;display:flex;gap:6px;align-items:flex-start}

/* ---- mục nội dung ---- */
.msec{padding:34px 0;border-top:1px solid var(--line)}
.msec:first-of-type{border-top:0}
.msec h2{margin:0 0 6px;font-size:var(--fs-h2);font-weight:600;letter-spacing:-.015em}
.msec h3.sub{margin:26px 0 10px;font-size:var(--fs-h3);font-weight:600}
.msec .lead{margin:0 0 18px;color:var(--text-2);font-size:var(--fs-body);line-height:1.65}

/* ---- danh sách phòng ---- */
.rlist{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.rlist .rrow{display:grid;grid-template-columns:110px 76px 1fr 110px 120px 104px;align-items:center;gap:12px;
  padding:14px 16px;cursor:pointer;border-top:1px solid var(--line);transition:background .12s}
.rlist .rrow:first-child{border-top:0}
.rlist .rrow:hover{background:var(--bg)}
.rlist .rrow.on{background:var(--primary-50)}
.rlist .rrow .rn{font-weight:600;color:var(--text)}
.rlist .rrow .ra,.rlist .rrow .rf,.rlist .rrow .rs{font-size:var(--fs-sm);color:var(--text-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rlist .rrow .rp{font-size:var(--fs-price);font-weight:700;text-align:right;white-space:nowrap}
.rlist .rrow .rb{font-size:var(--fs-meta);font-weight:600;color:var(--primary);text-align:right}
.rlist .rrow.soon{background:var(--neutral-50)}
.rlist .rrow.soon .rs{color:var(--neutral);font-weight:600}

/* ---- tiện ích: một hàng chip, không phải lưới ô ---- */
.amrow{display:flex;flex-wrap:wrap;gap:8px}
.amrow span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  border-radius:var(--r-pill);padding:8px 14px;font-size:var(--fs-sm);color:var(--text)}
.owndesc{white-space:pre-wrap;border-left:3px solid var(--primary);background:var(--bg);
  border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 16px;margin-top:16px;
  font-size:var(--fs-body);line-height:1.75}

/* ---- chi phí: danh sách nhãn – giá trị, không đóng hộp ---- */
.deflist{margin:0;max-width:640px}
.deflist>div{display:flex;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.deflist>div:last-child{border-bottom:0}
.deflist dt{flex:0 0 190px;color:var(--text-2);font-size:var(--fs-sm)}
.deflist dd{margin:0;flex:1 1 auto;font-size:var(--fs-body);color:var(--text);text-align:right}
.deflist dd.strong{font-size:var(--fs-price);font-weight:700}
.deflist dd.na{color:var(--text-2);font-style:italic}
.deflist dd i{font-style:normal;color:var(--text-2);font-size:var(--fs-meta)}

/* ---- vị trí ---- */
#miniMap{height:340px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--neutral-50)}
.nearlist{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.nearlist li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:var(--fs-sm);break-inside:avoid}
.nearlist li .ic{color:var(--text-2);flex:0 0 auto}
.nearlist li span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nearlist li em{font-style:normal;color:var(--text-2);white-space:nowrap}
.nearlist li.mini{color:var(--text-2);border-bottom:0}
.calcbox{border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.calcbox .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.calcbox select,.calcbox input{padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:var(--fs-body);flex:1 1 200px;background:var(--card);min-width:0}
.tt{display:flex;gap:26px;margin-top:14px;flex-wrap:wrap}
.tt div{font-size:var(--fs-sm);color:var(--text-2)}
.tt div b{display:block;font-size:var(--fs-price);color:var(--text);font-weight:700}

/* ---- độ tin cậy: nói bằng chữ, con số chỉ là phụ ---- */
.trust{display:flex;align-items:center;gap:18px;border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px}
.trust .tnum{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;
  padding-right:18px;border-right:1px solid var(--line)}
.trust .tnum .ic{width:22px;height:22px;color:var(--text-2)}
.trust .tnum b{font-size:26px;font-weight:700;letter-spacing:-.02em}
.trust .tmain{display:flex;flex-direction:column;gap:4px}
.trust .tmain b{font-size:var(--fs-body);font-weight:600;display:flex;align-items:center;gap:7px}
.trust .tmain span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.trust.ok{background:var(--success-50);border-color:#bbf0d0}
.trust.ok .tnum b{color:var(--success)}
.trust.mid{background:var(--bg)}
.trust.low{background:var(--danger-50);border-color:#f3c7c3}
.trust.low .tnum b{color:var(--danger)}
.tdet{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.tdet summary{cursor:pointer;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);list-style:none;
  display:flex;align-items:center;gap:7px}
.tdet summary::-webkit-details-marker{display:none}
.tdet summary:after{content:"⌄";margin-left:auto;color:var(--text-2)}
.tdet[open] summary:after{content:"⌃"}
.tdet ul{margin:10px 0 0;padding-left:2px;list-style:none;font-size:var(--fs-sm);color:var(--text-2);line-height:2}
.tdet #rvForm{margin-top:12px}
.rvtop{display:flex;align-items:center;gap:10px;margin:10px 0 6px}
.rvtop b{font-size:28px;font-weight:700;letter-spacing:-.02em}
.rvtop span{color:var(--primary)}
.bars{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 26px;margin:10px 0 20px}
.bars div{font-size:var(--fs-sm);color:var(--text-2)}
.bars .bg{height:5px;background:var(--line);border-radius:3px;margin-top:5px;overflow:hidden}
.bars .bg i{display:block;height:100%;background:var(--primary);border-radius:3px}
.rvw{border-top:1px solid var(--line);padding:14px 0}
.rvw .hd{display:flex;gap:10px;align-items:baseline}
.rvw .hd b{font-weight:600}
.rvw .hd em{font-style:normal;color:var(--primary)}
.rvw p{margin:6px 0 0;font-size:var(--fs-body);line-height:1.7;color:var(--text-2)}

/* ---- hành động: một chính, một phụ ---- */
.ctamain{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center;
  background:var(--primary);color:var(--card);border-radius:var(--r-lg);padding:26px 28px}
.ctamain h2{color:var(--card);margin:0 0 6px}
.ctamain p{margin:0;color:#c6d0e6;font-size:var(--fs-sm);line-height:1.65}
.ctamain .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}
.ctamain input,.ctamain select{padding:12px;border-radius:var(--r-sm);border:0;font-size:var(--fs-sm);
  width:100%;min-width:0;background:var(--card);color:var(--text)}
.ctamain button{margin-top:10px;width:100%;padding:13px;border-radius:var(--r-sm);border:0;
  background:var(--card);color:var(--primary);font-weight:600;font-size:var(--fs-body);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px}
.ctamain .done{background:rgba(255,255,255,.14);border-radius:var(--r-sm);padding:14px;
  font-size:var(--fs-sm);line-height:1.7}
.ctasub{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px;
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.ctasub .cs-l{flex:1 1 260px;display:flex;flex-direction:column;gap:3px}
.ctasub .cs-l b{display:flex;align-items:center;gap:7px;font-size:var(--fs-body);font-weight:600}
.ctasub .cs-l span{font-size:var(--fs-sm);color:var(--text-2);line-height:1.6}
.ctasub .row{display:flex;gap:8px;flex:2 1 420px;flex-wrap:wrap}
.ctasub input,.ctasub select{flex:1 1 120px;min-width:0;padding:11px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:var(--fs-sm);background:var(--card)}
.ctasub button{flex:0 0 auto;padding:11px 18px;border-radius:var(--r-sm);border:1px solid var(--primary);
  background:var(--card);color:var(--primary);font-weight:600;font-size:var(--fs-sm);cursor:pointer}
.ctasub button:hover{background:var(--primary-50)}
.ctasub .done{flex:1 1 100%;font-size:var(--fs-sm);color:var(--success)}

/* ---- chia sẻ ---- */
.share{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.share .btns{display:flex;flex-direction:column;gap:9px;flex:1 1 260px}
.share .btns a,.share .btns button{display:flex;align-items:center;gap:9px;padding:12px 16px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);font-weight:600;
  font-size:var(--fs-sm);cursor:pointer;text-decoration:none;color:var(--text)}
.share .btns a:hover,.share .btns button:hover{background:var(--primary-50);border-color:var(--primary)}
.qr{text-align:center;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;flex:0 0 auto}
.qr img{display:block;width:172px;height:172px}
.qr div{font-size:var(--fs-meta);color:var(--text-2);margin-top:9px;max-width:172px;line-height:1.5}
.vidbtn{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.mfoot{border-top:1px solid var(--line);padding:26px 0 0;text-align:center;
  color:var(--text-2);font-size:var(--fs-sm);line-height:1.9}
.mfoot b{color:var(--primary)}
.mfoot a{color:var(--primary);font-weight:600;cursor:pointer}
.wait{background:var(--primary-50);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin-bottom:14px;font-size:var(--fs-sm);line-height:1.65}
.wait b{color:var(--primary)}

/* ---- LIÊN HỆ HỖ TRỢ ----------------------------------------------------
   .help  = hộp đầy đủ, dùng nơi chủ trọ cần kiểm chứng Mapin là thật.
   .helpl = một dòng gọn, xen trong luồng đang làm việc.                  */
.help{background:var(--primary-50);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;margin:16px 0 0;text-align:left}
.help-t{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);
  font-size:var(--fs-sm);line-height:1.5}
.help-s{color:var(--text-2);font-size:var(--fs-meta);line-height:1.65;margin-top:6px}
.help-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.help-b a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pill);
  text-decoration:none;font-weight:600;font-size:var(--fs-sm);min-width:0;white-space:nowrap}
.help-b .zl{background:var(--primary);color:#fff;border:1px solid var(--primary)}
.help-b .zl .ic{color:#fff}
/* KHÔNG đặt tên .tl ở đây: .tl là nhãn chữ dài bị ẩn trên mobile (dòng ~1477),
   trùng tên là có ngày nút Gọi biến mất trên điện thoại. */
.help-b .ph{background:var(--card);color:var(--primary);border:1px solid var(--line)}
.fgot{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--text-2);font-size:var(--fs-meta);line-height:1.7}
.fgot b{color:var(--text)}
.helpl{color:var(--text-2);font-size:var(--fs-meta);line-height:1.7;margin-top:10px}
.helpl a{color:var(--primary);font-weight:600;text-decoration:none;white-space:nowrap}
.helpl a:hover{text-decoration:underline}
#wzHelp .helpl{text-align:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
#inHelp .help{margin-top:12px}

@media(max-width:1000px){
  .ptop{grid-template-columns:1fr;gap:16px}
  .pinfo{position:static}
  .nearlist{columns:1}
  .ctamain{grid-template-columns:1fr;gap:18px}
}
@media(max-width:760px){
  .urlbar{padding:0 14px;height:48px}
  .ms{padding:0 14px 60px}
  .phead{padding:18px 0 14px}
  .phead h1{font-size:26px}
  .mgal .dtgal{border-radius:var(--r-md)}
  .mgal .gsl{aspect-ratio:3/2}
  .pinfo{padding:16px;border-radius:var(--r-md)}
  .pprice{font-size:24px}
  .msec{padding:26px 0}
  .msec h2{font-size:20px}
  /* mỗi phòng thành một thẻ dọc, không cố nhồi 6 cột vào màn hẹp */
  .rlist .rrow{grid-template-columns:1fr auto;gap:4px 12px;padding:14px}
  .rlist .rrow .rn{grid-column:1}
  .rlist .rrow .rp{grid-column:2;grid-row:1;font-size:18px}
  .rlist .rrow .ra{grid-column:1;grid-row:2}
  .rlist .rrow .rs{grid-column:2;grid-row:2;text-align:right}
  .rlist .rrow .rf{grid-column:1/-1;grid-row:3;white-space:normal}
  .rlist .rrow .rb{grid-column:1/-1;grid-row:4;text-align:left;padding-top:4px}
  .deflist dt{flex:0 0 46%}
  #miniMap{height:260px}
  .ctamain{padding:20px 18px}
  .ctamain .row{grid-template-columns:1fr}
  .ctasub .row{flex:1 1 100%}
  .ctasub button{flex:1 1 100%}
  .share{gap:18px}
  .qr{margin:0 auto}
}

.dash{flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:18px}
.dash-wrap{max-width:960px;margin:0 auto}

/* ===== DASHBOARD CHỦ TRỌ =====
   Trên máy tính: tất cả các mục xếp dọc như cũ.
   Trên điện thoại: biến thành app — thanh dính trên, 3 tab, và hai nút hành động
   dính đáy màn hình. 95% chủ trọ cập nhật bằng điện thoại nên ngón cái phải với tới. */
.dhead{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;margin-bottom:14px;
  display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
/* min-width:0 KHÔNG phải trang trí.
   Ô chọn nhà trọ chứa những dòng rất dài kiểu "Nhà trọ Thu Hà — 1 Nhà Hồ, Văn Quán,
   Hà Đông, Hà Nội (10 phòng)". Mặc định một <select> rộng bằng lựa chọn dài nhất,
   và một flex item có min-width:auto thì KHÔNG co xuống dưới mức đó dù đã đặt
   width:100%. Kết quả: cả thanh đầu trang rộng hơn màn hình, kéo ngang được. */
.dpick{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}
.dpick label{font-size:11px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.dpick select{padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}
.dhact{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.dhact .act{padding:8px 12px;display:inline-flex;align-items:center;gap:6px}
.dfresh{font-size:12px;color:var(--text-2);min-width:0}
.dfresh b{color:var(--text)}
.dtabs{display:none}
.dsec{display:block}
.dbar{display:none}
.sitebtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.sitebtns .act{display:inline-flex;align-items:center;gap:6px;padding:8px 12px}

/* thẻ khách để lại liên hệ */
.gh{margin:0 0 10px;font-size:13.5px;display:flex;align-items:center;gap:7px;color:var(--primary)}
.gcard{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);
  padding:10px 12px;margin-bottom:8px;flex-wrap:wrap}
.gcard:last-child{margin-bottom:0}
.gi{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.gi b{font-size:14px;color:var(--primary)}
.ga{display:flex;gap:7px;flex:0 0 auto}
.ga .act{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;text-decoration:none}
.empty2{text-align:center;padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:9px}
.empty2 .ic{color:var(--line);width:38px;height:38px}
.empty2 b{font-size:15px;color:var(--primary)}
.empty2 span{font-size:12.5px;color:var(--text-2);line-height:1.7;max-width:380px}

/* thông báo ngắn sau mỗi thao tác */
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%) translateY(12px);z-index:70;
  background:var(--primary);color:var(--card);font-size:13px;font-weight:600;padding:11px 18px;border-radius:var(--r-pill);
  box-shadow:0 8px 26px rgba(17,24,39,.34);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px;
  border-top:3px solid var(--line)}
.stat:nth-child(2){background:var(--success-50);border-color:#bbf0d0;border-top-color:var(--success)}
.stat:nth-child(3){background:var(--neutral-50);border-color:var(--line);border-top-color:var(--neutral)}
.stat:nth-child(4){border-top-color:#cbd5e1}
.stat i{font-style:normal;font-size:11.5px;font-weight:600;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em}
.stat b{display:block;font-size:28px;font-weight:700;margin-top:5px;letter-spacing:-.02em}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-2)}
td select,td input{padding:5px 7px;border:1px solid var(--line);border-radius:var(--r-sm)}
.zalo{background:var(--success-50);border:1px solid #bbf0d0;border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.zalo b{display:block;margin-bottom:6px}
.mmeta{display:none;position:absolute;left:10px;right:56px;bottom:14px;z-index:12;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;
  box-shadow:0 6px 20px rgba(17,24,39,.18);align-items:center;gap:10px;cursor:pointer}
.mmeta .mtx{flex:1 1 auto;min-width:0}
.mmeta b{display:block;font-size:13px;color:var(--primary)}
.mmeta i{font-style:normal;font-size:11.5px;color:var(--text-2)}
@media(max-width:900px){
  /* hộp chi tiết trượt lên từ đáy sẽ che mất viên "đã lưu", nên ẩn nó đi khi đang mở */
  .side.show ~ .lspill{display:none}
  .lspill{bottom:14px;padding:11px 18px}
  .lsw-in{padding:16px 14px 48px}
  .lshead h1{font-size:24px}
  .lsi-p{width:78px;height:60px}
  .side{left:8px;right:8px;top:auto;bottom:0;width:auto;max-height:76dvh;
    border-radius:var(--r-md) var(--r-md) 0 0;box-shadow:0 -8px 34px rgba(17,24,39,.26)}
  .side.show{z-index:16}
  /* thanh kéo nhỏ ở đầu hộp, cho biết có thể vuốt/cuộn */
  .side:before{content:"";position:sticky;top:0;display:block;width:42px;height:4px;margin:8px auto 2px;
    border-radius:3px;background:#cbd5e1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .f select,.f input{min-width:104px}
}

/* ==========================================================================
   MOBILE — mọi thứ dưới đây chỉ áp dụng cho màn hình hẹp.
   Ba mục tiêu: header thấp nhất có thể, bộ lọc gọn một dòng,
   Dashboard chủ trọ dùng được bằng một tay.
   ========================================================================== */
.tl{display:inline}      /* nhãn chữ dài, ẩn trên mobile */
.tlm{display:none}       /* nhãn chữ ngắn, chỉ hiện trên mobile */
.fcount{display:none}

@media(max-width:760px){
  /* ---------- HEADER nổi: một hàng, cao ~46px ---------- */
  header{gap:8px;padding:7px 10px}
  .logo .wm{height:22px}
  .logo .tag{display:none}
  .tabs{display:none}                /* chuyển vào menu ba gạch */
  .who{gap:6px;margin-left:auto}
  .acct{height:36px;padding:0 8px 0 4px;max-width:none}
  .acct .nm{display:none}          /* chỉ còn chữ cái đầu, menu vẫn đầy đủ */
  .acct .av{width:28px;height:28px}
  .pillin{height:36px;padding:0 13px;font-size:var(--fs-meta)}
  .tlm{display:inline}
  .hmenu{right:10px;top:52px}

  /* ---------- THANH TÌM KIẾM: xếp dọc như bản thiết kế mobile ---------- */
  .sbar{top:50px;padding:0 10px;gap:8px}
  .scard{flex-direction:column;align-items:stretch;padding:9px;gap:8px;border-radius:var(--r-lg)}
  .sfind{flex:1 1 auto;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 11px;
    flex-wrap:wrap;row-gap:4px}
  .sin input{font-size:16px}          /* <16px làm iOS tự phóng to trang khi gõ */
  .sin .ex{white-space:normal}
  .mepos{flex:1 1 100%;justify-content:center;border:1px solid var(--line);padding:8px;margin-top:2px}
  .mepos .tl{display:inline}
  .sdiv{display:none}
  .ssel{flex:1 1 calc(50% - 4px);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 11px}
  .ssel select{width:100%;max-width:none;font-size:14px}
  .scard{flex-wrap:wrap;flex-direction:row}
  .scard>.sfind{flex:1 1 100%}
  .sfilt{flex:1 1 100%;justify-content:center;padding:11px;border-radius:var(--r-md);
    border:1px solid var(--line)}
  .srow{gap:7px}
  .sinfo{display:none}                /* số liệu đã nằm ở thẻ dưới đáy bản đồ */
  .sbar.mini .scard{padding:7px}
  .sbar.mini .scard>.ssel,.sbar.mini .scard>.sfilt{display:none}
  .swrap{width:100%}
  .acbox{left:0;right:0;width:auto}

  /* thẻ số liệu nổi ở đáy bản đồ, đúng như bản thiết kế */
  .mmeta{display:flex}

  /* ---------- BẢN ĐỒ ---------- */
  .side-x{width:34px;height:34px;top:10px;right:10px}
  .dt{padding:0 14px 18px}
  .dtgal{margin:0 -14px 2px}
  .gsl{aspect-ratio:3/2}            /* ảnh cao vừa phải, còn chỗ cho chữ bên dưới */
  .dt h2{font-size:18px;padding-right:40px}
  .dtbar{padding-left:12px;padding-right:12px}
  .dt .grid{grid-template-columns:1fr 1fr}

  /* ---------- DASHBOARD CHỦ TRỌ: dạng app ----------
     Ba tầng cố định, chỉ tầng giữa cuộn:
       header (của .app) · .dhead dính trên · NỘI DUNG cuộn · .dbar dính đáy      */
  .dash{padding:0;                        /* chừa chỗ cho thanh nút dính đáy */
    padding-bottom:calc(78px + env(safe-area-inset-bottom));
    scroll-padding-top:132px}             /* ô nhập được cuộn tới không chui dưới .dhead */
  .dash-wrap{padding:0 10px}

  /* thanh dính trên: đang quản lý nhà nào + 3 tab */
  .dhead{position:sticky;top:0;z-index:8;margin:0 -10px 12px;border-radius:0;border-left:0;border-right:0;
    border-top:0;padding:8px 10px 0;gap:8px;box-shadow:0 2px 10px rgba(17,24,39,.06)}
  .dpick{flex:1 1 100%;min-width:0}
  .dpick label{display:none}
  .dpick select{font-size:16px;font-weight:600;padding:10px 11px;border-radius:var(--r-md)}
  .dhact{flex:1 1 100%;min-width:0;gap:6px}
  .dhact .act{flex:1 1 0;min-width:0;justify-content:center;padding:9px 6px}
  .dhact .tl{display:none}
  .dfresh{flex:1 1 100%;min-width:0;font-size:11.5px;order:5;padding-bottom:2px}
  .dtabs{display:flex;flex:1 1 100%;min-width:0;gap:0;border-top:1px solid var(--line);margin:2px -10px 0}
  .dtabs button{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;position:relative;
    border:0;background:none;padding:11px 4px;font-size:12.5px;font-weight:600;color:var(--text-2);cursor:pointer}
  .dtabs button.on{color:var(--primary)}
  .dtabs button.on:after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2.5px;
    background:var(--primary);border-radius:2px}
  .dbadge{display:none;background:var(--primary);color:var(--card);font-size:10px;font-weight:600;
    min-width:16px;height:16px;line-height:16px;border-radius:var(--r-pill);padding:0 4px}
  .dbadge.on{display:inline-block}

  /* mỗi lần chỉ hiện một mục */
  .dsec{display:none}
  .dash-wrap.t-rooms  .dsec[data-sec="rooms"],
  .dash-wrap.t-guests .dsec[data-sec="guests"],
  .dash-wrap.t-site   .dsec[data-sec="site"]{display:block}
  .dash-wrap:not(.t-rooms):not(.t-guests):not(.t-site) .dsec[data-sec="rooms"]{display:block}

  /* hai nút dùng nhiều nhất, luôn nằm trong tầm ngón cái */
  .dbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:8px;
    padding:9px 10px;padding-bottom:calc(9px + env(safe-area-inset-bottom));
    background:var(--card);border-top:1px solid var(--line);
    box-shadow:0 -4px 18px rgba(17,24,39,.1)}
  .dbar button{flex:1 1 0;min-width:0;padding:13px 8px;border-radius:var(--r-md);font-weight:700;font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:var(--card);color:var(--primary)}
  .dbar .db-ok{background:var(--success);border-color:var(--success);color:var(--card)}
  .gcard{padding:11px;gap:9px}
  .ga{flex:1 1 100%}
  .ga .act{flex:1 1 0;min-width:0;justify-content:center;padding:10px}
  .sitebtns .btn,.sitebtns .act{flex:1 1 100%;justify-content:center;text-align:center}
  .toast{bottom:calc(94px + env(safe-area-inset-bottom))}
  .panel{padding:12px;border-radius:var(--r-md)}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
  .stat{padding:9px 11px}
  .stat b{font-size:21px}
  .zalo{padding:12px;border-radius:var(--r-md)}

  /* bảng phòng -> mỗi phòng là một thẻ, không cuộn ngang */
  table.rt thead{display:none}
  table.rt,table.rt tbody,table.rt tr,table.rt td{display:block;width:auto}
  #dashRooms tr{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--r-md);
    padding:0 11px 9px;margin-bottom:12px;background:var(--card);box-shadow:0 2px 8px rgba(17,24,39,.07);
    position:relative;overflow:hidden}
  #dashRooms tr.st-trong{border-left-color:var(--success);background:var(--success-50)}
  #dashRooms tr.st-sap  {border-left-color:var(--neutral);background:var(--neutral-50)}
  #dashRooms tr.st-thue {border-left-color:#cbd5e1}
  /* ô "Phòng số" thành tiêu đề của thẻ, có gạch chân tách khỏi phần nhập liệu */
  #dashRooms td.cno{margin:0 -11px 6px;padding:9px 11px;border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.75)}
  #dashRooms tr.st-trong td.cno{background:var(--success-50)}
  #dashRooms tr.st-sap   td.cno{background:var(--neutral-50)}
  #dashRooms tr.st-thue  td.cno{background:var(--neutral-50)}
  #dashRooms td.cno:before{color:var(--primary);font-size:11.5px}
  #dashRooms td.cno input{font-weight:600;font-size:16px;color:var(--primary);background:transparent;
    border-color:transparent}
  #dashRooms td.cno input:focus{background:var(--card);border-color:var(--line)}
  /* ô nhập trong thẻ giữ nền trắng để nổi trên nền màu của thẻ */
  #dashRooms input,#dashRooms select{background:var(--card)}
  #dashRooms td{border:0;padding:5px 0;display:flex;align-items:center;gap:10px;min-height:32px;background:transparent}
  #dashRooms td:before{content:attr(data-l);flex:0 0 96px;font-size:10.5px;font-weight:600;
    letter-spacing:.3px;text-transform:uppercase;color:var(--text-2);line-height:1.35}
  #dashRooms td[data-l=""]:before,#dashRooms td:not([data-l]):before{display:none}
  #dashRooms td>*{min-width:0}
  #dashRooms input[type=number],#dashRooms input[type=date],#dashRooms select{flex:1 1 auto;min-width:0;width:auto;font-size:15px;padding:7px 9px}
  #dashRooms input[type=number]{width:auto !important}
  .amt{max-width:none;flex:1 1 auto;gap:6px}
  .amx{padding:8px 12px;font-size:12.5px}
  #dashRooms tr:last-child{border:0;padding:0;background:transparent}
  #dashRooms td[colspan]{padding:0}
  .addrow{padding:11px;gap:7px}
  .addrow .f{flex:1 1 88px;min-width:0}
  .addrow input{width:100%}
  .addrow .btn{flex:1 1 100%}
  .addrow .mini{flex:1 1 100%}
  /* khai phí trên điện thoại: tên một dòng, cách tính + tiền một dòng */
  .feerow{flex-wrap:wrap;border-radius:var(--r-md);padding:9px;margin-bottom:9px;gap:6px}
  .feerow .fnm{flex:1 1 100%;font-weight:600}
  .feerow select{flex:1 1 100%;min-width:0}
  .feerow .fpr{flex:1 1 96px;text-align:left}
  .feerow .fun{flex:1 1 76px}
  .feerow input,.feerow select{font-size:16px}   /* chặn iOS tự zoom */
  .feerow .rowdel{margin-left:auto}
  .rowdel{padding:7px 11px}
  .thumb{width:78px;height:56px}
  .qr img{width:132px;height:132px}
  .qr{padding:10px}
  .urlbar{padding:7px 10px;font-size:11.5px}
  .urlbar .u{word-break:break-all}
  .up{padding:9px 14px;font-size:var(--fs-sm)}   /* vùng chạm to hơn trên điện thoại */
  .pics{gap:8px}
  .pics .pc img{width:56px;height:42px}

  /* bảng danh sách khách/quản trị: cho cuộn ngang thay vì vỡ khung */
  .adm{padding:10px}
  .adm table{display:block;overflow-x:auto;overscroll-behavior-x:contain}
  .adm th,.adm td{white-space:nowrap}
  .funnel{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px}
  .funnel div{padding:8px 9px}
  .funnel b{font-size:19px}
  .linkbox{flex-wrap:wrap}
  .linkbox input{flex:1 1 100%;min-width:0}

  /* ---------- MODAL ---------- */
  .mask{padding:0;align-items:flex-end}
  .fsheet{max-width:none;max-height:88dvh;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .fs-body{padding-left:14px;padding-right:14px}
  .fs-foot{padding-left:14px;padding-right:14px}
  .chip{font-size:var(--fs-sm)}
  .modal{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92dvh;overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:none;padding-bottom:env(safe-area-inset-bottom)}
  .m-body{padding:14px 13px 20px}
  .m-head h2{font-size:17px}
  .wz-nav{position:sticky;bottom:0;background:var(--card);padding-top:10px;margin-top:14px}
  .fld input,.fld select,.fld textarea{font-size:16px}   /* chặn iOS tự zoom */

  /* ---------- TRANG RIÊNG CỦA NHÀ TRỌ ---------- */
  .ms,.clm{padding-left:13px;padding-right:13px}
  .msec{padding:20px 0}
  .share{gap:14px}
  .qr{margin:0 auto}
}

/* màn hình rất hẹp (iPhone SE, 320–360px) */
@media(max-width:400px){
  .logo .wm{height:19px}
  .tab{padding:6px 8px}
  .clm-hero h1{font-size:20px}
  .stats{gap:6px}
  .stat b{font-size:19px}
  .stat i{font-size:10px}
  #dashRooms td:before{flex-basis:84px}
  .dt .grid{grid-template-columns:1fr}
}