/*
Theme Name: VSE v2
Theme URI: https://thevse.org
Author: Vietnam Society of Excellence
Description: Theme thevse.org theo VSE Design System v2.0 (token vai trò, phẳng, có viền, xanh #2F63AC + graphite, Manrope / Inter / JetBrains Mono). Token và component gốc ở assets/vse.css; tệp này chỉ dùng token vai trò.
Version: 4.8.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: vse
*/

/* ==========================================================
   0. BIẾN BỐ CỤC (không phải màu)
   Container 1280px, gutter 48px, 24px dưới 850px.
   ========================================================== */
:root {
  --vse-gutter: var(--space-7);
  --vse-header-h: 72px;
  --vse-mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E");
  --vse-mask-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --vse-mask-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --vse-mask-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --vse-mask-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --vse-mask-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --vse-mask-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E");
  --vse-mask-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V3'/%3E%3Cpath d='M5 4h11l-2.2 3.2L16 10.5H5'/%3E%3C/svg%3E");
  --vse-mask-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.9'/%3E%3C/svg%3E");
  --vse-mask-medal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.4L7.8 21 12 18.9 16.2 21 15 13.4'/%3E%3C/svg%3E");
  --vse-mask-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7.5 3v5.2c0 4.2-3.2 7.9-7.5 8.8-4.3-.9-7.5-4.6-7.5-8.8V6z'/%3E%3Cpath d='M9.2 12l2 2 3.6-3.8'/%3E%3C/svg%3E");
  --vse-mask-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.8 12 5.8 21.5 12 21.5 12 18 18.2 12 18.2 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E");
}
@media (max-width: 850px) { :root { --vse-gutter: var(--space-5); --vse-header-h: 64px; } }

/* Icon: hình qua mask, màu qua token (đổi theo theme). */
.vse-ico { display: block; background-color: var(--icon-primary); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }

/* ==========================================================
   1. NỀN CHỮ
   ========================================================== */
body {
  background: var(--background);
  color: var(--text-secondary);
  font: 400 16px/1.65 var(--font-text);
  word-break: keep-all;
  overflow-wrap: break-word; /* chỉ ngắt giữa âm tiết khi một từ dài hơn cả dòng */
}
p { color: var(--text-secondary); }
/* Xuống dòng đẹp cho tiếng Việt (đi cùng mu-plugin vse-giu-tu): tránh dòng cuối mồ côi, tiêu đề chia đều */
p, li, dd, figcaption, .vse-lead { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
h1, h2, h3, h4, h5 { color: var(--text-primary); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 64px; line-height: 1.15; letter-spacing: -0.03em; }
h2 { font-size: 32px; line-height: 1.25; }
h3 { font-size: 20px; line-height: 1.4; }
h4 { font-size: 16px; line-height: 1.4; }
strong { color: var(--text-primary); font-weight: 600; }
a { color: var(--link-primary); transition: color 120ms; }
a:hover { color: var(--link-hover); }
::selection { background: var(--layer-selected); color: var(--text-primary); }

/* Focus: viền đặc 3px, cách 4px, không bao giờ ẩn. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.wp-block-navigation a:focus-visible { outline-offset: -3px; }

.vse-eyebrow {
  font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em;
  color: var(--text-helper); margin: 0 0 var(--space-4);
}
.vse-eyebrow a { color: inherit; }
.vse-lead { font-size: 18px; line-height: 1.65; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ==========================================================
   2. HEADER, LOGO, MENU
   ========================================================== */
.vse-header {
  background: var(--layer-01);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; top: 0; z-index: 50;
}
.vse-header-in { min-height: var(--vse-header-h); gap: var(--space-5); }
/* Logo: file gốc, rộng 240px; vùng trống 1X = 1/4 chiều cao artwork (54px) ≈ 14px mỗi phía. */
.vse-logo { display: inline-block; padding: 12px; margin: 0 -12px; line-height: 0; flex: none; }
/* 13/10/2026 Vũ Hải yêu cầu logo nhỏ hơn: 200px (thấp hơn mức tối thiểu 240px của brand guideline, đã báo) */
.vse-logo img { display: block; width: 200px; max-width: none; height: auto; }
@media (max-width: 480px) { .vse-logo img { width: 176px; } }
.vse-header-nav { gap: var(--space-4); }
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-3);
  font: 600 14px/1.4 var(--font-text); color: var(--text-primary);
  border-radius: var(--radius-sm); text-decoration: none; transition: background 120ms;
}
.wp-block-navigation a:hover { background: var(--layer-hover); color: var(--text-primary); }
.wp-block-navigation a:active { background: var(--layer-selected); }
.wp-block-navigation .current-menu-item > a,
.wp-block-navigation a[aria-current="page"] { color: var(--link-primary); box-shadow: none; }
/* Nút mở menu trên điện thoại */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--icon-primary); border-radius: var(--radius-sm);
}
.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-close:hover { background: var(--layer-hover); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--layer-01) !important; color: var(--text-primary) !important; padding: var(--space-5) var(--vse-gutter) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { gap: 0 !important; align-items: stretch !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid var(--border-subtle); }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { width: 100%; font-size: 16px; padding: 0 var(--space-2); }

/* ==========================================================
   3. NÚT (vse-btn): cao 48px, bo 4px, một nút chính mỗi vùng
   ========================================================== */
.wp-block-button__link,
.wp-element-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 12px 24px;
  font: 600 14px/1 var(--font-text);
  background: var(--interactive); color: var(--text-on-color);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; transition: background 120ms, border-color 120ms;
}
.wp-block-button__link:hover { background: var(--interactive-hover); color: var(--text-on-color); }
.wp-block-button__link:active { background: var(--interactive-active); }
/* Nút phụ (secondary): viền xanh, nền trong suốt */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--link-primary); border: 1px solid var(--border-interactive);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--layer-hover); color: var(--link-primary); }
.wp-block-button.is-style-outline .wp-block-button__link:active { background: var(--layer-selected); }
.vse-nav-cta .wp-block-button__link { min-height: 48px; }

/* ==========================================================
   4. HERO TRANG CHỦ: phẳng, ảnh bám mép phải
   ========================================================== */
.vse-hero { overflow: hidden; background: var(--background); border-bottom: 1px solid var(--border-subtle); }
.vse-hero h1 { margin: 0 0 var(--space-5); }
.vse-hero .vse-lead { margin: 0 0 var(--space-6); max-width: 560px; }
.vse-hero .wp-block-buttons { gap: var(--space-3); }
.vse-hero-img { margin: 0 !important; }
.vse-hero-img img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
@media (min-width: 1024px) {
  .vse-hero.has-global-padding { padding-left: 0 !important; padding-right: 0 !important; }
  .vse-hero > .wp-block-columns {
    max-width: 100% !important; display: grid !important;
    grid-template-columns: minmax(0, 580px) minmax(0, 1fr); column-gap: var(--space-8); align-items: center;
    padding-left: max(var(--vse-gutter), calc((100vw - 1280px) / 2)) !important; padding-right: 0 !important;
    padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important;
  }
  .vse-hero > .wp-block-columns > .wp-block-column { flex-basis: auto !important; width: auto !important; margin: 0 !important; }
  .vse-hero > .wp-block-columns .vse-hero-img img { border-radius: var(--radius-lg) 0 0 var(--radius-lg); border-right: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .vse-hero > .wp-block-columns { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); column-gap: var(--space-7); }
  .vse-hero h1 { font-size: 48px; }
}

/* ==========================================================
   5. TIÊU ĐỀ SECTION
   ========================================================== */
h2.has-text-align-center { margin-bottom: var(--space-4); }
h2.has-text-align-center + p.has-text-align-center {
  max-width: 680px; margin-left: auto; margin-right: auto;
  font-size: 18px; line-height: 1.65; color: var(--text-secondary);
}

/* ==========================================================
   6. THẺ (vse-card): nền layer-01, viền border-subtle, bo 8px, không bóng
   ========================================================== */
.vse-cards { gap: var(--space-5) !important; }
.vse-cards .wp-block-column,
.vse-vm .wp-block-column,
.vse-values li,
.vse-people li,
.vse-price-card,
.vse-form-card,
.vse-steps-list li,
.vse-contact-cards .wp-block-column,
.vse-sk-the,
.vse-sk-the-dk,
.vse-sk-tom-tat,
.vse-sk-dk-the,
.vse-post-card {
  background: var(--layer-01); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); color: var(--text-secondary);
}
.vse-cards .wp-block-column { padding: var(--space-6); }
.vse-cards h3 { margin: 0 0 var(--space-3); font-size: 20px; line-height: 1.4; }
.vse-cards h3::before { content: ""; display: block; width: 24px; height: 3px; background: var(--interactive); margin-bottom: var(--space-5); }
.vse-cards p { font-size: 16px; line-height: 1.65; margin: 0; }

