/* =========================================================================
   Nước Restaurant v3.0.0 — main.css
   1. Nền tảng & token          6. Câu chuyện / editorial
   2. Chữ nghĩa                 7. Thực đơn
   3. Thành phần dùng chung     8. Không gian & thư viện ảnh
   4. Header & menu trượt       9. Cảm nhận · đội ngũ · báo chí · FAQ
   5. Hero                     10. Đặt bàn · Footer · Tiện ích nổi
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. NỀN TẢNG & TOKEN
   ---------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

/* Cuộn mượt gốc chỉ bật khi KHÔNG dùng engine cuộn của theme,
   tránh hai cơ chế đánh nhau gây giật. */
html:not(.nuoc-smooth) { scroll-behavior: smooth; }
html.nuoc-smooth { scroll-behavior: auto; }

body.nuoc-scope {
  margin: 0;
  background: var(--n-bg);
  color: var(--n-ink);
  font-family: var(--n-body);
  font-size: var(--n-fs-body);
  font-weight: 300;
  line-height: var(--n-lh-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* BẮT BUỘC phải nằm ở đây.
   Luật display của theme luôn thắng luật [hidden]{display:none} của trình duyệt
   (CSS của theme ưu tiên hơn CSS mặc định, bất kể độ đặc hiệu). Thiếu dòng này,
   khung xem ảnh .nuoc-lightbox tuy đang mang thuộc tính hidden vẫn giữ
   display:grid, phủ kín màn hình ở z-index 210 với opacity:0 — mắt không thấy
   nhưng nuốt sạch mọi cú click trên toàn trang. */
[hidden] { display: none !important; }

.nuoc-scope img,
.nuoc-scope svg,
.nuoc-scope video { display: block; max-width: 100%; }

.nuoc-scope img { height: auto; }

.nuoc-scope a { color: inherit; text-decoration: none; }

.nuoc-scope ul,
.nuoc-scope ol { list-style: none; margin: 0; padding: 0; }

.nuoc-scope button { font: inherit; color: inherit; }

.nuoc-scope :focus-visible {
  outline: 2px solid var(--n-brand-dark);
  outline-offset: 3px;
}

::selection { background: rgba(var(--n-brand-rgb), .3); }

.nuoc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--n-ink);
  color: #fff;
  padding: 14px 22px;
  font-size: 13px;
}
.nuoc-skip:focus { left: 12px; top: 12px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Khung nội dung */
.nuoc-cont {
  width: min(var(--n-max), calc(100% - 2 * clamp(20px, 5vw, 64px)));
  margin-inline: auto;
}

.nuoc-narrow { max-width: 800px; }
.nuoc-head.nuoc-narrow.is-center,
.nuoc-head.nuoc-narrow.is-right { margin-inline: auto; }

.nuoc-sec {
  padding-block: var(--n-sec-pad);
  background: var(--n-bg);
  position: relative;
}
.nuoc-sec.alt { background: var(--n-bg-alt); }
.nuoc-sec.dark { background: var(--n-dark); color: #e7e1d8; }

/* Chống layout shift khi ảnh chưa tải */
.nuoc-fig {
  margin: 0;
  overflow: hidden;
  border-radius: var(--n-radius);
  background: rgba(var(--n-ink-rgb), .05);
  position: relative;
}
.nuoc-fig[style*="--fig-ratio"] { aspect-ratio: var(--fig-ratio); }
.nuoc-fig img { width: 100%; height: 100%; object-fit: cover; }
.nuoc-fig figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 18px 14px;
  font-size: 11px;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .55), transparent);
}
.nuoc-fig[data-lightbox] { cursor: zoom-in; }

/* -------------------------------------------------------------------------
   2. CHỮ NGHĨA
   Khách góp ý: "bố cục thiếu cân đối, xuống dòng ngẫu hứng".
   Xử lý bằng text-wrap balance/pretty + giới hạn độ dài dòng theo ký tự.
   ---------------------------------------------------------------------- */

.nuoc-h1,
.nuoc-h2,
.nuoc-h3 {
  font-family: var(--n-head);
  font-weight: 400;
  line-height: var(--n-lh-head);
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;         /* tiêu đề tự chia dòng cân hai bên */
  hyphens: none;
}

.nuoc-h2 {
  font-size: var(--n-fs-h2);
  margin-block: 16px 22px;
  max-width: 22ch;
}
.nuoc-head.is-center .nuoc-h2 { margin-inline: auto; }
.nuoc-head.is-right .nuoc-h2 { margin-inline: auto 0; }

.nuoc-h3 { font-size: var(--n-fs-h3); }

.nuoc-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: var(--n-fs-eyebrow);
  letter-spacing: var(--n-ls-eyebrow);
  text-transform: uppercase;
  color: var(--n-brand-dark);
  font-weight: 500;
}
.nuoc-head.is-center .nuoc-eyebrow { justify-content: center; }
.nuoc-head.is-right .nuoc-eyebrow { justify-content: flex-end; }

/* Dấu gợn nước — chi tiết nhận diện riêng của Nước */
.nuoc-ripple {
  flex: 0 0 46px;
  height: 6px;
  background:
    radial-gradient(circle at 50% 120%, transparent 62%, currentColor 63%, currentColor 70%, transparent 71%) 0 0/12px 12px repeat-x;
  opacity: .5;
}
.nuoc-head.is-center .nuoc-eyebrow .nuoc-ripple { display: none; }

.nuoc-lead {
  font-size: var(--n-fs-lead);
  color: var(--n-soft);
  max-width: var(--n-measure);
  text-wrap: pretty;          /* không để lại một từ lẻ loi cuối đoạn */
  hanging-punctuation: first last;
}
/* Đoạn văn ngắn (dưới ~3 dòng) thì canh cân hai bên cho đều mắt. */
.nuoc-lead p { text-wrap: pretty; }
.nuoc-lead > :first-child { margin-top: 0; }
.nuoc-lead > :last-child { margin-bottom: 0; }
.nuoc-lead p { margin-block: 0 1.1em; }
.nuoc-lead a { color: var(--n-brand-dark); border-bottom: 1px solid rgba(var(--n-brand-rgb), .5); }
.nuoc-lead strong { font-weight: 500; color: var(--n-ink); }
.nuoc-lead ul { list-style: none; }
.nuoc-lead ul li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.nuoc-lead ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--n-brand);
}
.nuoc-lead ol { list-style: decimal; padding-left: 20px; }

.nuoc-head.is-center .nuoc-lead { margin-inline: auto; }
/* Đoạn dẫn dưới tiêu đề thường ngắn — canh cân hai bên để không bị rớt chữ lẻ. */
.nuoc-head .nuoc-lead,
.nuoc-head .nuoc-lead p { text-wrap: balance; }
.nuoc-head.is-right .nuoc-lead { margin-inline: auto 0; }

/* Trích dẫn — cỡ chữ do Theme Options quản lý nên luôn ăn khớp dòng phía trên */
.nuoc-quote {
  font-family: var(--n-head);
  font-style: italic;
  font-size: var(--n-fs-quote);
  line-height: 1.45;
  color: var(--n-ink);
  margin: 34px 0 0;
  padding-left: 22px;
  max-width: 34ch;
  text-wrap: balance;
  position: relative;
}
/* Vạch mảnh màu thương hiệu làm điểm tựa, tránh cảm giác hụt hẫng
   khi chuyển từ đoạn văn sang trích dẫn. */
.nuoc-quote::before {
  content: '';
  position: absolute;
  left: 0;
  top: .28em;
  bottom: .28em;
  width: 2px;
  background: linear-gradient(to bottom, var(--n-brand), rgba(var(--n-brand-rgb), .15));
}
.is-center .nuoc-quote,
.nuoc-head.is-center .nuoc-quote { padding-left: 0; padding-top: 22px; }
.is-center .nuoc-quote::before,
.nuoc-head.is-center .nuoc-quote::before {
  left: 50%;
  top: 0;
  bottom: auto;
  width: 44px;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(to right, rgba(var(--n-brand-rgb), .15), var(--n-brand), rgba(var(--n-brand-rgb), .15));
}
.nuoc-quote > :first-child { margin-top: 0; }
.nuoc-quote > :last-child { margin-bottom: 0; }
.nuoc-quote p { margin: 0 0 .5em; }

.is-center .nuoc-quote,
.nuoc-center .nuoc-quote { margin-inline: auto; }

/* Canh chữ theo tuỳ chọn từng khối */
.is-left { text-align: left; }
.is-center { text-align: center; }
.is-right { text-align: right; }

.is-center .nuoc-lead,
.is-center .nuoc-h2,
.is-center .nuoc-quote { margin-inline: auto; }

/* -------------------------------------------------------------------------
   3. THÀNH PHẦN DÙNG CHUNG
   ---------------------------------------------------------------------- */

.nuoc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--n-ink);
  position: relative;
}
.nuoc-btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transition: transform .55s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-btn:hover::after { transform: scaleX(.35); transform-origin: left; }
.nuoc-btn svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-btn:hover svg { transform: translateX(5px); }

.nuoc-btn.solid {
  background: var(--n-brand-dark);
  color: #fff;
  padding: 15px 30px;
  border-radius: var(--n-radius);
}
.nuoc-btn.solid::after { display: none; }
.nuoc-btn.solid:hover { background: var(--n-ink); }

/* Nút xem thêm */
.nuoc-morebar { margin-top: 34px; text-align: center; }
.nuoc-morebar.is-left { text-align: left; }

