/* ============================================================
   Honda — Trang chi tiết bài viết (single-post.php)
   Bố cục + thành phần riêng của trang. Nội dung bài và khối Honda ở blog-content.css.
   Khối lớn cách nhau 56–88px; đoạn 18px; không dùng bóng đổ trong template này.
   ============================================================ */

/* ── Các tầng nền (từ sau ra trước) ───────────────────────
   nền xám --color-surface-alt → dải navy đầu bài → khung bài trắng + thẻ cột phụ nổi lên đè dải navy →
   khối lõm/nhấn trong khung (điểm chính blush, nguồn xám, tác giả xanh nhạt) → CTA nền ink.
   Chỉ dùng token sẵn có, không đổ bóng: chiều sâu đến từ chênh sáng tối + viền 1px. */
.vf-post { background: var(--color-surface-alt); }
.vf-post__entity { display: block; }
.vf-post:has(.vf-related) .vf-post__wrap { padding-bottom: 0; }

/* ── Bố cục 2 cột ────────────────────────────────────────── */
.vf-post__wrap {
  position: relative; /* nổi trên dải navy */
  width: min(100% - 2 * var(--container-gutter), calc(var(--container-max) - 2 * var(--container-px-md)));
  margin: calc(-1 * var(--space-12)) auto 0;
  padding: 0 0 96px;
}
.vf-post__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px; /* khung bài co giãn lấp đầy, khe giữa hai cột cố định 24px */
  gap: 24px;
  align-items: start;
}
.vf-post__article {
  min-width: 0;
  padding: var(--space-6) var(--space-10) var(--space-10);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
}
.vf-post__article > :first-child { margin-top: 0; }
.vf-post__mtoc {
  display: none;
}
@media (max-width: 1023px) {
  .vf-post__layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-post__mtoc {
    display: block;
  }
}
@media (max-width: 767px) {
  .vf-post__wrap {
    margin-top: calc(-1 * var(--space-8));
    padding-bottom: 72px;
  }
  .vf-post__article { padding: var(--space-4) var(--space-4) var(--space-6); }
}

/* ── Đầu bài: dải navy full-bleed (token như hero Bảng giá/Archive) ── */
.vf-post__header {
  background: linear-gradient(100deg, var(--color-brand-deep) 0%, var(--color-brand-deep-soft) 100%);
  padding-block: var(--space-12) calc(var(--space-12) + var(--space-12)); /* đáy chừa chỗ cho khung bài đè lên */
}
.vf-post__header-in {
  width: min(100% - 2 * var(--container-gutter), calc(var(--container-max) - 2 * var(--container-px-md)));
  max-width: 838px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  /* Chữ đầu bài thẳng mép trái khung bài (cột trái của lưới 2 cột). */
  .vf-post__header-in { max-width: none; padding-right: calc(340px + 24px); }
}
.vf-post__kicker {
  margin: 0 0 14px;
  font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-hybrid-on-dark);
}
.vf-post__kicker a {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  text-decoration: none;
}
.vf-post__kicker a:hover,
.vf-post__kicker a:focus-visible { background: var(--color-cta-hover); color: var(--color-text-inverse); }
.vf-post__header .vf-hero-title { margin-bottom: 22px; font-size: var(--type-display-size); line-height: var(--type-display-line); letter-spacing: 0; }
.vf-post__header .vf-hero-lead { max-width: none; margin-top: 0; margin-bottom: 26px; font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); }
.vf-post__header .vf-article-summary { margin-bottom: 0; color: inherit; font-size: inherit; line-height: inherit; }
.vf-post__header .vf-article-summary strong { color: var(--hero-ink); }
.vf-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
  color: var(--hero-muted);
}
.vf-post__meta > * {
  white-space: nowrap;
}
.vf-post__author {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-style: normal;
}
.vf-post__author :is(strong, a) {
  color: var(--hero-ink);
  font-weight: var(--font-bold);
  text-decoration: none;
}
.vf-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-surface-mist);
  color: var(--color-brand-primary);
  font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line);
  font-weight: 700;
}
.vf-post__header .vf-avatar { background: color-mix(in srgb, var(--color-text-inverse) 16%, transparent); color: var(--color-text-inverse); }
.vf-post__sep {
  width: 1px;
  height: 16px;
  background: var(--color-border-strong);
}
.vf-post__header .vf-post__sep { background: color-mix(in srgb, var(--color-text-inverse) 32%, transparent); }
@media (max-width: 767px) {
  .vf-post__header { padding-block: var(--space-8) calc(var(--space-8) + var(--space-8)); }
  .vf-post__meta {
    column-gap: 12px;
  }
  .vf-post__author {
    flex-basis: 100%;
  }
  .vf-post__sep {
    display: none;
  }
}

