/*
 * Tian Long homepage (Figma "Homepage", 1440 px desktop).
 * Measurements come from the Figma export; section comments give the Figma y position.
 * Desktop only for now: mobile is set up later from its own design.
 */

@font-face {
  font-family: 'SVN-Helves';
  src: url('../fonts/SVN-Helves.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Helves';
  src: url('../fonts/SVN-Helves-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Swiss 721 Black Condensed';
  src: url('../fonts/Swiss721-BlackCondensed.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN-Cintra';
  src: url('../fonts/SVN-Cintra.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --tl-cream: #fff4e3;
  --tl-orange: #cf3a05;
  --tl-red: #ce3d27;
  --tl-deep: #9d2523;
  --tl-header-red: #a22423;
  --tl-brown: #2b1b00;
  --tl-dark: #241915;
  --tl-pink: #ffdfd1;
  --tl-gold: #f2a222;
  --tl-fresh-band: var(--tl-red); /* "Bò tươi mỗi ngày" band (#231711 was tried and set back) */
  --tl-body: 'SVN-Helves', 'Be Vietnam Pro', Arial, sans-serif;
  --tl-display: 'Swiss 721 Black Condensed', 'SVN-Helves', Impact, sans-serif;
  --tl-cintra: 'SVN-Cintra', 'Swiss 721 Black Condensed', Impact, sans-serif;
  --tl-img: '';

  /* Shape, line, surface and motion tokens shared by the dialogs, the branch list and the cards. */
  --tl-r-sm: 8px;
  --tl-r-md: 12px;
  --tl-r-lg: 16px;
  --tl-r-xl: 20px;
  --tl-r-pill: 1000px;
  --tl-line: rgba(206, 61, 39, 0.3);
  --tl-line-soft: rgba(206, 61, 39, 0.14);
  --tl-surface: #fffaf1;
  --tl-surface-raised: #fff;
  --tl-text-muted: #6b4a3c;
  --tl-shadow-pop: 0 14px 32px rgba(60, 20, 10, 0.2);
  --tl-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --tl-status-ok: #2f9e63;
  --tl-status-soon: #f3a11b;
  --tl-status-off: #a6adb6;
}

html {
  scroll-behavior: smooth;
  /* The page starts under the orange header and ends on the orange footer: what the browser shows past them (overscroll,
     the bars of Safari) is orange too. See body.tl-body below for Safari on iOS 26. */
  background-color: var(--tl-orange);
}

/*
 * Typography (Figma "Homepage"; fonts supplied by the brand,
in public/themes/tian-long/fonts)
 *   --tl-display  Swiss 721 Black Condensed  headings,
kickers,
marquee,
figures,
footer titles and watermark (400)
 *   --tl-cintra   SVN-Cintra                 hero title only
 *   --tl-body     SVN-Helves 400 / 700       navigation,
buttons,
body text,
forms (700 only where Figma has it)
 * No faux bold or italic (the files have no such cuts) and every control inherits the page font.
 */
body.tl-body {
  font-synthesis: none;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

.tl-body :where(button,
input,
select,
textarea) {
  font-family: inherit;
}

body.tl-body {
  margin: 0;
  /* Orange, not the cream of the page: Safari on iPhone (iOS 26) paints the area under its floating bottom bar, and
     its top bar, with the background colour of the body (it no longer reads theme-color), so a cream body showed a cream
     band under the orange footer. The cream of the page is on .tl-shell, which holds every section. */
  background: var(--tl-orange);
  color: var(--tl-brown);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 16px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: html is overflow-x: clip (Tian Long), so a hidden body would become the scroll box and break every
     sticky element (contents of the legal pages, groups bar of the Thực đơn page). */
  overflow-x: clip;
}

/* clip (not hidden): the decorations stay cut at the screen edges and sticky bars (Thực đơn page) still work. */
.tl-shell {
  position: relative;
  background: var(--tl-cream);
  overflow: hidden;
  overflow: clip;
}

:where(.tl-home, .tl-subpage) :where(h1, h2, h3, p, ul) {
  margin: 0;
  padding: 0;
  font-weight: 400;
}

:where(.tl-home, .tl-subpage) ul {
  list-style: none;
}

/* Bold text of the site is weight 600 (CMS content too: <b>, <strong>, table headers would otherwise be 700). */
:where(.tl-body) :where(b, strong, th) {
  font-weight: 600;
}

.tl-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}

.tl-container {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
}

/* Beige ink-brush decoration anchored to the screen edge (SVGs cut from the Figma file). */
.tl-decor {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}

.tl-decor--swirl-top-right {
  top: -759px;
  right: calc(50% - 720px - 389px);
  width: 838px;
  height: 918px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
}

.tl-decor--swirl-intro-left {
  top: 338px;
  left: calc(50% - 720px - 607px);
  width: 742px;
  height: 812px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
}

.tl-decor--swirl-menu-left {
  top: 115px;
  /* The swirl is cut at its left edge: on screens wider than 1440 px it stays on the screen edge instead of the frame. */
  left: min(0px, calc(50% - 720px));
  width: 262px;
  height: 1180px;
  background-image: url('../images/swirl-menu-left.svg');
}

.tl-decor--swirl-member-left {
  /* textchina.png turned 225° (as in the design): only the first strokes of its ring show above the next section. */
  top: 664px;
  left: calc(50% - 720px - 495px);
  width: 774px;
  height: 847px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
  transform: rotate(135deg);
}

.tl-decor--swirl-member-right {
  top: 53px;
  right: calc(50% - 720px - 281px);
  width: 935px;
  height: 1024px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
  opacity: 0.55;
}

/* ------------------------------------------------------------------ Buttons */

/* Pill buttons (gold, red, small, header): one shape for all — 40 px pill with a 1 px cream border, weight 600, label and
   arrow on the centre line; the arrow nudges right on hover. */
.tl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  height: 40px;
  /* SVN-Helves capitals sit 1 px low in their line box: lift the label, keep the arrow on the centre line. */
  padding: 0 16px 2px;
  border: 1px solid var(--tl-cream);
  border-radius: 1000px;
  cursor: pointer;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  /* Buttons: first letter of each word in capitals, never all capitals. */
  text-transform: capitalize;
  white-space: nowrap;
  transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.tl-btn .tl-icon {
  width: 14px;
  height: 14px;
  flex: none;
  margin-top: 2px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tl-btn:hover .tl-icon,
.tl-btn:focus-visible .tl-icon {
  transform: translateX(4px);
}

.tl-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* No focus rings and no tap flash on buttons, links or inputs (they show on touch screens after a tap). */
.tl-body,
.tl-body * {
  -webkit-tap-highlight-color: transparent;
}

.tl-body :focus,
.tl-body :focus-visible {
  outline: none !important;
}

.tl-btn--solid {
  background: var(--tl-orange);
  color: var(--tl-cream);
}

.tl-btn--small {
  font-size: 14px;
}

.tl-btn--gold {
  background: linear-gradient(90deg, #f3b01c 0%, #f5ad1b 19%, #f3a51e 60%, #f5af1b 87%, #f6b11a 100%);
  color: var(--tl-dark);
}

/* ------------------------------------------------------------------ Hero (y 0 – 900) */

.tl-hero {
  position: relative;
  height: 900px;
  background:
    linear-gradient(90deg, rgba(20, 12, 8, 0.54) 0%, rgba(20, 12, 8, 0.27) 53%, rgba(20, 12, 8, 0.084) 100%),
    var(--tl-hero-image) center / cover no-repeat,
    var(--tl-dark);
  color: var(--tl-cream);
}

.tl-hero__copy {
  position: absolute;
  top: 608px;
  left: 50%;
  width: 600px;
  transform: translateX(-50%);
  text-align: center;
}

.tl-hero__title {
  font-family: var(--tl-cintra);
  letter-spacing: 0;
  font-size: 52px;
  line-height: 55px;
  text-transform: uppercase;
}

.tl-hero__text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 22px;
}

.tl-marquee {
  position: absolute;
  inset: auto 0 0;
  height: 62px;
  overflow: hidden;
  background: var(--tl-orange);
}

.tl-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  padding-left: 20px;
  animation: tl-marquee 48s linear infinite;
}

.tl-marquee__group {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-marquee__group li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  color: var(--tl-deep);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 28px;
  line-height: 29px;
  text-transform: uppercase;
  white-space: nowrap;
  /* capitals sit 2.5 px above the line-box centre in this font: bring their centre to the band's centre */
  position: relative;
  top: 2.5px;
}

.tl-marquee__group li::after {
  content: '';
  width: 12px;
  height: 12px;
  background: var(--tl-deep);
  transform: rotate(45deg) scale(0.86);
  /* the li is nudged down (above); the diamond stays on the band's centre line */
  position: relative;
  top: -2.5px;
}

@keyframes tl-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-marquee__track {
    animation: none;
  }
}

/* ------------------------------------------------------------------ Intro (y 900 – 1730) */

.tl-intro {
  position: relative;
  padding: 62px 0 14px;
  /* The big brush rings of the design start above the section: keep them from painting over the hero. Below, they run on into the next
     section (the red band covers them there), so they are not cut flat at the foot of this one. */
  clip-path: inset(0 0 -600px 0);
}

.tl-intro__frame {
  position: absolute;
  z-index: 1;
}

.tl-intro__frame--left {
  top: 159px;
  left: calc(50% - 662px);
}

.tl-intro__frame--right {
  top: 29px;
  right: calc(50% - 659px);
}

.tl-intro__head {
  text-align: center;
}

.tl-intro__title {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 70px;
  line-height: 73px;
  text-transform: uppercase;
}

.tl-intro__subtitle {
  margin-top: 24px;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 48px;
  line-height: 50px;
  text-transform: uppercase;
  color: var(--tl-brown);
}

.tl-ornament {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

.tl-ornament img {
  display: block;
  width: 350px;
  height: 18px;
}

.tl-intro__text {
  width: 882px;
  max-width: 100%;
  margin: 31px auto 0;
  color: var(--tl-brown);
  font-size: 18px;
  line-height: 24px;
}

.tl-arches {
  display: flex;
  justify-content: space-between;
  margin: 76px 0 0;
  padding: 0;
}

.tl-arch {
  position: relative;
  box-sizing: border-box;
  width: 276px;
  height: 380px;
  margin: 0;
  background: var(--tl-arch) center / 278px 380px no-repeat;
  color: var(--tl-cream);
  text-align: center;
}

.tl-arch__icon {
  position: absolute;
  top: 83px;
  left: 50%;
  width: 58px;
  height: auto;
  transform: translateX(-50%);
}

.tl-arch__title {
  position: absolute;
  top: 144px;
  right: 0;
  left: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  text-transform: uppercase;
}

.tl-arch__text {
  position: absolute;
  right: 17px;
  bottom: 14px;
  left: 17px;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}

/* ------------------------------------------------------------------ Bò tươi mỗi ngày (y 1730 – 2485) */

.tl-fresh {
  position: relative;
  z-index: 1;
  height: 755px;
}

.tl-fresh__band {
  position: absolute;
  /* An 8000 px strip centred on the 1440 px design: the vector inside (fresh.blade.php) keeps its edges crossing the copy and the cow at
     the same place on every screen width (Figma: the top edge runs from (0, 0) to (1440, 209), the bottom one from (0, 446.6) to
     (1440, 752)). What goes past the strip or the section is hidden. */
  top: -500px; /* the slope goes on above and below the section on wide screens: no flat cut at the top left or the bottom right */
  bottom: -800px;
  left: calc(50% - 4000px);
  width: 8000px;
  overflow: hidden;
  pointer-events: none;
}

.tl-fresh__vector {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 8000px;
  height: 2050px;
  max-width: none;
}

.tl-fresh__inner {
  position: relative;
  width: 1440px;
  max-width: none;
  height: 100%;
  margin-left: calc(50% - 720px);
}

.tl-fresh__copy {
  position: absolute;
  top: 108px;
  left: 139px;
  width: 320px;
}

.tl-fresh__title {
  color: var(--tl-cream);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 69.7px;
  line-height: 73px;
  text-transform: uppercase;
}

.tl-fresh__title span {
  display: block;
  white-space: nowrap;
}

.tl-fresh__title .is-gold {
  color: var(--tl-gold);
}

.tl-ornament--light {
  justify-content: flex-start;
  margin-top: 28px;
}

.tl-ornament--light img {
  display: block;
  width: 181px;
  height: 18px;
}

.tl-fresh__text {
  margin-top: 20px;
  color: var(--tl-cream);
  font-size: 18px;
  line-height: 24px;
}

.tl-fresh__cow {
  position: absolute;
  top: 28px;
  left: 450px;
  width: 962px;
}

.tl-fresh__cow img,
.tl-fresh__cow svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Cow chart (partials/cow): colours of the client's drawing; change the fonts of its text here. */
.tl-cow {
  --tl-cow-label-font: var(--tl-display);
  --tl-cow-note-font: var(--tl-body);
  overflow: visible;
}

.tl-cow__body {
  fill: #231711;
  stroke: #ffdbb3;
  stroke-miterlimit: 10;
  stroke-width: 1.33px;
}

.tl-cow__cut {
  fill: #e24302;
}

.tl-cow__label,
.tl-cow__note {
  fill: #ffdbb3;
}

.tl-cow__label {
  font-family: var(--tl-cow-label-font);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.tl-cow__note {
  font-family: var(--tl-cow-note-font);
  font-weight: 400;
}

/* ------------------------------------------------------------------ Shared section heading */

.tl-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* Bullet and title on one row, the bullet centred on the title block (one or two lines) at every width. The same bullet
   (size, gap to the text) for every section title; --tl-bullet-size / --tl-bullet-gap change per screen size only. */
.tl-section-title {
  --tl-bullet-size: 25px;
  --tl-bullet-gap: 16px;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--tl-bullet-gap);
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 70px;
  line-height: 73px;
  text-transform: uppercase;
}

/* The capitals of the display face sit 0.09 em above the middle of their line box (measured: 6.3 px at 70 px), so the
   bullet is lifted by that much to sit on the centre of the capitals (em = the title's size, at every width). */
.tl-bullet {
  flex: none;
  width: var(--tl-bullet-size);
  height: var(--tl-bullet-size);
  background: var(--tl-red);
  border-radius: 6px;
  transform: translateY(-0.09em) rotate(45deg) scale(0.74);
}

/* ------------------------------------------------------------------ Thực đơn (y 2485 – 3611) */

.tl-menu {
  position: relative;
  padding-top: 35px;
}

.tl-menu .tl-btn--solid {
  margin-top: 53px;
}

/* Figma: title baseline at y 2592 and subtitle baseline at y 2645 — the two lines sit close together. */
.tl-menu .tl-section-title {
  margin-top: 16px;
}

.tl-menu__subtitle {
  margin: -1px 0 0 41px;
  color: var(--tl-brown);
  font-size: 27.2px; /* the Figma text measures 581 px wide: SVN-Helves Bold at 27.2 px */
  font-weight: 600;
  line-height: 48px;
}

/*
 * Group tabs: one line. When the groups no longer fit (their text would touch),
the strip scrolls and the arrows appear,
* like the Tian Long menu tabs. The strip has room around it for the brush of the active group (the margins give it back).
 */
.tl-menu__tabs-wrap {
  position: relative;
  margin-top: 34px;
}

.tl-menu--page .tl-menu__tabs-wrap {
  margin-top: 26px;
}

.tl-menu__tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 36px;
  min-height: 22px;
  margin: -28px -20px -36px;
  padding: 28px 20px 36px;
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tl-menu__tabs::-webkit-scrollbar {
  display: none;
}

/* No tab text under or beside an arrow: the strip is fully hidden across the arrow (the strip starts 20 px outside the
   wrap, the arrow covers 14 – 48 px of it) and fades back in after it. */
.tl-menu__tabs-wrap.can-scroll-left .tl-menu__tabs {
  --tl-hide-l: 56px;
  --tl-fade-l: 104px;
}

.tl-menu__tabs-wrap.can-scroll-right .tl-menu__tabs {
  --tl-hide-r: 56px;
  --tl-fade-r: 104px;
}

.tl-menu__tabs-wrap.has-overflow .tl-menu__tabs {
  -webkit-mask-image: linear-gradient(90deg, transparent var(--tl-hide-l, 0px), #000 var(--tl-fade-l, 0px), #000 calc(100% - var(--tl-fade-r, 0px)), transparent calc(100% - var(--tl-hide-r, 0px)));
  mask-image: linear-gradient(90deg, transparent var(--tl-hide-l, 0px), #000 var(--tl-fade-l, 0px), #000 calc(100% - var(--tl-fade-r, 0px)), transparent calc(100% - var(--tl-hide-r, 0px)));
}

/* The strip has 28 px of room above its 22 px text line,
so the arrows centre on the text line (28 + 11),
not on the wrap. */
.tl-menu__tabs-wrap .tl-menu__tabs-nav {
  top: 39px;
  z-index: 4;
  width: 34px;
  height: 34px;
}

.tl-menu__tabs-wrap .tl-menu__tabs-nav.tl-arrow--prev {
  left: -6px;
}

.tl-menu__tabs-wrap .tl-menu__tabs-nav.tl-arrow--next {
  right: -6px;
}

.tl-menu.is-menu-temporarily-hidden .tl-menu__tabs-wrap {
  height: 0;
  margin-top: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.tl-menu__tab {
  position: relative;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: #2b1d0f;
  cursor: pointer;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 16px;
  line-height: 22px;
  /* Dish groups as entered in the admin. */
  text-transform: none;
  white-space: nowrap;
}

.tl-menu__tab::before {
  content: '';
  position: absolute;
  inset: -26px -25px -34px -16px;
  background: url('../images/brush-red.webp') 0 0 / 100% 100% no-repeat;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tl-menu__tab span {
  position: relative;
  transition: color 0.2s ease;
}

.tl-menu__tab:hover span {
  color: var(--tl-header-red);
}

.tl-menu__tab.is-active span {
  color: var(--tl-header-red);
}

.tl-menu__tab.is-active::before {
  opacity: 1;
  transform: none;
}

.tl-container--book {
  margin-top: 31px;
}

.tl-book {
  position: relative;
  /* page width x2 : page height, so the flipbook does not jump when it is mounted */
  aspect-ratio: calc(2 / var(--tl-menu-ratio, 1.4136));
  width: 100%;
  background: #241915;
  overflow: visible;
  box-shadow: 0 26px 52px rgba(60, 20, 10, 0.24);
}

.tl-book__stage {
  position: absolute;
  inset: 0;
}

.tl-book__stage .stf__parent {
  margin: 0 auto;
}

.tl-page {
  background: #241915;
  overflow: hidden;
}

.tl-page img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.tl-book__zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 244, 227, 0.95);
  border-radius: 9999px;
  background: var(--tl-cream);
  color: var(--tl-red);
  cursor: pointer;
  opacity: 1;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.tl-book__zoom:hover {
  background: var(--tl-cream);
}

.tl-book__zoom .tl-icon {
  width: 20px;
  height: 20px;
}

/* Tools of the book: on desktop the magnifier floats on the book's top right corner (the row is laid over the book). */
.tl-container--book {
  position: relative;
}

.tl-book__tools {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: flex;
  gap: 10px;
}

.tl-book__tools .tl-book__zoom {
  position: static;
}

/* One page / spread switch (Tian Long): only up to 1024 px. */
.tl-book__view {
  display: none;
}

.tl-book__view-icon {
  display: none;
}

.tl-book__view-icon--single,
.tl-menu.is-single-page-view .tl-book__view-icon--spread {
  display: inline-flex;
}

.tl-menu.is-single-page-view .tl-book__view-icon--single {
  display: none;
}

.tl-book__zoom[hidden] {
  display: none;
}

/* Pages of the group chosen in the tabs glow once (1 s) when the book reaches them, as the former menu book did
   (tianlong-home.js, glowCategory). */
.tl-page.is-category-active {
  animation: tl-category-glow 1000ms ease-out both;
}

@keyframes tl-category-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(165, 131, 73, 0);
  }

  32% {
    box-shadow: 0 0 28px 8px rgba(165, 131, 73, 0.55);
  }

  100% {
    box-shadow: 0 0 8px 0 rgba(165, 131, 73, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-page.is-category-active {
    animation: none;
  }
}

.tl-page.is-blank {
  background: #241915;
}

@media (max-width: 1024px) {
  .tl-book__view {
    display: inline-flex;
  }

  .tl-menu.is-single-page-view .tl-book {
    aspect-ratio: calc(1 / var(--tl-menu-ratio, 1.4136));
    width: min(100%, 720px);
    margin-inline: auto;
  }
}

.tl-arrow[hidden],
.tl-dots[hidden] {
  display: none;
}

.tl-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.tl-menu-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  aspect-ratio: calc(2 / var(--tl-menu-ratio, 1.4136));
  max-height: 520px;
  width: 100%;
  background: var(--tl-dark);
  color: var(--tl-cream);
  text-align: center;
}

.tl-menu-empty img {
  width: 120px;
  height: auto;
}

.tl-menu-empty p {
  max-width: 420px;
  font-size: 18px;
  line-height: 24px;
}

/*
 * Menu viewer: the Tian Long lightbox (same markup and script): a dialog with the group title and group pills on top,
* the page in the middle with round arrows over it,
and a strip of thumbnails below. Tian Long colours and type.
 */
.tianlong-menu-s2-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tianlong-menu-s2-lightbox[hidden] {
  display: none;
}

.tianlong-menu-s2-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 25, 21, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.tianlong-menu-s2-lightbox-dialog {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(980px, 100%);
  max-height: calc(100vh - 32px);
  padding: 18px 18px 14px;
  overflow-y: auto;
  border: 1px solid rgba(255, 244, 227, 0.32);
  border-radius: 18px;
  background: rgba(255, 244, 227, 0.1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color: var(--tl-cream);
}

.tianlong-menu-s2-lightbox-head {
  margin: 0 56px 14px 8px;
}

.tianlong-menu-s2-lightbox-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.tianlong-menu-s2-lightbox-title {
  margin: 0;
  color: var(--tl-cream);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
  text-transform: uppercase;
}

.tianlong-menu-s2-lightbox-counter {
  display: none;
}

/* Always one row: a long list of groups scrolls sideways (wheel / swipe) instead of wrapping. */
.tianlong-menu-s2-lightbox-tabs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tianlong-menu-s2-lightbox-tabs::-webkit-scrollbar {
  display: none;
}

.tianlong-menu-s2-lightbox-tabs.is-fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

.tianlong-menu-s2-lightbox-tabs.is-fade-start {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px);
  mask-image: linear-gradient(90deg, transparent, #000 48px);
}

.tianlong-menu-s2-lightbox-tabs.is-fade-start.is-fade-end {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.tianlong-menu-s2-lightbox-tab {
  flex: 0 0 auto;
}

.tianlong-menu-s2-lightbox-tab {
  padding: 8px 16px;
  border: 1px solid rgba(255, 244, 227, 0.32);
  border-radius: 9999px;
  background: rgba(255, 244, 227, 0.08);
  color: var(--tl-cream);
  cursor: pointer;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  /* Dish groups as entered in the admin. */
  text-transform: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.tianlong-menu-s2-lightbox-tab:hover {
  background: rgba(255, 244, 227, 0.2);
}

.tianlong-menu-s2-lightbox-tab.is-active {
  border-color: var(--tl-cream);
  background: var(--tl-cream);
  color: var(--tl-orange);
}

.tianlong-menu-s2-lightbox-tab-label {
  display: inline-block;
  white-space: nowrap;
}

.tianlong-menu-s2-lightbox-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 244, 227, 0.5);
  border-radius: 9999px;
  background: rgba(36, 25, 21, 0.4);
  color: var(--tl-cream);
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.tianlong-menu-s2-lightbox-close:hover {
  background: var(--tl-orange);
}

.tianlong-menu-s2-lightbox-close svg,
.tianlong-menu-s2-lightbox-close i,
.tianlong-menu-s2-lightbox-nav svg,
.tianlong-menu-s2-lightbox-nav i {
  width: 20px;
  height: 20px;
}

.tianlong-menu-s2-lightbox-media {
  position: relative;
}

.tianlong-menu-s2-lightbox-image {
  display: block;
  width: 100%;
  min-height: 340px;
  max-height: 74vh;
  object-fit: contain;
}

.tianlong-menu-s2-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 244, 227, 0.95);
  border-radius: 9999px;
  background: rgba(255, 244, 227, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  color: var(--tl-red);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.tianlong-menu-s2-lightbox-nav:hover {
  background: rgba(255, 244, 227, 0.85);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.tianlong-menu-s2-lightbox-prev {
  left: 28px;
}

.tianlong-menu-s2-lightbox-next {
  right: 28px;
}

/* Page thumbnails: a column on the right of the page (like Tian Long),
a row under it on tablets / phones. */
.tianlong-menu-s2-lightbox-thumbs {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 78px;
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(255, 244, 227, 0.22);
  border-radius: 5px;
  background: rgba(36, 25, 21, 0.28);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tianlong-menu-s2-lightbox-thumbs::-webkit-scrollbar {
  display: none;
}

.tianlong-menu-s2-lightbox-thumb {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1 / var(--tl-menu-page-ratio, 1.4136);
  height: auto;
  margin-bottom: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.tianlong-menu-s2-lightbox-thumb:last-child {
  margin-bottom: 0;
}

.tianlong-menu-s2-lightbox-thumb:hover {
  opacity: 0.9;
}

.tianlong-menu-s2-lightbox-thumb.is-active {
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--tl-gold);
  transform: translateY(-1px);
}

.tianlong-menu-s2-lightbox-thumb img,
.tianlong-menu-s2-lightbox-thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tianlong-menu-s2-lightbox-thumb-placeholder {
  background: rgba(255, 244, 227, 0.18);
}

@media (max-width: 1024px) {
  .tianlong-menu-s2-lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .tianlong-menu-s2-lightbox-prev {
    left: 16px;
  }

  .tianlong-menu-s2-lightbox-next {
    right: 16px;
  }

  .tianlong-menu-s2-lightbox-thumbs {
    position: relative;
    flex-direction: row;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
  }

  .tianlong-menu-s2-lightbox-thumb {
    flex: 0 0 58px;
    width: 58px;
    margin-right: 4px;
    margin-bottom: 0;
  }

  .tianlong-menu-s2-lightbox-thumb:last-child {
    margin-right: 0;
  }
}

.tianlong-modal-open {
  overflow: hidden;
}

/*
 * Arrows and dots: the Tian Long pattern (round frosted buttons that sit over the picture,
quatrefoil dots),
in Tian Long
 * colours. The arrows overlay the book / the posters; they are never squeezed.
 */
.tl-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 244, 227, 0.95);
  border-radius: 9999px;
  background: rgba(255, 244, 227, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(36, 25, 21, 0.22);
  color: var(--tl-red);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.tl-arrow:hover {
  background: rgba(255, 244, 227, 0.85);
  box-shadow: 0 6px 16px rgba(36, 25, 21, 0.28);
}

.tl-arrow .tl-icon {
  width: 18px;
  height: 18px;
}

.tl-arrow--prev {
  left: 14px;
}

.tl-arrow--next {
  right: 14px;
}

.tl-promos .tl-arrow {
  top: 313.5px;
}

.tl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 18px;
  margin-top: 16px;
}

.tl-dot {
  position: relative;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tl-red);
  cursor: pointer;
}

/* Tian Long dot icons (outline / filled),
coloured here. */
.tl-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url('../images/dot-stroke.svg') center / contain no-repeat;
  mask: url('../images/dot-stroke.svg') center / contain no-repeat;
  transition: transform 0.2s ease;
}

.tl-dot:hover::before {
  transform: scale(1.15);
}

.tl-dot.is-active::before {
  -webkit-mask-image: url('../images/dot-fill.svg');
  mask-image: url('../images/dot-fill.svg');
}

/* ------------------------------------------------------------------ Booking band (y 3725 – 4036) */

.tl-cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  height: 427px;
  margin-top: 114px;
  padding-top: 114.1px;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.32) 100%),
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('../images/cta.webp') center / cover no-repeat;
}

.tl-cta__title {
  width: auto;
  max-width: 1180px;
  color: var(--tl-cream);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 52px;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/* Two lines on wide screens; one running sentence on phones (tianlong-responsive.css). */
.tl-cta__title span,
.tl-hero__text span {
  display: block;
}

.tl-cta .tl-btn {
  margin-top: 20px;
}

/* ------------------------------------------------------------------ Ưu đãi (y 4036 – 4861) */

/* Same rhythm as the Ưu đãi page: the posters sit 81 px under the heading (inside the panel) and the section ends 80 px
   under them (dots row included). */
.tl-promos {
  position: relative;
  padding-block: 79px 46px;
}

/* Title and button on one centre line: the capitals of the 70 px title sit 5 px above the middle of its 73 px line, so the
   button is lifted by that much. */
.tl-promos .tl-section-head {
  align-items: center;
}

.tl-promos .tl-section-head .tl-btn {
  margin: 0 0 11px;
}

.tl-promos .tl-container--book {
  margin-top: 0;
}

/* A turning card grows ~43 px above and below itself (perspective), so the panel only hides what lies past its sides
   (the parked posters), never the card in the air. */
.tl-promos__panel {
  position: relative;
  height: 546px;
  clip-path: inset(-80px -40px);
}

.tl-promo:hover,
.tl-promo.is-flipped {
  z-index: 2;
}

.tl-promos__stage {
  position: absolute;
  inset: 0;
}

.tl-promo {
  position: absolute;
  top: 81px;
  left: 0;
  width: 372px;
  aspect-ratio: 4 / 5;
  margin: 0;
}

/* Slide only once the script has placed the posters (not on first paint). */
.tl-promos.is-ready .tl-promo {
  transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

/* Three posters fill the 1180 px container (372 × 465, 4:5, 32 px apart); only their place changes. */
.tl-promo[data-pos='left'] {
  left: 0;
}

.tl-promo[data-pos='center'],
.tl-promo[data-pos='only'] {
  left: 404px;
}

.tl-promo[data-pos='right'] {
  left: 808px;
}

/* Two posters: centred as a pair. */
.tl-promo[data-pos='pair-left'] {
  left: 202px;
}

.tl-promo[data-pos='pair-right'] {
  left: 606px;
}

/* Out of the window of three: parked beside the panel (only when there are more than three posters). */
.tl-promo[data-pos='before'],
.tl-promo[data-pos='after'] {
  opacity: 0;
  pointer-events: none;
}

.tl-promo[data-pos='out'] {
  display: none;
}

.tl-promos__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  color: var(--tl-brown);
  font-size: 18px;
  line-height: 24px;
}

.tl-promos__empty[hidden] {
  display: none;
}

.tl-promo[data-pos='before'] {
  left: -404px;
}

.tl-promo[data-pos='after'] {
  left: 1212px;
}

.tl-dots.is-idle {
  visibility: hidden;
}

/*
 * Card: chamfered frame (2 px border),
front = poster,
back = conditions. Like the Tian Long cards: on a pointer device
 * it flips (hover,
click,
Enter); on touch screens and up to 1024 px the back slides up from the bottom.
 * The frame belongs to each face (not to a box around them),
so on a pointer device the card turns by itself in the air,
* with nothing behind it.
 */
.tl-promo__link {
  --tl-cut: 22px;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  perspective: 1200px;
  touch-action: manipulation;
}

.tl-promo__flip {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.68s cubic-bezier(0.2, 0.75, 0.24, 1);
  will-change: transform;
}

/* One face: the border colour cut to the chamfered shape,
with the content inset by 2 px inside it. */
.tl-promo__face {
  --tl-inner: calc(var(--tl-cut) - 1px);
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 2px;
  background: #e76c42;
  backface-visibility: hidden;
  clip-path: polygon(var(--tl-cut) 0, calc(100% - var(--tl-cut)) 0, 100% var(--tl-cut), 100% calc(100% - var(--tl-cut)), calc(100% - var(--tl-cut)) 100%, var(--tl-cut) 100%, 0 calc(100% - var(--tl-cut)), 0 var(--tl-cut));
}

.tl-promo__face-in {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: polygon(var(--tl-inner) 0, calc(100% - var(--tl-inner)) 0, 100% var(--tl-inner), 100% calc(100% - var(--tl-inner)), calc(100% - var(--tl-inner)) 100%, var(--tl-inner) 100%, 0 calc(100% - var(--tl-inner)), 0 var(--tl-inner));
}

.tl-promo__face--front .tl-promo__face-in {
  background: var(--tl-red);
}

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

.tl-promo__face--back {
  z-index: 2;
  pointer-events: none;
  transform: rotateY(180deg);
}

.tl-promo__face--back .tl-promo__face-in {
  display: flex;
  flex-direction: column;
  padding: 42px 24px 26px;
  background:
    url('../images/cta-pattern.webp') center bottom / 1440px auto no-repeat,
    linear-gradient(165deg, #ce3d27 0%, #9d2523 100%);
  color: var(--tl-cream);
}

.tl-promo.is-flipped .tl-promo__face--back {
  pointer-events: auto;
}

.tl-promo__back-title {
  margin: 0;
  color: var(--tl-gold);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 30px;
  font-weight: 400;
  line-height: 32px;
  text-transform: uppercase;
}

.tl-promo__back-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 14px;
  background: linear-gradient(90deg, #fde4d0, rgba(253, 228, 208, 0));
}

.tl-promo__back-content {
  flex: 1;
  margin-top: 16px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 15px;
  line-height: 22px;
  scrollbar-color: rgba(255, 244, 227, 0.5) transparent;
  scrollbar-width: thin;
}

.tl-promo__back-content p {
  margin: 0 0 10px;
}

.tl-promo__time {
  font-weight: 600;
}

/* Conditions and places printed by the CMS (same markup as the Tian Long cards). */
.tl-promo__back-content .tianlong-promo-meta-entry {
  margin-bottom: 12px;
}

.tl-promo__back-content .tianlong-promo-meta-label {
  display: block;
  margin-bottom: 2px;
  color: var(--tl-gold);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-transform: uppercase;
}

.tl-promo__back-content .tianlong-promo-meta-body ul,
.tl-promo__back-content .tianlong-promo-meta-body ol {
  margin: 0;
  padding-left: 18px;
}

.tl-promo__back-content .tianlong-promo-meta-body ul {
  list-style: disc;
}

.tl-promo__back-content .tianlong-promo-meta-body ol {
  list-style: decimal;
}

.tl-promo__back-content .tianlong-promo-meta-body li + li {
  margin-top: 4px;
}

.tl-promo__back-content .tianlong-promo-meta-body p {
  margin: 0;
}

.tl-promo__detail {
  align-self: center;
  margin-top: 16px;
  text-transform: capitalize; /* "Xem Chi Tiết" */
}

/* Flip only on wide screens with a mouse; under 1200 px (phones, tablets, a narrow window) the back slides up instead. */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .tl-promo:hover .tl-promo__flip,
.tl-promo__link:focus-visible .tl-promo__flip,
.tl-promo.is-flipped .tl-promo__flip {
    transform: rotateY(180deg);
  }

  .tl-promo:hover .tl-promo__face--back,
.tl-promo__link:focus-visible .tl-promo__face--back {
    pointer-events: auto;
  }
}

/* Touch screens and up to 1199 px (swipe rail): no flip, the back slides up from the bottom (as the Tian Long cards do). */
@media (max-width: 1199px),
(hover: none),
(pointer: coarse) {
  .tl-promo__link {
    perspective: none;
    overflow: hidden;
    clip-path: polygon(var(--tl-cut) 0, calc(100% - var(--tl-cut)) 0, 100% var(--tl-cut), 100% calc(100% - var(--tl-cut)), calc(100% - var(--tl-cut)) 100%, var(--tl-cut) 100%, 0 calc(100% - var(--tl-cut)), 0 var(--tl-cut));
  }

  .tl-promo__flip,
  .tl-promo.is-flipped .tl-promo__flip {
    transform: none;
    transform-style: flat;
    transition: none;
    will-change: auto;
  }

  .tl-promo__face {
    backface-visibility: visible;
  }

  .tl-promo__face--front {
    z-index: 1;
  }

  .tl-promo__face--back {
    z-index: 3;
    transform: translate3d(0, 100%, 0);
    transition: transform 0.48s cubic-bezier(0.2, 0.78, 0.2, 1);
    will-change: transform;
  }

  .tl-promo.is-flipped .tl-promo__face--back {
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .tl-promo.is-flipped .tl-promo__face--front {
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-promo__flip,
.tl-promo__face--back {
    transition: none;
  }
}

/* ------------------------------------------------------------------ Quyền lợi Đồng Gu (y 4861 – 5803) */

.tl-member {
  position: relative;
}

/* The brush decorations run past the 942 px of the design (the next section covers them): they are clipped at the end of the
   section, so on the Thành viên page they carry on behind the conditions. */
.tl-member__decor {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
}

/* Thành viên page (conditions under the cards): the section goes on after the 942 px of the design, so the decorations fade out there
   instead of being cut flat. */
.tl-member--terms .tl-member__decor {
  bottom: auto;
  height: 942px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 140px), transparent 100%);
}

.tl-member__layout {
  position: relative;
  width: 1180px;
  height: 942px;
}

/* Up to the Platinum card (742 px): room for the English title on one line. */
.tl-member__copy {
  position: absolute;
  top: 134px;
  left: 1px;
  width: 730px;
}

.tl-member__kicker {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 48px;
  line-height: 50px;
  text-transform: uppercase;
  color: var(--tl-brown);
}

.tl-member__title {
  margin-top: 20px;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 70px;
  line-height: 73px;
  text-transform: uppercase;
  color: var(--tl-orange);
}

.tl-member__text {
  width: 597px;
  margin-top: 18px;
  color: var(--tl-brown);
  font-size: 18px;
  line-height: 24px;
  text-align: justify;
}

.tl-tiers {
  position: absolute;
  inset: 0;
}

/*
 * Member cards. Type sizes are the Figma ones,
not a scale of the Silver card: the Platinum card keeps the spend text at
 * 22 / 20 / 18 px and only its benefit figures are larger.
 */
.tl-tier {
  --name: 65px;
  --label: 22px;
  --range: 20px;
  --year: 18px;
  --perk-label: 14px;
  --digit: 70px;
  --pct: 34.2px;
  --menu: 11px;
  position: absolute;
  top: 441px;
  box-sizing: border-box;
  width: 314px;
  height: 400px;
  margin: 0;
  padding: 3px;
  border-radius: 44px;
  background: var(--edge) center / cover no-repeat;
  box-shadow: 0 10px 24px rgba(60, 30, 10, 0.12);
}

.tl-tier::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 41px;
  background: var(--body) center / cover no-repeat;
}

.tl-tier > * {
  position: relative;
}

.tl-tier--silver {
  --edge: url('../images/card-silver-edge.webp');
  --body: url('../images/card-silver-body.webp');
  left: 1px;
  color: #605451;
}

.tl-tier--gold {
  --edge: url('../images/card-gold-edge.webp');
  --body: url('../images/card-gold-body.webp');
  left: 371px;
  color: #844b00;
}

.tl-tier--platinum {
  --name: 64px;
  --perk-label: 18px;
  --digit: 94px;
  --pct: 45.8px;
  --menu: 14.7px;
  --edge: url('../images/card-platinum-edge.webp');
  --body: url('../images/card-platinum-body.webp');
  top: 289px;
  left: 742px;
  width: 439px;
  height: 552px;
  border-radius: 56px;
  color: #edbf76;
}

.tl-tier--platinum::before {
  border-radius: 53px;
}

/* Platinum only: the brushed 尚 seal on the left of the card face (Figma: 163 × 172 at x 22, y 121). */
.tl-tier--platinum .tl-tier__emblem {
  position: absolute;
  top: 121px;
  left: 22px;
  width: 163px;
  height: 172px;
  background: url('../images/card-platinum-emblem.webp') center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

.tl-tier__name {
  position: absolute;
  top: 33px;
  right: 34px;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: var(--name);
  line-height: 1;
  text-transform: uppercase;
  background: linear-gradient(150deg, #7b7a7a 10%, #3d3d3d 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tl-tier--gold .tl-tier__name {
  background-image: linear-gradient(150deg, #a5742d 10%, #8e4e19 90%);
}

.tl-tier--platinum .tl-tier__name {
  top: 43px;
  right: 33px;
  background-image: linear-gradient(100deg, #9e4a1c 0%, #c1925e 10%, #fff4d4 22%, #e3bc69 34%, #fbf8d9 44%, #dbbf95 50%, #b0723a 58%, #e3bc69 78%, #c99f70 100%);
}

.tl-tier__spend {
  position: absolute;
  top: 107px;
  right: 34px;
  display: flex;
  flex-direction: column;
  text-align: right;
}

.tl-tier__label {
  font-size: var(--label);
  font-weight: 600;
  line-height: 34px;
  text-transform: uppercase;
}

.tl-tier__range {
  margin-top: 2px;
  font-size: var(--range);
  line-height: 27px;
}

.tl-tier__year {
  font-size: var(--year);
  line-height: 24px;
}

/* Platinum reads like Silver and Gold: "Mức chi tiêu", then the range under it. */
.tl-tier--platinum .tl-tier__spend {
  top: 118px;
  right: 29px;
}

.tl-tier__perks {
  position: absolute;
  right: 18px;
  bottom: 39px;
  left: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  text-align: center;
}

.tl-tier--platinum .tl-tier__perks {
  right: 29px;
  bottom: 63px;
  left: 32px;
  padding-top: 18px;
}

/* One "Ưu đãi" over the two benefits, centred on the rule between them; each column keeps its own label under it. */
.tl-tier__perks-title {
  grid-column: 1 / -1;
  margin-bottom: 6px;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: var(--perk-label);
  line-height: 1.07;
  text-transform: uppercase;
}

.tl-tier__perks-title + .tl-perk {
  border-right: 1px solid currentColor;
}

.tl-perk__label {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: var(--perk-label);
  line-height: 1.07;
  text-transform: uppercase;
}

.tl-perk__value {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 8px;
}

.tl-perk__value b {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: var(--digit);
  font-weight: 400;
  line-height: 1.03;
}

.tl-perk__value span {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: calc(var(--digit) * -0.057); /* the % sits a little higher, clear of "Menu món ăn" */
  padding: 0 0 0 2px;
  font-size: var(--pct);
  font-weight: 600;
  line-height: 1;
}

/* "Menu món ăn" sits under the % sign and ends level with the foot of the digits (it must not hang below them). */
.tl-perk__value small {
  margin-top: calc(var(--menu) * -0.6 + var(--digit) * 0.102);
  font-size: var(--menu);
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  white-space: nowrap;
}

.tl-tier--platinum .tl-perk__value b,
.tl-tier--platinum .tl-perk__value span {
  color: #ffdbb0;
}

.tl-tier--platinum .tl-tier__spend,
.tl-tier--platinum .tl-tier__perks-title,
.tl-tier--platinum .tl-perk__label {
  color: #edbf76;
}

/* ------------------------------------------------------------------ Hệ thống nhà hàng (y 5803 – 6659) */

.tl-stores {
  position: relative;
  z-index: 1;
  padding-bottom: 55px;
}

.tl-stores:has(.tl-locator__select.is-open) {
  z-index: 6;
}

/* Temple skyline (1437 × 294, translucent over the dark red): always as wide as the screen so neither corner is cut, kept at the top
of a box whose height does not change, so the plate below sits where it did at every width. */
.tl-stores__top {
  height: 297px;
  background: #7e1a17 url('../images/stores-top.png') center top / 100% auto no-repeat;
}

.tl-stores__plate {
  position: relative;
  margin-top: -175px;
  height: 175px;
}

/*
 * The plate's red rule and cream base carry on to the window edges past the plate. Everything is worked out from the plate's
 * drawn width (--tl-plate-w) with the measures of store-plate.svg (1442 × 175: red rule from y 164.57, 7.25 px high), so the
 * side bands meet the drawing on the same pixel at every size (desktop 1442 px, tablet 1070 px, phone 482 px).
 */
.tl-stores__plate {
  --tl-plate-w: 1442px;
  --tl-plate-top: 1px;
}

.tl-stores__plate::before,
.tl-stores__plate::after {
  content: '';
  position: absolute;
  top: calc(var(--tl-plate-top) + var(--tl-plate-w) * 164.57 / 1442);
  bottom: 0;
  background: linear-gradient(#c74127 0 calc(var(--tl-plate-w) * 7.25 / 1442), var(--tl-cream) 0);
}

/* 1 px under the plate's edge on each side, so no gap shows between band and drawing. */
.tl-stores__plate::before {
  left: 0;
  right: calc(50% + var(--tl-plate-w) / 2 - 1px);
}

.tl-stores__plate::after {
  left: calc(50% + var(--tl-plate-w) / 2 - 1px);
  right: 0;
}

.tl-stores__plate-shape {
  position: absolute;
  top: var(--tl-plate-top);
  left: 50%;
  width: var(--tl-plate-w);
  max-width: none;
  height: auto;
  aspect-ratio: 1442 / 175;
  transform: translateX(-50%);
}

.tl-stores__head {
  position: absolute;
  top: 97px;
  right: 0;
  left: 0;
  text-align: center;
}

.tl-stores__kicker {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 18px;
  line-height: 19px;
  text-transform: uppercase;
  color: var(--tl-brown);
}

.tl-stores__title {
  margin-top: 2px;
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 40px;
  line-height: 42px;
  text-transform: uppercase;
  color: var(--tl-orange);
}

.tl-stores__stage {
  position: relative;
  z-index: 2;
  width: 1180px;
  margin-top: 29px;
  margin-left: calc(50% - 590px + 3px);
}

/* The photo (1180 × 475) with its dots under it, outside the photo, centred. */
.tl-stores__media {
  position: relative;
}

.tl-gallery {
  position: relative;
  height: 475px;
  overflow: hidden;
  border-radius: 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--tl-store-photo) center 31% / cover no-repeat;
}

.tl-gallery__track {
  position: absolute;
  inset: 0;
}

.tl-gallery__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tl-gallery__image.is-active {
  opacity: 1;
}

/* Photo of the branch shown before, kept under the new one while it fades in (tianlong-home.js, swapGallery). */
.tl-gallery__old {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.tl-gallery__old.is-active {
  opacity: 1;
}

.tl-locator__scroll[hidden],
.tl-locator__row[hidden],
.tl-locator .tl-btn[hidden],
.tl-locator__panel[hidden] {
  display: none;
}

/* Round arrows like the menu book; the card of the branch covers the right 400 px,
so "next" sits left of it. */
.tl-gallery .tl-arrow--next {
  right: auto;
  left: 708px;
}

/*
 * Card of the list of restaurants. Same anatomy and spacing rules as the Tian Long list (area tabs 30 px apart with scroll
 * arrows and faded edges; trigger 58 px; panel 12 px with 8 px between options; branch card 12 px under the trigger),
* in Tian Long colours and type.
 */
.tl-locator {
  position: absolute;
  top: 40px;
  left: 764px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 376px;
  min-height: 394px;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: var(--tl-cream);
  box-shadow: 0 18px 40px rgba(36, 25, 21, 0.28);
  color: var(--tl-dark);
  font-size: 14px;
  line-height: 19px;
}

.tl-locator__label {
  margin-bottom: 6px;
  font-weight: 600;
}

/* Area tabs: equal 30 px gaps; arrows sit in a 42 px lane on the right (like Tian Long). */
.tl-locator__areas-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
}

/* The tabs take the room the arrows leave; a tab that does not fit fades out at the edge instead of running under an arrow. */
.tl-locator__areas {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 2px solid var(--tl-pink);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.tl-locator__areas-wrap.can-scroll-left .tl-locator__areas {
  --tl-fade-l: 28px;
}

.tl-locator__areas-wrap.can-scroll-right .tl-locator__areas {
  --tl-fade-r: 28px;
}

.tl-locator__areas-wrap.has-overflow .tl-locator__areas {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--tl-fade-l, 0px), #000 calc(100% - var(--tl-fade-r, 0px)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--tl-fade-l, 0px), #000 calc(100% - var(--tl-fade-r, 0px)), transparent 100%);
}

.tl-locator__areas::-webkit-scrollbar {
  display: none;
}

.tl-locator__area {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  min-width: 64px;
  padding: 0 0 10px;
  border: 0;
  background: none;
  color: var(--tl-dark);
  cursor: pointer;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  text-align: left;
}

.tl-locator__area:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.tl-locator__area b {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  white-space: nowrap;
  transition: color 0.18s ease;
}

.tl-locator__area small {
  display: block;
  margin-top: 1px;
  color: #2b1d0f;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
}

.tl-locator__area:not(:disabled):hover b,
.tl-locator__area.is-active b {
  color: var(--tl-orange);
}

.tl-locator__area.is-active::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 2px;
  background: var(--tl-orange);
}

.tl-locator__scroll {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 8px 0 0;
  padding: 0;
  border: 1px solid rgba(199, 65, 39, 0.55);
  border-radius: 50%;
  background: rgba(255, 223, 209, 0.6);
  color: #c74127;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.tl-locator__scroll:hover {
  border-color: #c74127;
  background: var(--tl-pink);
}

.tl-locator__scroll .tl-icon {
  width: 16px;
  height: 16px;
}

.tl-locator__select {
  position: relative;
  z-index: 3;
}

/* Trigger: small label,
then the chosen branch. */
.tl-locator__select-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  min-height: 58px;
  padding: 9px 20px;
  border: 1px solid #c74127;
  border-radius: var(--tl-r-md);
  background: var(--tl-pink);
  color: #c74127;
  cursor: pointer;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  text-align: left;
  transition: background-color 0.18s var(--tl-ease), border-color 0.18s var(--tl-ease);
}

.tl-locator__select-button:hover:not(:disabled),
.tl-locator__select-button[aria-expanded='true'] {
  background: #ffd3c0;
}

.tl-locator__select-text {
  min-width: 0;
}

.tl-locator__select-text small {
  display: block;
  margin-bottom: 6px;
  color: var(--tl-text-muted);
  font-size: 12px;
  line-height: 13px;
}

.tl-locator__select-text b {
  display: block;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 17px;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.tl-locator__select-button:disabled {
  cursor: default;
}

.tl-locator__select-button .tl-icon {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.18s var(--tl-ease);
}

.tl-locator__select.is-single .tl-locator__select-button .tl-icon {
  display: none;
}

.tl-locator__select-button[aria-expanded='true'] .tl-icon {
  transform: rotate(180deg);
}

/* Panel: floats over the card and may hang below it; 12 px padding,
8 px between options. */
.tl-locator__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #c74127;
  border-radius: var(--tl-r-md);
  background: var(--tl-cream);
  box-shadow: 0 18px 36px rgba(60, 20, 10, 0.28);
}

.tl-locator__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-md);
  background: var(--tl-pink);
  color: #c74127;
}

.tl-locator__search .tl-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.tl-locator__search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tl-dark);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 14px;
  line-height: 19px;
  outline: none;
}

.tl-locator__options {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 232px;
  margin: 10px 0 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: #e9b9a6 transparent;
  scrollbar-width: thin;
}

.tl-locator__options::-webkit-scrollbar {
  width: 6px;
}

.tl-locator__options::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #e9b9a6;
}

.tl-locator__option {
  position: relative;
  flex: none;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--tl-line-soft);
  border-radius: var(--tl-r-md);
  background: #fffaf2;
  cursor: pointer;
  transition: border-color 0.18s var(--tl-ease), background-color 0.18s var(--tl-ease);
}

