/* ==========================================================================
   Component: datpro_slide_viewer — /slides/, /slides/vi/, /slides/zh/
   A minimal frame around two independent 6-slide decks (VN and 中文):
   presentation stage, prev/next, dots, counter, fullscreen lightbox with
   pinch/pan zoom, plus the /slides/ landing page's two deck-selector cards.
   No redesign of the artwork, no extra marketing copy — the images already
   do that job.
   ========================================================================== */

.dp-slideshow {
  background: var(--dp-navy-900);
  padding-block: var(--sp-8) var(--sp-16);
}

.dp-slideshow__crumb {
  margin-bottom: var(--sp-6);
}

.dp-slideshow__crumb .dp-breadcrumb__item,
.dp-slideshow__crumb .dp-breadcrumb__item a {
  color: var(--dp-text-on-dark-muted);
}

.dp-slideshow__crumb .dp-breadcrumb__item + .dp-breadcrumb__item::before {
  color: rgba(255, 255, 255, 0.25);
}

.dp-slideshow__crumb .dp-breadcrumb__item a:hover {
  color: #fff;
}

.dp-slideshow__crumb .dp-breadcrumb__item [aria-current="page"] {
  color: #fff;
}

/* ---------- Stage: arrows either side, frame in the middle -------------- */

.dp-slideshow__stage {
  position: relative;
}

.dp-slideshow__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--dp-navy-900);
  box-shadow: var(--shadow-lg);
}

.dp-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: translateX(16px) scale(0.99);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  pointer-events: none;
}

.dp-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.dp-slide.is-prev {
  transform: translateX(-16px) scale(0.99);
}

.dp-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}

@media (prefers-reduced-motion: reduce) {
  .dp-slide {
    transition: opacity 1ms linear;
    transform: none !important;
  }
}

.dp-slideshow__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: rgba(10, 27, 51, 0.55);
  backdrop-filter: blur(4px);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.dp-slideshow__arrow--prev {
  left: var(--sp-3);
}

.dp-slideshow__arrow--next {
  right: var(--sp-3);
}

@media (min-width: 768px) {
  .dp-slideshow__arrow--prev {
    left: var(--sp-4);
  }

  .dp-slideshow__arrow--next {
    right: var(--sp-4);
  }
}

@media (min-width: 1200px) {
  .dp-slideshow__arrow--prev {
    left: -60px;
  }

  .dp-slideshow__arrow--next {
    right: -60px;
  }
}

.dp-slideshow__arrow:hover {
  background: rgba(255, 255, 255, 0.18);
}

.dp-slideshow__arrow:active {
  transform: scale(0.94);
}

.dp-slideshow__arrow[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.dp-slideshow__arrow svg {
  width: 22px;
  height: 22px;
}

.dp-slideshow__arrow--prev svg {
  transform: rotate(180deg);
}

.dp-slideshow__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(10, 27, 51, 0.55);
  color: #fff;
  backdrop-filter: blur(4px);
  transition: background-color var(--dur) var(--ease);
}

.dp-slideshow__zoom:hover {
  background: rgba(10, 27, 51, 0.8);
}

.dp-slideshow__zoom svg {
  width: 20px;
  height: 20px;
}

/* ---------- Controls row: dots + counter --------------------------------- */

.dp-slideshow__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}

.dp-slideshow__dots {
  display: flex;
  gap: var(--sp-2);
}

.dp-slideshow__dot {
  width: 20px;
  height: 44px;
  display: grid;
  place-items: center;
}

.dp-slideshow__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.3);
  transition: background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}

.dp-slideshow__dot.is-active::before {
  background: #fff;
  width: 22px;
}

.dp-slideshow__count {
  color: var(--dp-text-on-dark-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  min-width: 4.5em;
  text-align: right;
}

/* ---------- CTA row (only when the target route exists) ------------------ */

.dp-slideshow__cta {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  min-height: 44px;
  flex-wrap: wrap;
}

.dp-slideshow__cta:empty {
  margin-top: 0;
  min-height: 0;
}

.dp-slideshow__cta .dp-btn {
  min-height: 44px;
}

/* ---------- Rotate hint (mobile portrait, first visit only) -------------- */

.dp-slideshow__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-5) auto 0;
  padding: var(--sp-2) var(--sp-4);
  max-width: fit-content;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--dp-text-on-dark-muted);
  font-size: var(--fs-xs);
}