/* ── Ảnh bìa (LCP) ───────────────────────────────────────── */
.vf-post__cover {
  margin: 0;
}
.vf-post__cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken);
}
.vf-post__cover figcaption {
  margin-top: 10px;
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
  color: var(--color-text-muted);
}

/* ── Thân bài ────────────────────────────────────────────── */
.vf-prose {
  margin-top: 20px;
}
.vf-prose > :first-child > h2:first-child,
.vf-prose > h2:first-child {
  margin-top: var(--space-fluid-md);
}

/* Nguồn tham khảo: H2 cỡ H3 */
.vf-sources .vf-sources__title {
  margin: 0 0 12px;
  font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line);
  letter-spacing: 0;
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  scroll-margin-top: 96px;
}
.vf-sources { margin-top: var(--space-10); padding: var(--space-5) var(--space-6) var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface-alt); }
.vf-sources ul {
  margin: 0;
  padding-left: 22px;
  font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line);
  color: var(--color-text-secondary);
}
.vf-sources a {
  color: var(--color-brand-primary);
  text-underline-offset: 3px;
}
.vf-sources a:hover {
  color: var(--color-cta-primary);
}

/* Hộp tác giả */
.vf-author-box {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
  padding: 22px 24px;
  border: 1px solid var(--color-hybrid-line);
  border-radius: var(--radius-lg);
  background: var(--color-hybrid-soft);
}
.vf-author-box .vf-avatar {
  background: var(--color-surface);
  width: 52px;
  height: 52px;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
}
.vf-author-box__author {
  font-style: normal;
}
.vf-author-box__name {
  margin: 0 0 2px;
  font-size: var(--type-title-md-size); line-height: var(--type-title-md-line);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}
.vf-author-box__desc {
  margin: 0;
  font-size: var(--type-body-md-size); line-height: var(--type-body-md-line);
  color: var(--color-text-muted);
}

/* ── Mục lục ─────────────────────────────────────────────── */
.vf-toc__title {
  margin: 0 0 14px;
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-heading);
}
.vf-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.vf-toc--desktop .vf-toc__list {
  border-left: 1px solid var(--color-border);
}
.vf-toc--desktop a {
  display: block;
  margin-left: -1px;
  padding: 8px 8px 8px 16px;
  border-left: 2px solid transparent;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  font-weight: var(--font-normal);
  text-decoration: none;
  color: var(--color-text-secondary);
  transition: color 150ms ease, border-color 150ms ease;
}
.vf-toc--desktop a:hover {
  color: var(--color-cta-primary);
}
.vf-toc--desktop a[aria-current="location"] {
  border-left-color: var(--color-cta-primary);
  font-weight: var(--font-bold);
  color: var(--color-text-heading);
}

