/* =========================================================
   VNBPTW Summit 2026 — hero key visual (HUMAN-AI ADVANTAGE)
   Ported from the vnbptw-summit-2026-v2 page (Tailwind utilities
   in the markup + these custom classes).
   Every rule is scoped to .summit-hero (the page header rule below is the only
   exception) so the Mobirise/Bootstrap styles of the rest of the page are
   untouched.
   ========================================================= */

/* ---------- Header above the hero ----------
   The Mobirise menu was `position: absolute` so it could sit on top of the old
   slider banner. The new KV hero owns the top of the page, so the menu moves
   back into normal flow on the brand blue (#093D5A, the same blue as the
   "Bảng xếp hạng" block below the hero): no artwork is covered and the white
   menu links keep a 11.5:1 contrast. Only this page's menu id is targeted. */
.cid-v1L1hx0lEp { position: relative; background-color: #093D5A; }

/* Below the lg breakpoint (991px) the menu collapses into a panel; keep the
   same brand blue there too (the Mobirise default is #353535, which made the
   header flash grey, and the white default is unreadable behind white links). */
@media (max-width: 991px) {
  .cid-v1L1hx0lEp .navbar.opened { background-color: #093D5A !important; }
}

/* ---------- Wrapper ---------- */
/* The Mobirise body uses Jost, the Summit page uses Mulish as its sans font.
   Set it on the wrapper so inherited text (CTA label, countdown labels) keeps
   the original look instead of falling back to the Mobirise font. */
.summit-hero { position: relative; background: #DCEBFA; font-family: 'Mulish', system-ui, sans-serif; }

/* Visually hidden H1 (Tailwind is loaded with the "tw-" prefix, this keeps the
   heading available to screen readers even before the CDN finishes) */
.summit-hero .summit-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Key visual ---------- */
/* KV height: the original 2.334:1 framing on normal screens, never taller than
   the screen minus the info block (~18rem); short/wide screens show more of the
   extended sides (image is 3.2:1) instead of leaving gaps.
   The first declaration is the fallback for browsers without svh. */
.summit-hero .hero-kv {
  position: relative;
  --kvh: calc(100vw / 2.334);
  --kvh: clamp(calc(100vw / 3.2), calc(100svh - 18rem), calc(100vw / 2.334));
}

/* KV stage: the image plus light-only layers on top */
.summit-hero .kv-stage { position: relative; z-index: 0; height: var(--kvh); overflow: hidden; }
.summit-hero .kv-layer { position: absolute; inset: 0; }
.summit-hero .kv-img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  animation: summitKvIn 1.8s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes summitKvIn {
  from { transform: scale(1.08); filter: brightness(1.15) saturate(.9); }
  to { transform: none; filter: none; }
}

/* Positions follow the image: it is cropped from the sides, so
   x = 50% +/- (offset x 3.2 x KV height) */
.summit-hero .kv-sun {
  position: absolute; left: 50%; top: 76%;
  width: calc(var(--kvh) * .9); height: calc(var(--kvh) * .42);
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 236, 190, .85), rgba(255, 200, 120, .35) 45%, rgba(255, 190, 110, 0) 75%);
  animation: summitKvSun 5s ease-in-out infinite;
}
@keyframes summitKvSun {
  0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.92); }
  50% { opacity: .9; transform: translate(-50%, -50%) scale(1.06); }
}

.summit-hero .kv-sweep {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%);
  background-size: 250% 100%; background-repeat: no-repeat;
  animation: summitKvSweep 7s ease-in-out 1.6s infinite;
}
@keyframes summitKvSweep {
  0% { background-position: 130% 0; }
  45%, 100% { background-position: -30% 0; }
}

.summit-hero .kv-glint {
  position: absolute; width: calc(var(--kvh) * .11); aspect-ratio: 1; pointer-events: none;
  mix-blend-mode: screen; opacity: 0; transform: translate(-50%, -50%) scale(0);
  background:
    radial-gradient(closest-side, #fff, rgba(255, 255, 255, 0) 60%),
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, .95) 50%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, .95) 50%, transparent 53%);
  animation: summitKvGlint 4.8s ease-in-out infinite;
}
.summit-hero .kv-glint--a { left: calc(50% + var(--kvh) * .06); top: 35%; animation-delay: 1.2s; }  /* top of the AI arch */
.summit-hero .kv-glint--b { left: calc(50% + var(--kvh) * .30); top: 37%; animation-delay: 2.8s; }  /* top of the "I" pillar */
.summit-hero .kv-glint--c { left: calc(50% - var(--kvh) * .085); top: 76%; animation-delay: 4.1s; } /* sunrise on the floor */
@keyframes summitKvGlint {
  0%, 70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(45deg); }
  90% { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(90deg); }
}

