/* ============================================================
   Honda — Chính sách bảo hành ô tô (page-chinh-sach-bao-hanh.php)
   Bố cục và thành phần riêng của trang. Màu, bo góc, bóng đổ lấy từ design-tokens.css.
   Nội dung là khối WordPress trong post_content; class do pattern warranty-policy.php gắn.
   Icon: SVG stroke dạng mask (tô bằng currentColor/token, không hard-code màu).
   ============================================================ */

.vf-warranty {
  --vf-i-car: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 31v-6l4-10c.6-1.4 1.8-2 3-2h20c1.2 0 2.4.6 3 2l4 10v6'/><rect x='5' y='25' width='38' height='11' rx='3'/><path d='M11 36v3M37 36v3M12 30h4M32 30h4'/></svg>");
  --vf-i-hatch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 31c0-3 1-5 4-6l6-8c.8-1 1.8-1.5 3-1.5h10c1.3 0 2.4.5 3.2 1.5l5 7c3 .5 5 2.5 5 5.5v2H6z'/><circle cx='15' cy='34' r='3.4'/><circle cx='34' cy='34' r='3.4'/></svg>");
  --vf-i-battery: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='14' y='9' width='20' height='33' rx='3'/><path d='M20 9V6h8v3M25 18l-5 8h6l-3 8'/></svg>");
  --vf-i-acquy: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='14' width='38' height='24' rx='3'/><path d='M12 14v-3h6v3M30 14v-3h6v3M12 26h8M31 22v8M27 26h8'/></svg>");
  --vf-i-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M24 5l15 5v12c0 10-6.5 17-15 21C15.5 39 9 32 9 22V10z'/><path d='M17 24l5 5 9-10'/></svg>");
  --vf-i-paint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='7' width='26' height='11' rx='2'/><path d='M35 12h4v11H23v7M19 30h8v12h-8z'/></svg>");
  --vf-i-tool: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M30 8l10 10M26 12l10 10-14 14L12 26zM12 26l-5 5M17 31l-5 5M22 36l-5 5'/></svg>");
  --vf-i-tire: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><circle cx='24' cy='24' r='17'/><circle cx='24' cy='24' r='6'/><path d='M24 7v11M24 30v11M7 24h11M30 24h11'/></svg>");
  --vf-i-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='15' rx='2'/><path d='M3.5 10h17M8 3v4M16 3v4M8 14h3'/></svg>");
  --vf-i-info: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5M12 8v.01'/></svg>");
  --vf-i-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>");
  --vf-i-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  --vf-i-doc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 16h6'/></svg>");
  --vf-i-headset: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 14v-2a8 8 0 0116 0v2M4 14h3v5H5a1 1 0 01-1-1zM20 14h-3v5h2a1 1 0 001-1zM17 19c0 1.5-2 2-5 2'/></svg>");

  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-surface);
}

html:has(.vf-warranty) {
  scroll-behavior: smooth;
}

.vf-warranty :is(h1, h2, h3, p, ul, ol, figure) {
  margin: 0;
}
.vf-warranty a:not(.vf-hero-cta) {
  color: var(--color-cta-primary);
  text-decoration: none;
}
.vf-warranty a:not(.vf-hero-cta):hover {
  color: var(--color-cta-hover);
}
.vf-warranty :is(a, summary):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── Hero ────────────────────────────────────────────────── */
.vf-warranty-hero {
  background: linear-gradient(100deg, var(--color-hero-start), var(--color-brand-tint-soft) 60%, var(--color-hero-start));
  border-bottom: 1px solid var(--color-border);
}
.vf-warranty-hero__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-12) var(--container-px) var(--space-16);
}
.vf-warranty-hero__text {
  flex: 1 1 480px;
  min-width: 0;
}
.vf-warranty-hero__media {
  flex: 0 1 480px;
  width: 100%;
  max-width: 480px;
}
/* Chưa có ảnh đại diện: tóm tắt quyền lợi là cột phải của hero, một khối duy nhất (không thẻ lồng thẻ). */
.vf-warranty-hero__aside {
  flex: 0 1 460px;
  width: 100%;
  max-width: 480px;
}
/* Desktop: cột phải (ảnh hoặc thẻ tóm tắt) căn giữa theo chiều dọc của cả hero. Hero không có padding trên, đáy 64px,
   nên bù margin-top bằng đúng padding đáy để tâm của thẻ trùng tâm hero. */
