/* =====================================================================
   B02 — Mục dịch vụ: sửa lỗi
   =====================================================================
   Nạp sau b02.css và layout.css.

   HAI VẤN ĐỀ ĐO ĐƯỢC

   1. Máy tính: sáu thẻ xếp một hàng, mỗi thẻ chỉ rộng 198px trên màn
      1440px, chữ mô tả 10,2px. Dưới 12px là mức mắt phải căng ra, nhất là
      chữ xám trên nền trắng.

   2. Điện thoại: sáu thẻ nằm trong một dải cuộn ngang dài 1.532px trong
      khung 339px — khách chỉ thấy 1,4 thẻ. Không có mũi tên, không có
      chấm chỉ số trang, không có chữ gợi ý. Phần lớn khách sẽ không biết
      công ty có sáu dịch vụ. Đây là danh mục dịch vụ chính của công ty,
      để khuất như vậy là mất việc.

   CÁCH SỬA
   Bỏ cuộn ngang, cho thẻ xuống dòng: 3 cột trên máy tính, 2 cột trên máy
   tính bảng, 1 cột trên điện thoại. Khách cuộn dọc là thấy hết sáu dịch
   vụ — cuộn dọc là thao tác ai cũng làm, cuộn ngang thì phải đoán.

   Thẻ rộng ra (198px lên khoảng 420px) nên chữ đọc được ở cỡ bình thường.
   ===================================================================== */

/* --- Lưới thay cho dải cuộn ngang ------------------------------------ */

.b02 .b02__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  /* Gỡ hết thuộc tính cuộn ngang của bản cũ */
  overflow: visible;
  scroll-snap-type: none;
  max-width: none;
  margin: 0;
  padding: 0;
}

.b02 .service {
  min-height: 0;
  scroll-snap-align: none;
}

/* --- Cỡ chữ đọc được ------------------------------------------------- */

.b02 .service__title {
  font-size: 17px;
  line-height: 1.4;
  margin-bottom: 9px;
}

.b02 .service__description {
  font-size: 13px;
  line-height: 1.75;
}

/* Thẻ rộng hơn thì chữ mô tả cần chừa chỗ cho nút mũi tên góc dưới phải */
.b02 .service__body {
  padding-bottom: 60px;
}

/* --- Vùng ảnh cao hơn cho cân với thẻ rộng --------------------------- */

.b02 .service__media {
  height: clamp(140px, 11vw, 190px);
}

/* --- Nút mở chi tiết -------------------------------------------------- */
/* Nút 36px chỉ có mũi tên, không có chữ. Trên điện thoại nới lên 44px
   (quy tắc chung ở layout.css), ở đây chỉ cần cho nó rõ hơn. */

.b02 .service__action {
  right: 16px;
  bottom: 16px;
}

/* --- Máy tính bảng ---------------------------------------------------- */

@media (max-width: 1100px) {
  .b02 .b02__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

/* --- Điện thoại -------------------------------------------------------- */

@media (max-width: 700px) {
  .b02 .b02__cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* Một cột thì thẻ nằm ngang gọn hơn: ảnh bên trái, chữ bên phải */
  .b02 .service {
    display: grid;
    grid-template-columns: 104px 1fr;
    align-items: center;
    min-height: 0;
  }

  .b02 .service__media {
    height: 100%;
    min-height: 104px;
    padding: 10px 0 10px 10px;
  }

  .b02 .service__body {
    padding: 16px 16px 52px;
  }

  .b02 .service__title {
    font-size: 15px;
  }

  .b02 .service__description {
    font-size: 12.5px;
  }

  /* Thẻ nổi bật đầu tiên vẫn giữ nền xanh, chỉ cần chữ sáng */
  .b02 .service--featured .service__description {
    color: #e1eeff;
  }
}