@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/*
  TYPOGRAPHY
  - Display / headings: Philosopher
  - Body / UI: SF Pro Display
  - Nếu website có file SF Pro Display dạng .woff2, khai báo @font-face trước :root.
  - Toàn bộ layout, màu sắc, spacing, responsive và hiệu ứng bên dưới được giữ nguyên.
*/

/* ==========================================================================
   DESIGN SYSTEM
   Lachateau navy · champagne gold · warm ivory · wedding florals
   Font: Philosopher (tiêu đề / display) · SF Pro Display (nội dung / UI)
   ========================================================================== */
    :root {
      --lct-navy: #0C2344;
      --lct-navy-deep: #091A33;
      --lct-gold: #C49A45;
      --lct-champagne: #D4B36A;
      --lct-gold-light: #E2CC96;
      --lct-ivory: #FBF8F1;
      --lct-cream: #F4EDE1;
      --lct-champagne-mist: #ECE1CF;
      --lct-white: #FFFFFF;
      --lct-text: #343330;
      --lct-text-muted: #77726B;
      --flower-ivory: #FFFDF7;
      --flower-cream: #F5ECDD;
      --flower-champagne: #E4D2B6;
      --flower-blush: #E8CAC5;
      --flower-dusty-pink: #D6AAA4;
      --flower-sage: #A5AD98;
      --quotation-plum: #612A49;
      --quotation-dusty-rose: #EFDDE4;

      --primary: var(--lct-navy);
      --secondary: var(--lct-gold);
      --primary-dark: var(--lct-navy-deep);
      --gold-dark: #8B682C;
      --bg: var(--lct-ivory);
      --bg-2: var(--lct-cream);
      --dark: var(--lct-text);
      --white: var(--lct-white);
      --body: var(--lct-text);
      --mute: #736E66;
      --line: rgba(12, 35, 68, .12);
      --line-2: rgba(12, 35, 68, .24);
      --lw: rgba(255, 255, 255, .14);

      --ff-h: 'Philosopher', Georgia, 'Times New Roman', serif;
      --ff: 'SF Pro Display', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
      --sh: 0 6px 24px rgba(12, 35, 68, .08);
      --sh-lg: 0 24px 64px rgba(12, 35, 68, .18);
      --e: cubic-bezier(.16, 1, .3, 1);
      --hd: 72px;
      --stk: 0px;
    }

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

    html {
      scroll-behavior: auto;
      scroll-padding-top: calc(var(--hd) + 10px);
      -webkit-text-size-adjust: 100%
    }


    body {
      margin: 0;
      background: var(--white);
      color: var(--body);
      font-family: var(--ff);
      font-size: 16px;
      line-height: 1.7;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      padding-bottom: var(--stk)
    }

    body.lock {
      overflow: hidden
    }

    img {
      max-width: 100%;
      display: block;
      height: auto
    }

    a {
      color: inherit;
      text-decoration: none
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: 0;
      background: none;
      color: inherit;
      padding: 0
    }

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

    p {
      margin: 0
    }

    ::selection {
      background: var(--secondary);
      color: var(--primary-dark)
    }

    :focus-visible {
      outline: 2px solid var(--secondary);
      outline-offset: 2px
    }

    h1 {
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: clamp(2.3rem, 6.4vw, 4.6rem);
      line-height: 1.08;
      margin: 0;
      color: #fff;
      letter-spacing: -.01em
    }

    h2 {
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: clamp(1.75rem, 4vw, 2.75rem);
      line-height: 1.15;
      margin: 0;
      color: var(--primary);
      letter-spacing: -.01em
    }

    h3 {
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: clamp(1.15rem, 2.2vw, 1.4rem);
      line-height: 1.25;
      margin: 0;
      color: var(--primary)
    }

    h4 {
      font-family: var(--ff);
      font-weight: 600;
      font-size: 1rem;
      margin: 0;
      color: var(--dark)
    }

    .it {
      font-style: italic;
      color: var(--secondary)
    }

    .wrap {
      width: 100%;
      max-width: 1240px;
      margin-inline: auto;
      padding-inline: 20px
    }

    .wrap-lg {
      width: 100%;
      max-width: 1440px;
      margin-inline: auto;
      padding-inline: 20px
    }

    .sec {
      padding: 68px 0;
      position: relative
    }

    .bg-white {
      background: var(--white)
    }

    .bg-cream {
      background: var(--bg)
    }

    .bg-navy {
      background: var(--primary);
      color: rgba(255, 255, 255, .78)
    }

    .bg-navy h2,
    .bg-navy h3 {
      color: #fff
    }

    .eyebrow {
      font-size: .68rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--gold-dark);
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 14px
    }

    .eyebrow::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--secondary)
    }

    .bg-navy .eyebrow {
      color: var(--secondary)
    }

    .ctr {
      text-align: center
    }

    .ctr .eyebrow {
      justify-content: center
    }

    .ctr .eyebrow::after {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--secondary)
    }

    .head {
      max-width: 700px;
      margin-bottom: 44px
    }

    .head.ctr {
      margin-inline: auto
    }

    #benefits .head {
      max-width: none
    }

    #benefits .head h2 {
      white-space: nowrap;
      font-size: clamp(1.25rem, 3vw, 2.15rem)
    }

    .lead {
      font-size: clamp(.96rem, 1.8vw, 1.06rem);
      line-height: 1.8
    }

    .bg-navy .lead {
      color: rgba(255, 255, 255, .72)
    }

    .rule {
      width: 56px;
      height: 1px;
      background: var(--secondary);
      margin: 18px 0
    }

    .ctr .rule {
      margin-inline: auto
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 26px;
      font-size: .76rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      border-radius: 2px;
      transition: all .45s var(--e);
      position: relative;
      overflow: hidden;
      min-height: 50px;
      line-height: 1.25;
      text-align: center
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .3), transparent 68%);
      transform: translateX(-130%);
      transition: transform .8s var(--e)
    }

    .btn:hover::after {
      transform: translateX(130%)
    }

    .b-gold {
      background: linear-gradient(115deg, var(--lct-gold), var(--lct-champagne) 60%, var(--lct-gold-light));
      color: var(--primary-dark);
      box-shadow: 0 8px 24px rgba(196, 154, 69, .32)
    }

    .b-gold:hover {
      transform: translateY(-2px);
      box-shadow: 0 16px 38px rgba(196, 154, 69, .42)
    }

    .b-navy {
      background: var(--primary);
      color: #fff
    }

    .b-navy:hover {
      background: var(--primary-dark);
      transform: translateY(-2px)
    }

    .b-line {
      border: 1px solid var(--line-2);
      color: var(--primary)
    }

    .b-line:hover {
      border-color: var(--secondary);
      color: var(--gold-dark);
      background: var(--bg)
    }

    .b-w {
      border: 1px solid rgba(255, 255, 255, .5);
      color: #fff;
      background: rgba(255, 255, 255, .07);
      backdrop-filter: blur(6px)
    }

    .b-w:hover {
      background: #fff;
      color: var(--primary)
    }

    .b-block {
      width: 100%
    }

    .b-sm {
      padding: 10px 18px;
      min-height: 42px;
      font-size: .68rem
    }

    /* ---------- Header ---------- */
    .hdr {
      position: fixed;
      inset: 0 0 auto;
      z-index: 800;
      height: var(--hd);
      display: flex;
      align-items: center;
      transition: background .45s, box-shadow .45s
    }

    .hdr::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #212c4c;
      transition: opacity .4s
    }

    .hdr.on {
      background: rgba(9, 26, 51, .96);
      backdrop-filter: blur(16px);
      box-shadow: 0 1px 0 rgba(196, 154, 69, .25)
    }

    .hdr.on::before {
      opacity: 0
    }

    .hdr-in {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: 100%;
      position: relative;
      z-index: 2
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 11px;
      color: #fff
    }

    .logo i {
      width: 40px;
      height: 40px;
      border: 1px solid var(--secondary);
      display: grid;
      place-items: center;
      font-style: normal;
      font-family: var(--ff-h);
      font-weight: 700;
      color: var(--secondary);
      font-size: 1.1rem;
      flex: 0 0 auto
    }

    .logo b {
      display: block;
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: 1.02rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      line-height: 1.1
    }

    .logo em {
      display: block;
      font-style: normal;
      font-size: .52rem;
      letter-spacing: .3em;
      text-transform: uppercase;
      color: var(--secondary);
      font-weight: 500
    }

    .nav {
      display: none;
      gap: 24px;
      align-items: center
    }

    .nav a {
      font-size: .7rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 500;
      color: rgba(255, 255, 255, .88);
      position: relative;
      padding: 5px 0;
      transition: color .35s
    }

    .nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 1px;
      background: var(--secondary);
      transition: width .45s var(--e)
    }

    .nav a:hover::after,
    .nav a.act::after {
      width: 100%
    }

    .nav a:hover,
    .nav a.act {
      color: var(--secondary)
    }

    .hdr-cta {
      display: none;
      align-items: center;
      gap: 12px
    }

    .hdr-cta .b-line {
      border-color: rgba(255, 255, 255, .35);
      color: #fff
    }

    .burger {
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      color: #fff
    }

    .burger svg {
      width: 28px;
      height: 28px
    }

    .burger .close-icon {
      display: none
    }

    .burger.x .menu-icon {
      display: none
    }

    .burger.x .close-icon {
      display: block
    }

    @media (max-width:1023px) {
      .hdr .img_logo {
        width: 180px;
        max-width: 60% !important;
        height: auto;
        flex-shrink: 0
      }
    }

    .burger i {
      width: 21px;
      height: 1.5px;
      background: currentColor;
      display: block;
      transition: transform .4s var(--e), opacity .3s
    }

    .burger.x i:nth-child(1) {
      transform: translateY(6.5px) rotate(45deg)
    }

    .burger.x i:nth-child(2) {
      opacity: 0
    }

    .burger.x i:nth-child(3) {
      transform: translateY(-6.5px) rotate(-45deg)
    }

    .drw {
      position: fixed;
      inset: 0;
      z-index: 799;
      background: var(--primary-dark);
      padding: calc(var(--hd) + 22px) 22px 36px;
      transform: translateY(-102%);
      transition: transform .6s var(--e);
      overflow-y: auto
    }

    .drw.open {
      transform: none
    }

    .drw a.dl {
      display: block;
      font-family: var(--ff-h);
      font-size: 1.5rem;
      color: #fff;
      padding: 10px 0;
      border-bottom: 1px solid var(--lw)
    }

    .drw-f {
      margin-top: 24px;
      display: grid;
      gap: 10px
    }

    /* ==========================================================================
   1. HERO
   ========================================================================== */
    .hero {
      position: relative;
      min-height: 100svh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: var(--primary-dark)
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .hero-bg img {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.4s ease;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 42%
    }

    .hero-bg img.is-active {
      opacity: 1
    }

    .hero-v {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(9, 26, 51, .32) 0%, rgba(9, 26, 51, .22) 38%, rgba(9, 26, 51, .3) 62%, rgba(9, 26, 51, .58) 100%)
    }

    .hero-v::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(64% 56% at 50% 46%, transparent, rgba(9, 26, 51, .18))
    }

    .hero-frame {
      position: absolute;
      inset: 16px;
      z-index: 2;
      border: 1px solid rgba(196, 154, 69, .35);
      pointer-events: none
    }

    .hero-in {
      position: relative;
      z-index: 3;
      width: 100%;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
      text-align: center;
      padding: calc(var(--hd) + 26px) 0 44px
    }

    .hero-in::before {
      content: "";
      position: absolute;
      inset: 8% 0 0;
      z-index: -1;
      pointer-events: none;
      background: radial-gradient(ellipse at center, rgba(9, 26, 51, .64) 0%, rgba(9, 26, 51, .42) 42%, transparent 74%)
    }

    .hero h1 {
      max-width: 17ch;
      margin-inline: auto;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .7), 0 6px 24px rgba(0, 0, 0, .5)
    }

    .hero h1.it {
      color: #F2D58F
    }

    .hero .hsub {
      font-size: clamp(.96rem, 2vw, 1.1rem);
      color: #fff;
      max-width: 58ch;
      margin: 18px auto 0;
      font-weight: 500;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .85)
    }

    .hero .eyebrow {
      color: #F2D58F;
      justify-content: center
    }

    .hero .eyebrow::after {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--secondary)
    }

    .hero-act {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
      justify-content: center
    }

    .hero-act .btn {
      flex: 1 1 210px;
      max-width: 300px
    }

    .tr {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 11px 18px;
      margin: 32px auto 0;
      padding-top: 24px;
      border-top: 1px solid rgba(196, 154, 69, .3);
      max-width: 900px
    }

    .tr li {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      font-size: 1.014rem;
      color: rgba(255, 255, 255, .9)
    }

    .tr svg {
      flex: 0 0 auto;
      color: var(--secondary)
    }

    .cue {
      position: absolute;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      z-index: 3;
      color: rgba(255, 255, 255, .55);
      font-size: .58rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      text-align: center
    }

    .cue i {
      display: block;
      width: 1px;
      height: 40px;
      background: linear-gradient(var(--secondary), transparent);
      margin: 8px auto 0;
      animation: cu 2.4s infinite
    }

    @keyframes cu {
      0% {
        transform: scaleY(0);
        transform-origin: top
      }

      50% {
        transform: scaleY(1);
        transform-origin: top
      }

      51% {
        transform-origin: bottom
      }

      100% {
        transform: scaleY(0);
        transform-origin: bottom
      }
    }

    /* ==========================================================================
   2. SẢNH
   ========================================================================== */
    .hl-filter {
      display: none;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 26px
    }

    .hl-filter button {
      padding: 10px 20px;
      border: 1px solid var(--line-2);
      border-radius: 30px;
      font-size: .72rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--primary);
      background: #fff;
      transition: all .35s var(--e)
    }

    .hl-filter button b {
      font-weight: 700;
      color: var(--gold-dark);
      margin-left: 4px
    }

    .hl-filter button.on {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff
    }

    .hl-filter button.on b {
      color: var(--secondary)
    }

    .hl-main {
      display: grid;
      gap: 0;
      background: #fff;
      border: 1px solid var(--line);
      box-shadow: var(--sh)
    }

    .hl-img {
      position: relative;
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--bg-2)
    }

    .hl-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: hlIn .8s var(--e)
    }

    .hl-img .hl-photo.swap {
      animation: hlSwap .65s var(--e)
    }

    @keyframes hlSwap {
      from {
        opacity: .35;
        transform: scale(1.035)
      }

      to {
        opacity: 1;
        transform: scale(1)
      }
    }

    .hl-arrow {
      position: absolute;
      top: 50%;
      z-index: 4;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(255, 255, 255, .75);
      border-radius: 50%;
      display: grid;
      place-items: center;
      transform: translateY(-50%);
      background: rgba(9, 26, 51, .58);
      color: #fff;
      font-size: 1.35rem;
      backdrop-filter: blur(8px);
      transition: background .3s, border-color .3s, color .3s
    }

    .hl-arrow:hover {
      background: var(--secondary);
      border-color: var(--secondary);
      color: var(--primary-dark)
    }

    .hl-arrow.prev {
      left: 16px
    }

    .hl-arrow.next {
      right: 16px
    }

    .hl-photo-count {
      position: absolute;
      top: 16px;
      left: 16px;
      z-index: 3;
      padding: 7px 11px;
      background: rgba(9, 26, 51, .6);
      color: #fff;
      font-size: .68rem;
      letter-spacing: .15em;
      backdrop-filter: blur(8px)
    }

    .hl-photo-dots {
      position: absolute;
      right: 20px;
      bottom: 22px;
      z-index: 3;
      display: flex;
      gap: 7px
    }

    .hl-photo-dots button {
      width: 7px;
      height: 7px;
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: 50%;
      background: transparent;
      transition: transform .3s, background .3s, border-color .3s
    }

    .hl-photo-dots button.on {
      background: var(--secondary);
      border-color: var(--secondary);
      transform: scale(1.3)
    }

    @media (prefers-reduced-motion:reduce) {
      .hl-img .hl-photo.swap {
        animation: none
      }
    }

    .hl-img {
      touch-action: pan-y
    }

    .hl-img .hl-photo {
      cursor: grab;
      user-select: none;
      -webkit-user-drag: none
    }

    .hl-img.swiping .hl-photo {
      cursor: grabbing
    }

    @keyframes hlIn {
      from {
        opacity: 0;
        transform: scale(1.04)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .hl-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 50%, rgba(9, 26, 51, .85));
      pointer-events: none
    }

    .hl-cap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 22px;
      color: #fff
    }

    .hl-cap small {
      display: block;
      font-size: .62rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--secondary);
      font-weight: 600
    }

    .hl-cap b {
      display: block;
      font-family: var(--ff-h);
      font-style: italic;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      font-weight: 500;
      line-height: 1.1;
      margin-top: 4px
    }

    .hl-count {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 2;
      background: rgba(9, 26, 51, .6);
      color: #fff;
      font-size: .7rem;
      letter-spacing: .14em;
      padding: 6px 10px;
      backdrop-filter: blur(6px)
    }

    .hl-info {
      padding: 26px 22px;
      display: flex;
      flex-direction: column;
      gap: 18px
    }

    .hl-desc {
      background: var(--lct-champagne-mist);
      border-left: 2px solid var(--secondary);
      padding: 16px 18px;
      font-size: .92rem;
      line-height: 1.75
    }

    .hl-desc.na {
      color: var(--mute);
      font-style: italic
    }

    .hl-specs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .hl-specs div {
      background: var(--lct-ivory);
      padding: 16px 14px;
      text-align: center
    }

    .hl-specs span {
      display: block;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--mute);
      font-weight: 600
    }

    .hl-specs b {
      display: block;
      font-family: var(--ff-h);
      font-size: 1.2rem;
      color: var(--primary);
      margin-top: 4px;
      line-height: 1.3;
      font-weight: 600
    }

    .hl-specs b.na {
      font-family: var(--ff);
      font-size: .82rem;
      color: var(--mute);
      font-weight: 500
    }

    #hlMain .hl-info .hl-act {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      gap: 9px
    }

    #hlMain .hl-info .hl-act>a.btn {
      display: flex;
      flex: 0 0 48px;
      align-self: stretch;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      min-height: 48px;
      margin: 0;
      padding: 12px 14px;
      justify-content: center;
      text-align: center;
      line-height: 1.35;
      white-space: normal
    }

    .hl-thumbs {
      display: flex;
      justify-content: flex-start;
      gap: 14px;
      overflow-x: auto;
      scrollbar-width: none;
      margin-top: 16px;
      padding: 8px 2px 14px;
      scroll-snap-type: x mandatory;
      overscroll-behavior-inline: contain;
      cursor: grab;
      touch-action: pan-x;
      user-select: none
    }

    .hl-thumbs.dragging {
      cursor: grabbing;
      scroll-snap-type: none;
      scroll-behavior: auto
    }

    .hl-thumbs::-webkit-scrollbar {
      display: none
    }

    .hl-th {
      flex: 0 0 clamp(176px, 18vw, 220px);
      position: relative;
      overflow: hidden;
      scroll-snap-align: start;
      text-align: left;
      border: 1px solid rgba(12, 35, 68, .14);
      background: var(--primary-dark);
      box-shadow: 0 5px 18px rgba(12, 35, 68, .09);
      transition: transform .4s var(--e), border-color .4s, box-shadow .4s
    }

    .hl-th:hover {
      transform: translateY(-3px);
      border-color: rgba(196, 154, 69, .7);
      box-shadow: 0 13px 28px rgba(12, 35, 68, .17)
    }

    .hl-th.on {
      border-color: var(--secondary);
      box-shadow: 0 0 0 1px var(--secondary), 0 12px 30px rgba(12, 35, 68, .17)
    }

    .hl-th .im {
      aspect-ratio: 4/3;
      overflow: hidden;
      background: var(--bg-2)
    }

    .hl-th .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: brightness(.78);
      transition: transform .8s var(--e), filter .5s
    }

    .hl-th:hover .im img,
    .hl-th.on .im img {
      transform: scale(1.045);
      filter: brightness(.9)
    }

    .hl-th div.t {
      position: absolute;
      inset: auto 0 0;
      padding: 30px 14px 13px;
      background: linear-gradient(transparent, rgba(9, 26, 51, .94))
    }

    .hl-th b {
      display: block;
      font-family: var(--ff-h);
      font-size: 1.02rem;
      color: #fff;
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: .015em
    }

    .hl-th b::before {
      content: "";
      display: block;
      width: 24px;
      height: 1px;
      background: var(--secondary);
      margin-bottom: 7px
    }

    /* ==========================================================================
   3. ESP — GIỚI THIỆU
   ========================================================================== */
    .esp {
      background: var(--lct-ivory);
      color: var(--lct-text);
      overflow: hidden
    }

    .esp::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .06;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23D4B36A'%3E%3Cpath d='M40 6 L74 40 L40 74 L6 40 Z'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 80px
    }

    .esp .wrap {
      position: relative
    }

    .esp-top {
      display: grid;
      gap: 30px;
      align-items: center;
      margin-bottom: 56px
    }

    .esp-quote {
      font-family: var(--ff-h);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.7rem, 4.2vw, 3rem);
      line-height: 1.25;
      color: var(--primary)
    }

    .esp-quote em {
      color: #8B682C
    }

    .esp-quote::before {
      content: "“";
      display: block;
      font-size: 4rem;
      line-height: .6;
      color: #8B682C;
      margin-bottom: 10px;
      font-style: normal
    }

    .esp-top p.lead {
      color: var(--lct-text)
    }

    .esp-img {
      position: relative
    }

    .esp-img .a {
      aspect-ratio: 4/5;
      overflow: hidden;
      border-radius: 220px 220px 0 0
    }

    .esp-img .a img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .esp-img .a::after {
      content: "";
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(196, 154, 69, .55);
      border-radius: 210px 210px 0 0;
      pointer-events: none
    }

    /* .esp-img .b {
      position: absolute;
      left: -10px;
      bottom: -24px;
      width: 44%;
      aspect-ratio: 1;
      overflow: hidden;
      border: 6px solid var(--lct-ivory)
    } */

    .esp-img .b img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .esp-pil {
      display: grid;
      gap: 1px;
      background: rgba(196, 154, 69, .2);
      border: 1px solid rgba(196, 154, 69, .2)
    }

    .esp-pil article {
      background: var(--lct-ivory);
      padding: 30px 24px;
      position: relative;
      transition: background .5s var(--e)
    }

    .esp-pil article:hover {
      background: var(--lct-cream)
    }

    .esp-pil .n {
      font-family: var(--ff-h);
      font-size: 3rem;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(196, 154, 69, .6);
      display: block;
      margin-bottom: 14px;
      transition: color .5s
    }

    .esp-pil article:hover .n {
      color: #8B682C;
      -webkit-text-stroke-color: transparent
    }

    .esp-pil h3 {
      color: var(--primary);
      margin-bottom: 10px
    }

    .esp-pil p {
      font-size: .9rem;
      color: var(--lct-text)
    }

    .esp-pil .st {
      display: inline-block;
      margin-top: 16px;
      font-family: var(--ff-h);
      font-size: 1.3rem;
      color: #8B682C
    }

    .esp-pil .st small {
      font-family: var(--ff);
      font-size: .62rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--lct-text-muted);
      margin-left: 6px
    }

    /* ==========================================================================
   4. QUY MÔ (giữ nguyên bố cục)
   ========================================================================== */
    .sc-cards {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, 1fr);
      margin-bottom: 30px
    }

    .sc-card {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 20px 16px;
      text-align: center;
      position: relative;
      transition: all .5s var(--e)
    }

    .sc-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--secondary);
      transform: scaleX(0);
      transition: transform .5s var(--e)
    }

    .sc-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--sh-lg);
      border-color: transparent
    }

    .sc-card:hover::before {
      transform: scaleX(1)
    }

    .sc-card b {
      display: block;
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: 1.32rem;
      color: var(--primary);
      line-height: 1.1
    }

    .sc-card span {
      display: block;
      font-size: .72rem;
      color: var(--mute);
      margin-top: 5px
    }

    .sc-card em {
      display: inline-block;
      font-style: normal;
      margin-top: 10px;
      font-size: .62rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--gold-dark);
      border: 1px solid var(--line);
      padding: 4px 9px
    }

    .tbls {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--line);
      background: var(--white)
    }

    table.bft {
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
      font-size: .88rem
    }

    table.bft th,
    table.bft td {
      padding: 16px 14px;
      border-bottom: 1px solid var(--line);
      text-align: center;
      vertical-align: middle
    }

    table.bft thead th {
      background: var(--primary);
      color: #fff;
      font-size: .66rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 600;
      border: 0
    }

    table.bft thead th small {
      display: block;
      font-size: .58rem;
      opacity: .65;
      letter-spacing: .12em;
      margin-top: 3px;
      font-weight: 500
    }

    table.bft tbody td:first-child,
    table.bft thead th:first-child {
      text-align: left;
      min-width: 290px
    }

    table.bft tbody tr:nth-child(even) {
      background: var(--bg)
    }

    table.bft tbody tr:hover {
      background: var(--bg-2)
    }

    .yes {
      display: inline-grid;
      place-items: center;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--secondary);
      color: var(--primary-dark);
      font-size: .74rem;
      font-weight: 700
    }

    .no {
      color: rgba(12, 35, 68, .24)
    }

    .legend {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      margin-top: 14px;
      font-size: 0.7rem;
      color: var(--mute);
      align-items: center
    }

    .legend .yes {
      width: 18px;
      height: 18px;
      font-size: .6rem;
      margin-right: 5px
    }

    .note {
      background: var(--bg-2);
      border-left: 2px solid var(--secondary);
      padding: 12px 16px;
      margin-top: 20px
    }

    .note li {
      display: flex;
      gap: 11px;
      font-size: .72rem;
      line-height: 1.55;
      padding: 3px 0;
      color: var(--body)
    }

    .note li b {
      color: var(--primary)
    }

    .note svg {
      flex: 0 0 auto;
      margin-top: 4px;
      color: var(--gold-dark)
    }

    /* ==========================================================================
   5. MENU (giữ nguyên giao diện ngoài)
   ========================================================================== */
    .tiers {
      display: flex;
      gap: 20px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding: 4px 2px 14px
    }

    .tiers::-webkit-scrollbar {
      display: none
    }

    .tiers>.tier {
      flex: 0 0 100%;
      min-width: 0;
      scroll-snap-align: start
    }

    .tier-carousel-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      margin: 26px 0 10px
    }

    .tier-carousel-controls button {
      width: 40px;
      height: 40px;
      padding: 0;
      border: 1px solid var(--line-2);
      border-radius: 50%;
      color: var(--primary);
      background: var(--white);
      font-size: 1.35rem;
      line-height: 1;
      transition: color .2s, background .2s, border-color .2s
    }

    .tier-carousel-controls button:hover {
      color: var(--white);
      background: var(--primary);
      border-color: var(--primary)
    }

    .menu-veg-note {
      max-width: 820px;
      margin: 0 auto 12px;
      color: var(--mute);
      font-size: .88rem;
      line-height: 1.7;
      text-align: center
    }

    .tier-veg-kicker {
      display: block;
      margin-bottom: 8px;
      color: var(--gold-dark);
      font-size: .62rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase
    }

    .tier-price.tier-veg-label {
      font-family: var(--ff);
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase
    }

    .tier {
      background: var(--white);
      border: 1px solid var(--line);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      transition: transform .55s var(--e), box-shadow .55s var(--e);
      position: relative
    }

    .tier:hover {
      transform: translateY(-6px);
      box-shadow: var(--sh-lg)
    }

    .tier.sel {
      border-color: var(--secondary);
      box-shadow: 0 0 0 1px var(--secondary), var(--sh-lg)
    }

    .tier[data-tier^="veg-"] {
      border-color: var(--flower-champagne)
    }

    .tier[data-tier^="veg-"].sel {
      border-color: var(--secondary)
    }

    .tier[data-tier^="veg-"] .tier-ct {
      background: var(--flower-blush)
    }

    .tier-img {
      aspect-ratio: 16/11;
      overflow: hidden;
      background: var(--bg-2);
      position: relative
    }

    .tier-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 1.1s var(--e)
    }

    .tier:hover .tier-img img {
      transform: scale(1.06)
    }

    .tier-img::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent 50%, rgba(9, 26, 51, .55))
    }

    .tier-price {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 2;
      background: var(--primary);
      color: #fff;
      padding: 10px 16px;
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: 1.22rem
    }

    .tier-price small {
      font-family: var(--ff);
      font-size: .6rem;
      letter-spacing: .1em;
      font-weight: 500;
      opacity: .78;
      margin-left: 4px
    }

    .tier-ct {
      position: absolute;
      right: 10px;
      top: 10px;
      z-index: 2;
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 600;
      background: rgba(255, 255, 255, .94);
      color: var(--primary);
      padding: 5px 10px
    }

    .tier-sel {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 2;
      font-size: .6rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 700;
      background: var(--secondary);
      color: var(--primary-dark);
      padding: 5px 10px;
      display: none
    }

    .tier.sel .tier-sel {
      display: block
    }

    .tier-in {
      padding: 24px 22px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .tier-in h3 {
      margin-bottom: 10px
    }

    .tier-in>p {
      font-size: .88rem;
      margin-bottom: 16px
    }

    .stars {
      border-top: 1px dashed var(--line);
      border-bottom: 1px dashed var(--line);
      padding: 13px 0;
      margin-bottom: 16px;
      flex: 1
    }

    .stars em {
      font-style: normal;
      display: block;
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-dark);
      font-weight: 600;
      margin-bottom: 8px
    }

    .stars li {
      display: flex;
      gap: 8px;
      font-size: .85rem;
      color: var(--dark);
      padding: 3px 0;
      align-items: flex-start
    }

    .stars svg {
      flex: 0 0 auto;
      margin-top: 5px;
      color: var(--secondary)
    }

    .tags {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
      margin-bottom: 16px
    }

    .tag {
      font-size: .58rem;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 600;
      padding: 4px 9px;
      border: 1px solid var(--line-2);
      color: var(--mute)
    }

    .tag.hl {
      background: var(--secondary);
      border-color: var(--secondary);
      color: var(--primary-dark)
    }

    .veg-grid {
      display: grid;
      gap: 18px
    }

    .mm-card {
      background: var(--white);
      border: 1px solid var(--line);
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      position: relative;
      transition: border-color .3s, box-shadow .3s
    }

    .mm-card.sel {
      border-color: var(--secondary);
      box-shadow: 0 0 0 1px var(--secondary)
    }

    .mm-card h4 {
      font-family: var(--ff-h);
      font-weight: 600;
      color: var(--primary);
      font-size: 1.16rem;
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      margin-bottom: 14px
    }

    .mm-cover {
      aspect-ratio: 16 / 9;
      overflow: hidden;
      margin: -22px -20px 18px;
      background: var(--bg-2)
    }

    .mm-cover img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .mm-g {
      margin-bottom: 14px
    }

    .mm-g em {
      font-style: normal;
      display: block;
      font-size: .62rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-dark);
      font-weight: 600;
      margin-bottom: 7px
    }

    .mm-g li {
      display: flex;
      gap: 10px;
      font-size: .9rem;
      color: var(--dark);
      padding: 4px 0;
      align-items: flex-start
    }

    .mm-g li i {
      font-style: normal;
      font-family: var(--ff-h);
      font-weight: 700;
      color: var(--secondary);
      font-size: .76rem;
      min-width: 18px;
      padding-top: 2px
    }

    .mm-pick {
      margin-top: auto;
      padding-top: 12px
    }

    .menu-bar {
      margin-top: 34px;
      display: grid;
      gap: 14px;
      align-items: center;
      background: var(--primary);
      color: #fff;
      padding: 20px 22px
    }

    .menu-bar .sel-out {
      font-size: .88rem;
      color: rgba(255, 255, 255, .72)
    }

    .menu-bar .sel-out b {
      display: block;
      font-family: var(--ff-h);
      font-size: 1.15rem;
      color: var(--secondary);
      font-weight: 600
    }

    .menu-bar .acts {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
    }

    .menu-bar .acts .btn {
      flex: 1 1 180px
    }

    /* ==========================================================================
   6. DỊCH VỤ ĐI KÈM
   ========================================================================== */
    .svc-grid {
      display: grid;
      gap: 12px;
      /* height: 450px; */
      grid-template-columns: 1fr
    }

    .svc-cat {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: left;
      color: #fff;
      background: var(--primary)
    }

    .svc-cat img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 155%;
      object-fit: cover;
      transition: transform 1.2s var(--e)
    }

    .svc-cat::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(9, 26, 51, .15), rgba(9, 26, 51, .92));
      transition: background .5s
    }

    .svc-cat::after {
      content: "";
      position: absolute;
      inset: 10px;
      z-index: 1;
      border: 1px solid rgba(196, 154, 69, .0);
      transition: border-color .5s
    }

    .svc-cat:hover img {
      transform: scale(1.07)
    }

    .svc-cat:hover::after {
      border-color: rgba(196, 154, 69, .6)
    }

    .svc-cat .in {
      position: relative;
      z-index: 2;
      padding: 24px 22px
    }

    .svc-cat .cnt {
      position: absolute;
      top: 18px;
      left: 22px;
      z-index: 2;
      font-family: var(--ff-h);
      font-size: 2.4rem;
      line-height: 1;
      color: var(--secondary)
    }

    .svc-cat .cnt small {
      font-family: var(--ff);
      font-size: .6rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .7);
      display: block;
      margin-top: 2px
    }

    .svc-cat h3 {
      color: #fff;
      font-size: 1.35rem
    }

    .svc-cat .sub {
      font-size: .8rem;
      color: rgba(255, 255, 255, .7);
      margin-top: 4px
    }

    .svc-cat .from {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, .18)
    }

    .svc-cat .from span {
      font-size: .62rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .6)
    }

    .svc-cat .from b {
      font-family: var(--ff-h);
      font-size: 1.25rem;
      color: var(--secondary);
      font-weight: 600
    }

    .svc-cat .go {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      margin-top: 12px;
      font-size: .66rem;
      letter-spacing: .16em;
      text-transform: uppercase;
      font-weight: 600;
      color: #fff
    }

    .svc-cat .go i {
      font-style: normal;
      transition: transform .4s var(--e)
    }

    .svc-cat:hover .go i {
      transform: translateX(6px)
    }

    .svc-bar {
      background: var(--bg);
      border: 1px solid var(--line);
      padding: 24px 22px;
      display: grid;
      gap: 16px;
      align-items: center;
      margin-top: 16px
    }

    .svc-bar h4 {
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: 1.22rem;
      color: var(--primary)
    }

    .svc-bar p {
      font-size: .88rem;
      margin-top: 6px
    }

    /* ==========================================================================
   7. QUY TRÌNH THANH TOÁN — ngang
   ========================================================================== */
    .pay-row {
      display: flex;
      gap: 16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
      padding: 6px 2px 10px;
      margin: 0 -20px;
      padding-inline: 20px
    }

    .pay-row::-webkit-scrollbar {
      display: none
    }

    .pay-step {
      flex: 0 0 82%;
      scroll-snap-align: center;
      position: relative;
      text-align: center;
      padding-top: 40px
    }

    .pay-step::before {
      content: "";
      position: absolute;
      top: 28px;
      left: 50%;
      right: -50%;
      height: 1px;
      background: linear-gradient(90deg, var(--secondary), rgba(196, 154, 69, .2))
    }

    .pay-step:last-child::before {
      display: none
    }

    .pay-dot {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #D4B36A;
      border: 1px solid var(--secondary);
      display: grid;
      place-items: center;
      font-family: var(--ff-h);
      font-size: 1.2rem;
      color: #212c4c;
      z-index: 2;
      box-shadow: 0 0 0 6px var(--lct-cream)
      
    }

    .pay-card {
      margin-top: 34px;
      background: var(--lct-white);
      border: 1px solid rgba(196, 154, 69, .25);
      padding: 26px 22px;
      height: calc(100% - 34px);
      transition: all .5s var(--e)
    }

    .pay-card:hover {
      background: var(--lct-ivory);
      border-color: #8B682C;
      transform: translateY(-4px)
    }

    .pay-card .when {
      display: inline-block;
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--primary-dark);
      background: var(--secondary);
      padding: 4px 10px;
      margin-bottom: 12px
    }

    .pay-card h3 {
      color: var(--primary);
      margin-bottom: 12px
    }

    .pay-card .amt {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px
    }

    .pay-card .amt span {
      display: inline-block;
      font-family: var(--ff-h);
      font-size: 1.05rem;
      color: #8B682C
    }

    .pay-card .pay-amt {
      display: flex;
    }

    .pay-card p {
      font-size: .86rem;
      color: var(--lct-text)
    }

    .pay-note {
      margin-top: 28px;
      display: grid;
      gap: 10px;
      padding: 20px 22px;
      border-left: 2px solid var(--secondary);
      background: var(--lct-champagne-mist)
    }

    .pay-note li {
      display: flex;
      gap: 10px;
      font-size: .87rem;
      color: var(--lct-text)
    }

    .pay-note li::before {
      content: "✓";
      color: #8B682C;
      font-weight: 700
    }

    /* ==========================================================================
   8. FORM
   ========================================================================== */
    .lead-grid {
      display: grid;
      gap: 36px
    }

    .tstrip {
      display: grid;
      gap: 11px;
      margin: 24px 0
    }

    .tstrip li {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: .9rem
    }

    .tstrip svg {
      flex: 0 0 auto;
      margin-top: 4px;
      color: var(--gold-dark)
    }

    .fw {
      background: var(--white);
      border: 1px solid var(--line-2);
      box-shadow: var(--sh-lg);
      overflow: hidden
    }

    .fh {
      padding: 24px 22px;
      background: var(--primary);
      color: #fff;
      border-bottom: 2px solid var(--secondary)
    }

    .fh h3 {
      color: #fff;
      font-size: 1.35rem
    }

    .fh p {
      margin-top: 6px;
      font-size: .82rem;
      color: rgba(255, 255, 255, .7)
    }

    .fb {
      padding: 24px 22px
    }

    .fgrid {
      display: grid;
      gap: 14px
    }

    .fld label {
      display: block;
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--primary);
      margin-bottom: 7px
    }

    .fld label i {
      font-style: normal;
      color: #B3261E
    }

    .fld input,
    .fld select,
    .fld textarea {
      width: 100%;
      padding: 13px 14px;
      border: 1px solid var(--line-2);
      background: var(--bg);
      font-family: inherit;
      font-size: .95rem;
      color: var(--dark);
      border-radius: 2px;
      min-height: 50px;
      transition: all .3s
    }

    .fld textarea {
      min-height: 90px;
      resize: vertical
    }

    .fld input:focus,
    .fld select:focus,
    .fld textarea:focus {
      outline: 0;
      border-color: var(--secondary);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(196, 154, 69, .18)
    }

    .fld .er {
      display: none;
      color: #B3261E;
      font-size: .74rem;
      margin-top: 5px
    }

    .fld.bad input {
      border-color: #B3261E
    }

    .fld.bad .er {
      display: block
    }

    .fsec {
      font-size: .62rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--gold-dark);
      padding-top: 8px;
      border-top: 1px dashed var(--line);
      margin-top: 4px
    }

    .picked {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border: 1px dashed var(--secondary);
      background: var(--lct-ivory);
      min-height: 50px
    }

    .picked .v {
      font-size: .9rem;
      color: var(--dark)
    }

    .picked .v b {
      display: block;
      font-weight: 600;
      color: var(--primary)
    }

    .picked .v small {
      color: var(--mute)
    }

    .picked.empty .v {
      color: var(--mute);
      font-style: italic
    }

    .picked a {
      font-size: .66rem;
      letter-spacing: .12em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--gold-dark);
      white-space: nowrap
    }

    .consent {
      font-size: .72rem;
      color: var(--mute);
      margin-top: 12px;
      text-align: center
    }

    .done {
      display: none;
      text-align: center;
      padding: 40px 22px
    }

    .done.on {
      display: block;
      animation: fu .5s var(--e)
    }

    @keyframes fu {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .done .ic {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--bg);
      border: 1px solid var(--secondary);
      display: grid;
      place-items: center;
      margin: 0 auto 18px;
      color: var(--gold-dark);
      font-size: 1.9rem
    }

    .done .rec {
      background: var(--bg);
      text-align: left;
      padding: 14px 16px;
      margin: 16px 0;
      font-size: .86rem;
      display: grid;
      gap: 4px
    }

    .done .rec b {
      color: var(--primary)
    }

    /* ==========================================================================
   9. FAQ — hiệu ứng
   ========================================================================== */
    #faqOut .faq-i[hidden],
    #faqMore[hidden] {
      display: none !important
    }

    .faq-grid {
      display: grid;
      gap: 30px
    }

    .faq-i {
      position: relative;
      border-bottom: 1px solid var(--line);
      transition: background .5s var(--e), box-shadow .5s var(--e);
      opacity: 0;
      transform: translateY(18px)
    }

    .faq-i.in {
      opacity: 1;
      transform: none;
      transition: opacity .7s var(--e), transform .7s var(--e), background .5s var(--e), box-shadow .5s var(--e)
    }

    .faq-i::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 2px;
      background: var(--secondary);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform .5s var(--e)
    }

    .faq-i::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      height: 1px;
      width: 0;
      background: var(--secondary);
      transition: width .6s var(--e)
    }

    .faq-i:hover::after {
      width: 100%
    }

    .faq-i.on {
      background: #fff;
      box-shadow: var(--sh)
    }

    .faq-i.on::before {
      transform: scaleY(1)
    }

    .faq-q {
      width: 100%;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 14px;
      padding: 20px 16px;
      text-align: left;
      font-size: .98rem;
      font-weight: 500;
      color: var(--dark);
      transition: color .3s
    }

    .faq-q .no {
      font-family: var(--ff-h);
      font-size: .95rem;
      color: var(--secondary);
      min-width: 24px;
      transition: transform .4s var(--e)
    }

    .faq-i.on .faq-q .no {
      transform: scale(1.25)
    }

    .faq-q:hover,
    .faq-i.on .faq-q {
      color: var(--primary)
    }

    .plus {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--line-2);
      position: relative;
      flex: 0 0 auto;
      transition: all .45s var(--e)
    }

    .plus::before,
    .plus::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: var(--gold-dark);
      transition: transform .45s var(--e)
    }

    .plus::before {
      width: 12px;
      height: 1.5px;
      transform: translate(-50%, -50%)
    }

    .plus::after {
      width: 1.5px;
      height: 12px;
      transform: translate(-50%, -50%)
    }

    .faq-i.on .plus {
      background: var(--primary);
      border-color: var(--primary);
      transform: rotate(180deg)
    }

    .faq-i.on .plus::before {
      background: var(--secondary)
    }

    .faq-i.on .plus::after {
      transform: translate(-50%, -50%) scaleY(0)
    }

    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .55s var(--e)
    }

    .faq-i.on .faq-a {
      grid-template-rows: 1fr
    }

    .faq-a>div {
      overflow: hidden
    }

    .faq-a .in {
      padding: 0 16px 22px 54px;
      opacity: 0;
      transform: translateY(-8px);
      transition: opacity .45s .1s var(--e), transform .45s .1s var(--e)
    }

    .faq-i.on .faq-a .in {
      opacity: 1;
      transform: none
    }

    .faq-a .sh {
      display: block;
      font-family: var(--ff-h);
      font-size: 1.02rem;
      color: var(--primary);
      margin-bottom: 8px;
      font-weight: 600
    }

    .faq-a p {
      font-size: .92rem
    }

    /* ---------- Contact ---------- */
    .ct-grid {
      display: grid;
      gap: 30px
    }

    .map {
      aspect-ratio: 4/3;
      border: 1px solid var(--line);
      overflow: hidden;
      background: var(--bg-2)
    }

    .map iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block
    }

    .cinfo li {
      display: flex;
      gap: 13px;
      padding: 16px 0;
      border-bottom: 1px solid var(--line);
      align-items: flex-start
    }

    .cinfo svg {
      flex: 0 0 auto;
      margin-top: 3px;
      color: var(--gold-dark)
    }

    .cinfo b {
      display: block;
      font-size: .62rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--mute);
      margin-bottom: 3px;
      font-weight: 600
    }

    .cinfo span {
      font-size: .98rem;
      color: var(--dark)
    }

    /* ---------- Footer ---------- */
    .ft-hero {
      position: relative;
      min-height: 70svh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      background: var(--primary-dark)
    }

    .ft-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .ft-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, rgba(9, 26, 51, .55), rgba(9, 26, 51, .75) 60%, rgba(9, 26, 51, .98))
    }

    .ft-hero::after {
      content: "";
      position: absolute;
      inset: 18px;
      z-index: 1;
      border: 1px solid rgba(196, 154, 69, .35);
      pointer-events: none
    }

    .ft-hero .in {
      position: relative;
      z-index: 2;
      padding: 80px 22px;
      max-width: 820px
    }

    .ft-hero .orn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: var(--secondary);
      margin-bottom: 22px
    }

    .ft-hero .orn::before,
    .ft-hero .orn::after {
      content: "";
      width: 46px;
      height: 1px;
      background: currentColor
    }

    .ft-hero .orn i {
      width: 7px;
      height: 7px;
      border: 1px solid currentColor;
      transform: rotate(45deg)
    }

    .ft-hero h2 {
      color: #fff;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(2rem, 5.4vw, 3.6rem);
      line-height: 1.2
    }

    .ft-hero p {
      color: rgba(255, 255, 255, .78);
      margin-top: 18px;
      font-size: clamp(.95rem, 1.8vw, 1.06rem);
      font-weight: 300
    }

    .ft-hero .sig {
      font-family: var(--ff-h);
      color: var(--secondary);
      margin-top: 22px;
      font-size: 1.1rem;
      letter-spacing: .06em
    }

    .ft {
      background: var(--primary-dark);
      color: rgba(255, 255, 255, .6);
      padding: 26px 0;
      font-size: .82rem
    }

    .ft-row {
      display: flex;
      flex-direction: column;
      gap: 14px;
      align-items: center;
      text-align: center
    }

    .ft-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px 20px
    }

    .ft-nav a {
      font-size: .7rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .7);
      transition: color .3s
    }

    .ft-nav a:hover {
      color: var(--secondary)
    }

    .ft-info {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 4px 18px;
      font-size: .78rem
    }

    .ft-info a:hover {
      color: var(--secondary)
    }

    .ft-copy {
      font-size: .72rem;
      color: rgba(255, 255, 255, .42);
      border-top: 1px solid var(--lw);
      padding-top: 14px;
      width: 100%
    }

    /* ---------- Sticky / float ---------- */
    .stk {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 780;
      display: grid;
      grid-template-columns: 1fr 1fr;
      transform: translateY(110%);
      transition: transform .5s var(--e);
      padding-bottom: env(safe-area-inset-bottom)
    }

    .stk.on {
      transform: none
    }

    .stk a {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 15px 8px;
      font-size: .72rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      min-height: 54px
    }

    .stk .a1 {
      background: var(--secondary);
      color: var(--primary-dark)
    }

    .stk .a2 {
      background: var(--primary);
      color: #fff
    }

    .flt {
      position: fixed;
      right: 10px;
      bottom: 60px;
      z-index: 9999;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .flt a {
      width: 56px;
      height: 56px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;

      text-decoration: none;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .16);

      transition:
        transform .2s ease,
        box-shadow .2s ease;
    }

    .flt a:hover {
      transform: translateY(-2px);
      box-shadow: 0 7px 20px rgba(0, 0, 0, .22);
    }

    .flt svg {
      width: 25px;
      height: 25px;
      fill: #fff;
    }

    /* Phone */
    .flt .t {
      background: #09254b;
    }

    /* Zalo */
    .flt .z {
      background: #0068ff;
    }

    .zalo-icon {
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      font-family: Arial, sans-serif;
    }

    /* Messenger */
    .flt .m {
      background: linear-gradient(135deg,
          #00b2ff 0%,
          #006aff 35%,
          #a033ff 70%,
          #ff4f9a 100%);
    }

    .z {
      background: #0068FF
    }

    .m {
      background: linear-gradient(45deg, #0099FF, #A033FF, #FF5280)
    }

    .t {
      background: var(--primary)
    }

    /* ---------- Toast ---------- */
    .toast {
      position: fixed;
      left: 50%;
      bottom: calc(var(--stk) + 22px);
      transform: translate(-50%, 30px);
      opacity: 0;
      z-index: 1400;
      background: var(--primary);
      color: #fff;
      padding: 12px 18px;
      font-size: .84rem;
      border-left: 3px solid var(--secondary);
      box-shadow: var(--sh-lg);
      transition: all .45s var(--e);
      pointer-events: none;
      max-width: 92vw
    }

    .toast.on {
      opacity: 1;
      transform: translate(-50%, 0)
    }

    /* ---------- Modal ---------- */
    .mdl {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: none;
      align-items: flex-end;
      justify-content: center
    }

    .mdl.on {
      display: flex
    }

    .mdl-bg {
      position: absolute;
      inset: 0;
      background: rgba(9, 26, 51, .7);
      backdrop-filter: blur(3px);
      animation: fade .35s
    }

    @keyframes fade {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    .mdl-box {
      position: relative;
      background: var(--bg);
      width: 100%;
      max-width: 1340px;
      max-height: 92svh;
      display: flex;
      flex-direction: column;
      animation: up .45s var(--e);
      box-shadow: var(--sh-lg)
    }

    @keyframes up {
      from {
        transform: translateY(40px);
        opacity: 0
      }

      to {
        transform: none;
        opacity: 1
      }
    }

    .mdl-h {
      padding: 22px 60px 18px 22px;
      background: var(--primary);
      color: #fff;
      position: relative;
      flex: 0 0 auto;
      border-bottom: 2px solid var(--secondary)
    }

    .mdl-h h3 {
      color: #fff;
      font-size: 1.34rem
    }

    .mdl-h h4 {
      margin-top: 5px;
      font-size: 1.02rem;
      color: rgba(255, 255, 255, .82);
      font-weight: 600
    }

    .mdl-h p {
      margin-top: 5px;
      font-size: .82rem;
      color: rgba(255, 255, 255, .72)
    }

    .mdl-x {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      color: #fff;
      font-size: 1.7rem;
      line-height: 1;
      border: 1px solid rgba(255, 255, 255, .28);
      transition: background .3s
    }

    .mdl-x:hover {
      background: var(--secondary);
      color: var(--primary-dark)
    }

    .mdl-b {
      padding: 22px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch
    }

    .mdl-f {
      padding: 16px 22px;
      border-top: 1px solid var(--line);
      background: var(--white);
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      flex: 0 0 auto
    }

    .mdl-f .btn {
      flex: 1 1 180px
    }

    .mm {
      display: grid;
      gap: 18px
    }

    .pg {
      margin-bottom: 22px
    }

    .pg>h4 {
      font-family: var(--ff-h);
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--primary);
      padding-bottom: 9px;
      border-bottom: 1px solid var(--secondary);
      margin-bottom: 4px
    }

    .pr2 {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 0;
      border-bottom: 1px solid var(--line);
      align-items: flex-start
    }

    .pr2 .l b {
      display: block;
      font-size: .92rem;
      color: var(--dark);
      font-weight: 500;
      line-height: 1.4
    }

    .pr2 .l span {
      display: block;
      font-size: .76rem;
      color: var(--mute);
      margin-top: 3px
    }

    .pr2 .r {
      text-align: right;
      white-space: nowrap
    }

    .pr2 .r b {
      font-family: var(--ff-h);
      font-weight: 600;
      color: var(--gold-dark);
      font-size: 1.02rem
    }

    .pr2 .r span {
      display: block;
      font-size: .64rem;
      color: var(--mute);
      letter-spacing: .1em;
      text-transform: uppercase
    }

    /* modal đồ uống */
    .dk-packs {
      display: grid;
      gap: 14px;
      margin-bottom: 22px
    }

    .dk-pack {
      background: #fff;
      border: 1px solid var(--line);
      padding: 22px 20px;
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 10px;
      transition: border-color .3s, box-shadow .3s
    }

    .dk-pack.sel {
      border-color: var(--secondary);
      box-shadow: 0 0 0 1px var(--secondary)
    }

    .dk-pack.hi {
      background: var(--primary);
      color: #fff;
      border-color: var(--primary)
    }

    .dk-pack .lb {
      font-size: .6rem;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--gold-dark)
    }

    .dk-pack.hi .lb {
      color: var(--secondary)
    }

    .dk-pack h4 {
      font-family: var(--ff-h);
      font-size: 1.15rem;
      color: var(--primary);
      font-weight: 600
    }

    .dk-pack.hi h4 {
      color: #fff
    }

    .dk-pack .p {
      font-family: var(--ff-h);
      font-size: 2rem;
      color: var(--gold-dark);
      line-height: 1
    }

    .dk-pack.hi .p {
      color: var(--secondary)
    }

    .dk-pack .p small {
      font-family: var(--ff);
      font-size: .66rem;
      color: var(--mute);
      margin-left: 4px
    }

    .dk-pack.hi .p small {
      color: rgba(255, 255, 255, .6)
    }

    .dk-pack .pill {
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: .56rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 700;
      background: var(--secondary);
      color: var(--primary-dark);
      padding: 4px 9px
    }

    /* .dk-cols {
      display: grid;
      gap: 14px
    } */

    .dk-box {
      background: #fff;
      border: 1px solid var(--line);
      padding: 20px
    }

    .dk-box h4 {
      font-family: var(--ff-h);
      font-size: 1.05rem;
      color: var(--primary);
      padding-bottom: 9px;
      border-bottom: 1px solid var(--secondary);
      margin-bottom: 4px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-weight: 600
    }

    .dk-box h4 em {
      font-style: normal;
      font-family: var(--ff);
      font-size: .6rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--mute);
      font-weight: 600
    }

    .dk-li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px dashed var(--line)
    }

    .dk-li:last-child {
      border: 0
    }

    .dk-li .k {
      width: 26px;
      height: 26px;
      flex: 0 0 auto;
      border: 1px solid var(--line-2);
      display: grid;
      place-items: center;
      font-family: var(--ff-h);
      font-size: .72rem;
      color: var(--gold-dark)
    }

    .dk-li .nm {
      flex: 1;
      font-size: .88rem;
      color: var(--dark)
    }

    .dk-li .vl {
      font-family: var(--ff-h);
      font-size: 1rem;
      color: var(--primary);
      white-space: nowrap
    }

    .dk-li .vl small {
      font-family: var(--ff);
      font-size: .62rem;
      color: var(--mute);
      margin-left: 3px
    }

    .dk-ft {
      font-size: .78rem;
      color: var(--mute);
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line)
    }

    .dk-ft b {
      color: var(--gold-dark)
    }

    /* ---------- Reveal ---------- */
    [data-rv] {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .9s var(--e), transform .9s var(--e)
    }

    [data-rv].in {
      opacity: 1;
      transform: none
    }

    [data-rv="l"] {
      transform: translateX(-30px)
    }

    [data-rv="r"] {
      transform: translateX(30px)
    }

    [data-d="1"] {
      transition-delay: .08s
    }

    [data-d="2"] {
      transition-delay: .16s
    }

    [data-d="3"] {
      transition-delay: .24s
    }

    [data-d="4"] {
      transition-delay: .32s
    }

    /* ==========================================================================
   RESPONSIVE
   ========================================================================== */
    @media (min-width:600px) {
      .img_logo {
        max-width: 30%;
      }

      .mm {
        grid-template-columns: repeat(2, 1fr)
      }

      .hl-specs {
        grid-template-columns: repeat(4, 1fr)
      }

      .hl-act {
        width: 100%
      }

      .svc-grid {
        grid-template-columns: repeat(2, 1fr)
      }

      .dk-packs {
        grid-template-columns: repeat(1, 1fr)
      }

      .dk-cols {
        grid-template-columns: repeat(2, 1fr)
      }

      .fgrid {
        grid-template-columns: 1fr 1fr
      }

      .fgrid .full {
        grid-column: 1/-1
      }

      .pay-step {
        flex-basis: 46%
      }
    }

    @media (max-width:767px) {
      .img_logo {
        max-width: 40% !important;
      }

      .hero .tr {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 8px;
        max-width: 100%
      }

      .hero .tr li {
        min-width: 0;
        gap: 5px;
        font-size: clamp(.66rem, 2.8vw, .8rem);
        line-height: 1.35;
        white-space: nowrap
      }

      .hero .tr svg {
        width: 12px;
        height: 12px
      }

      #benefits .head h2 {
        white-space: normal
      }
    }

    @media (min-width:768px) {
      :root {
        --hd: 80px
      }

      .sec {
        padding: 92px 0
      }

      .wrap,
      .wrap-lg {
        padding-inline: 34px
      }

      .tr {
        grid-template-columns: repeat(4, 1fr)
      }

      .tiers>.tier {
        flex-basis: calc((100% - 20px) / 2)
      }

      .ct-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start
      }

      .hero-act .btn {
        flex: 0 0 auto
      }

      .hero-frame {
        inset: 24px
      }

      .mdl {
        align-items: center;
        padding: 24px
      }

      .mdl-box {
        max-height: 91svh
      }

      .mdl-b {
        padding: 22px;
      }

      .fb {
        padding: 30px 34px
      }

      .fh {
        padding: 28px 34px
      }

      .veg-grid {
        grid-template-columns: 1fr 1fr
      }

      .sc-cards {
        grid-template-columns: repeat(4, 1fr)
      }

      .svc-bar {
        grid-template-columns: 1fr auto;
        padding: 26px 30px
      }

      .esp-top {
        grid-template-columns: 1.1fr .9fr;
        gap: 56px
      }

      .esp-pil {
        grid-template-columns: repeat(3, 1fr)
      }

      .menu-bar {
        grid-template-columns: 1fr auto
      }

      .menu-bar .acts .btn {
        flex: 0 0 auto
      }

      .pay-row {
        overflow: visible;
        margin: 0;
        padding-inline: 0
      }

      .pay-step {
        flex: 1 1 0
      }

      .ft-row {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        text-align: left
      }

      .ft-copy {
        text-align: center
      }
    }

    @media (max-width:350px) {
      .hero .tr {
        grid-template-columns: 1fr;
        gap: 9px
      }

      .hero .tr li {
        font-size: .85rem
      }
    }

    @media (min-width:1024px) {
      .nav {
        display: flex
      }

      .hdr-cta {
        display: flex
      }

      .burger {
        display: none
      }

      .stk {
        display: none
      }

      .sec {
        padding: 112px 0
      }

      .tiers>.tier {
        flex-basis: calc((100% - 40px) / 3)
      }

      .svc-grid {
        grid-template-columns: repeat(4, 1fr);
        height: none;
      }

      .svc-cat {
        min-height: 450px;
      }

      .lead-grid {
        grid-template-columns: .85fr 1.15fr;
        gap: 56px;
        align-items: start
      }

      .faq-grid {
        grid-template-columns: .8fr 1.2fr;
        gap: 58px;
        align-items: start
      }

      .faq-grid>div:first-child {
        position: sticky;
        top: calc(var(--hd) + 30px)
      }

      .flt {
        right: 14px;
        bottom: 50px;
        gap: 10px;
      }

      .flt a {
        width: 52px;
        height: 52px;
      }

      .flt svg {
        width: 23px;
        height: 23px;
      }

      .mm {
        grid-template-columns: repeat(3, 1fr)
      }

      .hl-main {
        grid-template-columns: minmax(0, 1.5fr) minmax(340px, .8fr)
      }

      .hl-img {
        aspect-ratio: 4 / 3;
        min-height: 0;
        align-self: start
      }

      .hl-info {
        padding: 34px 32px;
        justify-content: center;
      }

      .hl-specs {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (min-width:1440px) {
      .wrap {
        max-width: 1300px
      }

      .sec {
        padding: 128px 0
      }
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
      }

      [data-rv],
      .faq-i {
        opacity: 1 !important;
        transform: none !important
      }

      .hero-bg {
        transform: none !important
      }
    }

    /* Wedding backgrounds: independent image for each content section. */
    :is(#halls, #about, #benefits, #menu, #services, #payment, #lead, #faq, #contact) {
      position: relative;
      isolation: isolate;
      overflow: clip;
      background: var(--lct-ivory);
      color: var(--lct-text);
      --section-wash: .84;
      border-top: 0
    }

    :is(#halls, #about, #benefits, #menu, #services, #payment, #lead, #faq, #contact)::before {
      content: "";
      position: absolute;
      inset: -22% -3% 0;
      z-index: -1;
      opacity: 1;
      pointer-events: none;
      background-image: var(--section-overlay, linear-gradient(rgba(251, 248, 241, var(--section-wash)), rgba(251, 248, 241, var(--section-wash)))), var(--section-image);
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat
    }

    #halls {
      --section-image: url('img/img/bg/halls.webp');
      --section-overlay: linear-gradient(110deg, rgba(251, 248, 241, .96) 15%, rgba(251, 248, 241, .86) 55%, rgba(251, 248, 241, .68))
    }

    #about {
      --section-image: url('img/img/bg/about.webp');
      --section-overlay: linear-gradient(90deg, rgba(251, 248, 241, .98) 35%, rgba(251, 248, 241, .9) 60%, rgba(251, 248, 241, .68))
    }

    #benefits {
      --section-image: url('img/img/bg/benefits.webp');
      --section-wash: .96
    }

    #menu {
      --section-image: url('img/img/bg/menu.webp');
      --section-overlay: linear-gradient(180deg, rgba(251, 248, 241, .76), rgba(251, 248, 241, .9) 55%, rgba(251, 248, 241, .82))
    }

    #services {
      --section-image: url('img/img/bg/services.webp');
      --section-overlay: linear-gradient(100deg, rgba(251, 248, 241, .7), rgba(251, 248, 241, .97) 32%, rgba(251, 248, 241, .97) 72%, rgba(251, 248, 241, .7))
    }

    #payment {
      --section-image: url('img/img/bg/payment.webp');
      --section-overlay: linear-gradient(120deg, rgba(251, 248, 241, .88), rgba(251, 248, 241, .94) 65%, rgba(251, 248, 241, .72))
    }

    #lead {
      --section-image: url('img/img/bg/lead.webp');
      --section-overlay: linear-gradient(90deg, rgba(251, 248, 241, .95) 25%, rgba(251, 248, 241, .8) 62%, rgba(251, 248, 241, .68))
    }

    #faq {
      --section-image: url('img/img/bg/faq.webp');
      --section-overlay: linear-gradient(rgba(251, 248, 241, .96), rgba(251, 248, 241, .96))
    }

    #contact {
      --section-image: url('img/img/bg/contact.webp');
      --section-overlay: linear-gradient(90deg, rgba(251, 248, 241, .95) 20%, rgba(251, 248, 241, .85) 65%, rgba(251, 248, 241, .7))
    }

    #halls .hl-main,
    #payment .pay-card {
      box-shadow: 0 12px 34px rgba(96, 72, 39, .08)
    }

    #payment .pay-dot {
      box-shadow: 0 0 0 6px var(--lct-ivory)
    }

    #payment .pay-note {
      background: rgba(251, 248, 241, .8)
    }

    #about .esp-pil article {
      background: rgba(251, 248, 241, .94)
    }

    #about .esp-pil article:hover {
      background: var(--lct-cream)
    }

    #faq .faq-i {
      background: rgba(251, 248, 241, .94)
    }

    :is(#halls, #about, #benefits, #menu, #services, #payment, #lead, #faq, #contact)::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      pointer-events: none;
      background: linear-gradient(180deg, #FBF8F1 0%, rgba(251, 248, 241, 0) 18%, rgba(251, 248, 241, 0) 82%, #FBF8F1 100%)
    }

    @media (max-width:767px) {
      :is(#halls, #about, #benefits, #menu, #services, #payment, #lead, #faq, #contact)::after {
        background: linear-gradient(180deg, #FBF8F1 0%, rgba(251, 248, 241, .18) 18%, rgba(251, 248, 241, .18) 82%, #FBF8F1 100%)
      }
    }

.flt .flt-links { display:flex; flex-direction:column; align-items:flex-end; align-self:flex-end; gap:12px; animation:contact-reveal .2s ease-out }
.stk { display:none !important }
.flt { bottom:calc(18px + env(safe-area-inset-bottom)) }
.flt-actions { display:flex; align-items:center; gap:10px }
.flt .flt-quote { width:56px; height:56px; padding:0; border-radius:50%; background:linear-gradient(110deg,var(--lct-gold),var(--lct-gold-light)); color:var(--lct-navy); font-size:12px; font-weight:700; letter-spacing:.04em; box-shadow:0 6px 20px rgba(9,26,51,.16); white-space:nowrap }
#faqMore { transition:background .2s,color .2s,box-shadow .2s }
#faqMore:disabled { cursor:wait }
.flt .flt-links[hidden] { display:none }
.flt .flt-toggle { width:56px; height:56px; display:grid; place-items:center; padding:10px; border-radius:50%; background:var(--lct-navy); border:1px solid var(--lct-gold); box-shadow:0 6px 20px rgba(9,26,51,.2); cursor:pointer }
.flt .flt-toggle img { width:32px; height:32px; object-fit:contain }
.flt .flt-quote { gap:8px; }
.flt .flt-quote .quote-icon { width:20px; height:20px; flex-shrink:0; fill:none; stroke:currentColor; }
.flt .flt-toggle[aria-expanded="true"] { background:var(--lct-navy-deep); box-shadow:0 0 0 3px rgba(196,154,69,.2) }
@keyframes contact-reveal { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion:reduce) { .flt .flt-links { animation:none } }
/* Mobile form: consistent native-control sizing, including Safari's date field. */
#lead .lead-grid > *, #lead .fgrid > *, #lead .fld { min-width:0 }
#lead .fld :is(input,select,textarea) {
  box-sizing:border-box;
  display:block;
  width:100%;
  min-width:0;
  max-width:100%
}
#lead .fld input[type="date"] {
  -webkit-appearance:none;
  appearance:none;
  min-height:50px;
  text-align:left
}
#lead input[type="date"]::-webkit-date-and-time-value { text-align:left; min-height:1.5em }
#lead input[type="date"]::-webkit-datetime-edit { padding:0 }
#lead .picked .v { min-width:0; overflow-wrap:anywhere }
#lead .picked a { flex-shrink:0 }
@media (max-width:767px) {
  #lead .fld :is(input,select,textarea) { font-size:16px; line-height:1.5; padding:12px; border-radius:4px }
  #lead .fld :is(input,select) { height:50px }
  #lead .fld textarea { min-height:112px }
  #lead .fld label { font-size:12px; line-height:1.5; letter-spacing:.07em }
  #lead .fld select {
    -webkit-appearance:none;
    appearance:none;
    padding-right:38px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230C2344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position:right 12px center;
    background-repeat:no-repeat;
    background-size:16px
  }
  #lead .picked { align-items:flex-start }
  #lead .picked a { padding-block:4px }
  body.form-in-view .flt { opacity:0; visibility:hidden; pointer-events:none }
  body.form-in-view .stk { transform:translateY(110%); pointer-events:none }
}
.hl-download[aria-disabled="true"] { opacity:.5; cursor:default; pointer-events:none }
@media (max-width:767px) {
  #halls .hl-arrow { width:32px; height:32px; font-size:20px }
  #halls .hl-arrow.prev { left:10px }
  #halls .hl-arrow.next { right:10px }
  #halls .hl-zoom { min-height:32px; padding:5px 8px; gap:5px; font-size:10px; top:10px; right:10px }
  #halls .hl-zoom svg { width:14px; height:14px }
  #halls .hl-photo-dots { gap:5px; right:12px; bottom:14px }
  #benefits .sc-card em { white-space:nowrap; font-size:clamp(.5rem,2.4vw,.6rem); letter-spacing:.03em; padding:4px 6px }
  #benefits table.bft { min-width:1000px; table-layout:fixed }
  html[lang="en"] #benefits table.bft { min-width:1200px }
  #benefits table.bft thead th { padding:14px 8px; font-size:11px; letter-spacing:.03em; white-space:nowrap }
  #benefits table.bft thead th small { font-size:10px; letter-spacing:0; white-space:nowrap }
}
/* One form; four mobile steps. Desktop children keep their existing grid positions. */
#lf .wizard-step { display:contents }
#lf :is(.wizard-progress,.wizard-navigation,.wizard-review) { display:none }
#lf .wizard-status { margin-top:14px; padding:12px; font-size:14px; line-height:1.5; background:#FFF3EF; color:#8B3025; border:1px solid #E6C7BF; border-radius:4px }
#lf .wizard-status[hidden] { display:none }
#lf .wizard-submit:disabled { opacity:.7; cursor:wait }
#lf .wizard-sending { opacity:.7 }
@media (max-width:767px) {
  #lf .fgrid { display:block }
  #lf .wizard-step { display:none }
  #lf .wizard-step.wizard-current { display:grid; grid-template-columns:minmax(0,1fr); gap:14px }
  #lf .wizard-step .fsec { margin:0; border:0; padding:0 }
  #lf .wizard-progress { display:block; margin-bottom:22px }
  #lf .wizard-caption { font-size:13px; font-weight:600; color:var(--lct-navy); line-height:1.5; margin-bottom:12px }
  #lf .wizard-dots { display:grid; grid-template-columns:repeat(4,1fr); gap:8px }
  #lf .wizard-dots li { display:flex; justify-content:center; padding:6px; border-radius:4px; background:var(--lct-cream); color:var(--lct-text-muted); border:1px solid var(--line) }
  #lf .wizard-dots li.current { background:var(--lct-navy); border-color:var(--lct-navy); color:#fff }
  #lf .wizard-dots li.complete { background:var(--lct-gold-light); color:var(--lct-navy) }
  #lf .wizard-dots span { font-size:12px; font-weight:600 }
  #lf .wizard-navigation { display:flex; gap:10px; margin-top:20px }
  #lf .wizard-navigation button { flex:1; min-width:0; padding-inline:12px; font-size:12px; min-height:46px }
  #lf .wizard-navigation button[hidden] { display:none }
  #lf:not(.wizard-last) .wizard-submit { display:none }
  #lf .wizard-review { display:block; padding:12px; background:var(--lct-ivory); border:1px solid var(--line); border-radius:4px }
  #lf .wizard-review summary { cursor:pointer; font-size:13px; font-weight:600; color:var(--lct-navy) }
  #lf .wizard-review dl { display:grid; gap:10px; margin:14px 0 0 }
  #lf .wizard-review dl > div { display:grid; grid-template-columns:92px minmax(0,1fr); gap:10px; font-size:12px; line-height:1.5 }
  #lf .wizard-review dt { color:var(--lct-text-muted) }
  #lf .wizard-review dd { margin:0; overflow-wrap:anywhere; color:var(--lct-navy) }
}
#rec > span { display:block }
#rec > span > span { display:inline; margin-left:6px; white-space:pre-wrap; overflow-wrap:anywhere }
/* Keep neighbouring content sections close, with room for each heading. */
main > .sec {
  padding-block: clamp(41.6px, 5.2vw, 72.8px);
  margin-block: 0
}
main > .sec .head { margin-bottom: 36.4px }
main > #about .esp-top { margin-bottom: 41.6px }