/* Tầm nhìn, sứ mệnh */
.vse-vm { gap: var(--space-5) !important; }
.vse-vm .wp-block-column { padding: var(--space-5) var(--space-6); border-left: 3px solid var(--border-interactive); }
.vse-vm h3 { margin: 0 0 var(--space-2); font-size: 20px; }
.vse-vm p { margin: 0; }
.vse-vm.wp-block-group { background: var(--notification-info); border: 1px solid var(--border-subtle); border-left: 4px solid var(--support-info); border-radius: 0; padding: var(--space-5) var(--space-6); margin: var(--space-5) 0; }

/* Giá trị cốt lõi */
.vse-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); list-style: none; padding: 0; margin: var(--space-7) 0 0; }
.vse-values li { padding: var(--space-6) var(--space-5); }
.vse-values li::before {
  content: ""; display: block; width: 48px; height: 48px; margin-bottom: var(--space-5);
  background: var(--icon-primary);
  -webkit-mask: var(--vse-mask-flag) center / 26px 26px no-repeat;
  mask: var(--vse-mask-flag) center / 26px 26px no-repeat;
}
.vse-values li:nth-child(2)::before { -webkit-mask-image: var(--vse-mask-check-circle); mask-image: var(--vse-mask-check-circle); }
.vse-values li:nth-child(3)::before { -webkit-mask-image: var(--vse-mask-medal); mask-image: var(--vse-mask-medal); }
.vse-values li:nth-child(4)::before { -webkit-mask-image: var(--vse-mask-shield); mask-image: var(--vse-mask-shield); }
.vse-values li:nth-child(5)::before { -webkit-mask-image: var(--vse-mask-eye); mask-image: var(--vse-mask-eye); }
.vse-values li strong { display: block; margin: 0 0 var(--space-2); font: 600 20px/1.4 var(--font-display); color: var(--text-primary); }
.vse-values li span { display: block; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* Số liệu */
.vse-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; list-style: none; padding: 0; margin: 0 0 var(--space-7); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.vse-stats li { padding: var(--space-6) var(--space-4); text-align: center; border-right: 1px solid var(--border-subtle); }
.vse-stats li:last-child { border-right: 0; }
.vse-stats li strong { display: block; font: 600 44px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--link-primary); }
.vse-stats li span { display: block; font-size: 14px; color: var(--text-helper); margin-top: var(--space-2); }

/* Ban lãnh đạo */
.vse-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-5) 0 0; }
.vse-people li { padding: var(--space-5); }
.vse-people li strong { display: block; color: var(--text-primary); font-size: 16px; font-weight: 600; line-height: 1.4; }
.vse-people li span { display: block; font-size: 14px; line-height: 1.5; color: var(--text-helper); margin-top: var(--space-1); }
.vse-people li.is-lead { background: var(--background-inverse); border-color: var(--background-inverse); }
.vse-people li.is-lead strong,
.vse-people li.is-lead span { color: var(--text-inverse); }

/* ==========================================================
   7. ẢNH, THƯ VIỆN
   ========================================================== */
.wp-block-gallery { gap: var(--space-4) !important; }
.wp-block-gallery img { border-radius: var(--radius-lg) !important; }
.wp-block-gallery.is-cropped .wp-block-image img { aspect-ratio: 3 / 2; object-fit: cover; }
.vse-wide-photo { max-width: 1120px !important; margin: var(--space-7) auto !important; }
.vse-wide-photo img { display: block; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.vse-wide-photo figcaption, .wp-block-image figcaption.wp-element-caption { font-size: 13px; line-height: 1.5; color: var(--text-helper); text-align: center; margin: var(--space-3) 0 0; }
.vse-photo-strip { max-width: 1120px !important; margin: 0 auto !important; padding: var(--space-9) 0 0 !important; }
.vse-photo-strip h2 { margin-bottom: var(--space-6) !important; }
/* Ảnh cạnh đoạn chữ: giữ tỷ lệ gốc, không cắt người */
.wp-block-column > .vse-hero-img img { border-radius: var(--radius-lg); border-right: 1px solid var(--border-subtle); }

/* ==========================================================
   8. KHỐI NỀN ĐẢO (CTA): background-inverse, chữ text-inverse
   ========================================================== */
.vse-dark, .vse-cta-box { background: var(--background-inverse) !important; color: var(--text-inverse); }
.vse-dark h2, .vse-dark h3, .vse-cta-box h3,
.vse-dark p, .vse-cta-box p,
.vse-dark h2.has-text-align-center + p.has-text-align-center { color: var(--text-inverse) !important; }
.vse-cta-box { border-radius: var(--radius-lg); padding: var(--space-6) !important; }
/* Nút trên nền đảo: nền layer-01, chữ link-primary (giữ tương phản cả viền nút lẫn chữ) */
.vse-dark .wp-block-button__link, .vse-cta-box .wp-block-button__link { background: var(--layer-01); color: var(--link-primary); }
.vse-dark .wp-block-button__link:hover, .vse-cta-box .wp-block-button__link:hover { background: var(--layer-hover); color: var(--link-hover); }
.vse-dark .wp-block-button__link:active, .vse-cta-box .wp-block-button__link:active { background: var(--layer-selected); }
.vse-dark :focus-visible, .vse-cta-box :focus-visible { outline-color: var(--text-inverse); }

/* ==========================================================
   9. FORM (vse-field, vse-input, vse-choice)
   ========================================================== */
.wpcf7 label { display: block; font: 600 14px/1.4 var(--font-text); color: var(--text-primary); margin-bottom: var(--space-5); }
.vse-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5) var(--space-4); }
.vse-f { min-width: 0; }
.vse-f--full { grid-column: 1 / -1; }
.vse-f > label, .vse-f-label { display: block; font: 600 14px/1.4 var(--font-text); color: var(--text-primary); margin: 0 0 var(--space-2); }
.vse-f label em { font-style: normal; font-weight: 400; color: var(--text-helper); margin-left: var(--space-1); }
.vse-f .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 select, .wpcf7 textarea,
.vse-form input[type=text], .vse-form input[type=email], .vse-form input[type=tel], .vse-form select, .vse-form textarea {
  box-sizing: border-box; width: 100%; min-height: 48px; margin: 0; padding: 12px 16px;
  font: 400 16px/1.4 var(--font-text); color: var(--text-primary);
  background: var(--field-01); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color 120ms;
}
.vse-form select, .wpcf7 select {
  -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: none;
}
.vse-form .wpcf7-form-control-wrap:has(select), .vse-f:has(> select) { position: relative; }
.vse-form .wpcf7-form-control-wrap:has(select)::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none;
  background: var(--icon-secondary); -webkit-mask: var(--vse-mask-chevron) center / contain no-repeat; mask: var(--vse-mask-chevron) center / contain no-repeat;
}
.vse-form textarea, .wpcf7 textarea { min-height: 120px; resize: vertical; }
.vse-form input::placeholder, .vse-form textarea::placeholder, .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: var(--text-helper); opacity: 1; }
.vse-form input:hover, .vse-form select:hover, .vse-form textarea:hover,
.wpcf7 input:hover, .wpcf7 select:hover, .wpcf7 textarea:hover { border-color: var(--text-primary); }
.vse-form input:focus-visible, .vse-form select:focus-visible, .vse-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.vse-f-hint { display: block; font-size: 13px; line-height: 1.5; color: var(--text-helper); margin-top: var(--space-2); }

/* Lỗi: viền support-error + thông báo text-error */
.wpcf7 .wpcf7-not-valid, .vse-form [aria-invalid="true"] { border-color: var(--support-error) !important; }
.wpcf7-not-valid-tip { display: block; color: var(--text-error); font-size: 13px; margin-top: var(--space-2); }

/* Ô tải tệp */
.vse-form input[type=file] {
  box-sizing: border-box; width: 100%; font-size: 14px; color: var(--text-secondary);
  padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); background: var(--layer-02); cursor: pointer;
}
.vse-form input[type=file]::file-selector-button {
  font: 600 14px/1 var(--font-text); color: var(--link-primary); background: transparent;
  border: 1px solid var(--border-interactive); border-radius: var(--radius-sm);
  min-height: 40px; padding: 0 var(--space-4); margin-right: var(--space-3); cursor: pointer;
}
.vse-form input[type=file]::file-selector-button:hover { background: var(--layer-hover); }

/* Radio (vse-choice): ô chọn chuẩn 24px, accent interactive, dòng cao 48px */
.vse-seg .wpcf7-radio, .wpcf7-radio.vse-seg { display: flex; flex-wrap: wrap; gap: 0 var(--space-6); }
.vse-seg .wpcf7-list-item, .wpcf7 .wpcf7-radio .wpcf7-list-item { margin: 0 !important; display: inline-flex; }
.vse-seg .wpcf7-list-item label, .wpcf7 .wpcf7-radio label {
  display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; margin: 0;
  font: 400 16px/1.4 var(--font-text); color: var(--text-primary); cursor: pointer;
}
.vse-seg .wpcf7-list-item input, .wpcf7 .wpcf7-radio input { width: 24px; height: 24px; margin: 0; accent-color: var(--interactive); }

