/* =====================================================================
   B05 — Mục lý do chọn 30NICE: sửa lỗi
   =====================================================================
   Nạp sau b05.css và layout.css.

   ĐO ĐƯỢC TRÊN MÀN 375px
   Bốn thẻ lý do vẫn giữ hai cột như trên máy tính, nên mỗi thẻ chỉ rộng
   165px. Bên trong:
     nhãn "01 / GIẢI PHÁP RIÊNG"   9px
     tiêu đề                       12,5px
     đoạn mô tả                    10px trong cột rộng 141px
   Cột 141px ở cỡ 10px là khoảng 23 ký tự một dòng — hẹp hơn cả B03 trước
   khi sửa.

   Trên máy tính B05 ổn: ảnh hệ sinh thái 584px bên trái, bốn thẻ 309x261
   bên phải, mô tả 12px.

   CÁCH SỬA
   Dưới 600px cho mỗi thẻ một hàng, ảnh nhỏ bên trái, chữ bên phải. Cột
   chữ rộng gấp đôi nên chữ về cỡ đọc được.
   ===================================================================== */

@media (max-width: 600px) {
  /* Lưới hai cột nằm ở .benefits chứ không phải .right — nhắm nhầm thì
     thẻ vẫn kẹt 165px và nội dung tràn ra ngoài. */
  .b05 .benefits {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .b05 .benefit {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 14px;
    align-items: center;
    width: auto;
    /* b05.css khoá min-height 261px cho thẻ dọc; thẻ ngang không cần */
    min-height: 0;
    padding: 14px 16px;
    text-align: left;
  }

  /* Nhãn số và ảnh nằm cột trái, tiêu đề và mô tả nằm cột phải */
  .b05 .benefit .num {
    grid-column: 2;
    grid-row: 1;
    font-size: 10.5px;
    margin: 0 0 4px;
  }

  .b05 .benefit img {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 92px;
    height: 92px;
    object-fit: contain;
    margin: 0;
  }

  .b05 .benefit h3 {
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
    line-height: 1.35;
    margin: 0 0 5px;
  }

  .b05 .benefit p {
    grid-column: 2;
    grid-row: 3;
    font-size: 12.5px;
    line-height: 1.7;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   Máy tính: nhích cỡ mô tả cho bằng các khối khác
   ---------------------------------------------------------------------
   Mô tả trong thẻ lý do đang 12px trong khi thẻ dịch vụ B02 là 13px và
   thẻ giải pháp B03 là 14,8px. Thẻ rộng 309px thừa sức chứa 13px.
   --------------------------------------------------------------------- */

@media (min-width: 601px) {
  .b05 .benefit p {
    font-size: 13px;
    line-height: 1.75;
  }
}