/* ==========================================================================
   VOLWATT B2B — GLOBAL CSS
   Website: volwattauto.vn (kênh hợp tác đại lý B2B)
   --------------------------------------------------------------------------
   Ánh xạ token: các biến --vw-* dưới đây tương ứng 1-1 với theme.json
   (settings.color.palette / typography / spacing / layout / custom).
   Sửa token ở theme.json trước, sau đó đồng bộ lại :root tại đây.
   Quy ước: mọi class component dùng tiền tố .vw-
   Thẩm mỹ: Modern Industrial B2B — phẳng, chính xác, không gradient neon,
   không glassmorphism, không hiệu ứng rườm rà.
   ========================================================================== */

/* ============ 1. TOKENS (:root) ============ */
:root {
  /* -- Màu thương hiệu -- */
  --vw-primary: #FF6600;
  --vw-primary-hover: #E05500;
  --vw-primary-ink: #FFFFFF;          /* chữ trên nền cam */
  --vw-primary-soft: #FFF1E8;        /* nền nhạt dẫn xuất từ cam */
  --vw-primary-soft-border: #FFD9BE;
  --vw-dark: #202020;
  --vw-white: #FFFFFF;
  --vw-bg-alt: #F6F6F3;
  --vw-border: #E2E2DF;
  --vw-text-muted: #5A5A58;

  /* -- Màu trạng thái form (chỉ dùng cho báo lỗi / thành công) -- */
  --vw-error: #C0392B;
  --vw-error-bg: #FBEDEB;
  --vw-error-border: #F0C4BE;
  --vw-success: #14622B;
  --vw-success-bg: #E9F5EC;
  --vw-success-border: #BFE3C9;

  /* -- Bo góc -- */
  --vw-radius-sm: 6px;
  --vw-radius-md: 8px;
  --vw-radius-pill: 999px;

  /* -- Spacing scale (đồng bộ theme.json) -- */
  --vw-space-xs: 4px;
  --vw-space-sm: 8px;
  --vw-space-md: 16px;
  --vw-space-lg: 24px;
  --vw-space-xl: 32px;
  --vw-space-2xl: 48px;
  --vw-space-3xl: 64px;
  --vw-space-4xl: 96px;

  /* -- Layout -- */
  --vw-container: 1240px;
  --vw-container-wide: 1320px;
  --vw-container-pad: 24px;          /* desktop */
  --vw-grid-gap: 24px;               /* mobile / tablet */
  --vw-grid-gap-desktop: 32px;       /* >= 1024px */
  --vw-header-h: 72px;

  /* -- Typography -- */
  --vw-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --vw-lh-h1: 1.22;
  --vw-lh-h2: 1.25;
  --vw-lh-h3: 1.35;
  --vw-lh-body: 1.75;

  /* -- Transition -- */
  --vw-transition-fast: 150ms;
  --vw-transition-base: 200ms;
  --vw-ease: ease;

  /* -- Khác -- */
  --vw-focus-ring: 0 0 0 3px rgba(255, 102, 0, 0.35);
  --vw-shadow-card: 0 1px 2px rgba(32, 32, 32, 0.06), 0 6px 20px rgba(32, 32, 32, 0.07);
  --vw-shadow-menu: 0 8px 28px rgba(32, 32, 32, 0.14);
}

@media (max-width: 767px) {
  :root {
    --vw-container-pad: 16px;        /* container padding mobile */
  }
}

/* ============ 2. BASE / RESET NHẸ ============ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--vw-font-sans);
  font-size: 14px; /* body base 14px (chuẩn site-wide 16/10/2026) */
  line-height: var(--vw-lh-body);
  color: var(--vw-dark);
  background: var(--vw-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* kiểm soát overflow-x mà không phá position: sticky */
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
ul:last-child, ol:last-child { margin-bottom: 0; }

/* Tiêu đề: KHÔNG giới hạn max-width hẹp — để tiêu đề thở theo container.
   KHÔNG dùng <br> để ngắt dòng trong tiêu đề; trình duyệt tự xuống dòng. */
h1, h2, h3, h4 {
  margin: 0 0 0.6em;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance; /* cân dòng tiêu đề, thay cho <br> thủ công */
}
h1 { font-size: clamp(24px, 4vw, 36px); line-height: var(--vw-lh-h1); } /* 24–36px */
h2 { font-size: clamp(16px, 2.5vw, 20px); line-height: var(--vw-lh-h2); }   /* 16–20px */
h3 { font-size: clamp(14px, 2vw, 18px); line-height: var(--vw-lh-h3); font-weight: 700; } /* 14–18px */
h4 { font-size: 16px; line-height: 1.4; font-weight: 700; }

a { color: var(--vw-primary); text-decoration: none; }
a:hover { color: var(--vw-primary-hover); text-decoration: underline; }

::selection { background: var(--vw-primary); color: #fff; }

/* Anchor: trừ hao chiều cao header sticky khi nhảy tới */
[id] { scroll-margin-top: calc(var(--vw-header-h) + 16px); }

/* Focus rõ nét cho mọi phần tử tương tác */
:focus-visible {
  outline: 3px solid var(--vw-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============ 3. LAYOUT: CONTAINER / GRID 12 CỘT / SECTION ============ */
.vw-container {
  width: 100%;
  max-width: var(--vw-container);
  margin-inline: auto;
  padding-inline: var(--vw-container-pad);
}
.vw-container--wide { max-width: var(--vw-container-wide); }

.vw-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--vw-grid-gap);
}
@media (min-width: 1024px) {
  .vw-grid { gap: var(--vw-grid-gap-desktop); }
}

/* Mobile-first: mọi cột mặc định full-width; .vw-col-* ép span mọi breakpoint,
   .vw-col-md-* áp dụng từ 768px, .vw-col-lg-* từ 1024px. */
.vw-grid > [class*="vw-col-"] { grid-column: span 12; min-width: 0; }

.vw-col-1 { grid-column: span 1; }
.vw-col-2 { grid-column: span 2; }
.vw-col-3 { grid-column: span 3; }
.vw-col-4 { grid-column: span 4; }
.vw-col-5 { grid-column: span 5; }
.vw-col-6 { grid-column: span 6; }
.vw-col-7 { grid-column: span 7; }
.vw-col-8 { grid-column: span 8; }
.vw-col-9 { grid-column: span 9; }
.vw-col-10 { grid-column: span 10; }
.vw-col-11 { grid-column: span 11; }
.vw-col-12 { grid-column: span 12; }

@media (min-width: 768px) {
  .vw-col-md-1 { grid-column: span 1; }
  .vw-col-md-2 { grid-column: span 2; }
  .vw-col-md-3 { grid-column: span 3; }
  .vw-col-md-4 { grid-column: span 4; }
  .vw-col-md-5 { grid-column: span 5; }
  .vw-col-md-6 { grid-column: span 6; }
  .vw-col-md-7 { grid-column: span 7; }
  .vw-col-md-8 { grid-column: span 8; }
  .vw-col-md-9 { grid-column: span 9; }
  .vw-col-md-10 { grid-column: span 10; }
  .vw-col-md-11 { grid-column: span 11; }
  .vw-col-md-12 { grid-column: span 12; }
}
@media (min-width: 1024px) {
  .vw-col-lg-1 { grid-column: span 1; }
  .vw-col-lg-2 { grid-column: span 2; }
  .vw-col-lg-3 { grid-column: span 3; }
  .vw-col-lg-4 { grid-column: span 4; }
  .vw-col-lg-5 { grid-column: span 5; }
  .vw-col-lg-6 { grid-column: span 6; }
  .vw-col-lg-7 { grid-column: span 7; }
  .vw-col-lg-8 { grid-column: span 8; }
  .vw-col-lg-9 { grid-column: span 9; }
  .vw-col-lg-10 { grid-column: span 10; }
  .vw-col-lg-11 { grid-column: span 11; }
  .vw-col-lg-12 { grid-column: span 12; }
}

/* Lối tắt grid cột đều (ghi đè template 12 cột khi cần) */
@media (min-width: 768px) {
  .vw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .vw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.vw-section { padding-block: 48px; }                       /* mobile */
@media (min-width: 768px) {
  .vw-section { padding-block: clamp(64px, 7vw, 96px); }   /* desktop 64–96px */
}
.vw-section--alt { background: var(--vw-bg-alt); }
.vw-section--dark { background: var(--vw-dark); color: #fff; }
.vw-section--dark h1, .vw-section--dark h2, .vw-section--dark h3 { color: #fff; }

/* ============ 4. NÚT BẤM ============ */
/* QUY TẮC: 2 nút .vw-btn--primary KHÔNG BAO GIỜ đặt cạnh nhau.
   Cặp CTA luôn là: 1 primary + 1 secondary (hoặc light trên nền tối).
   Dùng .vw-btn-group để căn nhóm nút. */
.vw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* touch target >= 44px */
  min-width: 44px;
  padding: 10px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--vw-radius-md);
  transition: background-color var(--vw-transition-fast) var(--vw-ease),
              color var(--vw-transition-fast) var(--vw-ease),
              border-color var(--vw-transition-fast) var(--vw-ease),
              box-shadow var(--vw-transition-fast) var(--vw-ease);
}
.vw-btn:hover { text-decoration: none; }
.vw-btn:focus-visible { outline-offset: 3px; }
.vw-btn:disabled, .vw-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.vw-btn--primary { background: var(--vw-primary); color: var(--vw-primary-ink); }
.vw-btn--primary:hover { background: var(--vw-primary-hover); color: var(--vw-primary-ink); }

.vw-btn--secondary { background: transparent; color: var(--vw-dark); border-color: var(--vw-dark); }
.vw-btn--secondary:hover { background: var(--vw-dark); color: #fff; }

.vw-btn--light { background: #fff; color: var(--vw-dark); }
.vw-btn--light:hover { background: var(--vw-bg-alt); color: var(--vw-dark); }

.vw-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.65); }
.vw-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.vw-btn--sm { min-height: 44px; padding: 8px 16px; font-size: 0.8125rem; }
.vw-btn--lg { min-height: 52px; padding: 14px 32px; font-size: 1rem; }
.vw-btn--block { display: flex; width: 100%; }

.vw-btn-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.vw-btn-group--center { justify-content: center; }

/* ============ 5. EYEBROW + SECTION HEADING ============ */
.vw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vw-primary);
}
.vw-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
/* Biến thể tag kỹ thuật: dùng cho mã sản phẩm / mã tài liệu (VD: GE-169S) */
.vw-eyebrow--tech { font-family: var(--vw-font-mono); letter-spacing: 0.06em; }
.vw-eyebrow--on-dark { color: #FF9E5E; }

.vw-section-heading { margin-bottom: 40px; }
.vw-section-heading h2 { margin-bottom: 12px; }
.vw-section-heading p.vw-lead { color: var(--vw-text-muted); font-size: 16px; max-width: 68ch; }
.vw-section-heading--center { margin-inline: auto; text-align: center; }
.vw-section-heading--center .vw-eyebrow::after {
  content: ""; width: 28px; height: 2px; background: currentColor; flex: none;
}
.vw-section-heading--center p.vw-lead { margin-inline: auto; }

/* ============ 6. CARD / BADGE ============ */
.vw-card {
  background: var(--vw-white);
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 24px;
  transition: box-shadow var(--vw-transition-base) var(--vw-ease),
              transform var(--vw-transition-base) var(--vw-ease),
              border-color var(--vw-transition-fast) var(--vw-ease);
}
a.vw-card:hover, .vw-card--hover:hover {
  border-color: var(--vw-primary);
  box-shadow: var(--vw-shadow-card);
  transform: translateY(-2px);
  text-decoration: none;
}
.vw-card h3 { margin-bottom: 8px; }
.vw-card p { color: var(--vw-text-muted); }

.vw-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  border-radius: var(--vw-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  white-space: nowrap;
}
.vw-badge--primary { background: var(--vw-primary); color: #fff; }
.vw-badge--dark { background: var(--vw-dark); color: #fff; }
.vw-badge--soft { background: var(--vw-primary-soft); color: #8F3D00; border: 1px solid var(--vw-primary-soft-border); }
.vw-badge--outline { background: transparent; color: var(--vw-dark); border: 1.5px solid var(--vw-border); }

/* Link "xem thêm" dùng trong card */
.vw-link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--vw-dark);
  text-decoration: none;
  min-height: 44px;
}
.vw-link-more .vw-link-more__arrow { transition: transform var(--vw-transition-fast) var(--vw-ease); }
.vw-link-more:hover { color: var(--vw-primary); text-decoration: none; }
.vw-link-more:hover .vw-link-more__arrow { transform: translateX(4px); }

/* Danh sách dấu tick */
.vw-list--check { list-style: none; padding: 0; margin: 0; }
.vw-list--check li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
}
.vw-list--check li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--vw-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============ 7. BREADCRUMB ============ */
.vw-breadcrumb { font-size: 13px; color: var(--vw-text-muted); }
.vw-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px; list-style: none; margin: 0; padding: 0;
}
.vw-breadcrumb li { display: flex; align-items: center; gap: 8px; }
.vw-breadcrumb li + li::before { content: "/"; color: var(--vw-border); font-weight: 400; }
.vw-breadcrumb a { color: var(--vw-text-muted); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.vw-breadcrumb a:hover { color: var(--vw-primary); text-decoration: underline; }
.vw-breadcrumb [aria-current="page"] { color: var(--vw-dark); font-weight: 600; }

/* ============ 8. BẢNG KỸ THUẬT (responsive) ============ */
.vw-table-scroll-hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--vw-text-muted);
}
@media (max-width: 767px) {
  .vw-table-scroll-hint { display: flex; } /* chỉ báo vuốt ngang trên mobile */
}
.vw-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  background: #fff;
}
.vw-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.vw-table caption { text-align: left; font-weight: 700; padding: 16px; font-size: 1rem; }
.vw-table th, .vw-table td { padding: 14px 16px; text-align: left; vertical-align: top; }
.vw-table thead th {
  background: var(--vw-dark);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.vw-table thead th:first-child { border-top-left-radius: var(--vw-radius-md); }
.vw-table thead th:last-child { border-top-right-radius: var(--vw-radius-md); }
.vw-table tbody tr { border-top: 1px solid var(--vw-border); }
.vw-table tbody tr:nth-child(even) { background: #FBFBF9; }
.vw-table tbody th { font-weight: 700; }
.vw-table a { font-weight: 600; }

/* ============ 9. CALLOUT ============ */
.vw-callout {
  border-left: 4px solid var(--vw-primary);
  background: var(--vw-primary-soft);
  border-radius: 0 var(--vw-radius-sm) var(--vw-radius-sm) 0;
  padding: 16px 20px;
  margin-block: 24px;
}
.vw-callout--neutral { border-left-color: var(--vw-dark); background: var(--vw-bg-alt); }
.vw-callout__title { font-weight: 700; margin-bottom: 4px; display: block; }
.vw-callout p { margin-bottom: 0.5em; color: var(--vw-dark); }
.vw-callout p:last-child { margin-bottom: 0; }

/* ============ 10. FORM ============ */
.vw-form { max-width: 640px; }
.vw-form__group { margin-bottom: 20px; }
.vw-form__row { display: grid; gap: 20px; }
@media (min-width: 640px) {
  .vw-form__row--2 { grid-template-columns: 1fr 1fr; }
}
.vw-form__label { display: block; font-weight: 600; margin-bottom: 8px; }
.vw-required { color: var(--vw-primary); font-weight: 700; }

.vw-input, .vw-select, .vw-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--vw-dark);
  background: #fff;
  border: 1.5px solid var(--vw-border);
  border-radius: var(--vw-radius-sm);
  transition: border-color var(--vw-transition-fast) var(--vw-ease),
              box-shadow var(--vw-transition-fast) var(--vw-ease);
}
.vw-textarea { min-height: 120px; resize: vertical; }
.vw-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23202020' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 44px;
}
.vw-input:focus, .vw-select:focus, .vw-textarea:focus {
  outline: none;
  border-color: var(--vw-primary);
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.18);
}
.vw-input::placeholder, .vw-textarea::placeholder { color: #9A9A97; }

.vw-input--error, .vw-select--error, .vw-textarea--error { border-color: var(--vw-error); }
.vw-input--error:focus, .vw-select--error:focus, .vw-textarea--error:focus {
  border-color: var(--vw-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.vw-field-error {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px;
  color: var(--vw-error);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
}
.vw-field-error svg { flex: none; margin-top: 2px; }
.vw-hint { margin-top: 8px; font-size: 0.875rem; color: var(--vw-text-muted); }

.vw-check, .vw-radio {
  display: flex; gap: 12px; align-items: flex-start;
  min-height: 44px;
  cursor: pointer;
  font-weight: 500;
}
.vw-check input, .vw-radio input {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--vw-primary);
}
.vw-check-group, .vw-radio-group { display: grid; gap: 4px; }
.vw-check-group legend, .vw-radio-group legend { font-weight: 600; margin-bottom: 8px; padding: 0; }

/* Thông báo form: success / error */
.vw-form__message {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px;
  border-radius: var(--vw-radius-sm);
  font-weight: 600;
  line-height: 1.55;
  margin-bottom: 20px;
}
.vw-form__message svg { flex: none; margin-top: 2px; }
.vw-form__message--success { background: var(--vw-success-bg); border: 1px solid var(--vw-success-border); color: var(--vw-success); }
.vw-form__message--error { background: var(--vw-error-bg); border: 1px solid var(--vw-error-border); color: var(--vw-error); }

/* Spinner loading (dùng trong nút submit) */
.vw-spinner {
  width: 20px; height: 20px; flex: none;
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: vw-spin 700ms linear infinite;
}
@keyframes vw-spin { to { transform: rotate(360deg); } }

/* ============ 11. ACCORDION (FAQ) ============ */
.vw-accordion {
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  background: #fff;
  overflow: hidden;
}
.vw-accordion__item + .vw-accordion__item { border-top: 1px solid var(--vw-border); }
.vw-accordion__button {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px;
  padding: 16px 20px;
  background: none; border: 0;
  font-family: inherit; font-size: 1rem; font-weight: 700;
  color: var(--vw-dark); text-align: left; line-height: 1.45;
  cursor: pointer;
}
.vw-accordion__button:hover { color: var(--vw-primary); }
.vw-accordion__icon {
  flex: none;
  width: 32px; height: 32px;
  border: 1.5px solid var(--vw-border);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--vw-dark);
  transition: transform var(--vw-transition-base) var(--vw-ease),
              background-color var(--vw-transition-fast) var(--vw-ease),
              border-color var(--vw-transition-fast) var(--vw-ease),
              color var(--vw-transition-fast) var(--vw-ease);
}
.vw-accordion__button[aria-expanded="true"] { color: var(--vw-primary); }
.vw-accordion__button[aria-expanded="true"] .vw-accordion__icon {
  transform: rotate(45deg);
  background: var(--vw-primary);
  border-color: var(--vw-primary);
  color: #fff;
}
.vw-accordion__panel { padding: 0 20px 20px; }
.vw-accordion__panel[hidden] { display: none; }
.vw-accordion__panel p { color: var(--vw-text-muted); }
.vw-accordion__panel p:last-child { margin-bottom: 0; }

/* ============ 12. CTA BANNER (B2B conversion) ============ */
.vw-cta-banner {
  background: var(--vw-dark);
  color: #fff;
  border-radius: var(--vw-radius-md);
  border-top: 6px solid var(--vw-primary);
  padding: clamp(32px, 5vw, 64px);
}
.vw-cta-banner h2 { color: #fff; margin-bottom: 12px; }
.vw-cta-banner p { color: #D8D8D6; max-width: 60ch; }
.vw-cta-banner .vw-btn-group { margin-top: 28px; }
@media (min-width: 1024px) {
  .vw-cta-banner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
  }
  .vw-cta-banner .vw-btn-group { margin-top: 0; flex-direction: column; align-items: stretch; min-width: 280px; }
}

/* ============ 13. PRODUCT / BENEFIT / DOC / ARTICLE CARDS ============ */
.vw-product-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vw-product-card__media {
  background: var(--vw-bg-alt);
  border-bottom: 1px solid var(--vw-border);
  min-height: 168px;
  display: grid; place-items: center;
  padding: 24px;
  color: var(--vw-dark);
}
.vw-product-card__media svg { width: 72px; height: 72px; }
.vw-product-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vw-product-card__body h3 { margin: 0; }
.vw-product-card__body p { color: var(--vw-text-muted); font-size: 13px; flex: 1; }

.vw-benefit-card { display: flex; flex-direction: column; gap: 12px; height: 100%; }
.vw-benefit-card__icon {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--vw-radius-md);
  background: var(--vw-primary-soft);
  border: 1px solid var(--vw-primary-soft-border);
  display: grid; place-items: center;
  color: var(--vw-primary);
}
.vw-benefit-card__icon svg { width: 28px; height: 28px; }
.vw-benefit-card h3 { margin: 0; }
.vw-benefit-card p { color: var(--vw-text-muted); font-size: 13px; margin: 0; }

.vw-doc-card { display: flex; flex-direction: column; height: 100%; }
.vw-doc-card__thumb {
  position: relative;
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-sm);
  padding: 20px;
  min-height: 190px;
  margin-bottom: 16px;
  overflow: hidden;
}
/* Khung preview minh họa — thay bằng thumbnail PDF thật khi có file */
.vw-doc-lines span {
  display: block; height: 8px; border-radius: 4px;
  background: #ECECEA; margin-bottom: 10px;
}
.vw-doc-lines span:nth-child(1) { width: 55%; height: 12px; background: #D8D8D4; }
.vw-doc-lines span:nth-child(2) { width: 90%; }
.vw-doc-lines span:nth-child(3) { width: 95%; }
.vw-doc-lines span:nth-child(4) { width: 80%; }
.vw-doc-lines span:nth-child(5) { width: 88%; }
.vw-doc-card__seal {
  position: absolute; right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border: 2px solid var(--vw-primary);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--vw-primary);
  font-size: 0.625rem; font-weight: 800; letter-spacing: 0.08em;
  transform: rotate(-12deg);
  background: rgba(255, 255, 255, 0.85);
}
.vw-doc-card h3 { margin-bottom: 8px; font-size: 1.125rem; }
.vw-doc-card__meta { list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; color: var(--vw-text-muted); }
.vw-doc-card__meta li { margin-bottom: 6px; display: flex; gap: 8px; }
.vw-doc-card__meta li strong { color: var(--vw-dark); font-weight: 600; min-width: 92px; }
.vw-doc-card .vw-link-more { margin-top: auto; }