.tl-locator__option[hidden] {
  display: none;
}

/* Title row: a slot that opens for a small mark on hover / selection (the Tian Long pattern). */
.tl-locator__option-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-locator__option-icon {
  width: 0;
  height: 16px;
  flex: 0 0 0;
  background: var(--tl-orange);
  -webkit-mask: url('../images/dot-fill.svg') center / contain no-repeat;
  mask: url('../images/dot-fill.svg') center / contain no-repeat;
  opacity: 0;
  transform: translateX(-2px);
  transition: width 0.18s ease, flex-basis 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.tl-locator__option:hover .tl-locator__option-icon,
.tl-locator__option.is-active-option .tl-locator__option-icon,
.tl-locator__option.is-selected .tl-locator__option-icon {
  width: 16px;
  flex-basis: 16px;
  opacity: 1;
  transform: translateX(0);
}

.tl-locator__option b {
  display: block;
  color: var(--tl-brown);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.tl-locator__option-address,
.tl-locator__option-status {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  column-gap: 8px;
  padding-left: 24px;
}

.tl-locator__option-address {
  margin-top: 8px;
  color: var(--tl-text-muted);
  font-size: 12px;
  line-height: 17px;
}

.tl-locator__option-address .tl-icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.tl-locator__option-address span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tl-locator__option-status {
  align-items: center;
  margin-top: 7px;
  color: var(--tl-text-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.tl-locator__option-status::before {
  content: '';
  width: 8px;
  height: 8px;
  justify-self: center;
  border-radius: 50%;
  background: var(--tl-status-ok);
  box-shadow: 0 0 0 4px rgba(47, 158, 99, 0.16);
}

.tl-locator__option-status--soon::before {
  background: var(--tl-status-soon);
  box-shadow: 0 0 0 4px rgba(243, 161, 27, 0.18);
}

.tl-locator__option-status--off::before {
  background: var(--tl-status-off);
  box-shadow: 0 0 0 4px rgba(166, 173, 182, 0.18);
}

.tl-locator__option.is-active-option,
.tl-locator__option:hover {
  border-color: #c74127;
  background: var(--tl-pink);
}

.tl-locator__option.is-selected {
  border-color: #c74127;
  background: var(--tl-pink);
}

.tl-locator__option.is-selected b {
  color: #c74127;
}

.tl-locator__option.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tl-locator__empty-row {
  padding: 10px 2px 4px;
  color: var(--tl-text-muted);
  font-size: 14px;
  line-height: 19px;
}

/* Branch card: 12 px under the trigger,
accent edge,
one icon per line,
map button. */
.tl-locator__details {
  box-sizing: border-box;
  flex: 1;
  margin-top: 8px;
  padding: 20px 20px 18px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-md);
  background: var(--tl-pink);
  color: #c74127;
}

.tl-locator__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0 0 14px;
}

.tl-locator__row a {
  color: inherit;
  text-decoration: none;
}

.tl-locator__row a:hover {
  text-decoration: underline;
}

.tl-locator__row a.is-disabled {
  pointer-events: none;
}

.tl-locator__ico .tl-icon {
  width: 20px;
  height: 20px;
}

/* Branch action: "Xem bản đồ" only (the card has no booking button), the usual solid pill; the row goes when the branch
   has no map link. */
.tl-locator__actions {
  display: flex;
  margin-top: 4px;
}

.tl-locator__actions:not(:has(.tl-btn:not([hidden]))) {
  display: none;
}

.tl-locator__empty {
  padding: 24px 8px;
}

/* The icon files of the theme {
  display: block;
  background: currentColor;
  -webkit-mask: var(--tl-icon) center / contain no-repeat;
  mask: var(--tl-icon) center / contain no-repeat;
}

/* ------------------------------------------------------------------ Floating phone / Messenger pill */

.tl-float {
  position: fixed;
  right: 20px;
  bottom: 60px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 48px;
  padding: 12px 0;
  border: 1px solid rgba(255, 244, 227, 0.7);
  border-radius: 9999px;
  background: linear-gradient(180deg, #b32a27 0%, #8f1f1e 100%);
  box-shadow: 0 14px 28px rgba(60, 10, 8, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  isolation: isolate;
}

/* Same buttons as the Tian Long floating pill: Messenger,
then the hotline,
white 30 px icon files of the theme. */
.tl-float__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  transition: transform 0.18s ease;
}

.tl-float__btn:hover,
.tl-float__btn:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.tl-float__icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: filter 0.18s ease;
}

.tl-float__btn:hover .tl-float__icon,
.tl-float__btn:focus-visible .tl-float__icon {
  filter: brightness(0) invert(1) drop-shadow(0 5px 10px rgba(0, 0, 0, 0.28));
}

.tl-float__phone {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  max-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 244, 227, 0.5);
  border-radius: 9999px;
  background: #8f1f1e;
  box-shadow: 0 8px 18px rgba(60, 10, 8, 0.28);
  color: var(--tl-cream);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(10px, -50%);
  transition: opacity 0.18s ease, transform 0.18s ease, max-width 0.18s ease, padding 0.18s ease;
  white-space: nowrap;
}

@media (hover: hover) {
  .tl-float__btn--hotline:hover .tl-float__phone,
.tl-float__btn--hotline:focus-visible .tl-float__phone {
    max-width: 180px;
    padding: 0 14px;
    opacity: 1;
    transform: translate(0, -50%);
  }
}

/* Cookie banner and dialogs keep the Tian Long look; only lift the dialogs above the fixed header. */
.tianlong-cookie-consent {
  z-index: 70;
}

/* ------------------------------------------------------------------ Area / language dialog (Tian Long tone)
 * Markup, script, layout and sizes are the Tian Long ones (themes/tian-long/style.css: 650 px panel, 4 / 2 columns,
 * 10 px cards, round close, apply at the right). Only the colours and the type are Tian Long's.
 */
.tianlong-header-modal {
  --tianlong-modal-text: var(--tl-brown);
  --tianlong-modal-green-gradient: linear-gradient(180deg, #ce3d27 0%, #9d2523 100%);
  --tianlong-modal-detail-gradient: linear-gradient(180deg, #cf3a05 0%, #a22423 100%);
  background: rgba(36, 25, 21, 0.66);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
}

.tianlong-header-modal-panel {
  border-color: rgba(206, 61, 39, 0.24);
  background: var(--tl-cream);
  box-shadow: 0 34px 90px rgba(36, 25, 21, 0.4), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  scrollbar-color: #e9b9a6 transparent;
}

.tianlong-header-modal-panel::before {
  background: linear-gradient(90deg, rgba(206, 61, 39, 0), #ce3d27 24%, #f2a222 50%, #ce3d27 76%, rgba(206, 61, 39, 0));
}

.tianlong-header-modal-head {
  border-bottom-color: rgba(206, 61, 39, 0.16);
}

.tianlong-header-modal-title {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-weight: 400;
  text-transform: uppercase;
}

/* flex: none keeps it round when the title wraps. */
.tianlong-header-modal-close {
  flex: none;
  box-sizing: border-box;
  padding: 0;
  border-color: rgba(206, 61, 39, 0.4);
  background: rgba(255, 223, 209, 0.45);
  color: var(--tl-red);
}

.tianlong-header-modal-heading {
  font-family: var(--tl-body);
  font-weight: 600;
}

.tianlong-header-modal-grid--branches {
  scrollbar-color: #e9b9a6 transparent;
}

.tianlong-branch-item,
.tianlong-lang-item {
  border-color: rgba(206, 61, 39, 0.22);
  background: #fffaf1;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 8px 22px rgba(60, 20, 10, 0.04);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
}

.tianlong-branch-item:hover,
.tianlong-lang-item:hover,
.tianlong-branch-item:focus-visible,
.tianlong-lang-item:focus-visible {
  border-color: rgba(206, 61, 39, 0.55);
  background: #fff;
  box-shadow: 0 14px 28px rgba(206, 61, 39, 0.12), 0 0 0 1px rgba(242, 162, 34, 0.08) inset;
}

.tianlong-branch-item.is-selected,
.tianlong-lang-item.is-selected {
  border-color: rgba(207, 58, 5, 0.6);
  background: linear-gradient(180deg, rgba(255, 223, 209, 0.7), rgba(255, 250, 241, 0.98));
  box-shadow: 0 12px 30px rgba(206, 61, 39, 0.13), 0 0 0 1px rgba(242, 162, 34, 0.12) inset;
}

.tianlong-branch-item.is-selected .tianlong-branch-label,
.tianlong-lang-item.is-selected .tianlong-lang-option-label {
  color: var(--tl-orange);
}

.tianlong-lang-option-flag {
  border-color: rgba(206, 61, 39, 0.16);
}

.tianlong-branch-item[data-branch-status='paused'] {
  background: rgba(206, 61, 39, 0.06);
}

.tianlong-branch-status-badge {
  background: var(--tl-orange);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
}

.tianlong-header-modal-actions {
  border-top-color: rgba(206, 61, 39, 0.14);
}

/* Same shape as the site buttons (.tl-btn): 40 px pill, 1 px cream border, weight 600. */
.tianlong-header-modal-apply {
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 20px 2px;
  border: 1px solid var(--tl-cream);
  border-radius: 1000px;
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ Cookie banner (Tian Long tone)
 * The banner and its script are the Tian Long ones; type and colours follow the Tian Long design.
 */
/* Compact: narrower, tighter padding and type, a smaller button. */
.tianlong-cookie-consent {
  gap: 14px;
  width: min(560px, calc(100vw - 112px));
  max-width: 560px;
  padding: 12px 14px 12px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--tl-cream);
  box-shadow: 0 14px 32px rgba(36, 25, 21, 0.24);
  color: var(--tl-brown);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
}

.tianlong-cookie-consent__title {
  margin-bottom: 2px;
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
  text-transform: uppercase;
}

.tianlong-cookie-consent__message {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
}

/* Phones: text on full width (title 18 px, message 15 px), "Đồng ý" (15 px) under it at the bottom right. */
@media (max-width: 767px) {
  .tianlong-cookie-consent {
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px 14px 12px;
  }

  .tianlong-cookie-consent__title {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 20px;
  }

  .tianlong-cookie-consent__message {
    font-size: 15px;
    line-height: 20px;
  }

  .tianlong-cookie-consent__actions {
    justify-content: flex-end;
  }

  .tianlong-cookie-consent .tianlong-cookie-consent__accept {
    flex: none;
    font-size: 15px;
  }
}

.tianlong-cookie-consent__message a {
  color: var(--tl-orange);
  font-weight: 600;
}

.tianlong-cookie-consent__message a:hover {
  color: #9d2523;
}

/* Same shape as the site buttons (.tl-btn): pill, 1 px cream border, weight 600; the label keeps its case ("Đồng ý"). */
.tianlong-cookie-consent__accept {
  box-sizing: border-box;
  min-height: 36px;
  padding: 0 16px 2px;
  border: 1px solid var(--tl-cream);
  background: var(--tl-orange);
  box-shadow: none;
  color: var(--tl-cream);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  white-space: nowrap;
}

.tianlong-cookie-consent__close {
  background: var(--tl-header-red);
  box-shadow: none;
}

/* ------------------------------------------------------------------ Member cards: shine
 * The tier names (Silver,
Gold,
Platinum) carry a light band that sweeps across them on its own,
one card after the other,
* and again,
faster,
when the card is hovered. The card face gets a soft sheen on hover.
 */
.tl-tier__name {
  --shine: rgba(255, 255, 255, 0.95);
  background-image:
    linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%),
    var(--tl-name-fill);
  background-size: 260% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  animation: tl-name-shine 5.4s ease-in-out infinite;
}

.tl-tier--silver .tl-tier__name {
  --tl-name-fill: linear-gradient(150deg, #7b7a7a 10%, #3d3d3d 90%);
}

.tl-tier--gold .tl-tier__name {
  --tl-name-fill: linear-gradient(150deg, #a5742d 10%, #8e4e19 90%);
  --shine: rgba(255, 244, 196, 0.95);
  animation-delay: 1.2s;
}

.tl-tier--platinum .tl-tier__name {
  --tl-name-fill: linear-gradient(100deg, #9e4a1c 0%, #c1925e 10%, #fff4d4 22%, #e3bc69 34%, #fbf8d9 44%, #dbbf95 50%, #b0723a 58%, #e3bc69 78%, #c99f70 100%);
  --shine: rgba(255, 255, 255, 1);
  animation-delay: 2.4s;
}

.tl-tier--gold .tl-tier__name,
.tl-tier--platinum .tl-tier__name,
.tl-tier--silver .tl-tier__name {
  background-image:
    linear-gradient(105deg, transparent 38%, var(--shine) 50%, transparent 62%),
    var(--tl-name-fill);
}

.tl-tier:hover .tl-tier__name,
.tl-tier:focus-within .tl-tier__name {
  animation: tl-name-shine 1.1s ease-out 1;
  animation-delay: 0s;
}

.tl-tier::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 41px;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.34) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
}

.tl-tier--platinum::after {
  border-radius: 53px;
}

.tl-tier:hover::after {
  opacity: 1;
  animation: tl-card-sheen 1.2s ease-out 1;
}

@keyframes tl-name-shine {
  0% {
    background-position: 160% 0, 0 0;
  }
  35%,
  100% {
    background-position: -60% 0, 0 0;
  }
}

@keyframes tl-card-sheen {
  from {
    background-position: 160% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-tier__name,
.tl-tier:hover .tl-tier__name,
.tl-tier:hover::after {
    animation: none;
  }
}

/* ------------------------------------------------------------------ Inner pages (Ưu đãi,
Thành viên,
Thực đơn) */

/* Banner of every inner page (Thành viên, Thực đơn, Ưu đãi — one design): 1440 × 620 photo with a veil that is darker on the
left, small Cintra line and big Cintra title. */
.tl-pagehero {
  position: relative;
  height: 620px;
  background:
    linear-gradient(90deg, rgba(19, 12, 8, 0.54) 0%, rgba(19, 12, 8, 0.285) 50%, rgba(19, 12, 8, 0.085) 100%),
    var(--tl-pagehero-image) center / cover no-repeat,
    var(--tl-dark);
  color: var(--tl-cream);
}

/* Same banner height and same place for the big title whether the banner has one line (title) or two (small line + title):
the small line has its own row, which stays empty when there is none, so the text never moves the photo or the title. */
.tl-pagehero__inner {
  position: absolute;
  top: 403px; /* 620 − 112 (bottom space) − 55 (title) − 17 (gap) − 33 (small line) */
  right: 0;
  left: 0;
  display: grid;
  grid-template-rows: minmax(33px, auto) auto;
  row-gap: 17px;
  padding-inline: 40px;
  text-align: center;
}

.tl-pagehero__eyebrow,
.tl-pagehero__title {
  font-family: var(--tl-cintra);
  letter-spacing: 0;
  text-transform: uppercase;
}

.tl-pagehero__eyebrow {
  grid-row: 1;
  margin: 0;
  font-size: 31px;
  line-height: 33px;
}

.tl-pagehero__title {
  grid-row: 2;
  margin: 0;
  font-size: 50px;
  font-weight: 400;
  line-height: 55px;
}

/* The Tian Long stylesheet paints the <main> of its inner pages; here it is the cream of the page. */
body.tl-body main.tl-subpage {
  background: var(--tl-cream);
}

.tl-subpage .tl-cta {
  margin-top: 0;
}

/* Ưu đãi: the homepage cards without their heading (the banner carries the title). */
/* Ưu đãi page: 80 px between the banner and the posters and between the posters (with their dots row) and the booking band. */
.tl-promos--page {
  padding-top: 0;
}

/* Thực đơn: the homepage menu book without its heading. */
.tl-menu--page {
  padding-top: 72px;
}

/* Thành viên: the page shows the homepage member section as it is; the conditions sit under the cards in the same section. */
.tl-terms {
  position: relative;
  z-index: 1;
  margin-bottom: 80px;
  color: #2b1b00;
  font-size: 18px;
  line-height: 24px;
}

.tl-terms__title {
  margin: 0 0 24px;
  color: var(--tl-orange);
  font-family: var(--tl-cintra);
  font-size: 24px;
  font-weight: 400;
  line-height: 25px;
  text-transform: uppercase;
}

.tl-terms p {
  max-width: 882px;
  margin: 0;
}

.tl-terms p + p {
  margin-top: 24px;
}

.tl-terms__content > * + * {
  margin-top: 18px;
}

/* ------------------------------------------------------------------ Ưu đãi: trang chi tiết */

.tl-promo-detail {
  padding: 40px 0 96px;
}

.tl-promo-detail__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  color: var(--tl-text-muted);
  font-size: 15px;
  line-height: 22px;
}

.tl-promo-detail__breadcrumb a {
  color: var(--tl-orange);
  text-decoration: none;
}

.tl-promo-detail__breadcrumb a:hover {
  text-decoration: underline;
}

.tl-promo-detail__main {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.tl-promo-detail__main--article-only {
  grid-template-columns: minmax(0, 1fr);
}

.tl-promo-detail__side {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 24px;
}

.tl-promo-detail__cover {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tl-r-lg);
  box-shadow: 0 18px 40px rgba(36, 25, 21, 0.18);
}

.tl-promo-detail__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.tl-promo-detail__toc {
  padding: 20px 22px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-md);
  background: var(--tl-pink);
  color: #c74127;
}

.tl-promo-detail__toc-title {
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
}

.tl-promo-detail__toc ol {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.tl-promo-detail__toc li.level-3 {
  padding-left: 14px;
}

.tl-promo-detail__toc li.level-4 {
  padding-left: 28px;
}

.tl-promo-detail__toc a {
  color: inherit;
  text-decoration: none;
}

.tl-promo-detail__toc a:hover {
  text-decoration: underline;
}

.tl-promo-detail__lead {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: 32px;
  line-height: 38px;
  text-transform: uppercase;
}

.tl-promo-detail__content {
  margin-top: 22px;
  color: var(--tl-brown);
  font-size: 18px;
  line-height: 26px;
}

.tl-promo-detail__content > * + * {
  margin-top: 14px;
}

.tl-promo-detail__content h2,
.tl-promo-detail__content h3,
.tl-promo-detail__content h4,
.tl-promo-detail__heading {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-weight: 400;
  text-transform: uppercase;
  scroll-margin-top: 120px;
}

.tl-promo-detail__content h2,
.tl-promo-detail__heading {
  font-size: 28px;
  line-height: 32px;
}

.tl-promo-detail__content h3 {
  font-size: 24px;
  line-height: 28px;
}

.tl-promo-detail__content h4 {
  font-size: 20px;
  line-height: 24px;
}

.tl-promo-detail__content ul,
.tl-promo-detail__content ol {
  padding-left: 22px;
  list-style: disc;
}

.tl-promo-detail__content ol {
  list-style: decimal;
}

.tl-promo-detail__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tl-r-md);
}

.tl-promo-detail__meta {
  display: grid;
  gap: 28px;
  margin-top: 40px;
  padding: 28px 30px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-lg);
  background: var(--tl-pink);
  color: #c74127;
}

.tl-promo-detail__time {
  margin-top: 8px;
  font-weight: 600;
}

/* Conditions and places come as the shared promotion markup (PromotionsData::metaHtml): restyled in the Tian Long colours. */
.tl-promo-detail__meta-content .tianlong-promo-meta-entry + .tianlong-promo-meta-entry {
  margin-top: 24px;
}

.tl-promo-detail__meta-content .tianlong-promo-meta-label {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: 28px;
  line-height: 32px;
  text-transform: uppercase;
}

.tl-promo-detail__meta-content .tianlong-promo-meta-body {
  margin-top: 10px;
  color: var(--tl-brown);
  line-height: 24px;
}

.tl-promo-detail__meta-content ul,
.tl-promo-detail__meta-content ol {
  display: grid;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.tl-promo-detail__meta-content .tianlong-promo-meta-entry--condition li {
  position: relative;
  padding-left: 18px;
}

.tl-promo-detail__meta-content .tianlong-promo-meta-entry--condition li::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tl-orange);
  transform: rotate(45deg);
}

