/* =====================================================================
   NHÀ MÌ — TRẢI NGHIỆM (cinematic scroll-snap microsite)
   4 chương 清 甜 自 然 · mực sâu · kem · đỏ ấm · vàng đèn lồng.
   Refactored 2026-06-01: consolidated overrides, removed !important salad.
   ===================================================================== */

/* === DESIGN TOKENS ===
   OPTION 4 — Cool White + Red Pop (No Gold), applied 2026-06-02.
   NOTE: in this stylesheet --ex-paper is the FOREGROUND (text) token and
   --ex-bg is the canvas. To achieve "white bg + dark text" we flip values
   by ROLE: bg→white, paper(text)→dark, gold→brand red. Dark theme preserved
   in experience.css.dark-backup and git tag `dark-theme-backup`. */
:root {
  --ex-ink:        #FFFFFF;          /* text-on-accent + former dark surfaces → white */
  --ex-ink-2:      #EFE9E2;          /* dish card fallback surface (light) */
  --ex-bg:         #FFFFFF;          /* page + footer canvas */
  --ex-paper:      #1A0E0A;          /* primary text (dark) */
  --ex-paper-soft: rgba(26,14,10,0.66);
  --ex-paper-faint:rgba(26,14,10,0.40);
  --ex-red:        #B32826;
  --ex-red-deep:   #7E1F18;
  --ex-gold:       #B32826;          /* red replaces ALL gold */
  --ex-gold-soft:  rgba(179,40,38,0.45);
  --ex-fresh:      #2E9E5B;          /* "đang mở" green, darkened for white bg */

  --ex-display: 'Shantell Sans', 'Segoe Script', cursive;
  --ex-body:    'Inter', system-ui, -apple-system, sans-serif;
  --ex-han:     'Ma Shan Zheng', serif;

  --ex-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Horizontal alignment edges — nav (logo ↔ CTA) and all scene content. */
  --page-padding-inline: clamp(24px, 7vw, 120px);
}

/* === RESET + BASE === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ex-bg); }
body {
  color: var(--ex-paper);
  font-family: var(--ex-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  padding-bottom: 0;
}
img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1; }
p { margin: 0; text-wrap: pretty; }
::selection { background: var(--ex-red); color: #fff; }
:focus-visible { outline: 2px solid var(--ex-gold); outline-offset: 4px; }

/* === LAYOUT === */
.stage {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  background: var(--ex-bg);
}
.stage::-webkit-scrollbar { display: none; }

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: center;
  padding-block: clamp(80px, 12vh, 150px) clamp(60px, 9vh, 110px);
  padding-inline: var(--page-padding-inline);
  overflow: hidden;
  isolation: isolate;
  background: var(--ex-bg);
}

/* V3 placeholder bg rectangles — hidden site-wide. */
.scene__bg { display: none; }