/* Slider kéo thả — bài viết kiến thức (Section 08).
   Kích hoạt bằng design-system/slider.js (nạp ở footer theme). */
.vw-articles-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 14px;
  scrollbar-width: thin;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.vw-articles-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.vw-articles-slider .vw-article-card { flex: 0 0 min(340px, 84vw); scroll-snap-align: start; }
/* (cũ) .vw-slider-nav: cụm nút tròn cũ đã gỡ khỏi markup section-08.php,
   rule CSS đã xóa (feedback 12, ý 5) — nút prev/next mới là
   .vw-slider-shell > .vw-slider-prev/.vw-slider-next (xem mục 5d FIX12). */

.vw-article-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.vw-article-card__media {
  position: relative;
  background: var(--vw-dark);
  min-height: 180px;
  display: flex; align-items: flex-end;
  padding: 20px;
  overflow: hidden;
  border-bottom: 4px solid var(--vw-primary);
}
.vw-article-card__code {
  font-family: var(--vw-font-mono);
  font-size: 3rem; font-weight: 800;
  color: rgba(255, 255, 255, 0.14);
  line-height: 1;
  user-select: none;
}
.vw-article-card__media .vw-badge { position: absolute; top: 16px; left: 16px; }
.vw-article-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vw-article-card__body h3 { margin: 0; font-size: 1.125rem; }
.vw-article-card__body p { color: var(--vw-text-muted); font-size: 13px; flex: 1; }

/* ============ 14. HEADER ============ */
.vw-skip-link {
  position: absolute; left: 16px; top: -80px; z-index: 400;
  background: var(--vw-dark); color: #fff !important;
  padding: 12px 20px; border-radius: var(--vw-radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top var(--vw-transition-fast) var(--vw-ease);
}
.vw-skip-link:focus { top: 12px; color: #fff; text-decoration: none; }

.vw-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--vw-white);
  border-bottom: 1px solid var(--vw-border);
}
.vw-header__inner {
  display: flex; align-items: center; gap: 32px;
  min-height: var(--vw-header-h);
}
/* FIX13: ép mọi phần tử con trực tiếp (logo <img>, nav, CTA, nút menu) luôn căn giữa dọc,
   kể cả khi WP core / block editor chèn margin mặc định vào block. */
.vw-header__inner > * {
  margin-top: 0;
  margin-bottom: 0;
  align-self: center;
  flex-shrink: 0;
}
.vw-header__inner > img { height: 40px; width: auto; display: block; }
.vw-header__spacer { flex: 1 1 auto; }

/* Nav desktop */
.vw-nav__list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.vw-nav__item { display: flex; align-items: center; }
.vw-nav__link, .vw-nav__dropbtn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px;
  padding: 8px 12px;
  font-weight: 600; font-size: 13px;
  color: var(--vw-dark);
  background: none; border: 0; font-family: inherit;
  cursor: pointer; text-decoration: none;
  border-radius: var(--vw-radius-sm);
  white-space: nowrap;
}
.vw-nav__link:hover, .vw-nav__dropbtn:hover { color: var(--vw-primary); text-decoration: none; }
.vw-nav__item--has-drop { position: relative; }
.vw-nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 300px;
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  box-shadow: var(--vw-shadow-menu);
  padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--vw-transition-fast) var(--vw-ease),
              transform var(--vw-transition-fast) var(--vw-ease),
              visibility var(--vw-transition-fast);
}
.vw-nav__item--has-drop:hover > .vw-nav__panel,
.vw-nav__item--has-drop:focus-within > .vw-nav__panel,
.vw-nav__item--open > .vw-nav__panel {
  opacity: 1; visibility: visible; transform: none;
}
.vw-nav__panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--vw-radius-sm);
  color: var(--vw-dark); font-weight: 600; font-size: 13px;
  text-decoration: none;
}
.vw-nav__panel a:hover { background: var(--vw-bg-alt); color: var(--vw-primary); }
.vw-nav__panel .vw-nav__panel-all {
  border-top: 1px solid var(--vw-border);
  margin-top: 8px; padding-top: 8px;
  color: var(--vw-primary);
}
.vw-header__cta { flex: none; }
@media (max-width: 1100px) {
  .vw-header__cta .vw-btn { padding: 10px 16px; }
}

/* Nút hamburger — chỉ hiện dưới 1024px */
.vw-menu-btn {
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--vw-border);
  border-radius: var(--vw-radius-sm);
  cursor: pointer; color: var(--vw-dark);
}
.vw-menu-btn:hover { border-color: var(--vw-primary); color: var(--vw-primary); }
@media (max-width: 1023px) {
  .vw-nav { display: none; }
  .vw-menu-btn { display: inline-flex; }
}
@media (min-width: 1024px) {
  .vw-drawer, .vw-scrim { display: none; }
}

/* Drawer mobile */
.vw-drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.vw-scrim {
  position: absolute; inset: 0;
  background: rgba(32, 32, 32, 0.5);
  opacity: 0;
  transition: opacity var(--vw-transition-base) var(--vw-ease);
  border: 0; padding: 0; cursor: pointer;
}
.vw-drawer__inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(380px, 90vw);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--vw-transition-base) var(--vw-ease);
  box-shadow: var(--vw-shadow-menu);
}
body.vw-drawer-open { overflow: hidden; }
body.vw-drawer-open .vw-drawer { pointer-events: auto; }
body.vw-drawer-open .vw-scrim { opacity: 1; }
body.vw-drawer-open .vw-drawer__inner { transform: none; }

.vw-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vw-border);
  min-height: var(--vw-header-h);
}
.vw-drawer__head img { height: 34px; width: auto; }
.vw-drawer__close {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--vw-border);
  border-radius: var(--vw-radius-sm); cursor: pointer; color: var(--vw-dark);
}
.vw-drawer__close:hover { border-color: var(--vw-primary); color: var(--vw-primary); }
.vw-drawer__nav { flex: 1; overflow-y: auto; padding: 8px 16px; }
.vw-drawer__list { list-style: none; margin: 0; padding: 0; }
.vw-drawer__link, .vw-drawer__group-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px;
  padding: 12px 4px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  color: var(--vw-dark); text-decoration: none;
  background: none; border: 0; border-bottom: 1px solid var(--vw-border);
  cursor: pointer; text-align: left;
}
.vw-drawer__link:hover, .vw-drawer__group-btn:hover { color: var(--vw-primary); }
.vw-drawer__group-btn[aria-expanded="true"] { color: var(--vw-primary); border-bottom-color: transparent; }
.vw-drawer__sublist { list-style: none; margin: 0; padding: 0 0 8px; }
.vw-drawer__sublist[hidden] { display: none; }
.vw-drawer__sublist a {
  display: flex; align-items: center;
  min-height: 48px;
  padding: 10px 4px 10px 20px;
  font-size: 13px; font-weight: 500;
  color: var(--vw-dark); text-decoration: none;
  border-bottom: 1px solid var(--vw-bg-alt);
}
.vw-drawer__sublist a:hover { color: var(--vw-primary); }
.vw-drawer__sublist a.vw-drawer__sublist-all { color: var(--vw-primary); font-weight: 700; }
.vw-drawer__cta { padding: 16px; border-top: 1px solid var(--vw-border); display: grid; gap: 12px; }
.vw-drawer__hotline {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; font-weight: 700; color: var(--vw-dark); text-decoration: none;
}
.vw-drawer__hotline:hover { color: var(--vw-primary); }

