/* Bảng phong cách cho trang chủ (Home Page) - Hero Section */

.hero-section {
  position: relative;
  background-color: #edf7fd; /* Màu xanh nhạt đặc trưng của Hero theo Figma */
  padding: 60px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* --- Cột bên trái: Nội dung chữ và Nút bấm --- */

.hero-content {
  z-index: 10;
}

/* Tagline Đảm bảo đầu ra */
.hero-tagline-wrapper {
  margin-bottom: 24px;
}

.hero-tagline {
  display: inline-block;
  background-color: #ffffff;
  color: #00aeef;
  font-family: var(--font-main), sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0px 2px 8px rgba(0, 174, 239, 0.05);
}

/* Tiêu đề chính dạng viên thuốc */
.hero-title-pill-wrapper {
  margin-bottom: 16px;
}

.hero-title-pill {
  display: inline-block;
  background-color: #00aeef;
  color: #ffffff;
  font-family: var(--font-main), sans-serif;
  font-weight: 800;
  font-size: 36px;
  padding: 4px 13px 3px 16px;
  border-radius: 20px;
  line-height: 1.2;
}

/* Tiêu đề phụ */
.hero-subtitle {
  font-family: var(--font-main), sans-serif;
  font-weight: 800;
  font-size: 36px;
  color: #0d307a;
  margin-bottom: 25px;
  line-height: 1.2;
}

/* Đoạn miêu tả có vạch đứng màu xanh làm điểm nhấn */
.hero-desc-container {
  display: flex;
  align-items: start;
  gap: 12px;
  margin-bottom: 40px;
  max-width: 480px;
}

.hero-decorline {
  height: 60px;  
}

.hero-description {
  font-family: var(--font-main), sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #323232;
  margin-bottom: 0;
}

/* Nút kêu gọi hành động */
.hero-buttons {
  margin-top: 10px;
}

.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #00aeef;
  color: #ffffff;
  font-family: var(--font-main), sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 15px;
  border: 1px solid #007eff;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-hero-primary:hover {
  background-color: #008ece;
  border-color: #007eff;
  transform: translateY(-2px);
  box-shadow: 0px 4px 15px rgba(0, 174, 239, 0.3);
  color: #ffffff;
}

.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  color: #00aeef;
  font-family: var(--font-main), sans-serif;
  font-weight: 600;
  font-size: 18px;
  padding: 14px 32px;
  border-radius: 15px;
  border: 1px solid #00aeef;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-hero-secondary:hover {
  background-color: rgba(0, 174, 239, 0.05);
  transform: translateY(-2px);
  color: #00aeef;
}


/* --- Cột bên phải: Hình ảnh và Trang trí nổi bật --- */

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-wrapper {
  position: relative;
  width: 100%;
  max-width: 550px;
  height: 520px;
}

/* Khối hình ảnh giảng viên */
.hero-instructor-img {
  position: absolute;
  z-index: 2;
  scale: 1.2;
  top: 0px;
}

