/* PapaSteak. Thiết kế gốc khổ 1920: 1rem = 16px ở 1920, co theo màn hình từ 1200 trở lên. */
:root {
  --bg: #140b06;
  --cream: #f7efe1;
  --surface: #1a0f08;
  --cream-soft: #e6dccb;
  --gold: #d5b98a;
  --gold-deep: #cfa76a;
  --ink: #1d1208;
  --line: rgba(213, 185, 138, 0.6);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Be Vietnam Pro', 'Helvetica Neue', Arial, sans-serif;
  --gutter: clamp(20px, 10.4vw, 200px);
  --gold-soft: #e4cda4;
  --gold-wash: rgba(213, 185, 138, 0.16);
  --scrim-nav: rgba(20, 11, 6, 0.62);
  --scrim-panel: rgba(20, 11, 6, 0.8);
  --ease-out: cubic-bezier(0.3, 0.1, 0.2, 1);
  --t-fast: 280ms;
  --t-base: 520ms;
  --t-reveal: 1300ms;
  --t-lift: 1100ms;
  --t-leave: 600ms;
}
html:lang(ko) {
  --serif: 'Playfair Display', 'Noto Serif KR', 'AppleMyungjo', 'Batang', serif;
  --sans: 'Be Vietnam Pro', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  word-break: keep-all;
}
html:lang(zh) {
  --serif: 'Playfair Display', 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif;
  --sans: 'Be Vietnam Pro', 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

html {
  font-size: clamp(14px, 0.8333vw, 16px);
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg);
  scrollbar-color: var(--gold-deep) var(--bg);
  scrollbar-gutter: stable;
}
html:has(dialog[open]) { overflow: hidden; }
::selection { background: var(--gold); color: var(--ink); }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--cream);
  font: 400 1.125rem/1.45 var(--sans);
  font-variant-numeric: lining-nums;
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: -1;
  height: 100vh;
  background: linear-gradient(rgba(20, 11, 6, 0.4), rgba(20, 11, 6, 0.4)), url(/assets/img/bg-leaf.webp) center top / cover no-repeat;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip {
  position: absolute;
  top: -5rem;
  left: 1rem;
  z-index: 102;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
}
.skip:focus { top: 1rem; }
.icon-arrow { width: 2.5rem; height: 0.875rem; flex: none; transition: transform var(--t-base) var(--ease-out); }
a:hover > .icon-arrow { transform: translateX(0.25rem); }
.wrap { padding-inline: var(--gutter); max-width: 1920px; margin-inline: auto; }

/* Đầu trang */
.site-header {
  position: relative;
  z-index: 101;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 6rem;
  padding-inline: var(--gutter);
  background: var(--scrim-nav);
  border-bottom: 1px solid var(--gold);
}
.logo {
  font: 500 2.625rem/1 var(--serif);
  letter-spacing: 0.19em;
  white-space: nowrap;
}
.logo b { font-weight: inherit; color: var(--gold); }
.site-header .logo { font-size: min(2.625rem, 2.6vw); }
.site-nav { justify-self: center; display: flex; gap: min(6rem, calc(9.17vw - 80px)); font-size: 1.25rem; }
.site-nav a { position: relative; padding-block: 0.375rem; white-space: nowrap; }
.site-nav a::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.5rem 1.75rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 1.125rem;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.btn:active, .place-btn:active { transform: scale(0.98); }
.btn-fill { background: var(--gold); color: var(--ink); }
.btn-fill:hover { background: var(--gold-soft); }
.btn-line:hover { background: var(--gold); color: var(--ink); }
.site-header .btn { width: clamp(8.5rem, calc(15vw - 72px), 13.5rem); font-size: 1.25rem; }
.header-end { justify-self: end; display: flex; align-items: center; gap: 1.25rem; }
.lang { position: relative; }
.lang summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
  font-size: 1.125rem;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.lang summary::-webkit-details-marker { display: none; }