.nuoc-see-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 11px 2px;
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--n-brand-dark);
  border-bottom: 1px solid rgba(var(--n-brand-rgb), .55);
}
.nuoc-see-more i {
  width: 9px; height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-see-more[aria-expanded="true"] i { transform: translateY(2px) rotate(-135deg); }

/* Vùng nội dung mở rộng — dùng grid-template-rows để trượt mượt, không nhảy */
.nuoc-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .7s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.nuoc-more > * { overflow: hidden; min-height: 0; }
.nuoc-more.open { grid-template-rows: 1fr; opacity: 1; }

/* Hiệu ứng xuất hiện khi cuộn tới */
.nuoc-reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-reveal.in { opacity: 1; transform: none; }

/* Phần tử vừa reveal vừa stagger: để con tự vào, cha không mờ thêm lần nữa. */
.nuoc-reveal.nuoc-stagger { opacity: 1; transform: none; transition: none; }

/* Con nối tiếp nhau — độ trễ do JS gán qua --i */
.nuoc-stagger > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.nuoc-stagger.in > * { opacity: 1; transform: none; }

/* Tiêu đề hiện dần theo dòng */
/* Khung che để chữ trượt lên từng dòng.
   overflow:hidden cắt đúng theo hộp dòng, mà hộp dòng chỉ cao 1.14em nên
   phần đuôi chữ g, y, p, q thò xuống dưới bị cắt cụt — đúng lỗi "mất nét chữ g".
   Nới hộp xuống 0.26em rồi kéo lại bằng margin âm: chữ hiện đủ nét mà khoảng
   cách dòng không đổi một pixel nào. Phần trên nới nhẹ cho dấu chồng tiếng Việt
   (ữ, ườ, ẫ) không chạm mép. */
.nuoc-split .nuoc-line {
  display: block;
  overflow: hidden;
  padding-top: .10em;
  padding-bottom: .26em;
  margin-top: -.10em;
  margin-bottom: -.26em;
}
.nuoc-split .nuoc-line > span {
  display: block;
  /* Hộp cao thêm 0.36em nên phải đẩy xuống sâu hơn 105% mới giấu hết chữ.
     150% đủ cho cả dải line-height mà quản trị được phép chỉnh (0.9 đến 2). */
  transform: translate3d(0, 150%, 0);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--l, 0) * 85ms);
}
.nuoc-reveal.in .nuoc-split .nuoc-line > span,
.nuoc-split.in .nuoc-line > span { transform: none; }

/* Chữ "mực nước dâng" cho ảnh — dấu ấn riêng của theme */
.nuoc-waterline { clip-path: inset(100% 0 0 0); transition: clip-path 1.35s cubic-bezier(.22, 1, .28, 1); }
.in .nuoc-waterline,
.nuoc-waterline.in { clip-path: inset(0 0 0 0); }

/* Trạng thái mở cửa */
.nuoc-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nuoc-status i {
  width: 10px; height: 10px;
  min-width: 10px;
  border-radius: 50%;
  background: currentColor;
}
.nuoc-status.is-open { color: var(--n-status-open, #4caf7d); }
.nuoc-status.is-open i { animation: nuocPulse 2.4s infinite; }
.nuoc-status.is-closed { color: var(--n-status-closed, #b9b0a4); }

@keyframes nuocPulse {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70% { box-shadow: 0 0 0 7px transparent; opacity: .85; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}

/* Breadcrumb */
.nuoc-crumbs { margin-bottom: 26px; }
.nuoc-crumbs ol { display: flex; flex-wrap: wrap; gap: 9px; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: var(--n-soft); }
.nuoc-crumbs li + li::before { content: '·'; margin-right: 9px; opacity: .55; }
.nuoc-crumbs a { color: var(--n-brand-dark); }
.nuoc-crumbs a:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   4. HEADER & MENU TRƯỢT
   ---------------------------------------------------------------------- */

.nuoc-hd {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  height: 92px;
  color: #fff;
  background: transparent;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1),
              background-color .5s ease,
              height .5s ease,
              box-shadow .5s ease,
              color .4s ease;
  will-change: transform;
}
.nuoc-hd-in {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-inline: clamp(18px, 4vw, 64px);
}
.nuoc-hd-left { display: flex; align-items: center; gap: 22px; }
.nuoc-hd-right { display: flex; align-items: center; justify-content: flex-end; gap: 26px; }

.nuoc-brand { display: grid; place-items: center; min-width: var(--n-logo-solid); transition: opacity .45s ease; }
.nuoc-brand img { width: auto; max-width: var(--n-logo); max-height: 56px; object-fit: contain; transition: max-width .45s ease; }
.nuoc-brand .logo-solid { display: none; }

/* Trên trang chủ, khi hero còn chiếm màn hình thì ẩn logo nhỏ để không đụng logo lớn */
.nuoc-home .nuoc-hd:not(.solid) .nuoc-brand { opacity: 0; pointer-events: none; }

.nuoc-hd.solid {
  height: 74px;
  background: var(--n-header-bg, var(--n-bg));
  background: color-mix(in srgb, var(--n-header-bg, var(--n-bg)) 92%, transparent);
  color: var(--n-ink);
  box-shadow: 0 1px 0 rgba(var(--n-ink-rgb), .1);
}
.nuoc-hd.solid.blurred { backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
.nuoc-hd.solid .logo-normal { display: none; }
.nuoc-hd.solid .logo-solid { display: block; max-width: var(--n-logo-solid); max-height: 52px; }
.nuoc-hd.hide { transform: translate3d(0, -100%, 0); }

.nuoc-burger {
  border: 0; background: none; padding: 0;
  width: 34px; height: 18px;
  position: relative; cursor: pointer;
}
.nuoc-burger span {
  position: absolute; left: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), width .5s ease;
}
.nuoc-burger span:first-child { top: 4px; }
.nuoc-burger span:last-child { bottom: 4px; width: 68%; }
.nuoc-burger:hover span:last-child { width: 100%; }

.nuoc-lang { display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .12em; }
.nuoc-lang a { opacity: .45; transition: opacity .3s ease; }
.nuoc-lang a:hover { opacity: .8; }
.nuoc-lang a.active { opacity: 1; color: var(--n-brand); }
.nuoc-lang span { opacity: .3; }

.nuoc-desktop-nav { justify-self: end; flex: 0 0 auto; overflow: visible; }
.nuoc-hd-right { overflow: visible; }
.nuoc-hd-cta { flex: 0 0 auto; }
.nuoc-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); }
.nuoc-nav > li { position: relative; }
.nuoc-nav a {
  display: block;
  padding: 26px 0;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  position: relative;
}
.nuoc-nav > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-nav > li:hover > a::after,
.nuoc-nav > li.current-menu-item > a::after { transform: scaleX(1); transform-origin: left; }

.nuoc-nav .sub-menu {
  position: absolute;
  top: 100%; right: 0;
  min-width: 262px;
  background: var(--n-dark);
  color: #fff;
  padding: 16px 0;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1), visibility .35s;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .18);
}
.nuoc-nav li:hover > .sub-menu,
.nuoc-nav li:focus-within > .sub-menu,
.nuoc-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }

/* Mục có menu con: thêm dấu mũi tên nhỏ cho khách biết là bấm được. */
.nuoc-nav > li.menu-item-has-children > a { padding-right: 15px; }
.nuoc-nav > li.menu-item-has-children > a::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px; height: 6px;
  margin-top: -4px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform .4s ease;
}
.nuoc-nav > li.menu-item-has-children:hover > a::before,
.nuoc-nav > li.menu-item-has-children.is-open > a::before { transform: rotate(-135deg); margin-top: -1px; }
.nuoc-nav .sub-menu a { padding: 10px 24px; font-size: 13px; letter-spacing: .03em; text-transform: none; }
.nuoc-nav .sub-menu a::after { display: none; }
.nuoc-nav .sub-menu a:hover { background: rgba(255, 255, 255, .06); }
.nuoc-nav .sub-menu li { position: relative; }
.nuoc-nav .sub-menu .sub-menu { top: 0; right: 100%; }

.nuoc-hd-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid currentColor;
  border-radius: var(--n-radius);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .4s ease, color .4s ease;
}
.nuoc-hd-cta:hover { background: currentColor; }
.nuoc-hd-cta:hover span { mix-blend-mode: difference; }
.nuoc-hd.solid .nuoc-hd-cta { border-color: var(--n-brand-dark); color: var(--n-brand-dark); }
.nuoc-hd.solid .nuoc-hd-cta:hover { background: var(--n-brand-dark); color: #fff; }

/* Menu trượt */
.nuoc-offcanvas { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.nuoc-sb-backdrop {
  position: absolute; inset: 0;
  border: 0;
  background: rgba(16, 15, 14, .48);
  opacity: 0;
  transition: opacity .5s ease;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.nuoc-sb-panel {
  position: absolute; left: 0; top: 0;
  height: 100%;
  width: min(520px, 92vw);
  background: var(--n-bg);
  padding: 78px 48px 40px;
  transform: translate3d(-100%, 0, 0);
  transition: transform .72s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nuoc-sb-art {
  position: absolute;
  inset: 0 0 0 min(520px, 92vw);
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path .95s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-sb-art img { width: 100%; height: 100%; object-fit: cover; }

.nuoc-offcanvas.open { pointer-events: auto; }
.nuoc-offcanvas.open .nuoc-sb-backdrop { opacity: 1; }
.nuoc-offcanvas.open .nuoc-sb-panel { transform: none; }
.nuoc-offcanvas.open .nuoc-sb-art { clip-path: inset(0); }

.nuoc-sb-close {
  position: absolute; left: 44px; top: 26px;
  border: 0; background: none;
  font-size: 34px; font-weight: 200; line-height: 1;
  cursor: pointer; color: var(--n-ink);
  transition: transform .45s ease;
}
.nuoc-sb-close:hover { transform: rotate(90deg); }
.nuoc-sb-logo img { width: auto; max-width: 152px; max-height: 84px; object-fit: contain; margin: 12px 0 34px; }
.nuoc-sb-label { font-size: 10px; letter-spacing: .22em; color: var(--n-brand-dark); margin-bottom: 14px; text-transform: uppercase; }
.nuoc-sb-menu > li { border-bottom: 1px solid rgba(var(--n-ink-rgb), .1); }
.nuoc-sb-menu a {
  font-family: var(--n-head);
  font-size: 27px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  transition: padding-left .45s cubic-bezier(.16, 1, .3, 1), color .3s ease;
}
.nuoc-sb-menu > li > a:hover { padding-left: 10px; color: var(--n-brand-dark); }
.nuoc-sb-menu .menu-item-has-children > a::after { content: '+'; font-family: var(--n-body); font-size: 17px; }
.nuoc-sb-menu .menu-item-has-children.open > a::after { content: '−'; }
.nuoc-sb-menu .sub-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1);
  padding-left: 18px;
}
.nuoc-sb-menu .sub-menu > li { overflow: hidden; }
.nuoc-sb-menu .open > .sub-menu { grid-template-rows: 1fr; }
.nuoc-sb-menu .sub-menu a { font-family: var(--n-body); font-size: 14px; padding: 8px 0; }
.nuoc-sb-connect { display: flex; gap: 20px; margin-top: 32px; font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
.nuoc-sb-connect a { border-bottom: 1px solid rgba(var(--n-ink-rgb), .25); padding-bottom: 3px; }
.nuoc-sb-meta { margin-top: 28px; font-size: 12.5px; color: var(--n-soft); }
.nuoc-sb-meta a { color: var(--n-brand-dark); }
.nuoc-lang-bottom { margin-top: 28px; }

/* -------------------------------------------------------------------------
   5. HERO — video/ảnh riêng cho desktop và mobile, luôn phủ kín, không méo
   ---------------------------------------------------------------------- */

.nuoc-hero {
  height: var(--n-hero-h-vh);
  min-height: 560px;
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  background: var(--n-dark);
}
.nuoc-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--n-hero-focus, center center);
}
@supports (height: 100svh) {
  .nuoc-hero { height: var(--n-hero-h); }
}

/* Chỉ đổi nguồn theo thiết bị khi có media mobile riêng. */
.nuoc-hero.has-mobile .nuoc-hero-media.is-mobile { display: none; }

.nuoc-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .38) 100%),
    rgba(0, 0, 0, var(--n-hero-overlay));
}

