/* ── Mobile (≤ 767px): homepage intro photos + readable body text ─────────── */
@media (max-width: 767px) {
  /* Intro "Unveil the Real Vietnam": one wide photo, two small ones below. */
  .tf-vacation-hero .flat-img-with-text .content-left {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    height: auto !important;
  }
  .tf-vacation-hero .flat-img-with-text .inner-left {
    grid-column: 1 / -1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    margin: 0 !important;
    border-radius: 16px;
  }
  .tf-vacation-hero .flat-img-with-text .inner-left .swiper-slide,
  .tf-vacation-hero .flat-img-with-text .inner-left .hero-slide-item { height: 100% !important; }
  .tf-vacation-hero .flat-img-with-text .inner-left .hero-slide-item__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 16px;
  }
  .tf-vacation-hero .flat-img-with-text .inner-right { display: contents !important; }
  .tf-vacation-hero .flat-img-with-text .inner-right img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    margin: 0 !important;
  }
  .tf-vacation-hero .flat-img-with-text .rotating-badge { display: none !important; }

  /* Tour detail: title may wrap to two lines instead of being cut off. */
  .tour-hero .tour-hero__title {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.15rem !important;
  }
  /* main.css gives every .row -20px margins (!important) while the container
     has only 15px padding on phones: 5px of sideways scroll on most pages. */
  html body .row { margin-left: -15px !important; margin-right: -15px !important; }
  html, body { overflow-x: clip; }
  /* Footer: the mobile menu already has these links; keep the footer short. */
  .footer .footer-col--links { display: none !important; }
  /* "TOUR PHOTOS (28 Photos)" on its own line, hint below it. */
  .tour-detail__gallery-header { flex-wrap: wrap; row-gap: 4px; }
  .tour-detail__gallery-subtitle { flex-basis: 100%; }
}

/* Very small phones (< 375px): Day Tours city cards one per row, full width
   (16:9 so eight cards do not make the page too long). */
@media (max-width: 374.98px) {
  .rt-city-tabs.rt-city-tabs--city { grid-template-columns: 1fr; gap: 12px; }
  .rt-city-tabs.rt-city-tabs--city .rt-city-tab { aspect-ratio: 16 / 9; }
}

/* Mobile spacing (≤ 767px): hero content sits in the middle of the photo; the
   footer blocks stack with even, modest gaps instead of 40+30+24+38px. */
@media (max-width: 767px) {
  .hero .box-banner .box-title { margin-bottom: 72px !important; }
  .footer .content-top-footer { padding: 28px 0 8px !important; gap: 16px; }
  .footer .inner-footer { padding-bottom: 20px !important; }
  .footer .inner-footer .row > [class*="col-"] { margin-bottom: 0 !important; }
  .footer .inner-footer .widget-box { margin-top: 20px !important; margin-bottom: 0 !important; }
  .footer .content-bottom { padding: 16px 0 !important; gap: 10px; }
  /* Tour detail: gap under the hero photo (pt-8 ≈ 55px on phones). */
  .tour-detail__main-wrap { padding-top: 24px !important; }
  .tour-detail__main-wrap > .container > .row { --bs-gutter-y: 1.5rem; }
  .tour-detail__main-wrap > .container > .row > :first-child { margin-top: 0 !important; }
}

/* Mobile footer (≤ 767px): logo and social icons on one row, compact contact
   list, small copyright block. */
