/* Mobile polish — Hong Phat Travel */
html {
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: auto;
}
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}

@media (max-width: 767.98px) {
  .site-main,
  .site-main > *,
  header,
  footer,
  .wrap,
  .home-section,
  .home-section-lg,
  .search-panel,
  .detail,
  .about-grid {
    max-width: 100% !important;
    min-width: 0;
  }

  .site-main {
    padding-top: 3.5rem !important;
    padding-bottom: 4.5rem;
    overflow-x: hidden;
  }

  /* Prevent flex/grid children from forcing page width */
  .site-header-bar,
  .hero-copy,
  .hero-actions,
  .cat-card,
  .tour-card,
  .tour-card .tour-body,
  .tour-card .tour-price-row,
  .news-side-item,
  .cta-banner,
  .cta-banner .cta-actions,
  .book-box,
  .detail-aside,
  .detail-main,
  .panel {
    min-width: 0;
    max-width: 100%;
  }

  .search-tabs,
  .tour-filter-tabs,
  .policy-tabs__nav,
  .gallery__thumbs,
  .book-dates {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .prose,
  .prose * {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .prose img,
  .prose table,
  .prose iframe,
  .prose pre {
    max-width: 100% !important;
  }
  .prose table {
    display: block;
    overflow-x: auto;
  }

  .product-grid,
  .product-grid--related,
  .news-grid,
  .cat-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .float-contacts {
    right: .7rem;
    bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px));
  }

  /* Header compact */
  .site-header-bar {
    height: 3.5rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem !important;
  }
  .site-brand-title { font-size: 0.95rem !important; letter-spacing: -0.02em; }
  .site-brand-sub { display: none !important; }

  /* Hero — mobile: nằm dưới header, không bị che */
  .hero-section {
    isolation: isolate;
    margin-top: -3.5rem; /* kéo lên dưới header cố định */
  }
  .hero-shell {
    min-height: 0 !important;
    height: clamp(28rem, 92vw, 34rem) !important;
    max-height: none;
    padding-top: 3.5rem; /* chừa đúng chiều cao header */
    box-sizing: border-box;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
  }
  .hero-media {
    background-position: center 30% !important;
    transform: scale(1.03);
  }
  .hero-shade--side {
    background: none !important;
  }
  .hero-shade--bottom {
    background:
      linear-gradient(
        to top,
        rgba(10, 18, 32, 0.94) 0%,
        rgba(10, 18, 32, 0.78) 34%,
        rgba(10, 18, 32, 0.35) 62%,
        rgba(10, 18, 32, 0.18) 100%
      ) !important;
  }
  .hp-hero-slide {
    align-items: flex-end !important;
  }
  .hero-copy {
    height: 100%;
    padding-top: 0.85rem !important;
    padding-bottom: 3.1rem !important;
    justify-content: flex-end !important;
  }
  .hero-copy-card {
    width: 100%;
    gap: 0.55rem !important;
  }
  .hero-badge {
    max-width: calc(100% - 0.25rem);
    padding: 0.4rem 0.75rem !important;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  }
  .hero-badge span:last-child {
    font-size: 0.68rem !important;
    letter-spacing: 0.05em;
    white-space: normal;
    line-height: 1.25;
  }
  .hero-title {
    font-size: 1.55rem !important;
    line-height: 1.22 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero-title-accent {
    display: inline !important;
    margin-top: 0;
  }
  .hero-desc {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    color: rgba(255, 255, 255, 0.88) !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.28);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 34rem;
  }
  .hero-highlights {
    display: none !important; /* gọn mobile, tránh tràn lên menu */
  }
  .hero-actions {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100%;
  }
  .hero-cta-primary {
    flex: 1 1 auto;
    min-height: 2.75rem;
    padding: 0.7rem 1rem !important;
    border-radius: 0.85rem !important;
    font-size: 0.875rem !important;
    box-shadow: 0 10px 22px rgba(186, 0, 53, 0.28);
  }
  .hero-cta-secondary {
    display: none !important;
  }
  .hero-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 0.65rem !important;
    transform: translateX(-50%) !important;
    gap: 0.65rem !important;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: rgba(10, 18, 32, 0.45);
    backdrop-filter: blur(8px);
    z-index: 35 !important;
  }
  .hero-nav-arrow {
    display: none !important;
  }
  .hero-dots {
    position: static !important;
    gap: 0.5rem !important;
  }
  .slider-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
  }
  .slider-dot.is-active {
    width: 1.45rem !important;
  }

  /* Search card */
  .search-panel {
    margin-top: -1.6rem !important;
    margin-bottom: 1.5rem !important;
    padding: 0.85rem !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 28px -8px rgba(15, 23, 42, 0.18) !important;
  }
  .search-tabs {
    margin-bottom: 0.85rem !important;
    gap: 0.4rem !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .search-tabs::-webkit-scrollbar { display: none; }
  .search-tabs .tab-btn {
    padding: 0.55rem 0.8rem !important;
    border-radius: 0.7rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .search-tabs .tab-btn .material-symbols-outlined { font-size: 16px !important; }
  .search-tabs .tab-full { display: none !important; }
  .search-advanced { display: none !important; }
  .search-advanced.is-open {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .search-quick {
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
    gap: 0.35rem !important;
  }
  .search-quick a {
    font-size: 0.6875rem !important;
    padding: 0.3rem 0.55rem !important;
  }

  /* Sections */
  .home-section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; gap: 1.1rem !important; }
  .home-section-lg { padding-top: 2rem !important; padding-bottom: 2rem !important; gap: 1.25rem !important; }
  .section-title {
    font-size: 1.4rem !important;
    line-height: 1.75rem !important;
  }
  .section-desc {
    font-size: 0.9rem !important;
    line-height: 1.4rem !important;
  }

  /* Category cards */
  .cat-card { min-height: 11.5rem !important; padding: 1rem !important; }
  .cat-card h3 { font-size: 1.05rem !important; line-height: 1.35rem !important; }

  /* Tour cards */
  .tour-card .tour-cover { height: 11.5rem !important; }
  .tour-card .tour-body { padding: 0.9rem !important; gap: 0.75rem !important; }
  .tour-card .tour-meta { flex-wrap: wrap; gap: 0.35rem 0.75rem; font-size: 0.75rem !important; }
  .tour-card .tour-meta > span:first-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tour-card h3 { font-size: 1rem !important; line-height: 1.35rem !important; }
  .tour-card .tour-price-row {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.75rem;
  }
  .tour-card .tour-price { font-size: 1.25rem !important; line-height: 1.5rem !important; }
  .tour-filter-tabs {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .tour-filter-tabs::-webkit-scrollbar { display: none; }
  .tour-filter-tabs .tour-filter-btn {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 0.7rem !important;
  }

  /* CTA banner */
  .cta-banner { padding: 1.15rem !important; gap: 0.9rem !important; }
  .cta-banner h3 { font-size: 1.15rem !important; line-height: 1.45rem !important; }
  .cta-banner p { font-size: 0.875rem !important; }
  .cta-banner .cta-actions { width: 100%; }
  .cta-banner .cta-actions a {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1rem !important;
    text-align: center;
  }

  /* News */
  .news-feature-cover { height: 12.5rem !important; }
  .news-feature-body { padding: 1rem !important; gap: 0.65rem !important; }
  .news-feature-body h3 { font-size: 1.15rem !important; line-height: 1.45rem !important; }
  .news-feature-body p { font-size: 0.875rem !important; line-height: 1.35rem !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .news-side-item { padding: 0.7rem !important; gap: 0.7rem !important; }
  .news-side-thumb { width: 5.25rem !important; height: 4.5rem !important; }
  .news-side-item h4 { font-size: 0.9rem !important; line-height: 1.25rem !important; }
  .news-side-item p { display: none !important; }

  /* Footer */
  .site-footer-grid { padding-top: 2rem !important; padding-bottom: 1.25rem !important; gap: 1.5rem !important; }
  .site-footer-legal { font-size: 0.75rem !important; padding-top: 0.9rem !important; padding-bottom: 0.9rem !important; }

  /* Sticky mobile action bar */
  .mobile-action-bar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(188, 202, 192, 0.55);
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
    gap: 0.5rem;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
  }
  .mobile-action-bar a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    height: 2.75rem;
    border-radius: 0.7rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
  }
  .mobile-action-bar .btn-call {
    background: #f2f3ff;
    color: #006948;
  }
  .mobile-action-bar .btn-book {
    background: #006948;
    color: #fff;
  }
}

@media (min-width: 768px) {
  .mobile-action-bar { display: none !important; }
  .search-tabs .tab-short { display: none !important; }
  .search-advanced {
    display: contents !important;
  }
  #toggleSearchAdvanced { display: none !important; }
}

@media (max-width: 379.98px) {
  .hero-shell {
    height: clamp(26rem, 96vw, 30rem) !important;
  }
  .hero-title { font-size: 1.35rem !important; line-height: 1.22 !important; }
  .hero-desc { -webkit-line-clamp: 2; }
  .site-brand-title { font-size: 0.85rem !important; }
}