/* Trang showroom và Gutenberg. Chỉ sử dụng token/component hiện có; mobile first. */
.vf-showroom-page { background: var(--color-surface); color: var(--color-text-body); }
.vf-showroom-hero { position: relative; background: var(--color-surface); }
.vf-showroom-hero__media { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.vf-showroom-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.vf-showroom-hero__media figcaption { position: absolute; right: var(--space-3); bottom: var(--space-3); margin: 0; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-overlay-light); color: var(--color-text-secondary); font-size: var(--text-sm); }
.vf-showroom-hero__copy { position: relative; padding-block: var(--space-4) var(--space-8); }
.vf-showroom-intro { display: flex; flex-direction: column; gap: var(--space-2); }
.vf-showroom-intro p { margin: 0; }
.vf-showroom-body { display: flex; flex-direction: column; gap: var(--space-8); padding-bottom: var(--block-py); }
.vf-showroom-info { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: none; background: var(--color-surface); }
.vf-showroom-info__grid { display: grid; gap: var(--space-3); }
.vf-showroom-info__item { position: relative; padding: var(--space-4) var(--space-4) var(--space-4) var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.vf-showroom-info__item::before { content: ''; position: absolute; top: var(--space-4); left: var(--space-3); width: var(--space-10); height: var(--space-10); border-radius: var(--radius-full); background: var(--color-brand-light); }
.vf-showroom-info__item::after { content: ''; position: absolute; top: var(--space-6); left: var(--space-5); width: var(--space-6); height: var(--space-6); background: var(--color-brand-deep); mask: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat; }
.vf-showroom-info__item--clock::after { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.vf-showroom-info__item--car::after { mask-image: url("data:image/svg+xml,%3Csvg 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'%3E%3Cpath d='m5 8 2-5h10l2 5M3 8h18v10H3zM6 18v3m12-3v3M6 12h2m8 0h2'/%3E%3C/svg%3E"); }
.vf-showroom-info__item--service::after { mask-image: url("data:image/svg+xml,%3Csvg 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'%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.94z'/%3E%3C/svg%3E"); }
.vf-showroom-info__item h3 { margin: 0 0 var(--space-2); color: var(--color-brand-deep); font-size: var(--text-base); font-weight: var(--font-semibold); }
.vf-showroom-info__item p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-secondary); }
.vf-showroom-info__item .vf-showroom-info__link { margin-top: var(--space-2); }
.vf-showroom-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.vf-showroom-text-link a { color: var(--color-brand-primary); font-weight: var(--font-bold); text-decoration: none; }
.vf-showroom-text-link a:hover { text-decoration: underline; }
.vf-showroom-journey { padding: var(--space-5); background: var(--color-brand-light); border-radius: var(--radius-xl); }
.vf-showroom-journey ol { counter-reset: showroom-step; list-style: none; display: grid; gap: var(--space-5); margin: 0; padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-lg); }
.vf-showroom-journey li { position: relative; counter-increment: showroom-step; padding-left: var(--space-12); font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.vf-showroom-journey li::before { content: counter(showroom-step) / ''; position: absolute; left: 0; top: 0; display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-brand-tint); color: var(--color-brand-deep); font-size: var(--text-lg); font-weight: var(--font-bold); }
.vf-showroom-journey strong { display: inline-block; margin-bottom: var(--space-1); color: var(--color-brand-deep); }
.vf-showroom-discover { display: grid; gap: var(--space-5); }
.vf-showroom-models, .vf-showroom-advisor { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.vf-showroom-models > .vf-showroom-text-link { margin: calc(-1 * var(--space-2)) 0 var(--space-4); font-size: var(--text-sm); }
.vf-showroom-vehicle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.vf-showroom-vehicle-grid li { min-width: 0; }
.vf-showroom-vehicle .vf-card__img { margin: 0; }
.vf-showroom-vehicle .vf-card__model { margin: 0; padding: var(--space-3); text-align: center; font-size: var(--text-base); }
.vf-showroom-advisor { padding: var(--space-4); }
.vf-showroom-advisor > h2 { margin-bottom: var(--space-3); }
.vf-showroom-advisor p { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.vf-showroom-advisor .vf-showroom-advisor__name { margin: 0 0 var(--space-2); color: var(--color-brand-deep); font-size: var(--text-lg); font-weight: var(--font-semibold); }
.vf-showroom-advisor > p.wp-block-paragraph:not(.vf-showroom-advisor__name):not(.vf-showroom-hotline) { margin-block-start: var(--space-2); }
.vf-showroom-advisor .vf-showroom-hotline { display: grid; gap: var(--space-1); margin: var(--space-3) 0; padding: var(--space-3); border: 1px solid var(--color-brand-tint); border-inline-start: var(--space-1) solid var(--color-brand-primary); border-radius: var(--radius-lg); background: var(--color-brand-light); }
.vf-showroom-hotline br { display: none; }
.vf-showroom-hotline strong { color: var(--color-brand-primary); font-size: var(--text-sm); font-weight: var(--font-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.vf-showroom-hotline a { width: fit-content; color: var(--color-brand-deep); font-size: var(--font-size-body-lg); font-weight: var(--font-bold); line-height: var(--leading-normal); text-decoration: none; }
.vf-showroom-hotline a:hover { text-decoration: underline; }
.vf-showroom-hotline a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }
.vf-showroom-hotline span { color: var(--color-text-secondary); font-size: var(--text-sm); }
.vf-showroom-faq .wp-block-details { margin: 0 0 var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.vf-showroom-faq summary { padding: var(--space-4); font-size: var(--text-base); font-weight: var(--font-bold); color: var(--color-brand-deep); cursor: pointer; }
.vf-showroom-faq details[open] summary { background: var(--color-brand-light); }
.vf-showroom-faq .wp-block-details p { margin: 0; padding: var(--space-4); font-size: var(--text-base); line-height: var(--leading-relaxed); }
:is(.vf-showroom-body, .vf-showroom-intro) a:focus-visible, .vf-showroom-faq summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: var(--space-1); }

.vf-showroom-advisor > .wp-block-buttons { margin-block-start: var(--space-3); }

@media (min-width: 768px) {
  .vf-showroom-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-showroom-journey ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-showroom-vehicle-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vf-showroom-hero { max-width: var(--container-max); margin-inline: auto; min-height: var(--space-28); }
  .vf-showroom-hero__media { position: absolute; inset: 0; aspect-ratio: auto; }
  .vf-showroom-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-surface) 0%, var(--color-surface) 31%, color-mix(in srgb, var(--color-surface) 93%, transparent) 39%, transparent 70%); }
  .vf-showroom-hero__media img { object-position: center; }
  .vf-showroom-hero__media figcaption { z-index: var(--z-raised); bottom: var(--space-10); }
  .vf-showroom-hero__copy { padding-top: var(--space-6); padding-bottom: var(--space-20); }
  .vf-showroom-intro { max-width: 49%; }
  .vf-showroom-hero--plain .vf-showroom-intro { max-width: 46rem; }
  .vf-showroom-body { position: relative; margin-top: calc(-1 * var(--space-8)); }
  .vf-showroom-info__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .vf-showroom-info__item { border: 0; border-radius: 0; }
  .vf-showroom-info__item + .vf-showroom-info__item { border-left: 1px solid var(--color-border); }
  .vf-showroom-journey ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .vf-showroom-discover { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.vf-showroom-about > :not(h2) { max-width: 46rem; }
.vf-showroom-about h3 { margin: var(--space-6) 0 var(--space-2); font-size: var(--text-lg); color: var(--color-brand-deep); }
.vf-showroom-about p, .vf-showroom-about li { line-height: var(--leading-relaxed); }
.vf-showroom-about ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }