/**
 * Kha Van public site - academy 3D motion layer.
 */
:root {
  --kv-3d-ink: #083d2a;
  --kv-3d-green: #0a6b3d;
  --kv-3d-mint: #42d08b;
  --kv-3d-gold: #ffc617;
  --kv-3d-paper: #f7fff9;
  --kv-3d-shadow: 0 28px 80px rgba(0, 45, 24, 0.24);
  --kv-motion-fast: 0.28s;
  --kv-motion-normal: 0.78s;
  --kv-motion-slow: 1.2s;
  --kv-motion-cinematic: 1.55s;
  --kv-motion-ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --kv-motion-ease-content: cubic-bezier(0.16, 1, 0.3, 1);
  --kv-motion-ease-image: cubic-bezier(0.19, 1, 0.22, 1);
}

body.kv-scroll-fx-active {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  body.kv-scroll-fx-active {
    overflow-x: hidden;
  }
}

.kv-hero--fullbanner {
  isolation: isolate;
}

.kv-english-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.kv-english-3d__canvas {
  position: absolute;
  top: 0;
  right: 0;
  width: min(68vw, 920px);
  height: 100%;
  opacity: 0;
  transform: translate3d(7%, 0, 0) scale(1.02);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s;
  filter: saturate(1.08) contrast(1.02);
}

.kv-english-3d.is-webgl-ready .kv-english-3d__canvas {
  opacity: 0.94;
}

.kv-english-3d__fallback {
  position: absolute;
  top: 11%;
  right: clamp(1rem, 8vw, 8rem);
  width: min(48vw, 34rem);
  height: 72%;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-11deg);
  opacity: 0.92;
  transition: opacity 0.5s ease;
}

.kv-english-3d.is-webgl-ready .kv-english-3d__fallback {
  opacity: 0;
}

.kv-english-3d__fallback span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.25rem;
  min-height: 2.65rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(225, 255, 238, 0.78)),
    radial-gradient(circle at 18% 18%, rgba(255, 198, 23, 0.28), transparent 34%);
  color: var(--kv-3d-ink);
  box-shadow:
    0 18px 38px rgba(0, 45, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: clamp(0.72rem, 1.25vw, 0.95rem);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  backface-visibility: hidden;
  animation: kv-3d-word-orbit 13s linear infinite;
  animation-delay: var(--kv-word-delay, 0s);
}

.kv-english-3d__fallback span:nth-child(1) { --kv-word-angle: 0deg; --kv-word-inverse: 0deg; --kv-word-delay: 0s; }
.kv-english-3d__fallback span:nth-child(2) { --kv-word-angle: 60deg; --kv-word-inverse: -60deg; --kv-word-delay: -2.1s; }
.kv-english-3d__fallback span:nth-child(3) { --kv-word-angle: 120deg; --kv-word-inverse: -120deg; --kv-word-delay: -4.2s; }
.kv-english-3d__fallback span:nth-child(4) { --kv-word-angle: 180deg; --kv-word-inverse: -180deg; --kv-word-delay: -6.3s; }
.kv-english-3d__fallback span:nth-child(5) { --kv-word-angle: 240deg; --kv-word-inverse: -240deg; --kv-word-delay: -8.4s; }
.kv-english-3d__fallback span:nth-child(6) { --kv-word-angle: 300deg; --kv-word-inverse: -300deg; --kv-word-delay: -10.5s; }

@keyframes kv-3d-word-orbit {
  from {
    transform:
      translate(-50%, -50%)
      rotateZ(var(--kv-word-angle, 0deg))
      translateX(clamp(7rem, 16vw, 14rem))
      rotateZ(var(--kv-word-inverse, 0deg))
      translateZ(24px);
  }
  to {
    transform:
      translate(-50%, -50%)
      rotateZ(calc(var(--kv-word-angle, 0deg) + 360deg))
      translateX(clamp(7rem, 16vw, 14rem))
      rotateZ(calc(var(--kv-word-inverse, 0deg) - 360deg))
      translateZ(24px);
  }
}