.nuoc-hero-center { position: relative; text-align: center; padding: 24px; }
.nuoc-hero-logo {
  width: min(var(--n-hero-logo), 68vw);
  max-height: 30svh;
  object-fit: contain;
  margin-inline: auto;
}
.nuoc-hero-logo.mode-white { filter: brightness(0) invert(1); }
.nuoc-hero-center p {
  font-family: var(--n-head);
  font-style: italic;
  font-size: clamp(17px, 1.9vw, 24px);
  margin: 22px auto 0;
  max-width: 26ch;
  text-wrap: balance;
}

/* Toàn bộ nội dung hero vào chậm rãi khi trang mở */
.nuoc-hero-center > * {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: nuocHeroIn 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
}
.nuoc-hero-center > *:nth-child(2) { animation-delay: .18s; }
@keyframes nuocHeroIn { to { opacity: 1; transform: none; } }

.nuoc-scroll-cue {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  animation: nuocCue 2.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
.nuoc-scroll-cue svg { width: 24px; fill: none; stroke: #fff; stroke-width: 1.2; }
.nuoc-scroll-cue::before {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
}
@keyframes nuocCue { 50% { transform: translate(-50%, 9px); } }

/* Trình duyệt chặn tự phát (tiết kiệm pin, Data Saver, iOS Low Power Mode)
   thì hiện nút chạm-để-phát. Ảnh chờ vẫn hiển thị nên hero không bao giờ trống. */
.nuoc-hero.autoplay-blocked { cursor: pointer; }
.nuoc-hero.autoplay-blocked .nuoc-hero-play-hint {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.nuoc-hero-play-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.85);
  z-index: 3;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.16, 1, .3, 1), visibility .45s;
}
.nuoc-hero-play-hint svg { width: 24px; fill: #fff; margin-left: 3px; }

/* Logo hero lùi xuống một chút để không đè lên nút chạm-để-phát. */
.nuoc-hero.autoplay-blocked .nuoc-hero-center { transform: translateY(-46px); }

@media (max-width: 720px) {
  .nuoc-hero-play-hint { width: 58px; height: 58px; }
  .nuoc-hero.autoplay-blocked .nuoc-hero-center { transform: translateY(-38px); }
}

.nuoc-hero-tools {
  position: absolute;
  right: clamp(16px, 3vw, 40px);
  bottom: 34px;
  display: flex;
  gap: 10px;
}
.nuoc-hero-tools button {
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(0, 0, 0, .18);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .4s ease, border-color .4s ease;
  backdrop-filter: blur(6px);
}
.nuoc-hero-tools button:hover { background: rgba(0, 0, 0, .42); border-color: rgba(255, 255, 255, .6); }
.nuoc-hero-tools svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nuoc-hero-tools .on { display: none; }
.nuoc-hero-tools [aria-pressed="true"] .on { display: block; }
.nuoc-hero-tools [aria-pressed="true"] .off { display: none; }

/* -------------------------------------------------------------------------
   6. CÂU CHUYỆN / EDITORIAL
   ---------------------------------------------------------------------- */

.nuoc-editorial {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.nuoc-editorial.media-right .nuoc-editorial-media { order: 2; }
.nuoc-editorial.media-right .nuoc-editorial-copy { order: 1; }
.nuoc-editorial.stacked { grid-template-columns: 1fr; justify-items: center; }
.nuoc-editorial.stacked .nuoc-editorial-media { width: min(760px, 100%); }
.nuoc-editorial.stacked .nuoc-editorial-copy { max-width: 760px; }
/* Chưa chọn ảnh minh hoạ: dồn khối chữ vào giữa cho cân, không để trống
   nửa trang bên phải. Chọn ảnh trong Theme Options là bố cục về hai cột. */
.nuoc-editorial.no-media { grid-template-columns: minmax(0, 760px); justify-content: center; }
.nuoc-editorial.no-media .nuoc-editorial-media { display: none; }
.nuoc-editorial.no-media .nuoc-editorial-copy { max-width: 760px; }
.nuoc-editorial.no-media .nuoc-h2 { max-width: 26ch; }

.nuoc-editorial-media { position: relative; }
.nuoc-editorial-media .nuoc-fig { aspect-ratio: 4 / 5; }
.nuoc-editorial-media img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }

.nuoc-editorial-copy > * + * { margin-top: 0; }
.nuoc-editorial-copy .nuoc-lead + .nuoc-lead { margin-top: 20px; }
.nuoc-editorial-copy .nuoc-quote { margin-top: 34px; }
/* Đoạn cuối trong mỗi khối chữ không để lại khoảng thừa phía dưới. */
.nuoc-editorial-copy .nuoc-lead > p:last-child { margin-bottom: 0; }
.nuoc-editorial-copy .nuoc-more { margin-top: 8px; }
.nuoc-editorial-copy .nuoc-morebar { margin-top: 20px; text-align: inherit; }

.nuoc-editorial.is-center .nuoc-editorial-copy,
.nuoc-editorial.is-center .nuoc-lead,
.nuoc-editorial.is-center .nuoc-quote,
.nuoc-editorial.is-center .nuoc-h2 { margin-inline: auto; }

/* -------------------------------------------------------------------------
   7. THỰC ĐƠN
   ---------------------------------------------------------------------- */

.nuoc-menu-grid {
  display: grid;
  grid-template-columns: repeat(var(--n-cols, 3), minmax(0, 1fr));
  gap: clamp(18px, 2vw, 30px);
  align-items: start;
}
.nuoc-menu-grid + .nuoc-more .nuoc-menu-grid { margin-top: clamp(18px, 2vw, 30px); }

.nuoc-dish-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255, 255, 255, .34);
  border-radius: var(--n-radius);
  overflow: hidden;
}
.nuoc-dish-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(var(--n-ink-rgb), .06);
}
.nuoc-dish-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-dish-card:hover .nuoc-dish-media img { transform: scale(1.045); }

