/* Trang khách — landing + nội quy + bảng giá.
   Khác hẳn trang quản lý: đây là chỗ khách lạ nhìn 5 giây rồi quyết định có đặt hay không.
   Sáng, thoáng, chữ to, một nút gọi hành động rõ ràng. */

:root {
  --xanh: #1a3a2e;
  --xanh-nhat: #2d5a47;
  --vang: #c9a227;
  --nen: #fdfcf9;
  --nen-nhat: #f5f2ec;
  --chu: #1c1917;
  --chu-mo: #6b6560;
  --vien: #e5e0d8;
  --trang: #ffffff;
  /* Chữ CẢNH BÁO trên nền sáng — thêm 22/09 cho gói ngoài khung giờ.
     Cam đất chứ không đỏ: đỏ đọc thành "hỏng rồi", mà đây chỉ là "chưa phải bây giờ".
     Đủ tương phản trên `--nen-nhat` (kiểm bằng mắt ở cả hai nền của trang này). */
  --canh-bao: #b45309;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 17px/1.65 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }

/* ---------- Đỉnh trang ---------- */

.dinh {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(253, 252, 249, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--vien);
}

.hieu {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--xanh);
}

.hoa { color: var(--vang); font-size: 1.15em; }

/* ── BA VIÊN VI / EN / 中文 TRONG THANH ĐẦU TRANG — Nam giao 18/09 ───────────────
 *
 * `.chon-ngon-ngu` (nen-tang.css) dùng chung với /dat-phong và /phong-toi. Ở HAI trang
 * đó ô này đứng trong `<main>`, nên nó có `margin-bottom: .5rem` để tách khỏi nội dung
 * ngay dưới. Trong `.dinh` thì lề ấy làm hai việc không ai muốn, đo ở khung 440px:
 *
 *   · thanh DÍNH cao thêm 8px (80px thay vì 72px) — mà thanh này che đầu trang suốt
 *     lúc khách cuộn, nên 8px ở đây đắt hơn 8px ở bất cứ đâu khác;
 *   · ba viên bị hất LÊN 4px so với tâm, không thẳng hàng với tên nhà nghỉ bên trái.
 *
 * Gỡ ĐÚNG TRONG `.dinh`. Hai trang kia không có `.chon-ngon-ngu` nào nằm trong `.dinh`
 * nên chúng không đọc luật này — `.nut-ngon-ngu` giữ nguyên, không đụng tới.
 *
 * ⚠️ `flex: 0 0 auto` là BẮT BUỘC, không phải cho gọn. Đo với tên dài 32 ký tự ("Nhà
 * nghỉ Hoa Bằng Lăng Phước Sơn" — `index.html` là trang MẪU, nhà nghỉ thứ hai mua phần
 * mềm đặt tên gì cũng được): cụm ba viên bị bóp từ 145px xuống 131px, tức chữ 中文 bị
 * ép. Nút bấm thì không được co — thứ phải nhường là cái tên, và nó nhường bằng dấu ba
 * chấm chứ không phải xuống dòng (xuống dòng đẩy thanh dính lên 91px).
 *
 * ⚠️ `.dinh` KHÔNG có `flex-wrap`, nên `flex-shrink: 0` ở đây không rơi vào bẫy
 * "`flex-shrink: 0` + `flex-wrap: wrap` triệt tiêu nhau" (dính 27/08). */
/* ⚠️ CHỪA CHỖ TRƯỚC khi JS dựng ba viên — rà 24/09. `#chon-ngon-ngu` rỗng cho tới khi
 * `veNutNgonNgu()` chạy (khoảng 8,6 giây trên 3G), nên lúc đầu tên hiện đủ rồi đúng lúc
 * khách định chạm thì tên bị cắt và cả trang tụt xuống 12px. `min-width`/`min-height`
 * bằng đúng cụm đã dựng (145 × 44px) thì không còn gì để nhảy. */
.dinh .chon-ngon-ngu { margin: 0; flex: 0 0 auto; min-height: 2.75rem; min-width: 145px; }
/* Màn hẹp: thu gọn ba viên để tên nhà nghỉ còn chỗ. Đo bằng insertRule: cụm 117px, tên
 * hiện đủ ở 390 và 414; ở 360 vẫn cắt bằng dấu ba chấm — đúng quyết định đã ghi ở trên,
 * KHÔNG cho tên xuống dòng. */
@media (max-width: 420px) {
  .dinh .chon-ngon-ngu { gap: .25rem; min-width: 117px; }
  .dinh .nut-ngon-ngu { padding: .3rem .45rem; }
}
.dinh .hieu { min-width: 0; }
.dinh .hieu > span:last-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dinh nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem); }
.dinh nav a { text-decoration: none; font-size: .95rem; color: var(--chu-mo); }
.dinh nav a:hover { color: var(--xanh); }

/* Trên điện thoại giấu link phụ.
   Từ 04/09 thanh này KHÔNG còn nút "Đặt phòng" (lưới phòng nằm ngay dưới header), nên
   trên màn hẹp thanh đầu trang chỉ mang tên nhà nghỉ. Luật cũ viết `:not(.nut-nho)` để
   chừa chỗ cho nút đó; giữ nguyên chữ ấy là để lại một ngoại lệ không còn gì rơi vào. */
@media (max-width: 34rem) {
  .dinh nav { display: none; }
}

/* ---------- Nút ---------- */

.nut, .nut-vien, .nut-nho {
  display: inline-block;
  text-decoration: none;
  font-weight: 600;
  border-radius: 999px;
  transition: transform .12s ease;
}

.nut {
  background: var(--xanh);
  color: #fff;
  padding: .85rem 1.75rem;
  font-size: 1.05rem;
}

.nut-vien {
  border: 1.5px solid var(--xanh);
  color: var(--xanh);
  padding: .8rem 1.6rem;
  font-size: 1.05rem;
}

.nut-nho {
  background: var(--xanh);
  color: #fff !important;
  padding: .45rem 1.1rem;
  font-size: .9rem;
}

.nut:hover, .nut-vien:hover, .nut-nho:hover { transform: translateY(-1px); }

/* ---------- Mở đầu ---------- */

.mo-dau {
  display: grid;
  /* ⚠️ CỘT PHẢI KHAI `minmax(0, 1fr)` — vá 23/09. Không khai thì màn hẹp dùng một cột
     `auto` co theo nội dung rộng nhất, và ở 360px khối mở đầu rộng 364px: cả trang
     chủ tràn ngang 20px, điện thoại Android 360px (rất phổ biến) cuộn ngang và thu nhỏ
     trang. Đúng bẫy sổ tay "Grid + min-width: auto = MỘT khối rộng làm CẢ TRANG cuộn
     ngang". Đo: scrollWidth 380 → 360. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 78rem;
  margin: 0 auto;
  align-items: center;
}

@media (min-width: 52rem) {
  .mo-dau { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* Chỗ đặt ảnh — chưa có ảnh thật, dùng nền chuyển sắc cho đỡ trống */
.anh-lon {
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(201,162,39,.22), transparent 60%),
    linear-gradient(150deg, var(--xanh) 0%, var(--xanh-nhat) 100%);
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.5);
  font-size: .95rem;
  letter-spacing: .04em;
  order: -1;
}

@media (min-width: 52rem) { .anh-lon { order: 0; } }

.cho-anh { border: 1px dashed rgba(255,255,255,.35); padding: .5rem 1rem; border-radius: 8px; }

/* Ảnh bìa server dựng phủ trọn khung và nằm TRÊN ô giữ chỗ — rà 04/09.
   Cả hai cùng nằm trong `.anh-lon` (display: grid, place-items: center), nên xếp chúng
   vào CÙNG một ô lưới thay vì hai hàng: ô giữ chỗ chỉ là chữ, và nó phải biến mất dưới
   ảnh chứ không đẩy ảnh xuống. JS gỡ hẳn ảnh này khi vẽ băng vuốt được. */
.anh-lon > #anh-bia-tho, .anh-lon > .cho-anh { grid-area: 1 / 1; }
#anh-bia-tho { z-index: 1; }

.nhan {
  display: inline-block;
  margin: 0 0 .9rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--nen-nhat);
  border: 1px solid var(--vien);
  font-size: .85rem;
  font-family: system-ui, sans-serif;
  color: var(--xanh-nhat);
}