.scene__grade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.scene__grade--cover {
  background:
    radial-gradient(120% 90% at 70% 30%, rgba(179,40,38,0.06), transparent 60%),
    #FFFFFF;
}
.scene__grade--dark { background: #FFFFFF; }
.scene__grade--ink  { background: #FFFFFF; }

/* Big calligraphy watermark — bottom-right by default; hanzi-writer fills the box. */
.scene__han {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  font-family: var(--ex-han); line-height: 1; color: rgba(179,40,38,0.08);
  font-size: clamp(11rem, 26vw, 22rem);
  right: clamp(3vw, 5vw, 7vw); bottom: clamp(4vh, 7vh, 9vh);
  width: clamp(11rem, 26vw, 22rem);
  height: clamp(11rem, 26vw, 22rem);
  overflow: visible;
}
.scene__han svg { width: 100%; height: 100%; display: block; }

.scene__inner { width: 100%; margin-inline: 0; }

/* === REVEAL === */
[data-rise] {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity 0.8s var(--ex-ease), transform 0.8s var(--ex-ease), filter 0.8s var(--ex-ease);
}
.scene.in-view [data-rise]      { opacity: 1; transform: none; filter: none; }
.scene.in-view [data-rise="2"]  { transition-delay: 0.12s; }
.scene.in-view [data-rise="3"]  { transition-delay: 0.24s; }
.scene.in-view [data-rise="4"]  { transition-delay: 0.36s; }
.scene.in-view [data-rise="5"]  { transition-delay: 0.48s; }

/* === COMPONENTS === */

/* Top bar */
.ex-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 20px;
  padding: 20px var(--page-padding-inline);
  background: rgba(255,255,255,0.96);
  border-bottom: 1px solid rgba(179,40,38,0.22);
  backdrop-filter: saturate(120%) blur(6px);
}
.ex-brand { display: inline-flex; align-items: center; gap: 0.5em; }
.ex-brand__logo { height: 56px; width: auto; display: block; background: transparent; }

.ex-top__nav {
  display: flex; align-items: center; gap: 28px;
  margin-left: auto; margin-right: 24px;
}
.ex-top__link {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(26,14,10,0.66); white-space: nowrap;
  transition: color 0.2s ease;
}
.ex-top__link:hover     { color: var(--ex-gold); }
.ex-top__link.is-active { color: #1A0E0A; }

.ex-top__cta {
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #FFFFFF; background: var(--ex-gold);
  padding: 0.7em 1.3em; white-space: nowrap;
  transition: background 0.2s var(--ex-ease);
}
.ex-top__cta:hover { background: #8E1F1D; }

.ex-top__hamburger {
  display: none; background: transparent; border: 0;
  width: 44px; height: 44px; cursor: pointer; padding: 0; margin-left: auto;
}
.ex-top__hamburger span {
  display: block; width: 24px; height: 2px;
  background: var(--ex-paper); margin: 5px auto; transition: 0.2s;
}

/* Chapter rail (right edge) — hidden as per 2026-05-31 cleanup */
.rail {
  position: fixed; right: clamp(14px, 2.5vw, 34px); top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 18px; align-items: center;
}
.rail__item {
  display: grid; place-items: center; width: 40px; height: 40px;
  font-family: var(--ex-han); font-size: 1.15rem; color: var(--ex-paper-faint);
  border: 1px solid transparent; cursor: pointer; background: none;
  transition: color 0.3s var(--ex-ease), border-color 0.3s var(--ex-ease), transform 0.3s var(--ex-ease);
}
.rail__item:hover { color: var(--ex-paper); }
.rail__item.is-active { color: var(--ex-gold); border-color: var(--ex-gold-soft); transform: scale(1.12); }

/* Progress badge — kept in DOM for chapter-nav.js, hidden visually. */
.ex-progress { display: none; }

/* Scroll hint */
.scroll-hint {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ex-paper-faint);
}
.scroll-hint__line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--ex-gold), transparent);
  animation: hint 2s var(--ex-ease) infinite; transform-origin: top;
}
@keyframes hint {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* Scene 0 · Cover (清) */
.cover__eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ex-gold);
  margin-bottom: 28px;
}
.cover__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ex-fresh); box-shadow: 0 0 10px var(--ex-fresh); }
.cover__title {
  font-family: var(--ex-display); font-weight: 700; color: var(--ex-paper);
  font-size: clamp(4.5rem, 17vw, 16rem); line-height: 0.86; letter-spacing: -0.01em;
}
.cover__title em { font-style: normal; color: var(--ex-red); }
.cover__chars { display: flex; gap: clamp(10px, 2.2vw, 26px); margin-top: 30px; }
.cover__char {
  font-family: var(--ex-han); font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--ex-gold);
}
.cover__char span {
  display: block; font-family: var(--ex-body); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ex-paper-faint); margin-top: 8px;
}
.cover__lead {
  margin-top: 30px; max-width: 46ch;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ex-paper-soft); line-height: 1.6;
}
.cover__meta { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 34px; align-items: center; }
.cover__pill {
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--ex-gold-soft); color: var(--ex-gold); padding: 0.6em 1.1em;
}

