/* ==========================================================================
   FILE MAP

   01. Design tokens and animation timing
   02. Reset, stage, and global overlay
   03. Persistent chrome: logo, header, year rail, bottom controls
   04. Shared scene animation and line masks
   05. Scene layouts and scene-specific presentation
   06. Loading and pixel transition
   07. Responsive layout ranges (kept in cascade order)

   Breakpoint policy:
   - Small component-only queries stay beside the component they affect.
   - Full viewport layouts are grouped in the responsive section at the end.
   - Do not reorder viewport blocks without checking cascade dependencies.
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS AND ANIMATION TIMING
   ========================================================================== */
:root {
  --ink: #eef1fb;
  --muted: #8890ad;
  --apparat: "SVN-Apparat", "Be Vietnam Pro", system-ui, sans-serif;
  --accent: #927ef0;
  --left-w: 240px;
  --right-w: 62vw;
  --bottom-h: 52px;

  /* Scene 1 entrance timeline — edit these values only. */
  /* Preset: fast, readable, and still clearly sequenced. */
  --intro-chrome-start: 0.2s;
  --intro-chrome-step: 0.07s;
  --intro-chrome-middle: 0.27s;
  --intro-chrome-duration: 0.75s;
  --intro-content-gap: 0.08s;
  --intro-title-lead: 0.35s;
  --intro-line-stagger: 0.12s;
  --intro-line-duration: 0.85s;
  --intro-sidebar-duration: 0.55s;
  --intro-content-start: calc(
    var(--intro-chrome-start) + var(--intro-chrome-step) +
      var(--intro-chrome-step) + var(--intro-chrome-step) +
      var(--intro-chrome-duration) + var(--intro-content-gap)
  );
  --intro-scroll-delay: calc(
    var(--intro-content-start) - var(--intro-title-lead) +
      var(--intro-line-stagger) + var(--intro-line-stagger) +
      var(--intro-line-duration) + 0.08s
  );

  /* Shared entrance timing for scenes 2023–2026. */
  --scene-line-start: 0.1s;
  --scene-line-stagger: 0.16s;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  background: #000000;
  color: var(--ink);
  overflow-x: hidden;
  font-family: var(--apparat);
}

.ipad-break {
  display: none;
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
}

#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#blackout {
  position: fixed;
  inset: 0;
  z-index: 6;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

#blackout.on {
  opacity: 1;
}

@font-face {
    font-family: "SVN-Apparat";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("https://event.mediacdn.vn/web_fonts/SVN-Apparat-Regular.otf") format("opentype");
}

@font-face {
    font-family: "SVN-Apparat";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("https://event.mediacdn.vn/web_fonts/SVN-Apparat-Medium.otf") format("opentype");
}

/* ============================================================
   OVERLAY
   ============================================================ */
#overlay {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  font-family: var(--apparat);
}

#overlay.finale-out {
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

#overlay.finale-out * {
  pointer-events: none;
}

.chrome {
  position: absolute;
  pointer-events: none;
}

/* ============================================================
   LEFT PANEL
   Logo + year rail — persistent but only the dividing BORDER
   is visible during the intro (when logo is large).
   On other scenes the logo shrinks and the border fades.
   ============================================================ */
.c-left-panel {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--left-w);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  z-index: 4;
}

/* Logo */
.c-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

#site-logo {
  display: block;
  height: 150px;
  width: auto;
  transition: height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.logo-small #site-logo {
  height: 50px;
}

/* Year rail — bottom of left panel */
.c-left-bottom {
  flex: 0 0 auto;
  height: var(--bottom-h);
  display: flex;
  align-items: center;
}

.c-years {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.c-years .yr {
  width: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  border-radius: 4px;
  pointer-events: auto;
  transition: all 0.4s ease;
}

.c-years .yr.cur {
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.37);
}

.c-years .yr:hover:not(.cur) {
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
}

.c-years .tick {
  height: 6px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2px;
  padding: 0 2px;
}

.c-years .tick .bar {
  height: 100%;
  width: 3px;
  background: rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease;
}

.c-years .tick .bar.lit {
  background: #ad8af5;
}

/* ============================================================
   RIGHT HEADER
   3 text columns — left edge aligned with var(--left-w)
   ============================================================ */
.c-right-header {
  left: auto;
  right: 0;
  top: 0;
  width: var(--right-w);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 24px 0 0;
  gap: 32px;
  z-index: 4;
}

.c-header-label {
  text-align: left;
}

.c-header-clock {
  text-align: left;
}

.c-header-copy {
  text-align: right;
}

.c-header-label,
.c-header-clock,
.c-header-copy {
  font-size: 16px;
  line-height: 1.1;
  font-weight: 400;
  /* Regular */
  color: rgba(255, 255, 255, 0.7);
}

.c-header-label {
  flex: 1;
  text-align: left;
}

.c-header-clock {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.c-header-copy {
  flex: 1;
  text-align: right;
}

.clock-city,
.clock-time {
  font-weight: 400;
}

.clock-time {
  letter-spacing: 0.02em;
}

/* ============================================================
   CHROME UI ENTRANCE ANIMATIONS (Synchronized with Scene 1)
   ============================================================ */
.c-logo-wrap,
.c-right-header > * {
  opacity: 0;
  transform: translateY(-24px);
  transition:
    opacity var(--intro-chrome-duration) ease-out,
    transform var(--intro-chrome-duration) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.c-left-bottom,
.c-scroll,
.c-right-bottom {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--intro-chrome-duration) ease-out,
    transform var(--intro-chrome-duration) cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Hard initial guard. Responsive layout rules must never reveal the scroll
   hint or skip button before the coordinated intro entrance begins. */
#overlay:not(.chrome-enter) .c-scroll,
#overlay:not(.chrome-enter) .c-right-bottom {
  opacity: 0 !important;
  transform: translateY(24px) !important;
}

/* Activated near the end of the pixel transition. */
#overlay.chrome-enter .c-logo-wrap,
#overlay.chrome-enter .c-right-header > *,
#overlay.chrome-enter .c-left-bottom,
#overlay.chrome-enter .c-scroll,
#overlay.chrome-enter .c-right-bottom {
  opacity: 1;
  transform: translateY(0);
}

/* Chrome entrance sequence, derived from the Scene 1 variables in :root. */
#overlay.chrome-enter .c-logo-wrap {
  transition-delay: var(--intro-chrome-start);
}

#overlay.chrome-enter .c-right-header > .c-header-label {
  transition-delay: var(--intro-chrome-start);
}

#overlay.chrome-enter .c-right-header > .c-header-clock {
  transition-delay: calc(var(--intro-chrome-start) + var(--intro-chrome-step));
}

#overlay.chrome-enter .c-right-header > .c-header-copy {
  transition-delay: calc(
    var(--intro-chrome-start) + var(--intro-chrome-step) +
      var(--intro-chrome-step)
  );
}

#overlay.chrome-enter .c-left-bottom {
  transition-delay: var(--intro-chrome-middle);
}