@media (min-width: 1024px) {
  .vf-warranty-hero__in { flex-wrap: nowrap; }
  .vf-warranty-hero__media,
  .vf-warranty-hero__aside { margin-top: var(--space-16); }
}
.vf-warranty-hero .vf-warranty-summary {
  margin: 0;
  padding: 20px 24px 8px;
  background: var(--color-surface-elevated);
  border-color: var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.vf-warranty-hero .vf-warranty-summary__head {
  padding: 0;
}
.vf-warranty-hero .vf-warranty-summary__sub {
  display: none;
}
.vf-warranty-hero .vf-warranty-summary__grid {
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 12px;
}
.vf-warranty-hero .vf-stat {
  grid-template-columns: 32px 1fr;
  column-gap: 14px;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.vf-warranty-hero .vf-stat::before {
  width: 32px;
  height: 32px;
}
.vf-warranty-hero .vf-stat__value {
  font-size: var(--text-lg);
}
.vf-warranty-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* ── Khung trang ─────────────────────────────────────────── */
.vf-warranty-wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-px) var(--block-py);
}
@media (min-width: 768px) {
  .vf-warranty-hero__in { padding-inline: var(--container-px-md); }
  .vf-warranty-wrap { padding-inline: var(--container-px-md); }
}
.vf-warranty-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px 32px;
  margin-top: 36px;
}
.vf-warranty-body {
  flex: 1 1 480px;
  min-width: 0;
}
.vf-warranty-aside {
  flex: 0 1 280px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}
@media (max-width: 1023px) {
  .vf-warranty-aside {
    flex-basis: 100%;
    position: static;
  }
}

/* ── Tóm tắt quyền lợi ───────────────────────────────────── */
.vf-warranty-summary {
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--color-brand-tint-soft);
  border: 1px solid var(--color-brand-light);
}
.vf-warranty-summary__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 0 4px;
}
.vf-warranty-summary h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--color-brand-deep);
}
.vf-warranty-summary__sub {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.vf-warranty-summary__note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.vf-warranty-summary__note::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--color-cta-primary);
  -webkit-mask: var(--vf-i-info) center / contain no-repeat;
  mask: var(--vf-i-info) center / contain no-repeat;
}
.vf-warranty-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.vf-stat {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  column-gap: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.vf-stat::before {
  content: "";
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  background: var(--color-brand-primary);
  -webkit-mask: var(--vf-icon) center / contain no-repeat;
  mask: var(--vf-icon) center / contain no-repeat;
}
.vf-stat__label {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-brand-deep);
}
.vf-stat__value {
  margin-top: 2px;
  font-size: var(--text-xl);
  line-height: 1.25;
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
  color: var(--color-cta-primary);
}
.vf-icon-car { --vf-icon: var(--vf-i-car); }
.vf-icon-hatch { --vf-icon: var(--vf-i-hatch); }
.vf-icon-battery { --vf-icon: var(--vf-i-battery); }
.vf-icon-acquy { --vf-icon: var(--vf-i-acquy); }
.vf-icon-shield { --vf-icon: var(--vf-i-shield); }
.vf-icon-paint { --vf-icon: var(--vf-i-paint); }
.vf-icon-tool { --vf-icon: var(--vf-i-tool); }
.vf-icon-tire { --vf-icon: var(--vf-i-tire); }

/* ── Nội dung các mục ────────────────────────────────────── */
.vf-warranty-body > section {
  scroll-margin-top: 96px;
}
.vf-warranty-body > section + section {
  margin-top: 56px;
}
.vf-warranty-body section > * + * {
  margin-top: 16px;
}
.vf-warranty-body h2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: var(--font-weight-display);
  color: var(--color-brand-deep);
}
.vf-warranty-body section > h2 + * {
  margin-top: 12px;
}
.vf-warranty-body section > h3 {
  margin-top: 28px;
  font-size: var(--text-lg);
  line-height: 1.3;
  font-weight: var(--font-semibold);
  color: var(--color-brand-deep);
}
.vf-warranty-body section > h3 + * {
  margin-top: 12px;
}
.vf-warranty-lead {
  max-width: 680px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
.vf-warranty-body section > .vf-warranty-note,
.vf-warranty-body section > .vf-warranty-source {
  margin-top: 12px;
  max-width: 720px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-muted);
}
.vf-warranty-source a {
  text-decoration: underline;
}