/* Ô đồng ý (checkbox) */
.vse-f--accept { font-size: 14px; color: var(--text-secondary); }
.vse-f--accept .wpcf7-list-item { margin: 0; }
.vse-f--accept label { display: flex; gap: var(--space-3); align-items: flex-start; min-height: 48px; padding-top: var(--space-3); font: 400 14px/1.5 var(--font-text); color: var(--text-primary); cursor: pointer; }
.vse-f--accept input[type=checkbox] { width: 24px; height: 24px; margin: 0; accent-color: var(--interactive); flex: none; }

/* Nút gửi */
.wpcf7 input[type=submit], .vse-form .vse-submit, .vse-form input[type=submit] {
  width: 100%; min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--interactive); color: var(--text-on-color); font: 600 16px/1 var(--font-text); transition: background 120ms;
}
.wpcf7 input[type=submit]:hover, .vse-form .vse-submit:hover { background: var(--interactive-hover); }
.wpcf7 input[type=submit]:active, .vse-form .vse-submit:active { background: var(--interactive-active); }
.wpcf7 input[type=submit]:disabled, .vse-form .vse-submit:disabled { background: var(--background-disabled); color: var(--text-disabled); cursor: not-allowed; }
.vse-form .wpcf7-spinner { display: none; }
.wpcf7 form.submitting .vse-form .wpcf7-spinner { display: block; margin: var(--space-3) auto 0; }

/* Thông báo của Contact Form 7 (vse-note) */
.wpcf7 form .wpcf7-response-output { margin: var(--space-5) 0 0 !important; padding: var(--space-5) var(--space-6) !important; border: 0 !important; border-left: 4px solid var(--support-info) !important; background: var(--notification-info); color: var(--text-primary); border-radius: 0; font-size: 15px; line-height: 1.6; }
.wpcf7 form.sent .wpcf7-response-output { border-left-color: var(--support-success) !important; background: var(--notification-success); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-left-color: var(--support-warning) !important; background: var(--notification-warning); }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-left-color: var(--support-error) !important; background: var(--notification-error); }

/* ==========================================================
   10. BẢNG (vse-table)
   ========================================================== */
.wp-block-table { margin: var(--space-6) 0; }
.wp-block-table table { width: 100%; border-collapse: collapse; font: 14px/1.5 var(--font-text); color: var(--text-secondary); background: var(--layer-01); border: 1px solid var(--border-subtle); }
.wp-block-table thead { border: 0 !important; }
.wp-block-table th { text-align: left; font-weight: 600; background: var(--tag-background); color: var(--text-primary); }
.wp-block-table th, .wp-block-table td { padding: var(--space-4) var(--space-3); border: 0 !important; border-bottom: 1px solid var(--border-subtle) !important; vertical-align: top; }
.wp-block-table tbody tr:hover { background: var(--layer-hover); }
.wp-block-table td:first-child { color: var(--text-primary); font-weight: 600; }

/* ==========================================================
   11. BÀI VIẾT, NHÃN (vse-badge), PHÂN TRANG
   ========================================================== */
.vse-post-card { overflow: hidden; height: 100%; transition: border-color 120ms; }
.vse-post-card:hover { border-color: var(--border-strong); }
.vse-post-card .wp-block-post-featured-image { margin: 0; }
.vse-post-card .wp-block-post-featured-image img { aspect-ratio: 16/9; object-fit: cover; display: block; }
.vse-post-card .wp-block-post-title,
.single .vse-post-card .wp-block-post-title { font: 600 20px/1.4 var(--font-display); letter-spacing: -0.01em; margin: var(--space-3) 0 0; }
.vse-post-card .wp-block-post-title a { color: var(--text-primary); text-decoration: none; }
.vse-post-card .wp-block-post-title a:hover { color: var(--link-hover); }
.vse-post-body { padding: var(--space-5); }
.vse-post-body .wp-block-post-excerpt__excerpt { font-size: 16px; line-height: 1.65; color: var(--text-secondary); }
.wp-block-post-terms a {
  position: relative; display: inline-block; padding: var(--space-2) var(--space-3);
  font: 400 12px/1.4 var(--font-mono); color: var(--text-primary);
  background: var(--tag-background); border-radius: var(--radius-sm); text-decoration: none; transition: background 120ms;
}
.wp-block-post-terms a::after { content: ""; position: absolute; inset: -8px 0; }
.wp-block-post-terms a:hover { background: var(--layer-selected); color: var(--text-primary); }
.wp-block-post-date { font-size: 13px; color: var(--text-helper); }
.single .wp-block-post-title { font-size: 48px; line-height: 1.15; letter-spacing: -0.03em; }
.single .wp-block-post-featured-image:not(.vse-post-card *) img { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }
.single .wp-block-post-content, .single .wp-block-post-content p { font-size: 17px; line-height: 1.75; }
.single .wp-block-post-content h2 { margin-top: var(--space-7); font-size: 26px; line-height: 1.35; }
.single .wp-block-post-content h3 { margin-top: var(--space-6); font-size: 20px; }
.single .wp-block-post-content .has-small-font-size { color: var(--text-helper); }
.wp-block-query-pagination a, .wp-block-query-pagination-numbers .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 var(--space-3);
  border-radius: var(--radius-sm); font: 600 14px/1 var(--font-text); color: var(--text-primary);
}
.wp-block-query-pagination a:hover, .wp-block-query-pagination-numbers a.page-numbers:hover { background: var(--layer-hover); }
.wp-block-query-pagination-numbers .current { background: var(--interactive); color: var(--text-on-color); }

/* Dải nền "tint" trong nội dung = layer-01 + viền trên dưới (giữ chữ chú thích đạt 4.5:1) */
.has-tint-background-color { border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }

/* ==========================================================
   12. FOOTER
   ========================================================== */
.vse-footer { background: var(--background); color: var(--text-helper); padding-top: var(--space-8); padding-bottom: var(--space-6); }
.vse-footer p { color: var(--text-helper); font-size: 13px; line-height: 1.6; margin: 0; }
.vse-footer a { color: var(--link-primary); text-decoration: none; }
.vse-footer a:hover { color: var(--link-hover); }
.vse-footer-top { gap: var(--space-5); }
.vse-footer .wp-block-navigation a, .vse-footer .wp-block-navigation .wp-block-navigation-item__content { color: var(--text-primary) !important; }
.vse-footer-bottom { margin-top: var(--space-6) !important; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); gap: var(--space-2) var(--space-5); }
footer.wp-block-template-part { margin-top: 0 !important; }

/* ==========================================================
   13. TRANG LANDING: phần mở đầu, đăng ký, liên hệ
   ========================================================== */
.vse-page-hero { text-align: center; padding-top: var(--space-9) !important; padding-bottom: var(--space-8) !important; background: var(--layer-01); border-bottom: 1px solid var(--border-subtle); }
.vse-page-hero h1 { margin: 0 auto var(--space-5); font-size: 56px; text-wrap: balance; max-width: 860px; }
.vse-page-hero .vse-lead { margin: 0 auto; max-width: 620px; text-wrap: pretty; }
.vse-page-hero .vse-eyebrow { margin-bottom: var(--space-4); }
.vse-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: var(--space-6) 0 0; font-size: 14px; color: var(--text-helper); }
.vse-trust li { position: relative; }
.vse-trust li + li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--border-strong); }
.vse-trust strong { color: var(--text-primary); }

.vse-signup, .vse-contact-main { max-width: 1120px !important; margin: var(--space-7) auto var(--space-9) !important; gap: var(--space-6) !important; align-items: flex-start !important; }
.vse-signup-info h2 { font-size: 26px; line-height: 1.35; margin: 0 0 var(--space-4); }

/* Thẻ giá */
.vse-price-card { padding: var(--space-6); }
.vse-price-label { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--text-helper); margin: 0 0 var(--space-2); }
.vse-price { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.vse-price strong { font: 600 44px/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--text-primary); }
.vse-price span { font-size: 16px; color: var(--text-helper); }
.vse-price-note { font-size: 14px; color: var(--text-helper); margin: var(--space-2) 0 0; }
.vse-price-sub { font: 400 12px/1.4 var(--font-mono) !important; letter-spacing: 0.08em; color: var(--text-helper) !important; margin: var(--space-6) 0 var(--space-4) !important; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }

/* Danh sách có dấu tích */
.vse-checklist { list-style: none; padding: 0; margin: 0 0 var(--space-6); }
.vse-checklist li { position: relative; padding: 0 0 0 var(--space-6); margin: 0 0 var(--space-3); font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.vse-checklist li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px;
  background: var(--support-success); -webkit-mask: var(--vse-mask-check) center / contain no-repeat; mask: var(--vse-mask-check) center / contain no-repeat;
}

/* Hộp chuyển khoản */
.vse-bank { background: var(--layer-02); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.vse-bank-title { font: 600 14px/1.4 var(--font-text); color: var(--text-primary); margin: 0 0 var(--space-3); }
.vse-bank-list { list-style: none; padding: 0; margin: 0; }
.vse-bank-list li { display: grid; grid-template-columns: 112px 1fr; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--border-subtle); font-size: 14px; line-height: 1.45; }
.vse-bank-list li:first-child { border-top: 0; padding-top: 0; }
.vse-bank-list span { color: var(--text-helper); }
.vse-bank-list strong { color: var(--text-primary); font-family: var(--font-mono); font-weight: 400; word-break: break-word; }

/* Thẻ form */
.vse-form-card { padding: var(--space-6) !important; position: sticky; top: calc(var(--vse-header-h) + var(--space-5)); }
.vse-form-card h2 { font-size: 24px !important; margin: 0 0 var(--space-2) !important; }
.vse-form-intro { font-size: 14px; color: var(--text-helper); margin: 0 0 var(--space-6) !important; }

/* Ba bước */
.vse-steps { background: var(--layer-01); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.vse-steps h2 { margin-bottom: var(--space-7) !important; }
.vse-steps-list { counter-reset: buoc; list-style: none; padding: 0; margin: 0 auto !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1120px !important; }
.vse-steps-list li { counter-increment: buoc; padding: var(--space-6); background: var(--background); }
.vse-steps-list li::before {
  content: counter(buoc); display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; margin-bottom: var(--space-5);
  background: var(--interactive); color: var(--text-on-color); font: 600 16px/1 var(--font-display);
}
.vse-steps-list strong { display: block; font: 600 20px/1.4 var(--font-display); color: var(--text-primary); margin-bottom: var(--space-2); }
.vse-steps-list span { display: block; font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* Hỏi đáp mở rộng */
.vse-faq { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.vse-faq h2 { margin-bottom: var(--space-6) !important; }
.vse-faq .wp-block-details { margin: 0 0 var(--space-3); padding: 0; background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.vse-faq .wp-block-details[open] { border-color: var(--border-strong); }
.vse-faq .wp-block-details summary {
  list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; min-height: 48px;
  padding: var(--space-4) 56px var(--space-4) var(--space-5); font: 600 16px/1.4 var(--font-text); color: var(--text-primary);
  border-radius: var(--radius-md); transition: background 120ms;
}
.vse-faq .wp-block-details summary:hover { background: var(--layer-hover); }
.vse-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.vse-faq .wp-block-details summary::after {
  content: ""; position: absolute; right: var(--space-5); top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: var(--icon-primary); -webkit-mask: var(--vse-mask-plus) center / contain no-repeat; mask: var(--vse-mask-plus) center / contain no-repeat;
}
.vse-faq .wp-block-details[open] summary::after { -webkit-mask-image: var(--vse-mask-chevron); mask-image: var(--vse-mask-chevron); transform: rotate(180deg); }
.vse-faq .wp-block-details > p { margin: 0; padding: 0 var(--space-5) var(--space-5); font-size: 16px; line-height: 1.65; color: var(--text-secondary); }

/* Thẻ liên hệ có icon */
.vse-contact-cards { max-width: 1120px !important; margin: var(--space-7) auto var(--space-8) !important; gap: var(--space-5) !important; }
.vse-contact-cards .wp-block-column { padding: var(--space-6); }
.vse-contact-cards .wp-block-column::before {
  content: ""; display: block; width: 28px; height: 28px; margin-bottom: var(--space-5);
  background: var(--icon-primary); -webkit-mask: var(--vse-mask-mail) center / contain no-repeat; mask: var(--vse-mask-mail) center / contain no-repeat;
}
.vse-contact-cards .wp-block-column:nth-child(2)::before { -webkit-mask-image: var(--vse-mask-phone); mask-image: var(--vse-mask-phone); }
.vse-contact-cards .wp-block-column:nth-child(3)::before { -webkit-mask-image: var(--vse-mask-pin); mask-image: var(--vse-mask-pin); }
.vse-contact-cards h3 { font: 400 12px/1.4 var(--font-mono) !important; letter-spacing: 0.08em; color: var(--text-helper) !important; margin: 0 0 var(--space-2) !important; }
.vse-contact-cards p { margin: 0; font: 600 18px/1.45 var(--font-display); color: var(--text-primary); }
.vse-contact-cards p a { color: var(--link-primary); }
.vse-contact-cards p a:hover { color: var(--link-hover); }
.vse-contact-cards .vse-card-note { font: 400 14px/1.5 var(--font-text); color: var(--text-helper); margin-top: var(--space-3); }
.vse-contact-cards .vse-card-note a { color: var(--link-primary); font-weight: 600; }

/* Danh sách định hướng (trang liên hệ) */
.vse-contact-main h2 { font-size: 28px !important; margin: 0 0 var(--space-3) !important; }
.vse-contact-main > .wp-block-column:first-child > p { margin: 0 0 var(--space-5); }
.vse-routes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-subtle); }
.vse-routes li { border-bottom: 1px solid var(--border-subtle); }
.vse-routes li > a, .vse-routes li:not(:has(a)) { display: block; padding: var(--space-4) var(--space-7) var(--space-4) var(--space-2); position: relative; }
.vse-routes li > a { text-decoration: none; min-height: 48px; transition: background 120ms; }
.vse-routes li > a:hover { background: var(--layer-hover); }
.vse-routes li > a::after { content: "\2192"; position: absolute; right: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--link-primary); }
.vse-routes strong { display: block; font: 600 16px/1.4 var(--font-text); color: var(--text-primary); margin-bottom: var(--space-1); }
.vse-routes span { display: block; font-size: 14px; line-height: 1.55; color: var(--text-helper); }

/* ==========================================================
   14. SỰ KIỆN (HTML sinh bởi mu-plugin vse-su-kien.php)
   ========================================================== */
.vse-sk-wrap { max-width: 1120px !important; margin: var(--space-8) auto var(--space-9) !important; }
.vse-sk-h2 { font-size: 28px !important; margin: 0 0 var(--space-5) !important; }
.vse-sk-h2.is-past { margin-top: var(--space-8) !important; color: var(--text-secondary) !important; }
.vse-sk-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.vse-sk-the { display: flex; flex-direction: column; overflow: hidden; transition: border-color 120ms; }
.vse-sk-the:hover { border-color: var(--border-strong); }
.vse-sk-the-anh { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--layer-selected); border-bottom: 1px solid var(--border-subtle); }
.vse-sk-anh { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.vse-sk-anh-trong { background: var(--layer-selected); }
.vse-sk-ngay { position: absolute; left: var(--space-4); top: var(--space-4); display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: var(--space-2) var(--space-3); background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); line-height: 1; }
.vse-sk-ngay b { font: 600 24px/1 var(--font-display); color: var(--text-primary); }
.vse-sk-ngay i { font: 400 11px/1.2 var(--font-mono); font-style: normal; color: var(--text-helper); margin-top: var(--space-1); }
.vse-sk-the.is-past .vse-sk-the-anh img { filter: grayscale(.35); }
.vse-sk-the-than { display: flex; flex-direction: column; flex: 1; padding: var(--space-5); }
.vse-sk-loai { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--text-helper); margin: 0 0 var(--space-2); }
.vse-sk-the h3 { font-size: 20px !important; line-height: 1.4; margin: 0 0 var(--space-3) !important; }
.vse-sk-the h3 a { color: var(--text-primary); }
.vse-sk-the h3 a:hover { color: var(--link-hover); }
.vse-sk-meta { list-style: none; padding: 0; margin: 0 0 var(--space-4); font-size: 14px; color: var(--text-secondary); }
.vse-sk-meta li { position: relative; padding-left: var(--space-5); margin: 0 0 var(--space-2); line-height: 1.5; }
.vse-sk-meta li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; background: var(--icon-secondary); -webkit-mask: var(--vse-mask-clock) center / contain no-repeat; mask: var(--vse-mask-clock) center / contain no-repeat; }
.vse-sk-meta .i-noi::before { -webkit-mask-image: var(--vse-mask-pin); mask-image: var(--vse-mask-pin); }
.vse-sk-the-chan { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.vse-sk-gia-wrap { display: flex; flex-direction: column; line-height: 1.3; }
.vse-sk-gia { font: 600 16px/1.3 var(--font-text); color: var(--text-primary); }
.vse-sk-gia.is-free { color: var(--support-success); }
.vse-sk-gia-tv { font-size: 13px; color: var(--text-helper); }
.vse-sk-nut { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-sm); background: var(--interactive); color: var(--text-on-color) !important; font: 600 14px/1 var(--font-text); white-space: nowrap; text-decoration: none; transition: background 120ms; }
.vse-sk-nut:hover { background: var(--interactive-hover); }
.vse-sk-nut:active { background: var(--interactive-active); }
.vse-sk-tinh { font-size: 13px; color: var(--text-helper); }
.vse-sk-tinh.is-dong { color: var(--support-warning); font-weight: 600; }
.vse-sk-trong { padding: var(--space-6); background: var(--layer-01); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); text-align: center; }
.vse-sk-trong p { margin: 0 0 var(--space-2); }