.vf-post__mtoc {
  /* Viên thuốc dính dưới header: cuộn tới đâu hiện mục đang đọc tới đó, bấm để mở danh sách. */
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 72px);
  z-index: var(--z-raised);
  margin: 20px 0 0;
}
@media (min-width: 768px) {
  .vf-post__mtoc {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px);
  }
}
.vf-post__mtoc details {
  position: relative;
}
.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(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: var(--font-bold);
  color: var(--color-brand-deep);
  cursor: pointer;
  list-style: none;
}
.vf-post__mtoc summary::-webkit-details-marker {
  display: none;
}
.vf-toc__icon {
  flex: none;
  color: var(--color-cta-primary);
}
.vf-toc__current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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 200ms ease;
}
.vf-post__mtoc details[open] summary::after {
  margin-top: 4px;
  transform: rotate(225deg);
}
.vf-post__mtoc ol {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 2px;
  max-height: min(60vh, 420px);
  margin: 0;
  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(--type-title-md-size);
  line-height: var(--type-title-md-line);
  list-style: none;
}
.vf-post__mtoc li {
  padding: 0;
}
.vf-post__mtoc ol a {
  display: block;
  padding: 10px 0;
  color: var(--color-text-body);
  text-decoration: none;
}
.vf-post__mtoc ol a[aria-current="location"] {
  font-weight: var(--font-bold);
  color: var(--color-cta-primary);
}

/* ── Cột phụ (desktop) ───────────────────────────────────── */
.vf-post__aside {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 1023px) {
  .vf-post__aside {
    display: none;
  }
}
.vf-post__aside .vf-toc--desktop,
.vf-topics {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.vf-topics__title {
  margin: 0 0 8px;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}
.vf-topics ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-border);
}
.vf-topics a {
  display: block;
  padding: 11px 0 11px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
  text-decoration: none;
  color: var(--color-text-secondary);
}
.vf-topics a:hover {
  color: var(--color-cta-primary);
}
.vf-topics a[aria-current="page"] {
  padding-left: 10px;
  border-left: 2px solid var(--color-cta-primary);
  font-weight: var(--font-bold);
  color: var(--color-cta-primary);
}
.vf-side-cta {
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-brand-deep); /* navy cùng dải đầu bài: dịu hơn ink #111 */
}
.vf-side-cta__title {
  margin: 0 0 4px;
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
  font-weight: var(--font-semibold);
  color: var(--color-text-inverse);
}
.vf-side-cta__sub {
  margin: 0 0 14px;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-on-dark);
}
.vf-side-cta .vf-btn {
  width: 100%;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: var(--font-bold);
  background: var(--color-cta-primary);
  color: var(--color-text-inverse);
  box-shadow: none;
}

/* ── Bài viết liên quan ──────────────────────────────────── */
.vf-related {
  width: min(100% - 2 * var(--container-gutter), calc(var(--container-max) - 2 * var(--container-px-md)));
  margin: 64px auto 0;
  padding-bottom: 96px;
}
.vf-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 32px;
}
.vf-related__title {
  margin: 0;
  font-size: var(--type-headline-size);
  line-height: var(--type-headline-line);
  letter-spacing: 0;
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
}
.vf-related__all {
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: var(--font-bold);
  text-decoration: none;
  color: var(--color-brand-primary);
}
.vf-related__all:hover {
  color: var(--color-cta-primary);
}
.vf-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.vf-post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color var(--transition-fast);
}
.vf-post-card:hover { border-color: var(--color-brand-primary); }
.vf-post-card__thumb {
  display: block;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.vf-post-card__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.vf-post-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 0 var(--space-5) var(--space-5);
}
.vf-post-card__meta {
  margin: 0;
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-line);
  color: var(--color-text-muted);
}
.vf-post-card__excerpt {
  display: none; /* chỉ hiện ở bài nổi bật trên di động */
  margin: 0;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-line);
  color: var(--color-text-secondary);
}
.vf-post-card__title {
  margin: 0;
  font-size: var(--type-title-lg-size);
  line-height: var(--type-title-lg-line);
  letter-spacing: 0;
  font-weight: var(--font-semibold);
  color: var(--color-text-heading);
  text-wrap: pretty;
}
.vf-post-card__title a {
  color: inherit;
  text-decoration: none;
}
.vf-post-card__title a:hover {
  color: var(--color-cta-primary);
}
.vf-post-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: auto;
  font-size: var(--type-label-lg-size);
  line-height: var(--type-label-lg-line);
  font-weight: var(--font-bold);
  text-decoration: none;
  color: var(--color-brand-primary);
}
.vf-post-card__more:hover {
  color: var(--color-cta-primary);
}