/* ============ 15. FOOTER ============ */
.vw-footer { background: var(--vw-dark); color: #EDEDEB; }
.vw-footer a { color: #D8D8D6; text-decoration: none; }
.vw-footer a:hover { color: #fff; text-decoration: underline; }
.vw-footer__main { padding-block: 56px 40px; }
.vw-footer__grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .vw-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
@media (min-width: 1024px) { .vw-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; } }

.vw-footer__brand img { height: 40px; width: auto; margin-bottom: 20px; }
.vw-footer__legal { font-size: 0.9375rem; color: #CFCFCC; }
.vw-footer__legal strong { color: #fff; }
.vw-footer__legal p { margin-bottom: 12px; }
.vw-footer__contact { list-style: none; margin: 20px 0 0; padding: 0; font-size: 0.9375rem; }
.vw-footer__contact li { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.vw-footer__contact svg { flex: none; margin-top: 4px; color: var(--vw-primary); }
.vw-footer__contact a { color: #fff; font-weight: 600; }
.vw-footer__heading {
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; margin-bottom: 16px;
}
.vw-footer__list { list-style: none; margin: 0; padding: 0; }
.vw-footer__list li { margin-bottom: 4px; }
.vw-footer__list a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.9375rem; }

/* Khối phân luồng B2B / bán lẻ */
.vw-footer__split {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 32px;
}
.vw-footer__split-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .vw-footer__split-grid { grid-template-columns: 1fr 1fr; } }
.vw-split-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--vw-radius-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.vw-split-card--b2b { border-top: 4px solid var(--vw-primary); }
.vw-split-card__domain {
  font-family: var(--vw-font-mono); font-size: 0.875rem; font-weight: 700;
  color: var(--vw-primary); letter-spacing: 0.02em;
}
.vw-split-card--retail .vw-split-card__domain { color: #7FB3FF; }
.vw-split-card h3 { color: #fff; margin: 0; font-size: 1.125rem; }
.vw-split-card p { color: #CFCFCC; font-size: 0.9375rem; margin: 0; flex: 1; }
.vw-split-card .vw-btn { margin-top: 12px; align-self: flex-start; }
.vw-split-card .vw-btn:hover { text-decoration: none; }

.vw-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 20px;
  font-size: 0.875rem; color: #A9A9A6;
}
.vw-footer__bottom-inner {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  align-items: center; justify-content: space-between;
}
.vw-footer__bottom p { margin: 0; }

/* ============ 16. STICKY MOBILE BAR ============ */
.vw-sticky-bar {
  display: none; /* chỉ hiện trên mobile */
}
@media (max-width: 767px) {
  body { padding-bottom: 84px; } /* chừa chỗ cho thanh sticky */
  .vw-sticky-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 250;
    background: #fff;
    border-top: 1px solid var(--vw-border);
    box-shadow: 0 -4px 20px rgba(32, 32, 32, 0.1);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    transition: transform var(--vw-transition-base) var(--vw-ease);
  }
  .vw-sticky-bar__inner {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 560px; margin-inline: auto;
  }
  .vw-sticky-bar .vw-btn { min-height: 48px; width: 100%; }
  /* Tự ẩn khi người dùng focus vào form (điều khiển bằng JS) */
  .vw-sticky-bar--hidden { transform: translateY(110%); }
}

/* ============ 17. UTILITIES ============ */
.vw-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.vw-text-center { text-align: center; }
.vw-mt-0 { margin-top: 0; }
.vw-mb-0 { margin-bottom: 0; }

/* Vùng cuộn ngang có kiểm soát (bổ trợ cho .vw-table-wrapper) */
.vw-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============ 18. REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .vw-nav__panel { transform: none; }
}

/* ============ 19. CẦU NỐI TƯƠNG THÍCH CLASS CỦA PATTERN ============
   10 pattern trang chủ (homepage/patterns/section-01..10.html) dùng một số class
   .vw-* riêng của pattern (không phải BEM chuẩn của mục 4–13). Mục này ánh xạ
   các class đó về đúng ngôn ngữ thị giác của design system (mirror từ bản thiết kế
   đã duyệt) để pattern render đúng khi ráp vào theme — không sửa markup pattern.
   QUY TẮC LÂU DÀI: khi ráp theme thật, giữ các class này (hoặc map về BEM chuẩn)
   và XOÁ mục 19 nếu đã chuẩn hoá xong. */

/* -- 19.1 Vỏ section của pattern: padding chuẩn + nền xen kẽ như bản thiết kế -- */
.vw-section-hero,
.vw-section-trust,
.vw-section-partners,
.vw-section-products,
.vw-section-benefits,
.vw-section-process,
.vw-section-legal,
.vw-section-knowledge,
.vw-section-faq,
.vw-section-cta {
  padding-block: var(--vw-space-3xl); /* 64px: khớp bản thiết kế */
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
/* Xen kẽ nền nhạt — khớp bản thiết kế: sec-03, 05, 07, 09 là .section-alt */
.vw-section-partners,
.vw-section-benefits,
.vw-section-legal,
.vw-section-faq {
  background: var(--vw-bg-alt);
}

/* -- 19.2 Kicker + lead của pattern -- */
.vw-kicker {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vw-primary);
  margin: 0 0 12px;
}
.vw-lead {
  font-size: 16px;
  color: var(--vw-text-muted);
  max-width: 68ch;
}
/* Kicker khi đặt trên thẻ h1 (VD: page-head các trang B/E/F/G/H) — 14px thay vì 13px */
h1.vw-kicker { font-size: 14px; }

/* -- 19.3 Nút bấm trong pattern (block wp:button) -- */
.wp-block-button.vw-btn-primary .wp-block-button__link,
.wp-block-button.vw-link-otoparts .wp-block-button__link {
  background: var(--vw-primary);
  color: var(--vw-primary-ink);
  border: 2px solid var(--vw-primary);
}
.wp-block-button.vw-btn-primary .wp-block-button__link:hover,
.wp-block-button.vw-link-otoparts .wp-block-button__link:hover {
  background: var(--vw-primary-hover);
  border-color: var(--vw-primary-hover);
  color: var(--vw-primary-ink);
}
.wp-block-button.vw-btn-outline .wp-block-button__link,
.wp-block-button.vw-link-detail .wp-block-button__link {
  background: transparent;
  color: var(--vw-dark);
  border: 2px solid var(--vw-dark);
}
.wp-block-button.vw-btn-outline .wp-block-button__link:hover,
.wp-block-button.vw-link-detail .wp-block-button__link:hover {
  border-color: var(--vw-primary);
  color: var(--vw-primary);
}
.wp-block-button.vw-btn-outline-light .wp-block-button__link {
  background: transparent;
  color: #fff;
  border: 2px solid #fff;
}
.wp-block-button.vw-btn-outline-light .wp-block-button__link:hover {
  background: #fff;
  color: var(--vw-dark);
}
.wp-block-button.vw-btn-primary .wp-block-button__link,
.wp-block-button.vw-btn-outline .wp-block-button__link,
.wp-block-button.vw-btn-outline-light .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch target */
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--vw-radius-md);
}

/* -- 19.4 Cụm 2 liên kết trong product card: cùng một hàng, không rớt dòng -- */
.wp-block-buttons.vw-card-links {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: auto;
}
.wp-block-buttons.vw-card-links .wp-block-button { flex: 1 1 0; min-width: 0; }
.wp-block-buttons.vw-card-links .wp-block-button__link {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  border-radius: var(--vw-radius-sm);
}
.wp-block-button.vw-link-detail .wp-block-button__link {
  border: 1.5px solid var(--vw-border);
  background: #fff;
}
.wp-block-button.vw-link-otoparts .wp-block-button__link {
  border: 1.5px solid var(--vw-primary);
}

/* -- 19.5 Hero pattern: trust list, badge, ảnh, thumbnails -- */
.vw-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--vw-text-muted);
}
.vw-hero-trust li { display: flex; align-items: center; gap: 8px; }
.vw-hero-trust li::before {
  content: "";
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: var(--vw-primary);
}
.vw-hero-img img {
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--vw-border);
  padding: var(--vw-space-lg);
  box-shadow: var(--vw-shadow-card);
}
.vw-hero-badge {
  background: var(--vw-dark);
  color: #fff;
  border-radius: var(--vw-radius-md);
  padding: 14px 18px;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: var(--vw-space-md);
}
.vw-hero-badge strong { color: #fff; }
.wp-block-columns.vw-hero-thumbs .wp-block-column {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 8px;
  text-align: center;
}
.vw-thumb-caption {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--vw-text-muted);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* -- 19.6 Trụ cột tin cậy (sec-02) -- */
.vw-pillar {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 28px 24px;
}
.vw-pillar h3 { margin: 0 0 10px; }
.vw-pillar p { color: var(--vw-text-muted); font-size: 0.8125rem; margin: 0; }

/* -- 19.7 Card nhóm đối tác (sec-03) -- */
.vw-partner-card {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.vw-partner-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vw-primary);
  background: var(--vw-primary-soft);
  border-radius: var(--vw-radius-pill);
  padding: 6px 14px;
  margin: 0 0 16px;
}
.vw-partner-card h3 { margin: 0 0 12px; }
.vw-partner-card p { color: var(--vw-text-muted); font-size: 0.8125rem; }

/* -- 19.8 Quyền lợi hợp tác: số bên trái khối chữ (sec-05) -- */
.vw-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--vw-space-lg);
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 28px 24px;
  height: 100%;
}
.vw-benefit-num {
  flex: none;
  min-width: 64px;
  color: var(--vw-primary);
  margin: 0;
}
.vw-benefit-text h3 { margin: 0 0 8px; }
.vw-benefit-text p { color: var(--vw-text-muted); font-size: 0.8125rem; margin: 0; }

/* -- 19.9 Bước quy trình (sec-06) -- */
.vw-step {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: 28px 24px;
  height: 100%;
}
.vw-step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: none;
  background: var(--vw-dark);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 16px;
}
/* -- 19.9b Ý feedback 14: số bước quy trình trang chủ — chữ cam, nền trắng, viền cam 2px -- */
.vw-section-process .vw-step-num {
  background: #fff;
  color: #FF6600;
  border: 2px solid #FF6600;
  font-size: 20px;
  font-weight: 700;
}
.vw-step h3 { margin: 0 0 8px; }
.vw-step p { color: var(--vw-text-muted); font-size: 0.8125rem; margin: 0; }

/* -- 19.10 Hồ sơ pháp lý (sec-07): callout + card dùng chung .vw-doc-card -- */
.vw-legal-callout {
  background: var(--vw-primary-soft);
  border: 1px solid var(--vw-primary-soft-border);
  border-radius: var(--vw-radius-md);
  padding: var(--vw-space-lg);
  margin-top: var(--vw-space-xl);
}
/* -- 19.10b Ý feedback 14: ảnh tài liệu trên card trang chủ — khung tỉ lệ 4/3, lấy phần đầu tài liệu -- */
.vw-doc-card .vw-doc-preview { margin: 0 0 16px; }
.vw-doc-card .vw-doc-preview img {
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: top center;
}

/* -- 19.11 Tag bài viết (sec-08) -- */
.vw-article-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vw-primary);
  background: var(--vw-primary-soft);
  border-radius: var(--vw-radius-pill);
  padding: 6px 14px;
  margin: 0 0 12px;
}

/* -- 19.12 FAQ (sec-09): danh sách câu hỏi dạng card -- */
.vw-faq-item {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  padding: var(--vw-space-lg) var(--vw-space-xl);
}
.vw-faq-q {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.45;
}
.vw-faq-a { color: var(--vw-text-muted); font-size: 0.8125rem; margin: 0; }

/* -- 19.13 CTA cuối trang + form (sec-10) -- */
.vw-contact-rows { list-style: none; margin: 0 0 var(--vw-space-lg); padding: 0; }
.vw-contact-rows li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1rem;
}
.vw-contact-rows li:last-child { border-bottom: 0; }
.vw-form-card {
  background: #fff;
  border: 1px solid var(--vw-border);
  border-radius: 12px;
  padding: 40px 36px;
  color: var(--vw-dark);
}
.vw-form-card h3 { margin: 0 0 8px; }
/* -- Ý feedback 14: đoạn mô tả form đủ tương phản trên nền trắng -- */
.vw-form-desc { color: #444; }
.vw-form-fields-note {
  list-style: none; margin: var(--vw-space-md) 0; padding: 0;
  font-size: 0.875rem; color: var(--vw-text-muted);
}
.vw-form-fields-note li { padding: 4px 0 4px 22px; position: relative; }
.vw-form-fields-note li::before {
  content: "—"; position: absolute; left: 0; color: var(--vw-primary); font-weight: 700;
}

/* -- 19.14 Ghi chú trong component-library (preview độc lập, không ảnh hưởng theme) -- */
.vw-demo-note {
  background: var(--vw-bg-alt);
  border: 1px dashed var(--vw-border);
  border-radius: var(--vw-radius-sm);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--vw-text-muted);
}

/* ============ 20. BỔ SUNG TỪ bản thiết kế CHO CLASS CỦA PATTERN ============
   Các class .vw-* do 71 pattern templates dùng nhưng chưa có trong design
   system (mục 1–19). Mỗi rule mirror từ CSS inline của bản thiết kế cùng
   template đã duyệt — declarations giữ nguyên, chỉ đổi tên class
   (bản thiết kế không prefix -> pattern prefix vw-) để khớp markup pattern.
   Không sửa nội dung/màu/kích thước đã duyệt. */


/* Bổ sung từ bản thiết kế — Trang chủ (homepage/mau.html) */