/* Trang chi tiết sự kiện */
.vse-sk-hero { text-align: left; padding-left: var(--vse-gutter) !important; padding-right: var(--vse-gutter) !important; }
.vse-sk-hero-in { max-width: 1280px; margin: 0 auto; }
.vse-sk-hero h1 { margin: 0 0 var(--space-4) !important; font-size: 48px; text-wrap: balance; max-width: 900px; }
.vse-sk-hero .vse-lead { margin: 0 0 var(--space-5) !important; max-width: 720px; }
.vse-sk-meta-hero { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); font-size: 15px; margin: 0; }
.vse-sk-chi-tiet { max-width: 1280px !important; margin: var(--space-8) auto var(--space-9) !important; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-8); align-items: start; }
.vse-sk-anh-lon { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); margin: 0 0 var(--space-6); }
.vse-sk-noi-dung { font-size: 17px; line-height: 1.75; }
.vse-sk-noi-dung > * + * { margin-top: 1em; }
.vse-sk-the-dk { position: sticky; top: calc(var(--vse-header-h) + var(--space-5)); padding: var(--space-6); }
.vse-sk-gia-lon { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-4); }
.vse-sk-gia-lon .vse-sk-gia { font: 600 32px/1.2 var(--font-display); letter-spacing: -0.02em; }
.vse-sk-gia-lon .vse-sk-gia-tv { font-size: 14px; }
.vse-sk-facts { list-style: none; padding: 0; margin: 0 0 var(--space-5); border-top: 1px solid var(--border-subtle); }
.vse-sk-facts li { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; }
.vse-sk-facts span { color: var(--text-helper); }
.vse-sk-facts strong { color: var(--text-primary); font-weight: 600; }
.vse-sk-form-h { font-size: 20px !important; margin: 0 0 var(--space-4) !important; }
.vse-sk-form { gap: var(--space-4) !important; }
.vse-sk-bay { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
/* Ghi chú (vse-note) */
.vse-sk-loi, .vse-sk-dong, .vse-sk-ok { padding: var(--space-5) var(--space-6); border-left: 4px solid var(--support-info); background: var(--notification-info); color: var(--text-primary); font-size: 15px; line-height: 1.6; border-radius: 0; }
.vse-sk-loi { border-left-color: var(--support-error); background: var(--notification-error); margin: 0 0 var(--space-4); }
.vse-sk-dong p { margin: var(--space-2) 0 0; }
.vse-sk-ok { border-left-color: var(--support-success); background: var(--notification-success); }
.vse-sk-ok p { margin: 0 0 var(--space-3); }
.vse-sk-ok-h { font: 600 18px/1.4 var(--font-display); color: var(--text-primary); }
.vse-sk-qr { display: block; width: 100%; max-width: 280px; height: auto; margin: var(--space-1) auto var(--space-4); border-radius: var(--radius-md); background: var(--layer-01); border: 1px solid var(--border-subtle); }
.vse-sk-ok .vse-bank-list { margin-bottom: var(--space-3); }
.vse-sk-ok-note { font-size: 13px; color: var(--text-helper); margin: 0 !important; }
.vse-home-su-kien .vse-sk-wrap { margin: 0 auto var(--space-9) !important; }
.vse-home-su-kien .vse-sk-h2 { text-align: center; font-size: 32px !important; }
.vse-home-su-kien .vse-sk-luoi { grid-template-columns: repeat(auto-fit, minmax(280px, 360px)); justify-content: center; }

/* ==========================================================
   15. ĐÁP ỨNG (breakpoint 850px và 480px; giữ 1023px cho hero hai cột)
   ========================================================== */
@media (max-width: 1023px) {
  h1, .vse-hero h1 { font-size: 48px; }
  .vse-hero-img img { max-height: 420px; object-fit: cover; }
  .vse-signup, .vse-contact-main { flex-wrap: wrap !important; }
  .vse-signup > .wp-block-column, .vse-contact-main > .wp-block-column { flex-basis: 100% !important; }
  .vse-form-card, .vse-sk-the-dk { position: static; }
  .vse-steps-list { grid-template-columns: 1fr; max-width: 640px !important; }
  .vse-sk-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vse-sk-chi-tiet { grid-template-columns: 1fr; gap: var(--space-6); }
  .vse-stats { grid-template-columns: repeat(3, 1fr); }
  .vse-stats li:nth-child(3) { border-right: 0; }
  .vse-stats li:nth-child(n+4) { border-top: 1px solid var(--border-subtle); }
}
@media (max-width: 850px) {
  h1, .vse-hero h1, .vse-page-hero h1, .vse-sk-hero h1, .single .wp-block-post-title { font-size: 40px; }
  h2 { font-size: 28px; }
  .vse-page-hero { padding-top: var(--space-8) !important; padding-bottom: var(--space-7) !important; }
}
@media (max-width: 600px) {
  .vse-nav-cta { display: none !important; }
}
@media (max-width: 480px) {
  h1, .vse-hero h1, .vse-page-hero h1, .vse-sk-hero h1, .single .wp-block-post-title { font-size: 32px; letter-spacing: -0.02em; }
  h2 { font-size: 24px; }
  .single .wp-block-post-content, .single .wp-block-post-content p, .vse-sk-noi-dung { font-size: 16px; }
  .vse-lead { font-size: 16px; }
  .vse-hero .wp-block-columns { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .vse-cards .wp-block-column, .vse-post-body, .vse-price-card, .vse-form-card, .vse-sk-the-dk, .vse-contact-cards .wp-block-column, .vse-steps-list li { padding: var(--space-5) !important; }
  .vse-values { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
  .vse-values li { padding: var(--space-5); }
  .vse-stats { grid-template-columns: repeat(2, 1fr); }
  .vse-stats li { border-right: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); }
  .vse-stats li:nth-child(2n) { border-right: 0; }
  .vse-stats li:nth-child(-n+2) { border-top: 0; }
  .vse-stats li strong { font-size: 34px; }
  .wp-block-buttons { gap: var(--space-3); flex-direction: column; align-items: stretch; }
  .wp-block-button, .wp-block-button__link { width: 100%; }
  .vse-trust { flex-direction: column; gap: var(--space-1); }
  .vse-trust li + li::before { display: none; }
  .vse-price strong { font-size: 36px; }
  .vse-form { grid-template-columns: 1fr; gap: var(--space-4); }
  .vse-bank-list li { grid-template-columns: 1fr; gap: 2px; }
  .vse-sk-luoi { grid-template-columns: 1fr; }
  .vse-sk-the-chan { flex-wrap: wrap; }
  .vse-sk-meta-hero { flex-direction: column; }
  .vse-wide-photo { margin: var(--space-5) auto var(--space-6) !important; }
  .wp-block-gallery.columns-3 { flex-direction: column; }
  .wp-block-gallery.columns-3 .wp-block-image { width: 100% !important; }
  .vse-steps, .vse-faq { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
}

/* Ghim thanh menu khi cuộn: sticky đặt trên thẻ <header> bọc ngoài của template part
   (khối .vse-header bên trong chỉ cao bằng chính nó nên sticky không có tác dụng). */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }
header.wp-block-template-part .vse-header { position: static; }

/* ==========================================================
   16. DẢI RỘNG TOÀN MÀN HÌNH (trang Về VSE, Tri thức, Chính sách)
   Mỗi dải alignfull, nội dung tối đa 1120px; chữ dài giữ độ rộng dễ đọc.
   ========================================================== */
.vse-band { padding-top: var(--space-9) !important; padding-bottom: var(--space-9) !important; }
.vse-band > :first-child { margin-top: 0 !important; }
.vse-band > :last-child { margin-bottom: 0 !important; }
.vse-band h2 { margin: 0 0 var(--space-4); }
.vse-band:not(.vse-band-prose) h2 + p { max-width: 720px; margin-left: max(0px, calc((100% - 1120px) / 2)) !important; margin-right: auto !important; margin-bottom: var(--space-6); }
.vse-band-stats { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.vse-band-stats .vse-stats { margin: 0 0 var(--space-3); }
.vse-split { gap: var(--space-8) !important; margin-top: 0 !important; margin-bottom: var(--space-7) !important; }
.vse-split-top, .vse-split-top > .wp-block-column { align-items: flex-start !important; align-self: flex-start !important; }
.vse-split .vse-wide-photo { margin: 0 !important; max-width: none !important; }
.vse-split p { max-width: 640px; }
.vse-band-values .vse-values { margin-top: var(--space-6); }
@media (min-width: 1100px) { .vse-band-values .vse-values { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vse-band-work .vse-cards { margin-top: var(--space-5) !important; }
.vse-band-board .vse-people { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.vse-band-more ul { columns: 3 240px; column-gap: var(--space-6); padding-left: var(--space-5); }
.vse-band-prose h2 { margin-top: var(--space-7) !important; font-size: 26px; }
.vse-band-prose h2:first-child { margin-top: 0 !important; }
.vse-band-posts .wp-block-post-template { gap: var(--space-5) !important; }
@media (max-width: 850px) {
  .vse-band { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .vse-split { gap: var(--space-6) !important; }
}
@media (max-width: 781px) {
  .vse-split > .wp-block-column { flex-basis: 100% !important; }
}

/* Màu cho icon site (assets/vse-icons-site.css): chỉ token vai trò */
:root { --vse-ic-color: var(--interactive); --vse-ic-muted: var(--icon-secondary); --vse-ic-success: var(--support-success); }

/* ==========================================================
   17. TRANG VĂN BẢN DÀI (Chính sách): mục lục ghim + cột nội dung
   ========================================================== */
.vse-prose-cols { gap: var(--space-8) !important; margin-top: 0 !important; margin-bottom: 0 !important; align-items: flex-start !important; }
.vse-prose-aside { align-self: stretch !important; }
.vse-toc { position: sticky; top: calc(var(--vse-header-h) + var(--space-5)); padding: var(--space-5); background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.vse-toc-h { font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; color: var(--text-helper); margin: 0 0 var(--space-2); }
.vse-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: muc; }
.vse-toc li { counter-increment: muc; }
.vse-toc a {
  display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3); margin: 0 calc(-1 * var(--space-3));
  font: 600 14px/1.4 var(--font-text); color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm); transition: background 120ms;
}
.vse-toc a:hover { background: var(--layer-hover); color: var(--link-hover); }
.vse-toc a:active { background: var(--layer-selected); }
.vse-prose-main { font-size: 17px; line-height: 1.75; }
.vse-prose-main > * { max-width: 760px; }
.vse-prose-main h2 { scroll-margin-top: calc(var(--vse-header-h) + var(--space-5)); margin-top: var(--space-7) !important; }
.vse-prose-main h2:first-child { margin-top: 0 !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 781px) {
  .vse-prose-cols > .wp-block-column { flex-basis: 100% !important; }
  .vse-toc { position: static; }
  .vse-prose-main { font-size: 16px; }
}

/* Chân trang tối (data-theme="dark" trên .vse-footer): giữ focus nhìn thấy trên nền tối */
.vse-footer :focus-visible { outline-color: var(--focus); }
.vse-footer .wp-block-navigation a:hover { background: var(--layer-hover); color: var(--text-primary) !important; }

/* ==========================================================
   18. HERO TRÀN VIỀN CÓ ẢNH MỜ (13/10/2026)
   Ảnh thật của VSE đặt dưới chữ, mờ và nhạt đi bằng một lớp màu nền đặc
   (không gradient, không bóng). Ảnh từng trang đặt qua biến --vse-hero-img.
   ========================================================== */
.wp-site-blocks > main { margin-block-start: 0 !important; }
main > .alignfull + .alignfull { margin-block-start: 0 !important; }

.vse-page-hero, .vse-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--layer-01); }
.vse-page-hero::before, .vse-hero::before {
  content: ""; position: absolute; inset: -16px; z-index: -2;
  background: var(--vse-hero-img, none) center / cover no-repeat;
  filter: blur(3px) saturate(0.85);
}
.vse-page-hero::after, .vse-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--background); opacity: 0.86;
}
.vse-hero::after { opacity: 0.9; }

.page-id-485 { --vse-hero-img: url("/wp-content/uploads/2026/09/vse-hoi-thao-toan-canh-1536x601.webp"); }
.page-id-189 { --vse-hero-img: url("/wp-content/uploads/2026/10/hero-ve-vse.webp"); }
.page-id-486 { --vse-hero-img: url("/wp-content/uploads/2026/09/vse-workshop-tap-the-1536x864.webp"); }
.page-id-206 { --vse-hero-img: url("/wp-content/uploads/2026/10/hero-lien-he.webp"); }
.page-id-588 { --vse-hero-img: url("/wp-content/uploads/2026/09/vse-toa-dam-workshop-1536x1022.webp"); }
.blog, .archive.category { --vse-hero-img: url("/wp-content/uploads/2026/10/hero-tri-thuc.webp"); }
.post-type-archive-vse_su_kien { --vse-hero-img: url("/wp-content/uploads/2026/10/hero-su-kien.webp"); }
.single-vse_su_kien { --vse-hero-img: url("/wp-content/uploads/2026/09/vse-toa-dam-future-of-oe-1536x1025.webp"); }

.vse-sk-hero::before { filter: blur(10px) saturate(0.7); inset: -40px; }
.vse-sk-hero::after { opacity: 0.9; }

@media (prefers-reduced-transparency: reduce) { .vse-page-hero::after, .vse-hero::after { opacity: 0.94; } }

/* ==========================================================
   19. TRANG SỰ KIỆN: THẺ TÓM TẮT + DẢI ĐĂNG KÝ TRÀN VIỀN (13/10/2026)
   Thẻ bên phải chỉ tóm tắt và dẫn xuống form, không ghim. Form nằm trong
   dải riêng tràn viền dưới nội dung: lời dẫn trái, form hai cột phải.
   ========================================================== */
.vse-sk-hero-cta { margin: var(--space-6) 0 0 !important; }
.vse-sk-tom-tat { padding: var(--space-6); }
.vse-sk-tom-tat .vse-sk-facts { margin-bottom: var(--space-5); }
.vse-sk-nut-rong { display: flex; width: 100%; box-sizing: border-box; }
.vse-sk-tom-tat .vse-sk-dong { margin: 0; }

.vse-sk-dk-band { margin-block: 0 !important; padding: var(--space-9) var(--vse-gutter) !important; background: var(--layer-01); border-top: 1px solid var(--border-subtle); scroll-margin-top: var(--vse-header-h); }
.vse-sk-dk-in { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.vse-sk-dk-dan h2 { margin: 0 0 var(--space-5) !important; font-size: 32px !important; line-height: 1.25; }
.vse-sk-dk-diem { list-style: none; padding: 0; margin: 0 0 var(--space-5); border-top: 1px solid var(--border-subtle); }
.vse-sk-dk-diem li { position: relative; padding: var(--space-3) 0 var(--space-3) var(--space-6); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-weight: 600; font-size: 15px; }
.vse-sk-dk-diem li::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--vse-ic-color); -webkit-mask: url("assets/icons/svg/clock.svg") center / contain no-repeat; mask: url("assets/icons/svg/clock.svg") center / contain no-repeat; }
.vse-sk-dk-diem li:nth-child(2)::before { -webkit-mask-image: url("assets/icons/svg/monitor-play.svg"); mask-image: url("assets/icons/svg/monitor-play.svg"); }
.vse-sk-dk-diem li:nth-child(3)::before { -webkit-mask-image: url("assets/icons/svg/ticket.svg"); mask-image: url("assets/icons/svg/ticket.svg"); }
.vse-sk-dk-note { font-size: 15px; color: var(--text-secondary); margin: 0; }
.vse-sk-dk-the { padding: var(--space-7); background: var(--background); }
.vse-sk-dk-the .vse-sk-form { gap: var(--space-5) var(--space-4) !important; }
.vse-sk-gui { width: 100%; box-sizing: border-box; }
.vse-sk-dk-the .vse-sk-ok, .vse-sk-dk-the .vse-sk-dong { margin: 0; }