.dp-slideshow__hint button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--dp-text-on-dark-muted);
}

.dp-slideshow__hint button svg {
  width: 14px;
  height: 14px;
}

@media (min-width: 768px) {
  .dp-slideshow__hint {
    display: none;
  }
}

/* ---------- Mobile portrait ------------------------------------------------ */

@media (max-width: 767px) {
  .dp-slideshow {
    padding-block: var(--sp-5) var(--sp-10);
  }

  .dp-slideshow__controls {
    gap: var(--sp-3);
  }
}

/* Short viewport = phone rotated to landscape: let the slide take almost the
   whole screen, per the "gần full-screen" requirement. Desktop landscape
   monitors never match this (they are never this short relative to width),
   so nothing else changes there. */
@media (max-width: 926px) and (orientation: landscape) and (max-height: 500px) {
  .dp-slideshow {
    padding-block: var(--sp-3);
  }

  .dp-slideshow__crumb,
  .dp-slideshow__cta,
  .dp-slideshow__hint {
    display: none;
  }

  .dp-slideshow__frame {
    aspect-ratio: auto;
    height: calc(100vh - var(--header-h) - 70px);
  }

  .dp-slideshow__controls {
    margin-top: var(--sp-3);
  }

  body.dp-page-slides .dp-fab {
    display: none;
  }
}

/* ---------- Fullscreen lightbox ------------------------------------------ */

.dp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 10, 26, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dp-lightbox[hidden] {
  display: none;
}

.dp-lightbox__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: grid;
  place-items: center;
  touch-action: none;
}

.dp-lightbox__img {
  max-width: 94vw;
  max-height: 88vh;
  object-fit: contain;
  will-change: transform;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}

.dp-lightbox__close,
.dp-lightbox__arrow {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.dp-lightbox__close:hover,
.dp-lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.2);
}

.dp-lightbox__close {
  top: max(var(--sp-4), env(safe-area-inset-top));
  right: max(var(--sp-4), env(safe-area-inset-right));
  z-index: 1;
}

.dp-lightbox__close svg,
.dp-lightbox__arrow svg {
  width: 22px;
  height: 22px;
}

.dp-lightbox__arrow--prev {
  left: max(var(--sp-4), env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}

.dp-lightbox__arrow--prev svg {
  transform: rotate(180deg);
}

.dp-lightbox__arrow--next {
  right: max(var(--sp-4), env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
}

.dp-lightbox__count {
  position: absolute;
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  color: var(--dp-text-on-dark-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  .dp-lightbox__arrow {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.14);
  }
}

/* ---------- Landing page (/slides/) — deck selector ----------------------- */

.dp-slide-landing {
  background: var(--dp-navy-900);
  padding-block: var(--sp-16) var(--sp-20);
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.dp-slide-landing__head {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--sp-10);
}

.dp-slide-landing__title {
  color: #fff;
  margin-bottom: var(--sp-3);
}

.dp-slide-landing__desc {
  color: var(--dp-text-on-dark-muted);
}

.dp-slide-landing__decks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: 44rem;
  margin: 0 auto;
}

.dp-slide-landing__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-10) var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  text-align: center;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dp-slide-landing__card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.dp-slide-landing__card.is-recommended {
  border-color: var(--dp-blue-500);
  background: rgba(26, 114, 212, 0.14);
}

.dp-slide-landing__flag {
  width: 56px;
  height: 37px;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dp-slide-landing__flag svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dp-slide-landing__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
}

.dp-slide-landing__hint {
  font-size: var(--fs-xs);
  color: var(--dp-text-on-dark-muted);
}

.dp-slide-landing__card.is-recommended .dp-slide-landing__hint {
  color: #fff;
}

@media (max-width: 559px) {
  .dp-slide-landing__decks {
    grid-template-columns: 1fr;
  }
}