/* Danh sách tick (Phạm vi bảo hành). */
.vf-checklist {
  display: grid;
  gap: 10px;
  padding: 0;
  list-style: none;
}
.vf-checklist li {
  position: relative;
  padding-left: 32px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-body);
}
.vf-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-cta-primary);
}
.vf-checklist li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid var(--color-text-inverse);
  border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg);
}

/* Liên kết có mũi tên. */
.vf-warranty-body section > .vf-warranty-link {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
}
.vf-warranty-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vf-warranty-link a::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--vf-i-arrow) center / contain no-repeat;
  mask: var(--vf-i-arrow) center / contain no-repeat;
}

/* ── Bảng (core/table) ───────────────────────────────────── */
.vf-warranty .vf-warranty-table {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.vf-warranty .vf-warranty-table table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: var(--text-base);
}
.vf-warranty .vf-warranty-table :is(thead, tbody) {
  border: 0;
}
.vf-warranty .vf-warranty-table :is(th, td) {
  padding: 15px 16px;
  border: 0;
  border-top: 1px solid var(--color-border);
  background: transparent;
  text-align: left;
  vertical-align: top;
  color: var(--color-text-body);
}
.vf-warranty .vf-warranty-table thead th {
  padding: 16px;
  border-top: 0;
  background: var(--color-brand-light);
  font-weight: var(--font-bold);
  color: var(--color-brand-deep);
}
.vf-warranty .vf-warranty-table tbody th {
  width: 55%;
  font-weight: var(--font-bold);
}
.vf-warranty .vf-warranty-table tbody td {
  font-weight: var(--font-bold);
}
.vf-warranty .vf-warranty-table figcaption {
  margin: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  text-align: left;
  color: var(--color-text-muted);
}
.vf-warranty .vf-warranty-table:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* ── Phụ tùng giới hạn: danh sách phẳng, mỗi hạng mục một hàng (tên + thời hạn | điều kiện) ── */
.vf-pcards {
  border-bottom: 1px solid var(--color-border);
}
.vf-pcard {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--color-border);
}
.vf-pcard::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  background: var(--color-brand-primary);
  -webkit-mask: var(--vf-icon) center / contain no-repeat;
  mask: var(--vf-icon) center / contain no-repeat;
}
.vf-pcard__body {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px 32px;
}
.vf-warranty .vf-pcard h3 {
  font-size: var(--text-base);
  line-height: 1.35;
  font-weight: var(--font-semibold);
  color: var(--color-brand-deep);
}
.vf-pcard__value {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-cta-primary);
}
.vf-pcard__desc {
  margin-top: 4px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
@media (min-width: 768px) {
  .vf-pcard__body {
    grid-template-columns: 220px minmax(0, 1fr);
    align-content: start;
  }
  .vf-pcard__body h3,
  .vf-pcard__value {
    grid-column: 1;
  }
  .vf-pcard__desc {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* ── Accordion (core/details) và FAQ ─────────────────────── */
.vf-acc-list,
.vf-faq {
  display: grid;
  gap: 8px;
}
.vf-warranty .vf-acc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-soft);
}
.vf-warranty .vf-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 0 16px;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--color-text-body);
  list-style: none;
  cursor: pointer;
}
.vf-warranty .vf-acc > summary::-webkit-details-marker {
  display: none;
}
.vf-warranty .vf-acc > summary::after,
.vf-faq__chev {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: var(--color-text-secondary);
  -webkit-mask: var(--vf-i-chevron) center / contain no-repeat;
  mask: var(--vf-i-chevron) center / contain no-repeat;
  transition: transform 0.2s;
}
.vf-warranty .vf-faq .vf-acc > summary::after {
  content: none;
}
.vf-warranty .vf-acc[open] > summary::after,
.vf-warranty .vf-acc[open] .vf-faq__chev {
  transform: rotate(180deg);
}
.vf-warranty .vf-faq .vf-acc > summary {
  padding: 0 20px;
}
.vf-warranty .vf-faq__q {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
  font-weight: var(--font-bold);
  color: inherit;
}
.vf-warranty .vf-acc > ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 4px 16px 16px 36px;
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--color-text-secondary);
}
.vf-warranty .vf-acc > p {
  margin: 0;
  padding: 0 20px 16px;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
}

