/* Custom style sheet and variable declarations */
:root {
  --color-primary: #17309d;
  --color-yellow-accent: #fc0;
  --color-red-lp: #a62120;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #17309d;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0f2066;
}

/* Khối 1 (Hero Section) chiếm trọn vừa đúng 1 màn hình trên mobile, tablet và desktop */
.hero-section {
  background-color: #eff7fd;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 70px;
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .hero-section {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding-top: 85px;
    padding-bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .hero-section {
    padding-top: 95px;
    padding-bottom: 28px;
  }
}

.hero-section h1.section-title {
  font-family: Phudu, sans-serif;
  font-size: 1.25rem !important;
  line-height: 1.35;
  margin-bottom: 2rem !important;
}

@media (min-width: 768px) {
  .hero-section h1.section-title {
    font-size: 1.75rem !important;
    line-height: 1.35;
    margin-bottom: clamp(3.5rem, 8vh, 5rem) !important;
  }
}

@media (min-width: 1024px) {
  .hero-section h1.section-title {
    font-size: 2.1rem !important;
    line-height: 1.35;
    margin-bottom: clamp(4.5rem, 11.5vh, 8rem) !important;
  }
}

.hero-video-frame {
  max-height: 30vh;
  aspect-ratio: 16 / 9;
}

/* Tiêu đề giới thiệu chương trình (nhỏ gọn hơn so với tiêu đề chính cuộc thi) */
.hero-intro-title {
  font-family: Phudu, sans-serif;
  font-size: 1.2rem !important;
  line-height: 1.3;
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 700;
}

@media (min-width: 768px) {
  .hero-intro-title {
    font-size: 1.45rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-intro-title {
    font-size: 1.75rem !important;
  }
}

/* Khung video Màn 2 (van-hoa-section) chuẩn kích thước khối ảnh cũ */
.van-hoa-section {
  background-color: #f7fbff;
}

.van-hoa-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 440px;
}