/* Trang GỌI MÓN (/dat-mon) — bố cục kiểu trang quán ShopeeFood / GrabFood (SPEC mục 12),
   màu + font của web thương hiệu Bé Nếp: nền nếp vàng nhạt · thẻ trắng ngà viền mực · xanh lá chuối (nút, thanh giỏ)
   · đỏ lạp xưởng cho giá. Chữ: Nunito (nội dung) + Baloo 2 (tiêu đề) — đủ dấu tiếng Việt.
   Giỏ + nút +/− nằm ở gio.css (dùng chung với trang chủ). Mọi nút ≥ 44px. Không gradient, không kính mờ, không emoji. */
:root {
  --nen: #FFF7E3;            /* nếp — nền trang (cũng là background_color trong manifest.json) */
  --the: #FFFCF3;            /* trắng ngà — thẻ */
  --chu: #2D2A1E;            /* màu mực */
  --chu-phu: #5C5643;
  --vien: #E6D8B4;
  --vien-dam: #2D2A1E;
  --chinh: #26762B;          /* xanh lá chuối đậm — chữ trắng trên nền này đạt 5.6:1 */
  --chinh-dam: #1D5A26;
  --chinh-nhat: #DDF0D2;
  --bia: #1D5A26;            /* nền băng bìa + theme-color */
  --nhan: #B23624;           /* đỏ lạp xưởng — giá, tổng tiền, chữ báo lỗi */
  --nhan-nhat: #FBE1D8;
  --vang: #F6B92B;
  --nen-anh: #FBE8B5;        /* ô ảnh khi chưa tải */
  --bong: 4px 4px 0 #2D2A1E;
  --bo: 16px;
  --font: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-to: "Baloo 2", "Nunito", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font: 600 15px/1.45 var(--font);
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
p, h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; }

.khung { max-width: 560px; margin: 0 auto; }
main { padding: 0 0 calc(24px + env(safe-area-inset-bottom)); }
.phu { color: var(--chu-phu); }
.the { background: var(--the); }

