/* heroSwiper.css - style tối giản cho hero slideshow */

.intro-section {
  width: 100%;
  max-width: 90%;
  margin: 20px auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.heroSwiper .swiper-slide {
  display: flex;
  
  height: 500px; /* hoặc tùy chỉnh */
}

}

.intro-left, .intro-right {
  flex: 1 1 50%;
  box-sizing: border-box;
}

.intro-left {
  background-color: #003100;
  color: #fff;
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.intro-left h2 {
  font-size: 32px;
  margin-bottom: 15px;
}

.intro-left p {
  font-size: 18px;
  line-height: 1.6;
}

.intro-right {
  background-color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  width: 100%;
  align-items: center;
  padding: 0;            /* Bỏ padding nếu có */
  overflow: hidden;
}

.intro-right img {
  width: 100%;           /* Ảnh rộng 100% phần intro-right */
  height: auto;          /* Giữ tỉ lệ */
  object-fit: cover;     /* Ảnh phủ đầy vùng, có thể cắt nhẹ */
  display: block;
  max-height: 100%;      /* Giới hạn chiều cao không vượt quá container */
}

.swiper-pagination {
  text-align: center;
  padding: 15px 0;
  background: #fff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

/* Responsive mobile */
@media (max-width: 768px) {
  .heroSwiper .swiper-slide {
    flex-direction: column;
    height: auto !important; /* Đặt auto để slide co lại vừa nội dung */
    min-height: 400px; /* hoặc tùy chỉnh để giữ chiều cao hợp lý */
  }
  .intro-left, .intro-right {
    flex: 1 1 100%;
    border-radius: 0 !important;
    padding: 20px;
    text-align: center;
  }
  .intro-left {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }
  .intro-right {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }
  .intro-right img {
    max-height: 300px;
    margin: 0 auto;
    width: auto;
  }
}