/* ==========================================================================
   Vision & Mission Section Stylesheet - Khối "Tầm nhìn và Sứ mệnh" (Figma Node 1:2864)
   Lý do tách tệp riêng: Giúp dễ dàng quản lý mã nguồn, tăng tính mô-đun hóa 
   và dễ dàng bảo trì giao diện của phần Tầm nhìn - Sứ mệnh riêng biệt.
   ========================================================================== */

/* --- Khối Tầm nhìn và Sứ mệnh ---
   Lý do thiết kế: Khối chứa hai mục tiêu cốt lõi của trung tâm, được định dạng khoảng cách rộng để tạo cảm giác thoáng đãng */
.vision-mission-section {
  padding: 80px 0 100px;
  background-color: #ffffff;
  position: relative;
}

/* Tiêu đề căn giữa */
.section-header-centered {
  margin-bottom: 60px;
}

.vision-mission-title {
  font-family: var(--font-main), sans-serif;
  font-size: 36px;
  font-weight: 700;
  color: var(--text-darker, #0f0f0f);
  line-height: 1.3;
}
.vision-mission-title strong,
.vision-mission-title .text-highlight {
  color: var(--primary-color, #00aeef);
}

/* Vạch kẻ trang trí dưới tiêu đề chính, căn giữa đối xứng */
.vision-mission-decor-line {
  width: 120px;
  height: 4px;
  background-color: #0D307A;
  margin: 16px auto 0;
}

/* Kiểu dáng thẻ Tầm nhìn & Sứ mệnh */
.vision-mission-card {
  background-color: var(--bg-soft, #edf7fd);
  border-radius: 30px;
  padding: 40px;
  min-height: 295px; /* Đảm bảo chiều cao tối thiểu khớp thiết kế Figma */
  height: 100%; /* Đảm bảo 2 card cao bằng nhau khi cùng nằm trên 1 hàng của row */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0px 2px 8px 0px rgba(17, 29, 54, 0.16);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hiệu ứng hover nổi bật thẻ nhẹ nhàng */
.vision-mission-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 24px 0px rgba(17, 29, 54, 0.24);
}

/* Container của Icon trong card */
.card-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* Tầm nhìn icon: Figma width 88px */
.vision-icon img {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

/* Sứ mệnh icon: Figma width 74px */
.mission-icon img {
  width: 74px;
  height: 74px;
  object-fit: contain;
}

/* Tiêu đề của thẻ card */
.vision-mission-card .card-title {
  font-family: var(--font-main), sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-color, #00aeef);
  margin-bottom: 12px;
  line-height: 1.3;
}

/* Đoạn mô tả trong thẻ card */
.vision-mission-card .card-desc {
  font-family: var(--font-main), sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dark, rgba(50, 50, 50, 0.95));
  margin-bottom: 0;
}

/* ==========================================================================
   Tối ưu hóa hiển thị đáp ứng (Responsive Design)
   ========================================================================== */

@media (max-width: 991px) {
  .vision-mission-section {
    /* Giảm padding trên màn hình tablet */
    padding: 40px 0;
  }

  .vision-mission-title {
    /* Giảm cỡ chữ tiêu đề chính trên tablet */
    font-size: 30px;
  }

  .vision-mission-card .card-title {
    /* Giảm cỡ chữ tiêu đề card trên tablet */
    font-size: 25px;
  }

  .vision-mission-card .card-desc {
    /* Giảm cỡ chữ mô tả card trên tablet */
    font-size: 17px;
  }

  .section-header-centered {
    margin-bottom: 40px;
  }
}

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

  /* Cấu hình Responsive cho Tầm nhìn và Sứ mệnh */
  .vision-mission-title {
    /* Giảm thêm cỡ chữ tiêu đề chính trên di động nhỏ */
    font-size: 26px !important;
  }

  .vision-mission-card {
    padding: 30px 20px;
    min-height: auto; /* Cho phép giãn nở tự do trên màn hình hẹp */
  }

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

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