/* Nút prev/next slider: bản thiết kế dùng <button class="slider-btn">, pattern dùng div.wp-block-button > a — đưa visual lên link trong */

.wp-block-button.vw-slider-prev .wp-block-button__link,
.wp-block-button.vw-slider-next .wp-block-button__link {
  width:44px;height:44px;border-radius:50%;border:1px solid var(--vw-border);background:#fff;color:var(--vw-dark);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color 180ms ease,color 180ms ease;padding:0;
}

/* Trạng thái hover nút slider (slider.js gán [disabled] lên <a>) */

.wp-block-button.vw-slider-prev .wp-block-button__link:hover:not([disabled]),
.wp-block-button.vw-slider-next .wp-block-button__link:hover:not([disabled]) {
  border-color:var(--vw-primary);color:var(--vw-primary);
}

/* Trạng thái disabled nút slider */

.wp-block-button.vw-slider-prev .wp-block-button__link[disabled],
.wp-block-button.vw-slider-next .wp-block-button__link[disabled] {
  opacity:.35;cursor:default;
}


/* Bổ sung từ bản thiết kế — A — Hợp tác B2B (templates/A-hop-tac/mau.html) */

/* bỏ display:flex/align-items/gap của bản thiết kế (.check-item dùng cho layout icon + text, pattern chỉ có h3 + p) */

.vw-check-item {
  background:#fff;border:1px solid var(--vw-border);border-radius:var(--vw-radius);padding:26px 24px;
}

.vw-hero-aud {
  list-style:none;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:30px 0;padding:0;
}

.vw-hero-aud a {
  display:inline-flex;align-items:center;min-height:44px;padding:10px 24px;border:1.5px solid rgba(255,255,255,.4);border-radius:999px;color:#fff;text-decoration:none;font-weight:600;
}

.vw-hero-aud a:hover,.vw-hero-aud a:focus-visible {
  border-color:var(--vw-primary);color:var(--vw-primary);
}

.vw-partner-answer {
  font-size:13px;margin-bottom:22px;flex:1;
}

.vw-partner-answer strong {
  color:var(--vw-dark);
}

.vw-partner-need {
  color:var(--vw-text-muted);font-size:13px;margin-bottom:14px;
}


/* Bổ sung từ bản thiết kế — C — Trang sản phẩm (templates/C-*/mau.html) */

.vw-gallery-note {
  margin-top:16px;font-size:13px;color:var(--vw-text-muted);
}

.vw-pillar--lead {
  border:2px solid var(--vw-primary);
}

.vw-spec-note {
  margin-top:16px;font-size:13px;color:var(--vw-text-muted);background:#fff;border:1px dashed var(--vw-border);border-radius:var(--vw-radius);padding:14px 18px;
}

.vw-spec-note strong {
  color:var(--vw-dark);
}


/* Bổ sung từ bản thiết kế — D — Về Volwatt (templates/D-ve-volwatt/mau.html) */

.vw-contact-card {
  background:#fff;border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   padding:28px 24px;display:grid;gap:18px;margin-top:28px;
}

.vw-contact-card .c-label {
  display:block;font-size:13px;color:var(--vw-text-muted);letter-spacing:.04em;
}

.vw-contact-card a {
  font-weight:700;text-decoration:none;color:var(--vw-dark);font-size:16px;
}

.vw-contact-card a:hover {
  color:var(--vw-primary);
}

.vw-contact-card address {
  font-style:normal;font-weight:600;font-size:14px;line-height:1.6;
}

.vw-contact-card li {
  display:flex;gap:14px;align-items:flex-start;
}

.vw-contact-card svg {
  width:22px;height:22px;stroke:var(--vw-primary);flex:none;margin-top:3px;
}

.vw-contact-card ul {
  list-style:none;display:grid;gap:16px;
}

.vw-relation-card {
  background:#fff;border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   padding:28px 24px;
}

.vw-relation-card h3 {
  margin-bottom:10px;
}

.vw-relation-card p {
  color:var(--vw-text-muted);font-size:13px;
}

.vw-relation-card p+p {
  margin-top:10px;
}

.vw-relation-card strong {
  color:var(--vw-dark);
}

.vw-relation-tag {
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
   color:var(--vw-primary);background:rgba(255,102,0,.1);border-radius:999px;padding:6px 14px;margin-bottom:14px;
}

.vw-value-block {
  background:#fff;border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   padding:28px 24px;
}

.vw-value-block h3 {
  margin-bottom:10px;
}

.vw-value-block li {
  display:flex;gap:10px;color:var(--vw-text-muted);font-size:13px;
}

.vw-value-block li::before {
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--vw-primary);margin-top:8px;
}

.vw-value-block p {
  color:var(--vw-text-muted);font-size:13px;
}

.vw-value-block strong {
  color:var(--vw-dark);
}

.vw-value-block ul {
  list-style:none;margin-top:14px;display:grid;gap:12px;
}

/* ---- FIX16 — Card Tầm nhìn / Sứ mệnh cao bằng nhau (d-04, 17/10/2026):
   cột flex + card co giãn, cùng mẫu với sec-02 (rule 13.1). ---- */
.vw-d-values .wp-block-columns {
  align-items: stretch;
}
.vw-d-values .wp-block-column {
  display: flex;
  flex-direction: column;
}
.vw-d-values .wp-block-column > .vw-value-block {
  flex: 1 1 auto;
  width: 100%;
}


/* Bổ sung từ bản thiết kế — E — Hồ sơ & chứng nhận (templates/E-ho-so-chung-nhan/mau.html) */

.vw-doc-preview {
  border:1px solid var(--vw-border);border-radius:6px;overflow:hidden;
   background:#fafaf8;margin:-8px -6px 18px;
}

.vw-doc-preview img {
  width:100%;aspect-ratio:794/1123;object-fit:contain;
}


/* Bổ sung từ bản thiết kế — F — Hub Kiến thức (templates/F-kien-thuc/mau.html) */

/* Link "Đọc bài viết": bản thiết kế dùng <a>, pattern dùng div.wp-block-button > a */

.wp-block-button.vw-read-more .wp-block-button__link {
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
   font-weight:700;font-size:14px;text-decoration:none;color:var(--vw-dark);
   white-space:nowrap;
}

/* Link "Đọc bài viết": hover */

.wp-block-button.vw-read-more .wp-block-button__link:hover {
  color:var(--vw-primary);
}

/* Chip chủ đề F: bản thiết kế dùng <button>, pattern dùng div.wp-block-button > a — đưa visual lên link trong */

.wp-block-button.vw-topic-chip .wp-block-button__link {
  appearance:none;border:1.5px solid var(--vw-border);background:#fff;color:var(--vw-dark);
   font-family:var(--vw-font);font-size:14px;font-weight:600;
   min-height:44px;padding:10px 20px;border-radius:999px;cursor:pointer;
   transition:border-color 180ms ease,color 180ms ease,background-color 180ms ease;
}

/* Chip chủ đề F: hover */

.wp-block-button.vw-topic-chip .wp-block-button__link:hover {
  border-color:var(--vw-primary);color:var(--vw-primary);
}

/* Chip chủ đề F: trạng thái active (hub-filter.js gán is-active/aria-pressed lên div) */

.wp-block-button.vw-topic-chip.is-active .wp-block-button__link,
.wp-block-button.vw-topic-chip[aria-pressed="true"] .wp-block-button__link {
  background:var(--vw-primary);border-color:var(--vw-primary);color:#fff;
}

.vw-articles-grid {
  display:grid;gap:20px;
}

.vw-card-foot {
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
}

.vw-card-foot .vw-meta {
  margin-bottom:0;
}

.vw-sample-badge {
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;
   color:var(--vw-primary-hover);border:1.5px dashed var(--vw-primary);
   border-radius:6px;padding:4px 10px;text-transform:uppercase;
}

.vw-topic-chips {
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:44px 0 28px;
}

.vw-topic-empty {
  border:1.5px dashed var(--vw-border);border-radius:var(--vw-radius);
   padding:40px 24px;text-align:center;color:var(--vw-text-muted);
}

.vw-topic-empty strong {
  display:block;color:var(--vw-dark);font-size:18px;margin-bottom:8px;
}

@media (min-width:640px) {
  .vw-articles-grid {
  grid-template-columns:repeat(2,1fr);
}
}

@media (min-width:1024px) {
  .vw-articles-grid {
  grid-template-columns:repeat(3,1fr);
}
}


/* Bổ sung từ bản thiết kế — F — Bài viết (templates/F-kien-thuc/mau-article.html) */

/* Nút thu gọn mục lục: bản thiết kế dùng <button>, pattern dùng div.wp-block-button > a */

.wp-block-button.vw-toc-toggle .wp-block-button__link {
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
   background:none;border:1.5px solid var(--vw-border);border-radius:6px;
   font-family:var(--vw-font);font-size:13px;font-weight:700;color:var(--vw-dark);
   padding:8px 14px;cursor:pointer;
}

.vw-article-body {
  font-size:14px;min-width:0;
}

.vw-article-body h2 {
  margin:44px 0 16px;
}

.vw-article-body h2:first-child {
  margin-top:0;
}

.vw-article-body h3 {
  margin:32px 0 12px;
}

.vw-article-body li::marker {
  color:var(--vw-primary);font-weight:700;
}

.vw-article-body ol,.vw-article-body ul {
  margin:0 0 20px;padding-left:24px;display:grid;gap:10px;
}

.vw-article-body p {
  margin-bottom:18px;
}

.vw-f-article-head {
  /* padding-block (không shorthand) để giữ padding-inline của .vw-container
     khi article-head bọc container (FIX16 căn lề). */
  padding-block: 48px 0;
}

.vw-f-article-head .section-kicker {
  margin-bottom:10px;
}

.vw-f-article-head h1 {
  margin-bottom:16px;max-width:none;
}

.vw-infobox {
  background:#fff;border:1px solid var(--vw-border);border-left:5px solid var(--vw-primary);
   border-radius:var(--vw-radius);padding:26px;margin:36px 0;
}

.vw-infobox .vw-note {
  font-size:13px;margin-top:14px;color:var(--vw-text-muted);
}

.vw-infobox h3 {
  margin:0 0 14px;font-size:18px;
}

.vw-infobox li {
  display:flex;gap:12px;font-size:14px;color:var(--vw-text-muted);
}

.vw-infobox li::before {
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--vw-primary);margin-top:8px;
}

.vw-infobox ol {
  list-style:none;padding:0;display:grid;gap:12px;
}

.vw-infobox strong {
  color:var(--vw-dark);
}

.vw-meta {
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;font-size:13px;color:var(--vw-text-muted);margin-bottom:8px;
}

.vw-meta time {
  font-weight:600;color:var(--vw-dark);
}

.vw-prevnext {
  display:grid;gap:12px;margin-top:36px;margin-bottom:64px;border-top:1px solid var(--vw-border);padding-top:28px;
}

.vw-prevnext .pn-label {
  display:block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--vw-primary);margin-bottom:6px;
}

.vw-prevnext .pn-title {
  font-weight:700;font-size:16px;line-height:1.45;
}

.vw-prevnext a {
  display:block;border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   padding:18px 20px;text-decoration:none;color:var(--vw-dark);
   transition:border-color 180ms ease;
}

.vw-prevnext a:hover {
  border-color:var(--vw-primary);
}

.vw-quote {
  border-left:5px solid var(--vw-primary);background:var(--vw-bg-alt);
   border-radius:0 var(--vw-radius) var(--vw-radius) 0;
   padding:26px 28px;margin:36px 0;
}

.vw-quote cite {
  font-style:normal;font-size:13px;color:var(--vw-text-muted);
}

.vw-quote p {
  font-size:13px;font-weight:600;line-height:1.6;margin-bottom:10px;
}

.vw-ref-table {
  width:100%;border-collapse:collapse;font-size:13px;min-width:560px;
}

.vw-ref-table caption {
  text-align:left;font-weight:700;font-size:14px;padding:18px 20px 8px;
}

.vw-ref-table td code {
  font-family:ui-monospace,Consolas,monospace;background:var(--vw-bg-alt);padding:2px 8px;border-radius:4px;font-size:13px;white-space:nowrap;
}

.vw-ref-table th,.vw-ref-table td {
  text-align:left;padding:12px 16px;border-top:1px solid var(--vw-border);vertical-align:top;
}

.vw-ref-table thead th {
  background:var(--vw-bg-alt);font-size:13px;text-transform:uppercase;letter-spacing:.04em;border-top:0;
}

.vw-toc {
  border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   background:var(--vw-bg-alt);margin-bottom:28px;overflow:hidden;
}

.vw-toc-head {
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;
}

.vw-toc-head strong {
  font-size:14px;
}

.vw-toc-nav {
  padding:0 18px 18px;
}

.vw-toc-nav.is-collapsed {
  display:none;
}

@media (min-width:640px) {
  .vw-prevnext {
  grid-template-columns:1fr 1fr;
}
}

@media (min-width:640px) {
  .vw-prevnext a:last-child {
  text-align:right;
}
}

@media (min-width:1024px) {
  .vw-toc {
  position:sticky;top:calc(var(--vw-header-h) + 24px);margin-bottom:0;max-height:calc(100vh - var(--vw-header-h) - 48px);overflow-y:auto;
}
}

@media (min-width:1024px) {
  .vw-toc-nav {
  display:block!important;padding:0 18px 18px;
}
}


/* Bổ sung từ bản thiết kế — G — Tin tức (templates/G-tin-tuc/mau.html) */

/* Chip lọc G: bản thiết kế dùng <button class="chip">, pattern dùng div.wp-block-button > a */

.wp-block-button.vw-chip .wp-block-button__link {
  display:inline-flex;align-items:center;justify-content:center;
   min-height:44px;padding:8px 18px;border-radius:999px;
   border:1.5px solid var(--vw-border);background:#fff;
   font-family:var(--vw-font);font-size:14px;font-weight:600;color:var(--vw-dark);
   cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease;
}

/* Chip lọc G: hover */

.wp-block-button.vw-chip .wp-block-button__link:hover {
  border-color:var(--vw-primary);color:var(--vw-primary);
}

/* Chip lọc G: trạng thái đã chọn */

.wp-block-button.vw-chip .wp-block-button__link[aria-pressed="true"] {
  background:var(--vw-primary);border-color:var(--vw-primary);color:#fff;
}

.vw-featured-body {
  padding:28px 26px;display:flex;flex-direction:column;gap:14px;
}

.vw-featured-body .vw-news-summary {
  color:var(--vw-text-muted);font-size:16px;
}