.nuoc-dish-flag {
  position: absolute;
  left: 14px; top: 14px;
  background: var(--n-bg);
  color: var(--n-brand-dark);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.nuoc-dish-logo { display: grid; place-items: center; height: 100%; }
.nuoc-dish-logo img { width: 54%; max-width: 180px; height: auto; opacity: .38; object-fit: contain; }

.nuoc-dish-body {
  padding: 24px 6px 8px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 9px;
}
.nuoc-dish-body h3 {
  font-family: var(--n-head);
  font-weight: 400;
  font-size: var(--n-fs-h3);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.nuoc-dish-body h3 a { transition: color .35s ease; }
.nuoc-dish-card:hover h3 a { color: var(--n-brand-dark); }
.nuoc-dish-desc {
  font-size: var(--n-fs-lead);
  color: var(--n-soft);
  margin: 0;
  text-wrap: pretty;
}
.nuoc-dish-hours {
  font-size: 11.5px;
  letter-spacing: .05em;
  color: var(--n-brand-dark);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
.nuoc-dish-hours svg { width: 14px; min-width: 14px; margin-top: 3px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nuoc-dish-price { font-family: var(--n-head); font-size: 19px; color: var(--n-ink); margin: 0; }
.nuoc-dish-body .nuoc-btn { margin-top: auto; padding-top: 16px; align-self: flex-start; }

/* Trang chi tiết thực đơn */
.nuoc-dish-hero {
  position: relative;
  min-height: 58svh;
  display: grid;
  align-items: end;
  color: #fff;
  overflow: hidden;
  background: var(--n-dark);
}
.nuoc-dish-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nuoc-dish-hero::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .68), rgba(0, 0, 0, .12) 62%, rgba(0, 0, 0, .28));
}
.nuoc-dish-hero-in { position: relative; z-index: 2; padding-block: clamp(48px, 8vw, 96px); }
.nuoc-dish-hero .nuoc-h1 { font-size: var(--n-fs-h2); max-width: 20ch; margin: 12px 0 0; }
.nuoc-dish-hero .nuoc-eyebrow { color: #fff; opacity: .85; }
.nuoc-dish-hero .nuoc-crumbs { color: rgba(255, 255, 255, .75); }
.nuoc-dish-hero .nuoc-crumbs a { color: #fff; }
.nuoc-dish-meta {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: .06em;
}
.nuoc-dish-meta span { display: inline-flex; align-items: center; gap: 8px; }
.nuoc-dish-meta svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.nuoc-dish-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(36px, 5vw, 76px);
  align-items: start;
}
.nuoc-dish-side { position: sticky; top: 116px; }
.nuoc-dish-panel {
  background: var(--n-bg-alt);
  padding: 28px;
  border-radius: var(--n-radius);
}
.nuoc-dish-panel + .nuoc-dish-panel { margin-top: 16px; }
.nuoc-dish-panel h3 { font-family: var(--n-head); font-weight: 400; font-size: 22px; margin: 0 0 14px; }
.nuoc-dish-panel ul li { position: relative; padding-left: 17px; font-size: 13px; color: var(--n-soft); margin-bottom: 7px; }
.nuoc-dish-panel ul li::before { content: ''; position: absolute; left: 0; top: .68em; width: 5px; height: 5px; border-radius: 50%; background: var(--n-brand); }
.nuoc-dish-panel .nuoc-btn { margin-top: 16px; }

.nuoc-dish-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 34px;
}
.nuoc-dish-gallery .nuoc-fig { aspect-ratio: 1 / 1; }

.nuoc-dish-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid rgba(var(--n-ink-rgb), .12);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.nuoc-dish-nav .next { text-align: right; }
.nuoc-dish-nav small { display: block; color: var(--n-soft); font-size: 10px; margin-bottom: 6px; }
.nuoc-dish-nav strong { font-family: var(--n-head); font-size: 20px; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Bộ lọc nhóm thực đơn */
.nuoc-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.nuoc-filter button {
  border: 1px solid rgba(var(--n-ink-rgb), .18);
  background: none;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--n-soft);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.nuoc-filter button:hover { border-color: var(--n-brand); color: var(--n-ink); }
.nuoc-filter button.active { background: var(--n-brand-dark); border-color: var(--n-brand-dark); color: #fff; }

/* -------------------------------------------------------------------------
   8. KHÔNG GIAN & THƯ VIỆN ẢNH
   ---------------------------------------------------------------------- */

.nuoc-space-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 14px;
  margin-top: 50px;
}
.nuoc-space-images .nuoc-fig { aspect-ratio: 1 / 1; }
.nuoc-space-more .nuoc-space-images { margin-top: 14px; }

.nuoc-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 46px;
}
.nuoc-gallery .nuoc-fig { aspect-ratio: 4 / 3; }

/* Lưới đều: mọi ô cùng một tỉ lệ nên hàng nào cũng khít, không hở chỗ nào. */
.nuoc-gallery.layout-grid { gap: 8px; }
.nuoc-gallery.layout-grid.ratio-4-3 .nuoc-fig { aspect-ratio: 4 / 3; }
.nuoc-gallery.layout-grid.ratio-1-1 .nuoc-fig { aspect-ratio: 1 / 1; }
.nuoc-gallery.layout-grid.ratio-3-2 .nuoc-fig { aspect-ratio: 3 / 2; }
.nuoc-gallery.layout-grid.ratio-4-5 .nuoc-fig { aspect-ratio: 4 / 5; }
.nuoc-gallery.layout-grid .nuoc-fig { border-radius: 0; }
.nuoc-gallery-more .nuoc-gallery.layout-grid { margin-top: 8px; }

.nuoc-gallery.layout-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 12px;
}
.nuoc-gallery.layout-slider .nuoc-fig {
  flex: 0 0 min(70vw, 520px);
  aspect-ratio: 4 / 3;
  scroll-snap-align: start;
}
.nuoc-gallery-more .nuoc-gallery { margin-top: 12px; }

/* -------------------------------------------------------------------------
   9. CẢM NHẬN · ĐỘI NGŨ · BÁO CHÍ · FAQ · BÀI VIẾT
   ---------------------------------------------------------------------- */

.nuoc-team-grid,
.nuoc-post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: 48px;
}
.nuoc-team-card .nuoc-fig { aspect-ratio: 4 / 5; }
.nuoc-team-card h3 { font-family: var(--n-head); font-weight: 400; font-size: var(--n-fs-h3); margin: 18px 0 2px; }
.nuoc-team-role { color: var(--n-brand-dark); font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; }
.nuoc-team-card p { font-size: var(--n-fs-lead); color: var(--n-soft); margin-top: 10px; text-wrap: pretty; }

.nuoc-post-card { display: flex; flex-direction: column; }
.nuoc-post-card .thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--n-radius); background: rgba(var(--n-ink-rgb), .06); }
.nuoc-post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.16, 1, .3, 1); }
.nuoc-post-card:hover .thumb img { transform: scale(1.05); }
.nuoc-post-card .meta { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-brand-dark); margin-top: 18px; }
.nuoc-post-card h3,
.nuoc-post-card h2 { font-family: var(--n-head); font-weight: 400; font-size: var(--n-fs-h3); line-height: 1.2; margin: 8px 0 10px; text-wrap: balance; }
.nuoc-post-card p { font-size: var(--n-fs-lead); color: var(--n-soft); margin: 0 0 14px; }
.nuoc-post-card .nuoc-btn { margin-top: auto; align-self: flex-start; }

/* Cảm nhận khách */
.nuoc-testi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: 48px;
}
.nuoc-testi {
  background: rgba(255, 255, 255, .42);
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--n-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nuoc-testi-stars { display: flex; gap: 4px; color: var(--n-brand); }
.nuoc-testi-stars svg { width: 14px; fill: currentColor; }
.nuoc-testi blockquote {
  margin: 0;
  font-family: var(--n-head);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  text-wrap: pretty;
}
.nuoc-testi footer { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.nuoc-testi footer img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.nuoc-testi cite { font-style: normal; font-size: 13px; font-weight: 500; display: block; }
.nuoc-testi small { color: var(--n-soft); font-size: 11.5px; }

/* Báo chí */
.nuoc-press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: 44px;
}
.nuoc-press-grid a,
.nuoc-press-grid span { display: grid; place-items: center; }
.nuoc-press-grid img {
  max-height: 46px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .5;
  transition: opacity .45s ease, filter .45s ease;
}
.nuoc-press-grid a:hover img { opacity: 1; filter: grayscale(0); }

/* FAQ */
.nuoc-faq { max-width: 880px; margin: 44px auto 0; }
.nuoc-faq-item { border-top: 1px solid rgba(var(--n-ink-rgb), .13); }
.nuoc-faq-item:last-child { border-bottom: 1px solid rgba(var(--n-ink-rgb), .13); }
.nuoc-faq-q {
  width: 100%;
  border: 0; background: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 22px;
  padding: 24px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--n-head);
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.3;
}
.nuoc-faq-q i {
  flex: 0 0 16px;
  height: 16px;
  margin-top: 6px;
  position: relative;
}
.nuoc-faq-q i::before,
.nuoc-faq-q i::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 16px; height: 1px;
  background: var(--n-brand-dark);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-faq-q i::after { transform: rotate(90deg); }
.nuoc-faq-q[aria-expanded="true"] i::after { transform: rotate(0); }
.nuoc-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .6s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-faq-a > div { overflow: hidden; }
.nuoc-faq-a.open { grid-template-rows: 1fr; }
.nuoc-faq-a p { margin: 0 0 24px; color: var(--n-soft); font-size: var(--n-fs-lead); max-width: var(--n-measure); }

/* -------------------------------------------------------------------------
   10. ĐẶT BÀN
   ---------------------------------------------------------------------- */

.nuoc-booking-wrap {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(38px, 5vw, 84px);
  align-items: start;
}
.nuoc-booking-copy { position: sticky; top: 124px; }
.nuoc-booking-copy .nuoc-lead { margin-bottom: 0; }
.nuoc-booking-copy .nuoc-fig { margin-top: 34px; aspect-ratio: 4 / 3; }
/* Khối thông tin bên trái form đặt bàn: mỗi dòng một icon, có nhãn rõ ràng. */
/* Phải viết kèm tên thẻ, nếu không luật reset `.nuoc-scope ul { margin: 0 }`
   sẽ đè mất margin-top và khối này dính sát đoạn văn phía trên. */
.nuoc-scope ul.nuoc-booking-meta {
  margin: 38px 0 0;
  display: grid;
  gap: 22px;
}
.nuoc-booking-meta li { display: flex; gap: 14px; align-items: flex-start; }
.nuoc-booking-meta > li > .nuoc-icon {
  width: 18px;
  min-width: 18px;
  height: 18px;
  margin-top: 3px;
}
.nuoc-booking-meta > li > svg.nuoc-icon {
  fill: none;
  stroke: var(--n-icon, var(--n-brand-dark));
  stroke-width: 1.4;
}
.nuoc-booking-meta > li > img.nuoc-icon { object-fit: contain; }
.nuoc-booking-meta > li > div { display: grid; gap: 3px; min-width: 0; }
.nuoc-meta-label {
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n-soft);
  margin-bottom: 2px;
}
.nuoc-booking-meta strong {
  color: var(--n-ink);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.55;
}
.nuoc-booking-meta a { color: var(--n-ink); font-size: 14.5px; line-height: 1.55; }
.nuoc-booking-meta a:hover { color: var(--n-brand-dark); }
.nuoc-booking-meta .nuoc-status { margin-top: 6px; }