/* City alive: beacons blink on tower tops, light pulses run up the towers,
   the floor reflection shimmers */
.summit-hero .kv-city { position: absolute; inset: 0; pointer-events: none; }
.summit-hero .kv-beacon {
  position: absolute; width: calc(var(--kvh) * .022); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); mix-blend-mode: screen;
  background: radial-gradient(closest-side, #fff 0, rgba(255, 226, 170, .9) 35%, rgba(255, 210, 140, 0) 100%);
  animation: summitKvBeacon var(--t, 2.6s) ease-in-out var(--d, 0s) infinite;
}
@keyframes summitKvBeacon {
  0%, 100% { opacity: .15; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  30% { opacity: .3; transform: translate(-50%, -50%) scale(.8); }
}
.summit-hero .kv-beam { position: absolute; width: 2px; transform: translateX(-50%); overflow: hidden; mix-blend-mode: screen; }
.summit-hero .kv-beam::after {
  content: ""; position: absolute; left: 0; right: 0; height: 38%; top: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95) 55%, rgba(255, 232, 190, 0));
  animation: summitKvBeam var(--t, 4s) cubic-bezier(.45, 0, .2, 1) var(--d, 0s) infinite;
}
@keyframes summitKvBeam {
  0% { top: 100%; opacity: 0; }
  10% { opacity: 1; }
  55% { top: -38%; opacity: 1; }
  56%, 100% { top: -38%; opacity: 0; }
}
.summit-hero .kv-floor {
  position: absolute; left: 0; right: 0; top: 77.6%; bottom: 0; mix-blend-mode: soft-light; opacity: .7;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 3px, rgba(255, 255, 255, 0) 7px, rgba(255, 255, 255, 0) 14px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
  animation: summitKvFloor 3.2s linear infinite;
}
@keyframes summitKvFloor {
  from { background-position: 0 0; }
  to { background-position: 0 28px; }
}