.vw-featured-body h2 {
  font-size:clamp(16px,2.5vw,20px);
}

.vw-featured-card {
  display:grid;gap:0;background:#fff;border:1px solid var(--vw-border);
   border-radius:12px;overflow:hidden;
   box-shadow:0 12px 32px rgba(32,32,32,.06);
}

.vw-featured-media {
  background:var(--vw-bg-alt);min-height:240px;
}

.vw-featured-media img {
  width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;
}

.vw-featured-tags {
  display:flex;flex-wrap:wrap;gap:8px;
}

.vw-filter-count {
  font-size:13px;color:var(--vw-text-muted);
}

.vw-filter-group {
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}

.vw-filter-label {
  font-size:13px;font-weight:700;color:var(--vw-dark);min-width:84px;
}

.vw-filter-wrap {
  margin-bottom:32px;display:grid;gap:16px;
}

.vw-news-body {
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:10px;flex:1;
}

.vw-news-body h3 {
  font-size:18px;
}

.vw-news-card {
  background:#fff;border:1px solid var(--vw-border);border-radius:var(--vw-radius);
   overflow:hidden;display:flex;flex-direction:column;
   transition:box-shadow 180ms ease;
}

.vw-news-card:hover {
  box-shadow:0 14px 36px rgba(32,32,32,.1);
}

.vw-news-card[hidden] {
  display:none;
}

.vw-news-grid {
  display:grid;gap:20px;
}

.vw-news-meta {
  font-size:13px;font-weight:600;color:var(--vw-text-muted);letter-spacing:.02em;
}

.vw-news-meta .meta-cat {
  color:var(--vw-primary);
}

.vw-news-summary {
  color:var(--vw-text-muted);font-size:13px;flex:1;
}

.vw-page-btn {
  display:inline-flex;align-items:center;justify-content:center;
   min-width:48px;min-height:48px;padding:8px 14px;border-radius:var(--vw-radius);
   border:1.5px solid var(--vw-border);background:#fff;
   font-family:var(--vw-font);font-size:14px;font-weight:700;color:var(--vw-dark);
   cursor:pointer;transition:border-color 180ms ease,background-color 180ms ease,color 180ms ease;
}

.vw-page-btn svg {
  width:18px;height:18px;
}

.vw-page-btn:hover {
  border-color:var(--vw-primary);color:var(--vw-primary);
}

.vw-page-btn[aria-current="page"] {
  background:var(--vw-primary);border-color:var(--vw-primary);color:#fff;cursor:default;
}

.vw-page-btn[aria-current="page"]:hover {
  color:#fff;
}

.vw-pagination {
  display:flex;justify-content:center;margin-top:40px;
}

.vw-pagination ul {
  display:flex;gap:8px;list-style:none;
}

.vw-sample-notice {
  margin-top:20px;padding:14px 18px;border:1px dashed var(--vw-primary);
   border-radius:var(--vw-radius);background:#fff7f1;
   font-size:14px;color:var(--vw-text-muted);
}

.vw-sample-notice strong {
  color:var(--vw-dark);
}

.vw-tag {
  display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;
   border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.02em;
}

.vw-tag-hot {
  background:var(--vw-dark);color:#fff;
}

.vw-tag-sample {
  background:#fff7f1;border:1px dashed var(--vw-primary);color:var(--vw-primary);
}

@media (min-width:1024px) {
  .vw-featured-card {
  grid-template-columns:1fr 1fr;
}
}

@media (min-width:1024px) {
  .vw-featured-media img {
  height:100%;
}
}

@media (min-width:640px) {
  .vw-news-grid {
  grid-template-columns:repeat(2,1fr);
}
}

@media (min-width:1024px) {
  .vw-news-grid {
  grid-template-columns:repeat(3,1fr);
}
}


/* Bổ sung từ bản thiết kế — H — Liên hệ (templates/H-lien-he/mau.html) */

.vw-map-caption {
  font-size:13px;color:var(--vw-text-muted);margin-top:10px;
}


/* Bổ sung từ bản thiết kế — I — Quà tặng (templates/I-qua-tang/mau.html) */

.vw-i-lead {
  font-size:16px;color:var(--vw-text-muted);margin-top:14px;max-width:760px;
}


/* Bổ sung từ bản thiết kế — Vỏ section của pattern templates
   (tương đương class .section/.section-alt/.hero trong bản thiết kế:
   padding chuẩn + scroll-margin; nền xen kẽ đúng bản thiết kế) */
.vw-b-products,
.vw-b-standards,
.vw-b-cta,
.vw-c-highlights,
.vw-c-gallery,
.vw-c-fitment,
.vw-c-specs,
.vw-c-warranty,
.vw-c-faq,
.vw-c-cta,
.vw-d-relation,
.vw-d-values,
.vw-d-role,
.vw-d-linkband,
.vw-d-cta,
.vw-e-docs,
.vw-e-verify,
.vw-e-cta,
.vw-g-archive-head,
.vw-g-featured,
.vw-g-filter-grid,
.vw-g-pagination,
.vw-g-cta,
.vw-i-hero,
.vw-i-steps,
.vw-i-gift-form,
.vw-i-notes,
.vw-i-cta,
.vw-section-checklist {
  padding-block: 48px; /* nhịp mobile: đồng nhất toàn site (audit 13.4) */
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
@media (min-width: 768px) {
  .vw-b-products,
  .vw-b-standards,
  .vw-b-cta,
  .vw-c-highlights,
  .vw-c-gallery,
  .vw-c-fitment,
  .vw-c-specs,
  .vw-c-warranty,
  .vw-c-faq,
  .vw-c-cta,
  .vw-d-relation,
  .vw-d-values,
  .vw-d-role,
  .vw-d-linkband,
  .vw-d-cta,
  .vw-e-docs,
  .vw-e-verify,
  .vw-e-cta,
  .vw-g-archive-head,
  .vw-g-featured,
  .vw-g-filter-grid,
  .vw-g-pagination,
  .vw-g-cta,
  .vw-i-hero,
  .vw-i-steps,
  .vw-i-gift-form,
  .vw-i-notes,
  .vw-i-cta,
  .vw-section-checklist {
    padding-block: 64px; /* desktop: khớp .section trong bản thiết kế */
  }
}
/* Hub F — khối bài nổi bật (f-01b): nằm giữa head và lưới, cần khoảng cách
   dưới đúng nhịp section; khoảng cách trên đã có margin-top:32px của .vw-featured */
.vw-f-featured {
  padding-bottom: 48px;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
@media (min-width: 768px) {
  .vw-f-featured { padding-bottom: 64px; }
}
/* Nền xen kẽ .section-alt trong bản thiết kế */
.vw-b-standards,
.vw-c-gallery,
.vw-c-specs,
.vw-c-faq,
.vw-d-relation,
.vw-d-values,
.vw-e-docs,
.vw-e-verify,
.vw-g-filter-grid,
.vw-i-steps,
.vw-i-notes,
.vw-section-checklist {
  background: var(--vw-bg-alt);
}
/* Hero trang C: bản thiết kế .hero { padding:80px 0 } + nền gradient trắng -> xám nhạt */
.vw-c-hero {
  padding: 80px 0;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
  background: linear-gradient(180deg, #fff 0%, var(--vw-bg-alt) 100%);
}
/* Hero trang A (nền tối): bản thiết kế .hero + .hero--dark.
   background khai báo tường minh (chốt chặn): pattern dùng backgroundColor "dark"
   (slug đã đăng ký trong theme.json); nếu class has-dark-background-color của WP
   vì lý do nào đó không sinh ra, hero vẫn nền tối đúng thiết kế. */
.vw-hero-dark {
  padding: 80px 0;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
  background: var(--vw-dark);
  color: #fff;
}
.vw-hero-dark .vw-lead {
  color: #CFCFCC; /* bản thiết kế: .hero--dark .lead */
}
/* Page-head trang H: bản thiết kế .page-head { padding:56px 0 12px }.
   Dùng padding-block (không shorthand) để giữ padding-inline của .vw-container
   khi page-head bọc container (FIX16 căn lề). */
.vw-h-page-head {
  padding-block: 56px 12px;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
/* Hub F: bản thiết kế dùng 1 section (padding-top:32px inline) chứa page-head + lưới;
   tách làm 2 pattern nên chia padding: head giữ padding-top, grid giữ padding-bottom */
.vw-f-hub-head {
  padding-top: 32px;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
.vw-f-hub-grid {
  padding-bottom: var(--vw-space-3xl);
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}


/* Bổ sung từ bản thiết kế — F — Mục lục do toc.js tự sinh (templates/F-kien-thuc/mau-article.html) */
.vw-toc-list { list-style: none; display: grid; gap: 2px; }
.vw-toc-item > a {
  display: block; padding: 8px 10px; border-radius: 6px; color: var(--vw-dark);
  font-weight: 600; font-size: 13px; text-decoration: none; line-height: 1.45;
}
.vw-toc-item > a:hover { background: #fff; color: var(--vw-primary); }
.vw-toc-item > a.is-active { background: #fff; color: var(--vw-primary); box-shadow: inset 3px 0 0 var(--vw-primary); }
.vw-toc-sublist { list-style: none; margin: 2px 0 6px; }
.vw-toc-sub > a {
  display: block; padding: 6px 10px 6px 24px; border-radius: 6px; color: var(--vw-text-muted);
  font-size: 13px; text-decoration: none; line-height: 1.45;
}
.vw-toc-sub > a:hover { color: var(--vw-primary); }
.vw-toc-sub > a.is-active { color: var(--vw-primary); font-weight: 700; }
@media (min-width:1024px) {
  /* Desktop: TOC luôn mở, ẩn nút toggle (bản thiết kế: .vw-toc-toggle{display:none}) */
  .wp-block-button.vw-toc-toggle { display: none; }
}


/* Bổ sung từ bản thiết kế — Alias & hoàn thiện */
/* Danh sách trường trong form OTP (trang I): cùng ngôn ngữ với .vw-form-fields-note (mục 19.13) */
.vw-gift-fields {
  list-style: none;
  margin: var(--vw-space-md) 0;
  padding: 0;
  font-size: 0.875rem;
  color: var(--vw-text-muted);
}
.vw-gift-fields li { padding: 4px 0 4px 22px; position: relative; }
.vw-gift-fields li::before {
  content: "\2014"; position: absolute; left: 0;
  color: var(--vw-primary); font-weight: 700;
}
/* Tiêu đề mục lục (pattern dùng h2.vw-toc-title; bản thiết kế dùng strong 14px) */
.vw-toc-title { font-size: 14px; margin: 0; line-height: 1.4; }
/* Ghi chú độc lập trong bài viết: cùng ngôn ngữ với .vw-infobox .vw-note của bản thiết kế */
.vw-note { font-size: 13px; margin-top: 14px; color: var(--vw-text-muted); }
/* Danh sách nút phân trang: reset margin/padding của wp:list cho khớp bản thiết kế
   (bản thiết kế có reset toàn cục *{margin:0;padding:0}) */
.vw-page-list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }


/* GHI CHÚ: các class sau cố ý KHÔNG có rule riêng —
   - vw-e-callout: vỏ anchor, nội dung đã có .vw-legal-callout (mục 19.10)
   - vw-cta-title: h2 đã được .vw-cta-banner h2 (mục 19) tạo kiểu
   - vw-f-article-cta, vw-h-contact-info, vw-h-map, vw-h-form: vỏ anchor/sub-block,
     nội dung bên trong đã có rule (.vw-prevnext, .vw-contact-rows, .vw-map-caption...)
   - vw-toc-toggle-wrap, vw-prevnext-item: vỏ anchor, layout do block Gutenberg
   - vw-topicchip-*, vw-topic-*, vw-year-*: hook cho hub-filter.js, không cần style
   - .vw-article-layout: không dùng ở đâu trong theme — hook dự phòng cho grid 2 cột
     bài viết nếu cần (kèm rule tối thiểu nếu bật dùng lại) */

/* ===== FIX12: layout (ý 1-4) ===== */
/* ==========================================================================
   FIX12 — Feedback 12 (trang chủ live, 16/10/2026)
   File này được append vào CUỐI assets/css/global.css nên mọi rule bên dưới
   thắng khi specificity bằng nhau. KHÔNG sửa global.css trực tiếp.
   ========================================================================== */

/* ---- 12.1 Section 02 "Nền tảng tin cậy": bọc trong container design system,
   không full-bleed ở màn hình rộng (1920px). Markup section-02.php đã bọc
   nội dung trong .vw-container; rule này là chốt chặn an toàn. ---- */
.vw-section-trust > .vw-container {
	width: 100%;
	max-width: var(--vw-container, 1240px);
	margin-inline: auto;
	padding-inline: var(--vw-container-pad, 24px);
	box-sizing: border-box;
}

/* ---- 12.2 Card sản phẩm: thêm khung 1px + bo góc theo design system.
   Áp dụng chung cho mọi .vw-product-card (trang chủ section-04, trang B b-02). ---- */
.vw-product-card {
	border: 1px solid var(--vw-border, #E2E2DF);
	border-radius: var(--vw-radius-md, 8px);
	background: #fff;
	height: 100%;
}
/* Card cao bằng nhau trong hàng, nút pin xuống đáy */
.vw-section-products .wp-block-column,
.vw-b-products .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-products .wp-block-column > .vw-product-card,
.vw-b-products .wp-block-column > .vw-product-card {
	flex: 1 1 auto;
	width: 100%;
}
.vw-product-card .vw-card-links {
	margin-top: auto;
	padding-top: 16px;
}

/* ---- 12.3 Khối quyền lợi 01–04 + quy trình: chống đè/chèn, thu gọn whitespace.
   GIỮ số 01–04 nằm trái khối chữ, cùng hàng (flex nowrap, số flex:none). ---- */
.vw-section-benefits,
.vw-section-process {
	padding-block: var(--vw-space-2xl); /* 64px -> 48px */
}
.vw-benefit {
	display: flex;
	align-items: flex-start;
	flex-wrap: nowrap;
	gap: 16px;
	padding: 20px; /* 28px 24px -> 20px */
	overflow: hidden;
}
.vw-benefit-num {
	flex: none;
	margin: 0;
	line-height: 1;
}
.vw-benefit-text {
	min-width: 0; /* chống tràn/đè chữ khi cột hẹp */
	flex: 1 1 auto;
}
.vw-benefit-text h3 {
	margin: 0 0 6px;
	line-height: 1.35;
}
.vw-benefit-text p {
	margin: 0;
	line-height: 1.6;
}
/* Quy trình: step card cao bằng nhau, gọn padding */
.vw-section-process .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-process .wp-block-column > .vw-step {
	flex: 1 1 auto;
}
.vw-step {
	padding: 20px; /* 28px 24px -> 20px */
	overflow: hidden;
}
.vw-step h3 {
	line-height: 1.35;
}
.vw-step p {
	line-height: 1.6;
}

/* ---- 12.4 Card tài liệu: cao bằng nhau, pin nút/link xuống đáy để thẳng hàng.
   Áp dụng cho trang chủ (section-07) và trang E (e-02). ---- */
.vw-section-legal .wp-block-column,
.vw-e-docs .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-legal .wp-block-column > .vw-doc-card,
.vw-e-docs .wp-block-column > .vw-doc-card {
	flex: 1 1 auto;
	width: 100%;
}
.vw-doc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}
/* Nút "Xem hồ sơ phân phối"/"Xem chi tiết" (section-07) và link "Xem bản đầy
   đủ" (e-02) luôn nằm đáy card -> nút các card thẳng hàng ngang */
.vw-doc-card > .wp-block-buttons:last-child,
.vw-e-docs .vw-doc-card > p:last-child {
	margin-top: auto;
	padding-top: 16px;
}

/* ===== FIX12: slider-faq (ý 5-6) ===== */
/* =========================================================
 * FIX12 — feedback 12 (16/10/2026)
 * (5) Slider "Kiến thức ngành"  ·  (6) FAQ accordion
 * File này được APPEND vào cuối assets/css/global.css —
 * specificity bằng hoặc cao hơn rule gốc.
 * ========================================================= */

/* ---------- (5a) Article card CÓ VIỀN 1px như card sản phẩm ---------- */
.vw-articles-slider .vw-article-card {
	border: 1px solid var(--vw-border);
	border-radius: var(--vw-radius-md);
	background: var(--vw-white);
	padding: 24px;
	box-shadow: none;
}
.vw-articles-slider .vw-article-card:hover {
	border-color: var(--vw-primary);
}

/* ---------- (5b) Ẩn thanh cuộn của slider (vẫn cuộn bằng kéo/vuốt/nút) ---------- */
.vw-articles-slider {
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE/Edge cũ */
	padding-bottom: 8px;
}
.vw-articles-slider::-webkit-scrollbar {
	display: none;                  /* Chrome/Safari */
}

/* ---------- (5c) Hàng tiêu đề + nút prev/next rõ ràng ---------- */
.vw-articles-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}
.vw-articles-head .vw-kicker {
	margin: 0;
}
/* (cũ) rule .vw-slider-nav ở mục (5c) đã xóa: markup section-08.php không còn
   cụm nút tròn cũ, chỉ dùng .vw-slider-shell > .vw-slider-prev/.vw-slider-next
   ở 2 bên slider (mục 5d bên dưới). */

/* ---------- (5d) Nút prev/next ở 2 bên slider, căn giữa theo chiều dọc ---------- */
.vw-slider-shell {
	position: relative;
}
.vw-slider-shell > .vw-slider-prev,
.vw-slider-shell > .vw-slider-next {
	width: 44px;
	height: 44px;
	min-width: 44px;
	padding: 0;
	position: absolute;
	top: 50%;
	z-index: 2;
	border: 1px solid var(--vw-border);
	border-radius: var(--vw-radius-sm);
	background: var(--vw-white);
	color: var(--vw-dark);
	font: inherit;
	font-size: 1.5rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .10);
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.vw-slider-shell > .vw-slider-prev {
	left: 0;
	transform: translate(-50%, -50%);
}
.vw-slider-shell > .vw-slider-next {
	right: 0;
	transform: translate(50%, -50%);
}
.vw-slider-shell > .vw-slider-prev:hover:not([disabled]),
.vw-slider-shell > .vw-slider-next:hover:not([disabled]) {
	border-color: var(--vw-primary);
	color: var(--vw-primary);
	background: #FFF7F2;
}
.vw-slider-shell > .vw-slider-prev[disabled],
.vw-slider-shell > .vw-slider-next[disabled] {
	opacity: .35;
	cursor: default;
}
/* Mobile: vuốt/kéo cảm ứng là đủ, ẩn nút để không đè lên card. */
@media (max-width: 767px) {
	.vw-slider-shell > .vw-slider-prev,
	.vw-slider-shell > .vw-slider-next {
		display: none;
	}
}

/* ---------- (5e) Section 08: wp:query động — post-template (ul) làm hàng trượt ----------
   wp:query > wp:post-template render <div.wp-block-query><ul.wp-block-post-template><li.wp-block-post>.
   ul giữ vai trò hàng trượt ngang (track vẫn là .vw-articles-slider), li là card. */
.vw-articles-slider .wp-block-query { width: 100%; min-width: 0; }
.vw-articles-slider .wp-block-post-template {
	display: flex;
	gap: 20px;
	width: max-content;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch;
}
.vw-articles-slider .wp-block-post {
	flex: 0 0 min(340px, 84vw);
	scroll-snap-align: start;
	margin: 0;
}
/* Card chiếm full chiều cao li để các card cao đều nhau. */
.vw-articles-slider .wp-block-post .vw-article-card { height: 100%; }
/* Ảnh đại diện: tràn full viền card (card có padding 24px), crop 16:10.
   FIX18 (17/10/2026): khung .vw-article-media là wp:group LUÔN render
   (bọc ngoài wp:post-featured-image trong pattern section-08) nên CSS
   background bám được — bài không có featured image hiện logo VOLWATT
   mặc định, bài có ảnh thật thì <img> đè lên che background.
   Bỏ rule cũ :empty/:has(img) { display:none } (khiến thumbnail "biến mất"). */
.vw-articles-slider .vw-article-card .vw-article-media {
	margin: -24px -24px 16px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--vw-bg-alt);
	background-image: url("../volwatt-logo-german-quality.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 58% auto;
}
.vw-articles-slider .vw-article-card .vw-article-media .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}
.vw-articles-slider .vw-article-card .vw-article-media .wp-block-post-featured-image a,
.vw-articles-slider .vw-article-card .vw-article-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Badge chuyên mục (wp:post-terms): giữ style .vw-article-tag, bỏ gạch chân link mặc định. */
.vw-articles-slider .vw-article-card .vw-article-tag a {
	color: inherit;
	text-decoration: none;
}
/* Chân card: ngày + "Xem chi tiết" pin đáy (card flex column). */
.vw-articles-slider .vw-article-card .vw-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}
.vw-articles-slider .vw-article-card .wp-block-read-more {
	font-weight: 700;
	color: var(--vw-primary);
	text-decoration: none;
	white-space: nowrap;
}
.vw-articles-slider .vw-article-card .wp-block-read-more:hover { text-decoration: underline; }
.vw-articles-slider .vw-article-card .wp-block-post-date { font-size: 13px; color: var(--vw-text-muted); }
.vw-articles-slider .vw-article-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}
.vw-articles-slider .vw-article-card .wp-block-post-title a:hover { color: var(--vw-primary); }

/* ---------- (6) FAQ accordion bằng <details>/<summary> ---------- */
.vw-faq-item {
	padding: 0;
	overflow: hidden;
}
.vw-faq-item + .vw-faq-item {
	margin-top: 12px;
}
.vw-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: var(--vw-space-lg) var(--vw-space-xl);
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.vw-faq-q::-webkit-details-marker {
	display: none;
}
.vw-faq-q::marker {
	display: none;
}
/* Indicator +/−: CSS-only, không cần JS */
.vw-faq-q .vw-faq-ind {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--vw-border);
	border-radius: 50%;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--vw-primary);
}
.vw-faq-q .vw-faq-ind::before {
	content: "+";
}
.vw-faq-item[open] .vw-faq-q .vw-faq-ind::before {
	content: "−";
}
.vw-faq-item[open] .vw-faq-q .vw-faq-ind {
	background: var(--vw-primary);
	border-color: var(--vw-primary);
	color: var(--vw-white);
}
.vw-faq-a {
	padding: 0 var(--vw-space-xl) var(--vw-space-lg);
	color: var(--vw-text-muted);
	font-size: 0.8125rem;
	margin: 0;
}
.vw-faq-a p {
	margin: 0 0 8px;
}
.vw-faq-a p:last-child {
	margin-bottom: 0;
}

