/* ===========================================================================
   NỀN TẢNG — luật chung cho cả năm trang.

   Nạp TRƯỚC mọi file CSS khác, để trang nào cần khác đi thì ghi đè được.

   ---------------------------------------------------------------------------
   VÌ SAO CÓ FILE NÀY
   ---------------------------------------------------------------------------

   Mỗi trang tự lo phần nhìn của nó, và đó là chuyện đúng. Nhưng có một nhóm luật mà
   trang nào cũng cần và trang nào cũng dễ quên — vùng bấm đủ to, ô nhập không làm iPhone
   tự phóng trang, viền focus thấy được, chữ dài không đẩy tràn màn hình. Rải chúng vào
   năm file là năm cơ hội để bốn file làm đúng và một file làm sai.

   Đo thật trước khi viết file này (31/07):
     · `dat-phong.css` — trang khách, gần 100% mở trên điện thoại — có **0 @media query**
     · nút `+`/`−` chọn số giờ chỉ **2,4rem = 38px**, dưới ngưỡng bấm được của ngón tay
     · ô nhập trong trang đặt phòng cỡ **.85rem = 13,6px** → iOS TỰ PHÓNG cả trang khi
       khách chạm vào, và không tự thu lại
     · ô nhập mã tra cứu không khai `inputmode` → bàn phím hiện chữ thay vì số/chữ hoa

   ---------------------------------------------------------------------------
   AI DÙNG TRANG NÀY, VÀ Ở ĐÂU
   ---------------------------------------------------------------------------

   Khách đặt phòng: điện thoại, nhiều người lúc 2 giờ sáng, ngoài đường, mạng 4G, cầm
   một tay, đang vội và có thể đã mệt. Mọi quyết định trong file này nghiêng về phía đó.

   Chủ nhà nghỉ: cũng điện thoại, giữa hành lang, một tay cầm chìa khoá.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* iOS Safari tự phóng chữ khi xoay ngang. Tắt đi thì bố cục giữ nguyên tỉ lệ. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  /* ⚠️ BỘ CHỮ MẶC ĐỊNH — Nam báo 21/09: *"lỗi front chữ"*.
     Đo trên production trước khi sửa: `getComputedStyle(body).fontFamily` trả về đúng
     chữ **"Times"**. Không phải một bộ chữ rơi hụt — mà là KHÔNG FILE NÀO KHAI GÌ CẢ,
     nên trình duyệt dùng serif mặc định của nó. Trang `/phong-toi` chưa bao giờ có bộ
     chữ riêng, và `nen-tang.css` thì trước dòng này chỉ khai mỗi bộ monospace.
     Trang `/dat-phong` và trang chủ không dính vì hai file CSS của chúng tự khai.
     ⚠️ Đây đúng loại luật file này sinh ra để giữ: thứ trang nào cũng cần và trang nào
     cũng dễ quên. Trang nào muốn khác thì vẫn ghi đè được — file này nạp trước. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Vùng an toàn của iPhone tai thỏ / thanh gạt dưới.
     `viewport-fit=cover` trong thẻ meta cho trang tràn ra sát mép — đẹp, nhưng không có
     hai dòng này thì nội dung chui xuống dưới thanh gạt và mất một phần. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ⚠️ NÚT VÀ Ô NHẬP KHÔNG TỰ KẾ THỪA BỘ CHỮ — luật của trình duyệt, không phải quên.
   Đo cùng lượt 21/09: cả trang là "Times" còn hai nút CCCD là "Arial", vì nút dùng bộ
   chữ mặc định của hệ điều hành chứ không lấy của thẻ cha. Một trang hai bộ chữ trông
   như trang hỏng. */
button, input, select, textarea { font-family: inherit; }

/* Chuỗi dài KHÔNG được đẩy tràn màn hình.
   Trang này đầy thứ dài không có khoảng trắng để ngắt: mã tham chiếu `NNAB12CD`, số tài
   khoản, tên miền, và cả chữ khách tự gõ. Trên màn hình 360px một chuỗi như vậy đẩy cả
   trang trượt ngang, và trang trượt ngang thì mọi thứ khác trông như hỏng.

   ⚠️ `break-word`, KHÔNG PHẢI `anywhere` — và khác biệt này đã gây hồi quy thật.

   Hai giá trị trông giống nhau nhưng khác nhau ở một điểm quyết định: `anywhere` tính
   **kích thước nội dung tối thiểu bằng MỘT ký tự**, còn `break-word` giữ nguyên kích
   thước tối thiểu bằng cả từ dài nhất.

   Nghĩa là `anywhere` cho phép trình duyệt co cột bảng và ô lưới xuống bằng một chữ cái,
   và nó làm đúng vậy khi chật chỗ. Bản đầu của file này dùng `anywhere` và phá hai thứ
   vừa được vá trong cùng phiên:

     · bảng giá bảy cột — bản vá `min-width` ở `trang-khach.css` mất tác dụng, cột lại
       co và mỗi ô vỡ ba dòng
     · **mã cửa cỡ 2,4rem vỡ làm hai dòng** — sáu chữ số khách phải gõ vào ổ khoá trong
       hành lang tối, đọc thành hai hàng thì rất dễ bấm sai

   `break-word` vẫn ngắt được chuỗi dài khi KHÔNG còn cách nào khác, tức vẫn làm đúng
   việc nó sinh ra để làm. */
