/* --- Homepage video rows (YouTube / TikTok, Cửa hàng > YouTube | TikTok) --- */
.pcseal-youtube-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pcseal-youtube-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Click-to-load facade (theme/assets/video-facade.js) shown in place of the
   iframe until the visitor clicks play — same footprint as the iframe it
   replaces so no layout shift happens when the real embed lands. */
.pcseal-youtube-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; cursor: pointer; background: none; padding: 0; }
.pcseal-youtube-facade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcseal-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glow-blue);
  cursor: pointer;
  transition: transform var(--transition-fluid), box-shadow var(--transition-fluid);
}
.pcseal-play-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 3px);
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--accent);
}
.pcseal-youtube-facade:hover .pcseal-play-btn,
.pcseal-play-btn:hover,
.pcseal-play-btn:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: var(--glow-blue), 0 0 0 4px var(--accent-tint);
}

/* Shimmer shown behind the iframe until it fires its load event (see
   img-skeleton.js, which tracks these frames too) — otherwise a
   lazy-loaded or slow-to-render embed is just a flat empty box with no
   indication anything is happening. Same shimmer technique as
   img-skeleton.css, duplicated here (not shared) since this file loads
   independently of that one. */
.pcseal-youtube-frame.is-loading,
.pcseal-tiktok-frame.is-loading {
  background-color: rgba(127, 127, 127, .12);
  background-image: linear-gradient(100deg, transparent 30%, rgba(127, 127, 127, .18) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: pcseal-video-shimmer 1.3s ease-in-out infinite;
}
@keyframes pcseal-video-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pcseal-youtube-frame.is-loading,
  .pcseal-tiktok-frame.is-loading {
    animation: none;
    background-image: none;
  }
}

/* Video rows reuse the product rail's scrollable carousel shell
   (class "pcseal-rail-carousel", see carousel.css) — only the per-slide
   content needs its own layout here. */
.pcseal-video-caption { margin: 10px 4px 0; font-weight: 600; font-size: 0.92rem; }

.pcseal-tiktok-frame { position: relative; width: 100%; max-width: 325px; height: 480px; margin: 0 auto; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.pcseal-tiktok-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pcseal-video-carousel .pcseal-tiktok-item { display: flex; flex-direction: column; align-items: center; position: relative; }
.pcseal-video-carousel .pcseal-tiktok-item .pcseal-video-caption { max-width: 325px; }
.pcseal-tiktok-link-overlay { position: absolute; top: 0; left: 0; right: 0; height: 480px; z-index: 10; cursor: pointer; }

@media (min-width: 992px) {
	.pcseal-video-youtube .pcseal-carousel-slide {
		flex: 0 0 calc(33.333% - 12px);
	}
}