/* Report showcase, carousel và lightbox. */

.report-showcase-section {
overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(212, 163, 63, 0.13), transparent 32%),
    linear-gradient(160deg, rgba(248, 250, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.report-showcase-heading {
max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.report-showcase-heading p:last-child {
text-wrap: pretty;
}

.report-showcase {
position: relative;
}

.report-showcase-stage {
--report-showcase-shadow-room: 40px;
  --report-showcase-fade-depth: 32px;
  --report-showcase-near-tilt: 28deg;
  --report-showcase-near-tilt-reversed: -28deg;
  --report-showcase-far-tilt: 38deg;
  --report-showcase-far-tilt-reversed: -38deg;
  position: relative;
  height: clamp(
    calc(450px + var(--report-showcase-shadow-room)),
    calc(51vw + var(--report-showcase-shadow-room)),
    calc(570px + var(--report-showcase-shadow-room))
  );
  margin-inline: -18px;
  overflow: hidden;
  perspective: 1500px;
  isolation: isolate;
  touch-action: pan-y;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--report-showcase-fade-depth)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--report-showcase-fade-depth)),
    transparent 100%
  );
}

.report-showcase-stage:active {
cursor: grabbing;
}

.report-showcase-stage.is-dragging {
cursor: grabbing;
}

.report-showcase-stage.is-dragging .report-showcase-slide {
transition: none;
}

.report-showcase-slide {
position: absolute;
  top: 50%;
  left: 50%;
  width: min(66%, 670px);
  height: calc(100% - 54px - var(--report-showcase-shadow-room));
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(31, 49, 104, 0.12);
  border-radius: 28px;
  color: var(--accent-strong);
  background: #f7f8fc;
  box-shadow: 0 14px 30px rgba(21, 33, 61, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, -50%, -180px) scale(0.58);
  transition:
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 520ms ease,
    filter 520ms ease,
    border-color 220ms ease,
    box-shadow 520ms ease;
  will-change: transform, opacity;
}

.report-showcase-slide:hover {
border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(212, 163, 63, 0.22);
}

.report-showcase-slide img {
display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: contain;
  background: #f7f8fc;
  pointer-events: none;
  user-select: none;
}

.report-showcase-page-indicator {
position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  min-width: 58px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 9px;
  border: 1px solid rgba(31, 49, 104, 0.16);
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 8px 20px rgba(21, 33, 61, 0.12);
  backdrop-filter: blur(14px);
}

.report-showcase-page-indicator strong {
font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.report-showcase-page-indicator small {
color: #74809a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.report-showcase-zoom-button,
.report-showcase-lightbox-close {
display: inline-grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.report-showcase-zoom-button {
position: absolute;
  z-index: 8;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(31, 49, 104, 0.16);
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 20px rgba(21, 33, 61, 0.13);
  backdrop-filter: blur(14px);
}

.report-showcase-zoom-button::after {
position: absolute;
  top: 50%;
  right: calc(100% + 9px);
  padding: 6px 10px;
  border: 1px solid rgba(31, 49, 104, 0.12);
  border-radius: 999px;
  color: var(--accent-strong);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(21, 33, 61, 0.14);
  content: attr(data-tooltip);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.report-showcase-zoom-button svg,
.report-showcase-lightbox-close svg {
width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.report-showcase-zoom-button:hover {
color: #ffffff;
  background: var(--accent-strong);
  box-shadow: 0 12px 26px rgba(31, 49, 104, 0.24);
  transform: scale(1.05);
}

.report-showcase-lightbox-close {
width: 44px;
  height: 44px;
  border: 1px solid rgba(246, 213, 142, 0.42);
  color: #ffffff;
  background: rgba(8, 18, 37, 0.82);
  box-shadow: 0 10px 24px rgba(3, 8, 21, 0.28);
  backdrop-filter: blur(12px);
}

.report-showcase-lightbox-close:hover {
color: #f6d58e;
  background: rgba(31, 49, 104, 0.96);
  box-shadow: 0 14px 28px rgba(3, 8, 21, 0.34);
  transform: scale(1.05);
}

@media (hover: hover) {
  .report-showcase-zoom-button:hover::after,
  .report-showcase-zoom-button:focus-visible::after {
  opacity: 1;
      transform: translate(0, -50%);
  }
}

.report-showcase-lightbox {
width: fit-content;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 26px;
  background: #f7f8fc;
  box-shadow: 0 30px 80px rgba(3, 8, 21, 0.42);
}

.report-showcase-lightbox::backdrop {
background: rgba(3, 8, 21, 0.78);
  backdrop-filter: blur(8px);
}

.report-showcase-lightbox > img {
display: block;
  width: min(92vw, 1400px);
  height: min(90vh, 1100px);
  border: 1px solid rgba(212, 163, 63, 0.7);
  border-radius: inherit;
  object-fit: contain;
  background: #f7f8fc;
  touch-action: pinch-zoom;
}

.report-showcase-lightbox-close {
position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
}

.report-showcase-slide.is-active,
.report-showcase-slide[data-slide-offset="0"] {
z-index: 5;
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) rotateY(0) scale(1);
}

.report-showcase-slide[data-slide-offset="-1"] {
z-index: 4;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translate3d(
    calc(-50% - clamp(200px, 28vw, 310px)),
    -50%,
    -80px
  ) rotateY(var(--report-showcase-near-tilt)) scale(0.82);
}

.report-showcase-slide[data-slide-offset="1"] {
z-index: 4;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translate3d(
    calc(-50% + clamp(200px, 28vw, 310px)),
    -50%,
    -80px
  ) rotateY(var(--report-showcase-near-tilt-reversed)) scale(0.82);
}

.report-showcase-slide[data-slide-offset="-2"] {
z-index: 3;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translate3d(
    calc(-50% - clamp(350px, 46vw, 500px)),
    -50%,
    -140px
  ) rotateY(var(--report-showcase-far-tilt)) scale(0.68);
}

.report-showcase-slide[data-slide-offset="2"] {
z-index: 3;
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: translate3d(
    calc(-50% + clamp(350px, 46vw, 500px)),
    -50%,
    -140px
  ) rotateY(var(--report-showcase-far-tilt-reversed)) scale(0.68);
}

.report-showcase-dots button:focus-visible,
.report-showcase-zoom-button:focus-visible,
.report-showcase-lightbox-close:focus-visible,
.report-showcase-cta:focus-visible {
outline: 3px solid rgba(212, 163, 63, 0.78);
  outline-offset: 4px;
}

.report-showcase-controls {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 2px;
}

.report-showcase-dots {
display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.report-showcase-dots button {
width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(31, 49, 104, 0.22);
  cursor: pointer;
  transition: width 260ms ease, background 260ms ease;
}

.report-showcase-dots button[aria-pressed="true"] {
width: 30px;
  background: var(--gold);
}

.report-showcase-cta {
display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  margin: 24px auto 0;
  padding: 0 24px;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), #314b97);
  box-shadow: 0 16px 30px rgba(31, 49, 104, 0.2);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.report-showcase-cta:hover {
color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 20px 36px rgba(31, 49, 104, 0.26);
}