/* =========================================================================
   WINKO — ICON SYSTEM
   Nguồn: 05 · Icons (Figma) — 24×24, nét 1.75px, đầu/góc bo tròn.

   Dùng:
     <svg class="ico" aria-hidden="true"><use href="#wk-truck"></use></svg>

   Sprite nằm inline ở đầu <body> (assets/icons/winko-icons.svg).
   KHÔNG tham chiếu sprite qua file ngoài — Safari không hỗ trợ <use> liên file
   ổn định, và inline thì bớt được một request.

   Icon mang nghĩa (không có nhãn chữ đi kèm) phải có <title> hoặc aria-label
   trên phần tử cha. Icon trang trí (cạnh chữ đã rõ nghĩa) để aria-hidden="true".
   ========================================================================= */

.ico {
  /* 4 cỡ trong spec: 16 / 20 / 24 / 32 */
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  /* Nét và màu thừa kế từ đây, không lặp lại trên từng <use> */
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: inherit;
}

.ico-16 { width: 16px; height: 16px; stroke-width: 2;    }  /* nét dày hơn để không biến mất ở cỡ nhỏ */
.ico-20 { width: 20px; height: 20px; stroke-width: 1.9;  }
.ico-24 { width: 24px; height: 24px; stroke-width: 1.75; }
.ico-32 { width: 32px; height: 32px; stroke-width: 1.6;  }  /* nét mảnh hơn để không bị nặng ở cỡ lớn */

/* ── Màu: chỉ dùng token, không hardcode ────────────────────────────────
   Icon mặc định thừa kế màu chữ của phần tử cha (currentColor). Bốn class
   dưới đây chỉ dùng khi cần lệch khỏi màu chữ.                          */
.ico-brand   { color: var(--color-brand-blue); }
.ico-accent  { color: var(--color-brand-yellow); }
.ico-mute    { color: var(--color-mute); }
.ico-on-dark { color: #fff; }

/* ── Ô icon 48px (dùng ở .why-cell và các service block) ────────────────
   Khớp .why-icon sẵn có: 48×48, bo 12px, nền blue-50, icon xanh thương hiệu. */
.icon-tile {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-brand-blue-50);
  color: var(--color-brand-blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.icon-tile .ico { width: 24px; height: 24px; }

.icon-tile.on-dark {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-brand-yellow);
}

/* ── Mũi tên trong link/nút: trượt sang phải khi hover ──────────────────
   Thay cho .tile-arrow đang tự vẽ inline ở mỗi thẻ.                      */
.ico-arrow {
  transition: transform var(--dur-base) var(--ease-out);
}
a:hover > .ico-arrow,
.service-tile:hover .ico-arrow,
.btn:hover > .ico-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .ico-arrow { transition: none; }
  a:hover > .ico-arrow,
  .service-tile:hover .ico-arrow,
  .btn:hover > .ico-arrow { transform: none; }
}

/* ── Icon trong nút ─────────────────────────────────────────────────────
   Nút đã có gap 8px từ .btn, chỉ cần khoá cỡ để nút không giật.          */
.btn .ico { width: 18px; height: 18px; stroke-width: 2; }

/* ── Icon đứng cạnh chữ trong danh sách ────────────────────────────────
   Căn theo dòng chữ đầu tiên, không căn giữa khối.                       */
.checklist li .ico,
.lane-list li .ico {
  margin-top: 1px;
  align-self: flex-start;
}

/* =========================================================================
   VỊ TRÍ CỤ THỂ TRÊN TRANG CHỦ
   Các rule dưới đây đi kèm đợt thay icon inline sang sprite.
   ========================================================================= */

/* .checklist — đã có icon check thật, tắt chấm tròn pseudo-element cũ
   để không hiện hai dấu chồng nhau. */
/* Only lists whose items carry a real <svg class="ico"> drop the CSS check dot;
   plain lists keep it (the home page lists have no inline icon). */
.checklist li:has(.ico)::before { display: none !important; }
.checklist li { align-items: flex-start; }
.checklist li .ico { margin-top: 2px; color: var(--color-brand-blue); }

/* .lane-mode — chip mode tuyến, giờ có icon đứng trước chữ */
.lane-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Service tile — icon thay vai trò phân biệt mà số 01–06 không làm được.
   Đặt trên số, cùng màu thương hiệu. */
.tile-ico {
  color: var(--color-brand-blue);
  display: block;
  margin-bottom: 10px;
}

/* Caption case Alibaba — gộp icon + chữ vào một khối định vị chung,
   thay vì để .case-tile span tự absolute. */
.case-tile .case-cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.case-tile .case-cap span { position: static; }
.case-tile .case-cap .ico { color: var(--color-brand-yellow); }

/* stat-row ở section Cases — icon nhỏ phía trên con số */
.stat-ico { display: block; margin-bottom: 6px; }

/* Giữ nguyên trọng lượng nét cũ ở các vị trí đã có sẵn kích thước riêng.
   .tile-arrow svg / .btn-link svg render ở 16px — ở cỡ đó 1.75 trông mảnh
   hơn bản gốc, nên dùng 2 đúng như trước khi thay. */
.tile-arrow .ico,
.btn-link .ico { stroke-width: 2; }