#overlay.chrome-enter .c-scroll,
#overlay.chrome-enter .c-right-bottom {
  /* Last entrance: appear together after AWARDS title has finished revealing. */
  transition-delay: var(--intro-scroll-delay);
}

/* ============================================================
   SCENES  (full-screen JS-driven overlays)
   ============================================================ */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.m-break {
  display: none;
}

.scene.on {
  opacity: 1;
}

/* Entrance: fade-in + slide-up */
.scene .intro-sidebar > *,
.scene .scene-bca,
.scene .scene-hero > .scene-title,
.scene .scene-hero > .scene-desc {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Line Masking: Each line is enclosed in an overflow:hidden mask */
.line-mask {
  overflow: hidden;
  display: block;
  width: 100%;
  padding-top: 6px;
  padding-bottom: 10px;
  margin-top: -6px;
  margin-bottom: -10px;
}

/* CTA needs room for its hover shadow. It still uses the same opacity and
   translate entrance, but this wrapper must not crop visual effects. */
.line-mask.cta-mask {
  overflow: visible;
}

/* Inner element starts shifted 120% down & slightly skewed inside its own line mask box */
.scene .line-mask > * {
  opacity: 0;
  transform: translateY(120%) skewY(2deg);
  transform-origin: left top;
  transition:
    opacity 0.8s ease-out,
    transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.scene.on .intro-sidebar > *,
.scene.on .scene-bca,
.scene.on .scene-hero > .scene-title,
.scene.on .scene-hero > .scene-desc {
  opacity: 1;
  transform: translateY(0);
}

.scene.on .line-mask > * {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

/* Scene 1 content starts only after the chrome entrance has fully settled. */
.scene .intro-hero > .line-mask > * {
  transition-duration: var(--intro-line-duration);
}

.scene .intro-sidebar > * {
  transition-duration: var(--intro-sidebar-duration);
}

.scene.on .intro-hero > .line-mask:nth-child(1) > * {
  transition-delay: calc(var(--intro-content-start) - var(--intro-title-lead));
}

.scene.on .intro-hero > .line-mask:nth-child(2) > * {
  transition-delay: calc(
    var(--intro-content-start) - var(--intro-title-lead) +
      var(--intro-line-stagger)
  );
}

.scene.on .intro-hero > .line-mask:nth-child(3) > * {
  transition-delay: calc(
    var(--intro-content-start) - var(--intro-title-lead) +
      var(--intro-line-stagger) + var(--intro-line-stagger)
  );
}

/* Sidebar label/description share the first title line's entrance beat. */
.scene.on .intro-sidebar > * {
  transition-delay: var(--intro-content-start);
}

/* Delay for scene 23, 24, 25, 26 text elements (staggered line-by-line masked reveal) */
.scene.on .scene-bca {
  transition-delay: 0s;
}

.scene.on .scene-title-group > .line-mask:nth-child(1) > * {
  transition-delay: var(--scene-line-start);
}

.scene.on .scene-title-group > .line-mask:nth-child(2) > * {
  transition-delay: calc(var(--scene-line-start) + var(--scene-line-stagger));
}

.scene.on .scene-title-group > .line-mask:nth-child(3) > * {
  transition-delay: calc(
    var(--scene-line-start) + var(--scene-line-stagger) +
      var(--scene-line-stagger)
  );
}

.scene.on .scene-title-group > .line-mask:nth-child(4) > * {
  transition-delay: calc(
    var(--scene-line-start) + var(--scene-line-stagger) +
      var(--scene-line-stagger) + var(--scene-line-stagger)
  );
}

.scene.on .scene-title-group > .line-mask:nth-child(5) > * {
  transition-delay: calc(
    var(--scene-line-start) + var(--scene-line-stagger) +
      var(--scene-line-stagger) + var(--scene-line-stagger) +
      var(--scene-line-stagger)
  );
}

.scene.on .scene-hero > .scene-title {
  transition-delay: var(--scene-line-start);
}

.scene.on .scene-hero > .scene-desc {
  transition-delay: calc(var(--scene-line-start) + 0.12s);
}

/* ---- INTRO sidebar — positioned inside the left panel area ----
   2 distinct groups:
   ① "+" + "(Nhìn lại)" — near the vertical center of the panel
   ② Description text  — anchored near the bottom
   We achieve this by splitting into a flex column with space-between
   and keeping "desc" as the last auto-pushed child.
---- */
/* ---- INTRO CONTENT LAYOUT ---- */
.intro-layout {
  position: absolute;
  left: 0;
  right: 0;
  /* Push the anchor point down past the header */
  top: calc(50% + 20px);
  transform: translateY(-50%);
  display: flex;
  align-items: stretch;
  /* Sync heights */
  pointer-events: none;
}

.intro-layout > * {
  pointer-events: auto;
}

.intro-sidebar {
  width: var(--left-w);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  flex: none;
}

/* Split sidebar into 3 equal parts to match the 3 lines of hero text */
.intro-sidebar-plus,
.intro-sidebar-label,
.intro-sidebar-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.intro-sidebar-plus {
  justify-content: flex-start;
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1;
  padding-top: 6px;
  /* optical nudge */
}

.intro-sidebar-label {
  justify-content: flex-start;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.1;
  padding-top: 6px;
  /* optical nudge */
}

.intro-sidebar-desc {
  justify-content: flex-end;
  font-size: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  padding-bottom: 8px;
  /* optical nudge to match bottom of AWARDS */
}

/* ---- INTRO hero — fills the right panel area ----
   Vertically centered in the USABLE height
   (between header bottom and bottom-bar top).
   We approximate this with a slight positive top offset so
   the center of the text block aligns with ~50% of the
   available space below the header. ---- */
.intro-hero {
  flex: none;
  width: var(--right-w);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 0 24px 0 0;
}

.intro-hero-line {
  font-weight: 500;
  font-size: 128px;
  line-height: 0.92;
  letter-spacing: -0.04em;
  display: block;
  text-transform: uppercase;
  white-space: nowrap;
}

.intro-hero-line.accent {
  color: var(--accent);
}

.intro-hero-line.white {
  color: #fff;
}

/* ---- SCENE 2023 Layout ---- */
.scene-layout {
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;
  transform: none;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
}

.scene-layout > * {
  pointer-events: auto;
}

.scene-sidebar {
  width: var(--left-w);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
}

.scene-hero {
  flex: none;
  width: var(--right-w);
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 24px 0 0;
  position: relative;
}

.scene-plus {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

/* Component breakpoint — desktop decorative marks (≥ 1024px). */
@media (min-width: 1024px) {
  .scene-plus,
  .intro-sidebar-plus {
    font-size: 12px;
  }
}

.intro-sidebar-plus img,
.scene-plus img {
  width: 1em;
  height: auto;
  display: block;
  opacity: 1;
}

.scene-plus.left-bottom {
  position: absolute;
  left: 24px;
  top: calc(2.2 * clamp(32px, 4.5vw, 116px) + 32px + 6px);
  /* 2 dòng title (line-height 1.1) + gap 32px + optical nudge 6px */
}

.scene-plus.top-right {
  position: absolute;
  top: 6px;
  right: 24px;
}

.scene-plus.bottom-right {
  position: absolute;
  top: calc(2.2 * clamp(32px, 4.5vw, 116px) + 32px + 6px);
  right: 24px;
}

/* Intro hero: hide the top-right/bottom-right plus marks on desktop & tablet
   (mobile re-enables them via its own !important rule) */
.intro-hero .scene-plus.top-right,
.intro-hero .scene-plus.bottom-right {
  display: none;
}

.scene-plus.top-left {
  position: absolute;
  top: 6px;
  left: 24px;
}

.scene-plus.bottom-left {
  position: absolute;
  left: 24px;
}

.scene-bca {
  font-size: clamp(32px, 4.5vw, 116px);
  font-weight: 500;
  color: var(--accent);
  line-height: 1.1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.scene-title {
  font-size: clamp(32px, 4.5vw, 116px);
  font-weight: 500;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.scene-desc {
  margin-top: 32px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  text-transform: none;
  max-width: 600px;
}

/* ---- SCENE 2024 Layout (Stacked Left) ---- */
.scene-layout-stacked {
  position: absolute;
  left: 0;
  right: 0;
  top: 200px;
  /* matches Scene 2 top */
  padding: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.scene-layout-stacked > * {
  pointer-events: auto;
}

.scene-layout-stacked .scene-bca {
  padding-left: 24px;
  margin-bottom: 0px;
  /* spacing to match image */
}

.scene-hero-stacked .scene-bca,
.scene-hero-stacked .scene-title-group {
  padding-left: 0;
}

.scene-4-align {
  padding-left: calc(50% - 70px);
  display: flex;
  flex-direction: column;
}

.scene-title-group {
  position: relative;
  width: 100%;
  padding-left: 24px;
}

.scene-title-wrap {
  display: flex;
  align-items: center;
  gap: 100px;
}

.scene-plus.large-plus {
  line-height: 1;
  font-weight: 300;
}

.scene-plus.large-plus img {
  width: 40px;
  height: 40px;
}

/* ---- Overrides for SCENE 3 & 4 (2024, 2025) to match reference precisely ---- */
#scene-2024 .scene-desc,
#scene-2025 .scene-desc {
  line-height: 1.6;
  margin-top: 30px;
  max-width: none;
}
#scene-2025 .scene-desc:not(.mobile-scene-desc) {
  width: 541px;
}

/* Component breakpoint — scene copy and finale spacing (≥ 835px).
   Kept here because it only adjusts these scene-specific components. */
@media (min-width: 835px) {
  #scene-2024 .scene-desc {
    max-width: 640px;
    /* keep the copy to two lines on tablet/desktop */
  }

  /* Keep 60px between Scene 2026's header block and its CTA. */
  #scene-2026 .finale-content {
    margin-top: 60px;
  }

  /* hide the decorative "+" that collides with the year progress rail (mobile re-enables it) */
  #scene-2024 .scene-plus.left-bottom {
    display: none;
  }
}

.ipad-plus {
  display: none;
}

#scene-2024 .scene-plus.bottom-right,
#scene-2025 .scene-plus.bottom-left {
  top: calc(3.3 * clamp(32px, 4.5vw, 116px) + 40px + 6px);
}

#scene-2026 .scene-plus.bottom-right {
  top: calc(4.4 * clamp(32px, 4.5vw, 116px) - 16px);
}