/* Scene 1 · Story (甜) */
.story__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 7vw, 110px); align-items: center;
}
.story__lead {
  font-family: var(--ex-display); font-weight: 700; color: var(--ex-paper);
  font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.04;
}
.story__lead em { font-style: normal; color: var(--ex-red); }
.story__sub { margin-top: 26px; max-width: 44ch; font-size: 1.08rem; color: var(--ex-paper-soft); }
.reasons { display: flex; flex-direction: column; gap: 0; }
.reason {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid rgba(179,40,38,0.20);
}
.reason:last-child { border-bottom: 1px solid rgba(179,40,38,0.20); }
.reason__no { font-family: var(--ex-display); font-weight: 700; font-size: 1.8rem; color: var(--ex-gold); line-height: 1; }
.reason__t  { font-family: var(--ex-display); font-weight: 700; font-size: 1.5rem; color: var(--ex-paper); margin-bottom: 6px; }
.reason__d  { font-size: 0.96rem; color: var(--ex-paper-soft); }

/* Scene 2 · Menu (自) — horizontal reel */
.menu__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.menu__title { font-family: var(--ex-display); font-weight: 700; color: var(--ex-paper); font-size: clamp(2.2rem, 5vw, 4rem); }
.menu__hint  { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ex-paper-faint); white-space: nowrap; }