/* ===== FIX12: form (ý 7) ===== */
/**
 * VOLWATT B2B — Style cho form "Đăng ký hợp tác" thật (fix feedback 12, ý 7).
 *
 * File giao cho parent merge vào theme (không sửa assets/css/global.css trực tiếp).
 * Dùng token màu/spacing của global.css: --vw-primary, --vw-primary-hover,
 * --vw-primary-ink, --vw-dark, --vw-border, --vw-text-muted.
 */

.vw-b2b-form {
	display: grid;
	gap: 16px;
	margin-top: 24px;
	text-align: left;
}

.vw-form-row {
	display: grid;
	gap: 6px;
	margin: 0;
}

.vw-form-row label {
	font-size: 0.8125rem; /* 13px — ngang hàng meta/nav của site */
	font-weight: 700;
	color: var(--vw-dark);
}

.vw-form-row label .req {
	color: var(--vw-primary);
}

.vw-form-row input[type="text"],
.vw-form-row input[type="tel"],
.vw-form-row input[type="email"],
.vw-form-row select,
.vw-form-row textarea {
	font-size: 16px; /* BẮT BUỘC giữ 16px để iOS không tự zoom khi focus */
	line-height: 1.5;
	font-family: inherit;
	color: var(--vw-dark);
	background: #fff;
	border: 1px solid var(--vw-border);
	border-radius: 8px;
	padding: 12px 14px;
	width: 100%;
	max-width: 100%;
}

.vw-form-row textarea {
	min-height: 110px;
	resize: vertical;
}

.vw-form-row input:focus-visible,
.vw-form-row select:focus-visible,
.vw-form-row textarea:focus-visible {
	outline: 2px solid var(--vw-primary);
	outline-offset: 1px;
	border-color: var(--vw-primary);
}

button.vw-form-submit {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 48px;
	padding: 14px 24px;
	border: 2px solid var(--vw-primary);
	border-radius: 8px;
	background: var(--vw-primary);
	color: var(--vw-primary-ink, #fff);
	font-size: 0.875rem; /* 14px — đúng chuẩn nút của site */
	font-weight: 700;
	line-height: 1.4;
	font-family: inherit;
	cursor: pointer;
}

button.vw-form-submit:hover,
button.vw-form-submit:focus-visible {
	background: var(--vw-primary-hover);
	border-color: var(--vw-primary-hover);
}

.vw-form-msg {
	border-radius: 8px;
	padding: 12px 16px;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
}

.vw-form-msg-success {
	background: #e8f7ee;
	color: #1c6b3a;
	border: 1px solid #b7e2c7;
}

.vw-form-msg-error {
	background: #fdecea;
	color: #b3261e;
	border: 1px solid #f5c6c0;
}

/* ===== FIX12: footer (ý 8) ===== */
/* ============ FIX 12 — FOOTER (append sau global.css) ============
   - Logo cột thương hiệu: hiển thị đúng kích thước (40px cao).
   - Icon social: thu về 22px, gap 14px (global.css thiếu rule .vw-footer__social).
   Specificity cao hơn mọi rule gốc để override an toàn. */

.vw-footer .vw-footer__brand .vw-footer__logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: 20px;
}

.vw-footer .vw-footer__social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.vw-footer .vw-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #D8D8D6;
}

.vw-footer .vw-footer__social a:hover {
  color: var(--vw-primary);
  text-decoration: none;
}

.vw-footer .vw-footer__social svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ==========================================================================
   FIX13 — Feedback 13: NHÓM CSS CARDS + SPACING (16/10/2026)
   Append cuối file: thắng khi specificity bằng nhau. KHÔNG đổi nội dung chữ,
   KHÔNG bịa số liệu. Giữ: 1 primary CTA/zone; cặp link "Xem chi tiết" /
   "Tra mã phụ tùng" cùng hàng (touch >= 44px); số 01–04 nằm trái khối chữ;
   kicker IN HOA MÀU CAM 13px; input giữ font-size 16px.
   Cơ chế VIỆC 2 (nhất quán toàn theme): padding-bottom: 24px TRÊN CARD,
   nút pin đáy bằng margin-top: auto (đã có từ trước) -> đáy nút cách mép
   card 24px (>= 20px yêu cầu) ở mọi breakpoint.
   ========================================================================== */

/* ---- 13.1 Card cao bằng nhau trong hàng: ép align-items: stretch tường minh
   (dự phòng khi theme/plugin khác đổi default của columns/grid/flex). ---- */
.vw-section-products .wp-block-columns,
.vw-b-products .wp-block-columns,
.vw-section-trust .wp-block-columns,
.vw-section-partners .wp-block-columns,
.vw-section-benefits .wp-block-columns {
	align-items: stretch;
}
.vw-articles-grid { align-items: stretch; }   /* lưới bài viết hub F (f-02) */
.vw-articles-slider { align-items: stretch; } /* slider kiến thức sec-08 */

/* Trụ cột tin cậy (sec-02): cột flex + card co giãn -> 4 card cao bằng nhau */
.vw-section-trust .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-trust .wp-block-column > .vw-pillar {
	flex: 1 1 auto;
	width: 100%;
}

/* Nhóm đối tác (sec-03): cột flex + card co giãn (card vốn đã height:100%) */
.vw-section-partners .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-partners .wp-block-column > .vw-partner-card {
	flex: 1 1 auto;
	width: 100%;
}
/* Pin cụm nút xuống đáy card để nút các card thẳng hàng ngang */
.vw-partner-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 16px;
}

/* Quyền lợi 01–04 (sec-05): mỗi cột chứa 2 card xếp chồng -> cho giãn đều
   để cả 4 card cao bằng nhau. GIỮ NGUYÊN số 01–04 nằm trái khối chữ cùng hàng
   (flex nowrap, số flex:none — không đụng vào rule FIX12 12.3). */
.vw-section-benefits .wp-block-column {
	display: flex;
	flex-direction: column;
}
.vw-section-benefits .wp-block-column > .vw-benefit {
	flex: 1 1 auto;
}

/* ---- 13.2 Ảnh trong card: tỉ lệ cố định 4/3 + object-fit: cover ----
   Markup thật dùng figure.wp-block-image phẳng (không qua __media legacy). */
.vw-product-card .wp-block-image,
.vw-articles-grid .vw-article-card .wp-block-image {
	margin: 0 0 20px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-bottom: 1px solid var(--vw-border);
}
.vw-product-card .wp-block-image img,
.vw-articles-grid .vw-article-card .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body padding cho markup phẳng: chữ/links không dí sát viền card
   (đúng ý đồ thiết kế gốc __body { padding: 24px }, pattern thiếu wrapper). */
