/* Délice Order — màn khách quét QR tại bàn.
   Dựng từ bản thiết kế "Délice Order" (prototype artifact): đã bỏ khung điện
   thoại + bảng duyệt, gỡ style inline thành class, giữ nguyên hợp đồng DOM mà
   order.js bám vào (xem DESIGN-BRIEF §6).

   Font tự host trong fonts/ — KHÔNG gọi Google Fonts lúc chạy (wifi quán chậm,
   chờ font là khách nhìn màn trắng). Chữ Hoa/Hàn dùng font hệ thống: iOS có sẵn
   PingFang SC / Apple SD Gothic Neo, Android có sẵn Noto CJK. Tự host thêm
   7.7MB Noto để thay thứ máy nào cũng có là không đáng — DESIGN-BRIEF §2 cho
   phép rõ "hoặc font hệ thống". */

@import url("fonts.css");

:root {
  --maroon: #821518;
  --coral:  #D44531;
  --gold:   #E9AB22;
  --cream:  #F5F1E8;
  --ink:    #1a1310;

  --card:   #FCFAF4;
  --line:   #e6dcc7;
  --line-2: #ece3d2;
  --edge:   #dfd4bf;
  /* #5f554d trên nền card = 6.95:1, đạt AA. Bản thô cũ dùng #7a6f68 = 4.33:1,
     trượt. KHÔNG nhạt hơn mức này — app dùng trong quán tối. */
  --muted:  #5f554d;
  --muted-2:#4a4139;
  --label:  #7a6f60;

  --sans:  "Archivo", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB",
           "Microsoft YaHei", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  /* Bodoni Moda CHỈ dùng cho chữ lấy từ Square (tên món, tên nhóm) — thứ luôn
     là tiếng Anh. Google Fonts không phát hành mảnh tiếng Việt cho Bodoni: nó
     chỉ có latin + latin-ext, thiếu hẳn khối U+1EA0–1EF9 (ạ ả ấ ầ ậ ắ ế ệ ỏ ủ…).
     Đặt chữ đã dịch vào Bodoni là mỗi dấu tiếng Việt rơi về Georgia, lệch font
     ngay giữa một dòng. Bản thiết kế không lộ lỗi này vì prototype nạp toàn bộ
     Google Fonts và máy designer có sẵn serif hệ thống để đỡ. */
  --serif: "Bodoni Moda", Georgia, serif;
  /* Tiêu đề là chữ GIAO DIỆN (đã dịch) dùng Cormorant Garamond: cũng là font
     thương hiệu, và có mảnh tiếng Việt. Chỉ có 400/500, không có 600. */
  --serif-ui: "Cormorant Garamond", Georgia, serif;
  --deco:  "Cormorant Garamond", Georgia, serif;

  --topbar: 54px;
  --gnav:   50px;
}

/* Bẫy #1 trong DESIGN-BRIEF §6.3 — KHÔNG được bỏ.
   Rule class có display:flex/grid thắng [hidden]{display:none} mặc định của
   trình duyệt → sheet đã ẩn vẫn hiện đè lên màn. Đã trả giá bằng bug thật. */
[hidden] { display: none !important; }

/* CỐ Ý không đặt scroll-behavior: smooth (bẫy #2). Có trình duyệt nhận thuộc
   tính rồi lặng lẽ không cuộn gì cả → bấm nút nhóm món chết cứng. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { background: var(--cream); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  /* Tiếng Việt có dấu hai tầng (ề, ộ, ữ) — dưới 1.35 là chồng dấu. */
  line-height: 1.45;
  overflow-x: hidden;
}

img { max-width: 100%; }

/* ---------------------------------------------------------------- thanh trên */
/* Đổi chiều cao 2 thanh dính là phải sửa 3 con số bên order.js: --topbar,
   SCROLL_OFFSET (= topbar + gnav) và SPY_LINE. Xem §6.3 bẫy #3. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--topbar);
  background: var(--maroon);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px 0 14px;
}
.topbar-logo { height: 20px; width: auto; display: block; flex: none; }
.topbar-gap { flex: 1; }

/* Chữ DÉL★CE gõ tay — chỉ còn màn /staff dùng (staff.html cũng nạp order.css).
   Màn khách đã chuyển sang logo ảnh thật; đừng xoá hai rule này, xoá là thanh
   trên của /staff mất chữ. /staff nằm ngoài phạm vi thiết kế lần này. */
.brand {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .06em;
  color: var(--cream);
}
.brand .star { color: var(--gold); }