@media (max-width: 1023px) {
  .vse-sk-chi-tiet { grid-template-columns: 1fr; gap: var(--space-6); }
  .vse-sk-dk-in { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 600px) {
  .vse-sk-dk-band { padding-top: var(--space-7) !important; padding-bottom: var(--space-7) !important; }
  .vse-sk-dk-the, .vse-sk-tom-tat { padding: var(--space-5); }
  .vse-sk-dk-the .vse-sk-form { grid-template-columns: 1fr; }
  .vse-sk-dk-dan h2 { font-size: 26px !important; }
}

/* ==========================================================
   20. TRANG ĐỌC BÀI TRI THỨC (13/10/2026, đi cùng mu-plugin vse-bai-viet.php)
   Khung 1120px: cột bài 720px + mục lục ghim 280px. Component VSE:
   Note (info, success), Card, Table, Badge; icon VSE qua mask.
   ========================================================== */
.single main.wp-block-group { padding-top: var(--space-7) !important; }
.vse-bai-dau.alignwide, .single .vse-bai-anh.alignwide, .vse-bai-luoi.alignwide, .single .vse-bai-cta.alignwide { max-width: 1120px !important; }
.single .wp-block-query.alignwide, .single h3.alignwide { max-width: 1120px !important; }

/* Thanh tiến độ đọc */
.vse-bai-tien-do { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 100; pointer-events: none; }
.vse-bai-tien-do span { display: block; height: 100%; background: var(--interactive); transform-origin: 0 50%; transform: scaleX(0); }
.admin-bar .vse-bai-tien-do { top: 32px; }

/* Đầu bài */
.vse-bai-dau > * { max-width: 720px; }
.vse-bai-duong { display: flex; flex-wrap: wrap; gap: var(--space-2); font: 400 13px/1.4 var(--font-mono); color: var(--text-helper); margin: 0 0 var(--space-5); }
.vse-bai-duong a { color: var(--text-secondary); text-decoration: none; }
.vse-bai-duong a:hover { color: var(--link-hover); text-decoration: underline; }
.vse-bai-loai { margin: 0 0 var(--space-4); }
.vse-bai-loai a { display: inline-block; padding: var(--space-1) var(--space-3); font: 400 12px/1.6 var(--font-mono); letter-spacing: 0.04em; color: var(--text-primary); background: var(--tag-background); border-radius: var(--radius-sm); text-decoration: none; }
.vse-bai-loai a:hover { background: var(--layer-selected); }
.vse-bai-tieu-de { margin: 0 0 var(--space-5) !important; font-size: 48px; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.vse-bai-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); list-style: none; padding: 0; margin: 0 0 var(--space-7); font-size: 14px; color: var(--text-secondary); }
.vse-bai-meta li { display: inline-flex; align-items: center; gap: var(--space-2); }
.vse-bai-meta li::before { content: ""; width: 16px; height: 16px; flex: none; background: var(--icon-secondary); -webkit-mask: url("assets/icons/svg/calendar.svg") center / contain no-repeat; mask: url("assets/icons/svg/calendar.svg") center / contain no-repeat; }
.vse-bai-meta .i-doc::before { -webkit-mask-image: url("assets/icons/svg/clock.svg"); mask-image: url("assets/icons/svg/clock.svg"); }
.vse-bai-meta .i-vse::before { -webkit-mask-image: url("assets/icons/svg/users-round.svg"); mask-image: url("assets/icons/svg/users-round.svg"); }
.single .vse-bai-anh { margin: 0 auto var(--space-8) !important; }
.single .vse-bai-anh img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); }

