/* Dan D Pak BYOD · Table Ordering — production stylesheet.
   Design tokens ported from the approved Claude Design project
   ("Dan D Pak BYOD" / "Dan D Pak BYOD Screens"). Self-hosted font only
   (CSP: default-src 'self') — no external font/script/icon CDN. */

@font-face { font-family:'Be Vietnam Pro'; src:url('./fonts/BeVietnamPro-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('./fonts/BeVietnamPro-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('./fonts/BeVietnamPro-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('./fonts/BeVietnamPro-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Be Vietnam Pro'; src:url('./fonts/BeVietnamPro-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --surface-base:#FDFAF5; --surface-card:#FFFFFF; --surface-image:#F4EEE6;
  --border:#ECE7DF; --border-strong:#DCD4C8; --border-input:#E4DDD2;
  --accent:#D81F26; --accent-hover:#B3181E;
  --note-fg:#9A6B00; --note-bg:rgba(247,183,51,.16); --note-bd:rgba(247,183,51,.45);
  --info:#0891B2; --info-fg:#0A6E85; --info-bg:rgba(8,145,178,.08); --info-bd:rgba(8,145,178,.3);
  --done-fg:#15803D; --done-bg:rgba(22,163,74,.1); --done-bd:rgba(22,163,74,.3);
  --preparing-fg:#9A3412; --preparing-bg:rgba(234,88,12,.12); --preparing-bd:rgba(234,88,12,.35);
  --served-bg:rgba(26,34,48,.07); --served-bd:rgba(26,34,48,.16);
  --cancelled-fg:#4B5563; --cancelled-bg:rgba(107,114,128,.1); --cancelled-bd:rgba(107,114,128,.28);
  --danger-border:#F3D4D5;
  --ink:#1A2230; --ink-muted:#677084; --ink-faint:#9AA3B2; --ink-fainter:#A8A096;
  --r-chip:9px; --r-field:14px; --r-card:16px; --r-sheet:24px;
  --sp-1:4px; --sp-2:6px; --sp-3:8px; --sp-4:10px; --sp-5:12px; --sp-6:14px; --sp-7:18px; --sp-8:22px;
  --shadow-card:0 1px 2px rgba(26,34,48,.04);
  --shadow-bar:0 -6px 20px -12px rgba(26,34,48,.3);
  --shadow-cta:0 8px 18px -10px rgba(216,31,38,.55);
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
  --visual-t:0px; --visual-r:0px; --visual-b:0px; --visual-l:0px; --viewport-h:100dvh; --app-header-h:0px;
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ min-height:100%; }
html{ overflow-x:hidden; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0; background:var(--surface-base); color:var(--ink);
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:contain;
  padding-left:max(var(--safe-l),var(--visual-l));
  padding-right:max(var(--safe-r),var(--visual-r));
  -webkit-user-select:none; user-select:none;
}
input,textarea{ -webkit-user-select:text; user-select:text; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
button:disabled{ cursor:not-allowed; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2.5px solid var(--info); outline-offset:2px; border-radius:6px; }

.hidden{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- offline banner ---------- */
#offline-banner{
  position:fixed; top:var(--visual-t); left:max(var(--safe-l),var(--visual-l)); right:max(var(--safe-r),var(--visual-r)); z-index:60;
  padding:calc(8px + var(--safe-t)) 14px 8px;
  background:#7B3F00; color:#fff; text-align:center; font:600 12.5px/1.4 'Be Vietnam Pro',sans-serif;
}

/* ---------- app shell ---------- */
#app{ width:100%; max-width:680px; margin:0 auto; min-height:100vh; min-height:var(--viewport-h); display:flex; flex-direction:column; background:var(--surface-base); position:relative; }
body.has-offline #app{ padding-top:40px; }
body.tablet-portrait #app,body.desktop #app{ max-width:680px; box-shadow:0 0 0 1px var(--border); }
body.desktop #app{ max-width:720px; }

header#app-header{ flex:none; position:sticky; top:0; z-index:20; background:#fff; box-shadow:0 1px 0 rgba(26,34,48,.07); padding-top:var(--safe-t); }
.header-row{ height:56px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:8px; padding:0 12px; }
.icon-btn{ width:44px; height:44px; border-radius:22px; border:1px solid var(--border); background:var(--surface-base); display:flex; align-items:center; justify-content:center; padding:0; overflow:hidden; transition:transform .1s; }
.icon-btn:active{ transform:scale(.95); }
.icon-btn svg{ display:block; }
.lang-flag{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; flex:none; }
/* Nút tròn header (44px) — cờ phải LẤP ĐẦY khung, không lơ lửng bé tí giữa
   vòng tròn to; chỉ chừa đúng viền 1px của .icon-btn. */
.icon-btn .lang-flag{ width:100%; height:100%; border-radius:0; }
.lang-flag-lg{ width:36px; height:36px; }
.brand-logo{ height:32px; width:auto; display:block; }
.header-staff-btn{
  min-height:44px; padding:8px 14px; border-radius:22px; border:1px solid var(--border); background:#fff; color:var(--ink);
  display:flex; align-items:center; gap:7px; white-space:nowrap; transition:transform .1s,opacity .15s;
}
.header-staff-btn span{ font:700 12.5px/1 'Be Vietnam Pro',sans-serif; }
.header-staff-btn:active{ transform:scale(.96); }
.header-staff-btn:disabled{ opacity:.55; }
.cart-badge{
  position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px;
  background:var(--accent); color:#fff; font:800 11px/20px 'Be Vietnam Pro',sans-serif; text-align:center; border:2px solid #fff;
}
.header-info{ display:flex; align-items:center; gap:8px; padding:0 14px 9px; flex-wrap:wrap; }
.header-info .crumb{ display:inline-flex; align-items:center; gap:5px; font:600 11.5px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.header-info .crumb b{ color:var(--ink); font-weight:800; }
.header-info .sep{ width:1px; height:11px; background:var(--border-input); }
.status-pill{ display:inline-flex; align-items:center; gap:4px; margin-left:auto; padding:3px 8px; border-radius:9px; font:700 10.5px/1.2 'Be Vietnam Pro',sans-serif; }
.status-pill.serving{ background:var(--info-bg); color:var(--info-fg); }
.status-pill.free{ background:var(--served-bg); color:var(--ink-muted); }
.status-dot{ width:6px; height:6px; border-radius:3px; background:var(--info); }
.status-dot.pulse{ animation:ddPulse 2s infinite; }

main#screens{ flex:1; min-height:0; position:relative; }
/* Each screen must be AT LEAST as tall as the visible area (main's box, which
   flexbox already sizes to exactly fill the viewport under the header) — a
   plain block child shrinks to its own content by default, so short content
   (empty cart, few option groups) left sticky footers stuck mid-page with a
   blank gap below instead of the true screen bottom. min-height:100% (not a
   fixed height) still lets long content grow/scroll normally. */
.screen{ padding:0; min-height:100%; }

/* ---------- welcome ---------- */
#screen-welcome{ display:flex; flex-direction:column; padding-bottom:0; }
.welcome-top{ padding:calc(10px + var(--safe-t)) 14px 0; display:flex; justify-content:flex-end; }
.welcome-lang{ height:40px; padding:0 14px; border-radius:20px; border:1px solid var(--border); background:#fff; display:flex; align-items:center; gap:7px; }
.welcome-lang span{ font:700 12.5px/1 'Be Vietnam Pro',sans-serif; }
.welcome-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 26px 0; text-align:center; }
.welcome-logo{ width:min(150px,55vw); height:auto; margin:0 0 18px; }
.welcome-title{ font:800 25px/1.24 'Be Vietnam Pro',sans-serif; color:var(--ink); text-wrap:pretty; max-width:320px; }
.welcome-table-chip{ margin:12px 0 0; display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:14px; background:#fff; border:1px solid var(--border); font:700 13px/1.2 'Be Vietnam Pro',sans-serif; }
.welcome-note{ margin:22px 0 0; padding:12px 14px; border-radius:14px; background:var(--note-bg); display:flex; gap:9px; align-items:flex-start; text-align:left; max-width:340px; }
.welcome-note span.text{ font:500 12.5px/1.5 'Be Vietnam Pro',sans-serif; color:var(--note-fg); text-wrap:pretty; }
.welcome-actions{ padding:20px 20px calc(26px + var(--safe-b)); display:flex; flex-direction:column; gap:10px; width:100%; max-width:400px; margin:0 auto; }
.member-checkin{ padding:13px; border:1px solid var(--border); border-radius:16px; background:#fff; text-align:left; }
.member-row{ display:flex; gap:8px; }
.member-row input{ min-width:0; flex:1; height:44px; border:1px solid var(--border-input); border-radius:12px; padding:0 12px; font:600 14px/1 'Be Vietnam Pro',sans-serif; }
.member-active{ min-height:46px; padding:0 14px; border-radius:14px; background:var(--served-bg); color:var(--served-fg); display:flex; align-items:center; justify-content:center; gap:8px; font:700 12.5px/1.35 'Be Vietnam Pro',sans-serif; }

/* ---------- buttons ---------- */
.btn{ border:none; border-radius:16px; font:800 14.5px/1 'Be Vietnam Pro',sans-serif; display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .1s,opacity .15s; }
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-cta); }
.btn-primary:disabled{ background:#F1EDE6; color:#B9B1A5; box-shadow:none; }
.btn-primary:hover:not(:disabled){ background:var(--accent-hover); }
.btn-secondary{ background:#fff; border:1px solid var(--border-strong); color:var(--ink); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-lg{ height:54px; font-size:16px; }
.btn-md{ height:50px; }
.btn-sm{ height:44px; padding:0 16px; font-size:13px; }

/* ---------- menu screen ---------- */
.menu-banner{ margin:12px 14px 0; position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--surface-image); height:132px; }
.menu-banner-track{ display:flex; height:100%; transition:transform .55s cubic-bezier(.4,0,.2,1); }
.menu-banner-slide{ flex:none; height:100%; }
.menu-banner-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.menu-banner-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; align-items:center; justify-content:center; gap:5px; pointer-events:none; }
.menu-banner-dots i{ width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.55); transition:all .3s; }
.menu-banner-dots i.active{ width:18px; background:#fff; }
.menu-cats{ position:sticky; top:var(--app-header-h); z-index:19; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:14px 14px 10px; background:#fff; box-shadow:0 1px 0 rgba(26,34,48,.07); }
.menu-cats::-webkit-scrollbar{ display:none; }
.menu-cats-row{ display:flex; gap:8px; width:max-content; }
.chip-cat{ height:38px; padding:0 15px; border-radius:19px; border:1px solid var(--border-input); background:#fff; color:var(--ink); font:700 13px/1 'Be Vietnam Pro',sans-serif; white-space:nowrap; flex:none; }
.chip-cat.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.menu-heading{ padding:12px 14px 0; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.menu-heading .title{ font:800 17px/1.2 'Be Vietnam Pro',sans-serif; }
.menu-heading .count{ font:500 11.5px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); flex:none; }
.menu-grid{ padding:12px 14px 18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.menu-backtop{ display:flex; justify-content:center; padding:2px 14px 14px; }
.menu-backtop-btn{ display:inline-flex; align-items:center; gap:7px; height:42px; padding:0 20px; border-radius:21px; border:1px solid var(--border-input); background:#fff; color:var(--ink); font:700 13px/1 'Be Vietnam Pro',sans-serif; box-shadow:var(--shadow-card); }
.menu-backtop-btn svg{ flex:none; }
.featured-content{ padding:7px 0 14px; }
.featured-section{ padding:13px 0 5px; }
.featured-section h2{ margin:0 14px 11px; font:800 18px/1.25 'Be Vietnam Pro',sans-serif; }
.reorder-section{ padding:13px 14px 5px; }
.reorder-card{ padding:16px; border:1px solid rgba(216,31,38,.18); border-radius:20px; background:linear-gradient(135deg,#fff 0,#fff8f5 100%); box-shadow:var(--shadow-card); }
.reorder-copy h2{ margin:0 0 5px; font:800 18px/1.25 'Be Vietnam Pro',sans-serif; }
.reorder-copy p{ margin:0; color:var(--ink-muted); font:500 12px/1.5 'Be Vietnam Pro',sans-serif; }
.reorder-list{ display:grid; gap:6px; margin:13px 0; padding:0; list-style:none; }
.reorder-list li{ display:flex; justify-content:space-between; gap:10px; color:var(--ink); font:650 12.5px/1.35 'Be Vietnam Pro',sans-serif; }
.reorder-list li span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reorder-list li b{ flex:none; color:var(--ink-muted); }
.reorder-button{ width:100%; }
.featured-section.flash{ background:linear-gradient(180deg,#FFF3E8 0,rgba(255,243,232,0) 100%); }
.featured-strip{ display:flex; gap:11px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 14px 9px; }
.featured-strip::-webkit-scrollbar{ display:none; }
.featured-card{ flex:0 0 174px; scroll-snap-align:start; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:#fff; padding:0; text-align:left; box-shadow:var(--shadow-card); }
.featured-photo{ height:126px; background:var(--surface-image); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.featured-photo img{ width:100%; height:100%; object-fit:cover; }
.featured-info{ min-width:0; padding:10px 11px 12px; }
.featured-name{ min-height:36px; font:750 13.5px/1.35 'Be Vietnam Pro',sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.featured-meta{ min-height:18px; margin-top:4px; color:#C56B13; font:600 10.5px/1.3 'Be Vietnam Pro',sans-serif; display:flex; align-items:center; gap:3px; }
.featured-price{ margin-top:6px; color:var(--accent); font:800 14px/1 'Be Vietnam Pro',sans-serif; }
.featured-vertical{ display:flex; flex-direction:column; gap:12px; padding:0 14px 18px; }
.featured-row{ width:100%; min-height:158px; display:grid; grid-template-columns:minmax(0,56%) minmax(120px,44%); overflow:hidden; border:1px solid var(--border); border-radius:20px; background:#fff; padding:0; text-align:left; box-shadow:var(--shadow-card); }
.featured-row-info{ min-width:0; padding:18px 14px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.featured-row-name{ font:750 16px/1.35 'Be Vietnam Pro',sans-serif; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.featured-row-arrow{ width:42px; height:30px; margin-top:13px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; }
.featured-row-photo{ min-width:0; min-height:158px; background:var(--surface-image); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.featured-row-photo img{ width:100%; height:100%; object-fit:cover; }
.featured-empty{ width:100%; padding:28px 12px; border:1px dashed var(--border-strong); border-radius:16px; color:var(--ink-fainter); text-align:center; font:600 12px/1.4 'Be Vietnam Pro',sans-serif; }
.menu-vat-note{ padding:4px 14px 18px; font:500 11px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-fainter); text-align:center; }
.menu-credit-note{ margin-top:3px; }
.menu-credit-note a{ color:inherit;text-decoration:underline;text-underline-offset:2px; }
.dish-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; text-align:left; display:flex; flex-direction:column; box-shadow:var(--shadow-card); padding:0; }
.dish-card:disabled{ opacity:.7; }
.dish-photo{ position:relative; width:100%; height:110px; background:var(--surface-image); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.dish-photo img{ width:100%; height:100%; object-fit:cover; }
.dish-photo .ph-icon{ font-size:34px; opacity:.55; }
.dish-soldout-badge{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(253,250,245,.72); font:800 12.5px/1 'Be Vietnam Pro',sans-serif; color:#6B7280; }
.dish-body{ padding:10px 11px 11px; display:flex; flex-direction:column; gap:3px; flex:1; }
.dish-name{ font:700 13.5px/1.35 'Be Vietnam Pro',sans-serif; color:var(--ink); text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dish-desc{ font:500 11px/1.35 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.dish-foot{ margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dish-price-col{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.dish-price{ font:800 14px/1 'Be Vietnam Pro',sans-serif; color:var(--accent); }
.dish-prep-time{ display:flex; align-items:center; gap:3px; font:600 10.5px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.dish-add{ width:30px; height:30px; border-radius:15px; background:rgba(216,31,38,.1); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.dish-add.disabled{ background:#F1EDE6; color:#B9B1A5; }
.menu-empty,.menu-loading{ grid-column:1/-1; text-align:center; padding:52px 20px; color:var(--ink-fainter); font:600 13px/1.5 'Be Vietnam Pro',sans-serif; }

.floating-bottom{ position:sticky; bottom:var(--visual-b); left:0; right:0; padding:10px 14px calc(18px + var(--safe-b)); background:linear-gradient(to top,rgba(253,250,245,.98) 62%,rgba(253,250,245,0)); z-index:8; display:flex; align-items:center; gap:10px; }
.pill-btn{ height:50px; border-radius:25px; border:1px solid rgba(26,34,48,.1); background:rgba(255,255,255,.94); backdrop-filter:blur(10px); box-shadow:0 4px 14px -6px rgba(26,34,48,.3); display:flex; align-items:center; }
.pill-btn.back{ width:50px; flex:none; justify-content:center; }
.search-bubble{ flex:1; min-width:0; gap:9px; padding:0 18px; }
.search-bubble span.q{ flex:1; min-width:0; font:500 13.5px/1 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.search-bubble span.q.filled{ color:var(--ink); }

/* ---------- detail screen ---------- */
#screen-detail{ padding-bottom:0; }
.detail-photo{ position:relative; width:100%; height:232px; background:var(--surface-image); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.detail-photo img{ width:100%; height:100%; object-fit:cover; }
.detail-photo .ph-icon{ font-size:56px; opacity:.5; }
.detail-back-btn{
  position:absolute; left:12px; top:calc(12px + var(--safe-t)); z-index:2; width:44px; height:44px; border-radius:22px; border:none;
  background:rgba(255,255,255,.92); backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 4px 14px -6px rgba(26,34,48,.4);
}
.detail-back-btn:active{ transform:scale(.94); }
.detail-head{ padding:16px 16px 0; }
.detail-title{ font:800 20px/1.3 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.detail-sub{ margin:3px 0 0; font:500 12.5px/1.45 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.detail-desc{ margin:10px 0 0; font:500 13px/1.6 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); text-wrap:pretty; }
.detail-price-row{ margin:14px 0 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.detail-price{ font:800 22px/1 'Be Vietnam Pro',sans-serif; color:var(--accent); }
.detail-vat-tag{ padding:4px 9px; border-radius:9px; background:#F3F0EA; font:600 11px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.detail-prep-time{ display:flex; align-items:center; gap:4px; font:600 11px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.detail-soldout-tag{ padding:4px 9px; border-radius:9px; background:var(--cancelled-bg); font:700 11px/1.2 'Be Vietnam Pro',sans-serif; color:var(--cancelled-fg); }

.opt-group{ margin:18px 0 0; padding:0 16px; }
.opt-group-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 9px; }
.opt-group-title{ font:800 14.5px/1.2 'Be Vietnam Pro',sans-serif; }
.opt-group-hint{ font:600 11px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); flex:none; }
.opt-group-hint.required{ color:var(--accent); }
.opt-list{ display:flex; flex-direction:column; gap:8px; }
.opt-row{ border:1.5px solid var(--border); background:#fff; border-radius:var(--r-field); overflow:hidden; }
.opt-row.picked{ border-color:var(--accent); background:rgba(216,31,38,.04); }
.opt-row.soldout{ opacity:.6; }
.opt-main{ min-height:52px; padding:10px 12px; display:flex; align-items:center; gap:11px; width:100%; background:none; border:none; text-align:left; }
.opt-dot{ width:22px; height:22px; border-radius:11px; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex:none; }
.opt-row.picked .opt-dot{ border-color:var(--accent); background:var(--accent); }
.opt-dot.square{ border-radius:6px; }
.opt-label{ flex:1; min-width:0; font:600 13.5px/1.35 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.opt-price{ font:800 12.5px/1 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); flex:none; }
.opt-row.picked .opt-price{ color:var(--accent); }
.opt-note-btn{ width:44px; height:44px; flex:none; border-radius:12px; border:1px solid var(--border-input); background:var(--surface-base); display:flex; align-items:center; justify-content:center; padding:0; }
.opt-note-btn.filled{ border-color:var(--note-bd); background:var(--note-bg); }
.opt-note-line{ padding:0 12px 10px 45px; display:flex; align-items:flex-start; gap:6px; }
.opt-note-line span{ font:600 11.5px/1.45 'Be Vietnam Pro',sans-serif; color:var(--note-fg); text-wrap:pretty; }
.combo-hint{ margin:18px 16px 0; padding:12px 13px; border-radius:14px; background:var(--info-bg); display:flex; gap:9px; align-items:flex-start; }
.combo-hint span{ font:500 12px/1.5 'Be Vietnam Pro',sans-serif; color:var(--info-fg); text-wrap:pretty; }

.detail-bottom{ position:sticky; bottom:var(--visual-b); z-index:8; background:#fff; border-top:1px solid var(--border); box-shadow:var(--shadow-bar); }
.detail-note-row{ padding:11px 14px; border-bottom:1px solid #F3EFE8; display:flex; align-items:center; gap:9px; width:100%; background:none; border-left:none; border-right:none; border-top:none; text-align:left; }
.detail-note-row span{ flex:1; min-width:0; font:500 13px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-note-row span.filled{ color:var(--ink); }
.detail-add-row{ padding:11px 14px calc(14px + var(--safe-b)); display:flex; flex-direction:column; gap:10px; }
.detail-add-top{ display:flex; align-items:center; gap:11px; }
.stepper{ flex:none; display:flex; align-items:center; border:1px solid var(--border-input); border-radius:13px; overflow:hidden; }
.stepper button{ width:38px; height:44px; border:none; background:var(--surface-base); display:flex; align-items:center; justify-content:center; padding:0; }
.stepper button:disabled{ opacity:.4; }
.stepper .qty{ min-width:34px; text-align:center; font:800 14.5px/1 'Be Vietnam Pro',sans-serif; }
.detail-total{ flex:1; min-width:0; }
.detail-total .lbl{ font:500 10.5px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.detail-total .val{ font:800 18px/1.25 'Be Vietnam Pro',sans-serif; color:var(--accent); }
.detail-add-btn{ width:100%; height:50px; }

/* ---------- cart screen ---------- */
#screen-cart{ padding-bottom:0; }
.cart-tabs{ position:sticky; top:0; z-index:6; background:var(--surface-base); padding:8px 14px 0; }
.cart-tabs-row{ display:flex; border-bottom:1px solid var(--border); }
.cart-tab{ flex:1; min-height:46px; padding:0 6px 10px; border:none; background:none; display:flex; align-items:center; justify-content:center; gap:7px; border-bottom:2.5px solid transparent; }
.cart-tab.active{ border-bottom-color:var(--accent); }
.cart-tab span.lbl{ font:800 13.5px/1.2 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.cart-tab.active span.lbl{ color:var(--ink); }
.cart-tab .count{ min-width:20px; height:20px; padding:0 5px; border-radius:10px; font:800 10.5px/20px 'Be Vietnam Pro',sans-serif; text-align:center; }
.cart-tab .count.draft{ background:var(--accent); color:#fff; }
.cart-tab .count.ordered{ background:#F7B733; color:#4A3200; }

.scope-list{ padding:12px 14px 0; display:flex; flex-direction:column; gap:8px; }
.scope-row{ min-height:48px; padding:10px 12px; border:1.5px solid var(--border); background:#fff; border-radius:var(--r-field); display:flex; align-items:center; gap:11px; width:100%; text-align:left; }
.scope-row.active{ border-color:var(--accent); background:rgba(216,31,38,.04); }
.scope-dot{ width:22px; height:22px; border-radius:11px; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex:none; }
.scope-row.active .scope-dot{ border-color:var(--accent); }
.scope-dot i{ width:11px; height:11px; border-radius:6px; }
.scope-row.active .scope-dot i{ background:var(--accent); }
.scope-label{ flex:1; font:700 13px/1.35 'Be Vietnam Pro',sans-serif; }
.scope-count{ min-width:22px; height:22px; padding:0 6px; border-radius:11px; font:800 11px/22px 'Be Vietnam Pro',sans-serif; text-align:center; background:#F1EDE6; color:var(--ink-fainter); }
.scope-count.has{ background:var(--done-bg); color:var(--done-fg); }

.cart-empty{ padding:52px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.cart-empty .title{ font:700 15px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.cart-empty .hint{ font:500 12.5px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-fainter); text-wrap:pretty; }

.cart-list{ padding:12px 14px 0; display:flex; flex-direction:column; gap:10px; }
.cart-row{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:11px; display:flex; gap:11px; }
.cart-thumb{ width:68px; height:68px; border-radius:12px; background:var(--surface-image); flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.cart-title-row{ display:flex; align-items:flex-start; gap:8px; }
.cart-title-row .name{ flex:1; font:700 13.5px/1.35 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.cart-title-row .amount{ font:800 13px/1.35 'Be Vietnam Pro',sans-serif; flex:none; }
.cart-options{ font:500 11.5px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); text-wrap:pretty; }
.cart-note{ display:flex; gap:5px; align-items:flex-start; }
.cart-note span{ font:600 11.5px/1.45 'Be Vietnam Pro',sans-serif; color:var(--note-fg); text-wrap:pretty; }
.cart-meta{ font:500 10.5px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-fainter); }
.cart-controls{ margin-top:4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cart-controls .btn-note{ min-height:44px; padding:0 12px; border:1px solid var(--border-input); border-radius:12px; background:#fff; font:700 11.5px/1 'Be Vietnam Pro',sans-serif; display:flex; align-items:center; gap:5px; }
.cart-controls .btn-remove{ width:44px; height:44px; margin-left:auto; border:1px solid var(--danger-border); border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; padding:0; }

.summary-card{ margin:14px 14px 0; background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:14px; }
.summary-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:5px 0; }
.summary-row.total{ padding:10px 0 2px; border-top:1px solid var(--border-input); margin-top:4px; }
.summary-row .lbl{ font:600 12.5px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.summary-row .val{ font:700 12.5px/1.5 'Be Vietnam Pro',sans-serif; }
.summary-row.total .lbl{ font:800 14px/1.4 'Be Vietnam Pro',sans-serif; color:var(--ink); }
.summary-row.total .val{ font:800 18px/1.3 'Be Vietnam Pro',sans-serif; color:var(--accent); }

.turn-group{ margin:0 0 14px; }
.turn-head{ display:flex; align-items:center; gap:8px; margin:0 0 9px; flex-wrap:wrap; padding:0 14px; }
.turn-badge{ padding:4px 9px; border-radius:9px; background:var(--ink); color:#fff; font:800 10.5px/1.3 'Be Vietnam Pro',sans-serif; }
.turn-time{ font:600 11.5px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.turn-device{ font:500 11.5px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.order-list{ padding:0 14px; display:flex; flex-direction:column; gap:9px; }
.order-row{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card); padding:11px; display:flex; gap:11px; }
.order-row.child{ margin-left:26px; background:var(--surface-base); }
.order-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.order-title-row{ display:flex; align-items:flex-start; gap:8px; }
.order-title-row .name{ flex:1; font:700 13.5px/1.35 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.order-title-row .amount{ font:800 13px/1.35 'Be Vietnam Pro',sans-serif; flex:none; }
.order-note{ font:600 11.5px/1.45 'Be Vietnam Pro',sans-serif; color:var(--note-fg); text-wrap:pretty; }
.order-reject{ font:600 11.5px/1.45 'Be Vietnam Pro',sans-serif; color:var(--cancelled-fg); text-wrap:pretty; }
.order-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
.order-qty{ font:600 11.5px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.status-chip{ display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:9px; font:800 10.5px/1.3 'Be Vietnam Pro',sans-serif; border:1px solid transparent; }
.ordered-empty{ padding:52px 30px; text-align:center; color:var(--ink-fainter); font:600 13px/1.5 'Be Vietnam Pro',sans-serif; }

.cart-bottom{ position:sticky; bottom:var(--visual-b); z-index:8; background:#fff; border-top:1px solid var(--border); padding:11px 14px calc(20px + var(--safe-b)); display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-bar); }
.cart-bottom .btn-secondary{ flex:none; height:50px; padding:0 16px; }
.cart-bottom .btn-primary,.cart-bottom .btn-dark{ flex:1; min-width:0; height:50px; }

/* Menu-screen-only cart shortcut (header cart was removed — this floating
   button is the only way back to the cart while browsing the grid). */
.menu-cart-btn{
  position:fixed; right:calc(14px + max(var(--safe-r),var(--visual-r))); bottom:calc(108px + var(--safe-b) + var(--visual-b)); z-index:30; width:48px; height:48px; border-radius:24px; border:none;
  background:var(--accent); display:flex; align-items:center; justify-content:center; padding:0;
  box-shadow:0 10px 22px -10px rgba(26,34,48,.8); transition:transform .1s;
}
.menu-cart-btn:active{ transform:scale(.94); }

/* ---------- payment / status banner (in-page, not a sheet) ---------- */
.pay-banner{ margin:12px 14px 0; padding:12px 14px; border-radius:14px; background:var(--note-bg); color:var(--note-fg); font:600 12.5px/1.5 'Be Vietnam Pro',sans-serif; }
.pay-banner.done{ background:var(--done-bg); color:var(--done-fg); }
.pay-banner.ack{ background:var(--info-bg); color:var(--info-fg); }

/* ---------- toast ---------- */
#toast{ position:fixed; left:calc(14px + max(var(--safe-l),var(--visual-l))); right:calc(14px + max(var(--safe-r),var(--visual-r))); bottom:calc(18px + var(--safe-b) + var(--visual-b)); z-index:70; max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:8px; pointer-events:none; }
.toast{
  background:var(--ink); border-radius:14px; padding:12px 14px; display:flex; align-items:center; gap:10px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6); animation:ddUp .22s ease-out; pointer-events:auto;
}
.toast .dot{ width:20px; height:20px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--done-fg); }
.toast.warn .dot{ background:#B45309; }
.toast.error .dot{ background:var(--accent); }
.toast span.msg{ flex:1; font:600 12.5px/1.45 'Be Vietnam Pro',sans-serif; color:#fff; text-wrap:pretty; }

/* ---------- sheets / dialogs ---------- */
#sheet-overlay{ position:fixed; inset:0; z-index:40; background:rgba(15,17,21,.42); animation:ddFade .18s; }
.sheet{
  position:fixed; left:max(var(--safe-l),var(--visual-l)); right:max(var(--safe-r),var(--visual-r)); bottom:var(--visual-b); z-index:41; background:#fff; border-radius:var(--r-sheet) var(--r-sheet) 0 0;
  padding:8px 0 calc(24px + var(--safe-b)); max-height:min(calc(var(--viewport-h) * .86),720px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  animation:ddSheet .26s cubic-bezier(.3,0,.2,1); max-width:680px; margin:0 auto;
}
.sheet-grip{ width:38px; height:4px; border-radius:2px; background:var(--border-input); margin:0 auto 12px; }
.sheet-title{ padding:0 20px 4px; font:800 17px/1.3 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.sheet-sub{ padding:0 20px 12px; font:500 12.5px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); text-wrap:pretty; }
.sheet-body{ padding:0 20px; }
.sheet-actions{ padding:14px 20px 0; display:flex; gap:10px; }
.sheet-actions .btn{ height:52px; }
.sheet-actions .btn-secondary{ flex:none; padding:0 18px; }
.sheet-actions .btn-primary,.sheet-actions .btn-dark{ flex:1; }
.sheet-icon{ width:52px; height:52px; border-radius:26px; display:flex; align-items:center; justify-content:center; margin:4px auto 12px; }
.sheet-center{ padding:0 22px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }

.lang-list{ padding:0 14px; display:flex; flex-direction:column; gap:6px; }
.lang-row{ min-height:52px; padding:10px 14px; border-radius:14px; background:var(--surface-base); display:flex; align-items:center; gap:12px; width:100%; text-align:left; border:none; }
.lang-row.active{ background:rgba(216,31,38,.05); }
.lang-name{ flex:1; font:700 14px/1.3 'Be Vietnam Pro',sans-serif; }

.note-textarea{ width:100%; border:1.5px solid var(--border-input); border-radius:14px; padding:12px; font:500 13.5px/1.5 'Be Vietnam Pro',sans-serif; background:var(--surface-base); resize:none; outline:none; }
.note-chips{ margin:10px 0 0; overflow-x:auto; scrollbar-width:none; }
.note-chips::-webkit-scrollbar{ display:none; }
.note-chips-row{ display:flex; gap:7px; width:max-content; }
.note-chip{ height:36px; padding:0 13px; border-radius:18px; border:1px solid var(--border-input); background:var(--surface-base); font:600 12.5px/1 'Be Vietnam Pro',sans-serif; white-space:nowrap; }

.confirm-lines{ margin:14px 16px 0; padding:12px 13px; border-radius:14px; background:var(--surface-base); border:1px solid var(--border); display:flex; flex-direction:column; gap:7px; }
.confirm-line-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.confirm-line-row .lbl{ font:600 12.5px/1.4 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); text-wrap:pretty; }
.confirm-line-row .val{ font:800 12.5px/1.4 'Be Vietnam Pro',sans-serif; flex:none; }
.skip-list{ margin:10px 16px 0; padding:10px 12px; border-radius:12px; background:var(--note-bg); font:600 12px/1.6 'Be Vietnam Pro',sans-serif; color:var(--note-fg); }

/* ---------- search sheet (full screen) ---------- */
#search-sheet{ position:fixed; top:var(--visual-t); right:max(var(--safe-r),var(--visual-r)); bottom:var(--visual-b); left:max(var(--safe-l),var(--visual-l)); z-index:50; background:var(--surface-base); display:flex; flex-direction:column; animation:ddFade .16s; }
.search-head{ flex:none; padding:calc(14px + var(--safe-t)) 14px 14px; display:flex; align-items:center; gap:10px; background:#fff; border-bottom:1px solid var(--border); }
.search-input-wrap{ flex:1; min-width:0; height:48px; border-radius:24px; border:1.5px solid var(--accent); background:var(--surface-base); display:flex; align-items:center; gap:9px; padding:0 16px; }
.search-input-wrap input{ flex:1; min-width:0; border:none; background:none; outline:none; font:500 14px/1 'Be Vietnam Pro',sans-serif; }
.search-cancel{ flex:none; height:48px; padding:0 6px; border:none; background:none; font:700 13.5px/1 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); }
.search-scroll{ flex:1; min-height:0; overflow-y:auto; padding:14px; }
.search-section-title{ font:700 11.5px/1.3 'Be Vietnam Pro',sans-serif; color:var(--ink-fainter); letter-spacing:.04em; text-transform:uppercase; margin:0 0 10px; }
.search-results{ display:flex; flex-direction:column; gap:8px; }
.search-row{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:9px; display:flex; align-items:center; gap:11px; width:100%; text-align:left; }
.search-thumb{ width:48px; height:48px; border-radius:11px; background:var(--surface-image); flex:none; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.search-thumb img{ width:100%; height:100%; object-fit:cover; }
.search-row .name{ font:700 13px/1.35 'Be Vietnam Pro',sans-serif; text-wrap:pretty; }
.search-row .sub{ font:500 11px/1.35 'Be Vietnam Pro',sans-serif; color:var(--ink-faint); }
.search-row .price{ font:800 13px/1 'Be Vietnam Pro',sans-serif; color:var(--accent); flex:none; margin-left:auto; }
.search-empty{ padding:40px 20px; text-align:center; font:600 13px/1.5 'Be Vietnam Pro',sans-serif; color:var(--ink-fainter); }

/* ---------- full-page error / gate screens ---------- */
#gate-screen{ position:fixed; top:var(--visual-t); right:max(var(--safe-r),var(--visual-r)); bottom:var(--visual-b); left:max(var(--safe-l),var(--visual-l)); z-index:80; background:var(--surface-base); display:flex; flex-direction:column; }
.gate-header{ flex:none; height:56px; padding-top:var(--safe-t); display:flex; align-items:center; justify-content:center; background:#fff; border-bottom:1px solid var(--border); }
.gate-body{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:28px 26px; gap:12px; max-width:420px; margin:0 auto; }
.gate-icon{ width:60px; height:60px; border-radius:30px; display:flex; align-items:center; justify-content:center; }
.gate-title{ font:800 18px/1.35 'Be Vietnam Pro',sans-serif; }
.gate-desc{ font:500 13px/1.6 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); text-wrap:pretty; }
.gate-actions{ width:100%; margin-top:6px; display:flex; flex-direction:column; gap:8px; }

/* ---------- S0 · qr_scan — real camera QR scanner ---------- */
#gate-screen.scan-screen{ background:var(--surface-base); }
.scan-header{
  flex:none; height:64px; padding:var(--safe-t) 14px 0; display:flex; align-items:center; justify-content:space-between;
  background:transparent; border-bottom:none; position:relative; z-index:2;
}
.scan-close-btn{
  width:44px; height:44px; border-radius:22px; border:1px solid var(--border); background:#fff;
  display:flex; align-items:center; justify-content:center; color:var(--ink); flex:none;
}
.scan-header-side{ width:44px; height:44px; flex:none; }
.scan-header-logo{
  position:absolute; left:50%; top:calc(var(--safe-t) + 8px); transform:translateX(-50%);
  height:42px; width:auto; object-fit:contain;
}
.scan-title{
  flex:none; padding:10px 24px 2px; text-align:center;
  font:800 17px/1.35 'Be Vietnam Pro',sans-serif; color:var(--ink); text-wrap:pretty;
}
.scan-viewport{
  flex:1; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; padding:18px 24px;
}
/* Viewport khung camera đúng 1:1 (giống thiết kế) — không kéo dài theo chiều
   dọc còn lại của màn hình, phần nền tối bao quanh (letterbox) mới là .scan-viewport. */
.scan-square{
  position:relative; width:min(100%,480px,calc(var(--viewport-h) - 250px)); flex:none;
  aspect-ratio:1/1; border-radius:20px; overflow:hidden; background:#0B0D12;
}
.scan-square video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.scan-frame{
  position:absolute; inset:30px; border:2.5px dashed rgba(255,255,255,.85); border-radius:14px; pointer-events:none;
}
.scan-line{
  position:absolute; left:6%; right:6%; top:8%; height:2.5px; border-radius:2px;
  background:var(--accent); box-shadow:0 0 10px 2px rgba(216,31,38,.75);
  animation:ddScanLine 2.1s ease-in-out infinite;
}
@keyframes ddScanLine{ 0%,100%{ top:8% } 50%{ top:88% } }
.scan-frame-hint{
  position:absolute; left:8px; right:8px; bottom:8%; text-align:center; pointer-events:none;
  font:600 12.5px/1.3 'Be Vietnam Pro',sans-serif; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.scan-footer{ flex:none; padding:16px 26px calc(22px + var(--safe-b)); text-align:center; }
.scan-hint{ font:500 12px/1.55 'Be Vietnam Pro',sans-serif; color:var(--ink-muted); text-wrap:pretty; }

/* ---------- skeleton loading ---------- */
.skeleton-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:11px; }
.skeleton-line{ height:11px; border-radius:6px; background:#F1EDE6; }
.skeleton-line + .skeleton-line{ margin-top:8px; }

@keyframes ddUp{ from{ transform:translateY(14px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
@keyframes ddSheet{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes ddFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes ddPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- responsive ---------- */
@media (max-width:374px){
  .header-info{ row-gap:4px; }
  .btn-lg{ font-size:14.5px; }
}
@media (max-width:299px){
  .search-bubble span.q{ display:none; }
  .search-bubble{ justify-content:center; }
  .scope-row{ flex-wrap:wrap; }
}
@media (min-width:650px){ .menu-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:744px){
  #app{ max-width:680px; }
  .sheet{ left:50%; right:auto; bottom:10vh; transform:translateX(-50%); width:520px; border-radius:var(--r-sheet); max-height:80vh; }
  @keyframes ddSheet{ from{ transform:translate(-50%,24px); opacity:0; } to{ transform:translate(-50%,0); opacity:1; } }
}
@media (min-width:900px){ .menu-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1024px){ #app{ max-width:820px; } }

/* iPhone Duo inner display: Apple places system controls/status vertically at
   the right and recommends keeping interactive controls away from the fold.
   Content may span the curve, but menu cards and primary actions stay in one
   of the two usable interaction zones. */
body.iphone-duo-inner{ padding-left:0; padding-right:0; }
body.iphone-duo-inner #app{ max-width:none; box-shadow:none; }
body.iphone-duo-inner .header-row{ padding-left:max(18px,var(--safe-l)); padding-right:max(18px,calc(var(--safe-r) + var(--visual-r))); }
body.iphone-duo-inner .header-info{ padding-left:max(20px,var(--safe-l)); padding-right:max(20px,calc(var(--safe-r) + var(--visual-r))); }
body.iphone-duo-inner .menu-banner{ margin-left:max(20px,var(--safe-l)); margin-right:max(20px,calc(var(--safe-r) + var(--visual-r))); }
body.iphone-duo-inner .menu-cats,
body.iphone-duo-inner .menu-heading{ padding-left:max(20px,var(--safe-l)); padding-right:max(20px,calc(var(--safe-r) + var(--visual-r))); }
body.iphone-duo-inner .menu-grid{
  grid-template-columns:minmax(0,calc(50vw - 42px)) minmax(0,1fr);
  column-gap:44px; padding-left:max(20px,var(--safe-l));
  padding-right:max(20px,calc(var(--safe-r) + var(--visual-r) + 20px));
}
body.iphone-duo-inner .floating-bottom,
body.iphone-duo-inner .detail-bottom,
body.iphone-duo-inner .cart-bottom{
  width:calc(50% - 22px - var(--safe-r) - var(--visual-r));
  margin-left:calc(50% + 22px);
}
body.iphone-duo-inner .welcome-actions{ width:calc(50% - 44px - var(--safe-r) - var(--visual-r)); margin-left:calc(50% + 22px); margin-right:calc(22px + var(--safe-r) + var(--visual-r)); }
body.iphone-duo-inner .sheet,
body.iphone-duo-inner #search-sheet,
body.iphone-duo-inner #gate-screen{
  left:calc(50% + 22px); right:max(var(--safe-r),var(--visual-r)); max-width:none; width:auto; margin:0; transform:none;
}
body.iphone-duo-inner .sheet{ animation:ddFade .18s; }
body.iphone-duo-inner #toast{ left:calc(50% + 36px); right:calc(14px + max(var(--safe-r),var(--visual-r))); max-width:none; }

/* Native two-segment Fold/Duo layout; the middle column is the physical hinge. */
@media (horizontal-viewport-segments:2){
  body{padding-left:0;padding-right:0}#app{max-width:none;box-shadow:none}
  .menu-grid{grid-template-columns:minmax(0,env(viewport-segment-width 0 0)) minmax(0,env(viewport-segment-width 1 0));column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));padding-inline:20px}
  .floating-bottom,.detail-bottom,.cart-bottom,.welcome-actions{left:env(viewport-segment-left 1 0);right:auto;width:env(viewport-segment-width 1 0);margin:0;padding-right:max(14px,calc(var(--safe-r) + var(--visual-r)));padding-left:14px}
  .sheet,#search-sheet,#gate-screen{left:env(viewport-segment-left 1 0);right:auto;width:env(viewport-segment-width 1 0);max-width:none;margin:0;transform:none}
  #toast{left:calc(env(viewport-segment-left 1 0) + 14px);right:calc(14px + var(--safe-r) + var(--visual-r));max-width:none}
}

/* OS text scaling and browser zoom must grow controls instead of clipping text. */
.btn,.btn-lg,.btn-md,.btn-sm,.chip-cat,.menu-backtop-btn,.pill-btn,.detail-add-btn,.cart-bottom .btn-secondary,.cart-bottom .btn-primary,.cart-bottom .btn-dark,.sheet-actions .btn,.note-chip,.search-cancel{height:auto;min-height:44px;white-space:normal;line-height:1.35;padding-block:9px;overflow-wrap:anywhere}
.opt-main,.scope-row,.lang-row,.cart-tab{height:auto;min-height:48px}.opt-label,.scope-row>*{overflow-wrap:anywhere}.featured-name{-webkit-line-clamp:unset;display:block;min-height:0}.detail-note-row span{white-space:normal;overflow:visible;text-overflow:clip}
@media(max-width:420px){.featured-row{grid-template-columns:1fr}.featured-row-photo{min-height:150px}.cart-bottom{flex-wrap:wrap}.cart-bottom>*{flex:1 1 100%!important}}
@media(min-resolution:1.75dppx) and (max-width:900px){.sheet-actions{display:grid;grid-template-columns:1fr}.detail-bottom,.cart-bottom{flex-wrap:wrap}.detail-bottom>* ,.cart-bottom>*{flex:1 1 100%!important}}

@media (orientation:landscape) and (max-height:560px){
  .scan-header{ height:54px; }
  .scan-title{ padding-top:4px; }
  .scan-viewport{ padding:8px 18px; }
  .scan-footer{ padding-top:8px; }
  .sheet{ max-height:calc(var(--viewport-h) - 16px); }
}

/* long CJK / Vietnamese strings must never force horizontal scroll */
.dish-name,.detail-title,.cart-title-row .name,.order-title-row .name,.opt-label,.welcome-title{ overflow-wrap:break-word; }
/* NOTE: do NOT re-add `body{ overflow-x:hidden }` here. Horizontal clipping is
   handled once, on `html` (line ~37). Declaring overflow-x on `body` too makes
   BOTH html and body scroll containers (overflow-x:hidden forces overflow-y to
   `auto` per CSS spec), and Android Chrome then routes single-finger vertical
   swipes unreliably between the two — the page won't scroll until a pinch-zoom
   forces a layout recompute. This duplicate is what caused the scroll-lock. */