/* Cầu nối: HTML do Gutenberg sinh ra → giao diện design system. Chỉ dùng biến từ tokens.css.
   Layout v2 — image-led như Gymshark / Nike / New Era: ít trang trí, ảnh lớn, chữ gọn, đen/trắng/xám + gold làm điểm nhấn. */

/* Bỏ khoảng cách mặc định của layout flow, để components.css kiểm soát. */
.vt-section > *, .is-style-section > *, .is-style-section-cream > *, .is-style-section-dark > *, .is-style-section-tight > * { margin-block: 0; }
.wp-block-group.vt-container > * + * { margin-block-start: var(--vt-s-4); }
.wp-block-group.vt-container > .vt-section-head + * { margin-block-start: 0; }

/* ---------- Section ---------- */
.wp-block-group.is-style-section,
.wp-block-group.is-style-section-cream,
.wp-block-group.is-style-section-dark { padding-block: var(--vt-section-y); }
.wp-block-group.is-style-section-tight { padding-block: var(--vt-s-7); border-bottom: 1px solid var(--vt-line); }
.wp-block-group.is-style-section-cream { background: var(--vt-cream); }
.wp-block-group.is-style-section-dark { background: var(--vt-black); color: var(--vt-white); }
.is-style-section-dark .vt-lead { color: rgba(255,255,255,.72); }
.is-style-section-dark .is-style-eyebrow { color: var(--vt-gold); }
/* Section chỉ chứa 1 khối ô ảnh full → bớt lề trên/dưới */
.wp-block-group.is-style-section:has(> .vt-container > .vt-tiles:only-child) { padding-block: var(--vt-s-5); }

/* ---------- Heading ---------- */
.wp-block-heading.is-style-eyebrow { font-size: var(--vt-fs-eyebrow); font-stretch: 100%; font-weight: 700; letter-spacing: var(--vt-ls-eyebrow); color: var(--vt-gold-700); margin-bottom: var(--vt-s-3); }

/* ---------- Buttons (vuông, UPPERCASE nhỏ — kiểu Gymshark/Chilly's) ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--vt-s-3); }
.wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--vt-s-3) var(--vt-s-5); border: 1.5px solid transparent; border-radius: var(--vt-radius); background: var(--vt-black); color: var(--vt-white); font: 700 var(--vt-fs-eyebrow)/1 var(--vt-font); letter-spacing: var(--vt-ls-caps); text-transform: uppercase; text-decoration: none; transition: background-color var(--vt-ease), color var(--vt-ease), border-color var(--vt-ease), opacity var(--vt-ease); }
.wp-block-button__link:hover { opacity: .85; }
.is-style-gold > .wp-block-button__link { background: var(--vt-gold); color: var(--vt-black); }
.is-style-dark > .wp-block-button__link { background: var(--vt-black); color: var(--vt-white); }
.is-style-light > .wp-block-button__link { background: var(--vt-white); color: var(--vt-black); }
.is-style-light > .wp-block-button__link:hover { opacity: 1; background: var(--vt-cream); }
.is-style-outline > .wp-block-button__link { background: transparent; color: currentColor; border-color: currentColor; }
.is-style-outline > .wp-block-button__link:hover { opacity: 1; background: var(--vt-white); color: var(--vt-black); border-color: var(--vt-white); }
.is-style-section .is-style-outline > .wp-block-button__link:hover, .is-style-section-cream .is-style-outline > .wp-block-button__link:hover { background: var(--vt-black); color: var(--vt-white); border-color: var(--vt-black); }
.is-style-link > .wp-block-button__link { min-height: 0; padding: 0; background: none; color: inherit; font-size: var(--vt-fs-small); font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.is-style-link > .wp-block-button__link:hover { opacity: 1; color: var(--vt-gold-700); }

/* ---------- Hero = core/cover + class vt-hero ---------- */
.wp-block-cover.vt-hero { min-height: min(82vh, 760px); padding: 0; align-items: flex-end; }
.wp-block-cover.vt-hero .wp-block-cover__inner-container { width: 100%; max-width: var(--vt-container); margin-inline: auto; padding: var(--vt-s-8) var(--vt-gutter); color: var(--vt-white); }
.wp-block-cover.vt-hero .wp-block-cover__inner-container > * { max-width: 680px; }
.wp-block-cover.vt-hero h1 { font-size: var(--vt-fs-display); margin-bottom: var(--vt-s-3); }
.wp-block-cover.vt-hero .vt-lead { color: rgba(255,255,255,.88); font-size: var(--vt-fs-body); margin-bottom: var(--vt-s-5); }
.wp-block-cover.vt-hero .is-style-eyebrow { color: var(--vt-gold); }
.wp-block-cover.vt-hero--page { min-height: 420px; }
.wp-block-cover.vt-hero--page h1 { font-size: var(--vt-fs-h1); }
/* Lớp phủ: tối dần về góc chữ (trái-dưới) → chữ luôn đọc được, ảnh vẫn rõ */
.wp-block-cover.vt-hero .wp-block-cover__background,
.wp-block-cover.vt-banner .wp-block-cover__background,
.wp-block-cover.vt-tile .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(20deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 70%) !important; }
.wp-block-cover.vt-banner .wp-block-cover__background { background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.15) 100%) !important; }
@media (min-width: 900px) { .wp-block-cover.vt-banner .wp-block-cover__background { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,.05) 75%) !important; } }
/* Vào trang: ảnh zoom nhẹ, chữ trượt lên (không dùng opacity → không làm chậm LCP) */
@keyframes vt-hero-img { from { transform: scale(1.06); } to { transform: none; } }
@keyframes vt-hero-up { from { transform: translateY(20px); } to { transform: none; } }
.wp-block-cover.vt-hero .wp-block-cover__image-background { animation: vt-hero-img 1.6s var(--vt-ease-out) both; }
.wp-block-cover.vt-hero .wp-block-cover__inner-container > * { animation: vt-hero-up .9s var(--vt-ease-out) both; }
.wp-block-cover.vt-hero .wp-block-cover__inner-container > :nth-child(2) { animation-delay: .06s; }
.wp-block-cover.vt-hero .wp-block-cover__inner-container > :nth-child(3) { animation-delay: .12s; }
.wp-block-cover.vt-hero .wp-block-cover__inner-container > :nth-child(4) { animation-delay: .18s; }