.vw-product-card > h3,
.vw-product-card > p,
.vw-articles-grid .vw-article-card > h3,
.vw-articles-grid .vw-article-card > p {
	padding-inline: 24px;
}
.vw-product-card .vw-card-links {
	margin-inline: 24px; /* margin-top: auto + padding-top: 16px giữ từ rule cũ */
}
.vw-articles-grid .vw-article-card .vw-card-foot {
	margin: auto 24px 0; /* top auto = pin đáy; 2 bên 24px; đáy 0 (card lo) */
	padding-top: 16px;
}

/* ---- 13.3 Nút cách đáy card >= 20px: padding-bottom: 24px trên card ----
   Ngoại lệ đã đủ chuẩn, giữ nguyên: .vw-partner-card (26px), article card
   trong slider sec-08 (24px từ FIX12). Trust (.vw-pillar) và benefit
   (.vw-benefit) không có nút -> không thuộc phạm vi VIỆC 2. */
.vw-product-card { padding-bottom: 24px; }
.vw-articles-grid .vw-article-card { padding-bottom: 24px; }
.vw-doc-card { padding-bottom: 24px; }

/* ---- 13.4 Audit spacing trang chủ ---- */
/* (a) MỘT nhịp padding section duy nhất: 48px mobile / 64px desktop.
   Ghi đè 19.1 (64px mọi breakpoint) và FIX12 12.3 (benefits/process 48px). */
.vw-section-hero,
.vw-section-trust,
.vw-section-partners,
.vw-section-products,
.vw-section-benefits,
.vw-section-process,
.vw-section-legal,
.vw-section-knowledge,
.vw-section-faq,
.vw-section-cta {
	padding-block: var(--vw-space-2xl); /* 48px: mobile thu gọn */
}
@media (min-width: 768px) {
	.vw-section-hero,
	.vw-section-trust,
	.vw-section-partners,
	.vw-section-products,
	.vw-section-benefits,
	.vw-section-process,
	.vw-section-legal,
	.vw-section-knowledge,
	.vw-section-faq,
	.vw-section-cta {
		padding-block: var(--vw-space-3xl); /* 64px desktop: khớp bản thiết kế */
	}
}

/* (b) Lề trái/phải thẳng hàng: con trực tiếp của vỏ section (constrained)
   dùng chung padding-inline với .vw-container (24px desktop / 16px mobile).
   Trước đây các section (trừ sec-02) KHÔNG có gutter -> chữ dí sát mép màn
   hình mobile. sec-02 đã bọc .vw-container riêng nên loại khỏi danh sách. */
.vw-section-hero.is-layout-constrained > :not(.alignfull),
.vw-section-partners.is-layout-constrained > :not(.alignfull),
.vw-section-products.is-layout-constrained > :not(.alignfull),
.vw-section-benefits.is-layout-constrained > :not(.alignfull),
.vw-section-process.is-layout-constrained > :not(.alignfull),
.vw-section-legal.is-layout-constrained > :not(.alignfull),
.vw-section-knowledge.is-layout-constrained > :not(.alignfull),
.vw-section-faq.is-layout-constrained > :not(.alignfull),
.vw-section-cta.is-layout-constrained > :not(.alignfull) {
	padding-inline: var(--vw-container-pad);
}
/* Kicker là con trực tiếp dạng inline-block -> auto margin = 0, sẽ dính mép
   trái section ở màn hình rộng. Ép block để canh theo container như nội dung. */
[class*="vw-section-"].is-layout-constrained > .vw-kicker {
	display: block;
}

/* (d) Lề trái/phải thẳng hàng cho TRANG TRONG (đợt đồng nhất 16/10/2026):
   mọi wrapper section trang trong (A–I) dùng chung padding-inline với
   .vw-container (24px desktop / 16px mobile) — giống hệt trang chủ ở trên.
   Khắc phục chữ/kicker dí sát mép màn hình mobile do layout constrained
   của WP chỉ căn giữa max-width mà không tạo gutter. */
.vw-hero-dark.is-layout-constrained > :not(.alignfull),
.vw-b-products.is-layout-constrained > :not(.alignfull),
.vw-b-standards.is-layout-constrained > :not(.alignfull),
.vw-b-cta.is-layout-constrained > :not(.alignfull),
.vw-c-hero.is-layout-constrained > :not(.alignfull),
.vw-c-highlights.is-layout-constrained > :not(.alignfull),
.vw-c-gallery.is-layout-constrained > :not(.alignfull),
.vw-c-fitment.is-layout-constrained > :not(.alignfull),
.vw-c-specs.is-layout-constrained > :not(.alignfull),
.vw-c-warranty.is-layout-constrained > :not(.alignfull),
.vw-c-faq.is-layout-constrained > :not(.alignfull),
.vw-c-cta.is-layout-constrained > :not(.alignfull),
.vw-d-page-head.is-layout-constrained > :not(.alignfull),
.vw-d-relation.is-layout-constrained > :not(.alignfull),
.vw-d-values.is-layout-constrained > :not(.alignfull),
.vw-d-role.is-layout-constrained > :not(.alignfull),
.vw-d-linkband.is-layout-constrained > :not(.alignfull),
.vw-d-cta.is-layout-constrained > :not(.alignfull),
.vw-e-docs.is-layout-constrained > :not(.alignfull),
.vw-e-callout.is-layout-constrained > :not(.alignfull),
.vw-e-verify.is-layout-constrained > :not(.alignfull),
.vw-e-cta.is-layout-constrained > :not(.alignfull),
.vw-f-hub-head.is-layout-constrained > :not(.alignfull),
.vw-f-featured.is-layout-constrained > :not(.alignfull),
.vw-f-hub-grid.is-layout-constrained > :not(.alignfull),
.vw-f-article-head.is-layout-constrained > :not(.alignfull),
.vw-f-article-cta.is-layout-constrained > :not(.alignfull),
.vw-g-archive-head.is-layout-constrained > :not(.alignfull),
.vw-g-featured.is-layout-constrained > :not(.alignfull),
.vw-g-filter-grid.is-layout-constrained > :not(.alignfull),
.vw-g-pagination.is-layout-constrained > :not(.alignfull),
.vw-g-cta.is-layout-constrained > :not(.alignfull),
.vw-h-page-head.is-layout-constrained > :not(.alignfull),
.vw-i-hero.is-layout-constrained > :not(.alignfull),
.vw-i-steps.is-layout-constrained > :not(.alignfull),
.vw-i-gift-form.is-layout-constrained > :not(.alignfull),
.vw-i-notes.is-layout-constrained > :not(.alignfull),
.vw-i-cta.is-layout-constrained > :not(.alignfull),
.vw-section-checklist.is-layout-constrained > :not(.alignfull) {
	padding-inline: var(--vw-container-pad);
}

/* ==========================================================================
   FIX16 — Căn lề page-head/hero trang trong (17/10/2026)
   (1) .vw-kicker là inline-block -> khi là con trực tiếp của wrapper
   constrained, auto margin của WP không tác dụng -> kicker dính mép trái
   trong khi H1/nội dung block canh theo container 1240px. Ép block để kicker
   canh theo container như mọi nội dung khác (mở rộng rule đã có cho
   vw-section-* ở trên). Hero căn giữa (a-01) dùng has-text-align-center nên
   kicker block sẽ căn giữa đúng thiết kế.
   (2) Wrapper nào đã bọc .vw-container thì gutter lấy từ container — không áp
   thêm padding-inline cho con trực tiếp (tránh double-gutter 24+24=48px, lệch
   với nội dung bên dưới). Rule đặt sau, cùng specificity (0,3,0) nên thắng. */
.is-layout-constrained > .vw-kicker {
	display: block;
}
.vw-container.is-layout-constrained > :not(.alignfull) {
	padding-inline: 0;
}

/* (c) Nhịp kicker -> nội dung: .vw-kicker margin-bottom 12px đã đồng nhất mọi
   section (sec-08 giữ 20px của .vw-articles-head theo FIX12: có chủ ý, không sửa). */

/* ==========================================================================
   FIX14 — Feedback 14, ý 5: DÀN ĐỀU FOOTER 4/4/4 (16/10/2026)
   Footer giờ là 3 cột BẰNG NHAU (1fr 1fr 1fr), mobile xếp chồng dọc.
   - Cột 1: brand (logo, giới thiệu, liên hệ, social, badge BCT).
   - Cột 2: 4 nhóm link — lưới 2x2 BÊN TRONG cột 2 (≥1100px), 1 cột dưới đó.
   - Cột 3: bản đồ (giữ nguyên URL embed Stellar Garden).
   - Badge Bộ Công Thương: rộng 170px, giữ aspect ratio (600×227 → ~170×64).
   Append cuối file: thắng khi specificity bằng nhau. KHÔNG đổi nội dung chữ. */

.vw-footer .vw-footer__grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .vw-footer .vw-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 36px;
  }
}

@media (min-width: 1024px) {
  .vw-footer .vw-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px;
  }
}

/* Cột 2: 4 nhóm link xếp gọn 2x2 bên trong cột 2 */
.vw-footer .vw-footer__links {
  display: grid;
  gap: 32px 24px;
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
  .vw-footer .vw-footer__links {
    grid-template-columns: 1fr 1fr;
  }
}

.vw-footer .vw-footer__links nav { min-width: 0; }

/* Badge Bộ Công Thương: phóng to 170px, giữ tỷ lệ */
.vw-footer .vw-footer__bct {
  margin-top: 20px;
}

.vw-footer .vw-footer__bct img {
  display: block;
  width: 170px;
  height: auto;
  max-width: 100%;
}

/* Cột 3: bản đồ đầy chiều rộng cột, bo góc nhẹ */
.vw-footer .vw-footer__map {
  min-width: 0;
}

.vw-footer .vw-footer__map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: var(--vw-radius-md);
}

@media (min-width: 768px) {
  .vw-footer .vw-footer__map iframe { height: 340px; }
}

/* ==========================================================================
   FIX14 — Feedback 14: đối chiếu page-templates với thiết kế gốc (16/10/2026)
   Bổ sung style còn thiếu cho: breadcrumb, D-01 page-head, F-01b bài nổi bật,
   nút .btn/.btn-primary, và lưới 2 cột trang Liên hệ (contact-grid).
   ========================================================================== */

/* ---- 14.1 Breadcrumb (bản thiết kế; dùng chung F-01, D-01) ---- */
.breadcrumbs { font-size: 13px; color: #8a8a86; margin: 0 0 14px; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--vw-primary); }
.breadcrumbs [aria-current] { color: var(--vw-dark); font-weight: 600; }

/* ---- 14.2 Page-head trang D: bản thiết kế .page-head { padding:48px 0 8px }.
   Dùng padding-block (không shorthand) để giữ padding-inline của .vw-container
   khi page-head bọc container (FIX16 căn lề). ---- */
.vw-d-page-head {
  padding-block: 48px 8px;
  scroll-margin-top: calc(var(--vw-header-h) + 16px);
}
.vw-d-page-head #page-h1 { margin: 0 0 12px; }

/* ---- 14.3 F-01b Bài viết nổi bật (bản thiết kế template F) ---- */
.vw-featured {
  display: grid; gap: 0; background: #fff;
  border: 1px solid var(--vw-border); border-radius: 12px;
  overflow: hidden; margin-top: 32px;
  box-shadow: 0 12px 32px rgba(32,32,32,.06);
}
.vw-featured-media { position: relative; min-height: 260px; }
.vw-featured-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; position: absolute; inset: 0;
}
.vw-featured-flag {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  background: var(--vw-primary); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 6px; padding: 6px 12px;
}
.vw-f-featured .vw-featured-body {
  padding: 32px 28px; display: flex;
  flex-direction: column; justify-content: center;
}
.vw-f-featured .vw-featured-body .vw-kicker { margin-bottom: 10px; }
.vw-f-featured .vw-featured-body h2 {
  font-size: clamp(22px,3vw,30px); margin: 0 0 12px;
}
.vw-f-featured .vw-featured-body h2 a { color: var(--vw-dark); text-decoration: none; }
.vw-f-featured .vw-featured-body h2 a:hover { color: var(--vw-primary); }
.vw-f-featured .vw-featured-body > p { color: var(--vw-text-muted); margin: 0 0 20px; }
@media (min-width: 640px) {
  .vw-f-featured .vw-featured-body { padding: 40px; }
}
@media (min-width: 1024px) {
  .vw-featured { grid-template-columns: 1fr 1.1fr; }
}

/* ---- 14.4 Nút bấm .btn/.btn-primary (bản thiết kế) ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border-radius: var(--vw-radius-md);
  font-family: var(--vw-font-sans); font-size: 14px; font-weight: 700; line-height: 1.4;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  text-align: center;
}
.btn-primary { background: var(--vw-primary); color: #fff; border-color: var(--vw-primary); }
.btn-primary:hover { background: var(--vw-primary-hover); border-color: var(--vw-primary-hover); color: #fff; }

/* ---- 14.5 Lưới 2 cột trang Liên hệ (bản thiết kế H: .contact-grid) ---- */
.contact-grid {
  display: grid; gap: 24px;
  max-width: var(--vw-container); /* dùng chung container như mọi trang */
  margin-inline: auto;
  padding-inline: var(--vw-container-pad);
  padding-top: 24px;    /* bản thiết kế H: h-contact padding-top:24px */
  padding-bottom: 48px; /* nhịp mobile */
}
@media (min-width: 768px) {
  .contact-grid { padding-bottom: 64px; } /* nhịp desktop */
}
.contact-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.vw-h-contact-info {
  background: var(--vw-bg-alt); border: 1px solid var(--vw-border);
  border-radius: 12px; padding: 32px 28px;
}
.vw-h-contact-info h2 { margin-bottom: 8px; }
.vw-h-map iframe {
  width: 100%; height: 320px; display: block; border: 0;
  border-radius: 12px;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
  .vw-h-map iframe { height: 380px; }
}

/* -- Khối tin động G (query loop): fallback khi bài không có ảnh đại diện;
      link chuyên mục trong meta/kicker kế thừa màu class; link "Đọc tiếp" -- */
