/* =========================================================================
 * STORE GALLERY – dải ảnh cửa hàng (#om-store-strip) + lightbox xem ảnh (#tw-lightbox).
 * Hành vi ở assets/js/site.js: marquee chạy bằng transform, dừng khi hover,
 * kéo bằng chuột / vuốt cảm ứng / trackpad ngang, click mở lightbox.
 * ========================================================================= */

/* Dải ảnh: JS bọc ảnh vào .tw-store-track và nhân đôi để chạy vòng liền mạch. */
#om-store-strip.is-marquee {
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;             /* vuốt dọc vẫn cuộn trang, vuốt ngang kéo dải ảnh */
  user-select: none;
  -webkit-user-select: none;
}
#om-store-strip.is-marquee.is-dragging { cursor: grabbing; }
#om-store-strip .tw-store-track {
  display: flex;
  flex: none !important;
  gap: inherit;
  width: max-content;
  will-change: transform;
  backface-visibility: hidden;
}
#om-store-strip .d-00e8c783ec { transition: transform .35s ease, box-shadow .35s ease; }
#om-store-strip img {
  -webkit-user-drag: none;
  pointer-events: auto;
  transition: transform .5s ease;
}
@media (hover: hover) {
  #om-store-strip:not(.is-dragging) .d-00e8c783ec:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgb(0 0 0 / .35); }
  #om-store-strip:not(.is-dragging) .d-00e8c783ec:hover img { transform: scale(1.04); }
  #om-store-strip.is-marquee { cursor: zoom-in; }
  #om-store-strip.is-marquee:active { cursor: grabbing; }
}

/* Lightbox: nền tối gần như kín, ảnh lớn tối đa trong khung nhìn. */
#tw-lightbox {
  background: rgb(6 10 12 / .94);
  padding: 24px clamp(16px, 3vw, 40px);
  gap: clamp(12px, 2vw, 24px);
}
#tw-lightbox::backdrop { background: rgb(0 0 0 / .6); }
#tw-lightbox img {
  display: block;
  width: min(1200px, calc(100vw - 200px));
  height: auto;
  max-width: none;
  max-height: calc(100dvh - 80px);
  object-fit: contain;
  border-radius: 6px;
}
#tw-lightbox button { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .35); transition: background .2s ease; }
#tw-lightbox button:hover { background: rgb(255 255 255 / .22); }
#tw-lightbox [data-tw-lightbox-close] { z-index: 2; }

@media (max-width: 767px) {
  #tw-lightbox { padding: 64px 12px 84px; }
  #tw-lightbox img { width: 100%; max-height: calc(100dvh - 160px); }
  #tw-lightbox :is([data-tw-lightbox-prev], [data-tw-lightbox-next]) { position: absolute; bottom: 20px; }
  #tw-lightbox [data-tw-lightbox-prev] { left: calc(50% - 56px); }
  #tw-lightbox [data-tw-lightbox-next] { right: calc(50% - 56px); }
}