/* Trang tổng hợp Dịch vụ (/dich-vu/). Dùng chung frontend và Block Editor: selector chỉ theo class .vf-hub-*,
   không phụ thuộc thẻ bọc của template. Màu, cỡ chữ, khoảng cách, bo góc, bóng đều lấy từ design-tokens.css. */

/* ── Biểu tượng (Block Style của khối Nhóm: is-style-vf-icon-*) ───────────────────────── */
.is-style-vf-icon-check   { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0z m-13 0 2 2 4-4'/%3E%3C/svg%3E"); }
.is-style-vf-icon-send    { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11zM21.854 2.147l-10.94 10.939'/%3E%3C/svg%3E"); }
.is-style-vf-icon-wrench  { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E"); }
.is-style-vf-icon-gear    { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3C/svg%3E"); }
.is-style-vf-icon-shield  { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.is-style-vf-icon-headset { --vf-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5Zm0 0a9 9 0 1 1 18 0m0 0v5a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3ZM21 16v2a4 4 0 0 1-4 4h-5'/%3E%3C/svg%3E"); }
.vf-hub-support, .vf-hub-choose, .vf-hub-assist, .vf-hub-bottom, .vf-hub-card, .vf-hub-help, .vf-hub-steps, .vf-hub-faq, .vf-hub-cta {
  --vf-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --vf-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --vf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --vf-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E");
}

/* Vòng tròn nền + biểu tượng: chỉ hiện khi khối có kiểu is-style-vf-icon-* */
[class*="is-style-vf-icon-"]::before {
  content: ""; display: block; width: 3rem; height: 3rem; border-radius: var(--radius-full);
  background: var(--color-brand-light);
}
[class*="is-style-vf-icon-"]::after {
  content: ""; position: absolute; width: 1.5rem; height: 1.5rem; left: calc(var(--vf-pad, 0px) + .75rem); top: calc(var(--vf-pad, 0px) + .75rem);
  background: var(--color-brand-primary);
  -webkit-mask: var(--vf-icon) center / contain no-repeat; mask: var(--vf-icon) center / contain no-repeat;
}

/* ── Trang ────────────────────────────────────────────────────────────────────────── */
.vf-hub { color: var(--color-text-body); background: var(--color-surface); }
.vf-hub-shell { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-px); }
.vf-hub-main { padding-block: 0 var(--space-16); }
.vf-hub-empty { padding: var(--space-5); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); }


/* Khối nội dung: khoảng cách riêng từng khối để không phụ thuộc block gap của WordPress */
:is(.vf-hub-support, .vf-hub-choose, .vf-hub-assist, .vf-hub-bottom) { margin-block: var(--space-8) 0; }
:is(.vf-hub-support__cols, .vf-hub-cards, .vf-hub-assist, .vf-hub-bottom) > * { margin-block: 0; } /* lưới tự lo khoảng cách: bỏ block gap của WordPress */
:is(.vf-hub-support, .vf-hub-choose, .vf-hub-help, .vf-hub-steps, .vf-hub-faq, .vf-hub-cta) h2 { margin: 0; font-weight: var(--font-extrabold); line-height: var(--leading-tight); color: var(--color-text-heading); letter-spacing: normal; }
:is(.vf-hub-support, .vf-hub-choose) > h2 { font-size: var(--font-size-title); margin-bottom: var(--space-5); }

/* Showroom hỗ trợ */
.vf-hub-support { padding: var(--space-5); background: linear-gradient(180deg, var(--color-surface-soft), var(--color-brand-tint-soft)); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); }
.vf-hub-support__cols { display: grid; gap: var(--space-5); }
.vf-hub-feature { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-content: start; }
.vf-hub-feature::before { grid-row: 1 / span 2; width: 3rem; height: 3rem; }
.vf-hub-feature > * { grid-column: 2; min-width: 0; }
.vf-hub-feature h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--color-text-heading); align-self: center; }
.vf-hub-feature + .vf-hub-feature { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.vf-hub-feature + .vf-hub-feature::after { top: calc(var(--space-5) + .75rem); }
.vf-hub-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vf-hub-checks li { position: relative; margin: 0; padding-left: 1.75rem; color: var(--color-text-secondary); }
.vf-hub-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.05rem; height: 1.05rem; background: var(--color-brand-primary); -webkit-mask: var(--vf-tick) center / contain no-repeat; mask: var(--vf-tick) center / contain no-repeat; }
.vf-hub-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.vf-hub-note::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .1rem; background: currentColor; -webkit-mask: var(--vf-info) center / contain no-repeat; mask: var(--vf-info) center / contain no-repeat; }