/* Desktop/tablet: 4 thẻ đầu (desktop 4 cột, tablet 2×2). Di động: 1 bài nổi bật (thẻ lớn) + 5 tin phụ dạng dòng (ảnh nhỏ bên trái). */
@media (min-width: 768px) {
  .vf-related__grid .vf-post-card:nth-child(n + 5) {
    display: none;
  }
}
/* 4 cột: tiêu đề thẻ hạ xuống Title Medium cho vừa chiều ngang thẻ ~290px. */
@media (min-width: 1024px) {
  .vf-related__grid .vf-post-card__title {
    font-size: var(--type-title-md-size);
    line-height: var(--type-title-md-line);
  }
}
@media (max-width: 767px) {
  .vf-related {
    margin-top: 48px;
    padding-top: 40px;
    padding-bottom: 72px;
  }
  .vf-related__head {
    margin-bottom: 24px;
  }
  /* Di động: một khung trắng chứa bài nổi bật + danh sách dòng, thẻ con không viền riêng. */
  .vf-related__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }
  .vf-related__grid .vf-post-card { overflow: visible; border: 0; border-radius: 0; background: none; }
  .vf-related__grid .vf-post-card__body { padding: 0; }
  .vf-related__grid .vf-post-card__thumb { border-radius: var(--radius-lg); }
  /* Bài nổi bật: ảnh lớn, tiêu đề, mô tả ngắn, ngày · thời gian đọc (meta xuống cuối). */
  .vf-related__grid .vf-post-card:first-child {
    gap: 14px;
    padding-bottom: 22px;
  }
  .vf-related__grid .vf-post-card:first-child .vf-post-card__body {
    gap: 8px;
  }
  .vf-related__grid .vf-post-card:first-child .vf-post-card__title {
    font-size: var(--type-title-lg-size);
    line-height: var(--type-title-lg-line);
  }
  .vf-related__grid .vf-post-card:first-child .vf-post-card__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  /* Tin phụ: ảnh nhỏ bên trái, tiêu đề bên phải, ngày · thời gian đọc dưới tiêu đề. */
  .vf-related__grid .vf-post-card:not(:first-child) {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--color-border);
  }
  .vf-related__grid .vf-post-card:not(:first-child):not(:has(.vf-post-card__thumb)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .vf-related__grid .vf-post-card:not(:first-child) .vf-post-card__thumb {
    border-radius: var(--radius-md);
  }
  .vf-related__grid .vf-post-card:not(:first-child) .vf-post-card__body {
    gap: 6px;
  }
  .vf-related__grid .vf-post-card__meta {
    order: 3; /* dưới tiêu đề */
    font-size: var(--type-body-md-size);
    line-height: var(--type-body-md-line);
  }
  .vf-related__grid .vf-post-card:not(:first-child) .vf-post-card__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: var(--type-title-md-size);
    line-height: var(--type-title-md-line);
  }
  .vf-related__grid .vf-post-card__more {
    display: none; /* trùng đích với tiêu đề */
  }
}

@media (prefers-reduced-motion: reduce) {
  .vf-toc--desktop a,
  .vf-post__mtoc summary::after {
    transition: none;
  }
}

/* ── Thang chữ Material 3 cho nội dung bài (token --type-* ở design-tokens.css) ──
   Selector có tiền tố .vf-post để thắng blog-content.css mà không đổi trang Bảo hành/Bảo dưỡng và editor dùng chung file đó. */
