/* Kiểm điện thoại 390×844 (03/11/2026, phiên Bán hàng; kết quả ở docs/KIEM-DIEN-THOAI-03-11.md).
   Ba điều sửa cho mọi màn của quầy trên điện thoại: chữ không nhỏ hơn 12,5px, vùng bấm không nhỏ hơn 44px,
   thông báo nổi không che nút Gửi bếp, Thanh toán. Chỉ có hiệu lực ở màn hẹp (đổi sang bố cục điện thoại ở 767px).
   Dùng min-height, min-width nên không phải đua độ ưu tiên với các luật height cũ của từng màn.
   Nạp sau dien-thoai.css; quy ước giao diện: app/QUY-UOC-GIAO-DIEN.md. */
@media (max-width: 767px) {
  /* 1. Chữ ≥ 12,5px */
  .thanh-duoi button, .huy-hieu, .nhan-tt, .tb-tag, .kh-tag, .kh-tt, .mkt-tag, .mkt-hen-moi, .tq-nhom-dem,
  .gt-gio, .gt-ht-vong i, .gt-ht-ten, .gt-gia-ds dt, .ms-moc, .nh-cham-order,
  .gh-nhan, .hd-nhan, .hd-phu, .hd-vong-chu .hd-phu, .hd-dem, .mn-nhom-ten span, .ms-chu-thich, .ms-chu-thich span, .ms-cho-xep-dau b, .mkt-bay-gio span, .tq-tag-so, .tb-buoc-so { font-size: 12.5px; }
  .huy-hieu { min-width: 20px; height: 20px; line-height: 20px; }
  .tb-tag, .kh-tag, .gh-nhan, .hd-nhan, .gt-gio { height: 24px; }
  .hd-dem { min-width: 22px; height: 22px; }

  /* iPhone tự phóng to cả trang khi chạm vào ô nhập chữ nhỏ hơn 16px (trang không khóa phóng to): ô nhập, ô chọn, vùng văn bản đều 16px */
  .o-tim input, .o-nhap-nho, .hd-o.nho .o-nhap-nho, .hd-textarea, .nh-link input, select, .jd-chon-muc select, input[type=date] { font-size: 16px; }

  /* 2. Vùng bấm ≥ 44px: nút biểu tượng ở thanh trên và trong hóa đơn */
  .nut-icon, .nut-avatar-dt { width: 44px; height: 44px; }
  .thanh-tren .quay-lai, .tren-dt .quay-lai, .nut-icon-nho, .hd-menu-phu .nut-icon-nho, .hd-x { min-width: 44px; min-height: 44px; }
  .hd-gan-vong, .hd-tong-dt { min-height: 44px; }
  .nut-chung.nho, .nut-chung.phu.nho { min-height: 44px; }

  /* Hàng chip, tab, vòng tay, nút "+" của Menu */
  .chip, .gt-o, .mn-seg button, .kh-seg button, .kh-xem-them button, .mn-vong, .mn-thanh-tt, .kh-o-ghi-sua, .kh-nut-chu { min-height: 44px; }
  .mkt-o-so button, .mkt-buoc button, .kh-buoc button { min-width: 44px; min-height: 44px; }
  .mkt-buoc { height: auto; min-height: 48px; }
  .mkt-o-so { padding: 0 2px; gap: 0; } /* lề trong 6px → 2px, bỏ khoảng cách giữa: nút −, ô số, nút + (mỗi ô 44px) vừa trong khung rộng 145px */
  .mkt-o-so input { min-width: 44px; }

  /* Thanh trên của màn chi tiết (có nút quay lại): tăng nút lên 44px thì chật 4px, nên thu khoảng cách, chữ tiêu đề; nhãn trạng thái co lại có dấu … thay vì tràn ra ngoài */
  .tren-dt:has(.quay-lai) { gap: 6px; padding-right: 10px; }
  .tren-dt:has(.quay-lai) h1 { font-size: 18px; flex: none; }
  .tren-dt:has(.quay-lai) > .nhan-tt { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; }
  .ms-chon-ngay { min-width: 44px; }
  /* Mũi tên Ngày trước, Ngày sau, Giờ trước, Giờ sau: viên thuốc cao lên theo nút 44px */
  .ms-ngay-dt button, .ms-chip-gio button { min-width: 44px; min-height: 44px; }
  .ms-ngay-dt { height: auto; min-height: 48px; }
  .chip.ms-chip-gio { min-height: 48px; }
  .mn-them, .mn-them.lon, .mn-o-combo .mn-o-chan .mn-them { min-width: 44px; min-height: 44px; }
  /* Tổng quan (quản lý): mũi tên đổi ngày, liên kết số hóa đơn; Menu (quản lý): nút Báo hết món */
  .tq-ngay-nut, .mn-het-nut { min-width: 44px; min-height: 44px; }
  .tq-lk-hd { position: relative; } /* liên kết nằm giữa dòng chữ: giữ nguyên dòng, mở vùng bấm bằng ::after */
  .tq-lk-hd::after { content: ''; position: absolute; inset: -14px -6px; }

  /* Ô nhập, ô chọn */
  .o-nhap-nho, .ms-hang-khac .o-nhap-nho, select { min-height: 44px; }
  .o-tim { min-height: 46px; }
  .o-quet-vong { min-height: 48px; }
  .kh-tim input, .o-quet-vong input, .o-tim input, .ms-o-gio input { align-self: stretch; }

  /* Tên khách trong bảng Khách hàng, Thẻ gói; liên kết nhỏ ở chân Lịch massage */
  .kh-bang-ten { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .ms-chan-dt .ms-lien-ket, .ms-lien-ket { display: inline-flex; align-items: center; min-height: 44px; }

  /* Lịch nhà hàng: cột tên bàn rộng 62px, hàng cao 49px nên nút mã QR (26px) và chấm order chờ gán vòng (22px) giữ cỡ vẽ,
     vùng bấm mở rộng ra 44px bằng ::after (không đổi chiều cao hàng lưới giờ). Hai vùng bấm kề nhau chồng nhau chừng 12px, chấm order nằm trên. */
  .nh-hang-ban { column-gap: 3px; } /* QR 26 + 3 + chấm 22 = 51px vừa cột 52px, chấm không rớt xuống dòng đè lên tên bàn kế */
  .nh-nut-qr-ban, .nh-cham-order { position: relative; }
  .nh-nut-qr-ban::after { content: ''; position: absolute; inset: -10px; }
  .nh-cham-order::after { content: ''; position: absolute; inset: -11px; }

  /* 3. Thông báo nổi nằm dưới thanh trên, không đè thanh nút Gửi bếp / Thanh toán ở đáy */
  .khung-thong-bao { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); }
}