/* Khung màn đặt món (việc 3, đặc tả `docs/superpowers/specs/
 * 2026-10-20-nhahang-man-dat-mon-design.md` §3/§7).
 *
 * CƠ CHẾ GIỮ BỐN VÙNG CỐ ĐỊNH: **cột flex cao bằng khung nhìn**, KHÔNG
 * phải `position: sticky`.
 *
 * Vòng đầu khai cả hai, và `sticky` là khai báo CHẾT: `body` đã
 * `height: 100dvh; overflow: hidden` nên body không bao giờ cuộn, mà
 * `sticky` chỉ kích hoạt khi tổ tiên cuộn. Tệ hơn, ba thanh trên cùng khai
 * `top: 0`, nên nếu sticky có chạy thì chúng chồng đè lên nhau. Thứ thật
 * sự gánh bố cục là `flex: 0 0 auto` cho bốn vùng cố định và
 * `flex: 1 1 auto` cho vùng cuộn. Nên ở đây giữ ĐÚNG MỘT cơ chế: flex.
 * Test ghim đúng cơ chế đó (`tests/test_trang_dat_mon.py`:
 * `test_bon_vung_co_dinh_bang_cot_flex` + `test_khong_con_sticky_chet`).
 *
 * `z-index` vẫn có tác dụng: flex item được xếp chồng như phần tử đã định
 * vị, nên bốn vùng cố định vẫn nằm trên danh sách món khi bóng đổ chờm ra.
 *
 * CHỈ #dm-danh-sach là vùng cuộn DỌC duy nhất (`overflow-y: auto`); không
 * bộ chọn nào khác trong file này được khai `overflow-y: auto|scroll` —
 * xem `test_chi_mot_vung_cuon_doc_duy_nhat`.
 *
 * Việc này CHỈ dựng khung — không có hành vi JS nào gắn ở đây (việc 4).
 * Mọi nội dung món/nhóm thật sẽ do `dat-mon.js` bơm vào các khung rỗng
 * dưới đây (`#dm-thanh-nhom`, `#dm-danh-sach-mon`).
 */

/* Phông Be Vietnam Pro — luật chung của dự án là cả ba app dùng chung một
 * phông. Màn đặt món KHÔNG nạp `styles.css` (bố cục khác hẳn trang giới
 * thiệu), nên phải khai `@font-face` ngay tại đây; thiếu khối này thì
 * `font-family: Be` rơi về Arial và khách thấy chữ đổi phông khi bấm
 * "Đặt món". Cùng hai file .ttf trang giới thiệu đang dùng, không thêm
 * file mới. */
@font-face {
  font-family: Be;
  src: url("fonts/BeVietnamPro-Regular.ttf");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Be;
  src: url("fonts/BeVietnamPro-SemiBold.ttf");
  font-weight: 600;
  font-display: swap;
}

[hidden] {
  display: none !important;
}

/* Trình duyệt KHÔNG cho ô điều khiển biểu mẫu kế thừa phông từ `body` — nó
 * đặt sẵn phông hệ thống cho `<button>`. Thiếu khối này thì tên món và giá
 * chạy Be Vietnam Pro, còn chữ trên TÁM nút của màn đặt món (4 nút ngôn ngữ,
 * 2 tab, nút nhóm, giỏ hàng, "Đặt món") chạy phông mặc định — đúng cái lỗi
 * "chữ đổi phông khi bấm Đặt món" mà khối @font-face ở trên nói muốn tránh.
 * Chép đúng khối `button` của `styles.css` (trang giới thiệu đã có sẵn), vì
 * màn này không nạp `styles.css`.
 * Ghim bằng `test_phong_be_vietnam_pro` (hỏi từng thẻ <button> thật). */
