/* Container bao bọc lưới logo (Mặc định cho máy tính - 5 cột) */
.partner-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 cột đều nhau */
  gap: 20px;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* Khung chứa từng logo */
.logo-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px; /* Thêm padding để logo không sát vào mép */
  background-color: #fff; /* Tùy chọn nền trắng cho logo nổi bật */
  border: 1px solid #eaeaea; /* Tùy chọn viền mờ */
  border-radius: 8px; /* Tùy chọn bo góc nhẹ cho đẹp */
}

/* Định dạng kích thước cho hình ảnh logo */
.logo-item img {
  width: 100%;           /* Chiếm 100% khung chứa nó để tự động thu phóng */
  max-width: 320px;      /* Nhưng không được lớn hơn 320px */
  height: auto;          /* Chiều cao tự động cân đối theo tỷ lệ */
  aspect-ratio: 4/3;     /* Giữ tỷ lệ khung hình giống với 320x240 */
  object-fit: contain;   /* Đảm bảo logo không bị cắt xén hay méo */
}

/* =========================================
   MÃ RESPONSIVE (TỰ ĐỘNG THÍCH ỨNG MÀN HÌNH)
   ========================================= */

/* Dành cho Màn hình máy tính bảng (Tablet) - Chiều rộng từ 1024px trở xuống */
@media (max-width: 1024px) {
  .partner-logo-grid {
    grid-template-columns: repeat(3, 1fr); /* Thu xuống còn 3 cột */
  }
}

/* Dành cho Màn hình điện thoại lớn - Chiều rộng từ 768px trở xuống */
@media (max-width: 768px) {
  .partner-logo-grid {
    grid-template-columns: repeat(2, 1fr); /* Thu xuống còn 2 cột */
    gap: 15px; /* Giảm khoảng cách giữa các logo một chút cho vừa mắt */
  }
}

/* Dành cho Màn hình điện thoại nhỏ - Chiều rộng từ 480px trở xuống */
@media (max-width: 480px) {
  .partner-logo-grid {
    grid-template-columns: repeat(2, 1fr); /* Vẫn giữ 2 cột nhưng logo sẽ tự thu nhỏ lại nhờ max-width */
    gap: 10px;
  }
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia đều thành 2 cột */
    gap: 16px 24px; /* Khoảng cách: 20px giữa các hàng, 40px giữa các cột */
    margin-top: 8px;
}

.training-item {
    margin-bottom: 8px; /* Khoảng cách phía dưới giữa các mục */
    
    /* Phần thêm mới để tạo border nhẹ */
    border: 0.5px solid #f0f0f0;    /* Đường viền mỏng 1px, màu xám nhạt */
    padding: 8px;                /* Tạo khoảng cách từ chữ đến đường viền cho dễ nhìn */
    border-radius: 6px;           /* Bo tròn nhẹ 4 góc để giao diện mềm mại hơn */
    background-color: #fefefe;    /* Lớp nền màu trắng sữa nhẹ (tùy chọn) */
}

/* Đảm bảo hiển thị đẹp trên điện thoại (tự chuyển về 1 cột) */
@media (max-width: 768px) {
    .training-grid {
        grid-template-columns: 1fr;
    }
}