.vw-news-card .wp-block-post-featured-image {
  background: var(--vw-bg-alt);
  aspect-ratio: 16/10;
  overflow: hidden;
}
.vw-news-card .wp-block-post-featured-image a,
.vw-news-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vw-news-meta .meta-cat a { color: inherit; text-decoration: none; }
.vw-news-meta .meta-cat a:hover { color: var(--vw-primary); }
.vw-kicker a { color: inherit; text-decoration: none; }
.vw-kicker a:hover { color: var(--vw-primary); }
.wp-block-read-more.vw-read-more {
  font-weight: 700;
  font-size: 14px;
  color: var(--vw-dark);
  text-decoration: none;
}
.wp-block-read-more.vw-read-more:hover { color: var(--vw-primary); }

/* ==========================================================================
   FIX15 — Template F: Query Loop động cho f-01b (featured) + f-02 (hub grid)
   (16/10/2026). post-template render <ul>/<li> nên cần reset + ép card giãn
   đều. Scope hẹp trong .vw-f-featured / .vw-articles-grid / .vw-hub-pagination.
   KHÔNG đổi nội dung chữ, KHÔNG bịa số liệu.
   ========================================================================== */

/* ---- 15.1 F-01b featured: figure ảnh đại diện lấp đầy .vw-featured-media ----
   (CSS gốc .vw-featured-media img dùng position:absolute; figure cần margin:0
   và nền dự phòng khi bài không có ảnh đại diện.) */
.vw-f-featured .vw-featured-media { background: var(--vw-bg-alt); }
.vw-f-featured .vw-featured-media .wp-block-post-featured-image { margin: 0; }
.vw-f-featured .vw-featured-media .wp-block-post-featured-image a,
.vw-f-featured .vw-featured-media .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tóm tắt bài (post-excerpt render div bọc p): giữ nhịp margin như bản cứng. */
.vw-f-featured .vw-featured-body .wp-block-post-excerpt { color: var(--vw-text-muted); margin: 0 0 20px; }
.vw-f-featured .vw-featured-body .wp-block-post-excerpt__excerpt { margin: 0; }
/* Nút "Đọc bài viết" (wp:read-more): giữ visual .btn/.btn-primary bản cứng. */
.vw-f-featured .wp-block-read-more { margin: 0; }
.vw-f-featured .wp-block-read-more a {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 28px; border-radius: var(--vw-radius-md);
  font-family: var(--vw-font-sans); font-size: 14px; font-weight: 700; line-height: 1.4;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  background: var(--vw-primary); color: #fff; border-color: var(--vw-primary);
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.vw-f-featured .wp-block-read-more a:hover { background: var(--vw-primary-hover); border-color: var(--vw-primary-hover); color: #fff; }

/* F-01b: post-template render <ul> — reset để card featured không bị thụt lề. */
.vw-f-featured .wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.vw-f-featured .wp-block-post-template .wp-block-post { margin: 0; }

/* ---- 15.2 F-02 hub grid: post-template (<ul>) giữ lưới .vw-articles-grid ----
   Reset list của <ul>, <li> thành cột flex để card con giãn full chiều cao. */
.vw-articles-grid.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.vw-articles-grid .wp-block-post { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.vw-articles-grid .vw-article-card { flex: 1 1 auto; }
/* Ảnh đại diện card (post-featured-image): cùng tỉ lệ 4/3 + object-fit như bản cứng. */
.vw-articles-grid .vw-article-card .wp-block-post-featured-image {
  margin: 0 0 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--vw-border);
  background: var(--vw-bg-alt);
}
.vw-articles-grid .vw-article-card .wp-block-post-featured-image a,
.vw-articles-grid .vw-article-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Chuyên mục trên card: kicker cam in hoa nhỏ; body giữ padding-inline 24px
   như rule > h3, > p (excerpt/terms render div bọc nên cần rule riêng). */
.vw-articles-grid .vw-article-card .vw-card-cat {
  padding-inline: 24px;
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vw-primary);
}
.vw-articles-grid .vw-article-card .vw-card-cat a { color: inherit; text-decoration: none; }
.vw-articles-grid .vw-article-card .vw-card-cat a:hover { text-decoration: underline; }
.vw-articles-grid .vw-article-card .wp-block-post-excerpt { padding-inline: 24px; }
.vw-articles-grid .vw-article-card .wp-block-post-excerpt__excerpt { margin: 0; }
/* Ngày đăng trong .vw-card-foot: nhỏ, xám (rule .vw-meta time dùng cho f-01b). */
.vw-articles-grid .vw-article-card .vw-card-foot .wp-block-post-date {
  font-size: 13px; color: var(--vw-text-muted); margin: 0;
  display: inline-flex; align-items: center; min-height: 44px;
}

/* ---- 15.3 Phân trang hub: nút prev/next + số trang, 1 nhịp với theme ---- */
.vw-hub-pagination { margin-top: 40px; gap: 10px; }
.vw-hub-pagination .wp-block-query-pagination-previous,
.vw-hub-pagination .wp-block-query-pagination-next {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 10px 18px; border: 1.5px solid var(--vw-border); border-radius: 6px;
  font-size: 14px; font-weight: 700; color: var(--vw-dark); text-decoration: none;
}
.vw-hub-pagination .wp-block-query-pagination-previous:hover,
.vw-hub-pagination .wp-block-query-pagination-next:hover {
  border-color: var(--vw-primary); color: var(--vw-primary);
}
.vw-hub-pagination .wp-block-query-pagination-numbers { display: inline-flex; gap: 6px; }
.vw-hub-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 6px;
  font-size: 14px; font-weight: 700; color: var(--vw-dark); text-decoration: none;
  border: 1.5px solid transparent;
}
.vw-hub-pagination a.page-numbers:hover { border-color: var(--vw-primary); color: var(--vw-primary); }
.vw-hub-pagination .page-numbers.current { background: var(--vw-primary); border-color: var(--vw-primary); color: #fff; }
.vw-hub-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   FIX16 — Redesign hub Kiến thức / Tin tức (F) — 16/10/2026
   (a) Card bài viết CÓ VIỀN 1px #E2E2DF / bo 8px / padding 24px / nền trắng —
       giống card sản phẩm đã chốt (slider section-08 đã có từ FIX12, không đụng).
   (b) Ảnh mặc định = logo VOLWATT khi bài không có featured image: khung
       .vw-card-media / .vw-featured-media có background là logo
       (assets/volwatt-logo-german-quality.svg, căn giữa) — bài có ảnh thật thì
       <img> đè lên che background. Khung giữ aspect-ratio 16/10 nên không xẹp.
       Không JS.
   (c) Bài nổi bật: 2 cột cân đối (ảnh 5 phần / nội dung 7 phần), badge "Bài nổi
       bật" chuyển từ absolute trên ảnh sang pill gọn đặt TRÊN kicker chuyên mục;
       responsive xếp chồng trên mobile.
   (d) Chip lọc: giữ hàng chip nhưng link tới chuyên mục THẬT
       (/category/<slug>/ — lọc server-side ổn định). hub-filter.js đã XÓA
       (file + enqueue trong functions.php): chip cũ trỏ topic không tồn tại,
       JS chặn click (preventDefault) và wp:query không emit data-topic nên lọc
       client-side không thể ổn định.
   Typography giữ nguyên: kicker cam in hoa 13px, body 14px, text card 13px,
   nút 14px, H3 card ≤18px. Không placeholder, không đụng footer/form/slider.
   ========================================================================== */

/* ---- 16.1 Khung ảnh có logo mặc định (b) ----
   FIX18 (17/10/2026): thêm .vw-g-featured .vw-featured-media — pattern g-02
   đã bọc wp:post-featured-image trong group .vw-featured-media luôn render. */
.vw-card-media,
.vw-featured .vw-featured-media,
.vw-g-featured .vw-featured-media {
  background-color: var(--vw-bg-alt);
  background-image: url("../volwatt-logo-german-quality.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 58% auto;
}

/* ---- 16.2 Grid card F-02: viền như card sản phẩm + ảnh tràn viền (a, b) ---- */
.vw-articles-grid .vw-article-card {
  border: 1px solid var(--vw-border);
  border-radius: var(--vw-radius-md);
  background: #fff;
  padding: 24px;
  overflow: hidden;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.vw-articles-grid .vw-article-card:hover {
  border-color: var(--vw-primary);
  box-shadow: 0 14px 36px rgba(32, 32, 32, .08);
}
/* Khung ảnh tràn full viền trên của card, tỉ lệ 16/10 cố định. */
.vw-articles-grid .vw-article-card .vw-card-media {
  margin: -24px -24px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
/* Ghi đè rule FIX15 (15.2): figure ảnh lấp đầy khung, không còn tỉ lệ 4/3 riêng. */
.vw-articles-grid .vw-article-card .vw-card-media .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
  aspect-ratio: 16 / 10;
  border-bottom: 0;
  background: transparent;
}
.vw-articles-grid .vw-article-card .vw-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Nội dung card: card đã có padding 24px nên bỏ padding-inline cũ của FIX15. */
.vw-articles-grid .vw-article-card .vw-card-cat {
  padding-inline: 0;
  margin: 0 0 8px;
  font-size: 13px;
}
.vw-articles-grid .vw-article-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.4;
}
.vw-articles-grid .vw-article-card h3 a {
  color: var(--vw-dark);
  text-decoration: none;
}
.vw-articles-grid .vw-article-card h3 a:hover {
  color: var(--vw-primary);
}
.vw-articles-grid .vw-article-card .wp-block-post-excerpt {
  padding-inline: 0;
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--vw-text-muted);
}

/* ---- 16.3 Bài nổi bật F-01b: 2 cột 5/7 + badge trên kicker (a, b, c) ---- */
.vw-featured {
  border-radius: var(--vw-radius-md);
}
/* Badge "Bài nổi bật": từ absolute trên ảnh -> pill gọn trong body, trên kicker. */
.vw-featured-flag {
  position: static;
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
}
.vw-f-featured .vw-featured-body .vw-kicker {
  margin-bottom: 10px;
}
.vw-featured-media {
  min-height: 220px;
}
@media (min-width: 1024px) {
  /* Cột ảnh 5 phần / cột nội dung 7 phần — cân đối, hết khoảng trắng lệch. */
  .vw-featured {
    grid-template-columns: 5fr 7fr;
  }
}

/* ==========================================================================
   FIX17 — Căn lề + sửa contrast (17/10/2026)
   ========================================================================== */

/* ---- 17.1 A-01 hero: 3 pills BẰNG NHAU + cả cụm căn giữa ----
   Mỗi li flex:1 (cùng basis 0) nên 3 pills luôn rộng bằng nhau;
   text căn giữa; max-width giữ pills gọn trên desktop;
   mobile wrap thì mỗi pill full-width, vẫn bằng nhau. */
.vw-hero-aud li { flex: 1 1 0; min-width: min(260px, 100%); max-width: 380px; }
.vw-hero-aud a {
  display: flex; width: 100%; min-height: 44px;
  align-items: center; justify-content: center; text-align: center;
}

/* ---- 17.2 H-02 Thông tin liên hệ: sửa contrast ----
   Card .vw-h-contact-info có nền sáng (--vw-bg-alt #F6F6F3) nhưng
   .vw-contact-rows đang trắng (#fff) → đổi sang màu tối cho đủ WCAG AA
   (#444/#202020 trên #F6F6F3 ≈ 8.5:1 và 13.5:1).
   KHÔNG sửa rule gốc .vw-contact-rows vì các CTA banner (.vw-cta-banner,
   nền --vw-dark) vẫn cần chữ trắng. */
.vw-h-contact-info .vw-contact-rows li {
  color: #444; border-bottom-color: var(--vw-border);
}
.vw-h-contact-info .vw-contact-rows .vw-contact-label { color: #202020; }
.vw-h-contact-info .vw-contact-rows a { color: #444; }
.vw-h-contact-info .vw-contact-rows em { color: #444; }
.vw-h-contact-info h2 { color: #202020; }

/* ==========================================================================
   FIX18 — Đợt "căn lề + sửa lỗi hiển thị" trang /kien-thuc/ (17/10/2026)
   Mantra: CĂN LỀ. Không đổi nội dung chữ; card bài viết giữ viền.
   ========================================================================== */

/* ---- 18.1 Hub /kien-thuc/ nằm trong .vw-container ----
   page-templates/kien-thuc-hub.php bọc f-01 + f-01b + f-02 trong MỘT
   <div class="vw-container"> (max-width 1240px, gutter 24px/16px) nên con
   trực tiếp của 3 pattern KHÔNG lấy thêm padding-inline — tránh double-gutter
   (24px của container + 24px của rule trang trong = 48px, lệch so với các
   trang A–E). Specificity (0,4,0) thắng rule gốc (0,3,0). Rule gốc vẫn giữ
   nguyên cho mọi ngữ cảnh khác (pattern dùng lẻ trong editor). */
.vw-container > .vw-f-hub-head.is-layout-constrained > :not(.alignfull),
.vw-container > .vw-f-featured.is-layout-constrained > :not(.alignfull),
.vw-container > .vw-f-hub-grid.is-layout-constrained > :not(.alignfull) {
  padding-inline: 0;
}

/* ---- 18.2 F-01b: khung ảnh bài nổi bật giữ tỉ lệ 16/10 ----
   Wrapper .vw-featured-media (wp:group, luôn render) đã có background logo
   VOLWATT từ FIX16. Thêm aspect-ratio để khung placeholder gọn đúng tỉ lệ
   trên mobile 1 cột; desktop 2 cột (grid stretch) rule này bị bỏ qua theo
   spec nên không ảnh hưởng layout đã duyệt. */
.vw-f-featured .vw-featured-media {
  aspect-ratio: 16 / 10;
}

/* ---- 18.3 G-02: khung ảnh tin nổi bật ----
   Pattern đã bọc wp:post-featured-image trong group .vw-featured-media luôn
   render; background logo lấy từ rule FIX16 (16.1) đã mở rộng selector.
   figure lấp đầy khung để <img> thật đè lên logo khi bài có ảnh. */
.vw-g-featured .vw-featured-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.vw-g-featured .vw-featured-media .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
}
.vw-g-featured .vw-featured-media .wp-block-post-featured-image a,
.vw-g-featured .vw-featured-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 18.4 G-03: khung ảnh card lưới tin ----
   Pattern đã bọc wp:post-featured-image trong group .vw-card-media luôn
   render; background logo lấy từ rule FIX16 (16.1). Khung giữ 16/10,
   tràn full chiều ngang card (card .vw-news-card không có padding). */
.vw-news-card .vw-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.vw-news-card .vw-card-media .wp-block-post-featured-image {
  margin: 0;
  height: 100%;
}
.vw-news-card .vw-card-media .wp-block-post-featured-image a,
.vw-news-card .vw-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}