button {
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:root {
  --dm-nen: #f5f1e8;
  --dm-mat: #ffffff;
  --dm-chu: #30372f;
  --dm-nhan: #927044;
  --dm-vien: #e4dcc8;
}

html,
body {
  height: 100%;
}

body.dat-mon-page {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* `100vh` là dự phòng cho trình duyệt cũ; `100dvh` mới là giá trị dùng
   * thật. Trên Safari iOS / Chrome Android lúc thanh địa chỉ còn hiện,
   * `100vh` LỚN HƠN khung nhìn thật, mà body lại `overflow: hidden` nên
   * không có gì cuộn được để kéo phần dư lên — thanh đáy "Đặt món" nằm
   * dưới mép màn hình, khách bỏ món vào giỏ rồi bấm không tới. */
  height: 100vh;
  height: 100dvh;
  /* Chặn trang tự cuộn — CHỈ #dm-danh-sach được cuộn (đặc tả §7.1). */
  overflow: hidden;
  background: var(--dm-nen);
  color: var(--dm-chu);
  font-family: Be, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
 * Vùng 1 — thanh trên: nút quay lại, logo, chọn ngôn ngữ, giỏ hàng.
 * ------------------------------------------------------------------- */

#dm-thanh-tren {
  z-index: 40;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: var(--dm-mat);
  border-bottom: 1px solid var(--dm-vien);
}

#dm-ve-trang-chu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
}

#dm-ve-trang-chu img {
  width: 20px;
  height: 20px;
}

.dm-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.dm-logo img {
  height: 34px;
  width: auto;
}

/* Cụm ngôn ngữ xếp DỌC: dòng chữ "sắp có" nằm TRÊN hàng bốn nút, không
 * nằm cạnh. Thanh trên ở màn 390px đã kín chỗ (nút quay lại + logo + 4 nút
 * 44px + giỏ ~ 356/358px), thêm chữ theo chiều ngang là đẩy nút giỏ ra
 * ngoài mép màn. */
.dm-ngon-ngu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  margin-left: auto;
}

.dm-ngon-ngu-hang {
  display: flex;
  gap: 4px;
}

/* 0.7rem = 11.2px: vẫn đọc được trên điện thoại (chốt "đọc được" của
 * `kieu_css` lấy mốc 11px). Nhỏ hơn nữa là ẩn trá hình. */
.dm-ngon-ngu-nhan {
  font-size: 0.7rem;
  line-height: 1.2;
  color: #6b6456;
  white-space: nowrap;
}

.dm-ngon-ngu-nut:disabled {
  opacity: 0.55;
  cursor: default;
}

.dm-ngon-ngu-nut {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--dm-vien);
  border-radius: 8px;
  background: transparent;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dm-ngon-ngu-nut[aria-pressed="true"] {
  background: var(--dm-nhan);
  color: #fff;
  border-color: var(--dm-nhan);
}

#dm-gio-hang-nut {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
}

#dm-gio-hang-nut img {
  width: 22px;
  height: 22px;
}

#dm-gio-hang-dem {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--dm-nhan);
  color: #fff;
  font-size: 0.65rem;
  line-height: 16px;
  text-align: center;
}

/* ---------------------------------------------------------------------
 * Vùng 2 — tab Đồ ăn / Đồ uống.
 * ------------------------------------------------------------------- */

#dm-tab {
  z-index: 35;
  flex: 0 0 auto;
  display: flex;
  background: var(--dm-mat);
  border-bottom: 1px solid var(--dm-vien);
}

.dm-tab-nut {
  flex: 1 1 50%;
  min-height: 44px;
  border: none;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dm-chu);
  border-bottom: 3px solid transparent;
}

.dm-tab-nut.is-active,
.dm-tab-nut[aria-pressed="true"] {
  color: var(--dm-nhan);
  border-bottom-color: var(--dm-nhan);
}

/* ---------------------------------------------------------------------
 * Vùng 3 — thanh nhóm món: cố định theo chiều DỌC, cuộn theo chiều NGANG.
 * ------------------------------------------------------------------- */

#dm-thanh-nhom {
  z-index: 30;
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--dm-nen);
  border-bottom: 1px solid var(--dm-vien);
  scrollbar-width: thin;
}

.dm-nhom-nut {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--dm-vien);
  border-radius: 999px;
  background: var(--dm-mat);
  color: var(--dm-chu);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}

.dm-nhom-nut.is-active,
.dm-nhom-nut[aria-pressed="true"] {
  background: var(--dm-chu);
  color: #fff;
  border-color: var(--dm-chu);
}

/* ---------------------------------------------------------------------
 * Vùng cuộn DUY NHẤT — danh sách món của nhóm đang chọn.
 * ------------------------------------------------------------------- */

