/* =====================================================================
   B03 — Mục giải pháp: sửa lỗi
   =====================================================================
   Nạp sau b03.css và layout.css.

   ĐO ĐƯỢC TRÊN MÀN 375px
   Mỗi thẻ chia đôi: 165px cho ảnh, 172px cho chữ. Đoạn mô tả nằm trong
   cột rộng 156px ở cỡ chữ 10px — khoảng 25 ký tự một dòng. Đọc một đoạn
   bốn dòng kiểu đó mệt hơn nhiều so với cảm giác khi nhìn lướt.

   Trên máy tính thì B03 ổn: thẻ 612x294, chữ 14,8px, nút 45px.

   CÁCH SỬA
   Dưới 560px xếp dọc: ảnh nằm trên chiếm hết bề ngang, chữ xuống dưới
   cũng hết bề ngang. Mô tả có 307px thay vì 156px, cỡ chữ về 12,5px.
   ===================================================================== */

@media (max-width: 560px) {
  /* b03.css khoá chiều cao thẻ ở 235px. Xếp dọc mà vẫn khoá thì nội dung
     tràn ra ngoài, nên phải trả chiều cao về tự động. */
  .b03 .b03__card {
    display: block;
    height: auto;
    min-height: 0;
  }

  /* Khung ảnh phải có chiều cao xác định, nếu không height:100% của ảnh
     bên trong không có gì để tính theo và ảnh giữ nguyên cỡ gốc 310px. */
  .b03 .b03__illustration {
    display: block;
    width: 100%;
    height: 168px;
    padding: 12px;
    padding-left: 12px;
  }

  .b03 .b03__illustration img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    transform: none;
  }

  .b03 .b03__content {
    width: auto;
    padding: 16px 18px 20px;
  }

  .b03 .b03__content h3 {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  .b03 .b03__content p {
    font-size: 12.5px;
    line-height: 1.75;
  }

  /* Nút mũi tên về góc dưới phải cho khỏi đè lên chữ */
  .b03 .b03__go {
    margin-top: 14px;
  }
}

/* ---------------------------------------------------------------------
   GHI CHÚ — nhãn "01 / DIGITAL COMMERCE"
   ---------------------------------------------------------------------
   b03.css đặt .b03__category{display:none} ở mọi khổ màn, rồi lại có
   thêm quy tắc font-size:8px trong @media(max-width:520px). Quy tắc 8px
   đó không bao giờ có tác dụng vì display:none thắng — là CSS chết.

   Chữ trong nhãn vẫn nằm trong HTML nhưng không ai thấy, kể cả trình đọc
   màn hình (display:none ẩn với cả công nghệ trợ giúp).

   Cố ý KHÔNG bật lại: nhãn viết bằng tiếng Anh trên trang tiếng Việt,
   bật lên là thêm chữ mà không thêm nghĩa cho khách. Nếu muốn dùng thì
   nên đổi sang tiếng Việt rồi mới bật.
   --------------------------------------------------------------------- */