/* home.css — styles riêng cho trang chủ 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;
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.vs-hero-wrap {
  position: relative;
}
@media (max-width: 767px) {
  .vs-hero-wrap { min-height: clamp(230px, 56vw, 800px) !important; }
}
.vs-slide {
  transition: opacity 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vs-hero-ctrl {
  transition: background 200ms ease, transform 200ms ease;
}
.vs-hero-ctrl:hover {
  background: rgba(30, 77, 90, 0.7) !important;
  transform: scale(1.08);
}
.vs-dot {
  transition: width 260ms ease, background 260ms ease;
  cursor: pointer;
}
.vs-dot.is-active {
  width: 28px !important;
  background: #FFFFFF !important;
}

/* ── Welcome ─────────────────────────────────────────────────────────────── */
.vs-welcome-arrow {
  transition: transform 240ms ease !important;
}
a:hover .vs-welcome-arrow {
  transform: translateX(6px) !important;
}

/* ── Vì sao chọn ─────────────────────────────────────────────────────────── */
.vs-why-card:hover {
  transform: scale(1.04);
  box-shadow: 0 16px 40px rgba(30, 77, 90, 0.25);
}

/* ── Chương trình ────────────────────────────────────────────────────────── */
.vs-prog-tab {
  transition: background 200ms ease, color 200ms ease !important;
}
.vs-prog-tab:hover:not(.is-active) {
  background: rgba(30, 77, 90, 0.08) !important;
}
.vs-prog-name {
  text-decoration: none;
  transition: color 200ms ease;
}
.vs-prog-name:hover {
  color: #6FC7B6 !important;
}
.vs-system-card:hover {
  background: rgba(30, 77, 90, 0.06) !important;
}

/* ── Trải nghiệm ─────────────────────────────────────────────────────────── */
.vs-exp-card:hover .vs-exp-img {
  transform: scale(1.05) !important;
}
.vs-exp-card:hover .vs-exp-arrow {
  transform: translateX(4px) !important;
}
.vs-exp-card:focus-visible {
  outline: 3px solid #6FC7B6;
  outline-offset: -3px;
}

/* ── Hệ thống trường ─────────────────────────────────────────────────────── */
.vs-school-card {
  text-decoration: none;
}
.vs-school-card:hover .vs-school-img {
  transform: scale(1.05) !important;
}
.vs-school-card:hover .vs-school-cta {
  gap: 14px !important;
}

/* ── Dấu ấn – Stats ─────────────────────────────────────────────────────── */
@keyframes vs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.vs-marquee-track {
  animation: vs-marquee 28s linear infinite;
}
.vs-marquee-wrap:hover .vs-marquee-track {
  animation-play-state: paused;
}
.vs-partner {
  opacity: 1 !important;
  background: #FFFFFF !important;
}

/* ── Câu chuyện ─────────────────────────────────────────────────────────── */
.vs-story-prev:hover,
.vs-story-next:hover {
  background: #1E4D5A !important;
  color: #6FC7B6 !important;
}

/* ── Tin tức ─────────────────────────────────────────────────────────────── */
.vs-news-card {
  text-decoration: none;
}
.vs-news-card:hover .vs-news-img {
  transform: scale(1.05) !important;
}
.vs-news-card:hover .vs-news-cta {
  gap: 14px !important;
}

/* ── Đăng ký ─────────────────────────────────────────────────────────────── */
#vs-register-form input:focus,
#vs-register-form select:focus {
  border-color: #1E4D5A !important;
  box-shadow: 0 0 0 3px rgba(30, 77, 90, 0.1);
}
#vs-reg-submit:hover:not(:disabled) {
  background: #6FC7B6 !important;
  color: #1E4D5A !important;
}
#vs-reg-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}
@keyframes vs-spin {
  to { transform: rotate(360deg); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .vs-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .vs-schools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  /* Hero */
  #hero {
    padding: 80px 24px 56px !important;
  }

  /* Welcome */
  #chao-mung {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .vs-home-welcome-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .vs-welcome-subtitle {
    font-size: 28px !important;
  }

  /* Vì sao */
  #vi-sao {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-why-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Chương trình */
  #chuong-trinh {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-prog-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vs-prog-panel.is-active {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .vs-systems-grid {
    grid-template-columns: 1fr !important;
  }

  /* Trải nghiệm */
  #trai-nghiem {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-exp-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Hệ thống trường */
  #he-thong {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-schools-grid {
    grid-template-columns: 1fr !important;
  }

  /* Dấu ấn */
  #dau-an {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Câu chuyện */
  #cau-chuyen {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-stories-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Tin tức */
  #tin-tuc {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-news-grid {
    grid-template-columns: 1fr !important;
  }

  /* Đăng ký */
  #dang-ky {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .vs-register-grid {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .vs-register-grid > *:first-child {
    width: 100% !important;
  }
}

@media (max-width: 600px) {
  #hero { padding: 72px 0 0 !important; }
  .vs-home-welcome-grid {
    gap: 16px !important;
  }
  #chao-mung, #vi-sao, #chuong-trinh, #trai-nghiem,
  #he-thong, #dau-an, #cau-chuyen, #tin-tuc, #dang-ky {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .vs-prog-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vs-exp-grid {
    grid-template-columns: 1fr !important;
  }
  .vs-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .vs-reg-fields {
    grid-template-columns: 1fr !important;
  }
  .vs-shield-wrap {
    width: min(320px, 90vw, 100%) !important;
  }
  #cau-chuyen .vs-story-slide blockquote {
    font-size: 18px !important;
  }
}