.tl-promo-detail__meta-content .tianlong-footer-branch-option-row {
  display: block;
  font-weight: 600;
}

.tl-promo-detail__meta-content .tianlong-footer-branch-option-icon,
.tl-promo-detail__meta-content .tianlong-footer-branch-option-address-icon {
  display: none;
}

.tl-promo-detail__meta-content .tianlong-footer-branch-option-address {
  display: block;
  color: #c74127;
  text-decoration: none;
}

.tl-promo-detail__meta-content a.tianlong-footer-branch-option-address:hover {
  text-decoration: underline;
}

.tl-promo-detail__related {
  margin-top: 80px;
}

.tl-promo-detail__related-title {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: 48px;
  font-weight: 400;
  line-height: 52px;
  text-transform: uppercase;
}

.tl-promo-detail__related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.tl-promo-detail__related-card {
  display: grid;
  gap: 8px;
  color: var(--tl-brown);
  text-decoration: none;
}

.tl-promo-detail__related-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tl-r-lg);
  box-shadow: 0 12px 28px rgba(36, 25, 21, 0.16);
  transition: transform 0.25s ease;
}

.tl-promo-detail__related-card:hover img {
  transform: translateY(-4px);
}

.tl-promo-detail__related-name {
  font-weight: 600;
}

.tl-promo-detail__related-time {
  color: var(--tl-text-muted);
  font-size: 14px;
}

