/*
 * Tian Long — tablets (≤ 1199 px) and phones (≤ 767 px). Desktop stays the fixed 1440 design of tianlong-home.css; under
 * 1200 px the sections go back to the flow, and rows of cards become swipe rails (scroll-snap, quatrefoil dots: initRail
 * in tianlong-home.js), as on Tian Long. Phone sizes are the Figma "mobile" frames (390 px).
 */

@media (max-width: 1199px) {
  :root {
    --tl-gutter: 32px;
  }

  .tl-container {
    width: calc(100% - 2 * var(--tl-gutter));
  }

  .tl-decor {
    display: none;
  }

  /* ---------------------------------------------------------------- rails */
  .tl-arches,
  .tl-tiers,
  .tl-promos__stage {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * var(--tl-gutter));
    padding-inline: var(--tl-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--tl-gutter);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tl-arches::-webkit-scrollbar,
  .tl-tiers::-webkit-scrollbar,
  .tl-promos__stage::-webkit-scrollbar {
    display: none;
  }

  .tl-arch,
  .tl-tier,
  .tl-promo {
    flex: none;
    scroll-snap-align: start;
  }

  .tl-rail-dots {
    margin-top: 24px;
  }

  /* ---------------------------------------------------------------- section titles */
  .tl-section-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .tl-section-title {
    --tl-bullet-size: 22px;
    --tl-bullet-gap: 12px;
    font-size: 48px;
    line-height: 1.1;
  }

  /* ---------------------------------------------------------------- hero */
  /* Tablets: full width, height from the photo's own ratio (hero.webp 2400 × 1500), so the whole photo shows and the
     people are not zoomed in or cut. The copy keeps the design's place: its foot 177 / 900 of the hero up from the bottom. */
  .tl-hero {
    height: auto;
    aspect-ratio: 2400 / 1500;
    background-position: 0 0, center top, 0 0;
    background-size: auto, 100% auto, auto;
  }

  .tl-hero__copy {
    top: auto;
    bottom: calc(100% * 177 / 900);
    width: calc(100% - 2 * var(--tl-gutter));
    max-width: 600px;
  }

  .tl-hero__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .tl-marquee {
    height: 52px;
  }

  .tl-marquee__group li {
    font-size: 22px;
    line-height: 24px;
  }

  /* ---------------------------------------------------------------- intro + arches */
  .tl-intro {
    padding: 64px 0 48px;
  }

  .tl-intro__frame--left {
    top: 96px;
    left: 12px;
    width: 40px;
    height: auto;
  }

  .tl-intro__frame--right {
    top: 40px;
    right: 12px;
    width: 38px;
    height: auto;
  }

  .tl-intro__head {
    padding-inline: 32px;
  }

  .tl-intro__title {
    font-size: 48px;
    line-height: 1.1;
  }

  .tl-intro__subtitle {
    margin-top: 12px;
    font-size: 34px;
    line-height: 1.1;
  }

  .tl-ornament {
    margin-top: 24px;
  }

  .tl-intro__text {
    width: auto;
    max-width: 640px;
    margin-top: 24px;
    font-size: 16px;
    line-height: 22px;
  }

  .tl-arches {
    justify-content: flex-start;
    margin-top: 48px;
  }

  /* ---------------------------------------------------------------- Bò tươi mỗi ngày */
  .tl-fresh {
    height: auto;
  }

  /* Below 1200 px the band is a plain polygon of the section (the vector strip of the desktop is not used): red + the texture. */
  .tl-fresh__band {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: url('../images/fresh-texture.png') 0 0 / 196px 196px repeat, var(--tl-fresh-band);
    clip-path: polygon(0 0, 100% 40px, 100% calc(100% - 40px), 0 100%);
  }

  .tl-fresh__vector {
    display: none;
  }

  .tl-fresh__inner {
    width: auto;
    height: auto;
    margin-left: 0;
    padding: 96px var(--tl-gutter) 112px;
  }

  .tl-fresh__copy {
    position: static;
    width: auto;
    max-width: 640px;
  }

  .tl-fresh__title {
    font-size: 56px;
    line-height: 1.05;
  }

  .tl-fresh__title span {
    display: inline;
  }

  .tl-fresh__cow {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 720px);
    margin: 40px auto 0;
  }

  /* ---------------------------------------------------------------- menu book (homepage) */
  .tl-menu {
    padding-top: 72px;
  }

  .tl-menu .tl-section-head {
    align-items: center;
    text-align: center;
  }

  .tl-menu .tl-section-title {
    justify-content: center;
    margin-top: 0;
  }

  .tl-menu__subtitle {
    margin: 8px 0 0;
    font-size: 20px;
    line-height: 1.3;
  }

  .tl-menu .tl-section-head .tl-btn {
    display: none;
  }

  .tl-menu__more {
    display: flex;
    width: fit-content;
    margin: 24px auto 0;
  }

  /* The book's buttons: a centred row under the book, above "Hẹn nhau bữa sành" (Tian Long mobile). */
  .tl-book__tools {
    position: static;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
  }

  .tl-book__tools .tl-book__zoom {
    width: 44px;
    height: 44px;
    box-shadow: 0 6px 16px rgba(36, 25, 21, 0.14);
  }

  .tl-menu__tabs-wrap {
    margin-top: 16px;
  }

  .tl-menu__tabs {
    justify-content: flex-start;
    gap: 28px;
  }

  .tl-menu__tabs-wrap .tl-menu__tabs-nav {
    display: none;
  }

  .tl-menu__tabs-wrap.can-scroll-left .tl-menu__tabs,
  .tl-menu__tabs-wrap.can-scroll-right .tl-menu__tabs {
    --tl-hide-l: 0px;
    --tl-hide-r: 0px;
    --tl-fade-l: 32px;
    --tl-fade-r: 32px;
  }

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

  /* ---------------------------------------------------------------- booking band */
  .tl-cta {
    height: auto;
    min-height: 340px;
    margin-top: 80px;
    padding: 96px var(--tl-gutter) 80px;
  }

  .tl-cta__title {
    width: auto;
    max-width: 640px;
    font-size: 40px;
    line-height: 1.12;
  }

  /* ---------------------------------------------------------------- promotions */
  .tl-promos {
    padding-block: 64px;
  }

  .tl-promos .tl-section-head .tl-btn,
  .tl-promos .tl-arrow,
  .tl-promos [data-tl-promos-dots] {
    display: none;
  }

  .tl-promos__panel {
    height: auto;
    margin-top: 32px;
    clip-path: none;
  }

  .tl-promos__stage {
    position: relative;
    inset: auto;
  }

  .tl-promo,
  .tl-promo[data-pos] {
    position: relative;
    top: auto;
    left: auto;
    width: calc((100% - 2 * var(--tl-gutter) - 32px) / 2.4);
    opacity: 1;
    pointer-events: auto;
  }

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

  .tl-promos__empty {
    position: static;
    padding: 48px 0;
  }

  .tl-promos__more {
    display: flex;
    width: fit-content;
    margin: 24px auto 0;
  }

  .tl-promos--page {
    padding-top: 56px;
  }

  .tl-promos--page .tl-promos__panel {
    margin-top: 0;
  }

  /* ---------------------------------------------------------------- member cards */
  .tl-member {
    height: auto;
    padding: 72px 0 64px;
  }

  .tl-member__layout {
    width: calc(100% - 2 * var(--tl-gutter));
    height: auto;
  }

  .tl-member__copy {
    position: static;
    width: auto;
    max-width: 640px;
  }

  .tl-member__kicker {
    font-size: 36px;
    line-height: 1.1;
  }

  .tl-member__title {
    margin-top: 8px;
    font-size: 52px;
    line-height: 1.1;
  }

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

  /* The cards keep their own drawing; the rail shows them smaller (Platinum first, as in the mobile design). */
  .tl-tiers {
    position: relative;
    inset: auto;
    align-items: flex-end;
    margin-top: 32px;
    margin-bottom: 0;
    padding-block: 4px;
    list-style: none;
  }

  .tl-tier,
  .tl-tier--silver,
  .tl-tier--gold,
  .tl-tier--platinum {
    position: relative;
    top: auto;
    left: auto;
    zoom: 0.8;
  }

  .tl-tier--platinum {
    order: -1;
  }

  .tl-member--page {
    padding-bottom: 64px;
  }

  .tl-member--page .tl-member__layout {
    height: auto;
  }

  .tl-member--page .tl-member__copy {
    top: auto;
  }

  .tl-terms {
    margin-top: 48px;
  }

  /* ---------------------------------------------------------------- restaurants */
  .tl-stores__top {
    height: calc(100vw * 294 / 1437);
  }

  .tl-stores__plate {
    height: 130px;
    margin-top: -130px;
  }

  /* Plate drawn at 1070 px: the side bands follow from --tl-plate-w (tianlong-home.css). */
  .tl-stores__plate {
    --tl-plate-w: 1070px;
  }

  .tl-stores__head {
    top: 66px;
  }

  .tl-stores__title {
    font-size: 36px;
    line-height: 1.1;
  }

  .tl-stores__stage {
    display: flex;
    flex-direction: column-reverse;
    gap: 20px;
    width: calc(100% - 2 * var(--tl-gutter));
    height: auto;
    margin: 40px auto 0;
  }

  .tl-gallery {
    height: auto;
    aspect-ratio: 16 / 7;
    border-radius: 16px;
  }

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

  .tl-locator {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* ---------------------------------------------------------------- inner page banner */
  .tl-pagehero {
    height: 520px;
  }

  .tl-pagehero__inner {
    top: auto;
    bottom: 64px;
    padding-inline: var(--tl-gutter);
  }

  .tl-pagehero__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .tl-pagehero__eyebrow {
    font-size: 26px;
    line-height: 1.1;
  }

  .tl-menu--page {
    padding-top: 0;
  }
}