/* Hàng giờ mở cửa không có icon ở cột trái như hai hàng kia, nên phải tự
   thụt vào đúng bằng bề rộng cột icon (18px) cộng khoảng cách (14px).
   Nhờ vậy nhãn GIỜ MỞ CỬA thẳng hàng với HOTLINE và ĐỊA CHỈ. */
.nuoc-booking-meta > li.is-hours > div { width: 100%; gap: 0; }
.nuoc-booking-meta > li.is-hours .nuoc-meta-label { padding-left: 32px; }

/* Khối giờ mở cửa: dòng ngày, dòng giờ, rồi trạng thái. */
.nuoc-hours { display: grid; gap: 7px; }
.nuoc-hours p { margin: 0; }
.nuoc-hours-days,
.nuoc-hours-times {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--n-ink);
}
.nuoc-hours-days .nuoc-icon,
.nuoc-hours-times .nuoc-icon { width: 18px; height: 18px; }
.nuoc-hours-days svg.nuoc-icon,
.nuoc-hours-times svg.nuoc-icon {
  fill: none;
  stroke: var(--n-icon, var(--n-brand-dark));
  stroke-width: 1.4;
}
.nuoc-hours-days img.nuoc-icon,
.nuoc-hours-times img.nuoc-icon { object-fit: contain; }
.nuoc-hours-times span { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.nuoc-hours-status { margin-top: 5px !important; padding-left: 32px; }

/* Bản gọn dùng trong footer: không có cột icon nên bỏ luôn phần thụt. */
.nuoc-hours.is-compact { gap: 3px; }
.nuoc-hours.is-compact .nuoc-hours-days,
.nuoc-hours.is-compact .nuoc-hours-times {
  display: block;
  font-size: 12.5px;
  color: inherit;
}
.nuoc-hours.is-compact .nuoc-hours-status { margin-top: 6px !important; padding-left: 0; }

.nuoc-booking-hint {
  margin: 24px 0 0;
  font-size: 13px;
  color: var(--n-soft);
  max-width: 44ch;
}

/* Giữ lại cho bố cục cũ nếu còn dùng tới. */
.nuoc-scope ul.nuoc-booking-hours { margin: 24px 0 0; font-size: 12.5px; color: var(--n-soft); }
.nuoc-booking-hours li { display: flex; gap: 10px; margin-bottom: 5px; }
.nuoc-booking-hours strong { color: var(--n-ink); font-weight: 500; }

.nuoc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.nuoc-form .full { grid-column: 1 / -1; }

.nuoc-fieldset { position: relative; display: flex; flex-direction: column; gap: 7px; }
.nuoc-fieldset > label {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--n-ink);
  font-weight: 500;
  opacity: .78;
}
.nuoc-fieldset .req { color: var(--n-brand-dark); }

.nuoc-form input,
.nuoc-form select,
.nuoc-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(var(--n-ink-rgb), .24);
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 14px;
  color: var(--n-ink);
  border-radius: 0;
  transition: border-color .45s ease;
  appearance: none;
}
.nuoc-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23746e66' stroke-width='1.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 17px;
  padding-right: 26px;
  cursor: pointer;
}
.nuoc-form textarea { min-height: 96px; resize: vertical; }
.nuoc-form input:focus,
.nuoc-form select:focus,
.nuoc-form textarea:focus { outline: none; border-bottom-color: var(--n-brand-dark); }
.nuoc-form input::placeholder,
.nuoc-form textarea::placeholder { color: var(--n-soft); opacity: .75; }
.nuoc-form input,
.nuoc-form select,
.nuoc-form textarea { border-bottom-color: rgba(var(--n-ink-rgb), .32); }

/* Gạch chân chạy từ trái sang khi focus — chuyển động mềm theo yêu cầu khách */
.nuoc-fieldset::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--n-brand-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.nuoc-fieldset:focus-within::after { transform: scaleX(1); }

.nuoc-fieldset.has-error input,
.nuoc-fieldset.has-error select,
.nuoc-fieldset.has-error textarea { border-bottom-color: #b3261e; }
.nuoc-error { color: #b3261e; font-size: 11.5px; min-height: 0; }

.nuoc-consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13px; color: var(--n-ink); }
.nuoc-consent a { color: var(--n-brand-dark); font-weight: 500; }
.nuoc-consent input { width: auto; margin-top: 4px; accent-color: var(--n-brand-dark); }
.nuoc-consent a { color: var(--n-brand-dark); border-bottom: 1px solid currentColor; }

.nuoc-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--n-brand-dark);
  background: var(--n-brand-dark);
  color: #fff;
  padding: 15px 32px;
  border-radius: var(--n-radius);
  font-size: 11.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .45s ease, border-color .45s ease, opacity .3s ease;
}
.nuoc-submit { color: #fff; font-weight: 500; }
.nuoc-submit:hover { background: var(--n-ink); border-color: var(--n-ink); }
.nuoc-submit[disabled] { opacity: .55; cursor: progress; }
.nuoc-submit .spin {
  width: 15px; height: 15px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  display: none;
  animation: nuocSpin .8s linear infinite;
}
.nuoc-submit.loading .spin { display: block; }
@keyframes nuocSpin { to { transform: rotate(360deg); } }

.nuoc-form-note { font-size: 12.5px; color: var(--n-ink); opacity: .8; }
.nuoc-form-msg { grid-column: 1 / -1; }
.nuoc-form-msg .ok,
.nuoc-form-msg .err { padding: 18px 22px; border-radius: var(--n-radius); font-size: 13.5px; }
.nuoc-form-msg .ok { background: rgba(var(--n-brand-rgb), .16); border-left: 2px solid var(--n-brand-dark); }
.nuoc-form-msg .err { background: rgba(179, 38, 30, .08); border-left: 2px solid #b3261e; color: #8a1f17; }
.nuoc-form-msg p:last-child { margin-bottom: 0; }

/* Contact Form 7 dùng lại đúng bộ style trên */
.nuoc-booking-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.nuoc-booking-form .wpcf7-form p { margin: 0; }
.nuoc-booking-form label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-soft); display: block; }
.nuoc-booking-form input,
.nuoc-booking-form select,
.nuoc-booking-form textarea {
  width: 100%; border: 0;
  border-bottom: 1px solid rgba(var(--n-ink-rgb), .24);
  background: transparent; padding: 12px 0; font: inherit; font-size: 14px;
  color: var(--n-ink); border-radius: 0;
}
.nuoc-booking-form input[type=submit] {
  width: auto; border: 1px solid var(--n-brand-dark);
  background: var(--n-brand-dark); color: #fff;
  padding: 15px 32px; cursor: pointer;
  font-size: 11.5px; letter-spacing: .17em; text-transform: uppercase;
}
.nuoc-booking-form .wpcf7-list-item { margin: 0; }
.nuoc-booking-form .wpcf7-list-item label { display: flex; gap: 10px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.nuoc-booking-form input[type=checkbox] { width: auto; margin-top: 4px; }
.nuoc-cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; grid-column: 1 / -1; }

/* -------------------------------------------------------------------------
   11. FOOTER
   ---------------------------------------------------------------------- */