@media (max-width: 767px) {
  .footer .content-top-footer {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 0 16px !important;
    gap: 12px;
  }
  .footer .footer-logo-img { max-height: 44px; width: auto; }
  .footer .footer-socials .text-social { display: none !important; }
  .footer .footer-socials .list-social { gap: 8px !important; }
  .footer .footer-socials .box-icon.w-44 { width: 34px !important; height: 34px !important; font-size: 14px; }
  .footer .footer-socials .social-svg-icon { width: 14px; height: 14px; }

  .footer .inner-footer .widget-box { margin-top: 16px !important; }
  .footer .inner-footer .widget-title { margin-bottom: 12px !important; }
  .footer .inner-footer .widget-title .h4 { font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
  .footer .widget-info { gap: 12px !important; margin-bottom: 0 !important; }
  .footer .widget-contact { display: flex; align-items: center; gap: 12px !important; margin: 0 !important; }
  .footer .widget-contact .icon { width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; flex-shrink: 0; }
  .footer .widget-contact .icon > span { width: 32px !important; height: 32px !important; }
  .footer .widget-contact .icon i { font-size: 15px; }
  .footer .widget-contact .content { gap: 1px !important; }
  .footer .widget-contact .content span { display: block; font-size: .72rem !important; line-height: 1.3 !important; opacity: .75; margin: 0 !important; }
  .footer .widget-contact .content p { font-size: .9rem !important; line-height: 1.4 !important; margin: 0 !important; }

  .footer .content-bottom { flex-direction: column; text-align: center; }
  .footer .copy-right { font-size: .78rem !important; line-height: 1.5 !important; }
  .footer .menu-bottom { gap: 16px !important; }
  .footer .menu-bottom .item-bottom { font-size: .78rem !important; }
}

/* Mobile hero slider: a little shorter than the screen so the next section
   peeks in (the slider sits 80px under the fixed header). */
@media (max-width: 767px) {
  .hero .box-banner.box-banner-1 { height: 82svh !important; min-height: 540px; }
}

/* Mobile footer: background photo anchored top centre. */
@media (max-width: 767px) {
  footer.footer.footer-bg { background-position: center top !important; }
}

/* Body text justified on every page (site owner's choice, 2026-09-29), with
   English hyphenation so narrow phone columns do not open wide gaps between
   words. Headings, buttons and centred blocks keep their own alignment. */
html body p,
html body .rt-post__content p,
html body .rt-rich-text li,
html body .desc,
html body .description {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
html body :is(.text-center, .hero, .banner-section, .page-title-tour, .rt-blog-hero, .rt-post-hero, .tour-hero,
  .copy-right, .rt-search__summary, .rt-search__empty, .sidebar-cta, .modal, .no-results, .scroll-down-indicator,
  .tf-btn, .button-group) :is(p, .desc, .description),
html body :is(p, .desc, .description):is(.text-center, [style*="text-align:center"], [style*="text-align: center"]) {
  text-align: inherit;
  -webkit-hyphens: manual;
  hyphens: manual;
}
html body :is(p, .desc, .description):is(.text-center, [style*="text-align:center"], [style*="text-align: center"]) { text-align: center; }

/* About > Travel Tips lists: one red dot per item (no default disc, no check mark). */
.about__tips-content ul { list-style: none !important; padding-left: 0 !important; }
.about__tips-content ul li { list-style: none !important; position: relative; padding-left: 20px !important; }
.about__tips-content ul li::marker { content: none; }
.about__tips-content ul li::before {
  content: "" !important;
  position: absolute;
  left: 2px;
  top: .6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary-color, #B5232A) !important;
  color: transparent !important;
}

/* ── About Us tabs (FAQ, Travel Tips): compact (2026-09-29) ────────────────
   A small centred segmented control instead of a full-width bar, and the FAQ
   as one white card with hairline dividers instead of a box per question. */
.about-tab-nav { display: flex; justify-content: center; margin-bottom: 28px !important; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.about-tab-nav .about__tab-list {
  display: inline-flex !important;
  flex-wrap: nowrap;
  width: auto !important;
  gap: 4px !important;
  margin: 0 auto;
  padding: 4px !important;
  border-radius: 999px;
  background: #f3f4f6;
  border: 1px solid #eceef1;
}
.about-tab-nav .about__tab-list .nav-item { flex: 0 0 auto !important; }
.about-tab-nav .nav-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 8px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: none !important;
  color: #4b5563 !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
@media (hover: hover) {
.about-tab-nav .nav-link:hover { color: #111827 !important; background: rgba(255, 255, 255, .7) !important; }
}
.about-tab-nav .nav-link.active { background: var(--primary-color, #B5232A) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(181, 35, 42, .25) !important; }
.about-tab-nav .nav-link i { font-size: 1rem; }

#tabid3 .about__tab-title,
#tabid4 .about__tab-title { text-align: center; margin-bottom: 18px !important; }
#tabid4 > p.text-muted { text-align: center !important; max-width: 640px; margin-left: auto; margin-right: auto; }

.about__faq-accordion {
  max-width: 880px;
  margin: 0 auto;
  padding: 4px 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(17, 24, 39, .06);
}
.about__faq-accordion .accordion-item {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #f0f1f3 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
.about__faq-accordion .accordion-item:last-child { border-bottom: 0 !important; }
.about__faq-accordion .accordion-button {
  padding: 16px 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  font-size: .98rem !important;
  font-weight: 600 !important;
  line-height: 1.45;
}
.about__faq-accordion .accordion-button:not(.collapsed) { color: var(--primary-color, #B5232A) !important; }
.about__faq-accordion .accordion-body { padding: 0 0 16px !important; color: #4b5563; font-size: .95rem; line-height: 1.7; }

.about__tips-section { max-width: 880px; margin-left: auto; margin-right: auto; margin-bottom: 28px !important; }

@media (max-width: 575px) {
  .about-tab-nav .nav-link { padding: 8px 16px !important; font-size: .88rem !important; }
  .about__faq-accordion { padding: 2px 16px; border-radius: 14px; }
  .about__faq-accordion .accordion-button { padding: 14px 0 !important; font-size: .94rem !important; }
}

/* ── Contact page info cards (2026-09-29): white line icon on a solid red
   circle (same as the footer), icon left / text right, grey label. ─────── */
.info-card-bar {
  display: grid !important;
  grid-template-columns: 52px 1fr;
  column-gap: 16px;
  align-items: start;
  padding: 24px !important;
  border-radius: 16px !important;
  border: 1px solid #f0f1f3 !important;
  background: #fff !important;
  box-shadow: 0 4px 18px rgba(17, 24, 39, .05) !important;
  text-align: left !important;
}
.info-card-bar > .icon-box {
  grid-row: span 3;
  display: grid !important;
  place-items: center;
  width: 52px !important;
  height: 52px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--primary-color, #B5232A) !important;
  box-shadow: 0 6px 16px rgba(181, 35, 42, .22);
}
.info-card-bar > .icon-box i { color: #fff !important; font-size: 24px !important; }
.info-card-bar .contact-card-title {
  margin: 2px 0 6px !important;
  color: #6b7280 !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.info-card-bar .contact-map-link,
.info-card-bar .contact-phone-link,
.info-card-bar .contact-email-link { color: #111827 !important; font-weight: 600; word-break: break-word; }
.info-card-bar .contact-phone-link { font-size: 1.15rem; }
@media (hover: hover) {
.info-card-bar a:hover { color: var(--primary-color, #B5232A) !important; }
}
.contact-desc-muted strong { color: #374151; font-weight: 600; }

/* ── Contact page: working hours + support in one card (2026-09-29) ─────── */
.contact-hours {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid #f0f1f3;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(17, 24, 39, .05);
}
.contact-hours__col { padding: 18px 20px; }
.contact-hours__col + .contact-hours__col { border-left: 1px solid #f0f1f3; }
.contact-hours__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #111827;
  font-size: .95rem;
  font-weight: 700;
}
.contact-hours__title i { color: var(--primary-color, #B5232A); font-size: 20px; }
.contact-hours__list { margin: 0; }
.contact-hours__list > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed #eceef1; font-size: .9rem; }
.contact-hours__list > div:last-child { border-bottom: 0; }
.contact-hours__list dt { color: #6b7280; font-weight: 500; }
.contact-hours__list dd { margin: 0; color: #111827; font-weight: 600; text-align: right; white-space: nowrap; }
.contact-hours__note { margin: 6px 0 0 !important; color: #9ca3af; font-size: .78rem; text-align: left !important; }
@media (max-width: 575px) {
  .contact-hours { grid-template-columns: 1fr; }
  .contact-hours__col + .contact-hours__col { border-left: 0; border-top: 1px solid #f0f1f3; }
}
@media (max-width: 575px) {
  .contact-map-extra .btn { white-space: nowrap; font-size: .82rem !important; gap: 6px !important; padding-left: 8px !important; padding-right: 8px !important; }
}

/* Page title banner: main.css also paints an old-domain photo in ::before (hidden
   under the banner background but still downloaded). */
.page-title-tour::before { background: none !important; }

/* Dropdown carets drawn with CSS borders instead of the Phosphor font glyph, so
   they still show where web fonts are blocked or slow (iOS Lockdown Mode, font
   blockers, data savers). The element keeps its size and hover rotation. */
.icon-CaretDown { display: inline-flex !important; align-items: center; justify-content: center; }
.icon-CaretDown::before {
  content: "" !important;
  display: block;
  width: .42em;
  height: .42em;
  margin-top: -.22em;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

/* ── Contact page on phones (2026-09-29): quick actions at the top, compact
   cards, a leaner form and map header. Desktop is unchanged. ─────────────── */
.contact-quick { display: none; }
@media (max-width: 767px) {
  .contact-section-cream { padding-top: 24px !important; padding-bottom: 24px !important; }
  .contact-section-cream .box-title { margin-bottom: 16px !important; }
  .contact-section-cream .contact-badge-outline { display: none; }
  .contact-section-cream .contact-heading-dark { font-size: 1.45rem !important; margin-bottom: 6px !important; }
  .contact-section-cream .contact-desc-muted { font-size: .8rem !important; line-height: 1.55; text-align: center !important; }

  .contact-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
  .contact-quick__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px 10px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #f0f1f3;
    box-shadow: 0 3px 12px rgba(17, 24, 39, .05);
    color: #1f2937;
    font-size: .76rem;
    font-weight: 600;
    text-decoration: none;
  }
  .contact-quick__item i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-color, #B5232A);
    color: #fff;
    font-size: 19px;
  }
  .contact-quick__item:nth-child(2) i { background: #25D366; }
  .contact-quick__item:active { transform: scale(.97); }

  .contact-section-cream .row.g-4 { --bs-gutter-y: 10px; }
  .info-card-bar { grid-template-columns: 42px 1fr; column-gap: 12px; padding: 14px 16px !important; border-radius: 14px !important; }
  .info-card-bar > .icon-box { width: 42px !important; height: 42px !important; box-shadow: none; }
  .info-card-bar > .icon-box i { font-size: 20px !important; }
  .info-card-bar .contact-card-title { margin: 0 0 3px !important; font-size: .7rem !important; }
  .info-card-bar .contact-map-link, .info-card-bar .contact-email-link { font-size: .92rem; }
  .info-card-bar .contact-phone-link { font-size: 1.05rem; margin-bottom: 2px !important; }
  .info-card-bar .contact-text-sm { font-size: .78rem !important; }

  .flat-contact { padding-top: 20px !important; padding-bottom: 28px !important; }
  .contact-form-side-card { padding: 20px 16px !important; border-radius: 16px !important; }
  .contact-form-side-card .box-title { margin-bottom: 14px !important; }
  .contact-form-side-card .contact-heading-dark-sm { display: none; }
  .contact-form-side-card .contact-desc-sm { margin: 4px 0 0 !important; font-size: .88rem; }
  .contact-form-side-card .row.g-3 { --bs-gutter-y: 0; }
  .contact-form-side-card .form-group { margin-bottom: 12px !important; }
  .contact-form-side-card .contact-label { margin-bottom: 4px !important; font-size: .88rem; }
  .contact-form-side-card .form-control { padding-top: 11px !important; padding-bottom: 11px !important; }
  .contact-form-side-card textarea.form-control { min-height: 120px; }

  .contact-map-card { padding: 16px !important; border-radius: 16px !important; }
  .contact-map-card .contact-badge-red { display: none; }
  .contact-map-card .contact-map-title { font-size: .95rem; }
  .contact-map-card .contact-map-btn { padding: 5px 12px !important; font-size: .78rem !important; white-space: nowrap; }
  .contact-map-card .contact-map-wrapper { height: 230px !important; min-height: 230px !important; flex: none !important; }
  .contact-map-card .contact-map-iframe { height: 230px !important; }
  .contact-chat-btns { display: none !important; }
}
.contact-desc-muted strong { white-space: nowrap; }

/* ── Blog post on phones (2026-09-29) ─────────────────────────────────────
   Lower hero; the sidebar (quote CTA + latest stories, both repeated further
   down) is hidden once it drops below the article; "Tours you may love" and
   "You might also like" become swipeable rows instead of 1,600px stacks. */
@media (max-width: 991.98px) {
  .rt-post__aside { display: none !important; }
}
@media (max-width: 767px) {
  .rt-post-hero { min-height: 400px !important; }
  .rt-post-hero__inner { padding-top: 96px !important; padding-bottom: 28px !important; }

  .rt-post-tours .row.flat-recommended,
  .rt-post-related .rt-blog-grid {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    grid-template-columns: none !important;
    gap: 14px !important;
    margin: 0 -15px !important;
    padding: 4px 15px 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 15px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .rt-post-tours .row.flat-recommended::-webkit-scrollbar,
  .rt-post-related .rt-blog-grid::-webkit-scrollbar { display: none; }
  .rt-post-tours .row.flat-recommended > *,
  .rt-post-related .rt-blog-grid > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    scroll-snap-align: start;
  }
  .rt-post-tours, .rt-post-related { padding-top: 36px !important; padding-bottom: 36px !important; }
}

/* Phones (≤ 767px): no Grid / List view switch on tour listings (cards are one
   per row anyway). A listing whose filter bar held only that switch (taxonomy
   pages) drops the empty bar too. */
@media (max-width: 767px) {
  .nav-tab-filter .nav-tab-item { display: none !important; }
  .nav-tab-filter:not(:has(> li:not(.nav-tab-item))) { display: none !important; }
  .box-filter-tab:not(:has(> :not(.nav-tab-filter))):not(:has(.nav-tab-filter > li:not(.nav-tab-item))) { display: none !important; }
}

/* Phones (≤ 767px): the tour filters open in the Filter modal, so the sidebar's
   "Filter Tours" block (a copy, below the tour list) is hidden; the contact box stays. */
@media (max-width: 767px) {
  .tour-sidebar .sidebar-widget { display: none !important; }
}

/* Phones (≤ 767px): tour listings — the title bar (.box-listing-top: title,
   "Showing N tours", Filter / sort) had 24px + 48px below it, and the city chips
   another 22px before the cards' own 24px gutter. */
@media (max-width: 767px) {
  .tour-listing-section .box-listing-top { padding-bottom: 16px !important; margin-bottom: 12px !important; }
  .tour-listing-section .rt-tgroups { margin-bottom: 0; }
  .rt-tgroup--all { flex-basis: 96px; }
  .rt-tgroup__count { white-space: nowrap; }
}