.table-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(245, 241, 232, .14);
  color: var(--cream);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.table-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* Chip "đã gọi" — lối mở lại màn xác nhận bất cứ lúc nào (§4.5 đề xuất thêm). */
.order-chip {
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(245, 241, 232, .35);
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* ------------------------------------------------------------ thanh nhóm món */
.gnav {
  position: sticky;
  top: var(--topbar);
  z-index: 30;
  height: var(--gnav);
  background: var(--cream);
  border-bottom: 1px solid #e3d9c5;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
}
.gnav::-webkit-scrollbar { display: none; }

.gnav button {
  flex: none;
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--edge);
  background: transparent;
  color: var(--muted-2);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
/* .on = nhóm đang xem, và cũng là biến thể đang chọn — §6.2 */
.gnav button.on {
  border-color: var(--maroon);
  background: var(--maroon);
  color: var(--cream);
}

/* ------------------------------------------------------------------ thực đơn */
.menu { padding: 6px 14px 120px; }

.group-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 2px 12px;
  /* Tiêu đề nhóm màu maroon (9.0:1). Bản thô cũ dùng coral = 3.97:1, trượt AA.
     Coral chỉ còn dùng làm chấm trang trí, không làm chữ. Xem §3. */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
  color: var(--maroon);
}
.group-title::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}
.group-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e3d9c5;
}

.card {
  width: 100%;
  display: flex;
  align-items: stretch;
  gap: 13px;
  text-align: left;
  margin: 0 0 12px;
  padding: 13px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  font-family: inherit;
  cursor: pointer;
}
.card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.card-name {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.24;
  color: var(--ink);
  text-wrap: pretty;
}
.card-name > span:first-child { min-width: 0; }

.card-desc {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--muted);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-spacer { flex: 1; }

.card-price {
  margin-top: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--maroon);
}

.tag18 {
  flex: none;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.tag-sold {
  flex: none;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 6px;
  background: #9a9088;
  color: #fff;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .3px;
}
/* Món hết hàng: xám mờ, không bấm được (nhưng vẫn thấy để khách biết món có thật) */
.card.sold { opacity: .5; cursor: default; }
.card.sold .card-art { filter: grayscale(1); }

.card-art { flex: none; width: 88px; }
.card-art img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 13px;
  display: block;
  background: #efe7d6;
}

/* Món không ảnh: ô chữ lồng — phải trông CỐ Ý, không như thiếu sót. Đây là
   ràng buộc nặng nhất (§5), và nặng hơn brief tưởng: catalog Square hiện KHÔNG
   món nào có ảnh, mọi thẻ đều rơi vào nhánh này nếu menu-local.json trống. */
.monogram {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(150deg, #f6efe1, #efe4cf);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.monogram span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 46px;
  color: var(--maroon);
  opacity: .16;
  line-height: 1;
}
.monogram::after {
  content: "★";
  position: absolute;
  top: 8px;
  right: 9px;
  color: var(--gold);
  font-size: 12px;
}

/* ------------------------------------------------ trạng thái tải / lỗi / rỗng */
.status { padding: 70px 34px; text-align: center; }
.status::before {
  content: "✦";
  display: block;
  font-family: var(--deco);
  font-size: 44px;
  line-height: 1;
  color: var(--maroon);
  opacity: .5;
}
/* .loading và .error-box là class order.js sinh lúc chạy — §6.2 */
.loading,
.error-box {
  margin: 20px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted-2);
  font-weight: 500;
  text-wrap: pretty;
}

