/* =====================================================================
   B06 — Mục dự án: sửa lỗi
   =====================================================================
   Nạp sau b06.css và layout.css.

   1. NÚT CHUYỂN DỰ ÁN KHÔNG LÀM GÌ TRÊN MÁY TÍNH
      Trên màn 1440px cả ba dự án đã hiện cạnh nhau, thẻ 405x587, không
      còn gì để cuộn. Nhưng hai mũi tên trái phải và ba chấm chỉ số vẫn
      hiển thị.

      Đo được: bấm mũi tên "dự án tiếp theo" thì transform, opacity và
      box-shadow của cả ba thẻ KHÔNG đổi một giá trị nào. js/b06-1.js chỉ
      gọi lệnh cuộn khi màn hình dưới 780px, ngoài ra nó chỉ gắn một lớp
      CSS mà không có kiểu nào ăn vào.

      Tức là trên máy tính có năm nút bấm vào không xảy ra gì. Khách bấm
      hai ba lần rồi kết luận website hỏng — tệ hơn là không có nút.

      Sửa: chỉ hiện nút và chấm ở khổ mà băng chuyền thật sự hoạt động.

   2. HÀNG GIÁ TRỊ CŨNG LÀ DẢI CUỘN NGANG GIẤU
      Bốn mục "Dự án đã triển khai / Doanh nghiệp tin tưởng / Khách hàng
      hài lòng / Hỗ trợ & đồng hành" nằm trong dải rộng 836px trong khung
      337px, cuộn ngang, không có gợi ý. Khách thấy hai mục đầu là hết.
      Sửa: xếp thành lưới 2x2.
   ===================================================================== */

/* --- 1. Chỉ hiện nút điều hướng khi băng chuyền có tác dụng ---------- */

@media (min-width: 781px) {
  .b06 .b06__nav,
  .b06 .b06__pagination {
    display: none;
  }
}

/* --- 2. Hàng giá trị: lưới 2x2 thay cho dải cuộn --------------------- */

@media (max-width: 780px) {
  .b06 .b06__trust {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
  }

  .b06 .b06__trust-item {
    min-width: 0;
    padding: 12px 10px;
  }

  .b06 .b06__trust-copy strong {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .b06 .b06__trust-copy span {
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-width: 420px) {
  .b06 .b06__trust {
    grid-template-columns: 1fr;
  }
}