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

/* ── Level nav bar: ẩn scrollbar ─────────────────────────────────────────── */
nav[aria-label="Chuyển cấp học"] div > div {
  scrollbar-width: none;
}
nav[aria-label="Chuyển cấp học"] div > div::-webkit-scrollbar {
  display: none;
}
nav[aria-label="Chuyển cấp học"] a:hover {
  opacity: 1 !important;
}

/* ── f7 bento: hover scale on photo tiles ────────────────────────────────── */
.vs-f7-card:hover img {
  transform: scale(1.05);
}

/* ── f7 link hover ───────────────────────────────────────────────────────── */
.vs-link-underline:hover {
  gap: 12px !important;
}

/* ── lo-trinh vertical card: hover scale ────────────────────────────────── */
.vs-sys-card-v:hover img {
  transform: scale(1.04);
}

/* ── Roadmap: overflow scroll mobile ────────────────────────────────────── */
#vs-rm-wrap {
  overflow-x: auto;
}

/* ── f7 bento responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-f7-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
  }
  .vs-f7-grid > div[style*="grid-area:1/1/3/3"],
  .vs-f7-grid > div[style*="grid-area:1/3/3/5"],
  .vs-f7-grid > div[style*="grid-area:1/5/2/6"],
  .vs-f7-grid > div[style*="grid-area:1/6/2/7"],
  .vs-f7-grid > div[style*="grid-area:2/5/3/7"],
  .vs-f7-grid > div[style*="grid-area:3/1/4/4"],
  .vs-f7-grid > div[style*="grid-area:3/4/4/5"],
  .vs-f7-grid > div[style*="grid-area:3/5/4/7"] {
    grid-area: auto !important;
    min-height: 200px;
  }
  /* split tile: stack vertically */
  .vs-f7-split {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-f7-split-img {
    min-height: 180px;
  }
}

/* ── Một ngày: responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-mot-ngay-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-mot-ngay-img-wrap {
    height: auto !important;
    aspect-ratio: 4/3 !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
  }
}

/* ── Giá trị: full width mobile ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-gia-tri-col {
    width: 100% !important;
  }
  .vs-g8-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── Lo trinh: responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-lo-trinh-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ── General padding responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #hero > div:last-child,
  #hero + nav {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  #chuong-trinh-hoc,
  #gia-tri-them,
  #hoc-nhu-the-nao,
  #lo-trinh,
  #phat-trien,
  #khong-gian {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #hero > div:last-child,
  #hero + nav {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #chuong-trinh-hoc,
  #gia-tri-them,
  #hoc-nhu-the-nao,
  #lo-trinh,
  #phat-trien,
  #khong-gian {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}