.reel {
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  gap: clamp(16px, 2vw, 24px);
  padding-bottom: 14px;
  cursor: grab;
  width: 100%; max-width: 100%; min-width: 0;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.reel.is-drag { cursor: grabbing; }
#menu .scene__inner,
#menu .scene__inner > * { overflow-x: hidden; max-width: 100%; }

.dish {
  position: relative; flex: 0 0 clamp(240px, 26vw, 320px); aspect-ratio: 3 / 4;
  overflow: hidden; background: var(--ex-ink-2);
  scroll-snap-align: start; scroll-snap-stop: normal;
}
.dish img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05); transition: transform 0.7s var(--ex-ease); }
.dish:hover img { transform: scale(1.05); }
.dish::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,15,12,0.92), transparent 60%); }
.dish__han { position: absolute; top: 16px; right: 18px; z-index: 2; font-family: var(--ex-han); font-size: 2.4rem; color: var(--ex-gold); text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.dish__tag {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.4em 0.8em; background: rgba(26,14,10,0.6); color: #F8F4ED; border: 1px solid var(--ex-gold-soft);
}
.dish__tag--sig { background: var(--ex-gold); color: #FFFFFF; border-color: var(--ex-gold); }
/* Nhãn "Nên thử" — vàng đồng → đỏ, ghim góc trên-trái card */
.dish__tip {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.42em 0.9em; color: #FFFFFF;
  background: linear-gradient(135deg, var(--ex-gold), var(--ex-red, #B32826));
  box-shadow: 0 2px 10px rgba(179,40,38,0.4);
}
.dish--tip { box-shadow: inset 0 0 0 2px var(--ex-gold); }
.dish__body { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2; }
.dish__name  { font-family: var(--ex-display); font-weight: 700; font-size: 1.7rem; color: #fff; line-height: 1.05; }
.dish__price { font-family: var(--ex-display); font-weight: 700; font-size: 1.5rem; color: var(--ex-gold); margin-top: 4px; }
.dish__price small { font-size: 0.6em; }

/* Scene 3 · Promise (然) */
.promise__eyebrow { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ex-gold); margin-bottom: 30px; text-align: center; }
.promise__grid    { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 4vw, 60px); }
.vow { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vow__ch  { font-family: var(--ex-han); font-size: clamp(4rem, 11vw, 9rem); color: var(--ex-gold); line-height: 0.9; }
.vow__word{ font-family: var(--ex-display); font-weight: 700; font-size: 1.7rem; color: var(--ex-paper); }
.vow__d   { font-size: 0.92rem; color: var(--ex-paper-soft); max-width: 22ch; }
.promise__tag {
  margin-top: 56px; text-align: center;
  font-family: var(--ex-display); font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.2rem); color: var(--ex-paper);
}
.promise__tag em { color: var(--ex-red); font-style: normal; }

/* Scene 4 · Visit (家) — top-right 家 watermark, no grades, footer flush */
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.visit__title { font-family: var(--ex-display); font-weight: 700; font-size: clamp(2.4rem, 5.5vw, 4.4rem); color: var(--ex-paper); line-height: 1.02; }
.visit__title em { color: var(--ex-red); font-style: normal; }
.visit__sub { margin-top: 22px; max-width: 40ch; color: var(--ex-paper-soft); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.visit__foot { display: none; }

#visit { padding-inline: 0; padding-bottom: 0; }
#visit .scene__inner { padding-inline: var(--page-padding-inline); }
#visit .scene__grade { display: none; }
#visit .scene__han {
  top: clamp(8vh, 18vh, 24vh); right: clamp(3vw, 5vw, 7vw);
  bottom: auto; left: auto; z-index: 0;
  color: rgba(179,40,38,0.08);
}

.ex-btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 600; font-size: 0.92rem; letter-spacing: 0.04em;
  padding: 0.95em 1.7em; border: 1.5px solid transparent;
  transition: background 0.2s var(--ex-ease), color 0.2s var(--ex-ease), border-color 0.2s var(--ex-ease);
}
.ex-btn--gold { background: var(--ex-gold); color: #FFFFFF; }
.ex-btn--gold:hover { background: #8E1F1D; }
.ex-btn--line { border-color: var(--ex-gold-soft); color: var(--ex-gold); }
.ex-btn--line:hover { background: var(--ex-gold); color: #FFFFFF; border-color: var(--ex-gold); }

.branches { display: flex; flex-direction: column; gap: 0; }
.br {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; align-items: baseline;
  padding: 20px 0; border-top: 1px solid rgba(179,40,38,0.20);
}
.br:last-child { border-bottom: 1px solid rgba(179,40,38,0.20); }
.br__name { font-family: var(--ex-display); font-weight: 700; font-size: 1.3rem; color: var(--ex-paper); }
.br__loc  { grid-column: 1 / 2; font-size: 0.9rem; color: var(--ex-paper-soft); }
.br__open {
  font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ex-fresh); display: inline-flex; align-items: center; gap: 0.4em;
}
.br__open::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ex-fresh); box-shadow: 0 0 8px var(--ex-fresh);
}

/* Footer — sits inside #visit scene */
.ex-footer {
  position: relative; overflow: hidden;
  background: #FAFAFA;
  color: var(--ex-paper);
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: var(--ex-body);
  margin-top: clamp(48px, 8vh, 100px);
  padding: clamp(40px, 6vh, 64px) var(--page-padding-inline) clamp(20px, 2.5vh, 32px);
}
.ex-footer .footer-han { display: none; }
.ex-footer__inner { position: relative; z-index: 1; padding: 0; margin: 0; max-width: none; }
.ex-footer__top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: clamp(28px, 4vw, 60px);
  padding: 0 0 clamp(32px, 5vh, 48px);
  border-bottom: none;
}
.ex-footer .ex-brand__logo { height: 56px; width: auto; display: block; margin-bottom: 18px; }
.ex-footer__tag { color: rgba(26,14,10,0.62); max-width: 32ch; line-height: 1.6; margin: 0; }
.ex-footer__chars { display: flex; gap: 14px; margin-top: 18px; }
.ex-footer__chars span { font-family: var(--ex-han); font-size: 1.5rem; color: var(--ex-gold); }
.ex-footer__h {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ex-gold); margin: 0 0 18px;
}
.ex-footer__list { display: flex; flex-direction: column; gap: 12px; }
.ex-footer__list a,
.ex-footer__list span { font-size: 0.95rem; color: rgba(26,14,10,0.62); transition: color 0.2s; }
.ex-footer__list a:hover { color: var(--ex-paper); }
.ex-footer__list b { color: var(--ex-paper); font-weight: 600; }
.ex-footer__open {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--ex-fresh); font-size: 0.8rem; letter-spacing: 0.06em;
}
.ex-footer__open::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ex-fresh); box-shadow: 0 0 8px var(--ex-fresh);
}

/* Mobile drawer (off-canvas) */
.ex-mobile-drawer {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(255,255,255,0.98);
  padding: 80px 24px 32px; overflow-y: auto;
}
.ex-mobile-drawer.is-open { display: block; }
.ex-mobile-drawer__close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px; background: transparent; border: 0;
  color: var(--ex-paper); font-size: 28px; cursor: pointer; line-height: 1;
}
.ex-mobile-drawer__list { display: flex; flex-direction: column; gap: 18px; }
.ex-mobile-drawer__list a {
  color: var(--ex-paper); font-size: 1.2rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 12px 0; border-bottom: 1px solid rgba(179,40,38,0.18);
}