#scene-2025 .scene-layout-stacked {
  top: 50%;
  transform: translateY(-50%);
}
/* Extra mobile-only content marker for scene 2025. */
#scene-2025 .mobile-scene-desc,
#scene-2025 .mobile-scene-plus {
  display: none;
}

.finale-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 3.4vh, 32px);
  width: 100%;
}

/* CTA pill */
.cta {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  height: 48px;
  background: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  align-self: flex-start;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.25);
}

.cta .cta-ico-img {
  width: 48px;
  height: 48px;
  display: block;
  flex: none;
}

.cta .lbl {
  font-family: var(--apparat);
  font-weight: 500;
  font-size: 14px !important;
  color: #0f0f0f;
  padding: 0 20px 0 16px;
  white-space: nowrap;
}

/* ============================================================
   RIGHT BOTTOM BAR
   Left edge aligned with right-header (= var(--left-w))
   ============================================================ */
.c-right-bottom {
  left: auto;
  right: 0;
  bottom: 24px;
  width: var(--right-w);
  height: var(--bottom-h);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* only .c-skip on desktop */
  padding: 0 24px 0 0;
  z-index: 4;
}

/* Desktop: .c-scroll sits left of .c-right-bottom (mirroring old layout) */
.c-scroll {
  /* Desktop: absolute positioned, left edge aligned with the top 3-item header cluster */
  position: absolute;
  bottom: 24px;
  left: calc(100% - var(--right-w));
  height: var(--bottom-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
  z-index: 4;
  pointer-events: none;
}

body.finale-active .c-scroll {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.c-scroll-arrow {
  font-size: 12px;
  color: #fff;
  animation: bounce-down 2s ease infinite;
}

@keyframes bounce-down {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

.c-scroll span {
  font-weight: 400;
  font-size: 16px;
  letter-spacing: normal;
  color: #fff;
}

.c-skip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 3px 3px 3px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: rgba(5, 4, 17, 0.44);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 500;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.92);
  pointer-events: auto;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
  transition:
    color 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.c-skip:hover {
  color: #fff;
  background: rgba(146, 126, 240, 0.22);
  border-color: rgba(173, 138, 245, 0.85);
  box-shadow:
    0 8px 26px rgba(0, 0, 0, 0.24),
    0 0 20px rgba(146, 126, 240, 0.28);
  transform: translateY(-2px);
}

.c-skip:active {
  transform: translateY(0) scale(0.98);
}

.c-skip:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.c-skip .arrow {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.c-skip .arrow img,
.c-skip .arrow svg {
  display: block;
  width: 32px;
  height: 32px;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.c-skip:hover .arrow img,
.c-skip:hover .arrow svg {
  transform: translateX(2px);
}

/* ============================================================
   PIXEL TRANSITION, AWARD CANVAS & RICH LOADING OVERLAY
   ============================================================ */
#pixel-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  pointer-events: none;
  display: none;
}

#loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 100px;
  padding: 40px;
  color: #fff;
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.6s ease;
  will-change: opacity, filter;
}

#loading.exiting {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
}

/* Line mask wrapper for Logo */
.loading-left {
  overflow: hidden;
  padding-top: 6px;
  padding-bottom: 6px;
}

.loading-logo {
  height: 140px;
  width: auto;
  opacity: 0;
  transform: translateY(120%) skewY(2deg);
  transform-origin: left top;
  transition:
    opacity 0.5s ease-out,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}

.loading-left.show .loading-logo {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

#loading.exiting .loading-logo {
  opacity: 0;
  transform: translateY(-120%) skewY(-2deg);
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 420px;
  max-width: 90vw;
}

.loading-percent-wrap {
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}

.loading-percent {
  font-family: "SVN-Apparat", sans-serif;
  font-size: 48px;
  font-weight: 500;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(120%) skewY(2deg);
  transform-origin: left top;
  transition:
    opacity 0.5s ease-out,
    transform 0.9s cubic-bezier(0.19, 1, 0.22, 1),
    color 0.3s ease,
    text-shadow 0.3s ease;
  will-change: transform, opacity;
}

.loading-right.show .loading-percent {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

#loading.exiting .loading-percent {
  opacity: 0;
  transform: translateY(-120%) skewY(-2deg);
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-progressbar-wrap {
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
}

.loading-progressbar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  opacity: 0;
  transform: translateY(150%);
  transition:
    opacity 0.5s ease-out,
    transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform, opacity;
}

.loading-right.show .loading-progressbar {
  opacity: 1;
  transform: translateY(0);
}

#loading.exiting .loading-progressbar {
  opacity: 0;
  transform: translateY(-150%);
  transition:
    opacity 0.4s ease,
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.loading-console {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.5;
  height: 10.5em; /* 7 console lines × 1.5 line-height */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.loading-console .console-line {
  opacity: 0;
  height: 0;
  transition:
    opacity 0.2s ease,
    height 0.2s ease;
  white-space: nowrap;
}

.loading-console .console-line.typing,
.loading-console .console-line.typed {
  opacity: 1;
  height: 18px;
}

.loading-console .console-line.line-complete {
  color: var(--accent, #635bff);
  font-weight: 600;
}

.loading-console .console-line.typing::after {
  content: "█";
  display: inline-block;
  margin-left: 4px;
  color: var(--accent, #5a57ff);
  animation: blink 0.6s infinite;
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.loading-percent.completed {
  color: #927ef0;
  text-shadow: none;
}

.loading-progress-fill {
  height: 100%;
  width: 0%;
  background: #927ef0;
  border-radius: 2px;
  transition: width 0.1s linear;
}

.loading-progress-fill.completed {
  background: #927ef0;
  box-shadow: none;
}

#stage.intro-prep,
#overlay.intro-prep {
  opacity: 0;
  transition: opacity 0.8s ease;
}

#stage.intro-enter,
#overlay.intro-enter {
  opacity: 1;
}

/* Component breakpoint — loading overlay only (≤ 767px). */
@media (max-width: 767px) {
  #loading {
    flex-direction: column;
    gap: 18px;
    padding: 20px 16px;
  }

  .loading-left {
    width: min(62vw, 240px);
    max-width: 100%;
    display: flex;
    justify-content: center;
  }

  .loading-logo {
    width: 100%;
    height: auto;
  }

  .loading-right {
    width: min(62vw, 240px);
    max-width: none;
    gap: 12px;
  }

  .loading-info-row {
    min-width: 0;
    gap: 8px;
  }

  .loading-console {
    min-width: 0;
    flex: 1 1 auto;
    font-size: clamp(6px, 1.8vw, 8px);
  }

  .loading-console .console-line {
    overflow: visible;
    text-overflow: clip;
  }

  .loading-console .console-line.typing,
  .loading-console .console-line.typed {
    height: 1.5em;
  }

  .loading-percent-wrap {
    flex: 0 0 auto;
  }

  .loading-percent {
    font-size: clamp(26px, 8vw, 36px);
    position: relative;
    top: 8px;
  }
}

.spacer {
  position: relative;
  z-index: 0;
  height: 1040vh;
}

/* ==========================================================================
   07. RESPONSIVE VIEWPORT LAYOUTS

   Non-overlapping primary ranges:
   - Large desktop:      ≥ 2560px
   - Wide desktop:       1990–2559px
   - Standard desktop:   1440–1989px
   - Laptop:             1024–1439px
   - Tablet portrait:    768–1023px
   - Mobile:             ≤ 767px
   - Narrow mobile:      ≤ 402px (modifier layered on top of mobile)

   Blocks remain in their existing cascade order to preserve the layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   LARGE DESKTOP — ≥ 2560px
   -------------------------------------------------------------------------- */
@media (min-width: 2560px) {
  :root {
    --left-w: 300px;
    --bottom-h: 64px;
    --right-w: 60vw;
  }

  #site-logo {
    height: 180px;
  }

  .c-right-header {
    padding: 28px 40px 0 0;
  }

  /* Desktop text sizes are strictly 16px base */

  .intro-hero,
  .scene-hero {
    padding: 0 40px 0 0;
  }

  .scene-plus.top-right,
  .scene-plus.bottom-right {
    right: 40px;
  }

  .scene-plus.left-bottom,
  .scene-plus.bottom-right {
    top: calc(2.2 * 116px + 32px + 6px);
  }

  #scene-2024 .scene-plus.bottom-right,
  #scene-2025 .scene-plus.bottom-left {
    top: calc(3.3 * 116px + 40px + 6px);
  }

  #scene-2026 .scene-plus.bottom-right {
    top: calc(4.4 * 116px - 16px);
  }

  .intro-hero-line {
    font-size: 8vw;
  }

  .scene-bca,
  .scene-title {
    font-size: 116px;
  }

  .c-right-bottom {
    bottom: 40px;
    right: 40px;
    padding: 0;
  }

  .c-scroll {
    bottom: 40px;
  }

  .c-left-panel {
    padding-left: 40px;
    padding-bottom: 40px;
  }

  .c-years {
    font-size: 16px;
    width: calc(180px * 210 / 68);
  }

  .c-years .yr {
    width: 44px;
  }

  .c-years .tick .bar {
    width: 5px;
  }

  /* Scroll and Skip text size strictly 16px on desktop */
}