.dan { font-size: 1.1rem; color: var(--chu-mo); margin: 1rem 0 1.75rem; max-width: 34rem; }
.hang-nut { display: flex; flex-wrap: wrap; gap: .75rem; }
.dia-chi {
  margin-top: 1.5rem;
  font-size: .92rem;
  color: var(--chu-mo);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.dia-chi-goi { display: inline-flex; align-items: center; gap: .35rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   VIÊN "MỞ GOOGLE MAPS" — Nam giao 18/09
   ═══════════════════════════════════════════════════════════════════════════

   *"thêm gg map phía trước rồi làm cho nó giống link để họ ấn vào nếu muốn mở gg map."*

   Địa chỉ đã bấm được từ 04/09, nhưng trông y hệt chữ thường — cùng cỡ, cùng màu, chỉ
   khác một nét gạch chân mà trên nền nhạt thì gần như không thấy. Người đang tìm đường
   vẫn tự gõ địa chỉ vào bản đồ, tức cái link ấy bằng không có.

   Ba tín hiệu cùng lúc, vì một mình cái nào cũng bỏ lỡ một nhóm người: ghim 📍 (nhận ra
   trong nửa giây), VIỀN (mắt thấy đây là thứ bấm được), và chữ "Google Maps" (nói thẳng
   bấm vào thì mở cái gì — người lớn tuổi đọc chữ chứ không đoán biểu tượng).

   Chữ địa chỉ dùng FONT HỆ THỐNG: trang chủ nền là chữ có chân, đẹp cho câu văn nhưng
   một địa chỉ hành chính đọc bằng serif thì rối. Cùng luật với các khối giao diện khác
   trong file này.
   ═══════════════════════════════════════════════════════════════════════════ */
.vien-ban-do {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .75rem;
  border: 1px solid var(--vien);
  border-radius: 999px;
  background: #fff;
  color: var(--xanh);
  text-decoration: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: .88rem;
  line-height: 1.3;
  transition: background .15s, border-color .15s;
}
.vien-ban-do:hover,
.vien-ban-do:focus-visible { background: var(--xanh-nhat); border-color: var(--xanh); }

.vien-ban-do .ghim { font-size: 1em; }

/* Địa chỉ dài thì cắt bằng dấu ba chấm, KHÔNG xuống dòng: viên bo tròn mà hai dòng thì
   méo — đúng cái đang xảy ra với khối ba bước ngay dưới đây. Tên đầy đủ vẫn còn trong
   thuộc tính `href` và trên chính Google Maps sau khi bấm. */
.vien-ban-do .ban-do-chu {
  max-width: 17rem;
  /* `min-width: 0` — vá 23/09: con của flex mặc định KHÔNG co dưới bề rộng chữ, nên
     `max-width: 17rem` + ghim + nhãn "Google Maps" thành một viên 364px cứng ngắc, và ở
     màn 360px nó đẩy cả trang tràn ngang. Cho chữ co lại thì dấu ba chấm mới làm việc. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vien-ban-do { max-width: 100%; }
.vien-ban-do .ghim, .vien-ban-do .ban-do-nhan { flex-shrink: 0; }

/* Nhãn "Google Maps" — nhỏ và mờ hơn địa chỉ: nó là chú thích về ĐÍCH ĐẾN, không phải
   thông tin. Gạch nối phía trước thay cho dấu ngoặc, đỡ một cặp ký tự. */
.vien-ban-do .ban-do-nhan {
  font-size: .78rem;
  color: var(--chu-mo);
  border-left: 1px solid var(--vien);
  padding-left: .5rem;
}

/* Bản cho chân trang (nền xanh đậm): viền và chữ sáng, nền trong suốt. */
.vien-ban-do.tren-nen-toi {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.vien-ban-do.tren-nen-toi:hover,
.vien-ban-do.tren-nen-toi:focus-visible {
  background: rgba(255, 255, 255, .16);
  border-color: #fff;
}
.vien-ban-do.tren-nen-toi .ban-do-nhan {
  color: rgba(255, 255, 255, .72);
  border-left-color: rgba(255, 255, 255, .3);
}

/* ---------- Khối chung ---------- */

.khoi {
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
  max-width: 72rem;
  margin: 0 auto;
}

.khoi.nen-nhat {
  background: var(--nen-nhat);
  max-width: none;
  border-block: 1px solid var(--vien);
}

.khoi.nen-nhat > * { max-width: 72rem; margin-inline: auto; }

.phu-de { color: var(--chu-mo); margin: .6rem 0 1.75rem; font-size: .98rem; }
/* Số hotline trong câu "kín phòng" (`#cap-nhat-luc`, rà 24/09) — vùng chạm ≥ 44px: đây
   là đường ra DUY NHẤT của người đứng ngoài cổng lúc nửa đêm khi cả lưới đều xám, và
   bản cũ để link hotline đầu tiên ở y=1788, cỡ 90×24px. */
.goi-kin-phong {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 700;
  color: var(--xanh);
}
.ghi-chu { color: var(--chu-mo); font-size: .9rem; margin-top: 1rem; }
.mo { color: var(--chu-mo); }

/* ═══════════════════════════════════════════════════════════════════════════
   FONT HỆ THỐNG CHO PHẦN GIAO DIỆN — Nam giao 18/09
   ═══════════════════════════════════════════════════════════════════════════

   *"đánh dấu thứ 2 là do lỗi form chữ. chọn lại form chữ giống apple giúp tôi."*

   Trang chủ CỐ Ý đặt nền là chữ có chân (`body { font: 17px/1.65 'Iowan Old Style'… }`)
   — nó làm mấy đoạn giới thiệu đọc như một tờ rơi tử tế chứ không như một cái bảng.
   Nhưng chữ có chân dành cho CÂU VĂN, không dành cho nhãn, ô nhập và con số: ở cỡ nhỏ
   nó mảnh và rối, và trên màn hình điện thoại thì Nam đọc thành "lỗi form chữ".

   Mỗi khối giao diện trong file này vì thế tự khai font hệ thống (có 11 chỗ như vậy từ
   trước). Ba khối dưới đây bị quên — chúng ra đời sau, và không ai để ý vì trên máy để
   bàn chữ serif cỡ lớn vẫn sạch.

   Dùng ĐÚNG bộ đã dùng cho popup "Đặt phòng nhanh": `-apple-system` là tên riêng của
   San Francisco trên máy Apple, `system-ui` mới là tên chuẩn cho máy khác — thiếu cái
   đầu thì iPhone rơi về Helvetica.
   ⚠️ `<input>` và `<button>` KHÔNG kế thừa font từ cha, phải liệt kê riêng.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ⚠️ ÁP LÊN CẢ KHỐI, KHÔNG VÁ TỪNG LỚP — Nam báo lần thứ hai 18/09 ("vẫn lỗi form chữ
   nè", ảnh khoanh ô phòng 007).
 *
 * Bản đầu liệt kê đúng ba chỗ Nam chỉ trong ảnh thứ nhất. Nhưng cả khối chọn phòng là
 * GIAO DIỆN chứ không phải văn bản: nhãn, huy hiệu tình trạng, số phòng, giá, nút giờ,
 * dải ba bước — con nào cũng cần font hệ thống, và đi vá từng lớp thì lần nào cũng sót
 * một cái, rồi Nam lại phải chụp màn hình lần nữa.
 *
 * Áp lên `.khoi-phong-dau` thì mọi con tự kế thừa. `body` vẫn giữ chữ CÓ CHÂN cho phần
 * giới thiệu và tiêu đề lớn — đó là nhận diện của trang, không phải lỗi.
 *
 * ⚠️ `<input>`, `<button>`, `<select>` KHÔNG kế thừa font từ cha: trình duyệt gán font
 * riêng cho chúng. Phải liệt kê, và `.o-phong` vốn là `<button>`.
 * ⚠️ `.khoi-phong-dau`, KHÔNG phải `.khoi-phong` — tôi gõ nhầm tên lớp ở bản đầu và luật
 * lặng lẽ không khớp gì. CSS sai tên lớp thì trình duyệt bỏ qua, không một dòng cảnh
 * báo. Kiểm bằng cách grep chính `index.html`, đừng tin trí nhớ. */
.khoi-phong-dau,
.khoi-phong-dau input,
.khoi-phong-dau button,
.khoi-phong-dau select,
.o-ve-phong,
.o-ve-phong input,
.o-ve-phong button,
.phu-de,
.the-truot-khach,
.the-truot-khach input,
.the-truot-khach button,
/* Thẻ phòng của `/dat-phong` — Nam bắt được 20/09, ảnh chụp khoanh đỏ "2 người" và
   dòng "Trọn 24 giờ kể từ lúc nhận phòng". Khối này là anh em sinh đôi của
   `.the-truot-khach` ở trang chủ nhưng mang TÊN LỚP KHÁC, nên lượt đổi chữ trước
   không chạm tới nó: cùng một bài học ở hai màn, sửa một chỗ quên chỗ kia. */
.the-phong-khach,
.the-phong-khach input,
.the-phong-khach button {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---------- Phòng còn ---------- */

.the-phong-loai {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* ⚠️ `align-content: start` — thẻ KHÔNG ảnh đứng cạnh thẻ CÓ ảnh.
 *
 * Nam chụp 03/08 ngay sau khi thêm được ảnh đầu tiên: thẻ "Phòng đơn" (chưa có ảnh) bị
 * kéo cao bằng thẻ "Phòng đôi" (có ảnh), và vì `display: grid` mặc định giãn các hàng
 * cho đầy chiều cao nên tên, sức chứa, số phòng, giá dạt ra bốn góc — trông như trang
 * đang lỗi, đúng ở chỗ khách nhìn đầu tiên.
 *
 * Lỗi này KHÔNG tồn tại trước hôm nay vì chưa loại phòng nào có ảnh, nên mọi thẻ cao
 * bằng nhau. Nó ra đời đúng lúc tính năng ảnh bắt đầu chạy — và sẽ tự hết khi loại nào
 * cũng có ảnh, tức là nó chỉ xấu trong giai đoạn chủ nhà nghỉ đang thêm ảnh dần.
 */
.loai {
  background: var(--trang);
  border: 1px solid var(--vien);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  display: grid;
  align-content: start;
  gap: .35rem;
}

.loai .ten { font-size: 1.25rem; font-weight: 700; }
.loai .suc-chua { font-size: .9rem; color: var(--chu-mo); font-family: system-ui, sans-serif; }
.loai .con {
  font-size: 1.05rem;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  margin-top: .5rem;
}
.loai .con.het { color: #b91c1c; }
.loai .con.con-phong { color: var(--xanh-nhat); }
.loai .tu-gia { font-size: .95rem; color: var(--chu-mo); }

/* ---------- Bảng giá ---------- */

/* Bảng giá bảy cột trên màn hình 360px.
   `overflow-x: auto` một mình KHÔNG đủ: `table { width: 100% }` bên dưới ép bảng co vừa
   khung, nên nó không bao giờ cuộn — thay vào đó mỗi ô vỡ thành ba dòng và "1.200.000đ"
   xuống hàng giữa chừng. Phải cho bảng quyền rộng hơn khung thì `overflow-x` mới có việc.

   `mask-image` làm mờ dần mép phải để khách BIẾT là còn cột bên kia. Không có gợi ý đó
   thì phần lớn người dùng điện thoại không nghĩ tới việc vuốt ngang một cái bảng. */
.bang-cuon {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bang-cuon table { width: auto; min-width: 100%; }

/* ---------------------------------------------------------------------------
   BẢNG GIÁ TRÊN ĐIỆN THOẠI — đổi hẳn thành THẺ, không cuộn ngang
   ---------------------------------------------------------------------------

   Nam gửi ảnh chụp thật 31/07 lúc 02:54, và nó cho thấy vì sao cuộn ngang là sai:

       LOẠI      2 GIỜ    GIỜ      QUA
       PHÒNG     ĐẦU      THÊ      ĐÊM
                          M
       Phòng     100.     20.0     200.
       đơn       000đ     00đ      000đ
       2
       người

   Bảy cột trên 360px cho mỗi cột ~45px. "1.200.000đ" không có cách nào vừa, nên mọi ô
   đều vỡ — kể cả tiêu đề ("GIỜ THÊ / M"). Số tiền vỡ làm hai dòng thì khách đọc "100."
   rồi "000đ" và phải tự ghép lại; đó đúng là "số nhảy lung tung".

   Cuộn ngang không cứu được: khách vào trang để SO GIÁ giữa các loại phòng, mà so giá
   thì cần nhìn cùng lúc. Bắt vuốt qua vuốt lại là bắt họ làm việc của bố cục.

   Nên trên màn hẹp bảng thôi làm bảng: mỗi loại phòng thành một THẺ, mỗi mức giá một
   hàng "nhãn — số tiền". Nhãn cột lấy lại từ `data-nhan` mà `trang-khach.js` gắn sẵn.

   Vẫn là `<table>` trong HTML, nên trình đọc màn hình và crawler vẫn hiểu đúng cấu
   trúc; chỉ CÁCH HIỆN đổi. `role` không cần đụng tới vì `display` không đổi ngữ nghĩa
   trong cây tiếp cận của trình duyệt hiện đại.
   --------------------------------------------------------------------------- */

@media (max-width: 44rem) {
  /* Bỏ khung cuộn — không còn gì để cuộn. */
  .bang-cuon { overflow-x: visible; mask-image: none; }

  .bang-cuon table,
  .bang-cuon tbody,
  .bang-cuon tr,
  .bang-cuon td { display: block; width: auto; }

  /* Ẩn hàng tiêu đề: nhãn đã chuyển xuống từng ô. `clip-path` thay vì `display: none`
     để trình đọc màn hình vẫn thấy — bảng không có tiêu đề là bảng khó hiểu. */
  .bang-cuon thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  /* Mỗi hàng thành một thẻ. */
  .bang-cuon tr {
    border: 1px solid var(--vien);
    border-radius: 12px;
    padding: .9rem 1rem;
    margin-bottom: .75rem;
    background: var(--trang);
  }
  .bang-cuon td { border: 0; padding: 0; }

  /* Tên loại phòng làm tiêu đề thẻ. */
  .o-ten-loai {
    margin-bottom: .6rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid var(--vien) !important;
  }
  .ten-loai-bang { font-size: 1.15rem; font-weight: 700; display: block; }
  .o-ten-loai .mo-nho { display: block; margin-top: .15rem; }

  /* Mỗi mức giá: nhãn bên trái, số tiền bên phải, cùng một dòng. */
  .bang-cuon td[data-nhan] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .32rem 0;
    font-weight: 600;
    /* Số tiền TUYỆT ĐỐI không được vỡ dòng — đó là lỗi gốc trong ảnh chụp. */
    white-space: nowrap;
  }
  .bang-cuon td[data-nhan]::before {
    content: attr(data-nhan);
    font-weight: 400;
    color: var(--chu-mo);
    font-family: system-ui, sans-serif;
    font-size: .92rem;
    white-space: normal;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: system-ui, sans-serif;
  font-size: .95rem;
  min-width: 40rem;
}

th, td { padding: .85rem 1rem; text-align: right; border-bottom: 1px solid var(--vien); }
th:first-child, td:first-child { text-align: left; font-weight: 600; }
thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-mo); font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td { font-variant-numeric: tabular-nums; }

/* ---------- Các bước ---------- */

.cac-buoc {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.15rem;
  counter-reset: buoc;
}

@media (min-width: 52rem) {
  .cac-buoc { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
}

.cac-buoc li { display: flex; gap: .9rem; align-items: flex-start; }
@media (min-width: 52rem) { .cac-buoc li { flex-direction: column; gap: .6rem; } }

.cac-buoc .so {
  flex-shrink: 0;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--xanh);
  color: #fff;
  display: grid; place-items: center;
  font-family: system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.cac-buoc strong { display: block; margin-bottom: .15rem; }
.cac-buoc p { margin: 0; font-size: .93rem; color: var(--chu-mo); }

/* ---------- Nội quy ---------- */

.hai-cot-quy { display: grid; gap: 0 2.5rem; }
@media (min-width: 46rem) { .hai-cot-quy { grid-template-columns: 1fr 1fr; } }

.hai-cot-quy ul { margin: 0; padding-left: 1.2rem; }
.hai-cot-quy li { margin-bottom: .7rem; font-size: .97rem; }

/* ---------- Tiện ích ---------- */

/* Lưới tự giãn: một dòng trên điện thoại, nhiều cột trên máy tính. Không ghim số cột —
   nhà nghỉ khai 3 tiện ích hay 12 thì đều phải trông gọn. */
.cac-tien-ich {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.cac-tien-ich li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .97rem;
  line-height: 1.5;
}

/* Dấu tích dựng bằng CSS, không phải emoji trong chữ: chữ là dữ liệu chủ nhà nghỉ gõ,
   và trang không được thêm ký tự vào nội dung họ viết. */
.cac-tien-ich li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--xanh);
  font-weight: 700;
}

/* ---------- Chân trang ---------- */

.chan {
  background: var(--xanh);
  color: #fff;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

/* Con của flex không co dưới bề rộng nội dung (min-width: auto) — vá 23/09: khối tên +
   viên địa chỉ ở chân trang rộng 364px, đẩy cả trang chủ tràn ngang ở màn 360px. */
.chan > * { min-width: 0; max-width: 100%; }
.chan p { margin: .2rem 0; font-size: .95rem; color: rgba(255,255,255,.78); }
.chan a { color: #fff; }
.hieu-chan { font-size: 1.15rem !important; font-weight: 700; color: #fff !important; margin-bottom: .6rem !important; }
.chan .nut { background: var(--vang); color: var(--xanh); }

/* Đường vào trang quản lý. Mờ hơn hẳn phần còn lại của footer: người cần nó biết mình
   đang tìm gì, còn khách thuê phòng thì không bao giờ cần tới. */
.chan-quan-ly { margin-top: .9rem !important; font-size: .85rem !important; }
.chan-quan-ly a { color: rgba(255,255,255,.62); text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.28); }
.chan-quan-ly a:hover, .chan-quan-ly a:focus-visible { color: #fff; border-bottom-color: #fff; }

/* Mô tả loại phòng trong bảng giá.
   Trước đây là `style="font-size:.85em"` viết thẳng trong chuỗi HTML. CSP cấm thuộc tính
   `style=` nội tuyến, và cả dòng đó giờ dựng bằng DOM — nên kích thước chữ về đây. */
.bang-gia .mo-nho { font-size: .85em; }

/* Ảnh đại diện loại phòng.
   `aspect-ratio` + `object-fit: cover` để ảnh dọc/ngang/vuông đều lấp đầy khung như
   nhau — chủ nhà nghỉ chụp bằng điện thoại, không ai canh tỉ lệ. */
.loai .anh-loai {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: .5rem;
  margin-bottom: .6rem;
  background: rgba(148, 163, 184, .12);
  display: block;
}


/* ── BĂNG ẢNH VUỐT NGANG ───────────────────────────────────────────────────────
 *
 * Nam 03/08: thêm 8 ảnh mà trang chỉ hiện 1. Băng ngang thay vì lưới dọc vì thẻ loại
 * phòng xếp cạnh nhau theo cột — ảnh xếp dọc làm thẻ dài ra và đẩy "Còn 8 phòng", thứ
 * khách cần nhất, xuống dưới màn hình.
 *
 * `scroll-snap` để mỗi lần vuốt dừng gọn ở một tấm, không dừng giữa hai tấm.
 */
.bang-anh {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  margin-bottom: .5rem;
  /* Thanh cuộn ẩn trên máy tính: nó chiếm chỗ và trông như lỗi. Vuốt/kéo vẫn chạy. */
  scrollbar-width: none;
}
.bang-anh::-webkit-scrollbar { display: none; }

/* ── ẢNH KẾ TIẾP LÓ RA — dấu hiệu vuốt được ────────────────────────────────────
 *
 * Nam giao 03/08: *"làm thêm cái dấu hiệu để biết là có thể vuốt ngang để xem thêm ảnh."*
 *
 * Dòng chữ "N ảnh · vuốt để xem" nằm DƯỚI băng ảnh, nên mắt đọc nó sau khi đã lướt qua —
 * tức là sau lúc cần biết. Còn một mẩu ảnh thứ hai ló ra ở mép phải thì nói ngay lúc
 * nhìn, và không cần chữ nào: nó là thứ duy nhất trên màn hình đang bị CẮT, mà cái gì bị
 * cắt thì tay tự muốn kéo.
 *
 * 88% + gap: đủ để thấy rõ có ảnh nữa, chưa đủ để tưởng đây là lưới hai cột.
 */
.bang-anh .anh-loai {
  scroll-snap-align: start;
  flex: 0 0 88%;
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* Một ảnh thì không cần vuốt — bỏ luôn khả năng cuộn để khỏi rung nhẹ khi chạm. */
/* Một ảnh thì chiếm trọn bề ngang — không có gì để ló ra. */
.bang-anh:not(.nhieu) { overflow-x: visible; }
.bang-anh:not(.nhieu) .anh-loai { flex-basis: 100%; }

.loai .so-anh {
  /* Ký hiệu vuốt đứng TRƯỚC con số: mắt bắt hình nhanh hơn bắt chữ. */
  font-size: .82rem;
  color: var(--chu-mo);
  font-family: system-ui, sans-serif;
}

/* Ảnh bìa nhà nghỉ — thay ô giữ chỗ ở đầu trang chủ. */
.anh-bia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}


/* ── BĂNG ẢNH BÌA ──────────────────────────────────────────────────────────────
 *
 * Khung `.anh-lon` có sẵn chiều cao và bo góc, nên băng ảnh phải phủ TRỌN nó — khác băng
 * ảnh trong thẻ phòng, vốn tự quyết chiều cao theo tỉ lệ 4:3.
 *
 * Ảnh bìa để nguyên 100% bề ngang, không ló mẩu tiếp theo: khung này là thứ đầu tiên
 * khách nhìn, và một tấm ảnh mặt tiền bị cắt mép trông như trang chưa tải xong. Dấu hiệu
 * vuốt ở đây là NHÃN CHỮ đặt trong khung, không phải mẩu ảnh ló ra.
 */
.bang-anh-bia {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
}
.bang-anh-bia .anh-bia {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: inherit;
}

.anh-lon { position: relative; }

.nhan-vuot {
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .55);
  color: #fff;
  font-size: .8rem;
  font-family: system-ui, sans-serif;
  pointer-events: none;   /* không chắn ngón tay đang vuốt ảnh phía dưới */
}

/* ═══════════════════════════════════════════════════════════════════════════
   LƯỚI PHÒNG NGAY ĐẦU TRANG — Nam giao 29/08
   ═══════════════════════════════════════════════════════════════════════════

   *"Vào là hiện ra 10 phòng, phòng nào trống thì để khách chọn đặt được."*

   Khối này là thứ đầu tiên khách nhìn thấy, nên nó phải đọc được trong một cái liếc:
   số phòng to, tình trạng ngay dưới, giá khởi điểm ở đáy ô. Ba dòng, không hơn.
   ═══════════════════════════════════════════════════════════════════════════ */

.khoi-phong-dau { padding-top: 1.75rem; }

.so-do-khach-chu {
  display: grid;
  gap: .6rem;
  /* Số cột do JavaScript đặt theo sơ đồ thật của nhà nghỉ — mỗi nhà một hình dạng. */
  margin-top: 1rem;
}

.o-phong {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  /* 88px: cao gấp đôi ngưỡng vùng chạm 44px, vì ô này là thứ khách bấm đầu tiên và
     họ bấm khi đang đứng, một tay, ngoài đường. */
  min-height: 88px;
  padding: .7rem .4rem;
  border: 1.5px solid #cfe0d6;
  border-radius: 14px;
  background: var(--trang);
  box-shadow: 0 2px 6px rgba(26, 58, 46, .07);
  transition: transform .1s, box-shadow .1s;
  color: var(--chu);
  font: inherit;
  text-align: center;
  cursor: pointer;
  /* Ô hẹp mà số phòng thì ngắn — `min-width: 0` cho ô co được trong lưới thay vì nong
     cột ra. Đây đúng cái bẫy grid `min-width: auto` đã làm cả trang quản lý cuộn ngang
     (CLAUDE.md), và lưới này cũng nằm trong một grid. */
  min-width: 0;
}

.o-phong:hover { border-color: var(--xanh); box-shadow: 0 4px 12px rgba(26, 58, 46, .16); }
.o-phong:active { transform: scale(.97); }

/* Ô BẬN: mờ đi và KHÔNG bấm được. Nó vẫn phải có mặt — một sơ đồ thiếu ô thì không
   còn là sơ đồ, và khách đếm được "10 phòng, còn 4" chỉ khi thấy đủ mười. */
.o-phong.ban {
  background: var(--nen-nhat);
  color: var(--chu-mo);
  border-style: dashed;
  box-shadow: none;
  opacity: .75;
  cursor: default;
}
.o-phong.ban:hover { border-color: var(--vien); box-shadow: none; }
.o-phong.ban:active { transform: none; }

/* Ô trống của sơ đồ (lối đi, cầu thang) — giữ chỗ để lưới đúng hình, không vẽ gì. */
.o-phong.rong { border: none; background: none; min-height: 0; }

.o-so { font-size: 1.45rem; font-weight: 800; letter-spacing: .02em; }
.o-loai { font-size: .72rem; color: var(--chu-mo); }
/* Tình trạng thành HUY HIỆU màu — liếc một giây phân biệt được ba loại ô. */
/* Màu chữ #166534 (tương phản 6,3 trên nền #e7f4ec) — rà 24/09: #15803d chỉ 4,43, dưới
   ngưỡng 4,5 cho chữ nhỏ cỡ này. Cỡ chữ GIỮ nguyên: nâng cỡ trong lưới 4 cột ở 360px là
   vỡ bố cục ("Đã đặt từ 26/9" đã xuống dòng) — việc đó làm riêng, kèm tran-ngang-360. */
.o-tinh-trang {
  font-size: .74rem; font-weight: 700; color: #166534;
  background: #e7f4ec; padding: .12rem .55rem; border-radius: 999px;
}
.o-phong.ban .o-tinh-trang { color: var(--chu-mo); background: #eceae4; font-weight: 600; }
.o-phong.giu-cho .o-tinh-trang { color: #92650f; background: #f8ecd2; }
.o-gia { font-size: .78rem; font-weight: 700; color: var(--xanh); }
.o-phong.ban .o-gia { font-weight: 400; color: var(--chu-mo); }

.duong-phu { margin-top: 1.1rem; font-size: .9rem; color: var(--chu-mo); }
.duong-phu a { color: var(--xanh); }

/* ── KHI NÀO NHẬN PHÒNG — Nam giao 04/09 ─────────────────────────────────────
   Thay nút "đặt cho ngày khác" (03/09) từng dẫn sang `/dat-phong`. Việc chọn ngày
   giờ nay làm ngay tại đây, nên hai viên bấm đứng SÁT trên lưới phòng — người quét
   QR ngoài cổng không phải đọc gì, người đặt trước thì thấy đường của mình ngay. */
/* ═══════════════════════════════════════════════════════════════════════════
   HAI VIÊN "NHẬN NGAY / NGÀY KHÁC" — chỉnh lại 18/09
   ═══════════════════════════════════════════════════════════════════════════

   Nam: *"chỉnh lại UI chọn phòng, nhận ngay, ngày khác cho hợp lý hơn."*

   Bản cũ để hai viên tự co theo chữ, nên chúng RỘNG KHÁC NHAU ("Nhận ngay" 7 chữ,
   "📅 Ngày khác" 10 chữ cộng một biểu tượng) — hai lựa chọn NGANG HÀNG mà một cái to
   hơn cái kia thì mắt đọc thành "cái to là cái chính". Và sang tiếng Anh/Trung độ lệch
   đổi khác nữa, nên không chỉnh tay được.

   `flex: 1 1 0` cho hai viên CHIA ĐÔI hàng: bằng nhau ở mọi thứ tiếng, và mỗi viên rộng
   gấp đôi vùng chạm tối thiểu — người đang đứng ngoài đường, một tay, bấm không trượt.

   ⚠️ `max-width` cho màn rộng: trên máy tính hai viên chia đôi cả khối rộng 72rem thì
   thành hai cái băng-rôn. Ở đó chúng lùi về cỡ tự nhiên nhưng vẫn bằng nhau.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Tiêu đề "Chọn phòng" nhỏ lại và sát cụm nút hơn: nó là nhãn của một việc, không phải
   tiêu đề một chương. Cỡ cũ (tới 1.9rem) đứng cạnh hai viên cao 48px thì lấn át chúng,
   trong khi thứ khách cần bấm là hai viên kia. */
.khoi-phong-dau > h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  margin-bottom: .2rem;
}

.hang-khi-nao {
  display: flex;
  gap: .6rem;
  margin: .2rem 0 1rem;
  max-width: 26rem;
}

.chip-khi-nao {
  flex: 1 1 0;
  min-width: 0;
  font: inherit; font-size: .95rem; font-weight: 600;
  min-height: 48px;                    /* ngón tay, không phải con trỏ chuột */
  padding: .55rem .75rem;
  border: 1.5px solid var(--vien); border-radius: 999px;
  background: var(--trang); color: var(--chu-mo);
  cursor: pointer;
  /* Chữ dài (bản tiếng Anh) thì cắt bằng ba chấm chứ không đội viên cao lên hai dòng —
     hai viên cao lệch nhau còn xấu hơn một chữ bị cắt. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, border-color .15s, color .15s;
}
.chip-khi-nao:hover { border-color: var(--xanh); color: var(--xanh); }
/* Viên ĐANG CHỌN tô đặc, không chỉ đổi viền — viền dày hơn một chút là thứ không
   thấy được trên màn hình ngoài nắng (cùng luật với `.nut-chon-nhanh`). */
.chip-khi-nao.da-chon { background: var(--xanh); border-color: var(--xanh); color: #fff; }

.o-ngay-khac {
  margin: 0 0 1rem; padding: .9rem;
  border: 1.5px solid var(--vien); border-radius: 14px; background: #f8faf9;
}
.nhan-khi-nao {
  margin: 0 0 .4rem; font-size: .82rem; font-weight: 600;
  color: var(--chu-mo); text-transform: uppercase; letter-spacing: .03em;
}
.nhan-khi-nao + .hang-chon-nhanh { margin-bottom: .9rem; }
.hang-chon-nhanh {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr));
}
/* Nút ngày/giờ: cùng hình dạng với bản ở `/dat-phong` — khách đi qua hai màn trong
   một lượt đặt, và hai kiểu nút cho cùng một việc là hai thứ phải học. */
.hang-chon-nhanh .nut-chon-nhanh {
  display: grid; gap: .1rem; min-height: 48px; align-content: center;
  font: inherit; font-size: .95rem; font-weight: 600; color: inherit;
  background: var(--trang); border: 1.5px solid var(--vien); border-radius: 12px;
  padding: .5rem .4rem; cursor: pointer; text-align: center;
}
.hang-chon-nhanh .nut-chon-nhanh[aria-pressed="true"] {
  background: var(--xanh); border-color: var(--xanh); color: #fff;
}
.hang-chon-nhanh .ngay-so {
  font-size: .78rem; font-weight: 500; opacity: .75; font-family: system-ui, sans-serif;
}
.hang-chon-nhanh .mo.nho { grid-column: 1 / -1; font-size: .88rem; margin: 0; }

/* ── THANH GIỎ PHÒNG — Nam giao 04/09 ───────────────────────────────────────
   Ghim đáy màn hình: khách đang cuộn một lưới mười ô, và một thanh trôi theo nội dung
   là thanh họ phải đi tìm để bấm. Cùng chỗ với thanh "Phòng X của bạn" (02/09) — hai
   thanh không bao giờ cùng hiện: người đang thuê thì không đứng chọn phòng mới.

   ⚠️ HAI HÀNG, không phải một. Bản đầu xếp chữ và hai nút trên cùng một hàng, và trên
   màn 375px thì cột chữ bị bóp thành "Phòng 005," / "006" / "thuê" / "theo" — bốn dòng
   cho một câu. Nút trả tiền được cả hàng dưới. */
.thanh-gio {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  gap: .5rem;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--nen);
  border-top: 1.5px solid var(--vien);
  box-shadow: 0 -6px 18px rgb(0 0 0 / .08);
}
.gio-dong-tren { display: flex; align-items: center; gap: .5rem; }

/* ⚠️ MỘT DÒNG, cắt bớt nếu dài. `min-width: 0` là vế bắt buộc: thiếu nó thì flex item
   không co được và `text-overflow` không bao giờ chạy. */
.gio-chu {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gio-chu strong { font-size: .95rem; }
.gio-phu { font-size: .85rem; color: var(--chu-mo); }
.nut-bo-gio {
  flex-shrink: 0;
  font: inherit; font-size: 1rem; line-height: 1;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1.5px solid var(--vien); border-radius: 999px;
  background: var(--trang); color: var(--chu-mo); cursor: pointer;
}
.thanh-gio .nut-chinh { min-height: 48px; font-size: 1rem; }

/* Ô phòng đã cho vào giỏ — bấm lần nữa là BỎ RA, nên nó phải nhìn khác hẳn ô trống. */
.o-phong.trong-gio {
  border-color: var(--xanh);
  border-width: 2px;
  background: var(--nen-nhat);
  box-shadow: 0 0 0 3px rgba(26, 58, 46, .12);
}
.o-phong.trong-gio .o-tinh-trang { color: var(--xanh); font-weight: 700; }

/* ── Ô THỨ TƯ: NÚT MỞ BẢNG 30 NGÀY — Nam giao 04/09 ─────────────────────────
   Thay `<input type="date">` sau ba lượt hỏng trên iPhone (văng lịch hai lần, rồi ô
   hiện trắng trơn). Đây là một cái nút bình thường, nên nó không có gì để hỏng. */
.nut-mo-lich.chua-chon {
  border-style: dashed;
  color: var(--chu-mo);
  font-weight: 600;
}

/* Bảng 30 ngày trong thẻ trượt — ba cột trên điện thoại: đủ rộng để đọc "Thứ 5 / 04/09"
   mà vẫn thấy được cả tuần trong một tầm mắt. */
.luoi-ngay {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
  margin: .3rem 0 .2rem;
}
.nut-ngay {
  display: grid;
  gap: .05rem;
  min-height: 52px;
  align-content: center;
  padding: .45rem .3rem;
  font: inherit;
  border: 1.5px solid var(--vien);
  border-radius: 12px;
  background: var(--trang);
  color: var(--chu);
  cursor: pointer;
  text-align: center;
}
.nut-ngay[aria-pressed="true"] {
  background: var(--xanh); border-color: var(--xanh); color: #fff;
}
.ngay-thu { font-size: .74rem; opacity: .75; font-family: system-ui, sans-serif; }
.ngay-ngay { font-size: .98rem; font-weight: 700; }

.nhac-tran-ngay {
  margin: .1rem 0 .8rem;
  font-size: .82rem;
  color: var(--chu-mo);
}

.loi-khung { margin: .6rem 0 0; font-size: .9rem; color: #b23; }

/* ── Thẻ chọn gói ────────────────────────────────────────────────────────────
   Trượt từ ĐÁY: khách cầm điện thoại một tay, ngón cái với tới nửa dưới màn hình.
   Trên máy tính thì `max-width` kéo nó về giữa như một hộp thoại thường. */

.nen-mo {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(0 0 0 / .45);
}

/* ── VỪA MỘT MÀN HÌNH ĐIỆN THOẠI — Nam giao 04/09 ───────────────────────────
   *"thiết kế tối ưu giao diện cho điện thoại: cho mọi thứ vừa vặn đỡ phải vuốt xuống"*

   ⚠️ Nút "Đặt …" GHIM ĐÁY thẻ, không trôi theo nội dung. Trước bản này nó đứng sau
   năm gói cộng ba dòng ghi chú, nên trên iPhone khách phải vuốt mới thấy nút trả tiền
   — và một nút phải đi tìm là một nút nhiều người không bấm.

   Thân cuộn riêng (`.than-chon-goi`), đáy đứng yên: kể cả nhà nghỉ có mười gói thì nút
   vẫn nằm đúng chỗ ngón cái. */
.the-truot-khach {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 30rem;
  max-height: 88vh;
  padding: .6rem 1.1rem 0;
  background: var(--nen);
  border-radius: 18px 18px 0 0;
}

.than-chon-goi { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

.day-chon-goi {
  position: sticky;
  bottom: 0;
  display: grid;
  gap: .4rem;
  padding: .6rem 0 0;
  background: var(--nen);
  /* Vùng an toàn iPhone: thiếu nó thì nút Đóng nằm dưới thanh gạt. */
  padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
}

@media (min-width: 40rem) {
  .nen-mo { align-items: center; }
  .the-truot-khach { border-radius: 18px; }
}

/* Vạch kéo — không bấm được, chỉ để mắt hiểu "cái này là một lớp đè lên, đóng được". */
.vach-keo {
  width: 2.5rem;
  height: 4px;
  margin: 0 auto .75rem;
  border-radius: 999px;
  background: var(--vien);
}

.the-truot-khach h2 { margin: 0 0 .1rem; font-size: 1.15rem; }
.the-truot-khach .phu-de { margin: 0; font-size: .85rem; }
.vach-keo { margin-bottom: .45rem; }

/* ── THANH "PHÒNG CỦA BẠN" — Nam hỏi 31/08 ───────────────────────────────────
   Đứng ngay dưới đầu trang, trên cả lưới phòng: người đang thuê mở trang chủ thì việc
   đầu tiên họ cần là quay vào phòng mình, không phải chọn phòng mới. */
/* Dải 3 bước đầu trang — 31/08. Cuộn ngang được trên màn hẹp thay vì xuống dòng:
   ba bước trên MỘT hàng mới đọc ra là một hành trình. */
.ba-buoc {
  display: flex;
  gap: .4rem 1.1rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 .9rem;
  padding: .6rem .9rem;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: #33544a;
  background: #fff;
  border: 1px solid var(--vien);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.ba-buoc li { display: flex; align-items: center; gap: .45rem; white-space: nowrap; }

/* ⚠️ Mũi tên thuộc về bước TRƯỚC (`::after`), không phải bước sau — sửa 05/09.
 *
 * Bản cũ dùng `li + li::before`, tức mũi tên nằm bên trong phần tử ĐI SAU. Trên màn
 * điện thoại ba bước không đủ chỗ một hàng, `flex-wrap` đẩy bước cuối xuống dòng — và
 * mũi tên đi theo nó, thành ra dòng thứ hai bắt đầu bằng một dấu "→" lơ lửng chỉ vào
 * khoảng trắng bên trái. Đo thật trên khung 375px.
 *
 * Gắn vào bước trước thì mũi tên ở lại cuối dòng một, đúng chỗ nó phải ở. */
.ba-buoc li:not(:last-child)::after { content: "→"; margin-left: .65rem; opacity: .45; }
/* Bản DỌC cho màn chuyển khoản: mỗi việc một dòng, không mũi tên — ở đó ba việc là
   ba câu đọc lần lượt, không phải một hành trình lướt ngang. */
.ba-buoc-doc { flex-direction: column; align-items: flex-start; gap: .55rem; }
.ba-buoc-doc li:not(:last-child)::after { content: none; margin: 0; }

/* ⚠️ MÀN HẸP: DỰNG DỌC, BỎ HÌNH VIÊN THUỐC — Nam giao 18/09.
 *
 * *"nhìn chưa cân đối lắm, sửa lại cho cân đối đẹp hơn."*
 *
 * `border-radius: 999px` chỉ đẹp khi nội dung nằm gọn MỘT hàng. Trên iPhone 440px ba
 * bước không đủ chỗ, `flex-wrap` đẩy bước ba xuống dòng hai — và một hình bo tròn hoàn
 * toàn ôm hai dòng dài ngắn khác nhau thì luôn trông lệch: mép trái dòng hai thụt vào
 * theo đường cong, còn khoảng trắng bên phải dòng một thì trống một mảng.
 *
 * Bản vá 05/09 đã chữa được cái mũi tên lơ lửng đầu dòng hai, nhưng không chạm tới
 * chuyện hình dạng — vì lúc đó câu hỏi là "mũi tên chỉ vào đâu", không phải "khối này
 * trông thế nào".
 *
 * Xuống dòng thì đổi luôn thể loại: ba bước xếp dọc, bo góc vừa, mỗi bước một dòng đều
 * nhau. Đó cũng đúng cách đọc trên màn hẹp — người ta lướt từ trên xuống, không lướt
 * ngang. Dạng viên thuốc giữ nguyên cho màn rộng, nơi ba bước vừa một hàng thật.
 *
 * 34rem = đúng ngưỡng `.dinh nav` biến mất, để cả trang đổi bố cục ở CÙNG một mốc. */
@media (max-width: 34rem) {
  .ba-buoc {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    width: 100%;
    border-radius: 14px;
    padding: .75rem 1rem;
  }
  .ba-buoc li:not(:last-child)::after { content: none; margin: 0; }
}
.ba-buoc-doc li { white-space: normal; text-align: left; }

.buoc-so {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--xanh, #1a3a2e);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

/* Thanh "Phòng X của bạn" — Nam chốt 02/09: "đưa nó ra ngoài, kéo lên kéo xuống gì
   vẫn thấy". GHIM ĐÁY màn hình chứ không sticky dưới header: header đã sticky top và
   cao thấp thất thường khi tên nhà nghỉ xuống dòng — hai thứ dính trần chồng nhau là
   thanh trôi lửng lơ giữa trang. Đáy thì trống, và ngón cái với tới. */
.thanh-phong {
  position: fixed;
  left: .6rem;
  right: .6rem;
  bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--xanh), #2c5e4a);
  color: #fff;
  text-decoration: none;
  border: 2px solid #d9b64a;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}

.thanh-phong-chu { font-weight: 700; font-size: 1.15rem; }
.thanh-phong-chu strong { color: #ffd970; }
.thanh-phong-phu { font-size: .92rem; opacity: .9; }

.cac-goi { display: grid; gap: .4rem; margin: .6rem 0 .2rem; }

.nut-goi {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem 1rem;
  /* 48px — vẫn trên ngưỡng chạm 44px của iOS. Hạ từ 56 ngày 04/09 để năm gói cộng
     nút trả tiền vừa một màn hình điện thoại; đây là chỗ tiền đổi chủ nên không hạ
     thêm nữa. */
  min-height: 48px;
  padding: .55rem .9rem;
  border: 1.5px solid var(--vien);
  border-radius: 12px;
  background: var(--trang);
  color: var(--chu);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nut-goi:hover { border-color: var(--xanh); }

/* ── GÓI KHÔNG VỪA KHOẢNG TRỐNG CÒN LẠI — Nam báo 19/09 ──────────────────────
 *
 * Phòng còn trống BÂY GIỜ nhưng đã có người đặt từ trưa mai thì gói 24 giờ không bán
 * được. Trước bản này màn hình vẫn bày nó, khách bấm, rồi server từ chối ở bước cuối —
 * đúng bẫy *"trần và luật chỉ thi hành ở BƯỚC CUỐI"*.
 *
 * Mờ đi + gạch giá, KHÔNG giấu hẳn: khách phải thấy nhà nghỉ CÓ gói đó (và giá bao
 * nhiêu) để còn chọn ngày khác. Giấu đi thì họ tưởng nhà nghỉ không cho thuê theo ngày.
 *
 * `cursor: not-allowed` + `pointer-events` vẫn BẬT: người bấm vào phải thấy con trỏ nói
 * "không được", chứ không phải bấm vào khoảng không không hiểu vì sao. */
.nut-goi.goi-khoa {
  opacity: .5;
  cursor: not-allowed;
  border-style: dashed;
  background: var(--nen-nhat);
}
.nut-goi.goi-khoa:hover { border-color: var(--vien); }
.nut-goi.goi-khoa .goi-gia { text-decoration: line-through; }

/* ⚠️ GỢI Ý KHÔNG ĐƯỢC TRÔNG NHƯ ĐANG CHỌN — Nam bắt được 04/09.
   Bản cũ cho `.noi-bat` y hệt `.da-chon` (viền xanh 2px + nền), chỉ khác cái bóng mờ.
   Nên khách bấm "Nửa ngày" xong nhìn thấy HAI ô cùng sáng, và ô kia là ô đắt hơn —
   họ không biết mình sắp trả tiền cho cái nào.

   Nay `.noi-bat` chỉ là một lời gợi ý nhẹ: nhãn chữ "Được chọn nhiều nhất" nói hộ,
   viền không đổi màu. Kiểu nhấn để dành riêng cho ô ĐANG CHỌN. */
.nut-goi.noi-bat { border-color: var(--vien); }

/* ── GÓI ĐANG CHỌN — Nam giao 30/08 ─────────────────────────────────────────
   Từ bản này bấm gói chỉ CHỌN, nút dưới cùng mới đi tiếp. Nên phải nhìn ra ngay ô nào
   đang được chọn — và nhìn ra bằng BA dấu hiệu chồng lên nhau (viền, nền, dấu ✓), vì
   một dấu hiệu đơn lẻ là thứ mắt bỏ sót trên màn hình ngoài nắng. */
.nut-goi.da-chon {
  border-color: var(--xanh);
  border-width: 2px;
  background: var(--nen-nhat);
  box-shadow: 0 0 0 3px rgba(26, 58, 46, .12);
}
.nut-goi.da-chon .goi-ten::before {
  content: "✓ ";
  color: var(--xanh);
  font-weight: 800;
}

.goi-ten { font-weight: 600; }
.goi-gia { font-size: 1.1rem; font-weight: 700; color: var(--xanh); }
.goi-y {
  grid-column: 1 / -1;
  font-size: .75rem;
  color: var(--chu-mo);
}

.nut-vien.rong { width: 100%; }

/* Nút đi tiếp: tô đặc, đứng TRÊN nút Đóng. Hai nút cạnh nhau mà cùng kiểu viền là hai
   nút trông như nhau với người đang vội — và một trong hai tiêu tiền. */
.nut-chinh {
  display: block;
  min-height: 56px;
  padding: .9rem 1.2rem;
  margin-bottom: .6rem;
  border: none;
  border-radius: 12px;
  background: var(--xanh);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

.nut-chinh.rong { width: 100%; }
.nut-chinh:disabled { opacity: .6; cursor: default; }

/* Khoá cuộn nền khi thẻ đang mở — không thì ngón tay vuốt thẻ lại kéo trang phía sau,
   và khách mất chỗ mình đang đứng. */
body.khoa-cuon { overflow: hidden; }

@media (max-width: 30rem) {
  /* Hai cột trên màn hẹp là đủ để nhìn hết mười phòng mà không phải cuộn — nhưng số
     cột thật do sơ đồ nhà nghỉ quyết, nên ở đây chỉ siết khoảng cách và cỡ chữ. */
  .so-do-khach-chu { gap: .4rem; }
  .o-phong { min-height: 78px; padding: .5rem .3rem; }
  .o-so { font-size: 1.2rem; }
}

/* Ô đang giữ chỗ nhưng BẤM ĐƯỢC — có người đặt trước mà quá đệm chưa chuyển tiền.
   Vàng chứ không xanh: nó không hẳn trống, và người bấm nên biết mình đang lấy lại
   một chỗ chứ không phải nhận một phòng bỏ không. */
.o-phong.giu-cho { border-color: var(--vang); }
.o-phong.giu-cho .o-tinh-trang { color: var(--vang); }

/* ── Bộ đếm số đêm trên thẻ gói — 01/09 ───────────────────────────────────── */
/* Khung ngày cụ thể của gói đang chọn — Nam giao 04/09. Đứng ngay dưới hàng số đêm,
   trên nút trả tiền: đây là câu cuối khách đọc trước khi bấm. */
.goi-khung-ngay {
  margin: .5rem .25rem 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--xanh);
}

/* Cảnh báo trùng lịch — Nam giao 04/09. Vàng chứ không đỏ: đây không phải lỗi của
   khách, mà là một thông tin kèm hai lối đi tiếp. */
.canh-bao-trung {
  margin: .5rem .25rem 0;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #fff8e1;
  border: 1px solid #f0d98a;
  font-size: .9rem;
  line-height: 1.45;
  color: #6b5300;
}

.hang-so-dem {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .25rem .1rem;
}
.nhan-dem { font-weight: 600; margin-right: auto; }
.nut-dem {
  width: 2.4rem;
  height: 2.4rem;
  border: 1.5px solid var(--vien);
  border-radius: 50%;
  background: var(--trang);
  color: var(--chu);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
}
.so-dem-chon { min-width: 4.2rem; text-align: center; font-weight: 700; }

/* ── Về phòng của tôi bằng mã — Nam giao 03/09 ──────────────────────────────── */
.o-ve-phong {
  margin: 1rem 0 1.4rem;
  padding: .9rem 1rem;
  background: #f2f8f4;
  border: 1.5px dashed #7aa88f;
  border-radius: 14px;
}
.ve-phong-nhan { margin: 0 0 .55rem; font-size: .92rem; font-weight: 600; color: #33544a; }
.form-ve-phong { display: flex; gap: .5rem; }
.form-ve-phong input {
  flex: 1; min-width: 0;
  padding: .65rem .8rem;
  border: 1.5px solid #cfe0d6; border-radius: 10px;
  font: inherit; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase;
  background: #fff;
}
.form-ve-phong input:focus-visible { outline: 2px solid var(--xanh); border-color: var(--xanh); }
/* Ví dụ mã 7 ký tự (rà 24/09) phải đọc được TRỌN ở 360px. Đo bằng trình duyệt thật: với
   giãn chữ .12em, "VD: NX7K9QA" bị cắt còn đúng "VD: NX7K9" — tức lại hiện ví dụ 5 ký tự
   cũ. Bỏ giãn chữ cho chữ mờ gợi ý (nó chỉ giúp đọc mã khách GÕ), và bản tiếng Việt bỏ
   luôn tiền tố "VD:" — nút "Vào phòng của tôi" dài nhất nên ô tiếng Việt hẹp nhất (94px
   chữ ở 360, "VD: NX7K9QA" cần 107px). */
.form-ve-phong input::placeholder { letter-spacing: 0; }
.nut-ve-phong {
  padding: .65rem 1rem;
  border: 0; border-radius: 10px;
  background: var(--xanh); color: #fff;
  font: inherit; font-size: .95rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
}
.nut-ve-phong:disabled { opacity: .6; cursor: default; }
.ket-qua-ve-phong { margin: .6rem 0 0; font-size: .9rem; color: #33544a; }
.ket-qua-ve-phong.hong { color: #b4541e; }
.ket-qua-ve-phong .nut-vao-phong {
  display: inline-block; margin: .3rem .4rem 0 0;
  padding: .45rem .85rem; border-radius: 999px;
  background: var(--xanh); color: #fff; text-decoration: none; font-weight: 700;
}

/* ---------- Câu hỏi thường gặp — rà 04/09 ----------
   Khối chữ THẬT cho khách lạ tới từ Google, và nguồn của `FAQPage` trong JSON-LD.

   `<details>` đóng sẵn: sáu câu mở hết là hai màn hình chữ trên điện thoại, đứng chắn
   giữa khách và phần nội quy. Google vẫn đọc được — nội dung nằm trong DOM, chỉ ẩn
   bằng CSS. */
.gioi-thieu {
  color: var(--chu-mo);
  margin: .6rem 0 1.75rem;
  max-width: 42rem;
}

.cac-hoi-dap { max-width: 46rem; }

.hoi-dap {
  border-bottom: 1px solid var(--vien);
}

.hoi-dap > summary {
  cursor: pointer;
  padding: .95rem 0;
  font-weight: 600;
  /* Danh sách gạch đầu dòng mặc định của `summary` khác nhau giữa các trình duyệt và
     không cái nào hợp với bố cục này. Cả hai dòng đều cần: Safari cũ chỉ hiểu dòng
     `-webkit-`. */
  list-style: none;
}

.hoi-dap > summary::-webkit-details-marker { display: none; }

/* Dấu mở/đóng tự vẽ — không phụ thuộc marker mặc định. */
.hoi-dap > summary::after {
  content: '+';
  float: right;
  color: var(--xanh-nhat);
  font-size: 1.3rem;
  line-height: 1;
}

.hoi-dap[open] > summary::after { content: '−'; }

.hoi-dap > p {
  margin: 0 0 1.1rem;
  color: var(--chu-mo);
}

.dan-them {
  margin-top: 1.75rem;
  color: var(--chu-mo);
  font-size: .95rem;
}

.dan-them a { color: var(--xanh-nhat); }


/* ---------- Màn hẹp: dải ba bước và tiêu đề lưới phòng ----------
 *
 * Khách của nhà nghỉ này gần như chỉ dùng điện thoại — họ đứng ở cổng, một tay cầm máy.
 * Hai khối dưới đây là hai khối ĐẦU TIÊN họ nhìn thấy sau khi quét mã, nên vài chục
 * pixel ở đây đáng giá hơn cả trăm pixel ở cuối trang. */
@media (max-width: 420px) {
  /* Nhỏ lại vừa đủ để ba bước nằm gọn hai dòng cân đối thay vì hai dòng lệch. */
  .ba-buoc {
    font-size: .84rem;
    gap: .35rem .7rem;
    padding: .5rem .75rem;
  }
  .ba-buoc li { gap: .35rem; }
  .ba-buoc li:not(:last-child)::after { margin-left: .45rem; }
  .buoc-so { width: 1.3rem; height: 1.3rem; font-size: .74rem; }
}

/* `.dia-danh-nho` gỡ 18/09 cùng với địa danh trong tiêu đề lưới phòng (Nam: *"xoá thông
   tin này đi, k cần thiết"*). Tín hiệu SEO vẫn còn ở `<title>`, thẻ mô tả, JSON-LD và
   chân trang. */

/* ═══════════════════════════════════════════════════════════════════════════
   ĐẶT NHANH — popup đường tắt, Nam giao 05/09
   ═══════════════════════════════════════════════════════════════════════════

   Hộp GIỮA MÀN ở mọi khổ máy, chữ căn giữa — Nam chốt 16/09.

   Bản trước trượt lên từ đáy trên điện thoại, theo lý do của thẻ chọn gói: khách cầm
   điện thoại một tay, ngón cái với tới nửa dưới. Đánh đổi đã biết khi đổi: giữa màn thì
   ngón cái với xa hơn, nhưng cả hộp nằm trọn trong tầm mắt và không dính mép dưới.

   Ngoại lệ của việc căn giữa là `.dat-nhanh-bao` — xem chú thích tại đó. */
.nen-dat-nhanh {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .45);
  /* Lề quanh hộp. Trên điện thoại phải MỎNG: mỗi 1rem lấy đi của hộp 2rem bề ngang, mà
     hàng "Ở bao lâu" ba nút chỉ vừa đủ chỗ ở khổ 360px — rộng tay một chút là `Nghỉ giờ`
     rơi xuống dòng riêng. */
  padding: .5rem;
}

@media (min-width: 26rem) {
  .nen-dat-nhanh { padding: 1rem; }
}

/* ── NÚT VI / EN / 中文 PHẢI BẤM ĐƯỢC KHI POPUP ĐANG MỞ — rà 24/09 ───────────────────
 *
 * Nền popup (`fixed; inset: 0; z-index: 80`) phủ lên cả thanh đầu trang (`.dinh`, 20).
 * Khách nước ngoài chạm EN thì thực ra chạm vào NỀN → `dongDatNhanh` → popup đóng, trang
 * vẫn tiếng Việt, và `dnGhiDaTat` ghi là họ đã tắt — ba lần chạm mới có bảng đặt tiếng
 * Anh. Nâng thanh đầu lên trên nền CHỈ lúc popup mở: chạm đổi ngữ không còn trúng nền,
 * và popup tự dịch lại vì `veLaiPhanDong` đã lo ca popup đang mở.
 *
 * Thanh đầu có `position: sticky` + `z-index` nên nó là một ngữ cảnh xếp lớp riêng — nâng
 * riêng cụm ba viên bên trong là vô ích, phải nâng cả thanh. */
body:has(#nen-dat-nhanh:not([hidden])) .dinh { z-index: 81; }
/* ⚠️ …và đẩy hộp popup xuống DƯỚI thanh đầu. Đo bằng trình duyệt thật ở 360×640: hộp cao
 * gần kín màn nên đỉnh hộp ở y=8, thanh đầu (nay nằm trên) che tới y=72 — che đúng nút ✕
 * (y 19–63), chạm ✕ không đóng được popup. Thanh đầu cao ~72px (ba viên 44px cộng lề),
 * nên chừa 4.75rem. Hai luật đi CÙNG một điều kiện `:has`: trình duyệt cũ không hiểu
 * `:has` thì bỏ cả hai, về đúng bố cục trước đây chứ không nửa nọ nửa kia. */
body:has(#nen-dat-nhanh:not([hidden])) .nen-dat-nhanh { padding-top: 4.75rem; }

.dat-nhanh {
  width: 100%;
  max-width: 26rem;
  /* `100%` của ô chữ bên trong nền — tức là đã trừ sẵn `padding` của nền, nên đổi lề ở
     trên thì đây không phải sửa theo. Hộp cao kịch trần vẫn cuộn được bên trong. */
  max-height: 100%;
  overflow-y: auto;
  position: relative;
  padding: 1.1rem 1rem;
  border-radius: 20px;
  background: var(--nen, #fdfcf9);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .3);
  text-align: center;
}

/* Chữ trong popup dùng font HỆ THỐNG, không dùng font serif của trang — Nam chốt 16/09.

   Trang khách cố tình để `Iowan Old Style` (xem `body`) cho phần đọc: nội quy, giới
   thiệu, câu hỏi. Nhưng popup này không phải chỗ để đọc, nó là bảng điều khiển — và
   những chữ ngắn có dấu như "đơn", "nửa", "giờ", "mấy" ở cỡ nhỏ thì nét chân của serif
   dính vào dấu, nhìn rối. Trang đã có tiền lệ: các nhãn, badge, dòng phụ đều đổi sang
   `system-ui` vì cùng lý do.

   `-apple-system` trước `system-ui`: trên Safari/iOS nó là đường chắc chắn nhất tới San
   Francisco, còn `system-ui` mới là tên chuẩn cho các máy khác. Phải liệt kê riêng các
   con của hộp: `<button>` không kế thừa font từ cha, trình duyệt tự gán font riêng. */
.dat-nhanh,
.dat-nhanh button,
.dat-nhanh input {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Chừa chỗ hai bên cho nút ✕. Tiêu đề căn giữa mà hộp hẹp lại thì chữ dài chui xuống
   dưới nút đóng; chừa CẢ HAI bên để tiêu đề vẫn nằm đúng giữa hộp, không lệch trái. */
.dat-nhanh > h2 {
  font-size: 1.1rem;
  margin: 0 0 .2rem;
  padding-inline: 2.2rem;
}

/* Câu báo mã cũ đã hết hạn — chỉ hiện khi khách quay lại sau một lượt chết.
   Dùng `--vang` (màu cảnh báo sẵn có của trang), không bịa biến mới: một tên biến
   không tồn tại thì trình duyệt lùi về giá trị dự phòng và câu quan trọng nhất trên
   màn hình trông y như chữ thường.

   Căn TRÁI ngược với phần còn lại của hộp: đây là đoạn nhiều dòng, mà chữ căn giữa thì
   mỗi lần xuống hàng mắt lại phải dò tìm đầu dòng. Thanh dọc bên trái cũng chỉ ra dấu
   được khi chữ bám vào nó. */
.dat-nhanh-bao {
  margin: 0 0 .75rem;
  text-align: left;
  padding: .6rem .8rem;
  border-left: 3px solid var(--vang, #c9a227);
  border-radius: .35rem;
  background: var(--nen-nhat, #faf7f2);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--chu, #2f2a26);
}

/* `balance` chia đều chữ giữa các dòng thay vì nhồi đầy dòng trên rồi bỏ một hai chữ
   mồ côi ở dòng dưới — câu căn giữa mà lệch như vậy nhìn rõ hơn hẳn câu căn trái.
   Trình duyệt chưa hỗ trợ thì bỏ qua dòng này, chữ vẫn xuống dòng bình thường. */
.dat-nhanh-phu {
  margin: 0 0 .85rem;
  /* Chừa chỗ cho nút ✕ như tiêu đề — rà 24/09: bản EN ở 390px nằm một dòng từ x=25 tới
     365 và ✕ đè đúng chữ "payment". Tiêu đề có lề này từ đầu, câu phụ ngay dưới thì quên. */
  padding-inline: 2.2rem;
  text-wrap: balance;
  font-size: .85rem;
  color: var(--chu-mo, #6b6560);
}

.dong-dat-nhanh {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: var(--nen-nhat, #f5f2ec);
  color: var(--chu-mo, #6b6560);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.dn-hang { margin-bottom: .75rem; }

.dn-nhan {
  display: block;
  margin-bottom: .3rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--chu-mo, #6b6560);
}

.dn-chon { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }

.dn-nut {
  flex: 1 1 auto;
  min-width: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .6rem .5rem;
  border: 1.5px solid var(--vien, #e5e0d8);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  /* ⚠️ Hạ CỠ CHỮ, không hạ `padding`: chiều cao nút = padding + dòng chữ, và nó phải ở
     trên 44px — chuẩn vùng chạm. Đo sau khi hạ còn 44.6px, dư đúng một chút. */
  font-size: .85rem;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .08s ease, border-color .08s ease, background-color .08s ease;
}

.dn-nut:active { transform: scale(.96); }

/* Màn hẹp: hạ sàn bề ngang của nút xuống, nếu không hàng "Ở bao lâu" ba nút vượt đúng
   vài pixel và `Nghỉ giờ` nằm một mình một dòng. 5.25rem = 84px, vẫn quá tầm ngón tay
   (chuẩn 44px) nên không mất gì về độ dễ bấm. */
@media (max-width: 26rem) {
  .dn-nut { min-width: 5.25rem; }
}

.dn-nut.dn-dang-chon {
  border-color: var(--xanh, #1a3a2e);
  background: var(--nen-nhat, #f5f2ec);
  font-weight: 600;
}

/* Nút tắt phải trông TẮT HẲN, không mờ nhẹ: khách bấm vào một ô mờ mà không có gì xảy
   ra sẽ bấm thêm ba lần nữa rồi kết luận trang hỏng. */
.dn-nut:disabled {
  opacity: .38;
  cursor: not-allowed;
  text-decoration: line-through;
}

.dn-nut-phu { font-size: .68rem; color: var(--chu-mo, #6b6560); }

.dn-dem { display: flex; align-items: center; justify-content: center; gap: .6rem; }

.dn-nut-dem {
  width: 2.4rem;
  height: 2.4rem;
  border: 1.5px solid var(--vien, #e5e0d8);
  border-radius: 50%;
  background: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  touch-action: manipulation;
}

.dn-so-dem { font-weight: 600; min-width: 4.5rem; }

.dn-loi {
  margin: .5rem 0 0;
  padding: .55rem .7rem;
  border-radius: 8px;
  background: #fef2f2;
  color: #b91c1c;
  font-size: .88rem;
}

/* Câu "gói này đã kín" trong popup Đặt nhanh — Nam giao 19/09.
   Ô RIÊNG, không dùng chung với `.dn-loi` (bị dọn ở đầu mỗi lượt bấm) hay
   `.dat-nhanh-bao` (đang giữ câu "mã đã hết hạn"). */
.dn-khoa-goi {
  margin: 0 0 .6rem;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.45;
  font-weight: 600;
  color: #b4541e;
  text-align: center;
}

/* "Nhận ngay → trả 00:30 ngày 25/9" ngay trên nút xác nhận — rà 24/09. Chữ thường, không
   màu cảnh báo: đây là thông tin để đọc trước cú bấm, không phải lời chặn. */
.dn-khung {
  margin: .25rem 0 0;
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  color: var(--xanh, #1a3a2e);
}

/* Gọn theo phần còn lại, nhưng gọn ÍT hơn: đây là cú bấm ra tiền, nhỏ bằng mấy nút
   chọn thì mất thứ bậc giữa "đang chọn" và "chốt". */
.dn-dat {
  width: 100%;
  margin-top: .75rem;
  padding: .7rem 1.25rem;
  font-size: 1rem;
  text-align: center;
}
.dn-dat:disabled { opacity: .5; cursor: not-allowed; }

/* Đường ra phải RÕ như đường vào — nhưng nhẹ hơn, vì phần lớn khách không cần nó. */
.dn-xem-het {
  display: block;
  width: 100%;
  margin-top: .55rem;
  padding: .5rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: .8rem;
  color: var(--xanh-nhat, #2d5a47);
  text-decoration: underline;
  text-wrap: balance;
  cursor: pointer;
}

/* Khoá cuộn nền khi popup mở — không thì ngón tay vuốt trong popup lại kéo trang phía
   sau, và khách mất chỗ đang đọc. */
body.khoa-cuon { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .dn-nut { transition: none; }
  .dn-nut:active { transform: none; }
}

/* Dải "lượt đang chờ chuyển khoản" — cùng khuôn thanh "Phòng X của bạn", màu khác.
   Vàng đất chứ không xanh: đây là việc CHƯA XONG, còn thanh kia là việc đã xong. */
.thanh-luot-giu {
  background: #7c4a03;
}

/* ── NÚT BẬT LẠI "ĐẶT NHANH" — Nam giao 05/09 ────────────────────────────────
 *
 * Ghim đáy phải. Không chồng `thanh-luot-giu` hay thanh "Phòng X của bạn" vì ba thứ
 * loại trừ nhau theo `dnDuocPhepMo` — nhưng vẫn chừa `bottom` đủ để nếu ngày nào luật
 * đổi thì chúng nằm cạnh nhau chứ không đè lên nhau.
 *
 * ⚠️ `z-index` THẤP HƠN nền popup (1000): nút phải nằm DƯỚI lớp phủ, không thì khách
 * thấy nó xuyên qua màn mờ và bấm được vào một nút mở thứ đang mở.
 */
.mo-dat-nhanh {
  position: fixed;
  right: 16px;
  /* ⚠️ `env(safe-area-inset-bottom)` — thiếu nó thì trên iPhone có thanh home nút nằm
     đè lên chính thanh ấy, và ngón tay bấm vào là vuốt ra màn hình chính. Mọi thanh
     ghim đáy khác của dự án đều cộng nó; nút này là chỗ tôi quên. */
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  /* ⚠️ THẤP hơn `.nen-dat-nhanh` (80). Test canh phép so này — 90 là con số đầu tiên tôi
     viết, và nó cho nút xuyên qua màn mờ để bấm được trong khi popup đang mở. */
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--xanh, #0a7d55);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 16px rgb(0 0 0 / 25%);
}

.mo-dat-nhanh:hover { filter: brightness(1.08); }
.mo-dat-nhanh:active { transform: translateY(1px); }
.mo-dat-nhanh-tia { font-size: 16px; }

/* Màn hình hẹp: nút to bằng ngón tay cái, vẫn không chiếm hết bề ngang. */
@media (max-width: 480px) {
  .mo-dat-nhanh {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 13px 20px;
  }
}