:root {
  --bg: #F5EFE3;
  --bg-soft: #EFE5CD;
  --bg-card: #FAF6ED;
  --bg-tint: #F0E6CE;
  --bg-dark: #1F1A14;
  --bg-dark-soft: #2A2418;
  --ink: #2A1F14;
  --ink-mute: #6B5D4F;
  --ink-deep: #1A1208;
  --on-dark: #F5EFE3;
  --on-dark-mute: #C8BFA9;
  --terra: #B85A28;
  --terra-bright: #D97D3F;
  --terra-deep: #8A4220;
  --olive: #6B7A45;
  --olive-bright: #94A87C;
  --olive-deep: #4A5530;
  --border: #D4C5A8;
  --border-soft: #E2D7BC;
  --border-dark: #3D3528;
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Grain */
.grain::before {
  content: ''; position: fixed; inset: 0;
  pointer-events: none; z-index: 100;
  opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Marquee */
.marquee {
  overflow: hidden;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee-item {
  padding: 0.7rem 2rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 2rem;
}
.marquee-item span:nth-child(odd) { color: var(--terra-bright); }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Photo */
.dish-frame {
  position: relative; overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px -8px rgba(42, 31, 20, 0.12);
}
.dish-frame img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: contrast(1.05) saturate(0.96) brightness(0.98);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.dish-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(184,90,40,0.04) 0%, transparent 35%, rgba(42,31,20,0.10) 100%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.dish-frame::after {
  content: ''; position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(ellipse 95% 75% at center 45%, transparent 60%, rgba(42,31,20,0.18) 100%);
  pointer-events: none;
}
.dish-frame:hover img {
  transform: scale(1.05);
  filter: contrast(1.08) saturate(1.05) brightness(1);
}
.dish-frame:hover { box-shadow: 0 12px 36px -10px rgba(42,31,20,0.25); }
.dish-frame[data-mood="healthy"]::before {
  background: linear-gradient(180deg, rgba(107,122,69,0.05) 0%, transparent 35%, rgba(42,31,20,0.10) 100%);
}

/* Hero ambient background — hòa tan hero-banner vào nền cream */
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  overflow: hidden;
  background-image: url('../images/hero-banner.png');
  background-size: cover;
  background-position: center 55%;
  background-repeat: no-repeat;
  opacity: 0.32;
  filter: saturate(0.78) contrast(0.95) blur(1px);
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 60% 55%, #000 0%, rgba(0,0,0,0.85) 35%, transparent 92%);
  mask-image: radial-gradient(ellipse 95% 90% at 60% 55%, #000 0%, rgba(0,0,0,0.85) 35%, transparent 92%);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg, rgba(245,239,227,0.55) 0%, rgba(245,239,227,0.20) 38%, rgba(245,239,227,0.05) 65%, rgba(245,239,227,0.30) 100%),
    linear-gradient(180deg, rgba(245,239,227,0.30) 0%, transparent 25%, transparent 75%, rgba(245,239,227,0.50) 100%);
  pointer-events: none;
}
@media (max-width: 1024px) {
  .hero-bg {
    opacity: 0.22;
    background-position: center 60%;
    -webkit-mask-image: radial-gradient(ellipse 110% 70% at 50% 60%, #000 0%, transparent 85%);
    mask-image: radial-gradient(ellipse 110% 70% at 50% 60%, #000 0%, transparent 85%);
  }
}

/* Editorial numerals */
.editorial-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  color: var(--terra);
}
.editorial-num[data-mood="healthy"] { color: var(--olive); }

/* Hero title */
.hero-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--ink-deep);
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--terra); }

/* Section tag */
.section-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 0.85rem;
}
.section-tag::before {
  content: ''; width: 28px; height: 1px; background: var(--terra);
}

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 1rem 1.85rem;
  background: var(--terra); color: var(--bg);
  font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--terra);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; overflow: hidden;
  box-shadow: 0 4px 14px -4px rgba(184, 90, 40, 0.35);
  cursor: pointer;
}
.btn-primary::after { content: '→'; transition: transform 0.3s; font-weight: 400; }
.btn-primary:hover {
  background: var(--terra-deep); border-color: var(--terra-deep);
  box-shadow: 0 6px 20px -4px rgba(184, 90, 40, 0.45);
}
.btn-primary:hover::after { transform: translateX(4px); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1rem 1.65rem;
  color: var(--ink);
  font-weight: 600; font-size: 0.9rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-ghost:hover { background: var(--ink); color: var(--on-dark); }

/* Forms */
.form-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.1rem;
  color: var(--ink);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
  transition: all 0.3s;
  outline: none;
  border-radius: 2px;
}
.form-input:focus {
  border-color: var(--terra);
  background: var(--bg);
  box-shadow: 0 0 0 3px rgba(184, 90, 40, 0.12);
}
.form-input::placeholder { color: var(--ink-mute); opacity: 0.65; }
.form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.45rem;
  display: block;
}

