.elementor-16139 .elementor-element.elementor-element-53ab2b0{--display:flex;}@media(max-width:767px){.elementor-16139 .elementor-element.elementor-element-53ab2b0{--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for html, class: .elementor-element-22f8f68 */.services-container {
  display: grid;
  grid-template-columns: 1fr; /* 1 cột duy nhất */
  gap: 24px;                  /* Khoảng cách giữa các item */
  padding: 16px 0;            /* Padding trên/dưới, bỏ padding trái/phải */
  width: 100%;                /* Chiếm hết chiều ngang màn hình */
  margin: 0;                  /* Sát vào mép trái */
}

/* .service-item là <a>, ép flex-row để icon nằm bên trái */
.services-container .service-item {
  display: flex;
  flex-direction: row;       /* Icon + text xếp ngang */
  align-items: center;       /* Căn giữa theo chiều dọc */
  text-align: left;          /* Bắt buộc text căn trái */
  text-decoration: none;     /* Bỏ gạch chân link */
  color: inherit;            /* Kế thừa màu chữ */
  padding: 8px 16px;         /* Khoảng cách so với mép */
  border-radius: 4px;
  transition: background-color 0.2s ease;
  margin: 0;                 /* Override margin mặc định */
}

.services-container .service-item:hover {
  background-color: #f0f9ff; /* Nền nhạt khi hover */
}

/* Icon cố định kích thước, cách text 16px để tăng khoảng cách */
.services-container .service-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;            /* Không cho icon co nhỏ */
  object-fit: contain;       /* Giữ tỉ lệ icon */
  margin-right: 16px;        /* Tăng khoảng cách giữa icon và text */
  display: block;
}

/* Container cho tiêu đề + mô tả */
.services-container .service-content {
  flex: 1;                   /* Chiếm phần còn lại */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* Căn giữa phần text nếu cần */
}

/* Tiêu đề (Roboto, 16px, đậm) */
.services-container .service-title {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #001042;
  line-height: 1.2;
  transition: color 0.2s ease;
}

/* Khi hover, đổi màu tiêu đề */
.services-container .service-item:hover .service-title {
  color: #2a9df4;            /* Xanh nhẹ khi hover */
}

/* Mô tả (Roboto, 14px) */
.services-container .service-description {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  margin: 0;
  color: #555555;
  line-height: 1.5;
}

/* Responsive: màn <= 480px */
@media (max-width: 480px) {
  .services-container {
    gap: 16px;
    padding: 12px 0;
  }

  .services-container .service-item {
    padding: 6px 12px;
  }

  .services-container .service-icon {
    width: 40px;
    height: 40px;
    margin-right: 12px; /* Giảm tí để phù hợp với mobile */
  }

  .services-container .service-title {
    font-size: 16px; /* Giữ 16px trên mobile */
  }

  .services-container .service-description {
    font-size: 14px; /* Giữ 14px trên mobile */
  }
}/* End custom CSS */