/* Sticky bottom bar (mobile) */
.ex-sticky-cta {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: var(--ex-bg); border-top: 1px solid rgba(179,40,38,0.25);
  padding: 10px 16px; gap: 10px;
}
.ex-sticky-cta a {
  flex: 1; text-align: center; padding: 13px 14px; border-radius: 999px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: 12px; transition: 0.2s;
}
.ex-sticky-cta__call  { background: transparent; border: 1.5px solid var(--ex-gold); color: var(--ex-gold); }
.ex-sticky-cta__order { background: var(--ex-gold); color: var(--ex-ink); }

/* Sticky "Đặt Món" reminder pill (desktop) */
.ex-cta-pill {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 26px;
  background: var(--ex-gold); color: #FFFFFF; border: none; border-radius: 999px;
  box-shadow: 0 8px 24px rgba(179,40,38,0.28), 0 0 0 1px rgba(0,0,0,0.04) inset;
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase;
  cursor: pointer;
  transform: translateX(120%); opacity: 0;
  transition: transform 0.4s var(--ex-ease), opacity 0.3s ease, background 0.2s;
}
.ex-cta-pill[data-state="visible"]   { transform: translateX(0); opacity: 1; }
.ex-cta-pill[data-state="dismissed"] { display: none; }
.ex-cta-pill:hover { transform: translateX(0) scale(1.03); background: #8E1F1D; }
.ex-cta-pill__arrow { font-size: 18px; transition: transform 0.2s; }
.ex-cta-pill:hover .ex-cta-pill__arrow { transform: translateX(3px); }
.ex-cta-pill__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 6px;
  background: rgba(20,15,12,0.18); color: var(--ex-ink);
  border-radius: 50%; font-size: 14px; font-weight: 400; line-height: 1;
}
.ex-cta-pill__close:hover { background: rgba(20,15,12,0.35); }