/* ---------- Banner ảnh full-width (Gymshark "Hybrid Training") ---------- */
.wp-block-cover.vt-banner { min-height: min(72vh, 640px); padding: 0; align-items: flex-end; }
.wp-block-cover.vt-banner .wp-block-cover__inner-container { width: 100%; max-width: var(--vt-container); margin-inline: auto; padding: var(--vt-s-8) var(--vt-gutter); color: var(--vt-white); }
.wp-block-cover.vt-banner .wp-block-cover__inner-container > * { max-width: 620px; }
.wp-block-cover.vt-banner h2:not(.is-style-eyebrow) { font-size: var(--vt-fs-h1); margin-bottom: var(--vt-s-3); }
.wp-block-cover.vt-banner .vt-lead { color: rgba(255,255,255,.88); font-size: var(--vt-fs-body); margin-bottom: var(--vt-s-5); }
.wp-block-cover.vt-banner .is-style-eyebrow { color: var(--vt-gold); }
.wp-block-cover.vt-banner .wp-block-cover__image-background, .wp-block-cover.vt-tile .wp-block-cover__image-background { transition: transform 1.2s var(--vt-ease-out); }
.wp-block-cover.vt-banner:hover .wp-block-cover__image-background, .wp-block-cover.vt-tile:hover .wp-block-cover__image-background { transform: scale(1.03); }