/* ---------- Info block under the KV ---------- */
.summit-hero .hero-info {
  position: relative; z-index: 1; text-align: center;
  margin-top: calc(var(--kvh) * -0.2); /* start on the KV floor: 20% of the KV height */
  padding: 0 1rem 2.25rem;
  /* continues the KV floor (#2370BC at its bottom edge), then fades into the light band below */
  background: linear-gradient(180deg, rgba(35, 112, 188, 0) 0, #2370BC 2.5rem, #2A6CBA 55%, #7FB0E6 85%, #DCEBFA 100%);
}

.summit-hero .hero-when {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .9rem;
  margin: 0;
  font-family: 'Exo 2', Mulish, sans-serif; font-weight: 700; font-size: .85rem;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 2px rgba(14, 42, 102, .55), 0 0 14px rgba(14, 42, 102, .45);
}
.summit-hero .hero-when > span { display: inline-flex; align-items: center; gap: .5rem; }
.summit-hero .hero-when svg { width: 1rem; height: 1rem; flex: none; }
.summit-hero .hero-when-sep { color: rgba(255, 255, 255, .65); font-weight: 400; }
.summit-hero .hero-addr { font-weight: 600; }
@media (max-width: 479px) {
  .summit-hero .hero-when-sep { display: none; }
  .summit-hero .hero-when { letter-spacing: .08em; }
}
@media (min-width: 768px) {
  .summit-hero .hero-when { font-size: .95rem; letter-spacing: .2em; }
  .summit-hero .hero-when svg { width: 1.25rem; height: 1.25rem; }
}
@media (min-width: 1280px) { .summit-hero .hero-when { font-size: 1.05rem; } }

/* Entrance */
.summit-hero .hero-fade { opacity: 0; animation: summitFadeUp .9s .55s ease forwards; }
@keyframes summitFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Countdown ---------- */
.summit-hero .cd-box {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  min-width: 3.9rem; padding: .55rem .6rem .5rem;
  border: 1px solid rgba(43, 111, 211, .22); border-radius: .6rem;
  background: rgba(255, 255, 255, .75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.summit-hero .cd-num {
  font-family: Orbitron, 'Exo 2', sans-serif; font-weight: 800;
  font-size: 1.45rem; line-height: 1; color: #011953; font-variant-numeric: tabular-nums;
}
.summit-hero .cd-label { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #2B6FD3; }
.summit-hero .cd-sep { font-family: Orbitron, sans-serif; font-weight: 800; font-size: 1.3rem; line-height: 2.4rem; color: rgba(43, 111, 211, .5); }
@media (min-width: 768px) {
  .summit-hero .cd-box { min-width: 4.75rem; padding: .6rem .75rem .5rem; }
  .summit-hero .cd-num { font-size: 1.75rem; }
  .summit-hero .cd-label { font-size: .7rem; }
  .summit-hero .cd-sep { font-size: 1.5rem; line-height: 2.75rem; }
}

/* ---------- CTA (thick, pressable) ---------- */
.summit-hero .btn-depth {
  box-shadow:
    rgb(8, 8, 8) 0px -3px 0px 0px inset,
    rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.12) 0px 2.77px 2.21px 0px,
    rgba(0, 0, 0, 0.13) 0px 6.65px 5.32px 0px,
    rgba(0, 0, 0, 0.133) 0px 12.52px 10.02px 0px,
    rgba(0, 0, 0, 0.14) 0px 22.34px 17.87px 0px,
    rgba(0, 0, 0, 0.15) 0px 41.78px 33.42px 0px,
    rgba(0, 0, 0, 0.15) 0px 100px 80px 0px,
    rgba(0, 0, 0, 0.14) 0px 3px 3px 0px,
    rgba(0, 0, 0, 0.12) 0px 2.77px 2.21px 0px;
}
.summit-hero .btn-depth:active {
  transform: translateY(1px);
  box-shadow:
    rgb(8, 8, 8) 0px -1px 0px 0px inset,
    rgba(255, 255, 255, 0.3) 0px 1px 0px 0px inset,
    rgba(0, 0, 0, 0.14) 0px 3px 3px 0px,
    rgba(0, 0, 0, 0.12) 0px 2.77px 2.21px 0px;
}

/* CTA look is defined here (not only in utility classes) so the button never
   flashes unstyled or loses its shape if the CDN is slow */
.summit-hero .hero-cta {
  display: inline-flex; align-items: center; gap: .625rem; padding: .75rem 1.75rem;
  border-radius: 9999px; background: #FF8A02; color: #fff;
  font-family: 'Mulish', system-ui, sans-serif;
  font-weight: 700; font-size: 1rem; letter-spacing: .025em; text-decoration: none;
  transition: background-color .3s ease, transform .3s ease;
}
.summit-hero .hero-cta:hover,
.summit-hero .hero-cta:focus-visible { background: #FF9F2E; color: #fff; text-decoration: none; }
.summit-hero .hero-cta:hover { transform: translateY(-2px); }
.summit-hero .hero-cta:focus-visible { outline: 2px solid #8EC4F5; outline-offset: 3px; }
.summit-hero .hero-cta svg { width: 1.25rem; height: 1.25rem; flex: none; }
.summit-hero .hero-cta:hover svg { transform: translateX(.25rem); }

/* ---------- Ranking intro block right below the hero ---------- */
/* #gioi-thieu was pulled 100px up (.cid-tkJ4kJmM8r { top: -100px } in
   mbr-additional.css) so its navy block tucked under the old slider banner.
   The hero now ends with the light #DCEBFA band of .hero-info, so that offset
   slid the block under the hero and its "Bảng xếp hạng" title was clipped by
   the date/countdown/CTA block. Start the block exactly where the hero ends
   (the extra 2rem gap is dropped as well, so no white strip shows between the
   light blue band and the navy panel). Mobile already reset `top` to 0. */
#gioi-thieu.cid-tkJ4kJmM8r { top: 0; padding-top: 0; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .summit-hero .kv-img,
  .summit-hero .kv-sun,
  .summit-hero .kv-sweep,
  .summit-hero .kv-glint,
  .summit-hero .kv-city * { animation: none !important; transition: none !important; }
  .summit-hero .kv-sweep,
  .summit-hero .kv-glint,
  .summit-hero .kv-city { display: none; }
  .summit-hero .hero-fade { opacity: 1; animation: none; }
  .summit-hero .hero-cta { transition: none; }
  .summit-hero .hero-cta:hover { transform: none; }
}