/* ---------- ảnh bìa + thẻ quán (có Bé Nếp nhỏ) ---------- */
.bia { height: 150px; overflow: hidden; background: var(--bia); border-bottom: 3px solid var(--chu); }
.bia-anh { display: block; width: 100%; height: 100%; object-fit: cover; }
.the-quan {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -46px 12px 0;
  padding: 12px 14px 12px;
  background: var(--the);
  border: 3px solid var(--chu);
  border-radius: 20px;
  box-shadow: var(--bong);
}
.nep-quan { flex: none; width: 64px; height: 64px; display: block; }
.the-quan-chu { min-width: 0; }
.ten-quan { font: 800 30px/1 var(--font-to); color: var(--chinh-dam); padding-top: 4px; letter-spacing: -.01em; }
.mo-ta-quan { margin-top: 1px; color: var(--nhan); font: 700 17px/1.2 var(--font-to); }
.thong-tin-quan { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 14px; }
.tt-muc { display: inline-flex; align-items: center; gap: 6px; }
.bt {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tt-muc .bt { width: 17px; height: 17px; color: var(--chinh); }

.bang-km {
  margin: 12px 12px 0;
  padding: 10px 14px;
  border: 2px solid var(--chu);
  border-radius: 14px;
  background: var(--vang);
  font-weight: 800;
}

/* ---------- thanh danh mục dính đầu trang ---------- */
.thanh-muc {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 4px;
  margin-top: 14px;
  padding: 0 8px;
  overflow-x: auto;
  scrollbar-width: none;
  background: var(--the);
  border-top: 2px solid var(--chu);
  border-bottom: 2px solid var(--chu);
}
.thanh-muc::-webkit-scrollbar { display: none; }
.tab-muc {
  flex: none;
  min-height: 48px;
  padding: 0 14px;
  border: 0;
  border-bottom: 4px solid transparent;
  background: none;
  color: var(--chu-phu);
  font: 800 17px/1 var(--font-to);
  white-space: nowrap;
  padding-top: 4px;
}
.tab-muc[aria-current="true"] { color: var(--chinh); border-bottom-color: var(--chinh); }

/* ---------- mục món ---------- */
.muc {
  margin-top: 10px;
  padding: 14px 16px 2px;
  background: var(--the);
  border-top: 2px solid var(--vien);
  border-bottom: 2px solid var(--vien);
  scroll-margin-top: 52px;
}
.muc h2 { font: 800 24px/1.1 var(--font-to); color: var(--chinh-dam); margin-bottom: 2px; padding-top: 2px; }
.muc-phu { color: var(--chu-phu); font-size: 14px; margin-bottom: 4px; }

/* một món = một hàng: ảnh vuông trái · tên, mô tả, giá · nút + góc phải dưới */
.mon {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--vien);
}
.muc .mon:first-of-type { border-top: 0; }
.anh-mon {
  display: block;
  flex: none;
  width: 88px;
  height: 88px;
  border: 2.5px solid var(--chu);
  border-radius: 14px;
  object-fit: cover;
  background: var(--nen-anh);
}
.mon-giua { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mon-ten { font: 800 17px/1.25 var(--font); overflow-wrap: anywhere; }
.mon-mo-ta {
  margin-top: 2px;
  color: var(--chu-phu);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mon-duoi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  min-height: 46px;
}
.mon-gia { color: var(--nhan); font: 800 18px/1 var(--font-to); font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px; }
.gia-goc { margin-left: 6px; color: var(--chu-phu); font: 600 13px/1 var(--font); }
.nhan-tk, .nhan-goi-y {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 800;
  align-self: flex-start;
}
.nhan-tk { background: var(--nhan-nhat); color: var(--nhan); }
.nhan-goi-y {
  margin: 0 0 4px;
  border: 2px solid var(--chu);
  background: var(--vang);
  color: var(--chu);
  transform: rotate(-2deg);
}
.nhan-goi-y.ban-chay { background: var(--nhan); color: #FFFFFF; }

/* combo: ảnh 3:2 rộng hơn món lẻ */
.mon-combo .anh-mon { width: 120px; height: 80px; align-self: flex-start; }
.muc .mon-combo { border-top: 1px solid var(--vien); }
.muc .mon-combo:first-of-type { border-top: 0; }

/* món mẹ bấm "Hết món": xám, không bấm thêm được */
.mon.het .anh-mon { filter: grayscale(1); opacity: .55; }
.mon.het .mon-ten, .mon.het .mon-gia, .mon.het .mon-mo-ta { opacity: .55; }
.nhan-het-rieng {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #E7E2D3;
  color: #5C5643;
  font-size: 13px;
  font-weight: 800;
}

.ve-trang-chu { margin: 16px 16px 8px; text-align: center; font-size: 14px; }
.ve-trang-chu a { color: var(--chinh); font-weight: 800; }

/* ---------- thẻ "Đặt lại như hôm trước" ---------- */
.the-lai { margin: 12px 12px 0; padding: 14px 16px; border: 3px solid var(--chu); border-radius: 18px; box-shadow: var(--bong); }
.the-lai-dau { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--chinh); }
.the-lai-dau h2 { color: var(--chu); font: 800 20px/1.1 var(--font-to); padding-top: 2px; }
.lai-mon { padding: 2px 0 8px; }
.dong-hai {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 3px 0;
}
.dong-hai .trai { min-width: 0; overflow-wrap: anywhere; }
.dong-hai .phai { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
.dong-giam .phai, .dong-qua .phai { color: var(--chinh); }
.the-lai .phu { margin-top: 2px; font-size: 14px; }
.hang-nut { display: flex; gap: 10px; margin-top: 10px; }
.hang-nut .nut-vien { flex: 0 0 auto; width: auto; padding: 0 18px; }
.hang-nut .nut-chinh { flex: 1; }

/* ---------- nút chung (kiểu "bấm lún" của web thương hiệu) ---------- */
.nut {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 50px;
  padding: 10px 16px;
  border: 3px solid var(--chu);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--chu);
  font: 800 17px/1.1 var(--font-to);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.nut:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--chu); }
