/* =====================================================================
   B04 — Mục quy trình: sửa lỗi
   =====================================================================
   Nạp sau b04.css và layout.css.

   ĐO ĐƯỢC TRÊN MÀN 375px
   Năm bước nằm trong một dải cuộn ngang dài 1.536px trong khung 375px.
   Khách chỉ thấy bước 01 và một mẩu bước 02. Không có mũi tên, không có
   chấm chỉ số, không có chữ gợi ý, không có đường nối — tuyệt đối không
   có gì cho biết còn ba bước nữa ở bên phải.

   Nặng hơn trường hợp B02 ở chỗ: đây là QUY TRÌNH, tức là một chuỗi có
   thứ tự. Khách xem quy trình để yên tâm rằng công ty làm việc bài bản.
   Thấy mỗi bước đầu thì thông điệp đó mất sạch.

   Trên máy tính B04 ổn: năm thẻ một hàng, thẻ 243x371, chữ 14,4px.

   CÁCH SỬA
   Dưới 850px đổi thành dòng thời gian dọc: mỗi bước một hàng, ảnh nhỏ
   bên trái, số thứ tự và nội dung bên phải, có đường nối chạy dọc giữa
   các bước để thấy rõ đây là chuỗi nối tiếp chứ không phải năm thẻ rời.
   ===================================================================== */

@media (max-width: 850px) {
  .b04 .process-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    overflow: visible;
    scroll-snap-type: none;
    /* Dải bước vốn tràn sát hai mép màn hình trong khi mọi khối khác chừa
       lề. Trả nó về đúng lề chung. */
    padding-inline: var(--gutter);
  }

  .b04 .process-card {
    display: grid;
    grid-template-columns: 76px 1fr;
    column-gap: 16px;
    align-items: start;
    text-align: left;
    min-width: 0;
    padding: 16px 18px 18px 16px;
    scroll-snap-align: none;
    /* Viền dưới dày 6px là nét nhận dạng của thẻ, giữ lại nhưng mỏng hơn
       cho hợp với thẻ nằm ngang */
    border-bottom-width: 4px;
  }

  /* Ảnh minh hoạ thu nhỏ về một ô vuông bên trái */
  .b04 .process-art {
    grid-row: 1 / span 2;
    width: 76px;
    height: 76px;
    margin: 0;
    align-self: start;
  }

  .b04 .process-art img {
    width: 100%;
    height: 100%;
  }

  .b04 .step-header {
    align-items: center;
    margin: 0 0 6px;
  }

  .b04 .process-card h3 {
    font-size: 16px;
    line-height: 1.35;
  }

  .b04 .process-card p {
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
  }

  /* ----- Đường nối giữa các bước -----
     Chạy từ dưới ảnh của bước này xuống ảnh của bước sau, cho thấy đây là
     một chuỗi nối tiếp. Bước cuối không vẽ. */
  .b04 .process-card:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 53px;
    top: 100px;
    bottom: -14px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(#9fe4f6, #d7eefb);
  }
}

@media (max-width: 480px) {
  .b04 .process-card {
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
  }

  .b04 .process-art {
    width: 64px;
    height: 64px;
  }

  .b04 .process-card:not(:last-child)::after {
    left: 47px;
    top: 88px;
  }

  .b04 .process-card p {
    font-size: 12.5px;
  }
}

/* ---------------------------------------------------------------------
   GHI CHÚ — tabindex="0" trên từng thẻ
   ---------------------------------------------------------------------
   Năm thẻ bước đều có tabindex="0" nhưng không bấm được, không mở gì cả.
   Khi còn cuộn ngang thì nó giúp người dùng bàn phím đưa từng thẻ vào tầm
   nhìn. Giờ đã xếp dọc nên nó thành năm điểm dừng Tab không làm gì.

   Chưa gỡ vì phải sửa HTML và không gây hại; nếu rà trợ năng tổng thể thì
   nên bỏ.
   --------------------------------------------------------------------- */