/* Lưới: bài + mục lục */
.vse-bai-luoi { display: grid; grid-template-columns: minmax(0, 720px) 280px; justify-content: space-between; gap: var(--space-8); align-items: start; margin-bottom: var(--space-8) !important; }
.vse-bai-luoi.is-khong-muc-luc { grid-template-columns: minmax(0, 720px); }
.vse-bai-cot { min-width: 0; }
.vse-bai-cot > .wp-block-post-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.vse-bai-cot .wp-block-post-content, .vse-bai-cot .wp-block-post-content p, .vse-bai-cot li { font-size: 18px; line-height: 1.75; color: var(--text-secondary); }
.vse-bai-cot strong { color: var(--text-primary); font-weight: 600; }
.vse-bai-cot a:not([class]) { color: var(--link-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vse-bai-cot a:not([class]):hover { color: var(--link-hover); text-decoration-thickness: 2px; }

/* Mục lục ghim */
.vse-bai-muc-luc { position: sticky; top: calc(var(--vse-header-h) + var(--space-5)); max-height: calc(100vh - var(--vse-header-h) - var(--space-7)); overflow: auto; padding: var(--space-5); background: var(--layer-01); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.vse-bai-muc-luc summary { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); cursor: pointer; list-style: none; }
.vse-bai-muc-luc summary::-webkit-details-marker { display: none; }
.vse-bai-muc-luc summary::before { content: ""; width: 16px; height: 16px; background: var(--icon-secondary); -webkit-mask: url("assets/icons/svg/list-checks.svg") center / contain no-repeat; mask: url("assets/icons/svg/list-checks.svg") center / contain no-repeat; }
.vse-bai-muc-luc ol { list-style: none; counter-reset: ml; margin: var(--space-3) 0 0; padding: 0; border-left: 1px solid var(--border-subtle); }
.vse-bai-muc-luc li { counter-increment: ml; margin: 0; }
.vse-bai-muc-luc a { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-2); margin-left: -1px; padding: var(--space-2) var(--space-3); border-left: 2px solid transparent; font-size: 14px; line-height: 1.45; color: var(--text-secondary); text-decoration: none; }
.vse-bai-muc-luc a::before { content: counter(ml, decimal-leading-zero); font: 400 12px/1.7 var(--font-mono); color: var(--text-helper); }
.vse-bai-muc-luc a:hover { color: var(--text-primary); background: var(--layer-hover); }
.vse-bai-muc-luc a[aria-current] { color: var(--text-primary); font-weight: 600; border-left-color: var(--interactive); }
.vse-bai-muc-luc a[aria-current]::before { color: var(--interactive); }

/* Mở bài */
.vse-bai-cot p.vse-bai-hashtag { display: inline-block; margin: 0 0 var(--space-4) !important; padding: var(--space-1) var(--space-3); font: 400 13px/1.6 var(--font-mono); color: var(--interactive); border: 1px solid var(--border-interactive); border-radius: var(--radius-sm); }
.vse-bai-cot p.vse-bai-dan { font-size: 21px; line-height: 1.6; color: var(--text-primary); margin-bottom: var(--space-6); }

/* Tiêu đề phần: số thứ tự mono + vạch trên */
.vse-bai-cot { counter-reset: phan; }
.vse-bai-cot h2 { margin: var(--space-8) 0 var(--space-4) !important; font-size: 28px; line-height: 1.3; letter-spacing: -0.02em; scroll-margin-top: calc(var(--vse-header-h) + var(--space-5)); }
.vse-bai-cot h2.vse-bai-so { counter-increment: phan; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.vse-bai-cot h2.vse-bai-so::before { content: counter(phan, decimal-leading-zero); display: block; margin-bottom: var(--space-2); font: 400 13px/1 var(--font-mono); letter-spacing: 0.08em; color: var(--interactive); }
.vse-bai-cot h3 { margin: var(--space-6) 0 var(--space-3) !important; font-size: 21px; line-height: 1.4; }

/* Danh sách */
.vse-bai-cot ol.wp-block-list { list-style: none; counter-reset: ds; padding-left: 0; }
.vse-bai-cot ol.wp-block-list > li { counter-increment: ds; position: relative; padding-left: 48px; margin-bottom: var(--space-4); }
.vse-bai-cot ol.wp-block-list > li::before { content: counter(ds); position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 32px; height: 32px; font: 600 14px/1 var(--font-mono); color: var(--text-on-color); background: var(--interactive); border-radius: var(--radius-sm); }
.vse-bai-cot ul.wp-block-list { list-style: none; padding-left: 0; }
.vse-bai-cot ul.wp-block-list > li { position: relative; padding-left: 28px; margin-bottom: var(--space-3); }
.vse-bai-cot ul.wp-block-list > li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 8px; height: 8px; background: var(--interactive); border-radius: 2px; }

/* Bảng (component Table) */
.vse-bai-bang { margin: var(--space-6) 0 !important; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--layer-01); }
.vse-bai-bang:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.vse-bai-bang table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.vse-bai-bang th, .vse-bai-bang thead td { padding: var(--space-3) var(--space-4); text-align: left; font: 600 14px/1.4 var(--font-text); color: var(--text-primary); background: var(--layer-02); border: 0; border-bottom: 1px solid var(--border-strong); }
.vse-bai-bang td { padding: var(--space-3) var(--space-4); vertical-align: top; border: 0; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); }
.vse-bai-bang tr:last-child td { border-bottom: 0; }
.vse-bai-bang tbody td:first-child { color: var(--text-primary); font-weight: 600; }
.vse-bai-bang figcaption { padding: var(--space-3) var(--space-4); font-size: 13px; color: var(--text-helper); }

