/* khung-giao-duc.css */

/* ── 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;
}

/* ── Kiến trúc — level cards ─────────────────────────────────────────────── */
.vs-level-card:hover img {
  transform: scale(1.04);
}
.vs-level-card:hover .vs-level-hover-grad {
  opacity: 1 !important;
}
.vs-level-card:hover .vs-level-btn {
  background: #FFFFFF !important;
  color: #1E4D5A !important;
}

@media (max-width: 860px) {
  .vs-arch-levels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .vs-arch-levels-grid > * {
    scroll-snap-align: start;
  }
}

/* ── Kiến trúc — system cards ────────────────────────────────────────────── */
.vs-sys-card:hover {
  background: rgba(30, 77, 90, 0.04) !important;
  box-shadow: inset 0 0 0 1.5px rgba(30, 77, 90, 0.4) !important;
  transform: translateY(-2px);
}
.vs-sys-card:hover .vs-sys-arrow {
  transform: translateX(4px) !important;
}

@media (max-width: 900px) {
  .vs-arch-sys-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .vs-arch-sys-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Chân dung K-12 ──────────────────────────────────────────────────────── */
.vs-cd-tab:hover:not([aria-selected="true"]) {
  transform: scale(1.02);
}
.vs-cd-tab:focus-visible {
  outline: 3px solid #6FC7B6;
  outline-offset: 4px;
}

@media (max-width: 860px) {
  .vs-cd-domains {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px !important;
  }
  .vs-cd-domains::-webkit-scrollbar { display: none; }
  .vs-cd-domains > button {
    flex: 0 0 200px;
    scroll-snap-align: start;
  }
}

/* ── Phương pháp ─────────────────────────────────────────────────────────── */
.vs-pm-tab:focus-visible {
  outline: 2px solid #6FC7B6;
  outline-offset: 3px;
}
.vs-pm-tab:hover:not([aria-selected="true"]) {
  background: #A4A4C5 !important;
  color: #1E4D5A !important;
  transform: translateX(4px);
}
.vs-pm-tab:hover:not([aria-selected="true"]) .vs-pm-tab-arrow {
  transform: translateX(4px);
}

.vs-pm-acc-btn:focus-visible {
  outline: 2px solid #6FC7B6;
  outline-offset: 3px;
}

@media (max-width: 600px) {
  #phuong-phap {
    padding: 56px 20px !important;
  }
}

/* ── 5 không gian ────────────────────────────────────────────────────────── */
.vs-kg-node {
  transition-property: opacity, transform !important;
}
.vs-kg-node:focus-visible {
  outline: 2px solid #6FC7B6;
  outline-offset: 4px;
  border-radius: 50%;
}

@media (max-width: 600px) {
  #khong-gian {
    padding: 0 20px !important;
  }
}

/* ── General padding responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  #kien-truc,
  #chan-dung,
  #phuong-phap,
  #khong-gian {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #hero > div:last-child {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #kien-truc,
  #chan-dung,
  #phuong-phap,
  #khong-gian {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #hero > div:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}