body, p, li, td, th, dd, dt, h1, h2, h3, label, summary {
  overflow-wrap: break-word;
}

/* Vài chỗ THẬT SỰ cần `anywhere`: chữ do người ngoài nhập, không giới hạn độ dài, và
   không có gì phải căn cột. Ở đây co xuống một ký tự là chấp nhận được — thà xấu còn
   hơn đẩy tràn cả trang. */
.thong-diep, .noi-dung-la, .ghi-chu-phong, .mo-ta, .ket-qua-tra-cuu {
  overflow-wrap: anywhere;
}

/* Ngược lại: những chỗ TUYỆT ĐỐI KHÔNG được ngắt giữa chừng. Người dùng phải đọc rồi
   gõ lại chúng — mã cửa vào ổ khoá, số tài khoản vào app ngân hàng, mã đơn vào ô tra
   cứu. Một chuỗi vỡ hai dòng ở đây là một lần gõ sai. */
.so-ma-cua, .ma, [data-so-tk], .thong-tin-ck .dam {
  overflow-wrap: normal;
  word-break: keep-all;
}

/* ---------------------------------------------------------------------------
   VÙNG BẤM — 44px, và con số này không phải ý thích
   ---------------------------------------------------------------------------

   44px là ngưỡng Apple đặt và Google (48dp) đồng ý ở mức tương đương: nhỏ hơn thì đầu
   ngón tay che mất mục tiêu và người ta bấm trượt. Bấm trượt trên trang đặt phòng nghĩa
   là chọn nhầm số giờ, và khách chỉ phát hiện ở màn hình trả tiền.

   Dùng `min-height`/`min-width` chứ không `height`: nút có chữ dài vẫn phải cao thêm
   được. Và chỉ áp cho THIẾT BỊ CHẠM (`pointer: coarse`) — trên máy tính có chuột thì
   nút 44px cao lênh khênh không đẹp mà cũng không cần.
   --------------------------------------------------------------------------- */

@media (pointer: coarse) {
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  select,
  summary,
  .nut, .nut-phu, .nut-nho, .nut-tron, .nut-nguy, .nut-zalo, .tab,
  .nut-tra-cuu, .nut-xoa-anh, .nut-xoa-phong {
    min-height: 44px;
  }

  /* Nút tròn phải to đều hai chiều, không thì nó thành hình bầu dục. */
  .nut-tron, .nut-xoa-phong { min-width: 44px; }

  /* Ô chọn (checkbox/radio) KHÔNG dùng `min-height` — nó kéo ô vuông thành hình chữ
     nhật lêu nghêu. Vùng bấm của chúng nằm ở cái `<label>` bọc ngoài, nên nới lề trong
     của nhãn là cách đúng: chạm vào chữ cũng chọn được ô. */
  label:has(> input[type="checkbox"]):not(.the-luc),
  label:has(> input[type="radio"]):not(.the-luc),
  .hang-cong-tac {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* `.the-luc` PHẢI đứng ngoài luật trên — 29/08.

     Nó cũng là `<label>` bọc `<input type="radio">`, nên nó dính luật kia hai đường:
     qua tên `.the-luc`, và qua `label:has(> input[type="radio"])`. Đường thứ hai mới là
     đường độc: `:has()` mang trọng số của phần tử bên trong, nên selector đó nặng hơn
     `.the-luc { display: grid }` bên `dat-phong.css` — bỏ tên khỏi danh sách thôi thì
     luật vẫn trúng. Phải `:not(.the-luc)` cả hai dòng.

     Hậu quả khi dính: thẻ chọn lúc nhận phòng có HAI dòng (tên gói + mô tả), bị ép thành
     một hàng ngang với `gap` .1rem, ra đúng cảnh khách thấy trên điện thoại:
     "Đặt trướcTối đa 31 ngày" dính liền, và "Ngay bây giờ" ngắt thành "Ngay bây / giờ".
     Trớ trêu là luật này sinh ra để phục vụ màn hình cảm ứng — đúng nơi nó làm hỏng.

     Vùng chạm vẫn đủ: thẻ có lề trong .8rem trên dưới và hai dòng chữ, cao hơn 44px sẵn.
     Vẫn khai `min-height` để ý định còn đó nếu sau này mô tả bị bỏ đi. */
  .the-luc { min-height: 44px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Link nằm một mình trong đoạn văn (không phải link giữa câu) cũng cần vùng bấm.
     `inline-block` + padding dọc để vùng chạm cao hơn dòng chữ. */
  a.nut, a.nut-phu, a.nut-zalo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   Ô NHẬP — 16px, và con số này CŨNG không phải ý thích
   ---------------------------------------------------------------------------

   iOS Safari TỰ PHÓNG TO cả trang khi người dùng chạm vào một ô nhập có cỡ chữ dưới
   16px. Nó không tự thu lại. Khách đang điền form bỗng thấy trang to gấp rưỡi, phải tự
   chụm hai ngón để thu về — giữa lúc đang vội, một tay.

   Đây là lỗi mobile kinh điển nhất, và nó KHÔNG lộ ra khi thử bằng cách thu nhỏ cửa sổ
   trình duyệt trên máy tính. Chỉ máy thật mới thấy.
   --------------------------------------------------------------------------- */

@media (pointer: coarse) {
  input, select, textarea {
    font-size: max(16px, 1rem);
  }
}

/* ---------------------------------------------------------------------------
   FOCUS — phải THẤY được
   ---------------------------------------------------------------------------

   `:focus-visible` chứ không `:focus`: viền chỉ hiện khi người dùng đi bằng bàn phím
   hoặc công nghệ hỗ trợ, không hiện khi bấm chuột. Bấm chuột mà hiện viền thì lập trình
   viên nào cũng muốn tắt nó đi — và tắt đi là người dùng bàn phím mất dấu hoàn toàn.
   --------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Ô chạm không nháy ô xám xanh khi bấm — hiệu ứng mặc định của WebKit trông như lỗi. */
button, a, [role="button"], summary, label {
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   HOVER — chỉ trên thiết bị THẬT SỰ có hover
   ---------------------------------------------------------------------------

   Trên điện thoại, `:hover` bị kích hoạt bởi cú CHẠM và dính lại cho tới khi người dùng
   chạm chỗ khác. Nút vừa bấm cứ sáng mãi, trông như đang được chọn.

   File này không thể sửa `:hover` của từng trang, nhưng nó dựng sẵn tiện ích để các
   trang dùng, và ghi lại luật: viết `:hover` mới thì bọc trong `@media (hover: hover)`.
   --------------------------------------------------------------------------- */

@media (hover: none) {
  /* Bỏ hiệu ứng dính sau khi chạm cho các lớp nút dùng chung. */
  .nut:hover, .nut-phu:hover, .nut-tron:hover, .the-chon:hover, .the-hinh-thuc:hover {
    filter: none;
  }
}

/* ---------------------------------------------------------------------------
   BẢNG — cuộn trong khung của nó, không đẩy cả trang

   Bảng giá bảy cột rộng gấp đôi màn hình 360px. Không có khung cuộn riêng thì CẢ TRANG
   trượt ngang — kể cả phần chữ bên trên vốn vừa vặn.

   Bản cài đặt thật nằm ở `trang-khach.css` (`.bang-cuon`), vì chỉ trang đó có bảng.
   File này KHÔNG khai một lớp thứ hai cùng ý: hai bản của một luật thì bản chết sẽ bị
   chép nhầm vào chỗ mới, và không ai biết bản nào đang chạy.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Ảnh không bao giờ tràn khung
   --------------------------------------------------------------------------- */

img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------------------
   TÔN TRỌNG NGƯỜI TẮT HIỆU ỨNG
   ---------------------------------------------------------------------------

   Người bị chóng mặt do chuyển động (vestibular disorder) bật thiết lập này trong hệ
   điều hành. Không phải chuyện thẩm mỹ — hiệu ứng trượt có thể làm họ buồn nôn thật.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Tiện ích dùng chung
   --------------------------------------------------------------------------- */

/* Chữ chỉ dành cho trình đọc màn hình. Dùng cho nhãn mà người sáng mắt suy ra được từ
   ngữ cảnh nhưng người dùng trình đọc thì không. */
.chi-doc-man-hinh {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Chữ số rộng bằng nhau — không thì con số nhảy tới nhảy lui khi đếm ngược, và cột
   tiền trong bảng không thẳng hàng. */
.ma, .tien, .so-ma-cua, .dem-nguoc, [data-so-tk] {
  font-variant-numeric: tabular-nums;
}

/* Nút chuyển ngữ VI/EN/中文 — 04/09, dùng ở /dat-phong + /phong-toi. */
.chon-ngon-ngu { display: flex; gap: .35rem; justify-content: flex-end; margin: 0 0 .5rem; }
.nut-ngon-ngu {
  padding: .3rem .7rem; border: 1px solid #cfe0d6; border-radius: 999px;
  background: #fff; font: inherit; font-size: .82rem; cursor: pointer; color: #33544a;
}
.nut-ngon-ngu.dang-chon { background: #1a3a2e; border-color: #1a3a2e; color: #fff; font-weight: 700; }


/* ── "MỞ BẰNG TRÌNH DUYỆT" — Nam giao 04/09 ──────────────────────────────────
   Khách quét QR bằng Zalo thì trang chạy trong webview: nút "Lưu ảnh QR" không làm
   được việc, và khách rời đi mở app ngân hàng thì lúc quay lại webview thường đã đóng.
   Không ép được (không nền tảng nào cho một trang tự nhảy sang Safari) — nên khối này
   phải ĐỦ NỔI để không ai lướt qua, mà vẫn chỉ được đường ra.

   ⚠️ Ở `nen-tang.css` chứ không ở riêng trang nào: cả ba trang khách đều nạp file này,
   và một bản sao CSS cho mỗi trang là ba chỗ để lệch nhau. */
.khoi-mo-ngoai {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  border: 2px solid #d97706;
  border-radius: 14px;
  background: #fffbeb;
  color: #7c2d12;
}
.mo-ngoai-tieu-de { margin: 0 0 .35rem; font-weight: 800; font-size: 1rem; }
.mo-ngoai-noi { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.5; }
.mo-ngoai-nut { display: flex; gap: .5rem; flex-wrap: wrap; }
.mo-ngoai-chinh, .mo-ngoai-phu {
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  min-height: 44px;
  padding: .5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.mo-ngoai-chinh { border: none; background: #b45309; color: #fff; }
.mo-ngoai-phu { border: 1.5px solid #d97706; background: transparent; color: #7c2d12; }
.mo-ngoai-chinh:disabled { opacity: .65; }

/* URL in ra chữ — đường lùi cuối khi webview chặn cả clipboard. `user-select: all` để
   một cú chạm giữ là chọn trọn dòng. */
.mo-ngoai-link {
  margin: .6rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  user-select: all;
  -webkit-user-select: all;
}

.mo-ngoai-meo { margin-top: .7rem; font-size: .88rem; }
.mo-ngoai-meo > summary { cursor: pointer; font-weight: 600; }
.mo-ngoai-meo p { margin: .4rem 0 0; line-height: 1.5; }

/* ── CHẮN HẲN (chỉ trang chủ) — Nam giao 04/09 ───────────────────────────────
   Lớp phủ kín màn hình. ⚠️ Luôn kèm nút thoát: nhận diện webview bằng userAgent là
   phép đoán, và đoán nhầm mà không có đường ra là khoá một khách thật ở ngoài cửa. */
.nen-mo-ngoai {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(0 0 0 / .55);
  overflow-y: auto;
}
.nen-mo-ngoai .khoi-mo-ngoai {
  margin: auto;
  max-width: 30rem;
  box-shadow: 0 10px 40px rgb(0 0 0 / .3);
}
.mo-ngoai-thoat {
  display: block;
  width: 100%;
  margin-top: .9rem;
  padding: .55rem;
  min-height: 44px;
  font: inherit;
  font-size: .9rem;
  color: #7c2d12;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
/* Đã bấm bỏ qua: tấm biển nhỏ lại, nhưng vẫn còn — khách cần biết vì sao lát nữa nút
   "Lưu ảnh QR" không làm gì. */
.khoi-mo-ngoai.da-bo-qua { padding: .6rem .8rem; }
.khoi-mo-ngoai.da-bo-qua .mo-ngoai-tieu-de { font-size: .92rem; }
.khoi-mo-ngoai.da-bo-qua .mo-ngoai-meo,
.khoi-mo-ngoai.da-bo-qua .mo-ngoai-link { display: none; }

/* Đường ngắn nhất khi bị chắn trong app — Nam giao 06/09: khách đang đứng trước băng rôn
   QR, nên "quét lại bằng camera" ngắn hơn hẳn đi tìm dấu ⋯ rồi chép link. Nổi hơn phần
   chỉ đường bên trên vì nó là việc nên làm trước. */
.mo-ngoai-camera {
  margin: .75rem 0 0;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: #eef6f0;
  border: 1.5px solid #bcd9c6;
  font-weight: 600;
  line-height: 1.5;
}