.nuoc-ft { background: var(--n-dark); color: #e7e1d8; padding: clamp(56px, 7vw, 84px) 0 26px; }
.nuoc-ft-grid {
  display: grid;
  grid-template-columns: minmax(230px, 1.2fr) minmax(140px, .7fr) minmax(260px, 1.1fr) minmax(150px, .7fr);
  gap: clamp(26px, 3.6vw, 54px);
  align-items: start;
}
.nuoc-ft.layout-five .nuoc-ft-grid {
  grid-template-columns: minmax(210px, 1.1fr) minmax(130px, .6fr) minmax(240px, 1fr) minmax(200px, .95fr) minmax(130px, .6fr);
}
.nuoc-ft-grid > * { min-width: 0; }

.nuoc-ft-brand > img { width: auto; max-width: 190px; max-height: 120px; object-fit: contain; margin: 0 0 22px; }
.nuoc-ft-brand .nuoc-lead { color: #c8c0b5; max-width: 330px; }
.nuoc-ft p,
.nuoc-ft a,
.nuoc-ft li { font-size: 12.5px; color: #c8c0b5; }
.nuoc-ft a { transition: color .35s ease; }
.nuoc-ft a:hover { color: #fff; }
.nuoc-ft-title { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--n-brand); margin-bottom: 18px; }
.nuoc-ft li { margin-bottom: 9px; }
.nuoc-ft .nuoc-status { color: #cfe0ef; }

.nuoc-contact-list li { display: flex; gap: 11px; align-items: flex-start; }
.nuoc-contact-list .nuoc-icon { width: 16px; min-width: 16px; height: 16px; margin-top: 3px; }
.nuoc-contact-list svg.nuoc-icon { fill: none; stroke: var(--n-brand); stroke-width: 1.4; }
.nuoc-contact-list img.nuoc-icon { object-fit: contain; }

.nuoc-social { display: flex; gap: 10px; flex-wrap: wrap; }
.nuoc-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: border-color .4s ease, background-color .4s ease, transform .4s ease;
}
.nuoc-social a:hover { border-color: var(--n-brand); background: rgba(var(--n-brand-rgb), .16); transform: translateY(-2px); }
.nuoc-social svg { width: 16px; height: 16px; fill: none; stroke: var(--n-brand); stroke-width: 1.4; }

/* Khối ứng dụng — theo đúng feedback của khách */
.nuoc-ft-app { display: flex; flex-direction: column; gap: 14px; }
.nuoc-ft-app-head { display: flex; align-items: center; gap: 13px; }
.nuoc-ft-app-head img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; }
.nuoc-ft-app-name { font-family: var(--n-head); font-size: 20px; color: #f0eae0; line-height: 1.15; }
.nuoc-ft-app .nuoc-lead { color: #c8c0b5; font-size: 12.5px; max-width: 300px; }
.nuoc-ft-app-cta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--n-brand); }
.nuoc-app-badges { display: flex; gap: 9px; flex-wrap: wrap; }
.nuoc-app-badges a { display: block; transition: opacity .35s ease, transform .35s ease; }
.nuoc-app-badges a:hover { opacity: .82; transform: translateY(-2px); }
.nuoc-app-badges img { height: 38px; width: auto; object-fit: contain; }

/* Dòng tập đoàn đặt ngay dưới đoạn giới thiệu ở cột thương hiệu. */
.nuoc-ft-corp-inline {
  margin: 20px 0 0;
  font-size: 11px !important;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #a49b8f !important;
  line-height: 1.7;
}
.nuoc-ft-corp-inline a { color: inherit; }
.nuoc-ft-corp-inline a:hover { color: var(--n-brand) !important; }

/* Cột theo dõi: đoạn dẫn, icon mạng xã hội rồi tới cụm ứng dụng. */
.nuoc-ft-follow > * + * { margin-top: 16px; }
.nuoc-ft-follow .nuoc-lead { color: #c8c0b5; font-size: 12.5px; max-width: 320px; }
.nuoc-ft-follow .nuoc-ft-app { margin-top: 22px; }

.nuoc-ft-corp {
  margin-top: clamp(38px, 5vw, 58px);
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.nuoc-ft-corp img { max-height: 40px; width: auto; object-fit: contain; opacity: .85; }
.nuoc-ft-corp-line {
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #9d958a;
}
.nuoc-ft-corp a:hover .nuoc-ft-corp-line { color: var(--n-brand); }

.nuoc-ft-bottom {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 11px;
  color: #8f887f;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.footer-lang { margin-top: 24px; }


/* Bố cục chân trang theo mẫu khách gửi:
   cụm ứng dụng trái — thương hiệu canh giữa — kết nối phải. */
.nuoc-ft.layout-brand { padding-block: clamp(48px, 6vw, 72px) 24px; }

.nuoc-ft-brandgrid {
  display: grid;
  /* Cột giữa rộng hẳn ra để địa chỉ nằm gọn trên một dòng. */
  grid-template-columns: minmax(190px, .85fr) minmax(420px, 2fr) minmax(170px, .8fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

.nuoc-ft-col-mid { text-align: center; }
.nuoc-ft-brandlink { display: block; }

/* Logo Nước thay cho dòng chữ ở giữa footer. */
.nuoc-ft-mark {
  width: auto;
  max-width: 180px;
  max-height: 74px;
  object-fit: contain;
  margin: 0 auto 10px;
  display: block;
}

.nuoc-ft-brandname {
  font-family: var(--n-head);
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: .1em;
  color: #f0eae0;
  margin: 0 0 6px;
  line-height: 1.1;
}

.nuoc-ft.layout-brand .nuoc-ft-corp-line {
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #b9b0a4;
  margin: 0 0 22px;
}
.nuoc-ft-brandlink:hover .nuoc-ft-corp-line { color: var(--n-brand); }

/* Danh sách liên hệ canh giữa: mỗi dòng cố gắng nằm trọn một hàng. */
.nuoc-contact-list.is-center { display: grid; justify-items: center; gap: 10px; }
.nuoc-contact-list.is-center li {
  justify-content: center;
  align-items: center;
  text-align: left;
  max-width: none;
  white-space: nowrap;
}
.nuoc-contact-list.is-center svg { margin-top: 0; }

/* Màn hẹp thì cho phép xuống dòng lại, không để chữ tràn ra ngoài. */
@media (max-width: 1200px) {
  .nuoc-contact-list.is-center li { white-space: normal; text-align: center; }
}

.nuoc-ft-col-connect { display: grid; justify-items: end; gap: 16px; }
.nuoc-ft-col-connect .nuoc-ft-title { margin-bottom: 0; }
.nuoc-ft-cert img { max-height: 46px; width: auto; object-fit: contain; }

.nuoc-ft-inline-menu {
  margin-top: clamp(30px, 4vw, 46px);
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.nuoc-ft-inline-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.nuoc-ft-inline-menu li { margin: 0; }
.nuoc-ft-inline-menu a {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nuoc-ft.layout-brand .nuoc-ft-app { align-items: flex-start; gap: 10px; }
.nuoc-ft-app-logo img {
  width: auto;
  max-width: 132px;
  max-height: 52px;
  object-fit: contain;
}
.nuoc-ft-app-text { margin: 0; }
.nuoc-ft.layout-brand .nuoc-app-badges { margin-top: 4px; }

@media (max-width: 1024px) {
  .nuoc-ft-brandgrid { grid-template-columns: 1fr 1fr; }
  .nuoc-ft-col-mid { grid-column: 1 / -1; order: -1; margin-bottom: 12px; }
  .nuoc-ft-col-connect { justify-items: end; }
}

@media (max-width: 720px) {
  .nuoc-ft-brandgrid { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .nuoc-ft-col-mid { order: 0; }
  .nuoc-ft.layout-brand .nuoc-ft-app { align-items: center; text-align: center; }
  .nuoc-ft.layout-brand .nuoc-ft-app .nuoc-lead { margin-inline: auto; }
  .nuoc-ft-col-connect { justify-items: center; }
  .nuoc-ft-col-app { display: grid; justify-items: center; }
}

/* -------------------------------------------------------------------------
   12. TIỆN ÍCH NỔI
   ---------------------------------------------------------------------- */

.nuoc-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 120;
  pointer-events: none;
  background: transparent;
}
.nuoc-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--n-brand), var(--n-brand-dark));
  transform-origin: left;
}

.nuoc-totop {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  z-index: 90;
  width: 44px; height: 44px;
  border: 1px solid rgba(var(--n-ink-rgb), .18);
  border-radius: 50%;
  background: var(--n-bg);
  cursor: pointer;
  display: grid; place-items: center;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  pointer-events: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1), background-color .4s ease;
}
.nuoc-totop.show { opacity: 1; transform: none; pointer-events: auto; }
.nuoc-totop:hover { background: var(--n-brand-dark); border-color: var(--n-brand-dark); color: #fff; }
.nuoc-totop svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }

/* Cụm nút liên hệ nổi */
.nuoc-fab { position: fixed; left: clamp(14px, 2vw, 28px); bottom: clamp(14px, 2vw, 28px); z-index: 90; }
.nuoc-fab-toggle {
  width: 50px; height: 50px;
  border: 0; border-radius: 50%;
  background: var(--n-brand-dark);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: 0 12px 28px rgba(var(--n-ink-rgb), .22);
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-fab-toggle svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nuoc-fab.open .nuoc-fab-toggle { transform: rotate(135deg); }
.nuoc-fab-list {
  position: absolute;
  left: 0; bottom: 60px;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}
.nuoc-fab-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 10px;
  background: var(--n-bg);
  border: 1px solid rgba(var(--n-ink-rgb), .12);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: .07em;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(var(--n-ink-rgb), .1);
  opacity: 0;
  transform: translate3d(-10px, 8px, 0);
  pointer-events: none;
  transition: opacity .4s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.nuoc-fab.open .nuoc-fab-btn { opacity: 1; transform: none; pointer-events: auto; }
.nuoc-fab-btn svg { width: 16px; min-width: 16px; fill: none; stroke: var(--n-brand-dark); stroke-width: 1.5; }
.nuoc-fab-btn:hover { border-color: var(--n-brand); }

/* Thanh cookie */
.nuoc-cookie {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 130%);
  z-index: 95;
  width: min(680px, calc(100% - 28px));
  background: var(--n-dark);
  color: #e7e1d8;
  padding: 18px 22px;
  border-radius: var(--n-radius);
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .3);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.nuoc-cookie.show { transform: translate(-50%, 0); }
.nuoc-cookie p { margin: 0; font-size: 12.5px; }
.nuoc-cookie a { color: var(--n-brand); border-bottom: 1px solid currentColor; }
.nuoc-cookie-ok {
  border: 1px solid var(--n-brand);
  background: var(--n-brand);
  color: #14232f;
  padding: 10px 22px;
  border-radius: var(--n-radius);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

/* Preloader */
.nuoc-pre {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--n-bg);
  display: grid;
  place-items: center;
  transition: opacity .8s ease, visibility .8s;
}
.nuoc-pre.done { opacity: 0; visibility: hidden; }
.nuoc-pre-in { display: grid; justify-items: center; gap: 24px; }
.nuoc-pre-logo { width: auto; max-width: 190px; max-height: 90px; object-fit: contain; }
.nuoc-pre-word { font-family: var(--n-head); font-size: 46px; color: var(--n-brand-dark); }
.nuoc-pre-line { display: block; width: 160px; height: 1px; background: rgba(var(--n-ink-rgb), .14); overflow: hidden; }
.nuoc-pre-line i { display: block; height: 100%; width: 0; background: var(--n-brand-dark); transition: width .4s ease; }
body.nuoc-preloading { overflow: hidden; }

/* Chuyển trang mờ dần */
body.nuoc-fade-out { opacity: 0; transition: opacity .35s ease; }

/* Lightbox */
.nuoc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(18, 17, 16, .94);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .45s ease;
}
.nuoc-lightbox.show { opacity: 1; }
.nuoc-lightbox figure { margin: 0; max-width: min(1200px, 92vw); max-height: 84svh; display: grid; gap: 14px; justify-items: center; }
.nuoc-lightbox img { max-width: 100%; max-height: 78svh; width: auto; object-fit: contain; }
.nuoc-lightbox figcaption { color: #d8d2c8; font-size: 12.5px; text-align: center; }
.nuoc-lightbox button {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  width: 46px; height: 46px;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .35s ease;
}
.nuoc-lightbox button:hover { background: rgba(255, 255, 255, .16); }
.nuoc-lightbox svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nuoc-lb-close { top: 22px; right: 22px; font-size: 26px; line-height: 1; }
.nuoc-lb-prev { left: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.nuoc-lb-next { right: clamp(10px, 3vw, 34px); top: 50%; transform: translateY(-50%); }
.nuoc-lb-count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #a9a29a; font-size: 11.5px; letter-spacing: .18em; }

/* Con trỏ tuỳ biến */
.nuoc-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 26px; height: 26px;
  border: 1px solid rgba(var(--n-brand-rgb), .8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  transform: translate3d(-100px, -100px, 0);
  transition: width .3s ease, height .3s ease, background-color .3s ease, opacity .3s ease;
  mix-blend-mode: difference;
}
.nuoc-cursor.hot { width: 46px; height: 46px; background: rgba(var(--n-brand-rgb), .18); }

/* -------------------------------------------------------------------------
   13. TRANG PHỤ, BÀI VIẾT, TÌM KIẾM, 404
   ---------------------------------------------------------------------- */

.nuoc-inner .nuoc-hd { background: var(--n-bg); color: var(--n-ink); }
.nuoc-inner .nuoc-hd .logo-normal { display: none; }
.nuoc-inner .nuoc-hd .logo-solid { display: block; }
.nuoc-inner .nuoc-brand { opacity: 1; pointer-events: auto; }

.nuoc-content { padding-top: 132px; }

.nuoc-article { max-width: 820px; margin-inline: auto; }
.nuoc-article h1 { font-family: var(--n-head); font-size: var(--n-fs-h2); font-weight: 400; line-height: var(--n-lh-head); margin: 10px 0 22px; text-wrap: balance; }
.nuoc-article .featured { margin: 30px 0 40px; }
.nuoc-article .featured img { width: 100%; border-radius: var(--n-radius); }
.nuoc-article .entry-content { font-size: var(--n-fs-lead); color: var(--n-ink); }
.nuoc-article .entry-content > * { max-width: var(--n-measure); }
.nuoc-article .entry-content > .alignwide,
.nuoc-article .entry-content > figure,
.nuoc-article .entry-content > .wp-block-image { max-width: 100%; }
.nuoc-article .entry-content p { margin: 0 0 1.25em; text-wrap: pretty; }
.nuoc-article .entry-content h2,
.nuoc-article .entry-content h3,
.nuoc-article .entry-content h4 { font-family: var(--n-head); font-weight: 400; line-height: 1.22; margin: 1.8em 0 .6em; }
.nuoc-article .entry-content h2 { font-size: clamp(26px, 3vw, 36px); }
.nuoc-article .entry-content h3 { font-size: clamp(22px, 2.4vw, 28px); }
.nuoc-article .entry-content ul,
.nuoc-article .entry-content ol { margin: 0 0 1.25em; padding-left: 20px; }
.nuoc-article .entry-content ul { list-style: disc; }
.nuoc-article .entry-content ol { list-style: decimal; }
.nuoc-article .entry-content li { margin-bottom: .45em; }
.nuoc-article .entry-content blockquote {
  margin: 1.8em 0;
  padding-left: 24px;
  border-left: 2px solid var(--n-brand);
  font-family: var(--n-head);
  font-style: italic;
  font-size: clamp(19px, 2vw, 24px);
}
.nuoc-article .entry-content img { border-radius: var(--n-radius); }
.nuoc-article .entry-content a { color: var(--n-brand-dark); border-bottom: 1px solid rgba(var(--n-brand-rgb), .5); }
.nuoc-article .entry-content table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.nuoc-article .entry-content th,
.nuoc-article .entry-content td { padding: 11px 14px; border-bottom: 1px solid rgba(var(--n-ink-rgb), .12); text-align: left; }

.nuoc-archive-head { margin-bottom: 52px; }
.nuoc-pagination { margin-top: 56px; }
.nuoc-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.nuoc-pagination .page-numbers {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0 12px;
  border: 1px solid rgba(var(--n-ink-rgb), .14);
  font-size: 12.5px;
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.nuoc-pagination .page-numbers:hover { border-color: var(--n-brand); }
.nuoc-pagination .page-numbers.current { background: var(--n-brand-dark); border-color: var(--n-brand-dark); color: #fff; }

.nuoc-search-form { display: flex; gap: 10px; max-width: 460px; }
.nuoc-search-form input[type=search] {
  flex: 1;
  border: 0;
  border-bottom: 1px solid rgba(var(--n-ink-rgb), .25);
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 15px;
}
.nuoc-search-form input[type=search]:focus { outline: none; border-bottom-color: var(--n-brand-dark); }
.nuoc-search-form button {
  border: 1px solid var(--n-brand-dark);
  background: var(--n-brand-dark);
  color: #fff;
  padding: 11px 22px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.nuoc-404 { text-align: center; max-width: 620px; margin-inline: auto; }
.nuoc-404 .nuoc-search-form { margin: 32px auto 0; }
.nuoc-404-num {
  font-family: var(--n-head);
  font-size: clamp(90px, 16vw, 190px);
  line-height: .85;
  color: rgba(var(--n-brand-rgb), .35);
}

/* Dải chữ chạy — nhịp nghỉ giữa các khối */
.nuoc-marquee { overflow: hidden; padding-block: clamp(26px, 4vw, 44px); border-block: 1px solid rgba(var(--n-ink-rgb), .1); }
.nuoc-marquee-track { display: flex; gap: 46px; width: max-content; animation: nuocMarquee 38s linear infinite; }
.nuoc-marquee span {
  font-family: var(--n-head);
  font-size: clamp(24px, 3vw, 40px);
  color: rgba(var(--n-ink-rgb), .3);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 46px;
}
.nuoc-marquee span::after { content: '◦'; color: var(--n-brand); font-size: .6em; }
@keyframes nuocMarquee { to { transform: translate3d(-50%, 0, 0); } }

/* Bản đồ trong footer */
.nuoc-map { margin-top: 20px; border-radius: var(--n-radius); overflow: hidden; aspect-ratio: 16 / 10; }
.nuoc-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(.9) opacity(.85); }

/* -------------------------------------------------------------------------
   14. RESPONSIVE
   ---------------------------------------------------------------------- */

/* --- Hero trên máy tính bảng và điện thoại ---
   Đổi sang media dọc từ 900px thay vì 720px, để máy tính bảng dựng đứng
   cũng dùng đúng video dọc thay vì bị cắt hai bên. */
@media (max-width: 900px) {
  .nuoc-hero {
    height: var(--n-hero-h-m-vh, 90vh);
    min-height: 440px;
  }
  .nuoc-hero.has-mobile .nuoc-hero-media.is-desktop { display: none; }
  .nuoc-hero.has-mobile .nuoc-hero-media.is-mobile {
    display: block;
    object-position: var(--n-hero-focus-m, center center);
  }
  .nuoc-hero-logo { width: min(var(--n-hero-logo), 76vw); }
}

@supports (height: 100svh) {
  @media (max-width: 900px) {
    .nuoc-hero { height: var(--n-hero-h-m, 90svh); }
  }
}

/* Điện thoại nằm ngang: màn rất thấp nên hero phải co lại, không thì
   khách chỉ thấy mỗi logo mà không thấy nội dung phía dưới. */
@media (max-height: 520px) and (orientation: landscape) {
  .nuoc-hero { height: 100svh; min-height: 320px; }
  .nuoc-hero-logo { max-height: 42svh; }
  .nuoc-hero-center p { margin-top: 12px; font-size: 14px; }
  .nuoc-scroll-cue { bottom: 14px; width: 34px; height: 34px; }
  .nuoc-hero-tools { bottom: 14px; }
}

/* Khoảng 1180-1360px: menu tiếng Việt khá dài, thu nhỏ khoảng cách và cỡ chữ
   để không bị tràn ra ngoài rồi cắt cụt chữ. */
@media (max-width: 1360px) {
  .nuoc-nav { gap: clamp(14px, 1.6vw, 24px); }
  .nuoc-nav a { font-size: 10.5px; letter-spacing: .11em; }
  .nuoc-hd-cta { padding: 10px 16px; letter-spacing: .12em; }
  .nuoc-hd-right { gap: 18px; }
  .nuoc-hd-in { padding-inline: clamp(16px, 3vw, 40px); }
}

@media (max-width: 1180px) {
  html { scroll-padding-top: 84px; }
  /* Dưới mốc này chắc chắn không đủ chỗ, chuyển hẳn sang nút menu trượt. */
  .nuoc-desktop-nav,
  .nuoc-hd-cta { display: none; }
  .nuoc-dish-layout { grid-template-columns: 1fr; }
  .nuoc-dish-side { position: static; }
  .nuoc-ft.layout-five .nuoc-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nuoc-hd-in { grid-template-columns: 1fr auto 1fr; }
  .nuoc-editorial,
  .nuoc-booking-wrap { grid-template-columns: 1fr; }
  .nuoc-editorial.media-right .nuoc-editorial-media,
  .nuoc-editorial.media-right .nuoc-editorial-copy { order: initial; }
  .nuoc-editorial-media .nuoc-fig { aspect-ratio: 16 / 11; }
  .nuoc-booking-copy { position: static; }
  .nuoc-menu-grid { --n-cols: 2; }
  .nuoc-team-grid,
  .nuoc-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nuoc-ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nuoc-sb-art { display: none; }
  .nuoc-sb-panel { width: 100%; }
  .nuoc-dish-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  :root { --n-sec-pad: var(--n-sec-pad-m); }

  .nuoc-sec { padding-block: var(--n-sec-pad-m); }
  .nuoc-h2 { font-size: var(--n-fs-h2-m); max-width: none; }
  .nuoc-h3,
  .nuoc-dish-body h3 { font-size: var(--n-fs-h3-m); }
  .nuoc-quote { font-size: var(--n-fs-quote-m); max-width: none; }
  .nuoc-lead { font-size: var(--n-fs-lead-m); max-width: none; }
  .nuoc-article h1,
  .nuoc-dish-hero .nuoc-h1 { font-size: var(--n-fs-h2-m); }

  /* ---------------------------------------------------------------------
     ĐỒNG BỘ CANH CHỮ TRÊN ĐIỆN THOẠI
     Trước đây chỉ các khối dùng .nuoc-head mới được canh giữa, còn khối
     Câu chuyện và Đặt bàn vẫn canh trái — nhìn so le. Nay mọi khối theo
     chung một kiểu, chọn trong Theme Options → Hero → Canh chữ trên điện thoại.
     --------------------------------------------------------------------- */

  .nuoc-eyebrow .nuoc-ripple { display: none; }

  /* --- Kiểu canh giữa --- */
  .nuoc-m-center .nuoc-head,
  .nuoc-m-center .nuoc-editorial,
  .nuoc-m-center .nuoc-editorial-copy,
  .nuoc-m-center .nuoc-booking-copy,
  .nuoc-m-center .nuoc-dish-body,
  .nuoc-m-center .nuoc-team-card,
  .nuoc-m-center .nuoc-post-card,
  .nuoc-m-center .nuoc-archive-head { text-align: center; }

  .nuoc-m-center .nuoc-eyebrow { justify-content: center; }

  .nuoc-m-center .nuoc-h2,
  .nuoc-m-center .nuoc-h3,
  .nuoc-m-center .nuoc-lead,
  .nuoc-m-center .nuoc-quote,
  .nuoc-m-center .nuoc-dish-desc,
  .nuoc-m-center .nuoc-booking-hint { margin-inline: auto; }

  .nuoc-m-center .nuoc-morebar,
  .nuoc-m-center .nuoc-morebar.is-left { text-align: center; }

  .nuoc-m-center .nuoc-btn,
  .nuoc-m-center .nuoc-dish-body .nuoc-btn,
  .nuoc-m-center .nuoc-post-card .nuoc-btn { align-self: center; }

  /* Vạch tựa của trích dẫn chuyển từ dọc bên trái sang ngang phía trên. */
  .nuoc-m-center .nuoc-quote { padding-left: 0; padding-top: 20px; }
  .nuoc-m-center .nuoc-quote::before {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 44px;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to right, rgba(var(--n-brand-rgb), .15), var(--n-brand), rgba(var(--n-brand-rgb), .15));
  }

  /* Khối thông tin đặt bàn vẫn giữ icon bên trái để dễ đọc, chỉ căn cụm vào giữa. */
  .nuoc-m-center .nuoc-booking-meta { justify-items: center; text-align: left; }
  .nuoc-m-center .nuoc-booking-meta > li { max-width: 320px; width: 100%; }

  /* --- Kiểu canh trái --- */
  .nuoc-m-left .nuoc-head,
  .nuoc-m-left .nuoc-head .nuoc-h2,
  .nuoc-m-left .nuoc-head .nuoc-lead,
  .nuoc-m-left .nuoc-archive-head { text-align: left; }

  .nuoc-m-left .nuoc-head .nuoc-eyebrow { justify-content: flex-start; }

  .nuoc-m-left .nuoc-head .nuoc-h2,
  .nuoc-m-left .nuoc-head .nuoc-lead,
  .nuoc-m-left .nuoc-quote { margin-inline: 0; }

  .nuoc-m-left .nuoc-morebar { text-align: left; }
  .nuoc-m-left .nuoc-filter { justify-content: flex-start; }

  .nuoc-hero-center p { font-size: 16px; }

  .nuoc-hd { height: 72px; }
  .nuoc-hd.solid { height: 62px; }
  .nuoc-hd-left .nuoc-lang { display: none; }
  .nuoc-brand img { max-width: 118px; max-height: 42px; }
  .nuoc-hd.solid .logo-solid { max-width: 130px; max-height: 40px; }

  .nuoc-cont { width: calc(100% - 34px); }
  .nuoc-menu-grid,
  .nuoc-team-grid,
  .nuoc-post-grid,
  .nuoc-form,
  .nuoc-booking-form .wpcf7-form,
  .nuoc-cf-row,
  .nuoc-ft-grid,
  .nuoc-dish-nav { grid-template-columns: 1fr; }
  .nuoc-menu-grid { --n-cols: 1; }
  .nuoc-dish-nav .next { text-align: left; }

  .nuoc-space-images { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nuoc-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
  .nuoc-dish-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  .nuoc-sb-panel { padding: 70px 26px 34px; }
  .nuoc-sb-close { left: 22px; }
  .nuoc-sb-menu a { font-size: 23px; }

  .nuoc-ft-corp { align-items: center; }
  .nuoc-cookie { flex-direction: column; align-items: stretch; text-align: center; }
  .nuoc-fab-btn span { display: none; }
  .nuoc-fab-btn { padding: 11px; }
  .nuoc-lightbox figure { max-width: 94vw; }
  .nuoc-lb-prev { left: 8px; }
  .nuoc-lb-next { right: 8px; }
  .nuoc-content { padding-top: 104px; }
  .nuoc-hero-tools { bottom: 84px; }
}

@media (max-width: 420px) {
  .nuoc-space-images,
  .nuoc-gallery { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------------------
   14b. TINH CHỈNH RIÊNG CHO ĐIỆN THOẠI
   ---------------------------------------------------------------------- */

@media (max-width: 720px) {

  /* iOS tự phóng to trang khi bấm vào ô nhập có cỡ chữ dưới 16px.
     Đây là lý do trang bị "nhảy" khi khách điền form đặt bàn. */
  .nuoc-form input,
  .nuoc-form select,
  .nuoc-form textarea,
  .nuoc-booking-form input,
  .nuoc-booking-form select,
  .nuoc-booking-form textarea,
  .nuoc-search-form input[type=search] {
    font-size: 16px;
  }

  /* Ô ngày và giờ trên iOS hay bị co lại, ép chiều cao tối thiểu cho đều. */
  .nuoc-form input[type=date],
  .nuoc-form input[type=time],
  .nuoc-form select { min-height: 46px; }

  /* Vùng bấm đủ rộng cho ngón tay: tối thiểu 44px theo chuẩn của Apple. */
  .nuoc-btn { padding-block: 12px; }
  .nuoc-see-more { padding-block: 14px; }
  .nuoc-faq-q { padding-block: 20px; }
  .nuoc-lang a { padding: 6px 4px; }
  .nuoc-sb-menu a { padding-block: 14px; }
  .nuoc-social a { width: 42px; height: 42px; }
  .nuoc-submit { width: 100%; justify-content: center; padding-block: 17px; }

  /* Bảng trong bài viết tràn ngang thì cho cuộn riêng, không đẩy vỡ trang. */
  .nuoc-article .entry-content table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Chuỗi dài không dấu cách (email, đường dẫn) phải xuống dòng được. */
  .nuoc-scope p,
  .nuoc-scope li,
  .nuoc-scope h1,
  .nuoc-scope h2,
  .nuoc-scope h3,
  .nuoc-scope a { overflow-wrap: anywhere; }

  /* Chặn tràn ngang từ mọi khối con. */
  .nuoc-sec,
  .nuoc-cont,
  .nuoc-article,
  .nuoc-ft { max-width: 100%; }

  /* Khối giờ mở cửa trên màn hẹp: thu icon và giãn dòng cho dễ đọc. */
  .nuoc-hours-days,
  .nuoc-hours-times { grid-template-columns: 17px minmax(0, 1fr); gap: 11px; font-size: 14px; }
  .nuoc-scope ul.nuoc-booking-meta { margin-top: 30px; gap: 20px; }
  .nuoc-booking-meta > li > .nuoc-icon { width: 17px; min-width: 17px; height: 17px; }
  .nuoc-m-center .nuoc-booking-meta > li { max-width: 100%; }

  /* Nút tải ứng dụng trong footer xuống hàng gọn gàng. */
  .nuoc-app-badges { justify-content: center; }
  .nuoc-app-badges img { height: 42px; }

  /* Nút nổi và nút lên đầu trang không che nội dung khi bàn phím hiện lên. */
  .nuoc-totop { width: 42px; height: 42px; }
  .nuoc-fab-toggle { width: 46px; height: 46px; }

  /* Menu trượt cuộn mượt trên iOS. */
  .nuoc-sb-panel { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 400px) {
  .nuoc-cont { width: calc(100% - 28px); }
  .nuoc-hours-days,
  .nuoc-hours-times { font-size: 13.5px; }
  .nuoc-hours-times span { letter-spacing: 0; }
  .nuoc-app-badges img { height: 38px; }
  .nuoc-hero-tools button { width: 36px; height: 36px; }
}

/* -------------------------------------------------------------------------
   15. TÔN TRỌNG TUỲ CHỌN GIẢM CHUYỂN ĐỘNG & IN ẤN
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .nuoc-reveal,
  .nuoc-stagger > * { opacity: 1 !important; transform: none !important; }
  .nuoc-split .nuoc-line > span { transform: none !important; }
  .nuoc-waterline { clip-path: none !important; }
  .nuoc-marquee-track { animation: none; }
}

@media print {
  .nuoc-hd,
  .nuoc-offcanvas,
  .nuoc-hero,
  .nuoc-fab,
  .nuoc-totop,
  .nuoc-progress,
  .nuoc-cookie,
  .nuoc-pre,
  .nuoc-lightbox,
  .nuoc-morebar,
  .nuoc-ft { display: none !important; }
  body.nuoc-scope { background: #fff; color: #000; font-size: 12pt; }
  .nuoc-sec { padding-block: 12pt; break-inside: avoid; }
  .nuoc-more { grid-template-rows: 1fr !important; opacity: 1 !important; }
  .nuoc-reveal,
  .nuoc-stagger > * { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* Thanh admin WordPress không được đè lên header */
body.admin-bar .nuoc-hd { top: 32px; }
@media (max-width: 782px) { body.admin-bar .nuoc-hd { top: 46px; } }