/* Thẻ nhu cầu */
.vf-hub-cards { display: grid; gap: var(--space-3); }
.vf-hub-card { --vf-pad: var(--space-4); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-4); align-content: start; min-height: 7rem; padding: var(--vf-pad); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base), border-color var(--transition-base); }
.vf-hub-card::before { grid-row: 1 / span 3; width: 2.75rem; height: 2.75rem; position: relative; }
.vf-hub-card::after { width: 1.375rem; height: 1.375rem; left: calc(var(--vf-pad) + .6875rem); top: calc(var(--vf-pad) + .6875rem); }
.vf-hub-card > * { grid-column: 2; min-width: 0; }
.vf-hub-card:hover, .vf-hub-card:focus-within { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.vf-hub-card__media { position: absolute; z-index: -1; inset: 0 0 0 auto; width: 46%; margin: 0; grid-column: auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.vf-hub-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vf-hub-card h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: var(--font-extrabold); color: var(--color-text-heading); text-shadow: 0 0 .75rem var(--color-surface); }
.vf-hub-card p:not(.vf-hub-card__link) { margin: 0 0 var(--space-2); max-width: 26ch; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.vf-hub-card__link { margin: 0; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-extrabold); color: var(--color-cta-primary); }
.vf-hub-card__link::after { content: ""; width: .9rem; height: .9rem; background: currentColor; -webkit-mask: var(--vf-arrow) center / contain no-repeat; mask: var(--vf-arrow) center / contain no-repeat; }
.vf-hub-card h3 a { color: inherit; text-decoration: none; }
.vf-hub-card h3 a::after { content: ""; position: absolute; inset: 0; } /* liên kết nằm ở tiêu đề (anchor text mô tả), cả thẻ là vùng bấm */
.vf-hub-card h3 a:focus-visible { outline: none; }
.vf-hub-card:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Cần hỗ trợ nhanh + Quy trình */
.vf-hub-assist { display: grid; gap: var(--space-3); }
.vf-hub-help { --vf-pad: var(--space-5); position: relative; display: grid; grid-template-columns: 1fr; padding: var(--vf-pad); background: var(--color-brand-tint-soft); border: 1px solid var(--color-border); border-radius: var(--radius-xl); align-content: start; }
.vf-hub-help h2 { font-size: var(--text-xl); margin-bottom: var(--space-1); }
.vf-hub-help p { margin: 0 0 var(--space-4); font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.vf-hub-help.is-style-vf-icon-headset::before { display: none; }
.vf-hub-help.is-style-vf-icon-headset::after { display: none; }
.vf-hub-steps { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); }
.vf-hub-steps h2 { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.vf-hub-steps ol { counter-reset: vf-step; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.vf-hub-steps li { counter-increment: vf-step; position: relative; margin: 0; padding-left: 3rem; min-height: 2.25rem; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text-muted); }
.vf-hub-steps li::before { content: counter(vf-step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: var(--radius-full); background: var(--color-brand-light); color: var(--color-brand-primary); font-weight: var(--font-extrabold); }
.vf-hub-steps li br { display: none; }
.vf-hub-steps li strong { display: block; font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-text-heading); }

/* Hỏi đáp (khối vinfast/faq) + CTA */
.vf-hub-bottom { display: grid; gap: var(--space-4); }
.vf-hub-faq__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.vf-hub-faq h2 { font-size: var(--text-xl); }
.vf-hub-faq__all { margin: 0; font-size: var(--text-sm); font-weight: var(--font-bold); }
.vf-hub-faq__all a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.vf-hub-faq .vf-faq { display: grid; gap: var(--space-2); margin: 0; border: 0; border-radius: 0; overflow: visible; }
.vf-hub-faq details { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.vf-hub-faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 2.75rem; font-weight: var(--font-bold); color: var(--color-text-heading); cursor: pointer; list-style: none; }
.vf-hub-faq summary::-webkit-details-marker { display: none; }
.vf-hub-faq .vf-faq__q { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.vf-hub-faq .vf-faq__chev { flex: none; width: .5rem; height: .5rem; margin-top: -.25rem; border-right: 2px solid var(--color-brand-primary); border-bottom: 2px solid var(--color-brand-primary); transform: rotate(45deg); transition: transform var(--transition-base); }
.vf-hub-faq details[open] .vf-faq__chev { margin-top: .25rem; transform: rotate(225deg); }
.vf-hub-faq details > :not(summary) { margin: 0; padding: 0 var(--space-4) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.vf-hub-cta { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-3); padding: 0 var(--space-6) var(--space-6); border-radius: var(--radius-xl); color: var(--color-text-inverse);
  background: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-brand-electric) 35%, transparent), transparent 50%), linear-gradient(135deg, var(--color-brand-deep), var(--color-brand-deep-mid)); }