/* Desktop only extras (rail dots, buttons moved under the rows) stay hidden from 1200 px. */
@media (min-width: 1200px) {
  .tl-rail-dots,
  .tl-menu__more,
  .tl-promos__more {
    display: none;
  }
}

/*
 * Phones: one type scale, matched to the original website on a 390 px screen —
 *   section titles 32 px · second display line (subtitle, kicker, booking band) 24 px · paragraphs 15 / 21 px ·
 *   card text 13 / 17 px · buttons 15 px, 36 px high · header menu and booking button 15 px.
 */
@media (max-width: 767px) {
  :root {
    --tl-gutter: 20px;
  }

  /* ---------------------------------------------------------------- buttons */
  .tl-btn {
    height: 36px;
    padding: 0 14px 2px;
    font-size: 15px;
  }

  /* ---------------------------------------------------------------- titles */
  .tl-section-title {
    --tl-bullet-size: 20px;
    --tl-bullet-gap: 10px;
    font-size: 32px;
    line-height: 1.15;
  }

  /* ---------------------------------------------------------------- hero */
  /* Phones: their own portrait photo (hero-mobile.webp, 1410 × 2000) covering a fixed 552 px, with no shade over it. The
     faces sit at about y 320 – 370, so the copy goes under them, over the table, 20 px above the marquee band (42 px). */
  .tl-hero {
    aspect-ratio: auto;
    height: 552px;
    background-image: var(--tl-hero-image-mobile, var(--tl-hero-image));
    background-position: center;
    background-size: cover;
  }

  .tl-hero__copy {
    bottom: calc(42px + 20px);
  }

  .tl-hero__title {
    font-size: 32px;
  }

  .tl-hero__text {
    max-width: 330px;
    margin: 12px auto 0;
    font-size: 15px;
    line-height: 21px;
  }

  .tl-marquee {
    height: 42px;
  }

  .tl-marquee__group li {
    font-size: 18px;
    line-height: 20px;
  }

  /* ---------------------------------------------------------------- intro + arches */
  .tl-intro {
    padding: 40px 0 32px;
  }

  .tl-intro__frame--left {
    top: 80px;
    width: 24px;
  }

  .tl-intro__frame--right {
    top: 26px;
    width: 23px;
  }

  .tl-intro__head {
    padding-inline: 16px;
  }

  .tl-intro__title {
    font-size: 32px;
  }

  .tl-intro__subtitle {
    margin-top: 12px;
    font-size: 24px;
  }

  .tl-ornament img {
    width: 200px;
    height: auto;
  }

  .tl-intro__text {
    margin-top: 20px;
    font-size: 15px;
    line-height: 21px;
  }

  /* Two arches per view and one swipe moves two: only every other arch is a snap point, so the rail (initRail) shows one
     dot per pair. */
  .tl-arches {
    gap: 12px;
    margin-top: 32px;
  }

  .tl-arch {
    width: calc((100% - 12px) / 2);
    height: auto;
    aspect-ratio: 276 / 380;
    background-size: calc(100% + 2px) 100%;
    scroll-snap-stop: always;
  }

  .tl-arch:nth-child(2n) {
    scroll-snap-align: none;
  }

  .tl-arch__icon {
    top: 19%;
    width: 36px;
  }

  .tl-arch__title {
    top: 36%;
    font-size: 15px;
    line-height: 18px;
  }

  .tl-arch__text {
    right: 10px;
    bottom: 10px;
    left: 10px;
    font-size: 13px;
    line-height: 17px;
  }

  /* ---------------------------------------------------------------- Bò tươi mỗi ngày */
  .tl-fresh__band {
    clip-path: polygon(0 0, 100% 29px, 100% calc(100% - 30px), 0 100%);
  }

  .tl-fresh__inner {
    padding: 56px var(--tl-gutter) 64px;
  }

  .tl-fresh__title {
    font-size: 32px;
  }

  .tl-ornament--light {
    margin-top: 14px;
  }

  .tl-fresh__text {
    margin-top: 16px;
    font-size: 15px;
    line-height: 21px;
  }

  .tl-fresh__cow {
    margin-top: 32px;
  }

  /* ---------------------------------------------------------------- menu book */
  .tl-menu {
    padding-top: 56px;
  }

  .tl-menu__subtitle {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 15px;
  }

  .tl-menu__tabs {
    gap: 24px;
  }

  .tl-menu__tab {
    font-size: 15px;
    line-height: 19px;
  }

  .tl-book .tl-arrow {
    width: 36px;
    height: 36px;
  }

  /* As the Tian Long book on phones: no dot row under the book (one dot per page would not fit). */
  .tl-menu [data-tl-menu-dots] {
    display: none;
  }

  /* Phones: no "Hẹn nhau bữa sành" under the book — the gold button of the booking band right below says the same. */
  .tl-menu__more {
    display: none;
  }

  /* ---------------------------------------------------------------- booking band */
  .tl-cta {
    min-height: 260px;
    margin-top: 56px;
    padding: 70px var(--tl-gutter) 48px;
  }

  .tl-cta__title {
    max-width: 340px;
    font-size: 24px;
  }

  .tl-cta__title span,
  .tl-hero__text span {
    display: inline;
  }

  .tl-cta__title span + span::before,
  .tl-hero__text span + span::before {
    content: ' ';
  }

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

  /* ---------------------------------------------------------------- promotions */
  .tl-promos {
    padding-block: 48px 56px;
  }

  .tl-promos__panel {
    margin-top: 24px;
  }

  /* Phones: "Xem thêm" sits under the title (the heading's own button), not under the cards. */
  .tl-promos .tl-section-head .tl-btn {
    display: inline-flex;
    margin: 16px 0 0;
  }

  .tl-promos__more {
    display: none;
  }

  .tl-promo,
  .tl-promo[data-pos] {
    width: 74%;
  }

  .tl-promo__link {
    --tl-cut: 16px;
  }

  .tl-promo__face--back .tl-promo__face-in {
    padding: 28px 18px 20px;
  }

  .tl-promo__back-title {
    font-size: 24px;
    line-height: 26px;
  }

  .tl-promo__back-content {
    font-size: 13px;
    line-height: 17px;
  }

  /* ---------------------------------------------------------------- member cards */
  .tl-member {
    padding: 56px 0 48px;
  }

  .tl-member__kicker {
    font-size: 24px;
  }

  .tl-member__title {
    margin-top: 6px;
    font-size: 32px;
  }

  .tl-member__text {
    margin-top: 14px;
    font-size: 15px;
    line-height: 21px;
    text-align: left;
  }

  /*
   * Phones: the three cards take the Platinum card's size and layout (drawn at 57.6 %: 253 px wide). The rail centres one card
   * at a time; that card (is-current, set by initRail) is full size, its neighbours step back and peek in at the sides.
   * The small lines get larger sizes so they read at ~11 px on screen (menu note ~10 px) instead of 6 – 8 px.
   */
  .tl-tiers {
    align-items: center;
    gap: 0;
    margin-top: 24px;
    padding-inline: calc((100vw - 252.864px) / 2);
    scroll-padding-inline: 0;
  }

  .tl-tier,
  .tl-tier--silver,
  .tl-tier--gold,
  .tl-tier--platinum {
    --name: 64px;
    --year: 20px;
    --perk-label: 22px;
    --digit: 94px;
    --pct: 45.8px;
    --menu: 18px;
    width: 439px;
    height: 552px;
    border-radius: 56px;
    zoom: 0.576;
    opacity: 0.85;
    scale: 0.84;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: scale 0.35s var(--tl-ease), opacity 0.35s var(--tl-ease);
  }

  .tl-tier.is-current {
    opacity: 1;
    scale: 1;
  }

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

  .tl-tier__name {
    top: 43px;
    right: 33px;
  }

  .tl-tier__spend {
    top: 118px;
    right: 29px;
  }

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

  .tl-terms {
    margin-top: 40px;
    font-size: 15px;
    line-height: 21px;
  }

  /* ---------------------------------------------------------------- restaurants */
  .tl-stores {
    padding-bottom: 48px;
  }

  /* Figma mobile: a 100 px band of the temple pattern, the plate at a third of its size (482 px) on its foot, the small
     line inside the arch and the title under the band. */
  .tl-stores__top {
    height: 100px;
    background-size: auto 100%;
  }

  .tl-stores__plate {
    height: 59px;
    margin-top: -59px;
  }

  .tl-stores__plate {
    --tl-plate-w: 482px;
  }

  .tl-stores__head {
    top: 44px;
  }

  .tl-stores__kicker {
    font-size: 15px;
    line-height: 17px;
  }

  .tl-stores__title {
    margin-top: 22px;
    font-size: 32px;
  }

  .tl-stores__stage {
    gap: 16px;
    margin-top: 85px;
  }

  .tl-gallery {
    aspect-ratio: 350 / 157;
    border-radius: 12px;
  }

  /* Phones: small arrows inside the photo, close to its edges, so a visitor can tap to the next photo (hidden when the
     branch has a single photo). */
  .tl-gallery .tl-arrow {
    width: 32px;
    height: 32px;
  }

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

  .tl-gallery .tl-arrow--prev {
    right: auto;
    left: 8px;
  }

  .tl-gallery .tl-arrow--next {
    right: 8px;
    left: auto;
  }

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

  .tl-locator__areas {
    gap: 18px;
  }

  .tl-locator__actions .tl-btn {
    flex: 1 1 auto;
  }

  /* ---------------------------------------------------------------- inner page banner */
  .tl-pagehero,
  .tl-pagehero--membership {
    height: 437px;
  }

  .tl-pagehero__inner {
    bottom: 56px;
  }

  .tl-pagehero__eyebrow {
    margin-bottom: 4px;
    font-size: 24px;
  }

  .tl-pagehero__title {
    font-size: 32px;
  }

  .tl-promos--page {
    padding-top: 48px;
  }

  /* ---------------------------------------------------------------- footer */
  .tl-site-footer .tianlong-footer-company h3 {
    font-size: 20px;
  }
}

/* ---------------------------------------------------------------- Thực đơn page */
@media (max-width: 1199px) {
  .tl-menupage {
    padding-bottom: 72px;
  }

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

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

@media (max-width: 767px) {
  .tl-menupage {
    padding-bottom: 56px;
  }

  .tl-menubar__tabs {
    gap: 18px;
    height: 58px;
  }

  .tl-menubar__tab {
    font-size: 15px;
    line-height: 19px;
  }

  .tl-menucat {
    padding-top: 42px;
  }

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

  .tl-menucat__title {
    --tl-menucat-cut: 7px;
    height: 42px;
    padding: 0 20px;
    font-size: 24px;
  }

  .tl-menucat__viewer {
    margin-top: 16px;
  }

  /* One page per slide. */
  .tl-menucat__page {
    flex-basis: 100%;
    scroll-snap-align: start;
  }

  .tl-menucat__nav {
    display: none;
  }

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

  .tl-decor--menupage-left,
  .tl-decor--menupage-right {
    display: none;
  }
}

/* ---------------------------------------------------------------- Điều khoản chung / Chính sách bảo mật */
@media (max-width: 1199px) {
  .tl-legal {
    padding: 48px 0 72px;
  }

  .tl-legal__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .tl-legal__toc {
    display: none;
  }

  /* Phones and tablets: the contents fold out above the text. */
  .tl-legal__toc-mobile {
    display: block;
    margin-bottom: 32px;
    padding: 16px 18px;
    border: 1px solid var(--tl-line);
    border-radius: var(--tl-r-md);
    background: var(--tl-pink);
    color: #c74127;
  }

  .tl-legal__toc-mobile summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
  }

  .tl-legal__toc-mobile summary::-webkit-details-marker {
    display: none;
  }

  .tl-legal__toc-mobile summary .tl-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
  }

  .tl-legal__toc-mobile[open] summary .tl-icon {
    transform: rotate(180deg);
  }
}

@media (max-width: 767px) {
  .tl-legal {
    padding: 32px 0 56px;
  }

  .tl-legal__toc-mobile summary {
    font-size: 20px;
    line-height: 24px;
  }

  .tl-legal__content {
    font-size: 15px;
    line-height: 22px;
    text-align: left;
  }

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

  .tl-legal__content h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .tl-legal__content h4 {
    font-size: 18px;
    line-height: 22px;
  }

  .tl-legal__content table {
    display: block;
    overflow-x: auto;
  }
}