/* Cấu trúc chung */
.about-us {
    height: auto; /* Đổi chiều cao cố định thành tự động để phù hợp nội dung */
    background-color: #EEF1F5;
    position: relative;
    overflow: hidden;
  }
  
  
  .about-us p {
    text-align: left; /* Căn lề trái */
    color: #000;
    max-width: 860px;
  }
  
  .about-content {
    text-align: left; /* Căn lề trái */
    gap: 24px;
  }
  
  .about-us .section-title {
    text-align: left; /* Căn lề trái */
    color: var(--primary-color);
    /* margin-bottom: 10px; */
  }
  
  .main-title {
    text-align: left; /* Căn lề trái */
    color: #1a1a1a;
    /* margin-bottom: 15px; */
  }
  
  .about-us .responsive-layout {
    display: flex;
    flex-direction: row; /* Hình ảnh và văn bản nằm ngang trên web */
    align-items: flex-start;
    gap: 20px;
  }

  .about-content_main{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    /*gap: 20px;    Space between grid items */
  align-items: center; /* Align items vertically */
  padding-top: 12px;
  

  }
  .about-content_main-img{
    width: 100%;
  }
.image-container{
  padding-right: 16px;
  width: 100%;
}

@media (max-width: 1024px) {
  .about-content_main {
    grid-template-columns: 1fr; /* Chuyển sang một cột */
    gap: 15px; /* Giảm khoảng cách giữa các phần tử */
    padding: 15px; /* Giảm padding */
  }
}

/* Khi màn hình nhỏ hơn hoặc bằng 768px (Mobile) */
@media (max-width: 768px) {
  .about-content_main {
    grid-template-columns: 1fr; /* Một cột cho mobile */
    gap: 10px; /* Giảm khoảng cách thêm nữa */
    padding: 10px; /* Giảm padding thêm nữa */
  }
}
  
  .text-container {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 8px;
  }
  
  .about-us .card-body {
    /* padding: 20px; */
    color:#000;
  }
  
  .card-body b {
    display: block;
    margin-bottom: 10px;
    color: #1a1a1a;
  }
  
  /* Responsive Tablet (max-width: 768px) */
  @media (max-width: 768px) {
    .responsive-layout {
      flex-direction: column; /* Văn bản rớt xuống dưới hình ảnh */
    }
  
    .image-container,
    .text-container {
      flex: 1 1 100%;
    }
  
    .text-container {
      margin-top: 20px; /* Thêm khoảng cách giữa hình và text */
    }

    .about-us p {
      max-width: 656px;
    }
  }
  
  /* Responsive Mobile (max-width: 360px) */
  @media (max-width: 360px) {
    .responsive-layout {
      flex-direction: column; /* Cách hiển thị giống tablet */
    }
  
    .image-container img {
      width: 100%; /* Ảnh chiếm toàn bộ chiều rộng */
    }
  
    .text-container {
      margin-top: 15px; /* Điều chỉnh khoảng cách */
      padding: 0 10px; /* Thu gọn nội dung để phù hợp với màn hình nhỏ */
    }

    .about-us p {
      max-width: 328px;
    }
  }