/* ============================================================
   portal-landing-page-styles.css
   Styles cho trang cổng portal chọn quốc gia
   Layout: video background + logo + country grid + bottom banner
   ============================================================ */

/* ===== RESET & BASE ===== */
* {
  padding: 0;
  margin: 0;
  /* Ngăn người dùng kéo thả các phần tử */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

body {
  font-family: Arial, sans-serif;
  /* Background tĩnh khi video chưa load */
  background: url("../img/bg.webp") no-repeat center / cover;
}

a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
}

/* ===== WRAPPER ===== */
.wrapper {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

/* ===== CONTAINER (nội dung chính, đặt trên background) ===== */
.container {
  width: 800px;
  max-width: 80%;
  height: 100vh;
  position: relative;
  z-index: 2;
}

/* ===== LOGO AREA (cố định phía trên) ===== */
.logo-area {
  width: 600px;
  max-width: 100%;
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.logo-img {
  width: 100%;
}

/* ===== COUNTRY LIST (lưới 4 quốc gia, canh giữa dọc) ===== */
.country-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  /* Canh giữa theo chiều dọc */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Mỗi ô quốc gia chiếm 25% → 4 cột */
.country-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.country-item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.country-item span {
  font-size: 18px;
  margin-top: 6px;
}

/* Cờ quốc gia GIF */
.flag {
  width: 90%;
  margin: 5%;
  max-width: 120px;
}

/* ===== BANNER AREA (cố định phía dưới) ===== */
.banner-link {
  display: block;
}

.banner-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 120px;
  /* Ghim xuống đáy trang */
  position: fixed;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.banner-img {
  width: 90%;
  max-width: 700px;
}

.banner-caption h4 {
  color: #fff;
  text-align: center;
  font-weight: bold;
  line-height: 1.5;
}

/* ===== GRADIENT phủ đáy trang (tạo độ mờ dần) ===== */
.gradient-overlay {
  position: fixed;
  width: 100%;
  height: 227px;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  z-index: 1;
  pointer-events: none;
}

/* ===== BACKGROUND (video nền, z-index thấp nhất) ===== */
.background {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Lớp phủ tối bán trong suốt lên trên video */
.bg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0.5;
  z-index: 1;
}

/* Video nền full screen */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Desktop: hiện pc, ẩn mobile */
.bg-desktop { display: block; }
.bg-mobile  { display: none;  }

/* ===== RESPONSIVE: Tablet (max 1024px) ===== */
@media screen and (max-width: 1024px) {
  .country-item span {
    font-size: 14px;
  }
}

/* ===== RESPONSIVE: Mobile (max 768px) ===== */
@media screen and (max-width: 768px) {
  .wrapper {
    height: 100%;
  }

  .container {
    height: 100%;
  }

  /* Đổi sang video mobile */
  .bg-desktop { display: none;  }
  .bg-mobile  { display: block; }

  /* Logo mobile: full width, canh trên */
  .logo-area {
    width: 100%;
    top: 5%;
  }

  /* Country grid: 2 cột thay vì 4 */
  .country-item {
    width: 50%;
    margin-top: 15px;
  }

  .country-list {
    position: fixed;
    top: 45%;
  }

  .flag {
    width: 45%;
    max-width: 100px;
  }

  /* Banner mobile */
  .banner-area {
    position: fixed;
    bottom: 10%;
    gap: 15px;
  }
}