/* =================================================================== */
/* SECTION: LEARNING PATH (ID: #learning-path-section)
/* Cấu trúc đã được tổ chức lại và responsive
/* =================================================================== */

/* --- 1. Cấu trúc cơ bản (Áp dụng cho mọi màn hình) --- */

#learning-path-section {
  position: relative;
  background: none; /* Giữ lại style của bạn */
  padding: 60px 0; /* Thêm khoảng đệm trên dưới cho thoáng */
}

.language-container {
  position: relative;
  max-width: 1200px; /* Chiều rộng tối đa của nội dung */
  margin: 0 auto; /* Tự động căn giữa */
  padding: 0 20px; /* Tạo khoảng đệm hai bên để nội dung không dính vào cạnh màn hình */
  z-index: 1;
}

.language-header {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 40px 0;
}

/* --- 2. Lưới chứa các card --- */

.language-cards {
  display: flex;
  flex-wrap: wrap; /* QUAN TRỌNG: Cho phép card tự xuống hàng khi không đủ chỗ */
  gap: 30px; /* Khoảng cách đồng đều giữa các card, tốt hơn margin */
  justify-content: center; /* Căn giữa các card theo mặc định */
}

/* --- 3. Kiểu dáng của một card --- */

.card {
  flex: 1 1 300px;
  max-width: 350px;
  min-height: 460px;
  height: auto;

  border-radius: 20px;
  color: white;
  padding: 30px;

  display: flex;
  flex-direction: column;

  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card_description {
  flex-grow: 1;
}

/* --- 4. Màu sắc riêng của từng card (Giữ nguyên) --- */

.language-cards .card-ielts {
  background-color: #003bd6;
}

.language-cards .card-toeic {
  background-color: #00b035;
}

.language-cards .card-preptalk {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* =================================================================== */
/* --- 5. ĐIỂM NGẮT RESPONSIVE --- */
/* =================================================================== */

@media screen and (min-width: 992px) {
  .language-cards {
    justify-content: space-between;
  }
}

/* Cho màn hình Mobile (Ví dụ: dưới 576px) */
@media screen and (max-width: 576px) {
  .card {
    flex-basis: 100%;
    min-height: auto; /* Bỏ chiều cao tối thiểu để card ngắn hơn */
    padding: 25px;
  }

  .language-header {
    margin-bottom: 30px;
  }
}