.minh-niem-gems-section {
  --gems-accent: var(--color-accent);
  --gems-bg: #fff;
  --gems-ink: #000;
  --gems-muted: #000;
  --gems-parent: var(--gems-accent);
  --gems-parent-glow: var(--gems-accent);
  --gems-parent-glow-hot: color-mix(in srgb, var(--gems-accent) 72%, #ff2d16 28%);
  --gems-acquisition: color-mix(in srgb, var(--gems-accent) 58%, white 42%);
  --gems-card-bg: color-mix(in srgb, var(--gems-bg) 84%, white 16%);
  background: var(--gems-bg);
  color: var(--gems-ink);
  padding: 0;
  overflow: hidden;
}

svelte-scroller-outer,
svelte-scroller-background-container,
svelte-scroller-background,
svelte-scroller-foreground {
  display: block;
}

.minh-niem-gems-scroller {
  position: relative;
}

.minh-niem-gems-background-container {
  position: absolute;
  top: 0;
  width: 100%;
  max-width: 100%;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

.minh-niem-gems-background {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.minh-niem-gems-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  margin-left: calc(50% - 50vw);
  
}

.minh-niem-gems-stage::before,
.minh-niem-gems-stage::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(30vw, 36rem);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.58;
  pointer-events: none;
  z-index: 0;
}

.minh-niem-gems-stage::before {
  left: 0;
  background-image: url("../assets/minh-niem-1.jpeg");
  background-position: left center;
}

.minh-niem-gems-stage::after {
  right: 0;
  background-image: url("../assets/minh-niem-3.jpeg");
  background-position: right center;
}

.minh-niem-gems-stage-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, white 14%, transparent), transparent 18%),
    radial-gradient(circle at 18% 48%, color-mix(in srgb, var(--gems-accent) 14%, transparent), transparent 14%),
    radial-gradient(circle at 76% 74%, color-mix(in srgb, white 10%, transparent), transparent 16%);
  pointer-events: none;
  z-index: 1;
}

.minh-niem-gems-timeline {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.minh-niem-gems-year-legend-row {
  position: absolute;
  top: clamp(1.4rem, 2.8vw, 2.6rem);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: clamp(0.45rem, 0.8vw, 0.8rem);
  justify-items: center;
  z-index: 6;
}

.minh-niem-gems-year {
  margin: 0;
  color: var(--gems-muted);
  font-family: var(--font-family-display);
  font-size: var(--fs-display);
  line-height: 1.2;
  text-transform: uppercase;
}

.minh-niem-gems-goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  color: var(--gems-accent);
}

.minh-niem-gems-bubbles-stage {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: calc(100vh - 60px);
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
}

.minh-niem-gems-bubbles-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gems-accent);
  filter: url(#minh-niem-gems-goo);
}

.minh-niem-gems-bubble {
  position: absolute;
  left: calc(var(--bubble-x, 50) * 1%);
  top: calc(var(--bubble-y, 50) * 1%);
  width: calc(var(--bubble-size, 10) * 1rem);
  height: calc(var(--bubble-size, 10) * 1rem);
  border-radius: 50%;
  transform:
    translate(
      calc(-50% + var(--bubble-parallax-x, 0px)),
      calc(-50% + var(--bubble-parallax-y, 0px))
    )
    scale(var(--bubble-scale, 1));
  opacity: var(--bubble-opacity, 1);
  transition:
    left 520ms ease,
    top 520ms ease,
    width 520ms ease,
    height 520ms ease,
    opacity 320ms ease,
    transform 520ms ease,
    background-color 420ms ease,
    box-shadow 420ms ease;
  will-change: left, top, width, height, opacity, transform;
}


.minh-niem-gems-bubble[data-variant="parent"] {
  background: var(--gems-parent);
  
}

.minh-niem-gems-bubble[data-variant="parent"]::before {
  background: color-mix(in srgb, white 78%, transparent);
}

.minh-niem-gems-bubble[data-variant="parent"]::after {
  background: var(--gems-parent);
}