/* ── Cột phụ: mục lục + đặt lịch ─────────────────────────── */
.vf-warranty-toc {
  padding: 16px 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
}
.vf-warranty-toc h2 {
  padding: 0 6px;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-brand-deep);
}
.vf-warranty-toc ol {
  display: grid;
  gap: 2px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.vf-warranty-toc a {
  display: flex;
  gap: 12px;
  padding: 6px 8px;
  border-left: 2px solid transparent;
  font-size: var(--text-sm);
  line-height: 1.5;
  font-weight: var(--font-bold);
  color: var(--color-text-secondary);
}
.vf-warranty-toc a:hover {
  color: var(--color-cta-primary);
}
.vf-warranty-toc a[aria-current="location"] {
  border-left-color: var(--color-cta-primary);
  font-weight: var(--font-bold);
  color: var(--color-cta-primary);
}
.vf-warranty-toc__n {
  flex: none;
  width: 18px;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
}
.vf-warranty-book {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--color-cta-primary) 40%, var(--color-surface));
  border-radius: var(--radius-md);
  background: var(--color-brand-tint-soft);
}
.vf-warranty-book h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-brand-primary);
}
.vf-warranty-book h2::before {
  content: "";
  flex: none;
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: var(--vf-i-calendar) center / contain no-repeat;
  mask: var(--vf-i-calendar) center / contain no-repeat;
}
.vf-warranty-book p {
  margin-top: 8px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.vf-warranty .vf-warranty-book a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin-top: 12px;
  border-radius: var(--radius-sm);
  background: var(--color-cta-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-text-inverse);
}
.vf-warranty .vf-warranty-book a:hover {
  background: var(--color-cta-hover);
  color: var(--color-text-inverse);
}

/* ── Mục lục di động: viên thuốc dính dưới header (markup template-parts/blog/toc.php, JS blog-toc.js) ── */
.vf-warranty .vf-post__mtoc {
  display: none;
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
  z-index: var(--z-raised);
  margin-top: 20px;
}
.vf-warranty .vf-post__mtoc details {
  position: relative;
}
.vf-warranty .vf-post__mtoc summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-brand-deep);
  cursor: pointer;
  list-style: none;
}
.vf-warranty .vf-post__mtoc summary::-webkit-details-marker {
  display: none;
}
.vf-warranty .vf-toc__icon {
  flex: none;
  color: var(--color-cta-primary);
}
.vf-warranty .vf-toc__current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vf-warranty .vf-post__mtoc summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid var(--color-brand-primary);
  border-bottom: 2px solid var(--color-brand-primary);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.vf-warranty .vf-post__mtoc details[open] summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}
.vf-warranty .vf-post__mtoc ol {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: min(60vh, 420px);
  padding: 8px 18px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: none;
  font-size: var(--text-base);
  line-height: 1.45;
  list-style: none;
}
.vf-warranty .vf-post__mtoc ol a {
  display: block;
  padding: 10px 0;
  color: var(--color-text-body);
}
.vf-warranty .vf-post__mtoc ol a[aria-current="location"] {
  font-weight: var(--font-bold);
  color: var(--color-cta-primary);
}
@media (max-width: 1023px) {
  .vf-warranty .vf-post__mtoc {
    display: block;
  }
  .vf-warranty .vf-warranty-toc,
  .vf-warranty .vf-warranty-book {
    display: none;
  }
}

