/* he-thong-truong.css */

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

/* ── SVG pin ─────────────────────────────────────────────────────────────── */
.vs-campus {
  cursor: pointer;
  outline: none;
}
.vs-campus:focus-visible {
  outline: 2px solid #6FC7B6;
  outline-offset: 4px;
}

/* ── Address link hover ──────────────────────────────────────────────────── */
.vs-htt-addr-link:hover {
  text-decoration-color: #6FC7B6 !important;
}

/* ── Campus CTA arrow nudge ─────────────────────────────────────────────── */
.vs-campus-cta:hover {
  gap: 12px !important;
}

/* ── Campus card: ring on hover / active ─────────────────────────────────── */
.vs-campus-card.is-active .vs-campus-card-inner,
.vs-campus-card:hover .vs-campus-card-inner {
  box-shadow: inset 0 0 0 2px #6FC7B6 !important;
}

/* ── Campus card: opacity filter ────────────────────────────────────────── */
.vs-campus-card {
  transition: opacity 300ms ease;
}

/* ── Campus section: image hover scale ──────────────────────────────────── */
.vs-campus-img-wrap img {
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.vs-campus-img-wrap:hover img {
  transform: scale(1.04);
}

/* ── Nen tang card hover ─────────────────────────────────────────────────── */
.vs-nt-card-img {
  transition: transform 400ms ease;
}
.vs-nt-card:hover .vs-nt-card-img {
  transform: scale(1.05);
}
.vs-nt-arrow {
  transition: transform 300ms ease;
}
.vs-nt-card:hover .vs-nt-arrow {
  transform: translateX(4px);
}

/* ── Responsive: tablet ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  #hero {
    height: 54vh !important;
    min-height: 320px !important;
  }
  #hero > div:last-child {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  /* Map + filter: stack vertically */
  #tim-truong > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  /* Campus sections: stack */
  .vs-campus-sec-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }
  .vs-campus-sec-grid > [style*="order:2"] {
    order: 2 !important;
  }

  /* Nen tang: stack */
  .vs-nt-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  /* Nen tang cards: 3-col stays on tablet */
}

@media (max-width: 900px) {
  #tim-truong,
  #pandora,
  #east-hanoi,
  #nen-tang {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 767px) {
  /* Nen tang cards: horizontal scroll on mobile */
  .vs-nt-cards {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    margin: 0 -20px !important;
    padding: 0 20px !important;
    gap: 16px !important;
  }
  .vs-nt-cards::-webkit-scrollbar {
    display: none;
  }
  .vs-nt-cards .vs-nt-card {
    flex: 0 0 260px !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  #hero > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #tim-truong,
  #pandora,
  #east-hanoi,
  #nen-tang {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }


  /* Chip labels: slightly smaller on mobile */
  .vs-chip {
    font-size: 13px !important;
    height: 36px !important;
    padding: 0 12px !important;
  }
}