/* ==========================================================================
   Component: app-screens — "Giao diện thật" strip on product detail pages
   (2026-10-10). Client approved real app screens (assets/img/products/
   apps/v1 + v2, all 720×1440) to sync product pages with the homepage's
   phone stage. The old landscape posters can't be swapped 1:1 for portrait
   screens without breaking each page's layout, so every product page gets
   this one strip right under its hero instead.

   A row of CSS phone frames that drifts sideways forever (the track is
   duplicated by assets/js/app-screens.js so the loop is seamless), every
   other phone sits lower so the row reads as a soft wave; hover/focus
   pauses it; under prefers-reduced-motion it becomes a plain swipeable row.
   Selectors are .as- prefixed.
   ========================================================================== */

.as {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(45% 60% at 10% 10%, rgba(147, 197, 253, 0.4), transparent 70%),
    radial-gradient(40% 60% at 90% 90%, rgba(196, 181, 253, 0.35), transparent 70%),
    linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}

.as-head {
  max-width: 44rem;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  padding-inline: 16px;
  text-align: center;
}

.as-head .dp-eyebrow { margin-bottom: 0.5rem; }

.as-head h2 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.as-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.as-track {
  display: flex;
  gap: clamp(16px, 2.4vw, 28px);
  width: max-content;
  padding: 12px 0 40px;
  margin: 0;
  list-style: none;
  animation: as-scroll var(--as-dur, 60s) linear infinite;
}

.as:hover .as-track,
.as:focus-within .as-track { animation-play-state: paused; }

@keyframes as-scroll { to { transform: translateX(-50%); } }

.as-phone {
  flex: none;
  width: clamp(10.5rem, 15vw, 13.5rem);
  aspect-ratio: 1 / 2;
  padding: 6px;
  border-radius: 2rem;
  background: linear-gradient(160deg, #1e293b, #0b1220);
  box-shadow:
    0 30px 50px -28px rgba(15, 40, 90, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1);
}

.as-phone:nth-child(even) { transform: translateY(26px); }
.as-phone:hover { transform: translateY(-6px) scale(1.03); }

.as-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.65rem;
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .as-viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; }
  .as-track { animation: none; padding-inline: 16px; }
  .as-phone { scroll-snap-align: center; transition: none; }
  .as-phone[aria-hidden="true"] { display: none; }
}