.flag { flex: none; width: 1.5rem; height: 1rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(247, 239, 225, 0.25); }
.lang summary::after {
  content: '';
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1px solid;
  border-bottom: 1px solid;
  transform: translateY(-0.125rem) rotate(45deg);
  transition: transform var(--t-base) var(--ease-out);
}
.lang[open] summary::after { transform: translateY(0.125rem) rotate(225deg); }
.lang ul {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 10rem;
  padding-block: 0.375rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.lang a { display: flex; align-items: center; gap: 0.625rem; padding: 0.6875rem 1rem; white-space: nowrap; transition: color var(--t-fast); }
.lang a:hover, .lang a[aria-current] { color: var(--gold); }

/* Ảnh đầu trang */
.hero { position: relative; margin-top: -6rem; border-bottom: 1px solid var(--gold); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 11, 6, 0.84) 0, rgba(20, 11, 6, 0.5) 24%, rgba(20, 11, 6, 0.38) 40%, transparent 60%);
}
.hero-body { position: relative; z-index: 1; padding-inline: var(--gutter); max-width: 1920px; margin-inline: auto; }
.hero-home .hero-body { min-height: 53.4rem; padding-top: 15.5rem; }
.hero-menu .hero-body { min-height: 31.6rem; padding-top: 8rem; }
.hero-mark { width: 7.5rem; height: 7.5rem; margin: 0 0 1.5rem 5.5rem; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 40.5rem;
  color: var(--gold);
  font-size: 1.125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--gold); }
.hero h1 { margin-top: 1rem; font: 500 2.875rem/1.24 var(--serif); text-shadow: 0 1px 14px rgba(20, 11, 6, 0.75); }
.hero p { margin-top: 1.25rem; max-width: 42rem; font-size: 1.1875rem; line-height: 1.35; text-shadow: 0 1px 10px rgba(20, 11, 6, 0.85); }
.hero-actions { display: flex; gap: 1.375rem; margin-top: 2.25rem; }
.hero-actions .btn { width: 13.5rem; }

/* Về chúng tôi + món đặc trưng */
.tag {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--gold);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag::after { content: ''; flex: 0 1 7.5rem; height: 1px; background: var(--gold); }
.intro {
  display: grid;
  grid-template-columns: 24.2fr 22.6fr 48fr;
  gap: 1.5rem;
  padding-block: 2.5rem 3rem;
}
.intro-text h2 { margin-top: 1.25rem; font: 500 1.5rem/1.3 var(--serif); }
.intro-text p { margin-top: 1.25rem; font-size: 1.0625rem; line-height: 1.4; color: var(--cream-soft); }
.text-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; font-size: 1.0625rem; }
.text-link:hover { color: var(--gold); }
.intro-photo .zoom { height: 100%; }
.intro-photo img { width: 100%; height: 100%; object-fit: cover; }
.zoom, .dish-photo, .best-photo { position: relative; display: block; overflow: hidden; }
.zoom, .dish-photo { border: 1px solid var(--line); }
.zoom { cursor: zoom-in; }
.zoom::after {
  content: '+';
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--scrim-panel);
  color: var(--gold);
  font: 400 1.125rem/1 var(--sans);
}
@media (hover: hover) {
  .zoom::after { opacity: 0; transition: opacity var(--t-base); }
  .zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
}
.dishes-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; }
.dishes-head .text-link { margin: 0; color: var(--gold); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; }
.dishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.dish img { width: 100%; aspect-ratio: 1.64; object-fit: cover; }
.dish h3 { margin-top: 0.875rem; font: 500 1.3125rem/1.25 var(--serif); color: var(--gold); }
.dish p { margin-top: 0.5rem; font-size: 1rem; line-height: 1.4; color: var(--cream-soft); }
.dish .from { margin-top: 0.75rem; color: var(--cream); font-size: 0.9375rem; }
.dish .from::before { content: '• '; }

/* Không gian cơ sở */
.branches { padding-block: 1rem 5rem; }
.branch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 4rem; align-items: start; }
.branches > .tag + .branch { margin-top: 1.5rem; }
.branch img { width: 100%; aspect-ratio: 2.27; object-fit: cover; }
.branch:nth-of-type(even) .branch-text { order: -1; }
.branch h3 { font: 500 1.625rem/1.2 var(--serif); color: var(--gold); }
.branch .area { font-size: 1rem; color: var(--cream-soft); }
.branch p:last-child { margin-top: 1.5rem; font-size: 1.0625rem; line-height: 1.4; }