/* Reveal */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.hero-reveal { opacity: 0; animation: heroIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hero-reveal-1 { animation-delay: 0.15s; }
.hero-reveal-2 { animation-delay: 0.30s; }
.hero-reveal-3 { animation-delay: 0.45s; }
.hero-reveal-4 { animation-delay: 0.60s; }
.hero-reveal-5 { animation-delay: 0.75s; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pills */
.pill {
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--border);
  color: var(--ink-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--bg-card);
  border-radius: 2px;
}
.pill:hover { color: var(--ink); border-color: var(--ink-mute); }
.pill.is-active {
  background: var(--ink); color: var(--on-dark); border-color: var(--ink);
}

/* Nav */
.nav-dark {
  background: var(--bg-dark);
  color: var(--on-dark);
  border-bottom: 1px solid var(--border-dark);
}
.nav-link {
  position: relative;
  transition: color 0.3s;
  color: var(--on-dark-mute);
}
.nav-link::after {
  content: ''; position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 1px;
  background: var(--terra-bright);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: var(--on-dark); }
.nav-link:hover::after { width: 100%; }
.nav-link.is-active { color: var(--on-dark); }
.nav-link.is-active::after { width: 100%; background: var(--terra-bright); }

/* Mobile menu */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--on-dark);
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
}
.nav-toggle:hover { border-color: var(--terra-bright); }
@media (max-width: 767px) {
  .nav-toggle { display: inline-flex; }
}
.mobile-menu {
  display: none;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border-dark);
  padding: 1.5rem 0;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu li {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border-dark);
}
.mobile-menu li:first-child { border-top: none; }
.mobile-menu a {
  color: var(--on-dark-mute);
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1rem;
  display: block;
}
.mobile-menu a.is-active { color: var(--terra-bright); }

/* Mood split */
.mood-side {
  position: relative;
  padding: 4rem 3rem;
  overflow: hidden;
}
.mood-terra {
  background: radial-gradient(ellipse 80% 60% at 30% 30%, rgba(184, 90, 40, 0.10) 0%, transparent 60%), var(--bg-soft);
}
.mood-olive {
  background: radial-gradient(ellipse 80% 60% at 70% 70%, rgba(107, 122, 69, 0.10) 0%, transparent 60%), var(--bg-soft);
}
.mood-side::after {
  content: '';
  position: absolute; width: 1px; top: 10%; bottom: 10%;
  background: linear-gradient(to bottom, transparent, var(--border), transparent);
}
.mood-terra::after { right: 0; }
.mood-olive::after  { left: 0; }
@media (max-width: 768px) {
  .mood-side::after { display: none; }
  .mood-side { padding: 2.5rem 1.75rem; }
}

/* Quote */
.pull-quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.quote-mark {
  font-family: 'Fraunces', serif;
  font-weight: 400; font-style: italic;
  line-height: 0.7;
  color: var(--terra);
  opacity: 0.35;
}

/* Page hero */
.page-hero {
  background: var(--bg-soft);
  padding: 5rem 0 4rem;
  border-bottom: 1px solid var(--border);
}
.page-hero h1 {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--ink-deep);
  font-size: clamp(3rem, 9vw, 7rem);
}
.page-hero h1 em { font-style: italic; color: var(--terra); }

/* FAQ */
.faq-item {
  border-top: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  text-align: left;
  padding: 1.5rem 0;
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--ink-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  transition: color 0.3s;
}
.faq-q:hover { color: var(--terra); }
.faq-q::after {
  content: '+';
  font-family: 'Fraunces', serif;
  font-size: 1.8rem;
  color: var(--terra);
  transition: transform 0.4s;
  flex-shrink: 0;
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--ink-mute);
  line-height: 1.7;
}
.faq-item.is-open .faq-a { max-height: 400px; padding-bottom: 1.5rem; }

/* Timeline */
.timeline-item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 2.5rem;
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: 0.5rem; top: 0.5rem;
  width: 10px; height: 10px;
  background: var(--terra);
  border-radius: 50%;
  z-index: 1;
}
.timeline-item::after {
  content: '';
  position: absolute;
  left: 0.95rem; top: 1.5rem;
  width: 1px; bottom: 0;
  background: var(--border);
}
.timeline-item:last-child::after { display: none; }

/* Menu list (text-only) */
.menu-list-item {
  display: flex; align-items: baseline;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px dashed var(--border);
}
.menu-list-item:last-child { border-bottom: none; }
.menu-list-item .name {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  color: var(--ink-deep);
  font-weight: 400;
}
.menu-list-item .dots {
  flex: 1;
  border-bottom: 1px dotted var(--border);
  margin-bottom: 0.4rem;
}
.menu-list-item .price {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Gallery card */
.gallery-photo {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.gallery-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.96) brightness(0.98);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-photo:hover img { transform: scale(1.08); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--terra-deep); }

/* Ornament */
.ornament {
  color: var(--terra);
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-block;
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border), transparent);
}

/* Selection */
::selection { background: var(--terra); color: var(--bg); }

/* Helpers */
.on-dark { color: var(--on-dark); }
.on-dark-mute { color: var(--on-dark-mute); }