/* ------------------------------------------------------------ thanh giỏ dính */
.cartbar {
  position: fixed;
  left: 12px;
  right: 12px;
  /* iPhone có thanh home đè lên — §6.3 bẫy #4 */
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 50;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 16px;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--sans);
  cursor: pointer;
  box-shadow: 0 14px 30px -8px rgba(130, 21, 24, .55);
}
.cartbar-count {
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cartbar-label { font-weight: 600; font-size: 15px; }
.cartbar-gap { flex: 1; }
.cartbar-total { font-weight: 700; font-size: 16px; padding-right: 12px; }

/* ----------------------------------------------------------- bộ chọn ngôn ngữ */
.langwrap { position: fixed; inset: 0; z-index: 70; }
.langwrap .sheet-backdrop { background: rgba(26, 19, 16, .28); animation: fadeIn .18s ease; }
.langmenu {
  position: absolute;
  top: 60px;
  right: 12px;
  width: 214px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 24px 50px -16px rgba(26, 19, 16, .5);
  animation: sheetUp .22s ease;
}
.langmenu h3 {
  margin: 0;
  padding: 9px 12px 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a7d6d;
}
.langmenu button {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 11px 12px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.langmenu button.on { background: #f2e7d0; }
.langmenu .gap { flex: 1; }
.langmenu .tick { color: var(--maroon); font-weight: 700; font-size: 14px; visibility: hidden; }
.langmenu button.on .tick { visibility: visible; }

/* ---------------------------------------------------------------------- sheet */
.sheet { position: fixed; inset: 0; z-index: 75; }
#cartSheet { z-index: 76; }
#tabSheet  { z-index: 77; }
/* Form tên+SĐT mở TỪ giỏ nên phải nằm trên giỏ. */
#infoSheet { z-index: 80; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 19, 16, .5);
  animation: fadeIn .2s ease;
}
.sheet-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 22px 22px 0 0;
  animation: sheetUp .3s cubic-bezier(.2, .8, .2, 1);
}
.sheet-scroll { overflow-y: auto; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); }
.sheet-xrow {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 12px 0 4px;
  background: var(--cream);
}
.sheet-x {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--line-2);
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  flex: none;
}