.kv-english-3d__ring {
  position: absolute;
  right: clamp(2rem, 10vw, 11rem);
  top: 48%;
  width: clamp(18rem, 42vw, 42rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  opacity: 0.55;
  box-shadow:
    0 0 44px rgba(66, 208, 139, 0.18),
    inset 0 0 42px rgba(255, 198, 23, 0.08);
}

.kv-english-3d__ring--one {
  transform: translateY(-50%) rotateX(70deg) rotateZ(-18deg);
  animation: kv-3d-ring-one 18s linear infinite;
}

.kv-english-3d__ring--two {
  width: clamp(13rem, 32vw, 30rem);
  right: clamp(4rem, 15vw, 16rem);
  opacity: 0.42;
  transform: translateY(-50%) rotateX(65deg) rotateZ(32deg);
  animation: kv-3d-ring-two 13s linear infinite;
}

@keyframes kv-3d-ring-one {
  from { transform: translateY(-50%) rotateX(70deg) rotateZ(-18deg); }
  to { transform: translateY(-50%) rotateX(70deg) rotateZ(342deg); }
}

@keyframes kv-3d-ring-two {
  from { transform: translateY(-50%) rotateX(65deg) rotateZ(32deg); }
  to { transform: translateY(-50%) rotateX(65deg) rotateZ(-328deg); }
}

.kv-hero__content {
  transform-style: preserve-3d;
}

.kv-hero__title {
  text-shadow:
    0 5px 24px rgba(0, 32, 18, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.08);
}

.kv-hero-badges--inline .kv-hero-badge,
.kv-stat,
.kv-course-card,
.kv-path-card,
.kv-process-card,
.kv-teacher-card,
.kv-testimonial-card,
.kv-form-panel {
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.kv-hero-badges--inline .kv-hero-badge {
  position: relative;
  border-color: rgba(255, 255, 255, 0.74);
  box-shadow:
    0 16px 34px rgba(0, 45, 24, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.kv-hero-badges--inline .kv-hero-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.48), transparent 38%, rgba(255, 198, 23, 0.16));
  pointer-events: none;
  opacity: 0.9;
}

.kv-depth-section {
  position: relative;
  isolation: isolate;
}

.kv-depth-section::before {
  content: "";
  position: absolute;
  inset: 1.25rem 0 auto;
  height: 11rem;
  z-index: -1;
  pointer-events: none;
  opacity: var(--kv-depth-opacity, 0);
  background:
    radial-gradient(circle at 18% 42%, rgba(255, 198, 23, 0.14), transparent 30%),
    radial-gradient(circle at 82% 16%, rgba(66, 208, 139, 0.13), transparent 34%),
    linear-gradient(90deg, transparent, rgba(10, 107, 61, 0.06), transparent);
  transform: translate3d(0, var(--kv-section-depth-y, 0px), 0);
  transition: opacity 0.28s ease;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block {
  position: relative;
  overflow: clip;
  opacity: 0.3;
  clip-path: inset(7% 0 0 0 round 10px);
  filter: blur(9px) saturate(0.94);
  transform: translate3d(0, 64px, 0) scale(0.975) rotateX(3deg);
  transform-origin: center bottom;
  transition:
    opacity var(--kv-motion-cinematic) var(--kv-motion-ease-content) var(--kv-scroll-block-delay, 0ms),
    transform var(--kv-motion-cinematic) var(--kv-motion-ease-content) var(--kv-scroll-block-delay, 0ms),
    filter var(--kv-motion-cinematic) var(--kv-motion-ease-content) var(--kv-scroll-block-delay, 0ms),
    clip-path var(--kv-motion-cinematic) var(--kv-motion-ease-content) var(--kv-scroll-block-delay, 0ms);
  will-change: opacity, transform, filter, clip-path;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block[data-kv-scroll-flow="left"]:not(.is-scroll-visible) {
  transform: translate3d(-42px, 58px, 0) scale(0.975) rotateZ(-0.8deg);
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block[data-kv-scroll-flow="right"]:not(.is-scroll-visible) {
  transform: translate3d(42px, 58px, 0) scale(0.975) rotateZ(0.8deg);
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block[data-kv-scroll-flow="zoom"]:not(.is-scroll-visible) {
  transform: translate3d(0, 56px, 0) scale(0.95);
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block.is-scroll-visible {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0);
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(105deg,
      transparent 22%,
      rgba(255, 255, 255, 0.34) 43%,
      rgba(255, 198, 23, 0.12) 50%,
      transparent 68%);
  transform: translate3d(-120%, 0, 0);
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block.is-scroll-visible::after {
  animation: kv-scroll-block-sweep var(--kv-motion-slow) var(--kv-motion-ease-ui) 0.18s both;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item {
  opacity: 0 !important;
  filter: blur(7px) saturate(0.94) !important;
  transform: translate3d(0, 34px, 0) scale(0.982) !important;
  transition:
    opacity var(--kv-motion-slow) var(--kv-motion-ease-content) var(--kv-scroll-item-delay, 0ms) !important,
    transform var(--kv-motion-slow) var(--kv-motion-ease-content) var(--kv-scroll-item-delay, 0ms) !important,
    filter var(--kv-motion-slow) var(--kv-motion-ease-content) var(--kv-scroll-item-delay, 0ms) !important;
  will-change: opacity, transform, filter;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item.is-revealed:not(.is-scroll-item-visible),
body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item.is-gamer-in:not(.is-scroll-item-visible) {
  opacity: 0 !important;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item[data-kv-item-fx="glide-left"]:not(.is-scroll-item-visible) {
  transform: translate3d(-44px, 30px, 0) scale(0.972) rotateZ(-0.8deg) !important;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item[data-kv-item-fx="glide-right"]:not(.is-scroll-item-visible) {
  transform: translate3d(44px, 30px, 0) scale(0.972) rotateZ(0.8deg) !important;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item[data-kv-item-fx="focus"]:not(.is-scroll-item-visible) {
  transform: translate3d(0, 34px, 0) scale(0.93) !important;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item[data-kv-item-fx="tilt"]:not(.is-scroll-item-visible) {
  transform: perspective(900px) rotateX(9deg) translate3d(0, 38px, 0) scale(0.968) !important;
  transform-origin: center bottom;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item[data-kv-item-fx="settle"]:not(.is-scroll-item-visible) {
  transform: translate3d(0, 22px, 0) scale(1.025) !important;
  transform-origin: center top;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item.is-scroll-item-visible {
  opacity: 1 !important;
  filter: blur(0) saturate(1) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item--card.is-scroll-item-visible {
  animation: kv-scroll-item-focus var(--kv-motion-normal) var(--kv-motion-ease-ui) var(--kv-scroll-item-delay, 0ms);
}

@keyframes kv-scroll-block-sweep {
  0% { opacity: 0; transform: translate3d(-120%, 0, 0); }
  18% { opacity: 0.86; }
  100% { opacity: 0; transform: translate3d(120%, 0, 0); }
}

@keyframes kv-scroll-item-focus {
  0% {
    box-shadow: none;
  }
  38% {
    box-shadow:
      0 14px 34px rgba(6, 73, 45, 0.14),
      0 0 0 1px rgba(255, 198, 23, 0.16);
  }
  100% {
    box-shadow: none;
  }
}

body.kv-js-ready .kv-scroll-block.is-scroll-visible .kv-section__head,
body.kv-js-ready .kv-scroll-block.is-scroll-visible .kv-kicker,
body.kv-js-ready .kv-scroll-block.is-scroll-visible h2,
body.kv-js-ready .kv-scroll-block.is-scroll-visible h3 {
  text-wrap: balance;
}

.kv-course-card,
.kv-path-card,
.kv-process-card,
.kv-teacher-card,
.kv-testimonial-card {
  will-change: transform;
}

.kv-course-card:hover,
.kv-path-card:hover,
.kv-process-card:hover,
.kv-teacher-card:hover,
.kv-testimonial-card:hover {
  box-shadow:
    0 24px 60px rgba(6, 73, 45, 0.16),
    0 0 0 1px rgba(255, 198, 23, 0.22);
}

.kv-form-panel {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 28px 80px rgba(0, 45, 24, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.kv-form-panel::before {
  content: "";
  position: absolute;
  inset: -35% auto auto -30%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 198, 23, 0.18), transparent 62%);
  pointer-events: none;
}

@media (max-width: 767px) {
  .kv-english-3d {
    opacity: 0.42;
  }

  .kv-english-3d__canvas {
    width: 128vw;
    right: -44vw;
    top: 14%;
    height: 70%;
  }

  .kv-english-3d__fallback {
    right: -11rem;
    width: 34rem;
    height: 24rem;
    top: 28%;
    transform: rotateX(60deg) rotateZ(-15deg) scale(0.76);
  }

  .kv-english-3d__fallback span {
    min-width: 6rem;
    min-height: 2.25rem;
    font-size: 0.68rem;
  }

  .kv-english-3d__ring {
    right: -12rem;
    width: 28rem;
    opacity: 0.32;
  }

  .kv-english-3d__ring--two {
    right: -7rem;
    width: 20rem;
  }

  .kv-course-card:hover,
  .kv-path-card:hover,
  .kv-process-card:hover,
  .kv-teacher-card:hover,
  .kv-testimonial-card:hover {
    box-shadow: 0 14px 34px rgba(6, 73, 45, 0.12);
  }
}

/* Mobile/tablet: tắt ẩn section (backup nếu JS chưa kịp chạy) */
@media (max-width: 1023px) {
  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block,
  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block:not(.is-scroll-visible),
  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item,
  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item:not(.is-scroll-item-visible) {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kv-english-3d__canvas {
    display: none;
  }

  .kv-english-3d__fallback,
  .kv-english-3d__fallback span,
  .kv-english-3d__ring {
    animation: none !important;
    transition: none !important;
  }

  .kv-english-3d__fallback {
    opacity: 0.28;
  }

  .kv-depth-section::before {
    transform: none;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block:not(.is-scroll-visible) {
    opacity: 1 !important;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block.is-scroll-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-block::after {
    display: none !important;
  }

  body.kv-scroll-fx-active.kv-js-ready .kv-scroll-item {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}