/* ==========================================================================
   CTA Banner Section - Đăng ký kiểm tra trình độ (Figma Node 1:634)
   ========================================================================== */

.cta-banner-section {
  position: relative;
  background-color: var(--primary-color); /* Nền màu xanh ngọc nhận diện thương hiệu */
  padding: 60px 0;
  min-height: 246px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Các nét vẽ trang trí hai bên */
.cta-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.decor-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.9; /* Giảm nhẹ opacity để hòa quyện với nền xanh */
}

/* Định vị họa tiết lượn sóng bên trái */
.decor-left {
  left: -15px;
  top: -15px;
  width: 319px;
  height: 316px;
}

.decor-left-2 {
  left: 130px;
  bottom: 0px;
  width: 134px;
  height: 134px;
}

/* Định vị hình cánh diều bên phải */
.decor-right-kite {
  right: -7px;
  top: 5px;
  width: 189px;
  height: 108px;
}

/* Định vị các sóng vector bên phải */
.decor-right-vector {
  right: -30px;
  top: -37px;
  width: 523px;
  height: 269px;
}

/* Định vị các sóng vector bên phải */
.decor-right-vector-2 {
  right: 420px;
  top: 0px;
  width: 137px;
  height: 128px;
}

/* Vùng chứa nội dung chính để đảm bảo nằm trên các họa tiết */
.cta-container {
  z-index: 5;
}

/* Căn giữa toàn bộ chữ và nút bấm */
.cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Tiêu đề chính */
.cta-title {
  font-family: var(--font-main), sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Phụ đề */
.cta-subtitle {
  font-family: var(--font-main), sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.4;
}

/* Nút bấm vàng cam nổi bật */
.btn-cta-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #ffbb24; /* Màu vàng cam từ thiết kế Figma */
  color: #ffffff;
  font-family: var(--font-main), sans-serif;
  font-weight: 600;
  font-size: 24px; /* Cỡ chữ 24px theo Figma */
  padding: 14px 72px;
  border-radius: 16px; /* Bo góc 15px theo Figma */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

/* Hiệu ứng di chuột nổi bật cho nút bấm */
.btn-cta-submit:hover {
  background-color: #e5a61d;
  transform: translateY(-2px);
  box-shadow: 0px 6px 15px rgba(255, 187, 36, 0.4);
  color: #ffffff;
}

/* --- Responsive CSS --- */
@media (max-width: 991px) {
  .cta-banner-section {
    /* Giảm padding trên màn hình tablet */
    padding: 35px 0;
  }

  .cta-title {
    font-size: 28px;
  }

  .cta-subtitle {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .btn-cta-submit {
    font-size: 20px;
    padding: 12px 36px;
  }
  
  /* Ẩn bớt các họa tiết góc trên mobile để tránh che khuất nội dung */
  .cta-decor {
    display: none;
  }
}

@media (max-width: 576px) {
  .cta-banner-section {
    /* Giảm padding trên màn hình di động */
    padding: 25px 0;
  }

  .cta-title {
    /* Giảm thêm cỡ chữ tiêu đề trên di động nhỏ */
    font-size: 22px !important;
  }

  .cta-subtitle {
    /* Giảm thêm cỡ chữ mô tả trên di động nhỏ */
    font-size: 14px !important;
    margin-bottom: 16px;
  }

  .btn-cta-submit {
    /* Giảm thêm cỡ chữ nút trên di động nhỏ */
    font-size: 16px !important;
    padding: 10px 30px;
    width: 100%; /* Đưa nút bấm về full width trên mobile để dễ tương tác */
    max-width: 280px;
  }
}