.vf-hub-cta__media { order: -1; margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-10)); aspect-ratio: 16 / 9; opacity: .6; -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent); mask-image: linear-gradient(180deg, #000 35%, transparent); z-index: -1; }
.vf-hub-cta__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; }
.vf-hub-cta__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); font-weight: var(--font-extrabold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-brand-on-dark); }
.vf-hub-cta__eyebrow::before { content: ""; width: .375rem; height: .375rem; border-radius: var(--radius-full); background: currentColor; }
.vf-hub-cta h2 { max-width: 20ch; font-size: var(--font-size-h3); color: inherit; }
.vf-hub-cta p:not(.vf-hub-cta__eyebrow) { margin: 0; max-width: 36ch; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-on-dark); }
.vf-hub-cta .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-1) 0 0; }
.vf-hub-cta .vf-btn--ghost-white .wp-block-button__link { background: transparent; box-shadow: none; border: 2px solid color-mix(in srgb, var(--color-text-inverse) 70%, transparent); }
.vf-hub-cta .vf-btn--ghost-white .wp-block-button__link:hover { background: color-mix(in srgb, var(--color-text-inverse) 12%, transparent); }

/* Nút trong trang: dùng chung dáng với .vf-btn--primary, khai báo lại để Block Editor hiển thị đúng */
.vf-hub .wp-block-button.vf-btn { display: block; padding: 0; min-height: 0; border: 0; background: none; box-shadow: none; filter: none; transform: none; } /* .vf-btn dùng chung chỉ dành cho thẻ <a>, không áp lên wrapper khối nút */
:is(.vf-hub-help, .vf-hub-cta) .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--gradient-action); color: var(--color-text-inverse); font-weight: var(--font-extrabold); text-decoration: none; box-shadow: var(--shadow-brand); }
:is(.vf-hub-help, .vf-hub-cta) .wp-block-button__link:hover { background: var(--color-cta-hover); }
.vf-hub a:focus-visible, .vf-hub summary:focus-visible, .vf-hub .wp-block-button__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 767px) {
  :is(.vf-hub-help, .vf-hub-cta) .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .vf-hub :is(.vf-hub-help, .vf-hub-cta) .wp-block-button.vf-btn, .vf-hub :is(.vf-hub-help, .vf-hub-cta) .wp-block-button.vf-btn > .wp-block-button__link { width: 100%; } /* thắng width:auto của .vf-btn dùng chung */
}
@media (min-width: 768px) {
  .vf-hub-shell { padding-inline: var(--container-px-md); }
  .vf-hub-support { padding: var(--space-6) var(--space-8) var(--space-5); }
  .vf-hub-support__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .vf-hub-feature { padding-inline: var(--space-8); column-gap: var(--space-5); }
  .vf-hub-feature:first-child { padding-left: 0; }
  .vf-hub-feature + .vf-hub-feature { padding-top: 0; border-top: 0; border-left: 1px solid var(--color-border); }
  .vf-hub-feature + .vf-hub-feature::after { top: .75rem; left: calc(var(--space-8) + 1px + .75rem); }
  .vf-hub-note { justify-content: center; align-items: center; margin-top: var(--space-5); }
  .vf-hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .vf-hub-card { --vf-pad: var(--space-6); display: block; min-height: 12rem; border-radius: var(--radius-xl); }
  .vf-hub-card::before { width: 3.5rem; height: 3.5rem; margin-bottom: var(--space-4); }
  .vf-hub-card::after { width: 1.75rem; height: 1.75rem; left: calc(var(--vf-pad) + .875rem); top: calc(var(--vf-pad) + .875rem); }
  .vf-hub-card__media { inset: 0 0 auto auto; width: 60%; height: 58%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(90deg, transparent, #000 55%), linear-gradient(180deg, #000 55%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .vf-hub-card h3 { font-size: var(--text-xl); }
  .vf-hub-card p:not(.vf-hub-card__link) { font-size: var(--text-base); margin-bottom: var(--space-3); }
  .vf-hub-card__link { font-size: var(--text-base); }
  .vf-hub-help { --vf-pad: var(--space-6); grid-template-columns: auto 1fr; column-gap: var(--space-5); padding: var(--space-6); }
  .vf-hub-help > * { grid-column: 2; }
  .vf-hub-help.is-style-vf-icon-headset::before { display: block; grid-column: 1; grid-row: 1 / span 3; width: 3.5rem; height: 3.5rem; background: var(--color-brand-tint); }
  .vf-hub-help.is-style-vf-icon-headset::after { display: block; width: 1.75rem; height: 1.75rem; left: calc(var(--vf-pad) + .875rem); top: calc(var(--vf-pad) + .875rem); }
  .vf-hub-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
  .vf-hub-steps li { padding: 2.75rem 0 0; }
  .vf-hub-steps li:not(:last-child)::after { content: ""; position: absolute; top: .5rem; left: calc(100% + .5rem); width: 1rem; height: 1rem; background: var(--color-border-strong); -webkit-mask: var(--vf-chevron) center / contain no-repeat; mask: var(--vf-chevron) center / contain no-repeat; }
  .vf-hub-steps li strong { margin-bottom: var(--space-1); }
  .vf-hub-faq__head { margin-bottom: var(--space-4); }
  .vf-hub-faq summary { padding-inline: var(--space-5); }
  .vf-hub-faq details > :not(summary) { padding-inline: var(--space-5); }
  .vf-hub-cta { min-height: 17.5rem; padding: var(--space-8); }
  .vf-hub-cta__media { position: absolute; inset: 0; margin: 0; aspect-ratio: auto; opacity: .55; -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 85%), linear-gradient(0deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent 15%, #000 85%), linear-gradient(0deg, transparent, #000 55%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .vf-hub-cta__media img { object-position: 78% 40%; }
  .vf-hub-cta > :not(.vf-hub-cta__media) { max-width: 21.5rem; }
}
@media (min-width: 1024px) {
  .vf-hub-support { position: relative; margin-top: calc(-1 * var(--space-6)); }
}
@media (min-width: 1024px) {
  .vf-hub-assist { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); }
  .vf-hub-bottom { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .vf-hub-card, .vf-hub-faq .vf-faq__chev { transition: none; }
}