.minh-niem-gems-bubble[data-variant="acquisition"] {
  background: color-mix(in srgb, var(--gems-acquisition) 88%, transparent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--gems-accent) 24%, transparent);
}

.minh-niem-gems-bubble[data-variant="acquisition"]::before {
  background: color-mix(in srgb, white 45%, transparent);
}

.minh-niem-gems-bubble[data-variant="acquisition"]::after {
  background: color-mix(in srgb, var(--gems-acquisition) 92%, transparent);
}

.minh-niem-gems-bubble[data-variant="merge"] {
  background: color-mix(in srgb, var(--gems-parent) 90%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 0 8px color-mix(in srgb, var(--gems-parent) 50%, transparent);
}

.minh-niem-gems-bubble[data-variant="merge"]::before {
  background: rgba(255, 255, 255, 0.82);
}

.minh-niem-gems-bubble[data-variant="merge"]::after {
  background: color-mix(in srgb, var(--gems-accent) 54%, white 46%);
}

.minh-niem-gems-bubble[data-hidden="true"] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.72);
}

.minh-niem-gems-bubble-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 60%;
  height: 60%;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  user-select: none;
}

.minh-niem-gems-bubble[data-variant="acquisition"] .minh-niem-gems-bubble-icon {
  width: 50%;
  height: 50%;
}

.minh-niem-gems-foreground {
  position: relative;
  z-index: 2;
}

.minh-niem-gems-steps {
  position: relative;
}

.minh-niem-gems-step {
  min-height: 180vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.minh-niem-gems-step.is-empty {
  min-height: 68vh;
}

.minh-niem-gems-step.is-first {
  padding-top: 100vh;
}

.minh-niem-gems-step.is-last {
  min-height: 200vh;
  padding-bottom: 50vh;
}

.minh-niem-gems-card {
  width: min(38rem, calc(100vw - 2rem));
  margin: auto;
  background-color: color-mix(in srgb, var(--gems-card-bg) 94%, transparent);
  border-radius: 15px;
  padding: 2rem;
  color: var(--gems-ink);
}

.minh-niem-gems-card p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.75;
}

.minh-niem-gems-card p + p {
  margin-top: 1rem;
}

.minh-niem-gems-inline-dot {
  display: inline-block;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  vertical-align: baseline;
  margin: 0 0.1rem;
}

.minh-niem-gems-inline-dot-parent {
  background: var(--gems-parent);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--gems-parent) 55%, transparent);
}

.minh-niem-gems-inline-dot-acquisition {
  background: color-mix(in srgb, var(--gems-acquisition) 94%, transparent);
}

.minh-niem-gems-inline-dot-merge {
  position: relative;
  width: 1.15rem;
  background: transparent;
}

.minh-niem-gems-inline-dot-merge::before,
.minh-niem-gems-inline-dot-merge::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--gems-parent);
  box-shadow: 0 0 0.7rem color-mix(in srgb, var(--gems-parent) 55%, transparent);
}

.minh-niem-gems-inline-dot-merge::before {
  left: 0;
}

.minh-niem-gems-inline-dot-merge::after {
  right: 0;
}

@media (max-width: 1200px) {
  .minh-niem-gems-bubbles-stage {
    max-width: none;
  }
}

@media (max-width: 900px) {
  .minh-niem-gems-year-legend-row {
    width: calc(100% - 1.5rem);
  }

  .minh-niem-gems-step {
    justify-content: center;
    min-height: 160vh;
  }

  .minh-niem-gems-step.is-empty {
    min-height: 56vh;
  }

  .minh-niem-gems-card {
    margin-right: 0;
  }
}

@media (max-width: 700px) {
  .minh-niem-gems-year-legend-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
  }

  .minh-niem-gems-year {
    flex-shrink: 0;
    font-size: clamp(1.7rem, 7vw, 2.3rem);
  }

  .minh-niem-gems-card {
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .minh-niem-gems-bubble {
    transition: none;
  }
}