/* Subtle ivory/champagne accents; existing ivory fades join each section. */
:root {
  --heading-1-size: clamp(2rem,5.4vw,4.2rem);
  --heading-2-size: clamp(1.7rem,3.2vw,2.6rem);
  --heading-3-size: clamp(1.15rem,1.7vw,1.4rem)
}
html body :is(h1,h2,h3) {
  font-family:var(--ff-h) !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  white-space:normal !important
}
html body h1 { font-size:var(--heading-1-size) !important; line-height:1.12 !important; display:block }
html body h2 { font-size:var(--heading-2-size) !important; line-height:1.22 !important }
html body h3 { font-size:var(--heading-3-size) !important; line-height:1.3 !important }
#halls { --section-overlay: linear-gradient(110deg,rgba(244,237,225,.96) 15%,rgba(244,237,225,.88) 55%,rgba(251,248,241,.7)) }
#menu { --section-overlay: linear-gradient(180deg,rgba(244,237,225,.86),rgba(244,237,225,.93) 55%,rgba(251,248,241,.86)) }
#payment { --section-overlay: linear-gradient(120deg,rgba(244,237,225,.93),rgba(251,248,241,.95) 65%,rgba(244,237,225,.8)) }
#contact { --section-overlay: linear-gradient(90deg,rgba(244,237,225,.96) 20%,rgba(251,248,241,.87) 65%,rgba(244,237,225,.76)) }
.language-switch { display:flex; flex:0 0 auto; border:1px solid rgba(226,204,150,.5); border-radius:4px; padding:3px; gap:2px; margin-left:auto }
.language-switch button { min-width:32px; min-height:36px; padding:5px; color:#fff; font:600 11px var(--ff); letter-spacing:.04em; border-radius:2px }
.language-switch button[aria-pressed="true"] { background:var(--lct-gold-light); color:var(--lct-navy) }
.language-switch button:focus-visible, .hl-zoom:focus-visible { outline:2px solid var(--lct-gold-light); outline-offset:3px }
#halls :is(.hl-count,.hl-photo-count) { top:12px; font-size:9px; line-height:1.3; letter-spacing:.08em; padding:4px 6px; border-radius:2px }
#halls .hl-photo-count { left:12px }
#halls .hl-count { right:12px }
.hl-zoom { position:absolute; right:12px; top:12px; z-index:4; display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; background:rgba(9,26,51,.72); color:white; border:1px solid rgba(255,255,255,.55); border-radius:4px; backdrop-filter:blur(6px); font-size:12px }
.hl-zoom:hover { background:var(--lct-navy) }
.hall-viewer { width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; padding:60px 56px 44px; margin:0; border:0; background:rgba(6,15,27,.98); color:white; overflow:hidden }
.hall-viewer::backdrop { background:rgba(0,0,0,.85) }
.hall-viewer[open] { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:14px }
.hall-viewer img { width:100%; height:100%; min-height:0; object-fit:contain; touch-action:pan-y; user-select:none }
.hall-viewer figcaption { text-align:center; font-size:14px }
.hall-viewer button { position:absolute; display:grid; place-items:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.4); border-radius:50%; color:#fff; background:rgba(255,255,255,.1); font-size:28px }
.hall-viewer button[hidden] { display:none }
.hall-viewer button:focus-visible { outline:2px solid var(--lct-gold-light); outline-offset:3px }
.hall-viewer .viewer-close { top:10px; right:14px }
.hall-viewer .viewer-prev { top:50%; left:6px }
.hall-viewer .viewer-next { top:50%; right:6px }
html[lang="en"] #benefits .head h2 { white-space:normal; max-width:30ch; margin-inline:auto }
html[lang="en"] .btn { white-space:normal }
@media (min-width:1024px) {
  .hdr-in { gap:12px }
  /* .hdr-in .nav { margin-left:auto } */
  .language-switch { margin-left:0 }
  html[lang="en"] .nav { gap:16px }
  html[lang="en"] .nav a { font-size:.72rem; letter-spacing:.12em }
  .hdr-cta .btn { padding-inline:14px }
}
@media (min-width:1024px) and (max-width:1199px) { .hdr-cta a[href^="tel:"] { display:none } }
@media (max-width:767px) {
  .hdr-in { gap:8px }
  .hdr .img_logo { width:160px; max-width:calc(100% - 134px) !important }
  .language-switch button { min-width:28px; min-height:38px }
  .hall-viewer { padding:64px 12px 54px }
  .hall-viewer .viewer-prev, .hall-viewer .viewer-next { top:auto; bottom:8px }
  .hall-viewer figcaption { padding-inline:42px }
  html[lang="en"] .hero .tr { grid-template-columns:1fr }
  html[lang="en"] .hero .tr li { justify-content:flex-start }
}
@media (max-width:767px) {
  .hero .tr {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    padding:16px 12px;
    margin-top:26px;
    border:1px solid rgba(226,204,150,.3);
    border-radius:6px;
    background:rgba(9,26,51,.38)
  }
  .hero .tr li {
    justify-content:flex-start;
    align-items:center;
    gap:6px;
    min-height:34px;
    font-size:clamp(.85rem,3.7vw,1rem);
    font-weight:600;
    line-height:1.45;
    text-align:left
  }
  .hero .tr svg { width:15px; height:15px }
}
@media (max-width:399px) {
  .hero .tr { grid-template-columns:1fr; gap:8px; padding-inline:18px }
  .hero .tr li { font-size:1rem }
}
/* Venue finder: independent capacity search, with a compact mobile dialog. */
.hall-finder-launch { display:flex; justify-content:center; margin:0 0 22px; }
.hall-finder { width:min(840px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:0; border:1px solid #D4B36A; border-radius:12px; background:#FBF8F1; color:#343330; overflow:auto; box-shadow:0 20px 70px #091A3340; }
.hall-finder::backdrop { background:rgba(9,26,51,.6); }
.finder-header { position:sticky; top:0; z-index:1; background:#FBF8F1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid #ECE1CF; }
.finder-header h3 { margin:0; color:#0C2344; }
.finder-close { flex:0 0 44px; width:44px; height:44px; border:1px solid #ECE1CF; border-radius:50%; background:white; color:#0C2344; font-size:28px; cursor:pointer; }
#finderForm { padding:20px 22px; }
.finder-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.finder-fields label,.finder-quantity { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:14px; font-weight:600; }
.finder-quantity { margin-top:18px; }
.hall-finder select,.hall-finder input { box-sizing:border-box; width:100%; min-width:0; min-height:48px; padding:10px 12px; font-size:16px; font-family:inherit; font-weight:400; line-height:1.4; color:#343330; background:#fff; border:1px solid #CEC7BA; border-radius:5px; }
.hall-finder :focus-visible { outline:2px solid #C49A45; outline-offset:3px; }
.finder-help { font-size:12px; line-height:1.6; margin:10px 0 16px; color:#625E58; }
.finder-error { color:#A12020; font-size:14px; }
.finder-results { padding:0 22px 22px; }
.finder-results:empty { display:none; }
.finder-result-title { font-weight:600; color:#0C2344; }
.finder-result { display:grid; grid-template-columns:84px minmax(0,1fr) auto; align-items:center; gap:14px; padding:14px; margin-top:12px; background:#fff; border:1px solid #ECE1CF; border-radius:6px; }
.finder-result img { width:84px; height:68px; object-fit:cover; border-radius:4px; }
.finder-result b { color:#0C2344; font-size:17px; }
.finder-result p { font-size:12px; line-height:1.5; margin:5px 0 0; }
.finder-result-actions { display:flex; gap:8px; }
.finder-result-actions .btn { font-size:11px; letter-spacing:.04em; padding:12px; min-height:44px; white-space:normal; text-align:center; }
#lf .fld[hidden],.finder-error[hidden] { display:none !important; }
.finder-form-hint { margin:0; padding:12px; background:#F4EDE1; font-size:12px; line-height:1.6; }
.finder-form-hint button { font:inherit; font-weight:600; color:#0C2344; border:0; background:transparent; text-decoration:underline; cursor:pointer; padding:8px; }
@media(max-width:767px) {
  .hall-finder { max-height:calc(100dvh - 24px); }
  .finder-header { padding:14px 16px; }
  #finderForm,.finder-results { padding-left:16px; padding-right:16px; }
  .finder-fields { grid-template-columns:1fr; gap:12px; }
  .finder-result { grid-template-columns:72px minmax(0,1fr); gap:10px; padding:12px; }
  .finder-result img { width:72px; height:64px; }
  .finder-result-actions { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; }
  .hall-finder-launch .btn { width:100%; max-width:340px; }
}
.lead-guidance { display:grid; gap:20px; margin-top:28px; }
.lead-guide-card { padding:22px; border:1px solid #E3D6BD; border-radius:6px; background:rgba(255,253,247,.85); }
.lead-guide-card:first-child { border-left:3px solid #C49A45; background:rgba(244,237,225,.85); }
.lead-guide-card h3 { margin:0 0 12px; color:#0C2344; }
.lead-guide-card p,.lead-layout-guide,.lead-preparation { font-size:14px; line-height:1.7; color:#343330; }
.lead-guide-card p { margin:0 0 16px; }
.lead-layout-guide { margin:0 0 20px; }
.lead-layout-guide > div + div { margin-top:12px; }
.lead-layout-guide dt,.lead-preparation strong { font-weight:600; color:#0C2344; }
.lead-layout-guide dd { margin:3px 0 0; }
.lead-guide-card .btn { min-height:44px; max-width:100%; white-space:normal; text-align:center; }
.lead-preparation { list-style:none; padding:0; margin:0; }
.lead-preparation li + li { margin-top:16px; padding-top:16px; border-top:1px solid #ECE1CF; }
.lead-preparation strong,.lead-preparation span { display:block; }
@media(max-width:767px) { .lead-guidance { gap:14px; margin-top:20px; } .lead-guide-card { padding:18px; } }
/* Refined menu cards: warm paper, framed photography and understated gold. */
#menu .tiers { padding:8px 2px 24px; align-items:stretch; }
#menu .tier { border:1px solid #E3D6BD; border-radius:16px; background:linear-gradient(155deg,#FFFDF7,#FBF8F1 70%,#F4EDE1); box-shadow:0 8px 24px rgba(52,51,48,.06); }
#menu .tier:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(52,51,48,.12); }
#menu .tier.sel { border-color:#C49A45; box-shadow:0 0 0 1px #C49A45,0 12px 28px rgba(52,51,48,.1); }
#menu .tier-img { aspect-ratio:4/3; background:#ECE1CF; isolation:isolate; }
#menu .tier-img::after { background:linear-gradient(180deg,transparent 50%,rgba(9,26,51,.34)); pointer-events:none; }
#menu .tier-price { left:12px; bottom:12px; max-width:calc(100% - 24px); padding:10px 14px; border:1px solid rgba(226,204,150,.7); border-radius:8px; background:rgba(255,253,247,.97); color:#0C2344; box-shadow:0 4px 16px #091A331A; }
#menu .tier-price small { color:#625E58; opacity:1; letter-spacing:.03em; }
#menu .tier-ct,#menu .tier-sel { top:12px; padding:7px 11px; border-radius:20px; letter-spacing:.08em; box-shadow:0 2px 10px #091A331A; }
#menu .tier-ct { right:12px; background:#FFFDF7; }
#menu .tier-sel { left:12px; background:#E2CC96; color:#091A33; }
#menu .tier[data-tier="veg-group"] .tier-ct { background:#E7EADF; color:#3F4C37; }
#menu .tier-in { padding:16px; gap:0; }
#menu .tier-in h3 { color:#0C2344; margin-bottom:12px; }
#menu .tier-in > p { color:#57534C; line-height:1.65; margin-bottom:12px; }
#menu .stars { position:relative; flex:0 0 auto; border:1px solid #E9DFCE; border-radius:10px; background:rgba(255,255,255,.65); padding:12px; margin-bottom:12px; }
#menu .stars em { display:flex; align-items:center; gap:10px; color:#876426; letter-spacing:.12em; margin-bottom:8px; }
#menu .stars em::after { content:""; flex:1; height:1px; background:#E3D6BD; }
#menu .stars li { padding:3px 0; line-height:1.5; color:#343330; }
#menu .stars svg { color:#A47B2E; }
#menu .tags { gap:6px; margin-bottom:12px; }
#menu .tags .tag { padding:4px 8px; border-radius:20px; background:transparent; color:#625E58; border-color:#D8CDB9; letter-spacing:.07em; }
#menu .tags .tag.hl { background:#ECE1CF; border-color:#D4B36A; color:#6B4D18; }
#menu .tier-in > .btn { margin-top:0; padding:12px 14px; display:flex; align-items:center; justify-content:center; gap:12px; border-radius:7px; min-height:44px; white-space:normal; text-align:center; letter-spacing:.08em; box-shadow:0 4px 12px #091A3314; }
#menu .tier-in > .btn::after { content:"→"; position:static; inset:auto; background:none; transform:none; font-size:18px; line-height:1; flex-shrink:0; transition:transform .2s; }
#menu .tier-in > .btn:hover::after { transform:translateX(3px); }
#menu .tier-in > .btn:focus-visible { outline:2px solid #C49A45; outline-offset:3px; }
#menu .tier-carousel-shell { position:relative; padding-inline:18px; }
#menu .tier-carousel-controls { position:absolute; top:50%; left:-6px; right:-6px; z-index:3; transform:translateY(-50%); width:auto; justify-content:space-between; gap:0; margin:0; padding:0; background:none; border:0; box-shadow:none; pointer-events:none; }
#menu .tier-carousel-controls button { pointer-events:auto; display:grid; place-items:center; width:44px; height:44px; background:#FFFDF7; border-color:#D4B36A; font-size:24px; box-shadow:0 4px 16px rgba(52,51,48,.15); transition:background .2s,color .2s,box-shadow .2s; }
#menu .tier-carousel-controls button:hover { background:#0C2344; color:#FFFDF7; }
#menu .tier-carousel-controls button:focus-visible { outline:2px solid #C49A45; outline-offset:2px; }
@media(max-width:767px) {
  #menu .tier-carousel-shell { padding-inline:0; }
  #menu .tier-carousel-controls { left:-10px; right:-10px; top:50%; transform:translateY(-50%); }
  #menu .tier-carousel-controls button { width:36px; height:36px; font-size:22px; }
  #menu .tier-in { padding:14px; }
  #menu .tier-img { aspect-ratio:4/3; }
  #menu .tier-in > .btn { font-size:11px; letter-spacing:.06em; }
  #menu .stars { padding:10px; }
}
@media(prefers-reduced-motion:reduce) { #menu .tier:hover { transform:none; } #menu .tier-img img,#menu .tier-in > .btn::after { transition:none; } }
#menu .veg-dish-menu { display:block; margin-top:2px; color:#77726B; font-size:11px; line-height:1.5; }
#menu .tier-heading { margin-bottom:6px; }
#menu .tier-heading h3 { margin-bottom:0; }
#menu .tier-heading .tier-veg-kicker { margin:6px 0 0; }
#menu .tier-heading,#menu .tier-in > p,#menu .stars li,#menu .tags { box-sizing:border-box; }
#menu .veg-dish-menu { display:inline; margin-left:6px; }
#menu .tier-in { padding-bottom:14px; }
/* Mobile hero: intentional phrase breaks without isolated words. */
@media(max-width:767px) {
  html body .hero h1.hero-tagline { font-size:clamp(25px,7.5vw,30px) !important; max-width:none; line-height:1.2 !important; }
  .hero .hero-title-line { display:block; white-space:nowrap; }
  .hero .eyebrow { font-size:clamp(8px,2.3vw,10px); letter-spacing:.12em; line-height:1.6; gap:8px; }
  .hero .eyebrow::before,.hero .eyebrow::after { width:16px; flex-shrink:0; }
}
html body .hero h1.hero-title { font-size:var(--hero-title-size,clamp(18px,7.4vw,80px)) !important; white-space:nowrap !important; line-height:1.2 !important; }
#payment .pay-row.pay-loop { overflow-x:auto; scroll-snap-type:none; scroll-behavior:auto; overscroll-behavior-inline:contain; }
#payment .pay-loop .pay-step { flex:0 0 82%; }
#payment .pay-loop .pay-step::before { display:block; }
#payment .pay-row:focus-visible { outline:2px solid #C49A45; outline-offset:4px; }
@media(min-width:768px) { #payment .pay-loop .pay-step { flex-basis:calc((100% - 32px) / 3); } }
@media(max-width:767px) {
  #lead .lead-grid > div:first-child > .tstrip,
  #lead .lead-guidance > .lead-guide-card:nth-child(2) { display:none; }
}
#hlThumbs.hl-loop { scroll-snap-type:none; scroll-behavior:auto; }
@media(min-width:768px) {
  #lead.lead-submitted .lead-guidance { display:none; }
}
#services .svc-cat .cnt {
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#FFF7E5;
  font-size:24px;
  font-weight:600;
  line-height:1.1;
  box-shadow:none;
  text-shadow:0 1px 3px rgba(52,40,24,.85),0 2px 8px rgba(52,40,24,.55);
  pointer-events:none;
}
#services .svc-cat .cnt small {
  margin-top:4px;
  color:#FFFDF7;
  font-size:9px;
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.3;
  white-space:nowrap;
}
#services .svc-cat { text-align:left; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
#services .svc-cat .from { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; width:100%; }
#services .svc-cat .from > span { white-space:nowrap; line-height:1.4; }
#services .svc-cat .from > b { display:block; min-width:0; text-align:right; white-space:nowrap; line-height:1.25; font-variant-numeric:tabular-nums; }
@media(max-width:767px) {
  #services .svc-cat .from > b { font-size:clamp(17px,5vw,21px); }
  #services .svc-cat .from > span { font-size:10px; letter-spacing:.1em; }
}
#menu .has-menu-cover:not(.menu-cover-opened) > :is(.tier-img,.tier-in) { visibility:hidden; }
#menu .menu-cover-front {
  position:absolute; inset:0; width:100%; height:100%; padding:0;
  display:block; border:0; border-radius:inherit; overflow:hidden;
  background:#684322; color:#FFFDF7; cursor:pointer; container-type:inline-size;
  font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
#menu .menu-cover-front::before { content:none; }
#menu .menu-cover-art { position:absolute; inset:0; display:block; }
#menu .menu-cover-art img { display:block; width:100%; height:100%; padding:0; object-fit:fill; }
#menu .menu-cover-art::after { content:""; position:absolute; inset:2% 3%; border-radius:10px; background:linear-gradient(180deg,transparent 3%,rgba(28,16,8,.2) 13%,rgba(28,16,8,.34) 29%,rgba(28,16,8,.12) 39%,transparent 49%); pointer-events:none; }
#menu .menu-cover-print-title,#menu .menu-cover-name {
  position:absolute; display:flex; align-items:center; justify-content:center;
  background:none; color:#FFFDF7; text-transform:uppercase;
  z-index:1; text-shadow:0 1px 3px rgba(24,14,7,.7),0 3px 12px rgba(24,14,7,.35); font-weight:400;
}
#menu .menu-cover-print-title {
  left:7%; right:7%; top:15.2%; width:auto; height:auto;
  flex-direction:column; gap:0; font-family:Georgia,"Times New Roman",serif;
  font-size:13.2cqw; line-height:1.05; letter-spacing:0;
}
#menu .menu-cover-print-title > span:last-child {
  display:flex; align-items:center; justify-content:center; gap:1.2cqw;
  width:100%; font-size:8.5cqw; letter-spacing:.18em; line-height:1.15;
}
#menu .menu-cover-print-title > span:last-child::before,
#menu .menu-cover-print-title > span:last-child::after {
  content:""; height:1px; width:17%; background:rgba(255,253,247,.75); flex-shrink:0;
}
#menu .menu-cover-name {
  left:7%; right:7%; top:31%; height:auto; padding:0;
  font-size:5.9cqw; line-height:1.4; letter-spacing:.01em;
  white-space:normal; text-wrap:balance; font-weight:500;
}
#menu .menu-cover-open {
  position:absolute; left:50%; bottom:14.8%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:10px 20px; border:1px solid #D4AB53; border-radius:24px;
  font-size:11px; line-height:1.3; font-weight:500; letter-spacing:.05em;
  color:#805514; background:#FFFDF7; box-shadow:0 4px 16px rgba(52,40,24,.15);
  white-space:nowrap; transition:background .2s,box-shadow .2s;
}
#menu .menu-cover-front:hover .menu-cover-open { background:#F4E8D7; box-shadow:0 5px 18px rgba(52,40,24,.25); }
#menu .menu-cover-front:focus-visible { outline:3px solid #C49A45; outline-offset:-5px; }
#menu .menu-cover-return { display:none; position:absolute; z-index:3; top:62px; right:22px; padding:8px 12px; border:1px solid #D4B36A; border-radius:20px; background:#FFFDF7; color:#0C2344; font-size:11px; font-weight:600; line-height:1.3; cursor:pointer; }
#menu :is(.menu-cover-front,.menu-cover-return)[hidden] { display:none; }
#menu .menu-cover-return:focus-visible { outline:2px solid #C49A45; outline-offset:2px; }
/* Linked header logo: size the flex item once, independently of its image. */
.hdr .header-brand { display:flex; align-items:center; flex:0 0 180px; width:180px; min-width:0; }
.hdr .header-brand > .img_logo { display:block; width:100%; max-width:100% !important; height:auto; }
.hdr .header-brand:focus-visible { outline:2px solid #C49A45; outline-offset:5px; }
#drw .drawer-directions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#drw .drawer-directions svg { width:24px; height:24px; flex-shrink:0; color:#D4B36A; }
#drw .drawer-socials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:18px; }
#drw .drawer-social { display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 12px; border:1px solid rgba(212,179,106,.45); border-radius:6px; color:#FFFDF7; font-size:14px; font-weight:500; transition:background .2s,border-color .2s; }
#drw .drawer-social svg { width:22px; height:22px; }
#drw .drawer-zalo-mark { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:6px; font-size:15px; font-weight:700; line-height:1; }
#drw .drawer-social:hover { background:rgba(212,179,106,.12); border-color:#D4B36A; }
#drw :is(.drawer-social,.drawer-directions):focus-visible { outline:2px solid #D4B36A; outline-offset:4px; }
#drw { padding-bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
.drink-layout { width:100%; min-width:0; display:grid; gap:20px; }
.drink-layout .drink-intro { margin:0; font-size:.9rem; line-height:1.8; color:var(--dark); }
.drink-top { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:stretch; }
.drink-section { min-width:0; display:flex; flex-direction:column; gap:12px; }
.drink-section-title { color:var(--primary); font-size:.85rem; font-weight:600; line-height:1.6; }
.drink-top .dk-packs { margin:0; min-width:0; flex:1; grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
.drink-layout .dk-pack,.drink-layout .dk-box { border-radius:8px; border-color:#E3D6BD; }
.drink-layout .dk-pack { box-shadow:0 3px 12px rgba(52,40,24,.035); }
.drink-layout .dk-pack.sel { border-color:var(--secondary); box-shadow:0 0 0 1px var(--secondary); }
.drink-top .drink-retail { flex:1; }
.drink-corkage-section { width:100%; }
.drink-layout .dk-box h4 { gap:12px; line-height:1.5; padding-bottom:12px; margin-bottom:6px; }
.drink-layout .dk-box h4 em { flex-shrink:0; }
.drink-layout .dk-li .k { border-radius:4px; background:#FBF8F1; }
.drink-top .dk-pack .btn { margin-top:auto; }
.drink-top .drink-retail { min-width:0; display:flex; flex-direction:column; }
.drink-retail .dk-li { flex:1; }
.drink-layout .dk-li .nm { min-width:0; }
.drink-layout .dk-ft { line-height:1.6; }
/* Menu detail modals: intro above a full-width, evenly spaced card grid. */
#mdlB:has(> .mm) { display:block; }
#mdlB:has(> .pg) { display:block; }
#mdlB > .pg { width:100%; min-width:0; margin-bottom:16px; padding:0 20px; border:1px solid #E3D6BD; border-radius:10px; background:#fff; }
#mdlB > .pg .pr2 { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; padding:18px 0; border-color:#E9DFCE; }
#mdlB > .pg .pr2:last-child { border-bottom:0; }
#mdlB > .pg .pr2 .l { min-width:0; }
#mdlB > .pg .pr2 .l b { line-height:1.5; }
#mdlB > .pg .pr2 .l span { margin-top:5px; line-height:1.6; }
#mdlB > .pg .pr2 .r b { display:block; line-height:1.5; }
#mdlB > .pg .pr2 .r span { margin-top:5px; }
#mdlB > .pg + p { margin:0; padding:12px 16px; border-left:2px solid #C49A45; border-radius:0 6px 6px 0; background:#F4EDE1; line-height:1.7; }
@media(max-width:599px) {
  #mdlB > .pg { padding-inline:14px; }
  #mdlB > .pg .pr2 { grid-template-columns:minmax(0,1fr); gap:8px; padding-block:16px; }
  #mdlB > .pg .pr2 .r { display:flex; align-items:baseline; gap:8px; text-align:left; }
  #mdlB > .pg .pr2 .r span { margin-top:0; }
}
#mdlB > .mm { width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); gap:18px; align-items:stretch; }
#mdlB > .lead { max-width:none; line-height:1.8; display: none }
#mdlB .mm-card { min-width:0; border-radius:10px; border-color:#E3D6BD; overflow:hidden; box-shadow:0 4px 16px rgba(52,40,24,.04); }
#mdlB .mm-card.sel { border-color:var(--secondary); box-shadow:0 0 0 1px var(--secondary); }
#mdlB .mm-card h4 { align-content:flex-start; align-items:flex-start; font-size:1.12rem; line-height:1.5; gap:10px; }
#mdlB .mm-card h4 .tag { flex-shrink:0; }
#mdlB .mm-g { margin-bottom:18px; }
#mdlB .mm-g li { line-height:1.65; padding-block:5px; }
#mdlB .mm-g li span { min-width:0; overflow-wrap:break-word; }
#mdlB .mm-pick .btn { white-space:normal; min-height:48px; border-radius:6px; }
/* Floral paper menu sheets inside the menu picker. */
#mdlB .mm-card {
  padding:26px 22px 22px; background-color:#FBF6EC;
  background-image:linear-gradient(rgba(255,253,247,.18),rgba(255,253,247,.18)),url("img/img/background_menu_title/123.webp");
  background-size:100% 100%; background-position:center; background-repeat:no-repeat;
  border-color:#D4B36A; box-shadow:0 6px 20px rgba(80,59,29,.07);
}
#mdlB .mm-card::before { content:""; position:absolute; inset:8px; border:1px solid rgba(180,140,68,.4); border-radius:5px; pointer-events:none; }
#mdlB .mm-card > * { position:relative; z-index:1; }
#mdlB .mm-paper-title { display:block; margin-bottom:10px; color:#876426; font-size:10px; line-height:1.5; letter-spacing:.2em; text-align:center; text-transform:uppercase; }
#mdlB .mm-card h4 {justify-content:center; align-items:center; text-align:center; margin-bottom:20px; line-height:1.45; text-shadow:0 1px 3px #FFFDF7; }
#mdlB .mm-card h4 .tag { font-size:9px; background:rgba(255,253,247,.8); }
#mdlB .mm-card h4 .tag.hl { background:#C49A45; }
#mdlB .mm-g { margin-bottom:18px; }
#mdlB .mm-g em { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:9px; color:#876426; font-size:10px; letter-spacing:.15em; text-align:center; }
#mdlB .mm-g em::before,#mdlB .mm-g em::after { content:""; width:24px; height:1px; flex-shrink:0; background:#C5A573; }
#mdlB .mm-g li { display:block; padding:5px 0; color:#3D382F; font-size:14px; line-height:1.65; text-align:center; }
#mdlB .mm-g li span { text-align:center; }
#mdlB .mm-g li i { padding-top:2px; color:#9B7634; }
#mdlB .mm-pick { padding-top:14px; }
.mdl-box:has(#mdlB > .mm) { width:min(1400px,94vw); max-width:1400px; max-height:92dvh; overflow:hidden; }
#mdlB:has(> .mm) { min-height:0; flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; }
.mdl-box:has(#mdlB > .mm) > :is(.mdl-h,.mdl-f) { flex:0 0 auto; }
#mdlB > .mm { grid-auto-rows:1fr; }
#mdlB .mm-card h4 { font-size:18px; }
#mdlB .mm-g { margin-bottom:22px; }
#mdlB .mm-pick { margin-top:auto; }
#mdlB .mm-dishes { min-width:0; }
#mdlB .mm-pick .btn { min-height:48px; }
#mdlB .menu-swipe-hint { display:none; }
@media(max-width:599px) {
  #mdlB .menu-swipe-hint { display:flex; align-items:center; gap:7px; margin:0 0 10px; color:#876426; font-size:10px; line-height:1.5; }
  #mdlB .menu-swipe-hint > span:first-child { flex:1; }
  #mdlB .menu-swipe-arrow { font-size:20px; line-height:1; }
  #mdlB .menu-swipe-dots { display:flex; align-items:center; gap:4px; }
  #mdlB .menu-swipe-dots i { width:5px; height:5px; border-radius:4px; background:#DED1B6; transition:width .2s,background .2s; }
  #mdlB .menu-swipe-dots i.active { width:14px; background:#B58A36; }
  #mdlB .menu-swipe-position { min-width:25px; font-variant-numeric:tabular-nums; white-space:nowrap; }
}
@media(max-width:599px) { #mdlB .mm-card { padding:24px 20px 20px; } }
@media(min-width:600px) {
  #mdlB > .mm { grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* #mdlB .mm-card h4 { min-height:76px; } */
}
@media(min-width:1024px) {
  #mdlB > .mm { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #mdlB > .mm:has(> .mm-card:last-child:nth-child(2)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:599px) {
  .mdl-box:has(#mdlB > .mm) { height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 8px); max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 8px); }
  .mdl-box:has(#mdlB > .mm) > .mdl-h { padding:14px 54px 12px 16px; }
  .mdl-box:has(#mdlB > .mm) > .mdl-h h3 { font-size:18px; line-height:1.35; }
  .mdl-box:has(#mdlB > .mm) > .mdl-h p { font-size:12px; line-height:1.5; }
  .mdl-box:has(#mdlB > .mm) > .mdl-f { padding:10px 14px; gap:8px; }
  .mdl-box:has(#mdlB > .mm) > .mdl-f .btn { padding:10px 14px; min-height:44px; }
  #mdlB:has(> .mm) { display:flex; flex-direction:column; padding:10px 14px; overflow:hidden; }
  #mdlB .menu-swipe-hint { flex:0 0 auto; }
  #mdlB > .mm {
    flex:1; min-height:0; grid-template-columns:none; grid-template-rows:minmax(0,1fr);
    grid-auto-flow:column; grid-auto-columns:100%; gap:14px;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;
    scrollbar-width:thin; scrollbar-color:#C49A45 transparent;
    padding-bottom:8px;
  }
  #mdlB .mm-card { min-height:0; scroll-snap-align:start; scroll-snap-stop:always; padding:18px 18px 16px; }
  #mdlB .mm-card > :not(.mm-dishes) { flex-shrink:0; }
  #mdlB .mm-dishes { flex:1; min-height:0; overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; }
  #mdlB .mm-card h4 { margin-bottom:14px; }
  #mdlB .mm-paper-title { margin-bottom:8px; }
  #mdlB .mm-g { margin-bottom:10px; }
  #mdlB .mm-g em { margin-bottom:6px; }
  #mdlB .mm-g li { padding-block:3px; }
  #mdlB .mm-pick { padding-top:8px; }
  #mdlB > .mm::-webkit-scrollbar { height:4px; }
  #mdlB > .mm::-webkit-scrollbar-thumb { background:#C49A45; border-radius:4px; }
}
@media(max-width:599px) {
  .drink-top { grid-template-columns:1fr; gap:16px; }
  .drink-layout { gap:16px; }
  .drink-layout .dk-box { padding:16px; }
  .drink-layout .dk-li { gap:8px; }
  .drink-layout .dk-li .vl small { display:block; text-align:right; }
}
@media(min-width:1024px) {
  .hdr .nav { margin-left: none; }
  .hdr .nav a,.hdr .hdr-cta .btn { white-space:nowrap; }
  .hdr .hdr-cta,.hdr .language-switch { flex-shrink:0; }
}
@media(min-width:1024px) and (max-width:1199px) {
  .hdr .header-brand { flex-basis:150px; width:150px; }
  .hdr .nav { gap:14px; }
  html[lang="en"] .hdr .nav { gap:12px; }
}
@media(max-width:1023px) {
  .hdr .header-brand { margin-right:auto; }
}
@media(max-width:767px) {
  .hdr .header-brand { flex:0 1 160px; width:160px; }
}