/* === RESPONSIVE === */
@media (min-width: 769px) and (max-width: 1024px) {
  :root { --page-padding-inline: clamp(28px, 5vw, 56px); }
  .ex-top__nav { gap: 18px; }
  .ex-top__link { font-size: 12px; letter-spacing: 0.12em; }
}
@media (max-width: 900px) {
  .ex-footer__top { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 860px) {
  .story__grid,
  .visit__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 820px) {
  .promise__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 768px) {
  :root { --page-padding-inline: 20px; }
  body { padding-bottom: 76px; }
  .ex-brand__logo,
  .ex-footer .ex-brand__logo { height: 40px; }
  .ex-top__nav      { display: none; }
  .ex-top__cta      { display: none; }
  .ex-top__hamburger{ display: block; }
  .ex-sticky-cta    { display: flex; }
  .ex-cta-pill      { display: none; }
}
@media (max-width: 720px) {
  .reel > .dish { flex: 0 0 78vw; }
}
@media (max-width: 600px) {
  .rail { display: none; }
}
@media (max-width: 540px) {
  .ex-footer__top { grid-template-columns: 1fr; }
}

/* === MOTION PREF === */
@media (prefers-reduced-motion: reduce) {
  .stage { scroll-behavior: auto; }
  [data-rise] { opacity: 1; transform: none; filter: none; }
  .scroll-hint__line { animation: none; }
}

/* Fix Vietnamese diacritics bị cắt ở .menu__title — 2026-06-01 */
.menu__title { line-height: 1.25 !important; padding-top: 0.15em; overflow: visible !important; }
.menu__head { overflow: visible !important; }

/* Re-add reel width constraint (lost in refactor) — 2026-06-01 */
.reel { width: 100%; max-width: 100%; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; gap: clamp(16px, 2vw, 24px); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.reel::-webkit-scrollbar { display: none; }
.dish { flex: 0 0 clamp(240px, 26vw, 320px); scroll-snap-align: start; }
@media (max-width: 768px) { .dish { flex-basis: 78vw; } }
#menu .scene__inner { overflow-x: hidden; max-width: 100%; }

/* ROOT CAUSE: .reel phải có overflow-x auto để scroll — 2026-06-01 */
.reel { overflow-x: auto !important; }

/* Allow scroll on thuc-don page — 2026-06-01 */
html:has(.menu-page), body:has(.menu-page) { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; scroll-snap-type: none !important; }
.menu-page { overflow: visible !important; }

/* Triệt để: bỏ lock scroll, chapters flow vertically — 2026-06-01 */
html { scroll-snap-type: y proximity !important; overflow-y: auto !important; height: auto !important; overflow-x: hidden; }
body { overflow-y: visible !important; overflow-x: hidden; height: auto !important; }
main.stage, .stage { overflow: visible !important; height: auto !important; position: static !important; min-height: auto !important; }
.scene { min-height: 100vh; position: relative !important; scroll-snap-align: start; }
.ex-footer { scroll-snap-align: none !important; }

/* Menu bigger thumbs + 2-column desktop — 2026-06-01 */
.menu-row__media { flex: 0 0 120px !important; width: 120px !important; height: 120px !important; border-radius: 10px !important; }
.menu-row__han { font-size: 56px !important; }
@media (min-width: 1024px) { .menu-list { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px 64px !important; } .menu-row { padding: 24px 0 !important; } }
@media (min-width: 1440px) { .menu-row__media { flex-basis: 140px !important; width: 140px !important; height: 140px !important; } .menu-row__han { font-size: 64px !important; } }
@media (max-width: 640px) { .menu-row__media { flex: 0 0 80px !important; width: 80px !important; height: 80px !important; } .menu-row__han { font-size: 40px !important; } }

/* Menu page full-width content — 2026-06-01 */
.menu-page { max-width: none !important; margin-inline: 0 !important; }
.menu-page > *, .menu-page main, .menu-page .menu-list, .menu-page .menu-cat { max-width: none !important; width: 100% !important; }
.menu-list { display: grid; }
@media (min-width: 1024px) { .menu-list { grid-template-columns: 1fr 1fr !important; } }
/* Giữ tối đa 2 cột trên mọi màn rộng — 3 cột quá chật (2026-06-02) */
@media (min-width: 1440px) { .menu-list { grid-template-columns: 1fr 1fr !important; } }

/* Bỏ đường gạch ngăn món + section rule — 2026-06-02 */
.menu-row { border-bottom: none !important; }
.menu-cat__rule, .menu-cat hr { display: none !important; }
.menu-cat__head { border-bottom: none !important; }

/* Bỏ đường gạch menu — 2026-06-02 */
.menu-row{border-bottom:none !important}
.menu-cat__rule,.menu-cat hr,.menu-cat__head{border-bottom:none !important}
hr{display:none !important}

/* ───────────────────────────────────────────────────────────────
   "Hợp với" — Option 6: Solid Red Pills + emoji (preview .s6)
   MỘT bộ rule sạch duy nhất, thay thế mọi bản vá cũ (2026-06-02).
   Label xám "HỢP VỚI" + pill đỏ đặc chữ trắng có emoji. Không ô hồng.
   ─────────────────────────────────────────────────────────────── */
.menu-row__fit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.menu-row__fit > span:first-child, .menu-row__fit .fit-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #666; margin-right: 4px; font-weight: 500; background: none; padding: 0; border: none; }
.menu-row__fit b { display: inline-flex; align-items: center; gap: 5px; background: #B32826; color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; border: none; }
.menu-row__fit b::before, .menu-row__fit b::after { content: none; }
@media (min-width: 1024px){ .menu-list { grid-template-columns: 1fr 1fr !important; } }

/* Trim khoảng trống cuối menu page — 2026-06-03 */
.menu-page { padding-bottom: clamp(24px,4vh,48px) !important; }
.menu-page > *:last-child, .menu-cat:last-child { margin-bottom: 0 !important; }

/* Trim khoảng trống cuối menu page — 2026-06-03 */
.menu-page { padding-bottom: clamp(24px,4vh,48px) !important; }
.menu-page > *:last-child, .menu-cat:last-child { margin-bottom: 0 !important; }