/* Note: Lật ngược giả định (info), Hình dung (lightbulb), Một việc làm được (success) */
.vse-bai-note { position: relative; margin: var(--space-7) 0 !important; padding: var(--space-6) var(--space-6) var(--space-5) calc(var(--space-6) + 40px); background: var(--notification-info); border-left: 4px solid var(--support-info); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.vse-bai-note::before { content: ""; position: absolute; left: var(--space-6); top: calc(var(--space-6) + 4px); width: 24px; height: 24px; background: var(--support-info); -webkit-mask: url("assets/icons/svg/refresh-cw.svg") center / contain no-repeat; mask: url("assets/icons/svg/refresh-cw.svg") center / contain no-repeat; }
.vse-bai-note > h2, .vse-bai-note > h3 { margin: 0 0 var(--space-3) !important; padding: 0 !important; border: 0 !important; font-size: 21px !important; }
.vse-bai-note > :last-child { margin-bottom: 0 !important; }
.vse-bai-note p, .vse-bai-note li { color: var(--text-primary) !important; }
.vse-bai-note--hinh { background: var(--layer-01); border: 1px solid var(--border-subtle); border-left: 4px solid var(--interactive); }
.vse-bai-note--hinh::before { background: var(--interactive); -webkit-mask-image: url("assets/icons/svg/lightbulb.svg"); mask-image: url("assets/icons/svg/lightbulb.svg"); }
.vse-bai-note--viec { background: var(--notification-success); border-left-color: var(--support-success); }
.vse-bai-note--viec::before { background: var(--support-success); -webkit-mask-image: url("assets/icons/svg/target.svg"); mask-image: url("assets/icons/svg/target.svg"); }
.vse-bai-note--viec > h3::before { content: "Làm ngay"; display: block; margin-bottom: var(--space-1); font: 400 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--support-success); }

/* Card: Góc nhìn VSE */
.vse-bai-goc-nhin { margin: var(--space-8) 0 !important; padding: var(--space-6); background: var(--layer-01); border: 1px solid var(--border-subtle); border-top: 4px solid var(--interactive); border-radius: var(--radius-lg); }
.vse-bai-goc-nhin > h2 { margin: 0 0 var(--space-4) !important; padding: 0 !important; border: 0 !important; font-size: 24px !important; }
.vse-bai-goc-nhin > :last-child { margin-bottom: 0 !important; }
.vse-bai-goc-nhin .vse-bai-note { margin: var(--space-5) 0 0 !important; }

/* Đọc tiếp */
.vse-bai-doc-tiep { margin: var(--space-6) 0 0 !important; }
.vse-bai-doc-tiep > h3 { font: 400 12px/1.4 var(--font-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); margin: 0 0 var(--space-3) !important; }
.vse-bai-doc-tiep ul.wp-block-list { border-top: 1px solid var(--border-subtle); margin: 0; }
.vse-bai-doc-tiep ul.wp-block-list > li { padding: 0; margin: 0; border-bottom: 1px solid var(--border-subtle); }
.vse-bai-doc-tiep ul.wp-block-list > li::before { display: none; }
.vse-bai-doc-tiep li a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 48px; padding: var(--space-3) 0; font: 600 17px/1.45 var(--font-display) !important; color: var(--text-primary) !important; text-decoration: none !important; }
.vse-bai-doc-tiep li a::after { content: ""; width: 20px; height: 20px; flex: none; background: var(--interactive); -webkit-mask: url("assets/icons/svg/arrow-right.svg") center / contain no-repeat; mask: url("assets/icons/svg/arrow-right.svg") center / contain no-repeat; transition: transform 120ms; }
.vse-bai-doc-tiep li a:hover { color: var(--link-hover) !important; }
.vse-bai-doc-tiep li a:hover::after { transform: translateX(4px); }

/* Hỏi đáp đóng mở */
.vse-bai-hoi-dap { margin-top: var(--space-8) !important; }
.vse-bai-hoi { border-bottom: 1px solid var(--border-subtle); }
.vse-bai-hoi-dap > h2 + .vse-bai-hoi { border-top: 1px solid var(--border-subtle); }
.vse-bai-hoi summary { position: relative; display: block; padding: var(--space-4) var(--space-7) var(--space-4) 0; cursor: pointer; list-style: none; }
.vse-bai-hoi summary::-webkit-details-marker { display: none; }
.vse-bai-hoi summary h3 { margin: 0 !important; font-size: 18px !important; line-height: 1.45; }
.vse-bai-hoi summary::after { content: ""; position: absolute; right: var(--space-2); top: 50%; width: 20px; height: 20px; margin-top: -10px; background: var(--interactive); -webkit-mask: url("assets/icons/svg/plus.svg") center / contain no-repeat; mask: url("assets/icons/svg/plus.svg") center / contain no-repeat; }
.vse-bai-hoi[open] summary::after { -webkit-mask-image: url("assets/icons/svg/minus.svg"); mask-image: url("assets/icons/svg/minus.svg"); }
.vse-bai-hoi summary:hover h3 { color: var(--link-hover); }
.vse-bai-hoi summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.vse-bai-dap { padding: 0 0 var(--space-4); }
.vse-bai-dap > :last-child { margin-bottom: 0; }

/* Nguồn */
.vse-bai-nguon, .vse-bai-cot p.vse-bai-nguon-dong { position: relative; margin: var(--space-7) 0 0 !important; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + 28px); background: var(--layer-02); border-radius: var(--radius-md); font-size: 14px !important; line-height: 1.6 !important; color: var(--text-secondary); }
.vse-bai-nguon::before, .vse-bai-nguon-dong::before { content: ""; position: absolute; left: var(--space-5); top: calc(var(--space-4) + 3px); width: 18px; height: 18px; background: var(--icon-secondary); -webkit-mask: url("assets/icons/svg/book-open.svg") center / contain no-repeat; mask: url("assets/icons/svg/book-open.svg") center / contain no-repeat; }
.vse-bai-nguon > h2 { margin: 0 0 var(--space-2) !important; padding: 0 !important; border: 0 !important; font: 400 12px/1.4 var(--font-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper); }
.vse-bai-nguon p, .vse-bai-nguon li { font-size: 14px !important; line-height: 1.6 !important; }
.vse-bai-nguon ul.wp-block-list > li { padding-left: 16px; margin-bottom: var(--space-1); }
.vse-bai-nguon ul.wp-block-list > li::before { width: 5px; height: 5px; left: 0; top: 0.65em; background: var(--icon-secondary); }

/* Chia sẻ */
.vse-bai-chia-se { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-8) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.vse-bai-chia-se p { margin: 0 !important; font: 400 12px/1.4 var(--font-mono) !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-helper) !important; }
.vse-bai-chia-se ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.vse-bai-chia-se li { margin: 0; padding: 0; }
.vse-bai-chia-se li::before { display: none !important; }
.vse-bai-chia-se a, .vse-bai-chia-se button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-4); font: 600 14px/1 var(--font-text); color: var(--text-primary); background: var(--layer-01); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; transition: background 120ms; }
.vse-bai-chia-se a:hover, .vse-bai-chia-se button:hover { background: var(--layer-hover); }
.vse-bai-chia-se a:active, .vse-bai-chia-se button:active { background: var(--layer-selected); }
.vse-bai-chia-se a::before, .vse-bai-chia-se button::before { content: ""; width: 16px; height: 16px; background: var(--interactive); -webkit-mask: url("assets/icons/svg/share-2.svg") center / contain no-repeat; mask: url("assets/icons/svg/share-2.svg") center / contain no-repeat; }
.vse-bai-chia-se .i-chep::before { -webkit-mask-image: url("assets/icons/svg/link.svg"); mask-image: url("assets/icons/svg/link.svg"); }

/* CTA cuối bài */
.single .vse-bai-cta { margin-top: 0 !important; padding: var(--space-7) !important; }

@media (max-width: 1023px) {
  .vse-bai-luoi { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .vse-bai-muc-luc { position: static; max-height: none; order: -1; padding: var(--space-3) var(--space-4); }
  .vse-bai-muc-luc summary { min-height: 40px; }
  .vse-bai-dau > * { max-width: none; }
}
@media (max-width: 600px) {
  .vse-bai-tieu-de { font-size: 32px; letter-spacing: -0.02em; }
  .vse-bai-cot .wp-block-post-content, .vse-bai-cot .wp-block-post-content p, .vse-bai-cot li { font-size: 17px; }
  .vse-bai-cot p.vse-bai-dan { font-size: 19px; }
  .vse-bai-cot h2 { font-size: 24px; margin-top: var(--space-7) !important; }
  .vse-bai-note { padding: var(--space-5) var(--space-5) var(--space-4) calc(var(--space-5) + 36px); }
  .vse-bai-note::before { left: var(--space-5); top: calc(var(--space-5) + 4px); }
  .vse-bai-goc-nhin, .single .vse-bai-cta { padding: var(--space-5) !important; }
  .single .vse-bai-anh { margin-bottom: var(--space-6) !important; }
}
@media (prefers-reduced-motion: reduce) { .vse-bai-doc-tiep li a::after { transition: none; } }
.single .vse-bai-cta > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 720px !important; }