/* about-us.css — styles riêng cho trang Câu chuyện Vietschool */

/* ── Scroll reveal ────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Link gạch chân hover ────────────────────────────────────────────────── */
.vs-link-underline:hover {
  gap: 14px !important;
}
.vs-why-au-cta:hover {
  gap: 16px !important;
  background: #a5a5ce !important;
}

/* ── Journey timeline pulse ──────────────────────────────────────────────── */
@keyframes vs-journey-pulse {
  0%   { transform: scale(1); opacity: 0.7; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.vs-journey-pulse {
  animation: vs-journey-pulse 2s ease-out infinite;
}

/* ── Journey responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vs-journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 40px !important;
  }
  .vs-journey-line {
    display: none !important;
  }
  .vs-journey-label {
    display: none !important;
  }
}
@media (max-width: 560px) {
  .vs-journey-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 20px !important;
  }
}

/* ── Philosophy responsive ───────────────────────────────────────────────── */
@media (max-width: 860px) {
  .vs-philosophy-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-philosophy-grid > div {
    box-shadow: none !important;
    padding: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 28px !important;
  }
  .vs-philosophy-grid > div:first-child {
    border-top: none;
    padding-top: 0 !important;
  }
}

/* ── Why shield axis ─────────────────────────────────────────────────────── */
.vs-why-au-pt:focus-visible {
  outline: 3px solid #6FC7B6;
  outline-offset: 6px;
  border-radius: 50%;
}

/* ── Why responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vs-why-au-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-why-au-conn {
    display: none !important;
  }
}

/* ── Partners marquee ────────────────────────────────────────────────────── */
@keyframes vs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.vs-partners-track:hover {
  animation-play-state: paused;
}
.vs-partner-card {
  opacity: 1 !important;
  background: #FFFFFF !important;
}
.vs-partner-card .vs-partner-name {
  color: #1E4D5A !important;
}
@media (prefers-reduced-motion: reduce) {
  .vs-partners-track {
    animation: none;
    overflow-x: auto;
  }
}
@media (max-width: 767px) {
  .vs-partners-header { padding: 0 20px !important; }
  #doi-tac { padding-left: 0 !important; padding-right: 0 !important; }
  .vs-partner-card { width: 160px !important; height: 90px !important; }
}

/* ── Team carousel ────────────────────────────────────────────────────────── */
.vs-team-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.vs-team-track::-webkit-scrollbar {
  display: none;
}
.vs-team-card[role="button"]:hover > div:first-child > div {
  transform: scale(1.04);
  transition: transform 300ms ease;
}
.vs-team-prev:hover,
.vs-team-next:hover {
  background: #f0f5f4 !important;
}

/* ── Team drawer ──────────────────────────────────────────────────────────── */
.vs-team-drawer-wrap {
  display: flex !important;
}
.vs-team-drawer-close:hover {
  color: #6FC7B6 !important;
}

/* ── Story two-column images responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .vs-story-two-imgs {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Growth grid responsive ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  .vs-growth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vs-growth-grid > div:nth-child(2n + 1) {
    box-shadow: none !important;
  }
}

/* ── General padding responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  #cau-chuyen,
  #triet-ly,
  #hanh-trinh,
  #vi-sao-chon,
  #doi-ngu > div,
  #doi-tac > div {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .vs-team-track {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #hero .container,
  #hero > div:last-child {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #cau-chuyen,
  #triet-ly,
  #hanh-trinh,
  #vi-sao-chon,
  #doi-ngu > div,
  #doi-tac > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .vs-team-track {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #hero .container,
  #hero > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}