/* 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;        /* fallback cho browser cũ */
  justify-content: safe center;   /* modern: overflow → flex-start, không vượt lên trên padding */
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  /* Mobile: logo = 8vw → padding đủ để luôn thấp hơn header */
  padding-top: clamp(90px, calc(8vw + 58px), 140px);
  padding-bottom: 20px;
}

@media (min-width: 768px) {
  .hero-section {
    /* Tablet: logo vẫn 8vw, text to hơn → cần thêm space; không khóa cứng height: 100vh để text không bị cắt */
    padding-top: clamp(105px, calc(8vw + 52px), 145px);
    padding-bottom: 24px;
    height: auto;
    max-height: none;
  }
}

@media (min-width: 1024px) {
  .hero-section {
    /* Desktop: logo đổi sang 4vw (lg:h-[4vw]) */
    padding-top: clamp(105px, calc(4vw + 70px), 145px);
    padding-bottom: 28px;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  .hero-section {
    /* Desktop ngang: layout vừa vặn đúng 1 màn hình */
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }
}

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

@media (min-width: 768px) {
  .hero-section h1.section-title {
    font-size: 1.75rem !important;
    line-height: 1.35;
    /* Tablet dọc: khoảng cách vừa phải để không đẩy video ra khỏi màn hình */
    margin-bottom: clamp(1rem, 2vh, 1.5rem) !important;
  }
}

@media (min-width: 1024px) {
  .hero-section h1.section-title {
    font-size: 2.1rem !important;
    line-height: 1.35;
    /* Co giãn theo chiều cao màn hình: trên màn 589px chỉ ~20-25px, màn lớn bung lên ~56px */
    margin-bottom: clamp(1.25rem, 3.5vh, 3.5rem) !important;
  }
}

/* Lưới 2 cột ngang (Cột Video 60% - Cột Chữ 40%) CHỈ kích hoạt khi màn hình rộng từ 1024px VÀ ở chế độ ngang (Landscape) */
@media (min-width: 1024px) and (orientation: landscape) {
  .hero-grid-7-3 {
    display: grid !important;
    grid-template-columns: 6fr 4fr !important;
  }
}

.van-hoa-section {
  background-color: #f7fbff;
}

/* Căn giữa nội dung màn 2 — áp dụng cả mobile lẫn tablet/desktop */
.man-2-footer-screen .van-hoa-section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;        /* fallback */
  justify-content: safe center;   /* modern: không overflow lên trên */
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 0;
}

/* Màn số 2 và Footer vừa vặn trong 1 màn hình */
.man-2-footer-screen {
  background-color: #f7fbff;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

/* Footer chiếm đúng 1/4 màn hình trên mobile */
.don-vi-dong-hanh-section {
  min-height: 25vh;
  min-height: 25dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .man-2-footer-screen {
    height: auto;
    max-height: none;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  .man-2-footer-screen {
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  /* Footer chiếm đúng 1/4 màn hình trên desktop ngang */
  .man-2-footer-screen .don-vi-dong-hanh-section {
    flex: 0 0 25vh;
    flex: 0 0 25dvh;
    min-height: 25vh;
    min-height: 25dvh;
  }
}

/* Logo đơn vị chủ trì (Footer) - tỷ lệ chuẩn theo chiều cao footer 25vh */
.don-vi-dong-hanh-logo {
  height: 52px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 2px 8px rgba(255,255,255,0.18));
}

@media (min-width: 768px) {
  .don-vi-dong-hanh-logo {
    height: 62px !important;
  }
}

@media (min-width: 1024px) {
  .don-vi-dong-hanh-logo {
    height: 72px !important;
  }
}

/* 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.4rem !important;
  }
}

@media (min-width: 1024px) {
  .hero-intro-title {
    font-size: clamp(1.3rem, 1.6vw, 1.65rem) !important;
  }
}

.hero-video-frame,
.van-hoa-video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Màn ngắn 589px co về ~270px (an toàn không cắt chân), màn cao (iPad Pro 1194-1366px) bung lên tới 450px lấp khoảng trống */
  max-height: clamp(250px, 46vh, 450px);
}

@media (min-width: 1280px) and (orientation: landscape) {
  .hero-video-frame,
  .van-hoa-video-frame {
    max-height: clamp(320px, 48vh, 480px);
  }
}