#dm-danh-sach {
  flex: 1 1 auto;
  /* Cho phép co dưới cỡ nội dung trong cột flex — nếu không, danh sách 25
   * món đẩy cao cả cột và không có gì cuộn trong. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Thanh đáy là ANH EM flex, tự chiếm chỗ riêng — không phủ đè lên danh
   * sách — nên KHÔNG chừa ~96px dưới đáy như kiểu thanh nổi. Chỉ chừa
   * khoảng thở thường + vùng an toàn của máy có khuyết đáy. */
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.dm-trang-thai-rong {
  margin: 32px 0;
  text-align: center;
  color: #6b6456;
  font-size: 0.9rem;
}

/* Hai kiểu dòng món (đặc tả §4) — khung + kiểu dáng; việc 4 quyết định
 * món nào rơi vào kiểu nào (`mon_co_ban`/`image_path`) và bơm nội dung
 * thật vào #dm-danh-sach-mon. */

.dm-dong-mon {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dm-vien);
}

.dm-dong-mon-anh {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--dm-vien);
}

/* Dòng gọn (mon_co_ban=true hoặc không có ảnh): không có ảnh, bỏ hẳn
 * phần tử ảnh khỏi dòng — không chừa chỗ trống thay cho nó. */
.dm-dong-mon.gon .dm-dong-mon-anh {
  display: none;
}

/* Thân dòng là một <button>: bấm vào đó MỞ MÔ TẢ món (đặc tả §4), nên nó
 * phải bấm được bằng bàn phím và có vùng bấm riêng — không phải một <div>
 * gắn sự kiện chuột. Dựng lại dáng "chữ thường" cho nút: bỏ nền/viền, chữ
 * dồn trái, tên trên giá dưới. */
.dm-dong-mon-than {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
}

/* Món chưa có mô tả thì dat-mon.js khoá nút này lại (không có gì để mở) —
 * nhưng nó vẫn là tên + giá của món, không được mờ đi như một nút hỏng. */
.dm-dong-mon-than:disabled {
  opacity: 1;
  cursor: default;
}

.dm-dong-mon-ten {
  font-weight: 600;
  /* Nút là hộp flex cột, con không tự rộng bằng nút — thiếu dòng này thì
   * `text-overflow: ellipsis` không có gì để cắt. */
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mô tả món, mở ra ngay dưới dòng (dat-mon.js bật/tắt thuộc tính `hidden`
 * — giỏ hàng không hề đụng tới). */
.dm-dong-mon-mo-ta {
  margin: 0 0 10px;
  color: #6b6456;
  font-size: 0.85rem;
  line-height: 1.45;
}

.dm-dong-mon-gia {
  color: var(--dm-nhan);
  font-weight: 600;
  font-size: 0.9rem;
}

.dm-nut-them {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--dm-nhan);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
}

.dm-so-luong {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.dm-so-luong button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: 1px solid var(--dm-vien);
  background: var(--dm-mat);
  color: var(--dm-chu);
  font-size: 1.1rem;
  font-weight: 700;
}

.dm-so-luong-gia-tri {
  min-width: 20px;
  text-align: center;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
 * Vùng 4 — thanh đáy: chỉ hiện khi giỏ có món (đặc tả §6).
 * ------------------------------------------------------------------- */

#dm-thanh-day {
  z-index: 40;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  min-height: 44px;
  background: var(--dm-chu);
  color: #fff;
}