@keyframes sheetUp { from { transform: translateY(101%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sheet-body, .langmenu, .sheet-backdrop { animation: none; }
}

/* -------------------------------------------------------- sheet chi tiết món */
.sheet-img {
  width: 100%;
  height: 196px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  background: #efe7d6;
  margin-bottom: 4px;
}
.sheet-mono {
  position: relative;
  width: 100%;
  height: 150px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(150deg, #f6efe1, #efe4cf);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.sheet-mono span {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 82px;
  color: var(--maroon);
  opacity: .15;
  line-height: 1;
}
.sheet-mono::after {
  content: "★";
  position: absolute;
  top: 14px;
  right: 16px;
  color: var(--gold);
  font-size: 18px;
}

.si-head { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; }
.si-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.18;
  color: var(--ink);
  text-wrap: pretty;
}
.si-head .tag18 { margin-top: 6px; padding: 2px 7px; font-size: 11px; }

.si-desc { margin: 9px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }

.variations { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.variations button {
  flex: none;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1.5px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.variations button.on { border-color: var(--maroon); background: var(--maroon); color: var(--cream); }

.field { display: block; margin-top: 18px; }
.field span { display: block; font-size: 13px; font-weight: 600; color: var(--muted-2); margin-bottom: 7px; }
.field input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--card);
  font-family: var(--sans);
  /* 16px là ngưỡng: nhỏ hơn thì iOS Safari tự phóng to màn khi gõ. */
  font-size: 16px;
  color: var(--ink);
}

.idcheck {
  display: flex;
  gap: 9px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbeecb;
  border: 1px solid #ecd58f;
  font-size: 13.5px;
  line-height: 1.45;
  color: #5a4409;
  text-wrap: pretty;
}
.idcheck::before { content: "⚠️"; flex: none; }

.qtyrow { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.qtybtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.qtyval { min-width: 34px; text-align: center; font-size: 22px; font-weight: 600; color: var(--ink); }

.primary {
  width: 100%;
  height: 54px;
  border: 0;
  border-radius: 14px;
  background: var(--maroon);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.primary[disabled] { background: #a86b6d; cursor: default; }
#siAdd { margin-top: 20px; }
.primary.ghost { height: 52px; border: 1.5px solid var(--maroon); background: transparent; color: var(--maroon); }

/* ---------------------------------------------------------- giỏ & màn đã gọi */
.sheet-head { display: flex; align-items: center; gap: 10px; padding: 20px 20px 6px; }
/* Tiêu đề giỏ là chuỗi đã dịch ("Giỏ của bàn L3" / "{t} 桌的点单") → --serif-ui.
   Cormorant nhỏ hơn Bodoni ở cùng cỡ nên bù thêm 3px. */
.sheet-head h2 {
  margin: 0;
  font-family: var(--serif-ui);
  font-weight: 500;
  font-size: 25px;
  color: var(--ink);
  text-wrap: pretty;
}
.sheet-head .gap { flex: 1; }

.sheet-list { overflow-y: auto; padding: 6px 20px 4px; }

.line { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.line-qty {
  flex: none;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 8px;
  background: #efe4cf;
  color: var(--maroon);
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.line-main { flex: 1; min-width: 0; }
.line-name { font-size: 15px; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.line-note { margin-top: 3px; font-size: 13px; color: var(--label); font-style: italic; }
.line-note:empty { display: none; }
.line-del {
  margin-top: 6px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: #A62A17;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.line-price { flex: none; font-size: 15px; font-weight: 600; color: var(--ink); }

.sheet-foot {
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid #e3d9c5;
  background: var(--cream);
}
.totalrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.totalrow span { font-size: 15px; color: var(--muted-2); }
.totalrow strong { font-size: 21px; font-weight: 700; color: var(--maroon); }

.hint { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--label); text-wrap: pretty; }
.error {
  margin: 0 0 12px;
  padding: 10px 13px;
  border-radius: 11px;
  background: #f7dcd6;
  border: 1px solid #e6a99d;
  font-size: 13.5px;
  color: #7a1d12;
  text-wrap: pretty;
}

.tab-top { padding: 26px 22px 8px; text-align: center; }
.tab-tick {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--maroon);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
/* "Bếp đã nhận món của bạn" — chữ đã dịch, phải dùng --serif-ui (xem ghi chú
   ở :root). Đây là câu tiếng Việt lắm dấu nhất trong app. */
.tab-top h2 {
  margin: 0;
  font-family: var(--serif-ui);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.25;
  color: var(--maroon);
  text-wrap: pretty;
}
.tab-top .hint { margin: 8px auto 0; max-width: 280px; font-size: 14.5px; color: var(--muted-2); }

#tabList { overflow-y: auto; padding: 8px 22px 4px; margin-top: 6px; border-top: 1px solid var(--line); }
.tab-label {
  padding: 14px 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8a7d6d;
}
#tabList .line { padding: 12px 0; border-bottom-color: var(--line-2); }

/* ------------------------------------------------------------------ vùng chạm */
/* §6.4 đòi vùng bấm tối thiểu 44×44 (khách đang cầm đũa), nhưng bản thiết kế để
   chip cao 30px và nút nhóm món 36px. Nới vùng chạm bằng lớp phủ trong suốt —
   hình thức giữ nguyên, ngón tay có đủ 44px. */
.lang-btn,
.order-chip,
.gnav button,
.line-del { position: relative; }

.lang-btn::after,
.order-chip::after,
.gnav button::after,
.line-del::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* ------------------------------------------------------------- màn hẹp 320px */
@media (max-width: 359px) {
  .menu { padding-left: 10px; padding-right: 10px; }
  .card { padding: 11px; gap: 10px; }
  .card-art { width: 72px; }
  .card-art img, .monogram { width: 72px; height: 72px; }
  .monogram span { font-size: 38px; }
  .card-name { font-size: 17px; }
  .group-title { font-size: 21px; }
  .topbar { gap: 7px; padding: 0 9px 0 11px; }
  .table-chip, .lang-btn, .order-chip { padding: 0 9px; font-size: 12.5px; }
  .cartbar { padding-left: 14px; }
}

/* Chips dị ứng / khẩu vị (chọn nhiều) — trong sheet nhập tên/SĐT */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chips .chip {
  font: inherit; font-size: 15px; line-height: 1;
  padding: 10px 14px; border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line); transition: all .12s ease;
  min-height: 40px;
}
.chips .chip.on {
  background: var(--maroon); color: #fff; border-color: var(--maroon);
  font-weight: 600;
}
.chips .chip:active { transform: scale(.96); }

/* Tip trên màn "check order" (tab sheet) — kín đáo: chỉ "＋ Add tip", bấm mới xổ */
.tip-box { margin-bottom: 10px; }
.tip-toggle {
  font: inherit; font-size: 14px; font-weight: 600; padding: 4px 2px;
  background: none; border: 0; color: var(--maroon); cursor: pointer;
}
.tip-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tip-b {
  font: inherit; font-size: 15px; padding: 9px 14px; border-radius: 999px;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--line);
  cursor: pointer; min-height: 40px;
}
.tip-b.on { background: var(--maroon); color: #fff; border-color: var(--maroon); font-weight: 600; }
.tip-b:active { transform: scale(.96); }

/* Link review — NẰM TRONG khu "Add tip" (xổ ra cùng các nút %), chiếm trọn 1 dòng
   dưới các nút tip (tip-btns là flex-wrap nên cần flex-basis 100%). */
.review-link {
  flex-basis: 100%; display: block; margin: 4px 0 0; padding: 6px 2px;
  font-size: 14px; font-weight: 600; color: var(--maroon);
  text-decoration: none;
}
.review-link:active { opacity: .6; }