/* KỆ TRUYỆN — unified homepage carousel (Trạm Preview + 3 status rails).
   Typography/colors intentionally reuse the hero banner's --sh-* tokens and
   font stack (Plus Jakarta Sans body/headings, JetBrains Mono for tracked
   uppercase labels) so this section reads as the same system, not a skin. */
.shelf {
  /* This section's markup carries both "wrap" and "shelf" — .wrap's
     max-width: 1180px (styles.css) is meant for ordinary text content,
     but it caps this whole section too, including the carousel. Every
     vw/vh/getBoundingClientRect measurement upstream only ever sees
     whatever width .wrap left it, so on a wide landscape tablet or
     desktop the ring could be computing a perfectly reasonable radius
     for a "container" that was never allowed to be more than 1180px in
     the first place — reading as tiny against the actual, much wider
     screen around it. Override to a much wider cap here (same class
     specificity as .wrap; this file loads after styles.css, so it wins)
     so wide viewports actually hand the carousel more room to use.
     Ordinary text elsewhere in the section (the title) stays readable
     regardless — it isn't full-width running text, just short lines. */
  max-width: 1800px;
  margin: clamp(1.6rem, 5vw, 3.5rem) auto;
  color: var(--sh-ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.shelf-head {
  margin-bottom: 1.1rem;
}
.shelf-title {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(1.05rem, 3.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sh-accent, #26c2dc);
}
.shelf-stage {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.shelf-carousel {
  position: relative;
  flex: 1;
  /* Only the CONTAINER's own footprint is set in CSS — card size and ring
     radius are NOT computed separately here (see --shelf-card-w/-h/
     --shelf-radius below: JS measures this element's actual rendered box
     via ResizeObserver and derives both from that one measurement, so
     they can never disagree with how much room this container really
     has). This height must itself respond differently to portrait vs.
     landscape, or nothing downstream ever can either: vmin (the smaller
     of viewport width/height) was the earlier bug here — rotating a
     phone swaps which axis is which but `min()` of the same two numbers
     doesn't change, so the container came out identically tall in both
     orientations no matter what JS then did with it. 78vw grows this
     with how WIDE the device is (more width earns a taller carousel,
     which is what "landscape should look bigger" means); 90vh is a
     safety ceiling so that on a short landscape phone this never asks
     for more height than the viewport can actually show without pushing
     the ring half off-screen. */
  height: clamp(260px, min(78vw, 90vh), 640px);
  min-height: 260px;
  perspective: var(--shelf-perspective, 1400px);
  /* pan-y: chỉ cho trình duyệt tự xử lý cuộn DỌC — vuốt NGANG trên carousel
     là của JS (xoay vòng bìa), không để trình duyệt tranh chấp/làm chậm cử
     chỉ đó bằng cách cố nhận diện thành thao tác pan của riêng nó. */
  touch-action: pan-y;
  cursor: grab;
  outline: none;
}
.shelf-carousel:active { cursor: grabbing; }
.shelf-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.shelf-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--shelf-card-w, 220px);
  height: var(--shelf-card-h, 300px);
  margin: calc(var(--shelf-card-h, 300px) / -2) 0 0 calc(var(--shelf-card-w, 220px) / -2);
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.25s ease;
}
.shelf-card-face {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-2, #0c1322);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.shelf-card.is-front .shelf-card-face { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); }
.shelf-card-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shelf-card-face b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: var(--sh-accent-soft);
}
.shelf-card-close {
  /* Top-left, not top-right: the TikTok player's own avatar/follow bubble
     sits top-right, and stacking our X on top of it read as visual clutter. */
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(10, 12, 20, 0.62);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
  z-index: 2;
}
.shelf-card-close:hover,
.shelf-card-close:active {
  background: rgba(20, 24, 38, 0.82);
  border-color: rgba(255, 255, 255, 0.5);
  transform: scale(1.08);
}
.shelf-card-video { position: absolute; inset: 0; background: #000; }
.shelf-card-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.shelf-hero {
  margin-top: 1.2rem;
  text-align: center;
}
.shelf-hero h3 {
  margin: 0 0 0.15rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  color: var(--sh-ink);
  font-size: 1.2rem;
  font-weight: 700;
}
.shelf-hero-author { margin: 0 0 0.55rem; color: var(--sh-muted); font-size: 0.88rem; }
.shelf-hero-pills { display: flex; justify-content: center; gap: 0.4rem; margin-bottom: 0.55rem; }
.shelf-hero-pills span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--sh-accent);
  color: var(--sh-accent-ink);
  font-weight: 700;
}
.shelf-hero-teaser {
  margin: 0 auto;
  max-width: 46rem;
  color: var(--sh-muted);
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: justify;
  text-align-last: center;
}
.shelf-hero-more {
  color: var(--sh-accent-soft);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.shelf-hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.shelf-hero-cta,
.shelf-hero-play {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.shelf-hero-cta {
  color: var(--sh-accent-ink);
  background: var(--sh-accent);
  border: none;
}
.shelf-hero-play {
  color: #fff;
  background: linear-gradient(135deg, #0b0b0d 0%, #14151a 55%, #3a0d1c 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.32), 0 6px 16px rgba(254, 44, 85, 0.28);
}
.shelf-hero-play:hover {
  box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.55), 0 8px 20px rgba(254, 44, 85, 0.4);
  transform: translateY(-1px);
}
.shelf-hero-play-icon { color: #25f4ee; flex-shrink: 0; }