.dm-tam-tinh {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.dm-tam-tinh-nhan {
  font-size: 0.72rem;
  opacity: 0.8;
}

.dm-tam-tinh-gia {
  font-size: 1.1rem;
  font-weight: 700;
}

#dm-nut-dat-mon {
  min-height: 44px;
  padding: 0 24px;
  border: none;
  border-radius: 999px;
  background: var(--dm-nhan);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Ô chọn cách đặt hàng (việc 5, đặc tả §6) — LỚP PHỦ.
 *
 * `position: fixed` có chủ đích: ô này KHÔNG phải vùng thứ năm của cột
 * flex. Chen nó vào cột là lấy mất chiều cao của danh sách món — đúng cái
 * Chủ chê ("tao không muốn phải lướt xuống để chọn món").
 *
 * #dm-chon-cach-hop là bộ chọn DUY NHẤT ngoài #dm-danh-sach được cuộn dọc
 * trong file này: biểu mẫu đặt hàng với giỏ 20 món cao hơn màn điện thoại,
 * không cho cuộn là khách không bấm tới nút Gửi. Ô này mang `hidden` lúc
 * nạp trang nên trang vẫn chỉ có ĐÚNG MỘT vùng cuộn như §7.1 — xem
 * `test_chi_mot_vung_cuon_doc_duy_nhat` (nó chốt cả hai điều đó).
 * ------------------------------------------------------------------- */

.dm-chon-cach {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(21, 25, 20, 0.55);
}

/* Bộ chọn theo ID (không phải lớp) có chủ đích: đây là vùng cuộn thứ hai
 * duy nhất của file, và `test_chi_mot_vung_cuon_doc_duy_nhat` miễn trừ
 * đúng một cái tên — miễn trừ theo ID thì không ai vô tình nới luật ra cả
 * một lớp dùng lại được. */
#dm-chon-cach-hop {
  width: 100%;
  max-width: 520px;
  max-height: 88dvh;
  overflow-y: auto;
  /* Vuốt hết tờ giấy thì DỪNG, không cuộn tiếp danh sách món phía sau —
   * nền chỉ mờ 0.55 nên khách nhìn thấy nó chạy, tưởng bấm nhầm. */
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-radius: 18px 18px 0 0;
  background: var(--dm-mat);
}

.dm-chon-cach-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dm-chon-cach-dau h2 {
  margin: 0;
  font-size: 1.05rem;
}

#dm-chon-cach-dong {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--dm-chu);
}

.dm-chon-cach-loi {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 4px;
}

.dm-loi-nut {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 16px;
  border: 1px solid var(--dm-vien);
  border-radius: 14px;
  background: var(--dm-nen);
  text-align: left;
}

.dm-loi-nut:disabled {
  opacity: 0.55;
}

.dm-loi-ten {
  font-weight: 600;
  font-size: 0.98rem;
}

/* Dòng phụ dưới tên lối. Cỡ chữ KHÔNG được nhỏ hơn 12px: với lối GrabFood
 * đây chính là dòng cảnh báo giá Chủ yêu cầu — chữ nhỏ tới mức không đọc
 * được là ẩn trá hình (xem test_canh_bao_gia_grab_nam_NGAY_TREN_NUT). */
.dm-loi-phu {
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6b6456;
  white-space: normal;
}

.dm-canh-bao-gia {
  color: #8a4b1f;
  font-weight: 600;
}

/* -- lối GrabFood: mã QR + link, dùng lại route /nhahang/grab-qr.png -- */

.dm-grab-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  text-align: center;
}

.dm-grab-qr-anh {
  width: 180px;
  height: 180px;
}

.dm-grab-qr-chu {
  margin: 0;
  font-size: 0.85rem;
  color: #6b6456;
}

.dm-grab-qr-lien-ket {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--dm-nhan);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

/* -- lối số điện thoại: biểu mẫu do dat-mon.js dựng ------------------- */

/* Ô nhập cũng không kế thừa phông từ body (cùng lý do khối `button` ở
 * đầu file) — thiếu dòng này thì chữ khách gõ đổi phông. */
.dm-form-dien-thoai input,
.dm-form-dien-thoai textarea {
  font: inherit;
  color: inherit;
}

.dm-form-dien-thoai form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.dm-o-nhap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: #6b6456;
}

.dm-o-nhap input,
.dm-o-nhap textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--dm-vien);
  border-radius: 10px;
  background: var(--dm-mat);
}

.dm-bang-tam-tinh {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dm-bang-tam-tinh td {
  padding: 4px 0;
}

.dm-bang-tam-tinh td:last-child {
  text-align: right;
  white-space: nowrap;
}

.dm-bang-tam-tinh tfoot td {
  border-top: 1px solid var(--dm-vien);
  font-weight: 700;
}

.dm-xac-nhan {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 0.9rem;
}

.dm-xac-nhan input {
  width: 22px;
  height: 22px;
}

.dm-ghi-chu-tam-tinh {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #6b6456;
}

.dm-nut-gui {
  min-height: 48px;
  border: none;
  border-radius: 999px;
  background: var(--dm-nhan);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 700;
}

.dm-nut-gui:disabled {
  opacity: 0.6;
}

.dm-bao-loi {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: #a3301d;
}

.dm-dat-xong {
  margin: 8px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #2f6b3a;
}