/* Trang sửa chữa — mockup duyệt 03/10/2026; component/token dùng chung giữ ở nguồn gốc. */
.vf-repair { color: var(--color-text-body); background: var(--color-surface); }
.vf-repair-shell { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.vf-repair-hero { background: linear-gradient(120deg, var(--color-surface), var(--color-brand-light)); padding-block: var(--space-12); }
.vf-repair-hero__grid { display: grid; align-items: start; gap: var(--space-8); }
.vf-repair-hero__copy { min-width: 0; }
.vf-repair-related { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vf-repair-related { padding-block: var(--block-py); }
.vf-repair-image { margin: 0; min-width: 0; }
.vf-repair-image img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.vf-repair-image figcaption { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); text-align: left; }
.vf-repair-image--hero img { border-radius: var(--radius-xl); box-shadow: none; }
.vf-repair-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); padding-block: var(--space-5); border-bottom: 1px solid var(--color-border); }
.vf-repair-nav a { padding-block: var(--space-2); color: var(--color-text-secondary); text-decoration: none; font-weight: var(--font-bold); font-size: var(--text-sm); transition: color var(--transition-base); }
.vf-repair-nav a:hover { color: var(--color-brand-primary); }
.vf-repair-section { padding-block: var(--block-py); border-bottom: 1px solid var(--color-border); }
.vf-repair :is(h2, h3, h4) { scroll-margin-top: var(--space-24); }
.vf-repair-section h2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-display); line-height: var(--leading-tight); margin-bottom: var(--space-6); text-wrap: balance; }
.vf-repair-section h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); }
.vf-repair-section h4 { font-size: var(--text-base); font-weight: var(--font-semibold); margin: 0 0 var(--space-3); }
.vf-repair-section p { line-height: var(--leading-relaxed); margin: 0 0 var(--space-4); }
.vf-repair-tile { background: var(--color-surface-alt); border-radius: var(--radius-lg); padding: var(--space-6); margin-block: var(--space-5); }
.vf-repair-grid { display: grid; gap: var(--space-4); }
.vf-repair-grid > .vf-repair-tile { margin: 0; }
.vf-repair-grid p { font-size: var(--text-sm); }
.vf-repair-steps .vf-repair-tile > p:first-child { font-size: var(--text-sm); color: var(--color-brand-primary); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.vf-repair-note { background: var(--color-brand-light); padding: var(--space-5); border-radius: var(--radius-md); margin-top: var(--space-6); }
.vf-repair-section .vf-repair-note { margin-top: var(--space-6); }
.vf-repair-section ul { padding-left: var(--space-5); margin: var(--space-4) 0; }
.vf-repair-section li { margin-bottom: var(--space-3); line-height: var(--leading-relaxed); }
.vf-repair-commit { background: var(--color-brand-light); padding: var(--space-8); border-radius: var(--radius-xl); margin-block: var(--space-8); }
.vf-repair-commit h2 { color: var(--color-brand-deep); }
.vf-repair-commit .vf-repair-amount { font-size: var(--text-4xl); color: var(--color-brand-primary); font-weight: var(--font-bold); }
.vf-repair-ready { margin-block: var(--space-8); background: var(--color-surface-alt); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.vf-repair-ready h2 { font-size: var(--text-2xl); font-weight: var(--font-semibold); margin-bottom: var(--space-6); }
.vf-repair-ready ol { margin: 0; padding-left: var(--space-6); }
.vf-repair-ready li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.vf-repair-ready li:last-child { border: 0; }
.vf-repair-ready li::marker { color: var(--color-brand-primary); font-weight: var(--font-bold); }
.vf-repair-ready p { font-size: var(--text-sm); color: var(--color-text-secondary); margin: var(--space-5) 0 0; }
.vf-repair-service-card { display: grid; gap: var(--space-6); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-block: var(--space-5); align-items: start; }
.vf-repair-service-card__copy { min-width: 0; }
.vf-repair-footnote { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-5); }
@media (min-width: 768px) {
  .vf-repair-shell { padding-inline: var(--container-px-md); }
  .vf-repair-hero { padding-block: 0 var(--space-16); }
  .vf-repair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-repair-ready ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
  .vf-repair-ready li { border: 0; }
  .vf-repair-service-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-8); }
}
@media (min-width: 1024px) {
  .vf-repair-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); }
  .vf-repair-image--hero { align-self: center; padding-top: var(--space-6); }
  .vf-repair-image--hero img { aspect-ratio: 16 / 10; } /* để chiều cao hero không do ảnh quyết định */
  .vf-repair-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vf-repair-steps .vf-repair-tile { padding: var(--space-5); }
  .vf-repair-steps h3 { font-size: var(--text-base); }
  .vf-repair-service-card .vf-repair-image { position: sticky; top: var(--space-24); }
}
.vf-repair-service-general { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-block: var(--space-5); }