/*
 * Product detail shell fix
 * Keeps the existing PVCL header/footer behavior separate from the product component.
 */
html { scroll-behavior: smooth; }
html, body.pvcl-product-page { background: #ffffff; }
body.pvcl-product-page {
  padding-top: 118px;
  font-family: 'K2D', sans-serif;
  color: #333;
}
body.pvcl-product-page .pvcl-product-bridge {
  background: #ffffff;
  font-family: 'Be Vietnam Pro', Arial, sans-serif;
}
body.pvcl-product-page .pvcl-product-bridge .hero::before {
  background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 57%, #eef5fb 100%);
}
body.pvcl-product-page .pvcl-product-bridge .hero::after {
  opacity: .52;
}
body.pvcl-product-page .pvcl-product-bridge h1 {
  font-size: clamp(34px, 4.5vw, 58px);
  letter-spacing: -.052em;
}
body.pvcl-product-page .pvcl-product-bridge section:nth-of-type(even) {
  background: #f7f9fc;
}
body.pvcl-product-page .pvcl-product-bridge .nav-strip {
  top: 118px;
  background: rgba(255,255,255,.94);
}
body.pvcl-product-page.product-header-compact .pvcl-product-bridge .nav-strip {
  top: 74px;
}
/* The default bridge had a cream mobile background. Keep the public-site palette instead. */
@media (max-width: 768px) {
  body.pvcl-product-page { padding-top: 70px; }
  body.pvcl-product-page .pvcl-product-bridge { background: #ffffff; }
  body.pvcl-product-page .pvcl-product-bridge .nav-strip,
  body.pvcl-product-page.product-header-compact .pvcl-product-bridge .nav-strip { top: 70px; }
  body.pvcl-product-page .pvcl-product-bridge .hero { padding-top: 20px; }
  body.pvcl-product-page .pvcl-product-bridge h1 { font-size: 30px; }
}
/* Scope the product visual system so it cannot change header, menu, footer or the Zalo widget. */
body.pvcl-product-page .pvcl-product-bridge .footer,
body.pvcl-product-page .pvcl-product-bridge .lux-top { display: none !important; }
/* Desktop header should always remain above product sticky navigation and the lightbox. */
#top-banner { z-index: 1100; }
#navbar { z-index: 1090; }
body.pvcl-product-page .pvcl-product-bridge .nav-strip { z-index: 1050; }
body.pvcl-product-page .pvcl-product-bridge .qr-lightbox { z-index: 1200; }

/* ------------------------------------------------------------------
   Product-detail heading isolation
   apps.css of the main website defines .section-title::after globally.
   Do not let that legacy news-title decoration leak into product sections.
   ------------------------------------------------------------------ */
body.pvcl-product-page .pvcl-product-bridge .section-title {
  text-align: left !important;
  position: static !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  margin-bottom: 24px !important;
}
body.pvcl-product-page .pvcl-product-bridge .section-title::after {
  content: none !important;
  display: none !important;
}
body.pvcl-product-page .pvcl-product-bridge .section-title > div {
  min-width: 0;
}
body.pvcl-product-page .pvcl-product-bridge .section-title h2,
body.pvcl-product-page .pvcl-product-bridge .section-title p {
  text-align: left !important;
}
body.pvcl-product-page .pvcl-product-bridge .section-title.album-head {
  align-items: flex-start;
}
body.pvcl-product-page .pvcl-product-bridge .section-title .album-count {
  flex: 0 0 auto;
}
@media (max-width: 768px) {
  body.pvcl-product-page .pvcl-product-bridge .section-title {
    margin-bottom: 16px !important;
  }
  body.pvcl-product-page .pvcl-product-bridge .section-title.album-head {
    display: block;
  }
  body.pvcl-product-page .pvcl-product-bridge .section-title .album-count {
    display: inline-flex;
    margin-top: 10px;
  }
}