@media (max-width: 900px) {
  .tl-promo-detail {
    padding: 28px 0 64px;
  }

  .tl-promo-detail__main {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .tl-promo-detail__side {
    position: static;
  }

  .tl-promo-detail__cover {
    max-width: 420px;
  }

  .tl-promo-detail__related-title {
    font-size: 36px;
    line-height: 40px;
  }

  .tl-promo-detail__related-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .tl-promo-detail__related-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------------------------------------------ 404 page */

.tl-404 {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;
  background: var(--tl-404-image) center / cover no-repeat, var(--tl-dark);
  color: var(--tl-cream);
}

.tl-404::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(58, 15, 11, 0.94) 0%, rgba(126, 26, 23, 0.84) 52%, rgba(20, 14, 8, 0.6) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 46%, rgba(58, 15, 11, 0.8) 100%);
}

.tl-404::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 38%;
  background: var(--tl-404-pattern) center bottom / auto 100% repeat-x;
  opacity: 0.22;
}

.tl-404__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 64px;
  width: min(1180px, calc(100% - 80px));
  margin-inline: auto;
}

.tl-404__code {
  margin: 0;
  color: var(--tl-gold);
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: clamp(110px, 18vw, 220px);
  line-height: 0.9;
}

.tl-404__title {
  margin: 12px 0 0;
  font-family: var(--tl-display);
  letter-spacing: 0;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}