/* --------------------------------------------------------------------------
   WIDE DESKTOP — 1990px to 2559px
   -------------------------------------------------------------------------- */
@media (min-width: 1990px) and (max-width: 2559px) {
  :root {
    --left-w: 280px;
    --bottom-h: 60px;
    --right-w: 62vw;
  }

  #site-logo {
    height: 160px;
  }

  body.logo-small #site-logo {
    height: 56px;
  }

  .c-right-header {
    padding: 24px 32px 0 0;
  }

  /* Desktop text sizes are strictly 16px base */

  .intro-hero,
  .scene-hero {
    padding: 0 32px 0 0;
  }

  .scene-plus.top-right,
  .scene-plus.bottom-right {
    right: 32px;
  }

  .scene-plus.left-bottom,
  .scene-plus.bottom-right {
    top: calc(2.2 * 90px + 32px + 6px);
  }

  #scene-2024 .scene-plus.bottom-right,
  #scene-2025 .scene-plus.bottom-left {
    top: calc(3.3 * 90px + 40px + 6px);
  }

  #scene-2026 .scene-plus.bottom-right {
    top: calc(4.4 * 90px - 16px);
  }

  .intro-hero-line {
    font-size: 8.3vw;
  }

  .scene-bca,
  .scene-title {
    font-size: 90px;
  }

  .scene-layout,
  .scene-layout-stacked {
    top: 150px;
  }

  .c-right-bottom {
    bottom: 32px;
    right: 32px;
    padding: 0;
  }

  .c-scroll {
    bottom: 32px;
  }

  .c-left-panel {
    padding-left: 32px;
    padding-bottom: 32px;
  }

  .c-years {
    font-size: 15px;
    width: calc(160px * 210 / 68);
  }

  .c-years .yr {
    width: 40px;
  }

  #scene-2026 .cta {
    display: inline-flex;
  }

  .cta .lbl {
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   STANDARD DESKTOP — 1440px to 1989px
   -------------------------------------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1989px) {
  :root {
    --left-w: 300px;
  }

  #site-logo {
    height: 110px;
    width: auto;
  }

  body.logo-small #site-logo {
    height: 50px;
    width: auto;
  }

  .intro-hero-line {
    font-size: clamp(100px, 8vw, 160px);
  }

  #scene-2026 .scene-layout-stacked {
    top: 150px;
  }

  #scene-2025 .scene-desc,
  #scene-2025 .scene-desc:not(.mobile-scene-desc) {
    width: 404px !important;
    max-width: 404px !important;
    text-align: left;
  }

  .c-header-label,
  .c-header-clock,
  .c-header-copy {
    font-size: 14px !important;
  }

  .c-scroll span,
  .c-skip {
    font-size: 14px !important;
  }
}

