/* VSW-TC-01 · Hero */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: var(--vs-trang);
}

.hero-nen {
  position: static;
  order: 2;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.hero-nen picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-nen-anh {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
  transform-origin: right bottom;
  animation: hero-troi var(--vs-t-troi) var(--vs-ease) 1 both;
}

.hero-khung {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--vs-k6);
}

.hero-noi-dung {
  min-width: 0;
  grid-row: 2;
}

.hero-h1 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--vs-k2) var(--vs-k1);
  font-family: var(--vs-font-tieu-de);
  font-size: var(--vs-co-display);
  font-weight: 700;
  line-height: var(--vs-dong-display);
  color: var(--vs-blue);
  overflow-wrap: anywhere;
}

.hero-dong1,
.hero-dong2 {
  text-wrap: balance;
}

.hero-dong1 { grid-area: 1 / 1; }
.hero-dong2 { grid-area: 2 / 1 / auto / -1; }

.hero-nhan-lan {
  grid-area: 1 / 2;
  padding: var(--vs-k1) var(--vs-k4);
  border-radius: var(--vs-k9);
  background: var(--vs-gradient-dong-chay);
  color: var(--vs-trang);
  font-family: var(--vs-font-nhan);
  font-size: calc(var(--vs-co-noi-dung) + 2px);
  font-weight: 700;
  line-height: var(--vs-dong-nhan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-chu-de {
  margin-block: var(--vs-k5);
  padding-block: var(--vs-k3);
  border-block: 1px solid var(--vs-cyan);
}

.hero-chu-de-chinh {
  color: var(--vs-blue);
  font-family: var(--vs-font-noi-dung);
  font-size: var(--vs-co-h3);
  font-weight: 600;
}

.hero-chu-de-khac {
  margin-top: var(--vs-k1);
  color: var(--vs-muted);
  font-size: var(--vs-co-nho);
  font-weight: 400;
}

.hero-ngay, .hero-dia-diem {
  display: flex;
  align-items: flex-start;
  gap: var(--vs-k3);
  color: var(--vs-muted);
  font-size: var(--vs-co-noi-dung);
}

.hero-ngay svg, .hero-dia-diem svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: var(--vs-k1);
  color: var(--vs-teal-chu);
}

.hero-ngay time {
  color: var(--vs-ink);
  font-weight: 600;
  white-space: nowrap;
}

.hero-dia-diem { margin-top: var(--vs-k3); }
.hero-tai strong { color: var(--vs-teal-chu); font-weight: 700; }
.hero-dia-chi { display: block; font-size: var(--vs-co-nho); color: var(--vs-ink); }

.hero-cac-nut {
  display: flex;
  flex-direction: column;
  gap: var(--vs-k3);
  margin-top: var(--vs-k6);
}

.hero-cac-nut .vs-nut { width: 100%; }

.hero-logo-vung {
  grid-row: 1;
  justify-self: center;
  align-self: start;
}

.hero-logo { width: 240px; margin: 30px; }
.hero-logo-anh { width: 100%; height: auto; }

.hero-dai-ntt {
  position: relative;
  z-index: 1;
  order: 3;
  padding-block: var(--vs-k4);
  border-top: 1px solid var(--vs-line);
  background: var(--vs-trang);
}

.hero-dai-ntt:not(:has(.hero-ntt-logo)) { display: none; }

.hero-dai-ntt-khung, .hero-dai-ntt-ds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vs-k4);
}

.hero-dai-ntt-ds { min-width: 0; }

.hero-dai-ntt-nhan {
  color: var(--vs-teal-chu);
  font-family: var(--vs-font-nhan);
  font-size: var(--vs-co-nhan);
  font-weight: 600;
  line-height: var(--vs-dong-nhan);
}

.hero-ntt {
  max-width: 100%;
  padding: var(--vs-k2);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-bo-the);
  background: var(--vs-trang);
}

.hero-ntt-logo { width: auto; height: 56px; object-fit: contain; }
.hero-ntt--kim_cuong .hero-ntt-logo { height: 64px; }
.hero-ntt--bach_kim .hero-ntt-logo { height: 56px; }

@media (min-width: 768px) {
  .hero-khung { padding-block: var(--vs-k7); }
  .hero-h1 { column-gap: var(--vs-k3); }
  .hero-logo { width: 260px; margin: 32.5px; }
  .hero-cac-nut { flex-direction: row; flex-wrap: wrap; }
  .hero-cac-nut .vs-nut { width: auto; }
}

@media (min-width: 1024px) {
  .hero { min-height: 620px; }
  .hero-nen { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; }
  .hero-khung {
    flex: 1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--vs-khe-luoi-rong);
    padding-block: 0;
  }
  .hero-noi-dung { grid-area: 1 / 1 / auto / 8; padding-block: var(--vs-k9); }
  .hero-h1:lang(en) {
    font-size: max(var(--vs-cham-toi-thieu), calc(var(--vs-co-display) * 0.8));
  }
  .hero-logo-vung { grid-area: 1 / 8 / auto / 13; }
  .hero-logo { width: 280px; margin: 35px; }
}

@media (min-width: 1200px) {
  .hero { min-height: 640px; }
  .hero-logo { width: 320px; margin: 40px; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-nen-anh { object-position: 60% bottom; }
}

@keyframes hero-troi {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-nen-anh { animation: none; }
}