/* ---------- Ô ảnh (Nike "Featured" / New Era): chữ + nút trắng đè lên ảnh, các ô sát nhau ---------- */
.wp-block-group.vt-tiles { display: grid; gap: var(--vt-s-2); grid-template-columns: 1fr; }
/* Mobile: vuốt ngang (scroll-snap, không thư viện) thay vì xếp chồng dài */
@media (max-width: 699px) {
  .wp-block-group.vt-tiles { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vt-gutter); scrollbar-width: none; margin-inline: calc(var(--vt-gutter) * -1); padding-inline: var(--vt-gutter); }
  .wp-block-group.vt-tiles::-webkit-scrollbar { display: none; }
  .wp-block-group.vt-tiles > * { scroll-snap-align: start; }
}
@media (min-width: 700px) { .wp-block-group.vt-tiles--2 { grid-template-columns: repeat(2, 1fr); } .wp-block-group.vt-tiles--3 { grid-template-columns: repeat(3, 1fr); } }
.wp-block-group.vt-tiles > * { margin: 0 !important; }
.wp-block-cover.vt-tile { min-height: clamp(400px, 110vw, 520px) !important; padding: 0; align-items: flex-end; overflow: hidden; }
@media (min-width: 700px) {
  .wp-block-group.vt-tiles--3 .wp-block-cover.vt-tile { min-height: clamp(420px, 40vw, 600px) !important; }
  .wp-block-group.vt-tiles--2 .wp-block-cover.vt-tile { min-height: clamp(460px, 46vw, 680px) !important; }
}
.wp-block-cover.vt-tile .wp-block-cover__inner-container { width: 100%; padding: var(--vt-s-6); color: var(--vt-white); }
.wp-block-cover.vt-tile h2, .wp-block-cover.vt-tile h3 { margin: 0 0 var(--vt-s-1); font-size: var(--vt-fs-h3); font-stretch: 100%; text-transform: none; letter-spacing: 0; }
.wp-block-group.vt-tiles--2 .wp-block-cover.vt-tile h2:not(.is-style-eyebrow) { font-size: var(--vt-fs-h2); font-stretch: var(--vt-stretch-head); text-transform: uppercase; }
.wp-block-cover.vt-tile p { margin: 0 0 var(--vt-s-4); font-size: var(--vt-fs-small); color: rgba(255,255,255,.85); max-width: 46ch; }
.wp-block-cover.vt-tile .wp-block-button__link { min-height: 36px; padding: var(--vt-s-2) var(--vt-s-4); }

/* ---------- Columns / Split ---------- */
.wp-block-columns { gap: var(--vt-s-5); margin-bottom: 0; }
.wp-block-columns.vt-split { gap: var(--vt-s-7); align-items: center !important; }
@media (min-width: 900px) { .wp-block-columns.vt-split { gap: var(--vt-s-9); } }
.wp-block-columns.vt-split .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Card (group.vt-card: image + heading + paragraph) — kiểu Gymshark "Popular right now" ---------- */
.wp-block-group.vt-card { position: relative; }
.wp-block-group.vt-card .wp-block-image { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--vt-cream); }
.wp-block-group.vt-card .wp-block-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--vt-ease-out); }
.wp-block-group.vt-card:hover .wp-block-image img { transform: scale(1.04); }
.wp-block-group.vt-card h3 { margin: var(--vt-s-3) 0 var(--vt-s-1); font-size: var(--vt-fs-body); font-stretch: 100%; font-weight: 700; text-transform: none; letter-spacing: 0; }
.wp-block-group.vt-card p { margin: 0; font-size: var(--vt-fs-small); color: var(--vt-muted); line-height: 1.5; }
.wp-block-group.vt-card a { text-decoration: none; }
.wp-block-group.vt-card a::after { content: ""; position: absolute; inset: 0; } /* cả thẻ bấm được */
.wp-block-group.vt-card:hover h3 a { text-decoration: underline; text-underline-offset: .2em; }

/* Rail (nhiều card): lưới desktop, vuốt ngang mobile */
.wp-block-group.vt-rail { display: grid; gap: var(--vt-s-2); }
.wp-block-group.vt-rail--3 { --cols: 3; }
.wp-block-group.vt-rail--4 { --cols: 4; }
/* Bước có ảnh (For Partners): số thứ tự trước tiêu đề */
.vt-rail--steps { counter-reset: vt-step; }
.vt-rail--steps .vt-card { counter-increment: vt-step; }
.vt-rail--steps .vt-card h3::before { content: counter(vt-step, decimal-leading-zero); display: block; margin-bottom: var(--vt-s-1); font-size: var(--vt-fs-small); font-weight: 700; color: var(--vt-gold-700); letter-spacing: .08em; }

/* ---------- Steps = core/list ordered + is-style-steps (gọn, nhiều cột) ---------- */
ol.is-style-steps { display: grid; gap: var(--vt-s-6) var(--vt-s-4); counter-reset: step; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1000px) { ol.is-style-steps { grid-template-columns: repeat(3, 1fr); } ol.is-style-steps:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1200px) { ol.is-style-steps:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); } }
ol.is-style-steps > li { counter-increment: step; padding-top: var(--vt-s-4); border-top: 1px solid var(--vt-ink); color: var(--vt-muted); font-size: var(--vt-fs-small); line-height: 1.55; }
ol.is-style-steps > li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: var(--vt-s-4); font-size: var(--vt-fs-small); font-weight: 700; letter-spacing: .08em; color: var(--vt-gold-700); }
ol.is-style-steps > li strong { display: block; margin-bottom: var(--vt-s-2); color: var(--vt-ink); font-size: var(--vt-fs-body); text-transform: none; }
.is-style-section-dark ol.is-style-steps > li { color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.4); }
.is-style-section-dark ol.is-style-steps > li::before { color: var(--vt-gold); }
.is-style-section-dark ol.is-style-steps > li strong { color: var(--vt-white); }

