/* ===========================================================================
   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 {
  /* 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);
}

/* 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"]),
  label:has(> input[type="radio"]),
  .the-luc, .hang-cong-tac {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  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;
}