.vf-post .vf-prose { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.vf-post .vf-prose :is(p, li) { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.vf-post .vf-prose h2 { font-size: var(--type-headline-size); line-height: var(--type-headline-line); font-weight: var(--font-semibold); letter-spacing: 0; }
.vf-post .vf-prose h3 { font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); font-weight: var(--font-semibold); letter-spacing: 0; }
.vf-post .vf-prose h4 { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--font-semibold); letter-spacing: 0; }
/* H2 "Nguồn tham khảo" và câu hỏi FAQ (H3) nằm trong .vf-prose nhưng là cấp Title, không phải H2/H3 của bài. */
.vf-post .vf-prose .vf-sources__title { font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-line); }
.vf-post .vf-prose .vf-faq__q { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); font-weight: var(--font-bold); }
.vf-post .vf-prose figcaption,
.vf-post .vf-prose .wp-block-table figcaption { font-size: var(--type-body-md-size); line-height: var(--type-body-md-line); }
.vf-post .vf-prose .wp-block-table thead th { font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); }
.vf-post .vf-prose .wp-block-table :is(td, tbody th) { font-size: var(--type-body-lg-size); line-height: var(--type-title-md-line); }
.vf-post .vf-takeaways .vf-takeaways__title { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); letter-spacing: 0; }
.vf-post .vf-takeaways :is(ul, ol, li) { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.vf-post .vf-faq summary { font-size: var(--type-title-md-size); line-height: var(--type-title-md-line); }
.vf-post .vf-faq details > :not(summary) { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.vf-post .vf-cta__title { font-size: var(--type-headline-size); line-height: var(--type-headline-line); letter-spacing: 0; }
.vf-post .vf-cta__text,
.vf-post .vf-cta__contact { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line); }
.vf-post .vf-cta__btn { font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-line); }

/* ── Bảng màu trang bài: không dùng đỏ nhạt (blush); khối nhấn dùng xanh nhạt --color-hybrid-soft ── */
.vf-post .vf-takeaways { border-color: var(--color-hybrid-line); background: var(--color-hybrid-soft); }
.vf-post .vf-prose .wp-block-table thead { background: var(--color-hybrid-soft); }
.vf-post .vf-cta--dark :is(.vf-cta__text, .vf-cta__contact) { color: var(--color-text-on-dark); }

/* ── CTA inline trong bài: thẻ xám có vạch navy bên trái (khối lõm trên khung trắng) ── */
.vf-post .vf-cta--inline {
  gap: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-brand-deep);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}
.vf-post .vf-cta--inline .vf-cta__text {
  font-size: var(--type-title-md-size);
  line-height: var(--type-title-md-line);
  font-weight: var(--font-semibold);
  color: var(--color-text-display);
}
.vf-post .vf-cta--inline .vf-cta__btn { min-height: 48px; padding-inline: var(--space-6); }
@media (max-width: 767px) {
  .vf-post .vf-cta--inline { padding: var(--space-4); }
  .vf-post .vf-cta--inline .vf-cta__btn { width: 100%; }
}

/* ── FAQ trong bài: mỗi câu hỏi là một thẻ riêng; thẻ mở có nền xanh nhạt ở phần câu hỏi ── */
.vf-post .vf-faq {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.vf-post .vf-faq details {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.vf-post .vf-faq details:hover { border-color: var(--color-border-strong); }
.vf-post .vf-faq details[open] { border-color: var(--color-hybrid-line); background: var(--color-surface); }
.vf-post .vf-faq summary {
  box-sizing: border-box;
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-display);
  transition: background var(--transition-fast);
}
.vf-post .vf-faq details[open] summary { background: var(--color-hybrid-soft); }
.vf-post .vf-faq summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.vf-post .vf-faq .vf-faq__chev { width: 8px; height: 8px; border-color: var(--color-brand-deep); }
.vf-post .vf-faq details > :not(summary) {
  padding: var(--space-4) var(--space-5) var(--space-5);
  color: var(--color-text-secondary);
}
.vf-post .vf-faq details > :not(summary):last-child { padding-bottom: var(--space-5); }

/* CTA tối cuối bài: navy (--color-brand-deep) thay ink #111 cho đỡ gắt, cùng màu dải đầu bài và hộp tư vấn cột phụ. */
.vf-post .vf-cta--dark { background: var(--color-brand-deep); }