/* --------------------------------------------------------------------------
   LAPTOP — 1024px to 1439px
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --left-w: 280px;
    --bottom-h: 48px;
    --right-w: 583px;
  }

  #site-logo {
    height: 80px;
    width: auto;
  }

  body.logo-small #site-logo {
    height: 50px;
    width: auto;
  }

  .c-right-header {
    right: 24px;
    padding: 24px 0 0 0;
    width: 583px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .c-header-label,
  .c-header-clock,
  .c-header-copy {
    font-size: 12px !important;
    flex: 0 0 auto;
  }

  .c-header-label {
    text-align: left;
  }

  .c-header-clock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .c-header-copy {
    text-align: right;
  }

  .intro-hero,
  .scene-hero {
    margin-right: 24px;
    padding-right: 0;
  }

  .intro-layout {
    top: calc(50% - 20px);
  }

  /* Desktop text sizes are strictly 16px base */

  .intro-hero-line {
    font-size: 80px;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .scene-bca,
  .scene-title {
    font-size: 45px;
    line-height: 1.2;
    letter-spacing: -0.04em;
  }

  .scene-desc,
  #scene-2025 .scene-desc,
  #scene-2025 .scene-desc:not(.mobile-scene-desc) {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 400;
    margin-top: 32px !important;
    width: 360px !important;
    max-width: 360px !important;
  }

  #scene-2025 .ipad-plus {
    display: none !important;
  }

  .scene-hero .scene-plus.top-right {
    top: 12px;
    right: 0;
  }

  .scene-hero .scene-plus.bottom-right {
    top: 144px;
    right: 0;
  }

  .scene-layout-stacked .scene-plus.top-right {
    top: 12px;
    right: 24px;
  }

  .scene-layout-stacked .scene-plus.bottom-right {
    top: 144px;
    right: 24px;
  }

  #scene-2024 .scene-plus.bottom-right {
    top: 138px;
    right: 24px;
  }

  .scene-plus.top-left {
    top: 12px;
    left: 24px;
  }

  .scene-plus.left-bottom {
    top: 144px;
    left: 24px;
  }

  .scene-plus.large-plus img {
    width: 28px !important;
    height: 28px !important;
  }

  #scene-2024 .scene-title-group {
    padding-left: 24px;
  }

  #scene-2024 .scene-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #scene-2024 .scene-plus.large-plus {
    position: absolute;
    left: 0;
  }

  #scene-2024 .scene-title-wrap .scene-title {
    margin-left: 56px;
  }

  #scene-2024 .scene-desc {
    width: 405px !important;
    max-width: 405px !important;
  }

  #scene-2025 .scene-4-align {
    padding-left: 0;
    margin-left: auto;
    margin-right: 9px;
    width: 320px;
  }

  #scene-2025 .scene-desc,
  #scene-2025 .scene-desc:not(.mobile-scene-desc) {
    width: 280px !important;
    max-width: 280px !important;
    text-align: left;
  }

  #scene-2025 .scene-title-group {
    padding-left: 0;
  }

  #scene-2025 .scene-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #scene-2025 .scene-plus.large-plus {
    position: absolute;
    left: 0;
  }

  #scene-2025 .scene-title-wrap .scene-title {
    margin-left: 56px;
  }

  .intro-sidebar-label {
    font-size: 14px;
  }

  .intro-sidebar-desc {
    font-size: 14px;
    line-height: 1.4;
    max-width: 210px;
  }

  .c-right-bottom {
    bottom: 24px;
    right: 24px;
    padding: 0;
  }

  .c-scroll {
    bottom: 24px;
    left: calc(100% - var(--right-w));
  }

  .c-left-panel {
    padding-left: 24px;
    padding-bottom: 24px;
  }

  .c-years {
    font-size: 12px;
    width: calc(100px * 210 / 68);
  }

  .c-years .yr {
    width: 32px;
  }

  .c-years .tick .bar {
    width: 2px;
  }

  .c-scroll span {
    font-size: 14px;
  }

  .c-skip {
    font-size: 14px;
  }

  .scene-layout,
  .scene-layout-stacked {
    top: 140px;
  }

  #scene-2026 .scene-layout-stacked {
    top: 140px;
  }

  #scene-2026 .scene-bca,
  #scene-2026 .scene-title,
  #scene-2026 .scene-title-wrap .scene-title {
    font-size: 45px;
    line-height: 1.2;
    letter-spacing: -0.04em;
  }

  #scene-2026 .finale-content {
    margin-top: 40px;
  }

  #scene-2026 .cta {
    display: inline-flex;
  }

  #scene-2026 .scene-title-group {
    padding-left: 24px;
  }

  #scene-2026 .scene-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #scene-2026 .scene-plus.large-plus {
    position: absolute;
    left: 0;
  }

  #scene-2026 .scene-title-wrap .scene-title {
    margin-left: 76px;
  }
}

