/* our-story page — all layout classes (ourStory_Sec, moveMent_*, our_phlopy_sec,
   icon_Content_Sec, send_reqst_sec) are already covered by the global base CSS
   (base-style.css / base-responsive.css). */

/* Continuously auto-scrolling photo strips. The theme's own Swiper-based
   marquee (slidesPerView:"auto" + loop + autoplay) is fragile in swiper/react
   and stalls after the first transition, so this is a plain CSS marquee
   instead — the slide list is rendered twice back-to-back and the whole
   track translates by exactly -50%/+50%, which loops seamlessly. */
.overwrap_slider {
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}

.marquee-track.marquee-left {
  animation: marquee-scroll-left 40s linear infinite;
}

.marquee-track.marquee-right {
  animation: marquee-scroll-right 40s linear infinite;
}

@keyframes marquee-scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* .story_content:before (base-style.css) hardcode background-image cố định (logo watermark) —
   override qua CSS custom property --story-content-bg (set inline ở component khi ACF field
   section_1_background có giá trị) thay vì sửa lại rule gốc, giữ nguyên fallback đúng ảnh cũ khi
   field rỗng. */
.story_content:before {
  background-image: var(--story-content-bg, url(/assets/images/shop-files/shama-story-logo3302.png));
  z-index: -1;
  opacity: 0.3;
}

/* base-style.css đặt .story_content{z-index:1} — đè xuống dưới các lớp khác trong .story_Rows. */
.story_content {
  z-index: -1;
}