/* ── Khối hỗ trợ ─────────────────────────────────────────── */
.vf-warranty-support {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 48px;
  padding: 32px 36px 36px;
  overflow: hidden;
  border: 1px solid var(--color-brand-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(100deg, var(--color-brand-tint-soft), var(--color-surface) 70%);
  scroll-margin-top: 96px;
}
.vf-warranty-support__main {
  position: relative;
  z-index: 1;
  flex: 1 1 440px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.vf-warranty-support__main > :is(h2, .vf-warranty-support__text) {
  flex: 0 0 100%;
}
.vf-warranty .vf-warranty-support h2 {
  font-size: var(--text-2xl);
  line-height: 1.2;
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--color-brand-deep);
}
.vf-warranty-support__text {
  max-width: 460px;
  margin-top: -6px;
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.vf-warranty-support__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 8px 0 0;
}
.vf-warranty .vf-warranty-btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: 1;
  color: var(--color-text-inverse);
  text-decoration: none;
}
.vf-warranty .vf-warranty-btn-primary a {
  border: 1px solid transparent;
  background: var(--color-cta-primary);
}
.vf-warranty .vf-warranty-btn-primary a:hover {
  background: color-mix(in srgb, var(--color-cta-primary) 82%, var(--color-surface));
  color: var(--color-text-inverse);
}
.vf-warranty .vf-warranty-btn-ghost a {
  border: 1px solid var(--color-cta-primary);
  background: var(--color-surface);
  color: var(--color-cta-primary);
}
.vf-warranty .vf-warranty-btn-ghost a:hover {
  background: var(--color-brand-tint-soft);
  color: var(--color-cta-hover);
}
.vf-warranty .vf-warranty-btn a::before,
.vf-warranty .vf-warranty-btn-primary a::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
}
.vf-warranty .vf-warranty-btn-primary a::before {
  -webkit-mask: var(--vf-i-calendar) center / contain no-repeat;
  mask: var(--vf-i-calendar) center / contain no-repeat;
}
.vf-warranty .vf-warranty-btn-primary a::after {
  width: 14px;
  height: 14px;
  -webkit-mask: var(--vf-i-arrow) center / contain no-repeat;
  mask: var(--vf-i-arrow) center / contain no-repeat;
}
.vf-warranty .vf-warranty-btn-ghost a::before {
  -webkit-mask: var(--vf-i-doc) center / contain no-repeat;
  mask: var(--vf-i-doc) center / contain no-repeat;
}
.vf-warranty-support__hotline {
  position: relative;
  margin-top: 8px;
  padding-left: 62px;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--color-text-muted);
}
.vf-warranty-support__hotline::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  background: var(--color-brand-primary);
  -webkit-mask: var(--vf-i-headset) center / contain no-repeat;
  mask: var(--vf-i-headset) center / contain no-repeat;
}
.vf-warranty-support__hotline::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 36px;
  margin-top: -18px;
  border-left: 1px solid var(--color-border);
}
.vf-warranty .vf-warranty-support__hotline a {
  display: block;
  font-size: var(--text-xl);
  line-height: 1.3;
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
  color: var(--color-brand-deep);
}
.vf-warranty-support__car {
  position: relative;
  z-index: 1;
  flex: 0 1 380px;
  width: 380px;
  max-width: 100%;
}
.vf-warranty-support__car img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover; /* ảnh chụp xưởng dịch vụ (không phải ảnh xe tách nền) */
  border-radius: var(--radius-lg);
  box-shadow: none;
}

@media (max-width: 639px) {
  .vf-warranty .vf-checklist li,
  .vf-warranty .vf-acc > :is(ul, p),
  .vf-warranty .vf-acc > summary,
  .vf-warranty .vf-faq__q,
  .vf-pcard__desc {
    font-size: var(--text-base);
  }
  .vf-pcard__value {
    font-size: var(--text-lg);
  }
  .vf-warranty-body section > :is(.vf-warranty-note, .vf-warranty-source, .vf-warranty-link),
  .vf-warranty-support__text {
    font-size: var(--text-base);
  }
  .vf-warranty .vf-warranty-table tbody :is(th, td):first-child {
    font-size: var(--text-base);
  }
  .vf-warranty-support {
    padding: 28px 20px;
  }
  .vf-warranty-support__hotline {
    padding-left: 0;
    flex-basis: 100%;
  }
  .vf-warranty-support__hotline::before,
  .vf-warranty-support__hotline::after {
    content: none;
  }
  .vf-warranty-body h2 {
    font-size: var(--font-size-title);
  }
}

/* Bảng 2 cột trên mobile: mỗi hàng là một thẻ, hạng mục ở trên, thời hạn in đậm ở dưới (không cuộn ngang). */
@media (max-width: 639px) {
  .vf-warranty .vf-warranty-table {
    overflow-x: visible;
  }
  .vf-warranty .vf-warranty-table table {
    min-width: 0;
  }
  .vf-warranty .vf-warranty-table :is(table, tbody) {
    display: block;
  }
  .vf-warranty .vf-warranty-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .vf-warranty .vf-warranty-table tr {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-top: 1px solid var(--color-border);
  }
  .vf-warranty .vf-warranty-table tbody tr:first-child {
    border-top: 0;
  }
  .vf-warranty .vf-warranty-table :is(th, td),
  .vf-warranty .vf-warranty-table tbody th {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
  }
  .vf-warranty .vf-warranty-table tbody :is(th, td):first-child {
    font-weight: var(--font-bold);
    color: var(--color-text-secondary);
  }
  .vf-warranty .vf-warranty-table tbody :is(th, td):last-child {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-brand-deep);
  }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.vf-warranty) {
    scroll-behavior: auto;
  }
  .vf-warranty * {
    transition-duration: 0.01ms !important;
  }
}