/* --------------------------------------------------------------------------
   MOBILE — ≤ 767px
   Top bar stacks the logo and year rail; scene content sits below.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --left-w: 0px;
    --bottom-h: 56px;
  }

  .desktop-break {
    display: none;
  }

  /* ── TOP BAR: left panel becomes a full-width column ── */
  .c-left-panel {
    position: fixed;
    /* pin to top so it stays on scroll */
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 20px 0;
    border-right: none !important;
    border-bottom: none;
    gap: 0;
    z-index: 10;
    background: transparent;
    /* transparent — let the 3D scene show through */
  }

  /* Logo: fixed size, never shrinks on mobile */
  #site-logo {
    height: 44px;
    width: auto;
    display: block;
  }

  body.logo-small #site-logo {
    height: 44px !important;
    /* override — mobile logo never changes size */
  }

  .c-logo-wrap {
    width: 100%;
  }

  /* Year rail: bleed edge-to-edge below the logo, 40px gap from logo row */
  .c-left-bottom {
    display: flex;
    align-items: center;
    width: calc(100% + 40px);
    /* bleed past the 20px padding on each side */
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 24px;
    /* 24px gap between header and progress rail */
    padding: 8px 20px;
    height: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .c-years {
    font-size: 12px;
    width: 100%;
    justify-content: space-between;
    gap: 0;
  }

  .c-years .tick {
    flex: 1;
    height: 6px;
    padding: 0 4px;
  }

  .c-years .yr {
    width: auto;
    min-width: 26px;
    padding: 2px 4px;
  }

  /* ── RIGHT HEADER: "Nhìn lại..." top-right, same row as logo ── */
  .c-right-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    padding: 20px 20px 0 0;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 11;
    /* above left panel */
    background: transparent;
    pointer-events: none;
  }

  .c-header-clock {
    display: none;
  }

  .c-header-label {
    display: none !important;
  }

  .c-header-copy {
    display: block !important;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
    pointer-events: auto;
  }

  .c-header-copy br {
    display: inline !important;
  }

  /* ── INTRO LAYOUT: column, anchored below header strip ── */
  .intro-layout {
    position: absolute;
    top: 158px;
    /* shifted up to create exactly 40px gap from progress rail */
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-h) + 16px);
    transform: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 30px;
    /* 30px gap between hero and description */
    overflow: visible;
    /* don't clip the hero text */
  }

  /* ── HERO TITLE ────────────────────────────────────── */
  .intro-hero {
    order: 1;
    flex: none;
    width: 100%;
    margin-left: 0;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: relative;
  }

  /* Override ALL base hero-line properties for mobile */
  .intro-hero-line {
    font-size: clamp(36px, 10.5vw, 52px);
    /* 375px→39px, 500px→52px */
    font-weight: 500;
    line-height: 1;
    /* tighter line-height to match ref */
    letter-spacing: -0.03em;
    /* override base -0.04em */
    white-space: nowrap;
    display: block;
    text-transform: uppercase;
  }

  /* ── SIDEBAR ROW: (Nhìn lại) left + desc right ─────── */
  .intro-sidebar {
    order: 2;
    flex: none;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 0 20px;
    gap: 8px;
  }

  /* Hide the decorative "+" icon on mobile */
  .intro-sidebar-plus {
    display: none !important;
  }

  /* Show plus marks on mobile for intro and scenes */
  .scene-plus {
    display: none !important;
  }

  .intro-hero .scene-plus,
  .scene-layout .scene-plus,
  .scene-layout-stacked .scene-plus {
    display: block !important;
    position: absolute;
    font-size: 12px;
  }

  .intro-hero .scene-plus img,
  .scene-layout .scene-plus img,
  .scene-layout-stacked .scene-plus img {
    width: 10px;
    height: 10px;
  }

  .intro-hero .scene-plus {
    right: 20px;
  }

  .intro-hero .scene-plus.top-right {
    top: 6px;
  }

  .intro-hero .scene-plus.bottom-right {
    /* Align with the bottom of the 3rd line */
    bottom: 8px;
    top: auto;
  }

  /* Override base flex:1 so label stays compact */
  .intro-sidebar-label {
    flex: none;
    width: 72px;
    white-space: nowrap;
    padding-top: 2px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none !important;
  }

  /* Override base flex:1 so desc fills remaining width */
  .intro-sidebar-desc {
    flex: 1;
    justify-content: flex-start;
    padding-bottom: 0;
    margin-left: max(0px, calc(50vw - 188px));
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
  }

  /* ── SCROLL HINT: positioned bottom-left on mobile ── */
  .c-scroll {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 20px;
    height: 28px;
    display: flex;
    align-items: center;
    transform: none;
    white-space: nowrap;
    z-index: 10;
    text-decoration: none !important;
    border: none !important;
  }

  body.finale-active .c-scroll {
    display: none !important;
  }

  .c-scroll span {
    font-size: 14px;
    letter-spacing: normal;
    text-decoration: none !important;
  }

  .c-scroll-arrow {
    font-size: 12px;
  }

  /* ── BOTTOM BAR: copyright (left) + skip (right) ── */
  .c-right-bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    width: 100%;
    padding: 0 20px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-top: none;
    background: transparent;
    z-index: 9;
  }

  .c-skip {
    font-size: 14px;
    gap: 8px;
    min-height: 36px;
    padding: 3px 3px 3px 12px;
    text-decoration: none !important;
  }

  .c-skip .arrow img,
  .c-skip .arrow svg {
    width: 28px;
    height: 28px;
  }

  /* ── OTHER SCENES (2023, 2024, 2025, 2026) ── */
  .scene-layout,
  .scene-layout-stacked {
    position: absolute;
    top: 158px;
    /* align with intro-layout */
    left: 0;
    right: 0;
    transform: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    /* make BCA and Title a single block */
  }

  .m-break {
    display: block;
  }

  .scene-sidebar {
    width: 100%;
    padding: 0;
    flex: none;
  }

  .scene-bca {
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 0;
  }

  .scene-hero {
    width: 100%;
    padding: 0;
    flex: none;
    gap: 0;
    position: static;
  }

  .line-mask {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: -4px;
    margin-bottom: -4px;
  }

  .scene-title {
    font-size: 40px;
    line-height: 1.1;
    white-space: normal;
    /* allow text to wrap */
  }

  .scene-desc {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 24px;
    margin-left: 72px;
    /* indent description to match ref */
    padding-right: 20px;
    white-space: normal;
    text-transform: none;
    /* make it regular case */
  }

  .scene-title-group {
    padding-left: 20px;
  }

  .scene-title-wrap {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .scene-title-wrap .scene-plus {
    position: static !important;
    /* Keep it in the flex flow */
  }

  .scene-title-wrap .scene-plus.large-plus img {
    width: 18px;
    height: 18px;
  }

  #scene-2024 .scene-title-wrap .scene-plus.large-plus img,
  #scene-2025 .scene-title-wrap .scene-plus.large-plus img {
    width: 22px;
    height: 22px;
  }

  .intro-sidebar-plus img,
  .scene-plus img {
    width: 10px;
    height: 10px;
  }

  /* Decorative plus positions for scene-layout (Scene 2) */
  .scene-layout .scene-plus.top-right {
    top: 6px;
    /* aligned with top of BCA ©23 */
    right: 20px;
  }

  .scene-layout .scene-plus.bottom-right {
    top: 162px;
    /* aligned with bottom of GIẢI THƯỞNG */
    right: 20px;
  }

  .scene-layout .scene-plus.left-bottom {
    top: 205px;
    /* aligned with top of description */
    left: 20px;
  }

  /* Decorative plus positions for scene-layout-stacked (Scene 3, 4, 5) */
  .scene-layout-stacked .scene-plus.top-right {
    top: 0px;
    /* aligned with top of BCA ©24 */
    right: 20px;
  }

  .scene-layout-stacked .scene-plus.bottom-right {
    top: 96px;
    /* aligned with bottom of TẦM ẢNH HƯỞNG */
    right: 20px;
  }

  /* #scene-2024 .scene-plus.bottom-right's desktop calc() (outside any
     media query) otherwise wins here on specificity (ID beats class) and
     leaks into mobile — reassert the mobile value for scene 3 only. */
  #scene-2024 .scene-plus.bottom-right {
    top: 172px;
    /* aligns with the description block */
  }

  /* Scene 2025 follows Scene 2024's mobile composition. */
  #scene-2025 .scene-layout-stacked {
    top: 158px;
    transform: none;
  }

  #scene-2025 .scene-hero,
  #scene-2025 .scene-4-align {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  #scene-2025 .scene-4-align {
    display: block;
  }

  #scene-2025 .scene-hero-stacked .scene-bca,
  #scene-2025 .scene-hero-stacked .scene-title-group {
    padding-left: 20px;
  }

  #scene-2025 .scene-desc:not(.mobile-scene-desc) {
    display: none;
  }

  #scene-2025 .mobile-scene-desc,
  #scene-2025 .mobile-scene-plus {
    display: block !important;
  }

  #scene-2025 .scene-plus.top-left {
    top: 0;
    right: 20px;
    left: auto;
  }

  #scene-2025 .scene-plus.bottom-left {
    top: 172px;
    /* aligns with the description block */
    right: 20px;
    left: auto;
  }

  #scene-2025 .mobile-scene-plus.left-bottom {
    top: 172px;
    right: auto;
    left: 20px;
  }

  /* Scene 2026: four-line header with markers at its top and bottom. */
  #scene-2026 .scene-title-wrap {
    gap: 0;
  }

  /* Keep the finale's stacked title optically even on mobile. The generic
     line-mask padding is useful for the reveal animation, but creates visible
     extra gaps between these tightly stacked uppercase lines. */
  #scene-2026 .scene-title-group .line-mask {
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: -4px;
    margin-bottom: -4px;
  }

  /* Tighten the visual gap between BETTER CHOICE and AWARDS 2026. */
  #scene-2026 .scene-title-group .line-mask:nth-child(3) {
    margin-top: -8px;
  }

  /* Give the first three stacked rows a little more breathing room. */
  #scene-2026 .scene-bca {
    margin-bottom: 4px;
  }

  #scene-2026 .scene-title-group .line-mask:nth-child(1) {
    margin-bottom: 0;
  }

  #scene-2026 .scene-bca,
  #scene-2026 .scene-title {
    line-height: 1;
  }

  #scene-2026 .scene-title-wrap .scene-plus.large-plus {
    display: none !important;
  }

  #scene-2026 .scene-plus.top-right {
    top: 0;
    right: 20px;
  }

  #scene-2026 .scene-plus.bottom-right {
    top: 208px;
    /* 12px marker bottom aligns with header bottom */
    right: 20px;
  }

  #scene-2026 .cta {
    margin-top: 40px;
  }

  .scene-layout-stacked .scene-plus.left-bottom {
    top: 172px;
    /* aligned with top of description */
    left: 20px;
  }

  /* ── Custom for Scene 2023, 2024, 2025 ── */
  #scene-2023 .scene-plus.left-bottom,
  #scene-2024 .scene-plus.left-bottom,
  #scene-2025 .scene-plus.left-bottom,
  #scene-2025 .scene-plus.bottom-right {
    display: none !important;
  }

  #scene-2023 .scene-desc,
  #scene-2024 .scene-desc,
  #scene-2025 .scene-desc {
    margin-left: 0;
    width: 320px;
    max-width: 100%;
    text-align: left;
  }

  #scene-2023 .scene-bca,
  #scene-2024 .scene-bca,
  #scene-2025 .scene-bca,
  #scene-2026 .scene-bca,
  #scene-2023 .scene-title-group,
  #scene-2024 .scene-title-group,
  #scene-2025 .scene-title-group,
  #scene-2026 .scene-title-group {
    padding: 0 20px !important;
  }
}