.tl-404__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.tl-404__text {
  max-width: 560px;
  margin: 20px 0 0;
  font-size: 18px;
  line-height: 26px;
}

.tl-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.tl-404__actions .tl-btn {
  min-height: 48px;
  padding: 0 28px;
  font-weight: 600;
}

.tl-404__ghost {
  border: 1px solid rgba(255, 244, 227, 0.7);
  background: transparent;
  color: var(--tl-cream);
}

.tl-404__ghost:hover {
  background: rgba(255, 244, 227, 0.14);
}

.tl-404__routes {
  display: grid;
  gap: 12px;
}

.tl-404__routes-title {
  margin: 0 0 4px;
  color: #ffd9a0;
  font-weight: 600;
  text-transform: uppercase;
}

.tl-404__route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 244, 227, 0.3);
  border-radius: var(--tl-r-lg);
  background: rgba(255, 244, 227, 0.08);
  color: var(--tl-cream);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.tl-404__route:hover {
  border-color: #ffd9a0;
  background: rgba(255, 244, 227, 0.16);
  transform: translateY(-2px);
}

.tl-404__route-copy {
  display: grid;
  gap: 2px;
}

.tl-404__route-copy b {
  font-size: 18px;
  line-height: 24px;
}

.tl-404__route-copy small {
  color: #ffd9a0;
  font-size: 14px;
  line-height: 20px;
}

