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

/* ── Anchor nav: hide scrollbar ──────────────────────────────────────────── */
#vs-tn-anchor {
  scrollbar-width: none;
}
#vs-tn-anchor::-webkit-scrollbar {
  display: none;
}
.vs-tn-anchor-link {
  white-space: nowrap;
  text-decoration: none;
  transition: color 200ms ease, box-shadow 200ms ease;
}
.vs-tn-anchor-link:hover {
  color: #1E4D5A !important;
}
.vs-tn-anchor-link.is-active {
  color: #1E4D5A !important;
  box-shadow: inset 0 -2px 0 #6FC7B6;
}

/* ── CLB carousel: hide scrollbar ────────────────────────────────────────── */
#vs-clb-track {
  scrollbar-width: none;
}
#vs-clb-track::-webkit-scrollbar {
  display: none;
}
#vs-clb-track.is-dragging {
  cursor: grabbing !important;
  scroll-snap-type: none;
}
.vs-clb-card:hover img {
  transform: scale(1.04);
}

/* ── Polaroid hover: straighten ──────────────────────────────────────────── */
.vs-polaroid:hover {
  transform: rotate(0deg) !important;
  z-index: 10 !important;
}

/* ── Wellbeing: connector lines ──────────────────────────────────────────── */
.vs-wb-left > div:first-child > span:last-child,
.vs-wb-right > div:first-child > span:first-child {
  flex-shrink: 0;
}

/* ── Collage cell: hover caption ─────────────────────────────────────────── */
.vs-collage-cell:hover .vs-collage-cap {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.vs-collage-cell:hover img {
  transform: scale(1.05);
}

/* ── CLB nav button hover ─────────────────────────────────────────────────── */
#vs-clb-prev:hover,
#vs-clb-next:hover {
  background: #1E4D5A !important;
  color: #FFFFFF !important;
}

/* ── General padding responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #gioi-thieu,
  #hoc-tap,
  #ngoai-troi > div:nth-child(3),
  #the-thao-nghe-thuat,
  #clb-du-an,
  #wellbeing,
  #van-hoa-cong-dong {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  #gioi-thieu,
  #hoc-tap,
  #ngoai-troi > div:nth-child(3),
  #the-thao-nghe-thuat,
  #clb-du-an,
  #wellbeing,
  #van-hoa-cong-dong {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Hoc tap: responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-ht-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-ht-card {
    margin-top: 0 !important;
  }
}

/* ── The thao: slider arrow & list button hover ──────────────────────────── */
.vs-tt-prev2:hover,
.vs-tt-next2:hover {
  background: #1E4D5A !important;
  color: #FFFFFF !important;
}
.vs-tt-lb:hover {
  text-decoration: underline;
  text-decoration-color: #6FC7B6;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ── The thao: responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-tt-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .vs-tt-grid > div:nth-child(2) {
    display: none !important;
  }
}

/* ── CLB carousel: responsive card width ─────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-clb-card {
    flex: 0 0 calc((100% - 40px) / 2.3) !important;
  }
}

@media (max-width: 600px) {
  .vs-clb-card {
    flex: 0 0 calc(100% - 20px) !important;
  }
}

/* ── Wellbeing: responsive (3-col → single-col mobile) ──────────────────── */
@media (max-width: 1024px) {
  .vs-wb-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
  }
  .vs-wb-left,
  .vs-wb-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px !important;
    width: 100%;
  }
  .vs-wb-left > div,
  .vs-wb-right > div {
    justify-content: flex-start !important;
    text-align: left !important;
    flex-direction: row !important;
    gap: 12px !important;
  }
  .vs-wb-left > div > div {
    text-align: left !important;
  }
  /* hide connector lines */
  .vs-wb-left > div > span:last-child,
  .vs-wb-right > div > span:first-child {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .vs-wb-left,
  .vs-wb-right {
    display: block !important;
  }
}

/* ── Van hoa: responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-vh-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 40px !important;
  }
}

/* ── Collage: mobile 2-col layout ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vs-collage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .vs-collage-cell:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .vs-collage-cell:nth-child(2) {
    grid-column: 1 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1 !important;
  }
  .vs-collage-cell:nth-child(3) {
    grid-column: 2 !important;
    grid-row: 2 !important;
    aspect-ratio: 1 / 1 !important;
  }
  .vs-collage-cell:nth-child(4) {
    grid-column: 1 !important;
    grid-row: 3 !important;
    aspect-ratio: 4 / 3 !important;
  }
  .vs-collage-cell:nth-child(5) {
    grid-column: 2 !important;
    grid-row: 3 !important;
    aspect-ratio: 4 / 3 !important;
  }
}