/* --------------------------------------------------------------------------
   NARROW MOBILE MODIFIER — ≤ 402px
   Layered on top of the main mobile layout.
   -------------------------------------------------------------------------- */
@media (max-width: 402px) {
  /* Prevent scroll hint from breaking or wrapping if too tight */
  .c-scroll span {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   TABLET PORTRAIT — 768px to 1023px
   Eight-column grid used by iPad portrait layouts.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --pad: 24px;
    --gap: 16px;
    --col: calc((100vw - 2 * var(--pad) - 7 * var(--gap)) / 8);

    --left-w: calc(var(--pad) + 3 * var(--col) + 3 * var(--gap));
    --right-w: calc(var(--pad) + 5 * var(--col) + 4 * var(--gap));
    --bottom-h: 56px;
    --hero-fz: 84px;
  }

  /* 1. Header & Logo */
  .ipad-break {
    display: inline;
  }

  .c-left-panel {
    padding: 24px 0 24px var(--pad);
    width: var(--left-w);
  }

  #site-logo {
    width: calc(2 * var(--col) + var(--gap));
    height: auto;
  }

  body.logo-small #site-logo {
    width: calc(2 * var(--col) + var(--gap)) !important;
    height: auto !important;
  }

  .c-right-header {
    width: var(--right-w);
    padding: 24px var(--pad) 0 0;
    gap: var(--gap);
    display: grid;
    grid-template-columns:
      calc(2 * var(--col) + var(--gap)) calc(2 * var(--col) + var(--gap))
      var(--col);
  }

  .c-header-label,
  .c-header-clock,
  .c-header-copy {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    text-align: left;
  }

  /* 2. Intro Scene */
  .intro-layout {
    position: absolute;
    top: 130px;
    left: var(--pad);
    right: var(--pad);
    display: block;
    transform: none;
    width: auto;
  }

  .intro-hero {
    width: 100%;
    padding: 0;
  }

  .intro-hero-line {
    font-size: var(--hero-fz);
    line-height: 0.98;
    letter-spacing: -0.04em;
  }

  .intro-hero .scene-plus {
    display: block !important;
    position: absolute;
  }

  .intro-hero .scene-plus.top-right {
    top: 20px;
    right: 0;
  }

  .intro-hero .scene-plus.bottom-right {
    top: calc(3 * var(--hero-fz) * 0.98 - 26px);
    /* Align with visual bottom of AWARDS */
    right: 0;
  }

  .intro-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    pointer-events: none;
    display: block;
  }

  .intro-sidebar-plus {
    display: none;
  }

  .intro-sidebar-label {
    position: absolute;
    top: calc(3 * var(--hero-fz) * 0.98 - 26px);
    /* Align with visual bottom of AWARDS */
    left: calc(4 * var(--col) + 4 * var(--gap));
    /* Start of Col 5 */
    padding: 0;
    width: auto;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none !important;
  }

  .intro-sidebar-desc {
    position: absolute;
    top: calc(3 * var(--hero-fz) * 0.98 + 60px);
    /* 60px padding from bottom of AWARDS */
    left: calc(4 * var(--col) + 4 * var(--gap));
    /* Start of Col 5 */
    width: calc(4 * var(--col) + 3 * var(--gap));
    /* Span Col 5-8 */
    padding: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
  }

  /* 3. Scroll hint */
  .c-scroll {
    position: absolute;
    top: calc(130px + 3 * var(--hero-fz) * 0.98 + 44px);
    /* Adjusted down 5px */
    left: var(--pad);
    bottom: auto;
    width: auto;
  }

  .c-scroll span {
    font-size: 14px;
    font-weight: 400;
  }

  /* 4. Bottom controls */
  .c-left-bottom {
    /* parent has padding-left: var(--pad) */
    align-items: flex-end;
  }

  .c-right-bottom {
    padding: 0 var(--pad) 0 0;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .c-skip {
    font-size: 14px;
    font-weight: 400;
  }

  .c-years {
    font-size: 13px;
    width: auto;
    gap: 12px;
  }

  /* Hide scroll hint on non-intro scenes */
  body.intro-inactive .c-scroll {
    opacity: 0 !important;
    pointer-events: none;
  }

  /* Scene 2+ Headers & Layout */
  .scene-bca {
    font-size: 70px;
    line-height: 1.2;
    letter-spacing: -0.04em;
    margin-bottom: 0;
    padding-left: 0;
    /* override stacked base */
  }

  .scene-title {
    font-size: 70px;
    line-height: 1.2;
    letter-spacing: -0.04em;
  }

  .desktop-break {
    display: none;
  }

  .scene-layout,
  .scene-layout-stacked {
    flex-direction: column;
    top: 130px;
    left: var(--pad);
    right: var(--pad);
    padding: 0;
  }

  .scene-sidebar,
  .scene-hero {
    width: 100%;
    padding: 0;
  }

  .scene-hero-stacked .scene-title-group {
    padding-left: 0;
  }

  .scene-layout .scene-desc {
    margin-left: calc(3 * var(--col) + 3 * var(--gap));
    width: 372px;
    text-align: left;
    max-width: none;
    margin-top: 32px;
  }

  .intro-sidebar-plus img,
  .scene-plus img {
    width: 10px;
    height: 10px;
  }

  /* Plus marks for scene-layout */
  .scene-layout .scene-plus {
    display: block !important;
    position: absolute;
  }

  .scene-layout .scene-plus.top-right {
    top: 20px;
    right: 0;
  }

  .scene-layout .scene-plus.left-bottom {
    top: calc(3 * 70px * 1.2 + 32px + 6px);
    /* Align with desc text */
    left: 0;
  }

  .scene-layout .scene-plus.bottom-right {
    top: calc(2 * 70px * 1.2 + 32px + 6px);
    /* Aligned perfectly with left-bottom plus (offsetting the 84px height of BCA 23) */
    right: 0;
  }

  /* Scene 3 (2024) & Stacked Layout Overrides */
  .scene-layout-stacked .scene-plus {
    display: block !important;
    position: absolute;
  }

  .scene-layout-stacked .scene-plus.top-right {
    top: 20px;
    right: 0;
  }

  .scene-layout-stacked .scene-plus.left-bottom {
    top: calc(
      3 * 70px * 1.2 + 32px + 6px
    ); /* Align with desc text (3 lines total) */
    left: 0;
  }

  #scene-2024 .scene-layout-stacked .scene-plus.bottom-right {
    top: calc(
      3 * 70px * 1.2 + 32px + 6px
    ); /* Align with desc text (3 lines total) */
    right: 0;
  }
  #scene-2024 .scene-title-group {
    padding-left: 0;
  }

  .scene-layout-stacked .scene-bca {
    padding-left: 0;
  }

  #scene-2024 .scene-title-group > .scene-title {
    padding-left: 0; /* Align TẦM ẢNH HƯỞNG flush left with logo */
  }

  #scene-2024 .scene-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #scene-2024 .scene-plus.large-plus {
    position: absolute;
    left: 0;
  }

  #scene-2024 .scene-title-wrap .scene-title {
    margin-left: 80px; /* Exact 80px from left */
  }

  #scene-2024 .scene-plus.large-plus img {
    width: 40px;
    height: 40px;
  }

  #scene-2024 .scene-desc {
    margin-left: calc(3 * var(--col) + 3 * var(--gap));
    width: 290px;
    text-align: left;
    max-width: none;
    margin-top: 32px;
  }

  /* Scene 4 (2025) layout matching Scene 2 */
  #scene-2025 .ipad-plus {
    display: block !important;
  }

  #scene-2025 .scene-plus.top-left,
  #scene-2025 .scene-plus.bottom-left,
  #scene-2025 .scene-plus.mobile-scene-plus {
    display: none !important;
  }

  #scene-2025 .scene-title-group > .scene-title,
  #scene-2025 .scene-title-wrap {
    display: inline-flex;
    vertical-align: top;
  }

  #scene-2025 .scene-title-group > .scene-title {
    margin-left: 0.15em;
  }

  #scene-2025 .scene-title-wrap .scene-title {
    margin-left: 0;
  }

  #scene-2025 .scene-title-wrap .scene-plus.large-plus {
    display: none !important;
  }
  #scene-2025 .scene-desc:not(.mobile-scene-desc) {
    margin-left: 0;
    width: 308px !important;
    max-width: 308px !important;
    text-align: left;
    margin-top: 32px;
  }

  #scene-2025 .scene-layout-stacked {
    top: 130px;
    transform: none;
  }

  #scene-2025 .scene-layout-stacked .scene-plus.left-bottom,
  #scene-2025 .scene-layout-stacked .scene-plus.bottom-right {
    top: calc(
      2 * 70px * 1.2 + 32px + 6px
    ); /* Align with desc text (2 lines: BCA and Title) */
  }

  #scene-2025 .scene-layout-stacked .scene-plus.left-bottom {
    left: 0;
  }

  #scene-2025 .scene-layout-stacked .scene-plus.bottom-right {
    right: 0;
  }

  #scene-2025 .scene-title-group > .scene-title {
    padding-left: 0;
  }

  #scene-2025 .scene-bca {
    padding-left: 0;
  }

  #scene-2025 .scene-4-align {
    padding-left: 0;
  }

  /* Scene 5 (2026) layout matching ref */
  #scene-2026 .scene-bca {
    padding-left: 0;
  }

  #scene-2026 .scene-title-group {
    padding-left: 0;
  }

  #scene-2026 .finale-content {
    margin-top: 40px;
  }

  #scene-2026 .scene-title-wrap {
    position: relative;
    display: flex;
    align-items: center;
  }

  #scene-2026 .scene-plus.large-plus {
    position: absolute;
    left: 0;
  }

  #scene-2026 .scene-title-wrap .scene-title {
    margin-left: 80px; /* Exact 80px from left */
  }

  #scene-2026 .scene-plus.large-plus img {
    width: 40px;
    height: 40px;
  }

  #scene-2026 .scene-layout-stacked .scene-plus.left-bottom {
    top: calc(1 * 70px * 1.2 + 6px); /* Align with VIẾT TIẾP HÀNH TRÌNH */
    left: 0;
  }

  #scene-2026 .scene-layout-stacked .scene-plus.bottom-right {
    top: calc(3 * 70px * 1.2 + 46px); /* Align with AWARDS 2026 + 40px */
    right: 0;
  }

  #scene-2026 .scene-layout-stacked .scene-plus.top-right {
    top: 20px;
    right: 0;
  }
}