body {
  background-color: #0f0f0f !important;
}

/* page setup */
.container {
  max-width: var(--max-width-page);
  overflow-x: hidden;
  margin: auto;
}

/* banner */
.banner {
  width: 100%;
  aspect-ratio: 1366 / 778;
  max-height: calc(min(100vw, 1920px) * 778 / 1366);
}

.banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



.about {
  width: 100%;
  color: var(--main-color-white);
}

.about__container {
  display: flex;
  gap: 150px;
}

.about__info {
  flex-shrink: 0;
  width: 35%;
}

.about__title {
  text-transform: uppercase;
  margin: 0;
}

.about__title--thin {
  font-weight: 300;
  font-size: var(--font-size-sub-title);
}

.about__title--bold {
  font-weight: 600;
  font-size: var(--font-size-title);
}

.about__meta {
  margin-top: 20px;
  font-size: var(--font-size-23);
  display: flex;
  justify-content: space-between;
}

.about__content {
  font-size: var(--font-size-25);
  line-height: var(--line-height);
  font-weight: 300;
  display: flex;
  gap: 30px;
  flex-direction: column;
}

.about__content .title {
  font-size: var(--font-size-30);
  font-weight: 400;
  line-height: var(--font-size-30);
}

/* Team Section */
.team {
  text-align: center;
  max-width: var(--max-width-page);
  overflow-x: hidden;
  margin: auto;
}

.team .title {
  font-size: var(--font-size-45);
  font-weight: 600;
  margin-bottom: var(--spacing-y);
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--main-color-white);
}

.team__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-content: center;
}

.member {
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* Avatar wrapper giữ tỉ lệ */
.member .avt {
  width: 100%;
  aspect-ratio: 560 / 677;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.member .avt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  transform: scale(1.05);
}

/* Hover effect (ảnh phóng nhẹ) */
.member:hover .avt img {
  transform: scale(1);
}

/* Name & Role */
.member .name {
  margin-top: 20px;
  font-size: var(--font-size-25);
  font-weight: 600;
  color: var(--main-color-white);

}

.member .role {
  margin-top: 8px;
  font-size: var(--font-size-23);
  font-weight: 300;
  color: var(--main-color-white);
  text-align: left;
}



.behind .behind-title {
  font-size: var(--font-size-45);
  font-weight: 700;
   color: var(--main-color-white);
   text-align: center;
}

.behind .behind-content {
  padding-top: 20px;
  font-size: var(--font-size-30);
  font-weight: 300;
   color: var(--main-color-white);
   text-align: center;
   line-height: 1.5;
}


.production {
  max-width: 1920;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

/* Mỗi block */
.production__block {
  display: flex;
  gap: 40px;
  align-items: stretch
}

/* Đảo thứ tự (ảnh bên trái) */
.production__block--reverse {
  flex-direction: row-reverse;
}

/* Text chiếm 70% */
.production__text {
  flex: 1 1 50%;
  color: #fff;
  min-height: 100%;
  display: flex; 
  height: 100%;
  flex-direction: column;
}

/* Title & Subtitle */
.production__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-40);
  margin-bottom: 20px;
}

.production_content {
  flex: 1;
  /* tự động giãn hết phần trống */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* nếu muốn list dính đáy */
}

.production__subtitle {
  font-family: 'Lato', sans-serif;
  font-size: var(--font-size-25);
  margin-bottom: 30px;
  font-weight: 400;
}

/* List */
.production__list {
  font-family: 'Lato', sans-serif;
  font-size: var(--font-size-25);
  font-weight: 300;
  line-height: 1.6;
  padding-left: 20px;
  color: #fff;
}

/* Image chiếm 30%, giữ tỉ lệ */
.production__image {
  flex: 1 1 50%;
    border-radius: var(--border-radius);
      aspect-ratio: 874 / 656;
       width: 100%;
       overflow: hidden;
}

.production__image img {
  height: 100%;
  object-fit: cover;
  object-position: center;
 border-radius: var(--border-radius);
  display: block;
  transform: scale(1.05);
  transition: all 0.4s ease;
  
}

.production:hover .production__image img {
  transform: scale(1);
} 

/* Responsive tablet */
@media (max-width: 1024px) {
  .production__block {
    flex-direction: column;
  }

  .production__block--reverse {
    flex-direction: column;
  }

  .production__image,
  .production__text {
    flex: 1 1 100%;
  }
}

@media (max-width: 1280px) {
    .about__container {
    gap: 50px;
  }
  .about__info {
    width: 30%;
  }
}

/* Responsive: tablet (2 cột) */
@media (max-width: 1024px) {
  .team__container {
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
  }

  .about__container {
    flex-direction: column;
    gap: 50px;
  }

  .about__info {
    width: 100%;
  }
}

/* Mobile: 1 cột */
@media (max-width: 768px) {
  .team__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
    .about__container {
    gap: 30px;
  }
}