@media (max-width: 900px) {
  .tl-404 {
    padding-top: 130px;
  }

  .tl-404__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    width: calc(100% - 40px);
  }
}

/* ------------------------------------------------------------------ Header */

.tl-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 90px;
  padding: 8px 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}

.tl-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -40px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20, 12, 8, 0.46), rgba(20, 12, 8, 0));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.tianlong-page-scrolled .tl-header {
  height: 90px;
  background: var(--tl-orange);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.tianlong-page-scrolled .tl-header::before {
  opacity: 0;
}

/* Three columns of equal outer width: the logo is always in the middle of the screen. */
.tl-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(1180px, calc(100% - 80px));
  height: 74px;
  margin-inline: auto;
}

.tl-header__nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-header__nav a {
  position: relative;
  color: var(--tl-cream);
  font-size: 16px;
  font-weight: 600;
  line-height: 23px;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tl-header__nav a:hover,
.tl-header__nav a[aria-current='page'] {
  color: #ffd9a0;
}

.tl-header__logo {
  display: block;
  width: 68px;
  margin-top: 0;
}

.tl-header__logo img {
  display: block;
  width: 56px;
  height: auto;
  margin-inline: auto; /* stays on the centre line of the 68 px link when it shrinks on scroll */
  transition: width 0.3s ease;
}

.tianlong-page-scrolled .tl-header__logo img {
  width: 54px;
}

.tl-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.tl-header__region {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font-family: var(--tl-body);
  font-size: 16px;
  line-height: 23px;
  white-space: nowrap;
}

.tl-header__region-sep {
  width: 1px;
  height: 21px;
  background: #fff;
}

.tl-header__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tl-header__lang img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.tl-btn--header {
  padding: 0 16px 2px;
  background: var(--tl-header-red);
  color: var(--tl-cream);
  text-transform: capitalize; /* "Đặt Bàn" */
}

/* Desktop and tablets: the booking button of the menu row is the phone one. */
.tl-header__nav-row {
  position: relative;
  min-width: 0;
}

.tl-header__nav-book,
.tl-header__scroll {
  display: none;
}

/* Tablets keep the desktop header, a little tighter. */
@media (max-width: 1199px) {
  .tl-header__inner {
    width: calc(100% - 48px);
  }

  .tl-header__nav ul {
    gap: 22px;
  }

  .tl-header__nav a {
    font-size: 14px;
  }


  .tl-header__actions {
    gap: 12px;
  }

  .tl-header__region {
    gap: 10px;
    font-size: 14px;
  }

  .tl-header__logo img {
    width: 50px;
  }
}

/* Small tablets (768 – 899 px): the same header, tighter still, so the menu stays clear of the logo. */
@media (min-width: 768px) and (max-width: 899px) {
  .tl-header__inner {
    width: calc(100% - 32px);
  }

  .tl-header__nav ul {
    gap: 16px;
  }

  .tl-header__nav a {
    font-size: 13px;
  }


  .tl-header__actions {
    gap: 10px;
  }

  .tl-header__region {
    gap: 8px;
    font-size: 13px;
  }

  .tl-header__actions .tl-btn--header {
    height: 36px;
    padding: 0 12px 2px;
    font-size: 14px;
  }

  .tl-header__logo img {
    width: 46px;
  }
}

/* Phones: the Tian Long mobile header — logo and area on the first row; "Đặt bàn" and the menu on one row that scrolls
   sideways (round arrows from header-scroll.js). */
@media (max-width: 767px) {
  .tl-header,
  .tianlong-page-scrolled .tl-header {
    height: auto;
    padding: 16px 0 12px;
    border-bottom: 1px solid rgba(255, 244, 227, 0.55);
  }

  .tl-header__inner {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 56px auto;
    column-gap: 14px;
    row-gap: 14px;
    width: calc(100% - 32px);
    height: auto;
  }

  .tl-header__logo {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
    margin-top: 0;
  }

  .tl-header__logo,
  .tl-header__logo img,
  .tianlong-page-scrolled .tl-header__logo img {
    width: 50px;
  }

  .tl-header__actions {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: end;
    min-width: 0;
  }

  .tl-header__actions .tl-btn--header {
    display: none;
  }

  /* The area name shortens (…) before it reaches the logo. */
  .tl-header__region {
    max-width: calc(100vw - 110px);
    margin-top: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    gap: 6px;
    font-size: 15px;
  }

  .tl-header__region > [data-tianlong-selected-branch-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tl-header__region-sep {
    height: 12px;
  }

  .tl-header__nav-row {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tl-header__nav {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .tl-header__nav::-webkit-scrollbar {
    display: none;
  }

  /* Baseline row: the label of "Đặt bàn" and the menu items sit on one line. */
  .tl-header__nav ul {
    align-items: baseline;
    gap: 18px;
    padding-right: 8px;
  }

  .tl-header__nav-book {
    display: block;
    margin-right: -2px;
  }

  /* Phones: "Đặt Bàn" capitalised like the menu, the menu's 15 px, a short pill (30 px). SVN-Helves capitals sit 1.6 px
     below the middle of their line: 3 px more at the bottom centres the label in the pill, and the pill on the menu text
     (the row aligns on the baseline). */
  .tl-header__nav-book .tl-btn--header {
    height: 30px;
    padding: 0 12px 3px;
    font-size: 15px;
    line-height: 20px;
  }

  /* Phones keep their own menu style; capitals and weight 600 are for desktop and tablets. */
  .tl-header__nav a {
    font-size: 15px;
    font-weight: 400;
    line-height: 20px;
    text-transform: capitalize;
  }


  .tl-header__scroll {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--tl-cream);
    box-shadow: 0 4px 10px rgba(36, 25, 21, 0.28);
    color: var(--tl-red);
    cursor: pointer;
    transform: translateY(-50%);
  }

  .tl-header__scroll .tl-icon {
    width: 16px;
    height: 16px;
  }

  .tl-header__scroll--left {
    left: -6px;
  }

  .tl-header__scroll--right {
    right: -6px;
  }

  .tl-header__scroll.tianlong-is-hidden {
    display: none;
  }
}

/* ------------------------------------------------------------------ Footer: Tian Long structure, Tian Long skin */

.tl-site-footer .tianlong-footer-contact-section {
  background: var(--tl-orange);
  color: var(--tl-cream);
}

.tl-site-footer .tianlong-footer-contact-col,
.tl-site-footer .tianlong-footer-contact-title,
.tl-site-footer .tianlong-footer-company h3,
.tl-site-footer .tianlong-footer-company p,
.tl-site-footer .tianlong-footer-app p,
.tl-site-footer .tianlong-footer-hotline-card,
.tl-site-footer .tianlong-footer-bottom-nav a {
  color: var(--tl-cream);
  font-family: var(--tl-body);
  letter-spacing: -0.18px;
}

.tl-site-footer .tianlong-footer-contact-title,
.tl-site-footer .tianlong-footer-app p strong {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: none;
}

.tl-site-footer .tianlong-footer-company h3 {
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
}

.tl-site-footer .tianlong-footer-contact-socials a {
  border: 1px solid var(--tl-cream);
  background: transparent;
}

.tl-site-footer .tianlong-footer-contact-socials a:hover,
.tl-site-footer .tianlong-footer-contact-socials a:focus-visible {
  background: rgba(255, 244, 227, 0.2);
}

.tl-site-footer .tianlong-footer-hotline-card a:hover,
.tl-site-footer .tianlong-footer-bottom-nav a:hover,
.tl-site-footer .tianlong-footer-bottom-nav a:focus-visible {
  color: var(--tl-pink);
}

.tl-site-footer .tianlong-footer-company-divider {
  border-top-color: rgba(255, 244, 227, 0.5);
}

.tl-site-footer .tianlong-footer-bottom {
  border-top-color: rgba(255, 244, 227, 0.6);
}

/*
 * Watermark laid out as on longwang.vn: under the last links (not behind them), as wide as the footer, its foot near the
 * bottom edge. Here it sits in the flow after the content (order 1), so the footer grows with it and the links never
 * cover it, even when they wrap on phones. Spacing in em follows the font (Swiss 721 Black Condensed, line-height 1):
 * the accents (Ă, Ư, Ố…) rise 0.27em above the line box and the baseline sits 0.22em above its foot, so
 *   margin-top    = -(section gap 28px) - (bottom padding of the links) + 6px clearance + 0.27em
 *   margin-bottom = gap wanted under the letters - 0.22em
 * The section keeps only the safe area of the iPhone home bar below.
 */
.tl-site-footer .tianlong-footer-contact-section {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.tl-site-footer .tianlong-footer-watermark {
  position: relative;
  bottom: auto;
  left: auto;
  z-index: 0;
  order: 1;
  flex: none;
  width: 100%;
  max-width: none;
  margin: calc(-46px + 0.27em) 0 calc(8px - 0.22em);
  padding: 0;
  transform: none;
  color: rgba(255, 244, 227, 0.14);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  line-height: 1;
  text-transform: uppercase;
}

/* The English line is longer than the Vietnamese one: smaller on narrow screens so it stays inside the footer. */
.tl-site-footer .tianlong-footer-watermark--en {
  font-size: min(115px, 9.4vw);
}

@media (max-width: 1024px) {
  .tl-site-footer .tianlong-footer-watermark {
    margin-bottom: calc(14px - 0.22em);
  }
}

@media (max-width: 767px) {
  /* The links keep 12px under them on phones (18px 0 12px). */
  .tl-site-footer .tianlong-footer-watermark {
    margin-top: calc(-34px + 0.27em);
    margin-bottom: calc(12px - 0.22em);
  }

  /* longwang.vn hides the app block on phones; Tian Long keeps it. */
  .tl-site-footer .tianlong-footer-contact-col.tianlong-footer-contact-col--app.tianlong-footer-app {
    display: flex;
  }
}

/* ------------------------------------------------------------------ Thực đơn page (Figma "Menu Desktop") */

.tl-menupage {
  position: relative;
  padding-bottom: 96px;
}

/* Groups bar: orange, under the fixed header, one line that scrolls sideways; the current group wears the white brush. */
.tl-menubar {
  position: sticky;
  top: var(--tl-header-h, 90px);
  z-index: 20;
  background: var(--tl-orange);
}

.tl-menubar__tabs {
  display: flex;
  align-items: center;
  gap: 21px;
  height: 62px;
  padding: 0 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tl-menubar__tabs::-webkit-scrollbar {
  display: none;
}

.tl-menubar__tab {
  position: relative;
  flex: none;
  padding: 0 4px;
  color: #e98b1b;
  font-size: 18px;
  line-height: 22px;
  text-decoration: none;
  /* As entered in the admin (Thực đơn → nhóm món). */
  text-transform: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.tl-menubar__tab::before {
  content: '';
  position: absolute;
  inset: -16px -18px -20px -12px;
  background: url('../images/brush-red.webp') 0 0 / 100% 100% no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tl-menubar__tab span {
  position: relative;
}

.tl-menubar__tab:hover,
.tl-menubar__tab:focus-visible,
.tl-menubar__tab.is-active {
  color: #fff;
}

.tl-menubar__tab.is-active::before {
  opacity: 1;
  transform: none;
}

/* "Tạm ẩn thực đơn" for the area: the groups bar goes with the pages, only the notice stays. */
.tl-menupage.is-menu-temporarily-hidden .tl-menubar,
.tl-menupage.is-menu-temporarily-hidden .tl-decor {
  display: none;
}

.tl-menupage__groups {
  position: relative;
  z-index: 1;
}

.tl-menupage__empty {
  padding-top: 64px;
}

.tl-menucat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 55px;
}

.tl-menucat + .tl-menucat {
  padding-top: 70px;
}

.tl-menucat__title {
  /* Chamfered corners: --tl-menucat-cut is the size of the cut. */
  --tl-menucat-cut: 8px;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 24px 0px;
  border-radius: 6px;
  background: var(--tl-red);
  color: var(--tl-cream);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  clip-path: polygon(var(--tl-menucat-cut) 0, calc(100% - var(--tl-menucat-cut)) 0, 100% var(--tl-menucat-cut), 100% calc(100% - var(--tl-menucat-cut)), calc(100% - var(--tl-menucat-cut)) 100%, var(--tl-menucat-cut) 100%, 0 calc(100% - var(--tl-menucat-cut)), 0 var(--tl-menucat-cut));
}

.tl-menucat__viewer {
  position: relative;
  width: 100%;
  margin-top: 32px;
}

/* A spread per slide: two pages side by side, the rail snaps on every first page. */
.tl-menucat__pages {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: #241915;
  box-shadow: 0 26px 52px rgba(60, 20, 10, 0.18);
}

.tl-menucat__pages::-webkit-scrollbar {
  display: none;
}

.tl-menucat__page {
  flex: 0 0 50%;
  aspect-ratio: calc(1 / var(--tl-menu-ratio, 1.4136));
  padding: 0;
  border: 0;
  background: #241915;
  cursor: zoom-in;
  scroll-snap-align: none;
}

.tl-menucat__page:nth-child(2n + 1) {
  scroll-snap-align: start;
}

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

.tl-menucat__nav {
  border-color: var(--tl-red);
  background: #fff8f0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.tl-menucat__nav:hover {
  background: var(--tl-cream);
  box-shadow: 0 4px 12px rgba(36, 25, 21, 0.16);
}

.tl-menucat__nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.tl-menucat__nav.tl-arrow--prev {
  left: -64px;
}

.tl-menucat__nav.tl-arrow--next {
  right: -64px;
}

.tl-menucat .tl-dots {
  margin-top: 18px;
}

.tl-decor--menupage-left {
  top: 300px;
  left: min(-180px, calc(50% - 720px - 180px));
  width: 560px;
  height: 612px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
  opacity: 0.5;
}

.tl-decor--menupage-right {
  top: 1500px;
  right: min(-220px, calc(50% - 720px - 220px));
  width: 640px;
  height: 700px;
  background-image: url('../images/textchina.png');
  background-size: 100% 100%;
  opacity: 0.5;
  transform: scaleX(-1);
}

/* ------------------------------------------------------------------ Điều khoản chung / Chính sách bảo mật */

.tl-legal {
  padding: 72px 0 96px;
}

.tl-legal__layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.tl-legal__layout--article-only {
  grid-template-columns: minmax(0, 860px);
  justify-content: center;
}

/* Table of contents: the pink card of the Tian Long pages, kept in view under the header. */
.tl-legal__toc {
  position: sticky;
  top: 120px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  padding: 24px 22px;
  border: 1px solid var(--tl-line);
  border-radius: var(--tl-r-lg);
  background: var(--tl-pink);
  color: #c74127;
  scrollbar-color: #e9b9a6 transparent;
  scrollbar-width: thin;
}

.tl-legal__toc-title,
.tl-legal__toc-mobile summary {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-size: 22px;
  line-height: 26px;
  text-transform: uppercase;
}

.tl-legal__toc ol,
.tl-legal__toc-mobile ol {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tl-legal;
}

.tl-legal__toc li,
.tl-legal__toc-mobile li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 21px;
}

.tl-legal__toc li::before,
.tl-legal__toc-mobile li::before {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--tl-orange);
  transform: rotate(45deg);
}

.tl-legal__toc a,
.tl-legal__toc-mobile a {
  color: inherit;
  text-decoration: none;
}

.tl-legal__toc a:hover,
.tl-legal__toc-mobile a:hover {
  color: var(--tl-orange);
  text-decoration: underline;
}

.tl-legal__toc-mobile {
  display: none;
}

/* Content of the CMS: Tian Long type (display titles in orange, body in brown). */
.tl-legal__content {
  color: var(--tl-brown);
  font-size: 18px;
  line-height: 27px;
  text-align: justify;
}

.tl-legal__content > * + * {
  margin-top: 16px;
}

.tl-legal__content h2,
.tl-legal__content h3,
.tl-legal__content h4 {
  color: var(--tl-orange);
  font-family: var(--tl-display);
  letter-spacing: -0.75px;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  scroll-margin-top: 120px;
}

.tl-legal__content h2 {
  margin-top: 44px;
  font-size: 30px;
  line-height: 34px;
}

.tl-legal__content h2:first-child {
  margin-top: 0;
}

.tl-legal__content h3 {
  margin-top: 28px;
  font-size: 24px;
  line-height: 28px;
}

.tl-legal__content h4 {
  margin-top: 22px;
  font-size: 20px;
  line-height: 24px;
}

.tl-legal__content ul,
.tl-legal__content ol {
  display: grid;
  gap: 8px;
  padding-left: 22px;
}

.tl-legal__content ul {
  list-style: disc;
}

.tl-legal__content ol {
  list-style: decimal;
}

.tl-legal__content li::marker {
  color: var(--tl-orange);
}

.tl-legal__content a {
  color: var(--tl-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tl-legal__content strong,
.tl-legal__content b {
  font-weight: 600;
}

.tl-legal__content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 22px;
}

.tl-legal__content th,
.tl-legal__content td {
  padding: 10px 12px;
  border: 1px solid var(--tl-line);
  text-align: left;
}

.tl-legal__content th {
  background: var(--tl-pink);
  color: #c74127;
}

.tl-legal__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--tl-r-md);
}

/* ------------------------------------------------------------------ Animation on scroll (initAos in tianlong-home.js) */
.tl-aos {
  opacity: 0;
  translate: 0 32px;
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) var(--tl-aos-delay, 0ms), translate 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) var(--tl-aos-delay, 0ms);
}

.tl-aos.is-in {
  opacity: 1;
  translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .tl-aos {
    opacity: 1;
    translate: none;
    transition: none;
  }
}