.nut:disabled { opacity: .55; cursor: default; }
.nut-chinh { background: var(--chinh); color: #FFFFFF; }
.nut-vien { background: var(--the); color: var(--chinh-dam); }
.nut-lon { min-height: 56px; font-size: 18px; }
.nut-chep {
  flex: none;
  min-width: 64px;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--chu);
  border-radius: 10px;
  background: var(--chinh-nhat);
  color: var(--chinh-dam);
  font-size: 14px;
  font-weight: 800;
}
.nut-chep:active { background: #C6E6B8; }

.bao {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #FFF0C2;
  color: #5C4A12;
  font-size: 14px;
  text-align: left;
}
#bao-bo { margin: 10px 12px 0; }
.loi { margin-top: 6px; color: var(--nhan); font-size: 14px; font-weight: 800; }
.dang-tai { padding: 32px 16px; color: var(--chu-phu); text-align: center; }
.khoi-loi { margin: 12px; padding: 20px 16px; text-align: center; border: 3px solid var(--chu); border-radius: 18px; }
.khoi-loi .nut { margin-top: 12px; }

/* ---------- màn thanh toán ---------- */
.dau-man { padding: 16px 16px 10px; text-align: center; }
.nep-dau-man { display: block; width: 48px; height: 48px; margin: 0 auto 2px; }
.dau-man-quan { color: var(--chinh-dam); font: 800 17px/1 var(--font-to); }
.dau-man-tieu-de { font: 800 26px/1.1 var(--font-to); padding-top: 2px; }
.the-tt {
  margin: 0 12px;
  padding: 18px 16px 6px;
  border: 3px solid var(--chu);
  border-radius: 20px;
  box-shadow: var(--bong);
  text-align: center;
}
.nhan-nho { color: var(--chu-phu); font-size: 13px; font-weight: 700; }
.tt-tien-hang { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2px; }
.tt-tien { color: var(--nhan); font: 800 40px/1.1 var(--font-to); font-variant-numeric: tabular-nums; padding-top: 4px; }
.tt-qr { margin: 14px auto 0; }
.anh-qr {
  display: block;
  width: 100%;
  max-width: 270px;
  height: auto;
  aspect-ratio: 540 / 640;
  margin: 0 auto;
  border-radius: 10px;
  background: var(--nen);
}
.tt-huong-dan { margin-top: 12px; font-size: 15px; font-weight: 800; }
.tt-meo { margin-top: 6px; color: var(--chu-phu); font-size: 13px; }
.tt-ck { margin-top: 14px; text-align: left; }
.dong-chep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--vien);
}
.dong-chep > div { min-width: 0; }
.gia-tri { font-size: 17px; font-weight: 800; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ma-don { letter-spacing: .04em; }

.the-don { margin: 12px 12px 0; padding: 14px 16px; border: 3px solid var(--chu); border-radius: 20px; box-shadow: var(--bong); }
.hd-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hd-dau h2 { font: 800 19px/1.1 var(--font-to); }
.hd-so { color: var(--chinh); font-weight: 800; }
.hd-so span { font-size: 18px; }
.hd-mon { margin-top: 8px; }
.hd-tong {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 2px dashed var(--vien);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hd-tong span:last-child { color: var(--nhan); }
.hd-ma { margin-top: 6px; color: var(--chu-phu); font-size: 13px; }
.hd-ma span { color: var(--chu); font-weight: 800; letter-spacing: .03em; }
#man-qr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

.day-co-dinh {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--the);
  border-top: 3px solid var(--chu);
}
.day-co-dinh .nut { max-width: 536px; margin: 0 auto; }

/* ---------- cuống vé: Bé Nếp + SỐ THỨ TỰ rất to ---------- */
#man-xong { padding: 18px 12px 0; }
.cuong-ve {
  padding: 16px 16px 16px;
  border: 3px solid var(--chu);
  border-radius: 22px;
  box-shadow: var(--bong);
  text-align: center;
  overflow: hidden;
}
.nep-ve { display: block; width: 72px; height: 72px; margin: 0 auto; }
.cv-quan { color: var(--chinh-dam); font: 800 16px/1 var(--font-to); margin-top: 2px; }
.cv-nhan { margin-top: 8px; color: var(--chu-phu); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cv-so {
  margin: 4px 0 2px;
  color: var(--chinh);
  font: 800 clamp(120px, 42vw, 180px)/1 var(--font-to);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.cv-so.la-ma { font-size: 34px; letter-spacing: .04em; line-height: 1.3; }
.cv-loi { font: 800 24px/1.1 var(--font-to); }
/* đường xé của vé: đứt nét + 2 khuyết tròn ở mép */
.cv-xe { position: relative; margin: 18px -16px 14px; border-top: 3px dashed var(--chu); opacity: .9; }
.cv-xe::before, .cv-xe::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border: 3px solid var(--chu);
  border-radius: 50%;
  background: var(--nen);
}
.cv-xe::before { left: -15px; }
.cv-xe::after { right: -15px; }
.cv-mon { text-align: left; }
.cv-tong {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 2px dashed var(--vien);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cv-ma-nho { margin-top: 12px; color: var(--chu-phu); font-size: 13px; font-variant-numeric: tabular-nums; }
.cv-ma-nho #xong-ma { color: var(--chu); font-weight: 800; letter-spacing: .03em; }
#nut-dat-khac { margin-top: 16px; }

/* ---------- chỉ màn đặt có ảnh bìa + thẻ quán + danh mục ---------- */
body:not([data-man="dat"]) .bia,
body:not([data-man="dat"]) .the-quan,
body:not([data-man="dat"]) .bang-km,
body:not([data-man="dat"]) .hat-nho,
body:not([data-man="dat"]) .thanh-muc { display: none !important; }

/* ---------- Đợt 2: dòng nhỏ "Hạt nếp của bạn" + thẻ hạt trên cuống vé ---------- */
.hat-nho {
  display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 10px 12px 0; padding: 8px 12px;
  border: 2px solid var(--chu); border-radius: 14px; background: var(--chinh-nhat); color: var(--chinh-dam);
  font-weight: 800; font-size: 14px; text-decoration: none;
}
.hat-nho img { flex: none; width: 28px; height: 28px; }
.hat-nho span { flex: 1; min-width: 0; }
.hat-nho .bt { width: 18px; height: 18px; }
.xong-hat { text-align: left; }
.cuong-ve .bao { text-align: left; }

/* ---------- Đợt 2: trang điểm danh ở quầy /diem-danh/<mã> ---------- */
body[data-man="diem-danh"] main { padding-bottom: 32px; }
.dd-don { margin-top: 4px; }
.dd-trang-thai { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--chinh-nhat); color: var(--chinh-dam); font-weight: 800; }
.dd-tt { margin-top: 12px; }
.dd-khoi { margin: 12px 12px 0; padding: 16px; border: 3px solid var(--chu); border-radius: 20px; box-shadow: var(--bong); }
.dd-tieu { font: 800 22px/1.1 var(--font-to); color: var(--chinh-dam); }
.dd-luat { margin-top: 6px; color: var(--chu-phu); font-size: 14px; }
.dd-gui { margin-top: 16px; }
.dd-han { margin-top: 12px; color: var(--chu-phu); font-size: 14px; text-align: center; }
.dd-han b { color: var(--chu); font-variant-numeric: tabular-nums; }
.dd-ket-qua { margin: 12px 12px 0; }
.dd-bao-xanh { padding: 12px 14px; border: 3px solid var(--chu); border-radius: 16px; background: var(--chinh-nhat); color: var(--chinh-dam); font: 800 17px/1.3 var(--font-to); }
.dd-xem-ve { margin-top: 16px; }
.dd-loi-chu { font-weight: 800; font-size: 16px; }
.khoi-loi .nut { margin-top: 14px; }

/* ---------- Đợt 2: trang chính sách dữ liệu ---------- */
.cs { padding-bottom: 32px; }
.cs-the { margin: 4px 12px 0; padding: 16px 16px 18px; border: 3px solid var(--chu); border-radius: 20px; box-shadow: var(--bong); font-size: 16px; }
.cs-the h2 { margin-top: 18px; font: 800 20px/1.2 var(--font-to); color: var(--chinh-dam); }
.cs-the p, .cs-the ul { margin-top: 6px; }
.cs-the ul { padding-left: 22px; }
.cs-the li { margin-top: 4px; }
.cs-mo { padding: 10px 12px; border-radius: 12px; background: var(--chinh-nhat); }
.cs-chan { margin-top: 18px !important; color: var(--chu-phu); font-size: 14px; }
.cs-link { text-align: center; margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}