/* ==========================================================================
   Trang Dịch vụ (dich-vu.dc.html) + Phụ tùng thay thế (phu-tung-thay-the.dc.html)
   ========================================================================== */

/* ---------- Khung section dùng chung ---------- */
.hc-svc-sec { padding: var(--space-20) 0; }
.hc-svc-sec--subtle { background: var(--surface-subtle); }
.hc-svc-wrap { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-9); }
.hc-svc-head { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); text-align: center; align-items: center; }
.hc-svc-h2 { margin: 0; font-family: var(--font-display); font-size: var(--size-h1); font-weight: var(--weight-bold); line-height: var(--leading-tight); text-transform: uppercase; text-wrap: balance; }
.hc-svc-p { margin: 0; font-size: var(--size-ui); line-height: 1.65; color: var(--text-muted); text-wrap: pretty; }
.hc-svc-p a { color: var(--primary); font-weight: var(--weight-semibold); }
.hc-svc-img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); background: var(--surface-subtle); }

/* Lưới tự xuống dòng (min cột qua biến --min) */
.hc-svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 260px)), 1fr)); gap: var(--space-5); }
.hc-svc-grid--g4 { gap: var(--space-4); }
.hc-svc-grid--split { --min: 420px; gap: var(--space-8); align-items: center; }

/* Thẻ icon (ảnh 64px + tiêu đề + mô tả) */
.hc-svc-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-6); border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--border-subtle); }
.hc-svc-card img { height: 64px; width: auto; display: block; }
.hc-svc-card__t { font-family: var(--font-display); font-size: var(--size-title); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.hc-svc-card__d { font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* Dòng tick (icon tb8 28px + nhãn) */
.hc-svc-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--border-subtle); }
.hc-svc-item--sm { padding: var(--space-4) var(--space-5); }
.hc-svc-item img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.hc-svc-item span { font-family: var(--font-ui); font-size: 15px; font-weight: var(--weight-semibold); line-height: 1.4; }
.hc-svc-list { display: flex; flex-direction: column; gap: var(--space-4); }

/* Khối ảnh + chữ (Dịch vụ giá trị gia tăng) */
.hc-svc-text { display: flex; flex-direction: column; gap: var(--space-4); }
.hc-svc-text__t { font-family: var(--font-display); font-size: var(--size-h3); font-weight: var(--weight-bold); }

/* ---------- Phụ tùng thay thế ---------- */
.hc-parts-sec { padding: var(--space-20) 0; display: flex; flex-direction: column; gap: var(--space-9); }
.hc-parts-sec--subtle { background: var(--surface-subtle); }
.hc-parts-head { max-width: 960px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; gap: var(--space-5); text-align: center; align-items: center; }
.hc-parts-grid { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 200px)), 1fr)); gap: var(--space-5); }
.hc-parts-full { max-width: var(--container-max); width: 100%; margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box; }
.hc-parts-ph { border-radius: var(--radius-md); overflow: hidden; background: var(--surface-subtle); }
.hc-parts-ph img { width: 100%; height: auto; display: block; border-radius: 0; background: var(--surface-subtle); }
.hc-parts-pro { height: 270px; border-radius: var(--radius-md); overflow: hidden; background: #F3F3F3; display: flex; align-items: center; justify-content: center; padding: var(--space-5); box-sizing: border-box; }
.hc-parts-pro img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
.hc-parts-split { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-12); align-items: center; }
.hc-parts-split__text { display: flex; flex-direction: column; gap: var(--space-5); }
.hc-parts-split__img { border-radius: var(--radius-md); overflow: hidden; }
.hc-parts-split__img img { width: 100%; height: auto; display: block; border-radius: 0; background: var(--surface-subtle); }

/* Builder: biến thể của Section nội dung */
.hc-svc-card--left { align-items: flex-start; text-align: left; gap: var(--space-5); }
.hc-svc-card--left img { height: 56px; width: 56px; object-fit: contain; }
.hc-svc-card--left .hc-svc-card__t { font-size: var(--size-h3); line-height: var(--leading-tight); }
.hc-svc-h2--left { text-align: left; }
.hc-svc-item__ck { width: 28px; height: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary); }
.hc-svc-text { align-self: center; }