/* Chân trang */
.site-footer { background: var(--bg); border-top: 1px solid var(--gold); }
.footer-in {
  display: grid;
  grid-template-columns: 22rem 16rem 1.2fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-block: 2rem;
  font-size: 1.0625rem;
  line-height: 1.5;
}
.footer-brand { padding-right: 2.5rem; border-right: 1px solid var(--line); text-align: center; }
.footer-brand img { width: 4.25rem; height: 4.25rem; margin-inline: auto; }
.footer-brand .logo { display: block; margin-top: 0.5rem; }
.footer-brand small { display: block; margin-top: 0.5rem; font-size: 1rem; letter-spacing: 0.04em; }
.footer-col { align-self: stretch; }
.footer-col + .footer-col { border-left: 1px solid var(--line); padding-left: 2rem; }
.footer-col:last-child { border-left: 0; padding-left: 0; }
.footer-col h2 { font: 500 1.0625rem/1.5 var(--sans); color: var(--gold); }
.footer-col li { margin-top: 0.5rem; padding-left: 1rem; position: relative; }
.footer-col li::before { content: '•'; position: absolute; left: 0; }
.footer-col a:hover { color: var(--gold); }
.footer-col a[href^='tel'] { display: block; }

/* Thực đơn */
.section-title {
  margin-block: 3rem 2.5rem;
  color: var(--gold-deep);
  font: 500 2.625rem/1.2 var(--serif);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.menu-grid { display: grid; grid-template-columns: 30.75fr 33.45fr 30.9fr; row-gap: 2rem; }
.menu-col { min-width: 0; padding-inline: 1.375rem 1.25rem; border-left: 1px solid var(--line); }
.menu-col:nth-child(3n) { padding-right: 0; }
.menu-col.first { padding-left: 0; border-left: 0; }
.cat-head { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: end; margin-bottom: 1.25rem; }
.cat-head h3 { grid-column: 1; font: 400 1rem/1.2 var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.cat-head span { grid-column: 1; font-size: max(13px, 0.8125rem); letter-spacing: 0.04em; color: var(--cream-soft); text-transform: uppercase; }
.cat-head::after { content: ''; grid-column: 2; grid-row: 2; align-self: center; max-width: 7.5rem; height: 1px; background: var(--gold); }
.cat-head:not(:has(span))::after { grid-row: 1; }
.sizes { grid-column: 1 / -1; }
.items li { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; margin-bottom: 1.25rem; }
.items .name { font: 500 1.25rem/1.25 var(--serif); text-transform: uppercase; }
.items .en { grid-column: 1; font-size: 1rem; line-height: 1.3; color: var(--cream-soft); }
.price { font: 500 1.25rem/1.25 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--gold); }
.items .price { grid-column: 2; grid-row: 1; }

.steak-table { display: grid; grid-template-columns: 1fr 28% 28%; align-items: start; }
.steak-table .cat-head { margin-bottom: 0; }
.size-label { font: 500 1.0625rem/1.2 var(--serif); text-align: center; text-transform: uppercase; color: var(--cream); }
.size-label small { display: block; font: 400 0.9375rem/1.3 var(--sans); text-transform: none; color: var(--cream-soft); }
.steak-row { display: contents; }
.steak-row > div { margin-top: 1.25rem; }
.steak-row .name { display: block; font: 500 1.25rem/1.25 var(--serif); text-transform: uppercase; }
.steak-row .en { display: block; font-size: 1rem; line-height: 1.3; color: var(--cream-soft); }
.steak-row .price-cell { text-align: center; }
.steak-row .span2 { grid-column: span 2; }

.sauces { margin-top: 1.75rem; }
.sauce-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sauces li { padding-left: 1rem; position: relative; margin-bottom: 0.75rem; font-size: 1.0625rem; line-height: 1.25; }
.sauces li::before { content: '•'; position: absolute; left: 0; color: var(--gold); }
.sauces small { display: block; font-size: max(13px, 0.8125rem); color: var(--cream-soft); }

.best {
  display: grid;
  grid-template-columns: 48% minmax(0, 1fr);
  gap: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.best img { width: 100%; height: 12rem; object-fit: cover; }
.best + .best { margin-top: 0.875rem; }
.best-text { display: flex; flex-direction: column; padding-block: 0.5rem 0.75rem; min-width: 0; }
.best-label { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9375rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.04em; }
.best-label::after { content: ''; flex: 1; height: 1px; background: var(--gold); }
.best h3 { margin-top: 0.75rem; font: 500 1.25rem/1.25 var(--serif); text-transform: uppercase; }
.best p { margin-top: 0.25rem; font-size: 1rem; line-height: 1.3; color: var(--cream-soft); }
.best .foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: auto; padding-top: 0.5rem; font-size: 1rem; }
.best .foot .price { margin-left: auto; }

/* Danh sách rượu */
.wine-group { margin-bottom: 2.5rem; }
.wine-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.wine { margin-top: 1rem; }
.wine-card {
  display: grid;
  grid-template-columns: 5.25rem 1fr;
  gap: 1.5rem;
  padding: 1rem 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-top: 0;
}
.wine-card img { width: 100%; height: 15.5rem; object-fit: contain; margin-top: 1rem; }
.wine-card > div { min-width: 0; }
.wine-head { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; }
.wine h4 { font: 500 1.5rem/1.25 var(--serif); color: var(--gold); text-transform: uppercase; }
.wine .price { font-size: 1.625rem; white-space: nowrap; }
.wine .price small { font: 400 max(13px, 0.8125rem)/1 var(--sans); vertical-align: 0.75em; color: var(--cream-soft); margin-left: 0.125rem; }
.wine .info { grid-column: 1 / -1; font-size: 1rem; color: var(--cream-soft); }
.wine-card p + p { margin-top: 0.75rem; }
.wine .desc { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.4; }
.tax-note { padding-block: 1rem 3rem; text-align: center; font: italic 500 1.25rem/1.3 var(--serif); }
.tax-note small { display: block; font: 400 max(13px, 0.875rem)/1.3 var(--sans); }

/* Liên hệ: mỗi cơ sở một thẻ riêng trên nền ảnh, nhận ra ngay nhờ ảnh và tên */
.contact-main {
  position: relative;
  margin-top: -6rem;
  isolation: isolate;
  overflow: hidden;
  padding: 9.5rem var(--gutter) 5rem;
}
.contact-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.contact-main::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 11, 6, 0.72); }
.contact-panel { position: relative; max-width: 71.25rem; margin-inline: auto; }
.contact-panel h1 { padding-right: 3.5rem; font: 500 2.5rem/1.2 var(--serif); text-shadow: 0 1px 14px rgba(20, 11, 6, 0.8); }
.contact-panel .sub { font: italic 500 1.5rem/1.3 var(--serif); text-shadow: 0 1px 14px rgba(20, 11, 6, 0.8); }
.contact-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 4px;
  background: var(--gold);
  color: var(--ink);
  transition: background-color var(--t-fast);
}
.contact-close:hover { background: var(--gold-soft); }
.contact-close .icon { width: 1.125rem; height: 1.125rem; }
.fanlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.25em;
  text-shadow: 0 1px 10px rgba(20, 11, 6, 0.9);
  transition: color var(--t-fast);
}
.fanlink:hover { color: var(--gold); }
.fanlink .icon { flex: none; width: 1.25rem; height: 1.25rem; }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2rem; }
.place { overflow: hidden; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.place-photo { width: 100%; aspect-ratio: 2.27; object-fit: cover; }
.place-body { padding: 1.125rem 1.25rem 1.25rem; }
.place h2 { font: 500 1.625rem/1.2 var(--serif); color: var(--gold); }
.place-addr { margin-top: 0.375rem; font-size: 1rem; line-height: 1.4; color: var(--cream-soft); }
.place-actions { display: flex; gap: 0.625rem; margin-top: 1rem; }
.place-btn {
  flex: 5 1 30%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: max(3rem, 44px);
  padding: 0.5rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  font-size: 1rem;
  white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.place-btn .icon { flex: none; width: 1.125rem; height: 1.125rem; }
.place-btn:hover { background: var(--gold-wash); }
.place-btn.call { flex: 6 1 45%; background: var(--gold); color: var(--ink); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
.place-btn.call:hover { background: var(--gold-soft); }

.not-found { min-height: 60vh; padding-block: 6rem; }
.not-found h1 { font: 500 2.5rem/1.2 var(--serif); }
.not-found p { margin-top: 1rem; }
.not-found-langs { margin-top: 3rem; color: var(--cream-soft); }
.not-found-langs a { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; }
.not-found-langs a:hover { color: var(--gold); }

/* Về chúng tôi */
.about { max-width: 82rem; margin-inline: auto; padding: 2.25rem 1.5rem 5.5rem; text-align: center; }
.about-logo { width: 10rem; height: auto; margin-inline: auto; }
.about h1 { margin-top: 0.75rem; font: 500 2.5rem/1.24 var(--serif); }
.about-line { width: 15rem; height: 1px; margin: 1.75rem auto; background: var(--gold); }
.about p { font-size: 1.75rem; line-height: 1.34; }
.about p + p { margin-top: 2.25rem; }

/* Phóng to ảnh */
.lightbox {
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(12, 7, 4, 0.97);
  color: var(--cream);
  cursor: zoom-out;
  touch-action: none;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { display: grid; justify-items: center; gap: 0.75rem; margin: 0; }
.lb-img {
  width: auto;
  max-width: calc(100vw - 11rem);
  height: auto;
  max-height: calc(100vh - 8rem);
  max-height: calc(100dvh - 8rem);
  opacity: 0;
  -webkit-user-select: none;
  user-select: none;
}
.lb-img.ready { opacity: 1; }
.lb-cap { padding-inline: 1rem; color: var(--cream-soft); font: italic 400 1.125rem/1.3 var(--serif); text-align: center; }
.lb-close, .lb-nav {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.lb-close { top: max(14px, env(safe-area-inset-top)); right: 14px; background: var(--gold); color: var(--ink); font: 400 32px/1 var(--sans); }
.lb-close:hover { background: var(--gold-soft); }
.lb-nav { top: calc(50% - 26px); background: var(--scrim-panel); color: var(--gold); }
.lb-nav:hover { background: var(--gold); color: var(--ink); }
.lb-nav .icon-arrow { width: 1.75rem; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-prev .icon-arrow { transform: rotate(180deg); }

/* Màn nhỏ không đủ chỗ cho tên ngôn ngữ: nút chỉ hiện cờ, bấm vào mới xổ ra đủ tên */
@media (max-width: 1365px) {
  .lang-name { display: none; }
}

/* Máy bảng và điện thoại */
@media (max-width: 1199px) {
  :root { --gutter: clamp(20px, 5vw, 60px); }
  html { font-size: 16px; }
  body { font-size: 1rem; }
  .site-header { grid-template-columns: 1fr auto; row-gap: 0.25rem; height: auto; padding-block: 0.5rem 0.25rem; background: var(--bg); }
  .logo { padding-block: 0.75rem; font-size: 1.5rem; }
  .site-header .logo { font-size: 1.5rem; }
  .footer-brand .logo { padding-block: 0; }
  .site-nav { justify-self: stretch; grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 0.5rem; padding-left: 0; font-size: 0.9375rem; }
  .site-nav a { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-block: 0; }
  .site-header .btn { width: auto; min-width: 0; min-height: 2.75rem; padding-inline: 1.25rem; font-size: 1rem; }
  .header-end { gap: 0.75rem; }
  .hero { margin-top: 0; }
  .hero::after { display: none; }
  .hero-img { position: static; height: auto; aspect-ratio: 1.25; }
  .hero-home .hero-body, .hero-menu .hero-body { min-height: 0; padding-block: 1.5rem 2rem; }
  .hero-mark { display: none; }
  .eyebrow { font-size: 0.8125rem; white-space: normal; }
  .hero h1 { margin-top: 0.75rem; font-size: 1.625rem; }
  .hero p { font-size: 1rem; }
  .hero-actions { margin-top: 1.5rem; gap: 0.75rem; }
  .hero-actions .btn { flex: 1; width: auto; min-width: 0; gap: 0.5rem; padding-inline: 0.5rem; font-size: 1rem; }
  .text-link { min-height: 2.75rem; }
  .text-link .icon-arrow { width: 1.75rem; }
  .hero-actions .icon-arrow { width: 1.25rem; }
  .intro { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .intro-photo img { aspect-ratio: 1.5; height: auto; }
  .intro-text h2, .branch h3 { font-size: 1.375rem; }
  .intro-text p, .branch p:last-child { font-size: 1rem; }
  .text-link, .dishes-head .text-link { font-size: 0.9375rem; }
  .dishes-head { flex-wrap: wrap; column-gap: 1rem; }
  .dishes-head .tag::after { display: none; }
  .dishes-head .text-link { min-height: 2.75rem; font-size: 0.8125rem; white-space: nowrap; }
  .dishes { grid-template-columns: 1fr; gap: 1.25rem; }
  .dish { display: grid; grid-template-columns: 42% 1fr; column-gap: 1rem; }
  .dish-photo { grid-row: 1 / span 3; min-height: 8rem; }
  .dish img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .dish h3 { margin-top: 0; font-size: 1.125rem; }
  .dish p { font-size: 0.875rem; }
  .branch { grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 2.5rem; }
  .branch-text, .branch:nth-of-type(even) .branch-text { grid-column: 1 / -1; order: -1; }
  .branch img { aspect-ratio: 1.3; }
  .branch p:last-child { margin-top: 0.75rem; }
  .footer-in { grid-template-columns: 1fr; gap: 1.5rem; font-size: 0.9375rem; }
  .footer-brand { padding-right: 0; border-right: 0; }
  .footer-col a[href^='tel'] { padding-block: 0.6875rem; }
  .footer-brand .logo { font-size: 1.625rem; }
  .footer-col + .footer-col { border-left: 0; padding-left: 0; }
  .section-title { margin-block: 2rem 1.5rem; font-size: 1.875rem; }
  .menu-grid { grid-template-columns: 1fr; row-gap: 2rem; }
  .menu-col { padding-left: 0; border-left: 0; }
  .items .name, .steak-row .name, .best h3 { font-size: 1.0625rem; }
  .items .en, .steak-row .en, .best p { font-size: 0.875rem; }
  .price { font-size: 1.0625rem; }
  .steak-table { grid-template-columns: 1fr 4.75rem 4.75rem; }
  .size-label { font-size: 0.875rem; }
  .size-label small { font-size: 0.8125rem; }
  .sauces li { font-size: 0.9375rem; }
  .sauces small { font-size: 0.8125rem; }
  .best { grid-template-columns: 40% 1fr; gap: 0.875rem; }
  .best-photo { min-height: 8.5rem; }
  .best img { position: absolute; inset: 0; height: 100%; }
  .wine-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .wine-card { grid-template-columns: 3.75rem 1fr; gap: 1rem; padding: 0.75rem 0.875rem 1rem; }
  .wine-card img { height: 12rem; margin-top: 0.25rem; }
  .wine h4 { font-size: 1.125rem; }
  .wine-head { grid-template-columns: minmax(0, 1fr); }
  .wine .price { font-size: 1.125rem; }
  .wine .info { font-size: 0.8125rem; margin-top: 0.25rem; }
  .wine .desc { font-size: 0.875rem; margin-top: 0.75rem; }
  .tax-note { font-size: 1.0625rem; }
  .contact-main { margin-top: 0; padding: 1.75rem 16px 2.5rem; }
  .contact-panel h1 { font-size: 1.75rem; }
  .contact-panel .sub { font-size: 1.0625rem; }
  .places { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
  .place-body { padding: 1rem 1rem 1.125rem; }
  .place h2 { font-size: 1.5rem; }
  .about { padding: 2rem 20px 3.5rem; }
  .about-logo { width: 9rem; }
  .about h1 { font-size: 1.625rem; }
  .about-line { width: 7.5rem; margin-block: 1.25rem 1.5rem; }
  .about p { font-size: 1.0625rem; line-height: 1.5; }
  .about p + p { margin-top: 1.25rem; }
  .lb-img { max-width: 100vw; max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); }
  .lb-nav { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); }
  .lb-prev { left: calc(50% - 68px); }
  .lb-next { right: calc(50% - 68px); }
}

/* Điện thoại: chừa chỗ cho cờ giữa logo và nút Đặt Bàn */
@media (max-width: 429px) {
  .site-header { column-gap: 0.5rem; }
  .site-header .logo { font-size: 1.3125rem; }
}

/* Điện thoại nhỏ: thu chữ nút cho số +84 vừa một hàng */
@media (max-width: 400px) {
  .place-btn { gap: 0.375rem; font-size: 0.9375rem; }
}

/* Điện thoại rất nhỏ */
@media (max-width: 359px) {
  .place-actions { flex-direction: column; }
  .place-btn, .place-btn.call { flex: none; }
  .site-header .logo { font-size: 1.125rem; }
  .site-header .btn { padding-inline: 0.75rem; }
  .site-nav { font-size: 0.8125rem; }
  .header-end { gap: 0.375rem; }
  .hero-actions .icon-arrow { display: none; }
}

/* Máy bảng ngang: thực đơn 2 cột, món đặc trưng 3 cột */
@media (max-width: 1199px) {
  .hero p br { display: none; }
}

@media (min-width: 700px) and (max-width: 1199px) {
  .contact-main { padding-inline: 2rem; }
  .menu-grid { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
  .dishes { grid-template-columns: repeat(3, 1fr); }
  .dish { display: block; }
  .dish-photo { min-height: 0; }
  .dish img { position: static; height: auto; aspect-ratio: 1.64; }
  .dish h3 { margin-top: 0.75rem; }
  .wine-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Xoay ngang điện thoại: nút sang hai bên để ảnh dùng gần hết chiều cao */
@media (max-height: 500px) {
  .lb-img { max-width: calc(100vw - 9.5rem); max-height: calc(100vh - 3.25rem); max-height: calc(100dvh - 3.25rem); }
  .lightbox figure { gap: 0.25rem; }
  .lb-cap { font-size: 0.9375rem; }
  .lb-nav { top: calc(50% - 26px); bottom: auto; }
  .lb-prev { left: 14px; }
  .lb-next { right: 14px; }
}

/* Thẻ cơ sở chỉ chia 2 cột khi đủ rộng cho cả hai nút */
@media (min-width: 820px) and (max-width: 1199px) {
  .places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Chuyển động ----------
   Từ tốn như bước vào nhà hàng: màn tối mở dần, chữ hiện lần lượt, cuộn tới đâu ảnh hiện tới đó.
   Chỉ dùng opacity và transform để máy yếu vẫn mượt. Bảng giá đứng yên để đọc nhanh.
   Đầu trang nằm trên màn tối nên đứng yên khi đổi trang. */
body::after {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 100vh;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-lift) var(--ease-out);
}
html.curtain body::after, html.leaving body::after { opacity: 1; }
html.leaving body::after { transition-duration: var(--t-leave); }

@media (prefers-reduced-motion: no-preference) {
  /* Mở màn */
  .hero-img, .contact-bg { transition: transform 2600ms var(--ease-out); }
  html.curtain .hero-img, html.curtain .contact-bg { transform: scale(1.04); }
  .hero-body > *, .contact-panel, .about > :not(.reveal) {
    transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out);
  }
  html.curtain .hero-body > *, html.curtain .contact-panel, html.curtain .about > :not(.reveal) {
    opacity: 0;
    transform: translateY(1rem);
  }
  .hero-body > :nth-child(2), .about > :nth-child(2) { transition-delay: 200ms; }
  .hero-body > :nth-child(3), .about > :nth-child(3) { transition-delay: 400ms; }
  .hero-body > :nth-child(4) { transition-delay: 600ms; }
  .hero-body > :nth-child(5) { transition-delay: 800ms; }

  /* Đường vàng tự vẽ ra */
  .eyebrow::after, .tag::after, .best-label::after, .about-line {
    transform-origin: left;
    transition: transform 1800ms var(--ease-out) 300ms;
  }
  .about-line { transform-origin: center; }
  html.curtain .eyebrow::after, html.curtain .about-line,
  .motion .tag.reveal:not(.in)::after, .motion .reveal:not(.in) .tag::after, .motion .reveal:not(.in) .best-label::after {
    transform: scaleX(0);
  }

  /* Cuộn tới đâu hiện tới đó, chỉ một lần */
  .reveal { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
  .motion .reveal:not(.in) { opacity: 0; transform: translateY(1.25rem); }
  .dish:nth-child(2), .about > .reveal:nth-of-type(2), .branch > .zoom + .zoom, .place:nth-child(even) { transition-delay: 200ms; }
  .dish:nth-child(3), .about > .reveal:nth-of-type(3) { transition-delay: 400ms; }

  /* Rê chuột vào ảnh: phóng rất nhẹ, không giật */
  .zoom img, .dish-photo img, .best-photo img { transition: transform 1600ms var(--ease-out); }
  @media (hover: hover) {
    .zoom:hover img, .dish:hover img, .best:hover img { transform: scale(1.035); }
  }

  /* Phóng to ảnh */
  .lightbox[open] { animation: lb-fade 700ms var(--ease-out); }
  .lightbox.closing { opacity: 0; transition: opacity 420ms var(--ease-out); }
  .lb-img { transition: opacity 900ms var(--ease-out), transform 500ms var(--ease-out); }
  @keyframes lb-fade { from { opacity: 0; } }
}