/* ---------- Accordion = core/details ---------- */
.wp-block-details { border-bottom: 1px solid var(--vt-line); margin: 0 !important; }
.wp-block-details:first-of-type { border-top: 1px solid var(--vt-line); }
.wp-block-details summary { display: flex; justify-content: space-between; align-items: center; gap: var(--vt-s-4); padding: var(--vt-s-5) 0; font-weight: 600; cursor: pointer; list-style: none; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; transition: transform var(--vt-ease); }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin: 0 0 var(--vt-s-5); color: var(--vt-muted); max-width: 70ch; }
.wp-block-details[open] > :not(summary) { animation: vt-fade-down 320ms var(--vt-ease-out); }
@keyframes vt-fade-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.vt-faq-content h2 { margin: var(--vt-s-8) 0 var(--vt-s-3); font-size: var(--vt-fs-h3); font-stretch: 100%; scroll-margin-top: calc(var(--vt-header-h) + 24px); }
.vt-faq-content h2:first-child { margin-top: 0; }
.vt-faq-content { border-top: 0; }

/* ---------- Latest posts → lưới thẻ blog ---------- */
ul.wp-block-latest-posts.is-grid { display: grid !important; gap: var(--vt-s-5) var(--vt-s-2); padding: 0; list-style: none; grid-template-columns: 1fr; }
@media (min-width: 900px) { ul.wp-block-latest-posts.is-grid { grid-template-columns: repeat(3, 1fr); } }
ul.wp-block-latest-posts.is-grid li { margin: 0 !important; width: auto !important; min-width: 0; }
.wp-block-latest-posts__featured-image { overflow: hidden; margin-bottom: var(--vt-s-3) !important; }
.wp-block-latest-posts__featured-image img { width: 100%; max-width: 100% !important; height: auto; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 700ms var(--vt-ease-out); }
.wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img { transform: scale(1.04); }
.wp-block-latest-posts__post-title { display: block; font-weight: 700; font-size: var(--vt-fs-body); text-decoration: none; }
.wp-block-latest-posts li:hover .wp-block-latest-posts__post-title { text-decoration: underline; text-underline-offset: .2em; }
.wp-block-latest-posts__post-date { display: block; margin-top: var(--vt-s-1); font-size: var(--vt-fs-small); color: var(--vt-muted); }
.wp-block-latest-posts__post-excerpt { font-size: var(--vt-fs-small); color: var(--vt-muted); margin-top: var(--vt-s-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }

/* ---------- Image ---------- */
.wp-block-image { margin: 0; }
.wp-block-image img { height: auto; }

/* ---------- MOQ tiers: 3 cột, kẻ trên mảnh ---------- */
.wp-block-columns.vt-tiers > .wp-block-column { padding-top: var(--vt-s-5); border-top: 1px solid var(--vt-ink); }
.vt-tiers .vt-stat__num { color: var(--vt-ink); }
.vt-tiers .vt-stat__label { margin-bottom: var(--vt-s-3); color: var(--vt-gold-700); }
.vt-tiers p { color: var(--vt-muted); margin: 0; font-size: var(--vt-fs-small); max-width: 40ch; }

/* ---------- About — 2 nhà máy ---------- */
.vt-factories .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vt-factories h3 { margin-top: var(--vt-s-4); font-size: var(--vt-fs-body); font-stretch: 100%; }
.vt-factories ul { padding-left: 1.1em; color: var(--vt-muted); font-size: var(--vt-fs-small); }

/* ---------- Contact ---------- */
.vt-contact h3 { margin: var(--vt-s-5) 0 var(--vt-s-2); font-size: var(--vt-fs-eyebrow); letter-spacing: var(--vt-ls-caps); color: var(--vt-gold-700); }
.vt-contact h3:first-child { margin-top: 0; }
.vt-contact .wp-block-column:first-child p { font-size: 1.125rem; }