.instructor-avatar {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Huy hiệu (Badges) nổi */
.hero-badge {
  position: absolute;
  background-color: #ffffff;
  border-radius: 34px;
  padding-top: 3px;
  padding-right: 17px;
  padding-bottom: 3px;
  box-shadow: 0px 4px 15px rgba(193, 238, 255, 0.9);
  z-index: 5;
  transition: transform 0.3s ease;
}

.hero-badge:hover {
  transform: translateY(-5px); /* Hiệu ứng nổi nhẹ khi di chuột */
}


.badge-num {
  font-family: var(--font-main), sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: #000000;
  line-height: 1;
}

.badge-desc {
  font-family: var(--font-main), sans-serif;
  font-size: 13px;
  color: #000000;
  line-height: 1.2;
}

.badge-expert {
  left: -20px;
  top: 80px;
}

.badge-students {
  right: -20px;
  bottom: 50px;
}

/* Hộp trang trí ô vuông nhỏ */
.decor-box {
  position: absolute;
  width: 69px;
  height: 69px;
  border-radius: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
}

.decor-box-orange {
  left: 50px;
  top: 250px;
}


.decor-box-teal {
  background-color: #00b2bd;
  right: 10px;
  top: 100px;
}

.decor-box-teal .icon-placeholder {
  background-color: #ffffff;
}

/* Chấm tròn và Hình học nhỏ trang trí nền */
.decor-dot {
  position: absolute;
  border-radius: 50%;
  background-color: #00aeef;
  z-index: 1;
}

.decor-dot-1 {
  width: 18px;
  height: 18px;
  left: 150px;
  top: 170px;
}

.decor-dot-2 {
  width: 22px;
  height: 22px;
  right: 60px;
  top: 50px;
}

.decor-shape {
  position: absolute;
  z-index: 1;
}

.decor-shape-triangle {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 18px solid #00aeef;
  left: 180px;
  top: 30px;
  transform: rotate(16deg);
}

.decor-shape-blue-square {
  background-color: #00aeef;
  width: 18px;
  height: 18px;
  left: 70px;
  bottom: 150px;
  transform: rotate(15deg);
}

/* --- Thiết kế tương thích phản hồi (Responsive CSS) --- */

@media (max-width: 991px) {
  .hero-section {
    padding-top: 30px;
    padding-bottom: 0px;
  }
  
  .hero-content {
    text-align: center;
    margin-bottom: 50px;
  }

  .hero-title-pill {
    /* Giảm cỡ chữ tiêu đề dạng viên thuốc trên tablet */
    font-size: 32px;
  }

  .hero-subtitle {
    /* Giảm cỡ chữ phụ đề trên tablet */
    font-size: 32px;
  }
  
  .hero-desc-container {
    margin: 0 auto 30px;
    justify-content: center;
  }
  
  .hero-decorline {
    display: none; /* Ẩn vạch kẻ dọc trên mobile khi text căn giữa để đảm bảo thẩm mỹ */
  }
  
  .hero-description {
    /* Giảm cỡ chữ mô tả trên tablet */
    font-size: 17px;
    text-align: center;
  }
  
  .hero-buttons {
    justify-content: center;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    /* Giảm nhẹ cỡ chữ nút trên tablet */
    font-size: 17px;
    padding: 12px 28px;
  }
}

@media (max-width: 576px) {
  .hero-title-pill {
    /* Giảm thêm cỡ chữ tiêu đề dạng viên thuốc trên di động nhỏ */
    font-size: 24px !important;
    padding: 6px 20px;
  }
  
  .hero-subtitle {
    /* Giảm thêm cỡ chữ phụ đề trên di động nhỏ */
    font-size: 24px !important;
  }

  .hero-description {
    /* Giảm thêm cỡ chữ mô tả trên di động nhỏ */
    font-size: 15px !important;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    /* Giảm thêm cỡ chữ nút trên di động nhỏ */
    font-size: 15px !important;
    padding: 10px 24px !important;
  }

  .hero-tagline {
    /* Giảm cỡ chữ nhãn phụ trên di động nhỏ */
    font-size: 14px !important;
  }

  .hero-content {
    margin-bottom: 0px;
  }

  .hero-visual {
    margin-bottom: 30px;
  }
  
  /* Thiết lập khung chứa ảnh và họa tiết trang trí trên di động */
  .hero-img-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 380px !important;
    height: 200px !important;
    margin: 30px auto 0 !important;
    display: block !important;
    overflow: visible !important;
  }
  
  /* Căn chỉnh hình ảnh giảng viên */
  .hero-instructor-img {
    position: absolute !important;
    bottom: 0 !important;
    top: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 240px !important;
    height: auto !important;
    scale: 1.15 !important;
    z-index: 2 !important;
  }
  
  .hero-instructor-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Huy hiệu nổi bật trên di động */
  .hero-badge {
    position: absolute !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    box-shadow: 0px 4px 10px rgba(193, 238, 255, 0.8) !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: max-content !important;
  }
  
  .badge-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  .badge-num {
    font-size: 14px !important;
  }

  .badge-desc {
    font-size: 10px !important;
  }

  .badge-expert {
    left: -10px !important;
    top: 60px !important;
  }

  .badge-students {
    right: -10px !important;
    bottom: 40px !important;
  }
  
  /* Hộp trang trí nhỏ trên di động */
  .decor-box {
    display: none;
  }
  
  /* Các điểm chấm tròn và hình học nhỏ nền di động */
  .decor-dot, .decor-shape {
    display: none;
  }
  
  .decor-dot-1 {
    left: 100px !important;
    top: 150px !important;
    width: 10px !important;
    height: 10px !important;
  }
  
  .decor-dot-2 {
    right: 50px !important;
    top: 40px !important;
    width: 12px !important;
    height: 12px !important;
  }
  
  .decor-shape-triangle {
    left: 120px !important;
    top: 20px !important;
    border-left: 7px solid transparent !important;
    border-right: 7px solid transparent !important;
    border-bottom: 12px solid #00aeef !important;
  }
  
  .decor-shape-blue-square {
    left: 40px !important;
    bottom: 120px !important;
    width: 10px !important;
    height: 10px !important;
  }

  /* Tối ưu hóa thêm cho các màn hình siêu nhỏ (Mobile S - dưới 360px) */
  @media (max-width: 360px) {
    .hero-img-wrapper {
      height: 170px !important;
      max-width: 300px !important;
    }
    
    .hero-instructor-img {
      width: 200px !important;
      scale: 1.1 !important;
    }
    
    .badge-expert {
      left: -5px !important;
      top: 50px !important;
    }
    
    .badge-students {
      right: -5px !important;
      bottom: 30px !important;
    }
    
    .decor-box {
      width: 40px !important;
      height: 40px !important;
    }
    
    .decor-box img {
      width: 18px !important;
      height: 18px !important;
    }
    
    .decor-box-orange {
      left: 15px !important;
      top: 200px !important;
    }
    
    .decor-box-teal {
      right: 10px !important;
      top: 90px !important;
    }
  }
}

/* Tối ưu hóa phần hình ảnh và họa tiết trang trí của Hero Section trên màn hình laptop từ 992px đến 1200px (bao gồm màn hình 1024px) 
   để không gian hiển thị không bị tràn và các thành phần đè lên nhau chuẩn xác */
@media (min-width: 992px) and (max-width: 1200px) {
  .hero-section {
    padding: 0px;
  }

  .hero-bg-fan {
    /* Giảm kích thước quạt trang trí để cân đối với khung hình laptop nhỏ hơn */
    width: 400px !important;
    height: 440px !important;
    top: 170px !important;
    right: 0px !important;
  }

  .hero-instructor-img {
    /* Điều chỉnh vị trí và tỷ lệ để hình giảng viên đè lên quạt trang trí một cách chính xác */
    top: 80px !important;
    left: 30px !important;
    scale: 1.3 !important;
    z-index: 3 !important;
  }

  .decor-shape-blue-square {
    display: none;
  }
}