/*
 * customers.css — component riêng trang Khách hàng thân thiết
 * (/khach-hang-than-thiet/), nạp SAU front-page.css (inline) nên dùng chung
 * token + .wrap/.eyebrow/.center/.pat/.why-grid/.endcta/.rv. Chỉ định nghĩa
 * class kh-* và .crumbs (about/contact.css không nạp ở trang này).
 * Viết mobile-first.
 */

/* ===== breadcrumb trên nền hero tối (đồng bộ các trang trong) ===== */
.crumbs { font-size: 13px; margin-bottom: 16px; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.crumbs li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, .78); }
.crumbs li + li::before { content: "›"; color: #ff8d96; font-weight: 800; }
.crumbs a { color: rgba(255, 255, 255, .78); text-decoration: none; transition: color 140ms ease; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: #fff; } }
.crumbs [aria-current="page"] { color: #fff; font-weight: 700; }

/* ===== hero gọn: gradient navy + lưới chấm (đồng bộ trang Liên hệ) ===== */
.kh-hero { position: relative; isolation: isolate; color: #fff; padding-block: 56px 52px; background: linear-gradient(120deg, var(--navy-ink) 0%, var(--primary-deep) 62%, var(--primary) 130%); }
.kh-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, .10) 1.1px, transparent 1.4px); background-size: 32px 32px; }
.kh-hero h1 { color: #fff; font-size: clamp(30px, 4.6vw, 46px); font-weight: 800; line-height: 1.18; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
.kh-hero h1 em { font-style: normal; color: #ff6b76; }
.kh-hero .lead { color: rgba(255, 255, 255, .86); font-size: 16.5px; line-height: 1.65; max-width: 66ch; margin: 14px 0 0; }

/* ===== lưới logo khách hàng (centerpiece) ===== */
.kh-grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .kh-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1020px) { .kh-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.kh-logo { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 14px; display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .kh-logo:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(15, 47, 87, .22); } }
.kh-logo img { width: 100%; height: auto; max-width: 230px; border-radius: 6px; }
.kh-logo span { font-size: 13.5px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.kh-note { margin: 28px auto 0; text-align: center; max-width: 62ch; font-size: 14px; color: var(--text-2); line-height: 1.6; }
.kh-note a { color: var(--primary); }

/* ===== cam kết: band + sọc chéo hairline 45° (pattern quy trình) ===== */
.kh-why { background: var(--band); border-block: 1px solid var(--line); position: relative; isolation: isolate; }
.kh-why::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--primary) 4%, transparent) 0 1px, transparent 1px 30px); }
.kh-why .why-item { background: var(--surface); }

/* khối dưới màn hình đầu — trình duyệt bỏ style/layout/paint tới khi cuộn gần */
#cam-ket { content-visibility: auto; contain-intrinsic-size: auto 600px; }

@media (prefers-reduced-motion: reduce) {
  .kh-logo, .crumbs a { transition: none; }
}