/* =====================================================================
   VNNV components — nạp sau style.css (token --vn-* nằm ở style.css).
   Quy ước: components.md. Chỉ dùng token, không mã màu thô. Tiền tố vn-, BEM.
   Mục lục: 1 Nền tảng · 2 Nút · 3 Eyebrow + Section · 4 Header · 5 Dải CTA · 6 Footer · 7 Nút nổi
   · 8 Hero trang chủ · 9 Thanh số liệu · 10 Card dịch vụ + ô dịch vụ · 11 Khối chia đôi + checklist + feature
   · 12 Quy trình · 13 Dải khách hàng (logo chạy, case study) · 14 Card tin tức
   · 15 Hero trang con + breadcrumb · 16 Lưới ảnh · 17 Bài viết (vn-prose) + khối khuyến mãi + card
   · 18 Modal + ô nhập
   ===================================================================== */

/* ---------- 1. Nền tảng ---------- */
html {
  scroll-padding-top: calc(var(--vn-header-h-mobile) + var(--vn-space-3)); /* header dính không che đích anchor */
}
@media (min-width: 992px) {
  html { scroll-padding-top: calc(var(--vn-header-h) + var(--vn-space-3)); }
}

/* ---------- 2. Nút ---------- */
.vn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vn-space-2);
  min-height: var(--vn-btn-h);
  padding: 0 var(--vn-space-5);
  border: 2px solid transparent;
  border-radius: var(--vn-radius-pill);
  font-family: inherit;
  font-size: var(--vn-fs-body);
  font-weight: var(--vn-fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--vn-dur) var(--vn-ease), color var(--vn-dur) var(--vn-ease),
    border-color var(--vn-dur) var(--vn-ease), box-shadow var(--vn-dur) var(--vn-ease);
}
.vn-btn .bi-arrow-right { transition: transform var(--vn-dur) var(--vn-ease); }
.vn-btn:hover .bi-arrow-right { transform: translateX(2px); }
.vn-btn--sm {
  min-height: var(--vn-btn-h-sm);
  padding: 0 var(--vn-space-4);
  font-size: var(--vn-fs-sm);
}
.vn-btn--primary { background: var(--vn-gold-500); border-color: var(--vn-gold-500); color: var(--vn-navy-900); }
.vn-btn--primary:hover,
.vn-btn--primary:focus-visible { background: var(--vn-gold-600); border-color: var(--vn-gold-600); color: var(--vn-navy-900); }
.vn-btn--outline { background: transparent; border-color: var(--vn-navy-900); color: var(--vn-navy-900); }
.vn-btn--outline:hover,
.vn-btn--outline:focus-visible { background: var(--vn-navy-900); color: var(--vn-text-on-dark); }
.vn-btn--outline-light { background: transparent; border-color: var(--vn-text-on-dark); color: var(--vn-text-on-dark); }
.vn-btn--outline-light:hover,
.vn-btn--outline-light:focus-visible { background: var(--vn-white); color: var(--vn-navy-900); }
.vn-btn--navy { background: var(--vn-navy-900); border-color: var(--vn-navy-900); color: var(--vn-text-on-dark); }
.vn-btn--navy:hover,
.vn-btn--navy:focus-visible { background: var(--vn-navy-800); border-color: var(--vn-navy-800); color: var(--vn-text-on-dark); }

.vn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vn-space-2);
  min-height: var(--vn-tap);
  color: var(--vn-navy-900);
  font-weight: var(--vn-fw-semibold);
  text-decoration: none;
}
.vn-link-arrow .bi { transition: transform var(--vn-dur) var(--vn-ease); }
.vn-link-arrow:hover { color: var(--vn-gold-700); }
.vn-link-arrow:hover .bi { transform: translateX(2px); }

/* ---------- 3. Eyebrow + Section ---------- */
.vn-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--vn-space-2);
  margin: 0 0 var(--vn-space-2);
  color: var(--vn-gold-700);
  font-size: var(--vn-fs-xs);
  font-weight: var(--vn-fw-semibold);
  letter-spacing: var(--vn-ls-eyebrow);
  text-transform: uppercase;
}
.vn-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--vn-gold-500);
}

.vn-section { padding-block: var(--vn-section-y); background: var(--vn-surface); }
.vn-section--alt { background: var(--vn-surface-alt); }
.vn-section--cream { background: var(--vn-surface-cream); }
.vn-section--dark {
  background: var(--vn-gradient-dark);
  color: var(--vn-text-on-dark-muted);
}
.vn-section--dark .vn-eyebrow { color: var(--vn-gold-500); }

.vn-section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vn-space-2);
  margin-bottom: var(--vn-space-6);
}
.vn-section-heading__title { text-wrap: balance; margin: 0; font-size: var(--vn-fs-h2); }
.vn-section-heading__text { min-width: 0; }
.vn-section-heading > .vn-link-arrow { flex-shrink: 0; white-space: nowrap; }
.vn-section-heading__sub { max-width: 65ch; margin: var(--vn-space-2) 0 0; color: var(--vn-text-body); }
.vn-section-heading--center { align-items: center; text-align: center; }
.vn-section-heading--center .vn-section-heading__text { display: flex; flex-direction: column; align-items: center; }
.vn-section-heading--center .vn-eyebrow { justify-content: center; }
.vn-section-heading--dark .vn-section-heading__title { color: var(--vn-text-on-dark); }
.vn-section-heading--dark .vn-section-heading__sub { color: var(--vn-text-on-dark-muted); }
@media (min-width: 992px) {
  .vn-section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .vn-section-heading--center { flex-direction: column; align-items: center; }
}

/* ---------- 4. Header ---------- */
.vn-header {
  position: sticky;
  top: 0;
  z-index: var(--vn-z-header);
  background: var(--vn-white);
  border-bottom: 1px solid var(--vn-border);
  transition: box-shadow var(--vn-dur) var(--vn-ease);
}
.vn-header.is-scrolled { box-shadow: var(--vn-shadow-sm); }

.vn-header__bar {
  position: relative; /* mốc cho mega-menu */
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  min-height: var(--vn-header-h-mobile);
}
.vn-header__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: auto;
}
.vn-header__logo img { width: auto; height: var(--vn-logo-h); }

/* Mobile: nút gọi tròn + hamburger */
.vn-header__call,
.vn-header__toggler,
.vn-header__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vn-tap);
  height: var(--vn-tap);
  padding: 0;
  border: 0;
  border-radius: var(--vn-radius-circle);
  font-size: 1.25rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.vn-header__call { background: var(--vn-navy-900); color: var(--vn-text-on-dark); }
.vn-header__call:hover { background: var(--vn-navy-800); color: var(--vn-text-on-dark); }
.vn-header__toggler,
.vn-header__close { background: transparent; color: var(--vn-navy-900); }
.vn-header__toggler { font-size: 1.75rem; }
.vn-header__toggler:hover,
.vn-header__toggler:focus,
.vn-header__close:hover,
.vn-header__close:focus { background: var(--vn-surface-alt); color: var(--vn-navy-900); }

/* Offcanvas (< 992px) */
.vn-header__panel.offcanvas-end {
  width: min(var(--vn-offcanvas-w), 100vw);
  border-left: 0;
  box-shadow: var(--vn-shadow-lg);
  background: var(--vn-white);
}
.vn-header__panel .offcanvas-header {
  min-height: var(--vn-header-h-mobile);
  padding: 0 var(--vn-gutter);
  border-bottom: 1px solid var(--vn-border);
}
.vn-header__panel .offcanvas-title {
  color: var(--vn-text-heading);
  font-size: var(--vn-fs-h4);
  font-weight: var(--vn-fw-bold);
}
.vn-header__panel .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden; /* chỉ danh sách menu cuộn; nút Tư vấn / gọi luôn hiện ở đáy */
}

.vn-nav { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.vn-nav__list { margin: 0; padding: var(--vn-space-2) 0; list-style: none; }
.vn-nav__item { border-bottom: 1px solid var(--vn-border); }
.vn-nav__item--split { display: flex; flex-wrap: wrap; }

.vn-nav__link,
.vn-nav__toggle,
.vn-nav__caret {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--vn-tap);
  padding: 0 var(--vn-gutter);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--vn-text-heading);
  font-family: inherit;
  font-size: var(--vn-fs-body);
  font-weight: var(--vn-fw-medium);
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.vn-nav__link,
.vn-nav__toggle { width: 100%; }
.vn-nav__item--split .vn-nav__link { flex: 1 1 0; width: auto; }
.vn-nav__caret { width: 56px; justify-content: center; border-left: 1px solid var(--vn-border); }
.vn-nav__toggle .bi,
.vn-nav__caret .bi { font-size: 0.875rem; transition: transform var(--vn-dur) var(--vn-ease); }
.is-open > .vn-nav__toggle .bi,
.is-open > .vn-nav__caret .bi { transform: rotate(180deg); }

.vn-nav__link:hover,
.vn-nav__toggle:hover,
.vn-nav__caret:hover { background: var(--vn-surface-alt); color: var(--vn-navy-900); }
.vn-nav__link[aria-current="page"],
.vn-nav__toggle.is-current {
  border-left-color: var(--vn-gold-500); /* trang hiện tại: gạch trái vàng */
  background: var(--vn-surface-alt);
  color: var(--vn-navy-900);
  font-weight: var(--vn-fw-semibold);
}
.vn-nav__item.is-open > .vn-nav__toggle,
.vn-nav__item.is-open > .vn-nav__caret { background: var(--vn-surface-alt); color: var(--vn-navy-900); } /* nhóm đang mở: chỉ đổi nền */
.vn-nav__item:last-child { border-bottom: 0; }

/* Menu con: mặc định ẩn, mobile là khối accordion */
.vn-nav__menu {
  display: none;
  flex: 0 0 100%;
  padding: var(--vn-space-2) var(--vn-gutter) var(--vn-space-4);
  background: var(--vn-surface-alt);
}
.is-open > .vn-nav__menu { display: block; }
.vn-nav__col + .vn-nav__col { margin-top: var(--vn-space-4); }
.vn-nav__col ul { margin: 0; padding: 0; list-style: none; }
.vn-nav__col-title {
  margin: var(--vn-space-2) 0 var(--vn-space-1);
  color: var(--vn-navy-900);
  font-size: var(--vn-fs-sm);
  font-weight: var(--vn-fw-bold);
}
.vn-nav__col-title::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: var(--vn-space-2);
  background: var(--vn-gold-500);
}
.vn-nav__col-title a { color: inherit; text-decoration: none; }
.vn-nav__col-title a:hover { text-decoration: underline; }
.vn-nav__col li a {
  display: flex;
  align-items: center;
  min-height: var(--vn-tap);
  padding: var(--vn-space-1) var(--vn-space-3);
  border-radius: var(--vn-radius-sm);
  color: var(--vn-text-body);
  font-size: var(--vn-fs-body);
  line-height: 1.35;
  text-decoration: none;
}
.vn-nav__col li a:hover { background: var(--vn-white); color: var(--vn-navy-900); }
.vn-nav__col li a[aria-current="page"] {
  background: var(--vn-white);
  color: var(--vn-navy-900);
  font-weight: var(--vn-fw-semibold);
  box-shadow: inset 3px 0 0 var(--vn-gold-500);
}

/* Nhóm bấm để mở (Giải pháp QR Code): một hàng nút, danh sách con thụt vào, có vạch dọc, đóng sẵn */
.vn-nav__subtoggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-2);
  width: 100%;
  min-height: var(--vn-tap);
  padding: var(--vn-space-1) var(--vn-space-3);
  border: 0;
  border-radius: var(--vn-radius-sm);
  background: transparent;
  color: var(--vn-text-body);
  font-size: var(--vn-fs-body);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.vn-nav__subtoggle:hover,
.vn-nav__subtoggle:focus-visible { background: var(--vn-white); color: var(--vn-navy-900); } /* style.css có button:hover đổi chữ sang trắng */
.vn-nav__subtoggle .bi { flex: none; font-size: 0.875rem; transition: transform var(--vn-dur) var(--vn-ease); }
.vn-nav__has-sub.is-open > .vn-nav__subtoggle .bi { transform: rotate(180deg); }
.vn-nav__col .vn-nav__sub {
  display: none;
  margin: 0 0 var(--vn-space-2) var(--vn-space-3);
  padding-left: var(--vn-space-2);
  border-left: 2px solid var(--vn-border);
}
.vn-nav__has-sub.is-open > .vn-nav__sub { display: block; }

.vn-header__actions {
  display: flex;
  flex-direction: column-reverse; /* mobile: "Tư vấn miễn phí" trên, số điện thoại dưới */
  gap: var(--vn-space-3);
  padding: var(--vn-gutter);
  border-top: 1px solid var(--vn-border);
}
.vn-header__actions .vn-btn { width: 100%; min-height: var(--vn-btn-h); font-size: var(--vn-fs-body); }

/* Desktop (>= 992px): offcanvas thành menu ngang trong thanh header */
@media (min-width: 992px) {
  .vn-header__bar { min-height: var(--vn-header-h); gap: var(--vn-space-4); }
  .vn-header__call,
  .vn-header__toggler,
  .vn-header__close,
  .vn-header__panel .offcanvas-header { display: none; }
  .vn-header__logo { margin-right: 0; }

  .vn-header__panel.offcanvas-end {
    position: static;
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: auto;
    visibility: visible !important;
    transform: none !important;
    transition: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    z-index: auto;
  }
  .vn-header__panel .offcanvas-body {
    flex-direction: row;
    align-items: center;
    gap: var(--vn-space-3);
    overflow: visible;
  }

  .vn-nav { display: flex; flex: 1 1 auto; justify-content: center; overflow: visible; }
  .vn-nav__list { display: flex; align-items: center; padding: 0; }
  .vn-nav__item { position: relative; border-bottom: 0; }
  .vn-nav__item--mega { position: static; } /* mốc là .vn-header__bar */
  .vn-nav__item--split { flex-wrap: nowrap; align-items: center; }

  .vn-nav__link,
  .vn-nav__toggle {
    width: auto;
    gap: var(--vn-space-1);
    min-height: var(--vn-header-h);
    padding: 0 var(--vn-space-2);
    border-left: 0;
    font-size: var(--vn-fs-nav);
    white-space: nowrap;
  }
  .vn-nav__item--split .vn-nav__link { flex: 0 0 auto; padding-right: 0; }
  .vn-nav__caret {
    width: var(--vn-space-6);
    min-height: var(--vn-header-h);
    padding: 0;
    border-left: 0;
  }
  .vn-nav__link:hover,
  .vn-nav__toggle:hover,
  .vn-nav__caret:hover { background: transparent; }
  .vn-nav__link[aria-current="page"],
  .vn-nav__toggle.is-current,
  .vn-nav__item.is-open > .vn-nav__toggle,
  .vn-nav__item.is-open > .vn-nav__caret { background: transparent; }

  /* Gạch chân vàng: hover / đang mở / trang hiện tại */
  .vn-nav__link::after,
  .vn-nav__toggle::after {
    content: "";
    position: absolute;
    left: var(--vn-space-2);
    right: var(--vn-space-2);
    bottom: var(--vn-space-4);
    height: 2px;
    background: var(--vn-gold-500);
    transform: scaleX(0);
    transition: transform var(--vn-dur) var(--vn-ease);
  }
  .vn-nav__item--split .vn-nav__link::after { right: 0; }
  .vn-nav__link:hover::after,
  .vn-nav__toggle:hover::after,
  .vn-nav__item--split:hover .vn-nav__link::after,
  .vn-nav__link[aria-current="page"]::after,
  .vn-nav__toggle.is-current::after,
  .vn-nav__item.is-open > .vn-nav__toggle::after,
  .vn-nav__item--split.is-open .vn-nav__link::after { transform: scaleX(1); }

  /* Dropdown */
  .vn-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--vn-z-dropdown);
    min-width: 280px;
    padding: var(--vn-space-4);
    border: 1px solid var(--vn-border);
    border-radius: 0 0 var(--vn-radius-md) var(--vn-radius-md);
    background: var(--vn-white);
    box-shadow: var(--vn-shadow-lg);
  }
  .vn-nav__menu--mega {
    left: 50%;
    width: min(60rem, 100%);
    padding: var(--vn-space-5);
    transform: translateX(-50%);
  }
  .is-open > .vn-nav__menu--mega { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vn-space-5); }
  .vn-nav__col + .vn-nav__col { margin-top: 0; }
  .vn-nav__col-title { margin-top: 0; }
  .vn-nav__col li a { min-height: 40px; margin-inline: calc(var(--vn-space-3) * -1); font-size: var(--vn-fs-nav); }
  .vn-nav__col li a:hover { background: var(--vn-surface-alt); }
  .vn-nav__subtoggle { min-height: 40px; margin-inline: calc(var(--vn-space-3) * -1); width: calc(100% + var(--vn-space-3) * 2); font-size: var(--vn-fs-nav); }
  .vn-nav__subtoggle:hover,
  .vn-nav__subtoggle:focus-visible { background: var(--vn-surface-alt); color: var(--vn-navy-900); }
  .vn-nav__col li a[aria-current="page"] { background: var(--vn-surface-alt); }

  .vn-header__actions {
    flex-direction: row;
    flex-shrink: 0;
    padding: 0;
    border-top: 0;
  }
  .vn-header__actions .vn-btn { width: auto; min-height: var(--vn-btn-h-sm); font-size: var(--vn-fs-sm); }
}

/* 992–1199px: chật chỗ — thu gọn, số điện thoại chỉ còn icon (chữ vẫn có cho trình đọc màn hình) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .vn-nav__link,
  .vn-nav__toggle { padding: 0 var(--vn-space-1); font-size: var(--vn-fs-sm); }
  .vn-nav__link::after,
  .vn-nav__toggle::after { left: var(--vn-space-1); right: var(--vn-space-1); }
  .vn-nav__caret { width: var(--vn-space-5); }
  .vn-header__actions .vn-btn--navy { padding: 0; width: var(--vn-btn-h-sm); }
  .vn-header__phone-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}
@media (min-width: 1200px) {
  .vn-header__bar { gap: var(--vn-space-5); }
  .vn-nav__link,
  .vn-nav__toggle { padding: 0 var(--vn-space-3); }
  .vn-nav__link::after,
  .vn-nav__toggle::after { left: var(--vn-space-3); right: var(--vn-space-3); }
  .vn-nav__item--split .vn-nav__link { padding-right: 0; }
}

/* ---------- 5. Dải CTA (components/cta_band.html) ---------- */
.vn-cta-band {
  position: relative;
  padding-block: var(--vn-space-7);
  background: var(--vn-surface-cream);
}
.vn-cta-band__inner {
  display: grid;
  gap: var(--vn-space-5);
}
.vn-cta-band__title { margin: 0 0 var(--vn-space-2); color: var(--vn-text-heading); font-size: var(--vn-fs-h2); }
.vn-cta-band__sub { max-width: 52ch; margin: 0; color: var(--vn-text-body); }
.vn-cta-band__form { display: grid; gap: var(--vn-space-3); }
.vn-cta-band__or { margin: 0 0 var(--vn-space-3); color: var(--vn-text-muted); }
.vn-cta-band__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vn-space-3);
}
.vn-cta-band__actions .vn-btn { padding-inline: var(--vn-space-3); }
@media (min-width: 768px) {
  /* tablet: nút gọi/Zalo bề rộng tự nhiên (không kéo dài 100%) */
  .vn-cta-band__actions { display: flex; flex-wrap: wrap; }
  .vn-cta-band__actions .vn-btn { padding-inline: var(--vn-space-5); }
}
@media (min-width: 992px) {
  .vn-cta-band { padding-block: var(--vn-space-8); }
  /* trái: chữ + gọi/Zalo; phải: form */
  .vn-cta-band__inner { grid-template-columns: 1fr minmax(0, 28rem); column-gap: var(--vn-space-8); align-items: center; }
  .vn-cta-band__text { grid-column: 1; grid-row: 1; align-self: end; }
  .vn-cta-band__contact { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--vn-space-5); }
  .vn-cta-band__form { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---------- 6. Footer ---------- */
.vn-footer {
  padding-top: var(--vn-space-8);
  /* chừa chỗ cho hai nút nổi xếp dọc (+ khoảng cách) để không che dòng cuối */
  padding-bottom: calc(var(--vn-float-size) * 2 + var(--vn-space-3) + var(--vn-space-5));
  background: var(--vn-navy-900);
  color: var(--vn-text-on-dark-muted);
  font-size: var(--vn-fs-body);
}
.vn-footer a { color: var(--vn-text-on-dark-muted); text-decoration: none; }
.vn-footer a:hover { color: var(--vn-text-on-dark); text-decoration: underline; }
.vn-footer a:focus-visible { color: var(--vn-text-on-dark); }

.vn-footer__main { --bs-gutter-y: var(--vn-space-2); }
.vn-footer__logo {
  display: inline-flex;
  margin-bottom: var(--vn-space-4);
  padding: var(--vn-space-2) var(--vn-space-3);
  border-radius: var(--vn-radius-sm);
  background: var(--vn-white);
}
.vn-footer__logo img { width: auto; height: 48px; }
.vn-footer__company { margin: 0 0 var(--vn-space-4); }
.vn-footer__company strong,
.vn-footer__contact strong { color: var(--vn-text-on-dark); font-weight: var(--vn-fw-semibold); }
.vn-footer__contact { margin: 0; padding: 0; list-style: none; }
.vn-footer__contact li { display: flex; gap: var(--vn-space-3); margin-bottom: var(--vn-space-2); }
.vn-footer__contact a { display: inline-flex; align-items: center; min-height: var(--vn-tap); }
.vn-footer__contact li { align-items: center; }
.vn-footer__contact li:first-child { align-items: flex-start; } /* địa chỉ nhiều dòng: icon ngang dòng đầu */
.vn-footer__contact li:first-child .bi { margin-top: var(--vn-space-1); }
.vn-footer__contact .bi { flex-shrink: 0; color: var(--vn-gold-500); }

.vn-footer__social { display: flex; gap: var(--vn-space-3); margin-top: var(--vn-space-4); }
.vn-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vn-tap);
  height: var(--vn-tap);
  border-radius: var(--vn-radius-circle);
  color: var(--vn-text-on-dark);
  font-size: 1.25rem;
}
.vn-footer a.vn-footer__social-link { color: var(--vn-text-on-dark); }
.vn-footer__social-link--facebook { background: var(--vn-social-facebook); }
.vn-footer__social-link--youtube { background: var(--vn-social-youtube); }
.vn-footer__social-link--linkedin { background: var(--vn-social-linkedin); }

/* Cột link: mobile là accordion (<details>), từ 768px mở hết */
.vn-footer__group { border-bottom: 1px solid var(--vn-border-on-dark); }
.vn-footer__main > div:last-child .vn-footer__group { border-bottom: 0; } /* đường kẻ của hàng dưới đã có */
.vn-footer__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--vn-tap);
  color: var(--vn-text-on-dark);
  font-size: var(--vn-fs-body);
  font-weight: var(--vn-fw-semibold);
  cursor: pointer;
  list-style: none;
}
.vn-footer__title::-webkit-details-marker { display: none; }
.vn-footer__title::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: bootstrap-icons;
  font-size: 0.875rem;
  transition: transform var(--vn-dur) var(--vn-ease);
}
.vn-footer__group[open] > .vn-footer__title::after { transform: rotate(180deg); }
.vn-footer__links { margin: 0; padding: 0 0 var(--vn-space-3); list-style: none; }
.vn-footer__links a { display: flex; align-items: center; min-height: var(--vn-tap); line-height: 1.35; }
.vn-footer__sub > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vn-space-2);
  min-height: var(--vn-tap);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.vn-footer__sub > summary::-webkit-details-marker { display: none; }
.vn-footer__sub > summary::after {
  content: "\F282"; /* bi-chevron-down */
  font-family: bootstrap-icons;
  font-size: 0.75rem;
  transition: transform var(--vn-dur) var(--vn-ease);
}
.vn-footer__sub[open] > summary::after { transform: rotate(180deg); }
.vn-footer__sub > ul { margin: 0 0 var(--vn-space-2) var(--vn-space-2); padding: 0 0 0 var(--vn-space-3); list-style: none; border-left: 1px solid var(--vn-border-on-dark); }

.vn-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vn-space-4);
  margin-top: var(--vn-space-6);
  padding-top: var(--vn-space-5);
  border-top: 1px solid var(--vn-border-on-dark);
  text-align: center;
}
.vn-footer__copy { font-size: var(--vn-fs-body); }
.vn-footer__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--vn-space-4); }

@media (min-width: 768px) {
  .vn-footer { padding-bottom: var(--vn-space-6); }
  .vn-footer__main { --bs-gutter-y: var(--vn-space-5); }
  .vn-footer__group { border-bottom: 0; }
  .vn-footer__title { min-height: 0; margin-bottom: var(--vn-space-3); font-size: var(--vn-fs-h4); cursor: default; }
  .vn-footer__title::after { display: none; }
  .vn-footer__links { padding: 0; }
  /* padding-right: hai nút nổi chiếm cột phải, không đè badge */
  .vn-footer__bottom { flex-direction: row; justify-content: space-between; padding-right: calc(var(--vn-float-size) + var(--vn-space-5)); text-align: left; }
}

@media (min-width: 992px) {
  .vn-footer__links a,
  .vn-footer__sub > summary { min-height: 32px; padding-block: var(--vn-space-1); } /* chuột: gọn hơn; dưới 992px giữ vùng bấm 44px */
}

/* ---------- 6b. Ảnh placeholder (components/placeholder_img.html) ---------- */
.vn-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--vn-space-3);
  border: 1px dashed var(--vn-border-strong);
  border-radius: var(--vn-radius-md);
  background: repeating-linear-gradient(135deg, var(--vn-navy-100) 0, var(--vn-navy-100) 12px, var(--vn-navy-050) 12px, var(--vn-navy-050) 24px);
  color: var(--vn-text-body);
  font-size: var(--vn-fs-body);
  text-align: center;
}
.vn-ph--16x9 { aspect-ratio: 16 / 9; }
.vn-ph--16x10 { aspect-ratio: 16 / 10; }
.vn-ph--4x3 { aspect-ratio: 4 / 3; }
.vn-ph--1x1 { aspect-ratio: 1 / 1; }
.vn-ph--3x4 { aspect-ratio: 3 / 4; }

/* ---------- 7. Nút nổi Zalo + gọi ---------- */
.vn-float-contact {
  position: fixed;
  right: max(var(--vn-space-4), env(safe-area-inset-right));
  bottom: max(var(--vn-space-4), env(safe-area-inset-bottom));
  z-index: var(--vn-z-float); /* dưới header (offcanvas nằm trong header) và modal */
  display: flex;
  flex-direction: column;
  gap: var(--vn-space-3);
}
.vn-float-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--vn-float-size);
  height: var(--vn-float-size);
  border-radius: var(--vn-radius-circle);
  box-shadow: var(--vn-shadow-md);
  font-size: 1.5rem;
  text-decoration: none;
  animation: vn-pulse 1.6s ease-out 3; /* sóng chỉ chạy 3 lần rồi dừng */
}
/* Ẩn khi dải CTA (cũng có gọi + Zalo) đang hiện trên màn hình — footer.js thêm .is-hidden */
.vn-float-contact { transition: opacity var(--vn-dur) var(--vn-ease), visibility var(--vn-dur) var(--vn-ease); }
.vn-float-contact.is-hidden { opacity: 0; visibility: hidden; }
.vn-float-contact__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
  animation: vn-pulse-ring 1.6s ease-out 3;
}
.vn-float-contact__btn--zalo { background: var(--vn-social-zalo); }
.vn-float-contact__btn--call { background: var(--vn-gold-500); color: var(--vn-navy-900); }
.vn-float-contact__btn--call:hover { background: var(--vn-gold-600); color: var(--vn-navy-900); }
@keyframes vn-pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
@keyframes vn-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .vn-float-contact__btn,
  .vn-float-contact__btn::before { animation: none; }
}

/* ---------- 8. Hero trang chủ (components/hero_home.html) ---------- */
.vn-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--vn-space-7);
  padding-bottom: calc(var(--vn-space-8) + var(--vn-space-7)); /* chừa chỗ cho thanh số liệu đè lên (-40px mobile / -64px desktop) */
  background: var(--vn-gradient-dark);
  color: var(--vn-text-on-dark-muted);
}
.vn-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  opacity: 0.2; /* mobile: ảnh phủ toàn khối, mờ để chữ đọc được */
  pointer-events: none;
}
.vn-hero .container { position: relative; z-index: 1; }
.vn-hero__content { max-width: 44rem; }
.vn-hero__title {
  margin: 0 0 var(--vn-space-5);
  color: var(--vn-text-on-dark);
  font-size: var(--vn-fs-display);
  line-height: 1.2;
  text-wrap: balance;
}
.vn-hero__title--caps { font-size: var(--vn-fs-h1); line-height: 1.3; } /* chữ gõ sẵn in hoa: nhỏ hơn một bậc để không chiếm 5 dòng */
.vn-hero__accent { display: block; color: var(--vn-gold-500); }
.vn-hero__lead { margin-bottom: var(--vn-space-5); font-size: var(--vn-fs-body); }
.vn-hero__lead p { margin: 0 0 var(--vn-space-3); }
.vn-hero__lead strong { color: var(--vn-text-on-dark); font-weight: var(--vn-fw-semibold); }
.vn-hero__actions { display: flex; flex-direction: column; gap: var(--vn-space-3); }
.vn-hero__actions .vn-btn { width: 100%; }
@media (min-width: 576px) {
  .vn-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .vn-hero__actions .vn-btn { width: auto; }
}
@media (min-width: 992px) {
  .vn-hero { display: flex; align-items: center; min-height: 560px; padding-top: var(--vn-space-8); }
  .vn-hero .container { width: 100%; }
  .vn-hero__bg {
    left: 0;
    right: auto;
    width: 100%;
    object-position: center;
    opacity: 0.85; /* ảnh banner đã tối sẵn nửa trái để chừa chỗ cho chữ */
  }
  .vn-hero__lead { font-size: var(--vn-fs-lead); }
}

/* ---------- 9. Thanh số liệu (components/stat_item.html) ---------- */
.vn-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vn-space-5) var(--vn-space-4);
  padding: var(--vn-space-5);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-md);
}
.vn-stats--overlap { margin-top: calc(var(--vn-space-7) * -1 + var(--vn-space-2)); } /* -40px */
.vn-stat { display: flex; flex-direction: column; align-items: center; gap: var(--vn-space-3); text-align: center; }
.vn-stat__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--vn-icon-circle);
  height: var(--vn-icon-circle);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 1.5rem;
}
.vn-stat__value { margin: 0; color: var(--vn-text-heading); font-size: var(--vn-fs-h2); font-weight: var(--vn-fw-bold); line-height: 1.1; }
.vn-stat__label { margin: var(--vn-space-1) 0 0; color: var(--vn-text-muted); font-size: var(--vn-fs-sm); }
@media (min-width: 768px) {
  .vn-stats { grid-template-columns: repeat(4, 1fr); gap: 0; padding: var(--vn-space-5) 0; }
  .vn-stat + .vn-stat { border-left: 1px solid var(--vn-border); }
}
@media (min-width: 992px) {
  .vn-stats--overlap { margin-top: calc(var(--vn-space-8) * -1); } /* -64px */
  .vn-stat { flex-direction: row; justify-content: center; gap: var(--vn-space-4); text-align: left; }
  .vn-stat__icon { width: var(--vn-icon-circle-lg); height: var(--vn-icon-circle-lg); font-size: 1.75rem; }
}

/* ---------- 10. Card dịch vụ (service_card.html) + ô dịch vụ gọn (service_tile.html) ---------- */
.vn-service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
  color: var(--vn-text-body);
  text-decoration: none;
  transition: box-shadow var(--vn-dur) var(--vn-ease), transform var(--vn-dur) var(--vn-ease);
}
.vn-service-card:hover { box-shadow: var(--vn-shadow-md); transform: translateY(-4px); color: var(--vn-text-body); }
.vn-service-card__media { position: relative; display: block; }
.vn-service-card__media img { display: block; }
.vn-service-card__media img,
.vn-service-card__media .vn-ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 0;
  border-radius: calc(var(--vn-radius-md) - 1px) calc(var(--vn-radius-md) - 1px) 0 0;
}
.vn-service-card__icon {
  position: absolute;
  left: var(--vn-space-4);
  bottom: 0;
  transform: translateY(50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vn-icon-circle);
  height: var(--vn-icon-circle);
  border: 3px solid var(--vn-white);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-900);
  color: var(--vn-text-on-dark);
  font-size: 1.25rem;
}
.vn-service-card__body {
  display: block;
  flex: 1 1 auto;
  padding: calc(var(--vn-icon-circle) / 2 + var(--vn-space-3)) var(--vn-space-4) var(--vn-space-7);
}
.vn-service-card__title { margin: 0 0 var(--vn-space-2); color: var(--vn-text-heading); font-size: var(--vn-fs-h4); font-weight: var(--vn-fw-semibold); line-height: 1.35; }
.vn-service-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--vn-text-muted);
}
.vn-service-card__arrow { position: absolute; right: var(--vn-space-4); bottom: var(--vn-space-4); color: var(--vn-navy-900); transition: transform var(--vn-dur) var(--vn-ease); }
.vn-service-card:hover .vn-service-card__arrow { transform: translateX(4px); }
/* 5 card: ở 2 cột (576–991px) card cuối (lẻ) rộng 100% */
@media (min-width: 576px) and (max-width: 991.98px) {
  .row-cols-sm-2 > .col:last-child:nth-child(odd) { flex: 0 0 100%; width: 100%; }
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card { flex-direction: row; }
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card__media { flex: 0 0 40%; }
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card__media img,
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card__media .vn-ph {
    height: 100%;
    aspect-ratio: auto;
    border-radius: calc(var(--vn-radius-md) - 1px) 0 0 calc(var(--vn-radius-md) - 1px);
  }
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card__icon { top: var(--vn-space-4); bottom: auto; transform: none; }
  .row-cols-sm-2 > .col:last-child:nth-child(odd) .vn-service-card__body { padding-top: var(--vn-space-5); }
}
/* mobile: ảnh card thấp hơn (2:1) để 5 card không dài quá 2 màn hình */
@media (max-width: 575.98px) {
  .vn-service-card__media img,
  .vn-service-card__media .vn-ph { aspect-ratio: 2 / 1; }
}
/* tiêu đề 2 dòng không đẩy lệch mô tả giữa các card (lưới 5 cột) */
@media (min-width: 1200px) {
  .vn-service-card__title { min-height: calc(2 * 1.35em); }
}

.vn-service-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vn-space-3);
  height: 100%;
  min-height: var(--vn-tap);
  padding: var(--vn-space-5) var(--vn-space-3);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  color: var(--vn-text-heading);
  font-weight: var(--vn-fw-medium);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: box-shadow var(--vn-dur) var(--vn-ease), transform var(--vn-dur) var(--vn-ease), border-color var(--vn-dur) var(--vn-ease);
}
.vn-service-tile:hover { border-color: var(--vn-border-strong); box-shadow: var(--vn-shadow-md); transform: translateY(-2px); color: var(--vn-text-heading); }
.vn-service-tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vn-icon-circle);
  height: var(--vn-icon-circle);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 1.375rem;
  transition: background-color var(--vn-dur) var(--vn-ease), color var(--vn-dur) var(--vn-ease);
}
.vn-service-tile:hover .vn-service-tile__icon { background: var(--vn-navy-900); color: var(--vn-text-on-dark); }

/* Khối "Dịch vụ liên quan" (components/related_services.html): kẻ ngăn với section trên; mobile xếp ô thành hàng ngang cho gọn */
.vn-related { border-top: 1px solid var(--vn-border); }
.vn-related .vn-service-tile { flex-direction: row; padding: var(--vn-space-3) var(--vn-space-4); text-align: left; }
.vn-related .vn-service-tile__icon { flex: none; }
@media (min-width: 576px) {
  .vn-related .vn-service-tile { flex-direction: column; padding: var(--vn-space-5) var(--vn-space-3); text-align: center; }
}

/* ---------- 11. Khối chia đôi (vn-split) + checklist + feature ---------- */
.vn-split { display: grid; gap: var(--vn-space-6); align-items: center; }
.vn-split__content,
.vn-split__media,
.vn-split__aside { min-width: 0; }
.vn-split__media img { display: block; }
.vn-split__media img,
.vn-split__media .vn-ph { width: 100%; border-radius: var(--vn-radius-lg); }
.vn-split__media img { height: auto; }
.vn-split__media--contain img { mix-blend-mode: multiply; width: auto; max-width: 100%; max-height: 360px; margin-inline: auto; border-radius: 0; object-fit: contain; }
.vn-split__content .vn-section-heading { margin-bottom: var(--vn-space-4); }
.vn-split__subtitle { margin: 0 0 var(--vn-space-3); font-size: var(--vn-fs-h3); font-weight: var(--vn-fw-semibold); }
.vn-split__lead { color: var(--vn-text-heading); font-weight: var(--vn-fw-medium); }
.vn-split__content p { max-width: 65ch; }
.vn-split__content .vn-btn,
.vn-split__content .vn-link-arrow { margin-top: var(--vn-space-2); }
@media (min-width: 768px) {
  .vn-split--aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-split--aside .vn-split__aside { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .vn-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vn-space-8); }
  .vn-split--aside { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--vn-space-6); }
  .vn-split--aside .vn-split__aside { grid-column: auto; grid-template-columns: none; }
  .vn-split--reverse .vn-split__media { order: -1; } /* đảo ảnh sang trái; HTML giữ chữ trước ảnh để thứ tự đọc không đổi */
}

.vn-checklist { display: grid; gap: var(--vn-space-4); margin: 0; padding: 0; list-style: none; }
.vn-checklist li { display: flex; align-items: center; gap: var(--vn-space-3); color: var(--vn-text-heading); font-weight: var(--vn-fw-medium); }
.vn-checklist .bi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--vn-icon-circle) * 2 / 3);
  height: calc(var(--vn-icon-circle) * 2 / 3);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-900);
  color: var(--vn-text-on-dark);
  font-size: var(--vn-fs-body);
}

.vn-feature-list { display: grid; gap: var(--vn-space-5); }
.vn-feature { display: flex; align-items: flex-start; gap: var(--vn-space-4); }
.vn-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--vn-icon-circle-lg);
  height: var(--vn-icon-circle-lg);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 1.75rem;
}
.vn-feature__title { margin: 0 0 var(--vn-space-1); color: var(--vn-text-heading); font-size: var(--vn-fs-h4); font-weight: var(--vn-fw-semibold); }
.vn-feature__list { margin: 0; padding-left: 1.25rem; }

/* ---------- 12. Quy trình (process_step.html) ---------- */
.vn-process { display: grid; gap: var(--vn-space-5); margin: 0; padding: 0; list-style: none; }
.vn-process__step { position: relative; display: flex; align-items: flex-start; gap: var(--vn-space-4); }
.vn-process__step:not(:last-child)::before { /* mobile: đường nối dọc (timeline) */
  content: "";
  position: absolute;
  top: var(--vn-icon-circle-lg);
  bottom: calc(var(--vn-space-5) * -1);
  left: calc(var(--vn-icon-circle-lg) / 2 - 1px);
  width: 2px;
  background: var(--vn-border-strong);
}
.vn-process__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--vn-icon-circle-lg);
  height: var(--vn-icon-circle-lg);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 1.75rem;
}
.vn-process__img { flex: 0 0 auto; width: var(--vn-icon-circle-lg); height: auto; border-radius: var(--vn-radius-sm); }
.vn-process__body { min-width: 0; padding-top: var(--vn-space-1); }
.vn-process__number { display: block; color: var(--vn-gold-700); font-size: var(--vn-fs-xs); font-weight: var(--vn-fw-semibold); letter-spacing: var(--vn-ls-eyebrow); }
.vn-process__title { margin: var(--vn-space-1) 0 0; font-size: var(--vn-fs-body); font-weight: var(--vn-fw-semibold); line-height: 1.4; }
.vn-process__text { margin: var(--vn-space-1) 0 0; color: var(--vn-text-body); font-size: var(--vn-fs-body); } /* body (không muted): muted chỉ 4.3:1 trên nền surface-alt */
@media (min-width: 992px) {
  .vn-process { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--vn-space-4); }
  .vn-process__step { flex-direction: column; gap: var(--vn-space-3); }
  .vn-process__step:not(:last-child)::before { display: none; }
  .vn-process__step:not(:last-child)::after { /* mũi tên giữa các bước */
    content: "\F285"; /* bi-chevron-right */
    position: absolute;
    top: calc(var(--vn-icon-circle-lg) / 2 - 0.5rem);
    right: calc(var(--vn-space-4) / -2 - 0.4rem);
    color: var(--vn-gold-700);
    font-family: bootstrap-icons;
    font-size: 1rem;
    line-height: 1;
  }
  .vn-process__body { padding-top: 0; }
}

/* ---------- 13. Dải khách hàng (vn-clients, logo_tile.html, case_study_card.html) ---------- */
.vn-clients { display: grid; gap: var(--vn-space-6); align-items: center; }
.vn-clients__intro,
.vn-clients__logos,
.vn-clients__case { min-width: 0; }
.vn-clients__intro .vn-section-heading { margin-bottom: var(--vn-space-4); }
@media (min-width: 768px) {
  .vn-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vn-clients__logos { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 992px) {
  .vn-clients { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); }
  .vn-clients__logos { grid-column: auto; grid-row: auto; }
  .vn-clients--no-case { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } /* khối case study đang ẩn */
}

.vn-logo-marquee { display: grid; gap: var(--vn-space-3); overflow: hidden; }
.vn-logo-marquee__track { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vn-space-3); margin: 0; padding: 0; list-style: none; }
.vn-logo-marquee.is-animated { /* components.js nhân đôi logo rồi thêm .is-animated; chạy bằng CSS */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--vn-navy-900) 4%, var(--vn-navy-900) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--vn-navy-900) 4%, var(--vn-navy-900) 96%, transparent 100%);
}
.is-animated .vn-logo-marquee__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  animation: vn-marquee 40s linear infinite;
}
.is-animated .vn-logo-marquee__track--reverse { animation-direction: reverse; }
.is-animated .vn-logo-tile { margin-right: var(--vn-space-3); }
.vn-logo-marquee:hover .vn-logo-marquee__track,
.vn-logo-marquee:focus-within .vn-logo-marquee__track { animation-play-state: paused; }
@keyframes vn-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .is-animated .vn-logo-marquee__track { animation: none; }
}

.vn-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 132px;
  height: 88px;
  padding: var(--vn-space-2);
  border-radius: var(--vn-radius-sm);
  background: var(--vn-white);
}
.vn-logo-tile img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.vn-logo-tile__ph { color: var(--vn-text-muted); font-size: var(--vn-fs-xs); text-align: center; }

.vn-case {
  display: block;
  overflow: hidden;
  border: 1px solid var(--vn-border-on-dark);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-navy-700);
  color: var(--vn-text-on-dark);
  text-decoration: none;
}
.vn-case__media { display: block; }
.vn-case__media img { display: block; }
.vn-case__media img,
.vn-case__media .vn-ph { width: 100%; border: 0; border-radius: 0; }
.vn-case__body { position: relative; display: block; padding: var(--vn-space-4) var(--vn-space-6) var(--vn-space-4) var(--vn-space-4); }
.vn-case__label { display: block; color: var(--vn-text-on-dark-muted); font-size: var(--vn-fs-sm); }
.vn-case__title { display: block; margin-top: var(--vn-space-1); color: var(--vn-text-on-dark); font-size: var(--vn-fs-body); font-weight: var(--vn-fw-semibold); }
.vn-case__arrow { position: absolute; right: var(--vn-space-4); bottom: var(--vn-space-4); }
a.vn-case:hover { border-color: var(--vn-gold-500); color: var(--vn-text-on-dark); }

/* ---------- 14. Card tin tức (news_list.html) ---------- */
.vn-news-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
  transition: box-shadow var(--vn-dur) var(--vn-ease), transform var(--vn-dur) var(--vn-ease);
}
.vn-news-card:hover { box-shadow: var(--vn-shadow-md); transform: translateY(-4px); }
.vn-news-card__media { display: block; }
.vn-news-card__media img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.vn-news-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--vn-space-2); padding: var(--vn-space-4) var(--vn-space-5) var(--vn-space-5); }
.vn-news-card__title { margin: 0; font-size: var(--vn-fs-h4); line-height: 1.35; }
.vn-news-card__title a { color: var(--vn-text-heading); text-decoration: none; }
.vn-news-card__title a:hover { color: var(--vn-gold-700); }
.vn-news-card__date { margin: 0; color: var(--vn-text-muted); font-size: var(--vn-fs-sm); }
.vn-news-card__text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.vn-news-card .vn-link-arrow { margin-top: auto; }

/* ---------- 15. Hero trang con (hero_page.html) + breadcrumb ---------- */
.vn-hero--page { padding-block: var(--vn-space-7); }
.vn-hero--page .vn-hero__title { margin-bottom: var(--vn-space-4); font-size: var(--vn-fs-h1); }
.vn-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--vn-space-6); align-items: center; }
.vn-hero__sub { max-width: 44rem; margin: 0 0 var(--vn-space-4); color: var(--vn-text-on-dark); font-size: var(--vn-fs-lead); font-weight: var(--vn-fw-medium); }
.vn-hero__list { display: grid; gap: var(--vn-space-3); margin: 0 0 var(--vn-space-5); padding: 0; list-style: none; color: var(--vn-text-on-dark); }
.vn-hero__list li { display: flex; align-items: flex-start; gap: var(--vn-space-3); }
.vn-hero__list .bi { flex: 0 0 auto; margin-top: 0.15em; color: var(--vn-gold-500); }
.vn-hero__media { min-width: 0; }
.vn-hero__media img { display: block; width: 100%; max-width: 480px; height: auto; margin-inline: auto; }
.vn-hero__media .vn-ph { max-width: 480px; margin-inline: auto; }
.vn-hero--page .vn-hero__actions .vn-btn { white-space: normal; }
@media (min-width: 992px) {
  .vn-hero--page { min-height: 0; padding-block: var(--vn-space-8); }
  .vn-hero__grid--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--vn-space-7); }
}

.vn-breadcrumb { margin-bottom: var(--vn-space-3); }
.vn-breadcrumb__list { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.vn-breadcrumb__item { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--vn-text-on-dark); }
/* Mục cuối (tên trang/bài dài): một dòng, cắt bằng dấu … để breadcrumb không chiếm 3 dòng ở mobile (ui-reviewer 6B) */
.vn-breadcrumb__item:last-child { flex: 0 1 auto; min-width: 0; }
.vn-breadcrumb__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vn-breadcrumb__item + .vn-breadcrumb__item::before {
  content: "\F285"; /* bi-chevron-right */
  margin-inline: var(--vn-space-2);
  color: var(--vn-text-on-dark-muted);
  font-family: bootstrap-icons;
  font-size: var(--vn-fs-xs);
}
.vn-breadcrumb__item a { display: inline-flex; align-items: center; min-height: var(--vn-tap); color: var(--vn-text-on-dark-muted); text-decoration: none; }
.vn-breadcrumb__item a:hover,
.vn-breadcrumb__item a:focus-visible { color: var(--vn-text-on-dark); text-decoration: underline; }

/* ---------- 16. Lưới ảnh (gallery_item.html) ---------- */
.vn-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vn-space-4); margin: 0; padding: 0; }
.vn-gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--vn-space-3);
  min-width: 0;
  margin: 0;
  padding: var(--vn-space-3);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
}
.vn-gallery__item img { display: block; width: 100%; height: auto; border-radius: var(--vn-radius-sm); }
.vn-gallery__caption { color: var(--vn-text-body); font-size: var(--vn-fs-body); text-align: center; }
.vn-gallery__action {
  display: inline-flex;
  align-items: center;
  align-self: center;
  min-height: var(--vn-tap);
  padding: 0 var(--vn-space-3);
  border: 0;
  background: transparent;
  color: var(--vn-navy-900);
  font-family: inherit;
  font-size: var(--vn-fs-body);
  font-weight: var(--vn-fw-semibold);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
.vn-gallery__action:hover,
.vn-gallery__action:focus-visible { color: var(--vn-gold-700); text-decoration: underline; }
/* Cả ô là link (tham số url): nổi lên khi hover như service_tile, mũi tên sau chú thích báo hiệu bấm được */
.vn-gallery__item--link {
  color: var(--vn-text-heading);
  text-decoration: none;
  transition: box-shadow var(--vn-dur) var(--vn-ease), transform var(--vn-dur) var(--vn-ease), border-color var(--vn-dur) var(--vn-ease);
}
.vn-gallery__item--link .vn-gallery__caption { color: var(--vn-text-heading); font-weight: var(--vn-fw-medium); }
.vn-gallery__item--link .vn-gallery__caption .bi { display: inline-block; margin-left: var(--vn-space-1); font-size: 0.875em; transition: transform var(--vn-dur) var(--vn-ease); }
.vn-gallery__item--link:hover,
.vn-gallery__item--link:focus-visible { border-color: var(--vn-border-strong); box-shadow: var(--vn-shadow-md); transform: translateY(-4px); color: var(--vn-text-heading); }
.vn-gallery__item--link:hover .vn-gallery__caption .bi,
.vn-gallery__item--link:focus-visible .vn-gallery__caption .bi { transform: translateX(3px); }
/* --feature: ảnh lớn của trang ngành hàng — 1 cột trên điện thoại, 2 cột từ 576px, ô wide chiếm cả hàng */
.vn-gallery--feature { gap: var(--vn-space-3); }
.vn-gallery--feature .vn-gallery__item--wide { grid-column: 1 / -1; }
@media (min-width: 576px) {
  .vn-gallery--feature { gap: var(--vn-space-5); }
  .vn-gallery--feature .vn-gallery__item--wide img { width: auto; max-width: 100%; margin-inline: auto; } /* không phóng ảnh 1024px lên rộng hơn cỡ gốc */
}
@media (min-width: 768px) { /* 4 ô tem/ngành hàng + chú thích ngắn: 4 cột từ 768px (3 cột sẽ lẻ một ô) */
  .vn-gallery:not(.vn-gallery--feature) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vn-space-5); }
}
/* --3: ba ô (ảnh tem ngang + chú thích dài) — 1 cột dưới 768px, 3 cột từ 768px; ảnh không phóng quá cỡ gốc */
.vn-gallery.vn-gallery--3 { grid-template-columns: minmax(0, 1fr); }
.vn-gallery--3 .vn-gallery__item img { width: auto; max-width: 100%; margin-inline: auto; }
.vn-gallery--3 .vn-gallery__caption { text-align: start; } /* chú thích dài 2–5 dòng: căn trái */
@media (min-width: 768px) {
  .vn-gallery.vn-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 17. Bài viết (vn-prose), khối khuyến mãi, card, khối chia đôi dạng card ---------- */
.vn-prose { max-width: 40rem; margin-inline: auto; }
@media (min-width: 992px) { /* card và khối khuyến mãi nở rộng hơn cột chữ để chia đôi không bị chật */
  .vn-prose .vn-split--card,
  .vn-prose .vn-promo { margin-inline: calc(var(--vn-space-8) * -1); }
}
.vn-prose :where(h2) { margin: var(--vn-space-7) 0 var(--vn-space-4); font-size: var(--vn-fs-h2); }
.vn-prose :where(h3) { margin: var(--vn-space-6) 0 var(--vn-space-3); font-size: var(--vn-fs-h3); }
.vn-prose :where(p, ul, ol) { margin: 0 0 var(--vn-space-4); }
.vn-prose :where(ul, ol) { padding-left: 1.25rem; }
.vn-prose :where(li) { margin-bottom: var(--vn-space-2); }
.vn-prose > :first-child { margin-top: 0; }
.vn-prose__media { margin: var(--vn-space-5) 0; }
.vn-prose__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 480px; margin-inline: auto; object-fit: contain; border-radius: var(--vn-radius-md); }
.vn-accent { color: var(--vn-gold-700); }

.vn-lead {
  text-wrap: balance;
  max-width: 65ch;
  margin: var(--vn-space-6) auto 0;
  color: var(--vn-text-heading);
  font-size: var(--vn-fs-lead);
  font-weight: var(--vn-fw-medium);
  text-align: start; /* đoạn dài hơn 3 dòng không căn giữa */
}
@media (min-width: 768px) { .vn-lead { text-align: center; } }
.vn-lead + .row { margin-top: var(--vn-space-6); } /* lưới card ngay sau đoạn dẫn không dính vào chữ (ui-reviewer đợt 5) */

/* Khối khuyến mãi: ảnh nhỏ + câu mời + nút (thay "qr-banner-box" xanh/xanh lá tự chế) */
.vn-promo {
  display: grid;
  gap: var(--vn-space-4);
  align-items: center;
  margin: var(--vn-space-6) 0;
  padding: var(--vn-space-5);
  border: 1px solid var(--vn-navy-100);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-surface-alt);
}
.vn-promo__img { display: block; width: 100%; max-width: 160px; height: auto; border-radius: var(--vn-radius-sm); }
.vn-promo__text { display: block; color: var(--vn-text-heading); font-weight: var(--vn-fw-semibold); }
@media (min-width: 768px) {
  .vn-promo { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* Card dùng chung (vấn đề / tính năng). --danger: viền trái đỏ cho nỗi đau; --center: căn giữa */
.vn-card {
  height: 100%;
  color: var(--vn-text-body); /* card nằm trong section tối vẫn chữ tối */
  padding: var(--vn-space-5);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
}
.vn-card--danger { border-left: 4px solid var(--vn-danger); }
.vn-card--danger .vn-card__icon { color: var(--vn-danger); }
.vn-card--center { text-align: center; }
.vn-card--center .vn-feature__icon { margin: 0 auto var(--vn-space-3); }
.vn-card__icon { display: block; margin-bottom: var(--vn-space-2); font-size: 1.75rem; line-height: 1; }
.vn-card__title { margin: 0 0 var(--vn-space-2); font-size: var(--vn-fs-h4); font-weight: var(--vn-fw-semibold); }
.vn-card__text { margin: 0; }

/* Khối chia đôi dạng card (ảnh + chữ trong khung viền) và quy trình 4 bước */
.vn-split--card {
  gap: var(--vn-space-5);
  margin: var(--vn-space-6) 0;
  padding: var(--vn-space-5);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-lg);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
}
.vn-split__title { margin: 0 0 var(--vn-space-3); font-size: var(--vn-fs-h3); }
.vn-split--card .vn-split__media img { width: auto; max-width: 100%; margin-inline: auto; } /* ảnh nhỏ (552px) không bị phóng to */
@media (min-width: 768px) {
  .vn-split--card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .vn-split--card { gap: var(--vn-space-6); }
  .vn-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vn-process--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 18. Ô nhập + thông báo kết quả form ---------- */
/* Thông báo kết quả gửi form (lead-form.js): lỗi = đỏ, thành công = xanh. */
.vn-form-status { margin: 0; padding: var(--vn-space-3) var(--vn-space-4); border-radius: var(--vn-radius-md); text-align: left; }
.vn-form-status--error { background: #FBEAE8; color: var(--vn-danger); }
.vn-form-status--ok { background: var(--vn-success-bg); color: var(--vn-success); font-weight: var(--vn-fw-medium); }

.vn-input {
  width: 100%;
  min-height: var(--vn-btn-h);
  padding: 0 var(--vn-space-4);
  border: 1px solid var(--vn-border-strong);
  border-radius: var(--vn-radius-pill);
  background: var(--vn-white);
  color: var(--vn-text-heading);
  font-family: inherit;
  font-size: var(--vn-fs-body);
}
.vn-input::placeholder { color: var(--vn-text-muted); }
.vn-input:focus { border-color: var(--vn-gold-500); outline: none; box-shadow: var(--vn-focus-ring); }
.vn-input--select { padding-right: var(--vn-space-3); cursor: pointer; }
.vn-input--select:invalid { color: var(--vn-text-muted); } /* đang ở dòng "Chọn dịch vụ…" */
.vn-input--select option,
.vn-input--select optgroup { color: var(--vn-text-heading); }
.vn-input--area {
  min-height: calc(var(--vn-btn-h) * 1.75);
  padding: var(--vn-space-3) var(--vn-space-4);
  border-radius: var(--vn-radius-md);
  line-height: 1.5;
  resize: vertical;
}

/* Nút kêu gọi căn giữa ở cuối một section (dưới lưới card / quy trình) */
.vn-section-cta { margin: var(--vn-space-7) 0 0; text-align: center; }

/* Section đệm gọn: bài dài tách theo mục đánh số (vn-prose) — đệm giữa các section bằng space-7 thay vì --vn-section-y */
.vn-section--tight { padding-block: var(--vn-space-7); }

/* Khung placeholder ở hero trang con: chỉ hiện từ 992px (dưới đó là khoảng trống chết dưới chữ); ảnh thật vẫn hiện ở mọi cỡ */
.vn-hero__media .vn-ph { display: none; }
@media (min-width: 992px) {
  .vn-hero__media .vn-ph { display: flex; }
}

/* ---------- 19. Đợt 4B (nhóm tem): quy trình có ảnh, cấu tạo tem, lợi ích 3 cột, video, logo/tem chạy ---------- */

/* Quy trình có ảnh (vn-process--media, process_step.html với image/placeholder): ảnh 3:4 của màn hình điện thoại mỗi bước.
   Dưới 576px ảnh nhỏ nằm trái chữ (3 bước không dài quá 1 màn hình); từ 768px 3 cột, ảnh trên chữ. Không có đường nối/mũi tên. */
.vn-process--media { gap: var(--vn-space-5); }
.vn-process--media .vn-process__step:not(:last-child)::before,
.vn-process--media .vn-process__step:not(:last-child)::after { display: none; }
.vn-process__media { flex: 0 0 112px; width: 112px; }
.vn-process__media .vn-process__img { display: block; width: 100%; height: auto; border-radius: var(--vn-radius-md); }
.vn-process__media .vn-ph { width: 100%; padding: var(--vn-space-2); border-radius: var(--vn-radius-md); } /* không ghi đè display của .vn-ph (chữ trôi lên đầu khung) */
@media (min-width: 576px) {
  .vn-process__media { flex-basis: 160px; width: 160px; }
}
@media (min-width: 768px) {
  .vn-process--media { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vn-space-6); }
  .vn-process--media .vn-process__step { flex-direction: column; align-items: center; gap: var(--vn-space-4); text-align: center; }
  .vn-process__media { flex: none; width: 100%; max-width: 220px; }
  .vn-process--media .vn-process__body { padding-top: 0; }
}

/* Cấu tạo tem (vn-anatomy): ảnh tem đã có sẵn điểm đánh số 1…n; danh sách chú thích bên dưới dùng cùng số */
.vn-anatomy { display: grid; gap: var(--vn-space-5); margin: 0; }
.vn-anatomy__figure { margin: 0; }
.vn-anatomy__figure img { display: block; width: auto; max-width: min(100%, 480px); height: auto; margin-inline: auto; border-radius: var(--vn-radius-md); }
.vn-anatomy__list { display: grid; gap: var(--vn-space-4); margin: 0; padding: 0; list-style: none; }
.vn-anatomy__item { display: flex; align-items: flex-start; gap: var(--vn-space-3); }
.vn-anatomy__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc(var(--vn-icon-circle) * 2 / 3);
  height: calc(var(--vn-icon-circle) * 2 / 3);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-900);
  color: var(--vn-text-on-dark);
  font-size: var(--vn-fs-body);
  font-weight: var(--vn-fw-semibold);
}
.vn-anatomy__text { margin: 0; }
.vn-anatomy__text strong { color: var(--vn-text-heading); }

/* Lợi ích 3 cột (vn-benefits): nhóm trái · ảnh giữa · nhóm phải; dưới 768px xếp dọc theo thứ tự HTML */
.vn-benefits { display: grid; gap: var(--vn-space-6); align-items: center; }
.vn-benefits__group,
.vn-benefits__media { min-width: 0; }
.vn-benefits__title { margin: 0 0 var(--vn-space-4); font-size: var(--vn-fs-h4); font-weight: var(--vn-fw-semibold); line-height: 1.4; text-align: center; }
.vn-benefits__list { display: grid; gap: var(--vn-space-3); margin: 0; padding: 0; list-style: none; }
.vn-benefits__item {
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  padding: var(--vn-space-3) var(--vn-space-4);
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
}
.vn-benefits__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--vn-icon-circle);
  height: var(--vn-icon-circle);
  border-radius: var(--vn-radius-circle);
  background: var(--vn-navy-100);
  color: var(--vn-navy-900);
  font-size: 1.25rem;
}
.vn-benefits__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: 300px; margin-inline: auto; }
@media (min-width: 768px) { /* 768–991px: hai nhóm cạnh nhau, ảnh nằm riêng một hàng bên dưới (3 cột sẽ chật: mỗi card ~200px) */
  .vn-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--vn-space-5); align-items: start; }
  .vn-benefits__media { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 992px) {
  .vn-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vn-space-6); align-items: center; }
  .vn-benefits__media { grid-column: auto; grid-row: auto; }
  .vn-benefits__media img { max-height: 420px; }
}

/* Video hướng dẫn: khung 16:9 của Bootstrap (.ratio) + bo góc, chú thích dưới */
.vn-video { overflow: hidden; border-radius: var(--vn-radius-lg); box-shadow: var(--vn-shadow-md); background: var(--vn-navy-900); }
.vn-video iframe { border: 0; }
.vn-video__caption { margin: var(--vn-space-3) 0 0; color: var(--vn-text-muted); text-align: center; }

/* Ảnh chụp màn hình trong khối chia đôi: viền + bóng nhẹ để ảnh nền trắng không "tan" vào nền section */
.vn-split__media--shot img { width: auto; max-width: 100%; margin-inline: auto; border: 1px solid var(--vn-border); box-shadow: var(--vn-shadow-sm); } /* không phóng quá cỡ gốc */

/* Checklist cho câu dài (tính năng): icon canh đầu dòng, chữ thường thay vì 500 */
.vn-checklist--text li { align-items: flex-start; color: var(--vn-text-body); font-weight: var(--vn-fw-regular); }
.vn-checklist--text .bi { margin-top: 0.1rem; }

/* Dải tem mẫu chạy (vn-logo-marquee--stamps): tem ngang 2:1 nên ô rộng hơn ô logo; dùng lại JS nhân đôi/animation của logo chạy */
.vn-logo-marquee--stamps .vn-logo-tile { width: 176px; height: 88px; padding: var(--vn-space-1); }
@media (min-width: 768px) {
  .vn-logo-marquee--stamps .vn-logo-tile { width: 224px; height: 112px; }
}

/* Lưới ảnh: --2 (hai ô luôn hai cột, hẹp lại để ảnh dọc không quá to), --screens (ảnh chụp màn hình điện thoại 472×1024: giới hạn chiều cao) */
.vn-gallery.vn-gallery--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; }
.vn-gallery--2 .vn-gallery__item img,
.vn-gallery--screens .vn-gallery__item img { width: auto; max-width: 100%; margin-inline: auto; }
.vn-gallery--screens .vn-gallery__item img { max-height: 420px; }
@media (min-width: 768px) {
  .vn-gallery--screens .vn-gallery__item img { max-height: 480px; }
}

/* Ô logo/tem nằm trên nền sáng cần viền (ô trắng không "tan" vào nền section) */
.vn-section:not(.vn-section--dark) .vn-logo-tile { border: 1px solid var(--vn-border); }

/* Ảnh điện thoại/ảnh dọc trong khối chia đôi: không phóng quá cỡ gốc, cao tối đa 480px */
.vn-split__media--phone img { width: auto; max-width: 100%; max-height: 360px; margin-inline: auto; object-fit: contain; }
@media (min-width: 768px) {
  .vn-split__media--phone img { max-height: 480px; }
}

/* ---------- 20. Đợt 4C (nhóm pháp lý): quy trình 4 bước có ảnh, quy trình dọc, mô tả trong feature/benefits, card chứa bài ---------- */

/* vn-process--media với 4 bước: 2 cột ở 768–991px (4 cột sẽ chật), 4 cột từ 992px; --media mặc định là 3 cột */
@media (min-width: 768px) {
  .vn-process--media.vn-process--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .vn-process--media.vn-process--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* vn-process--stack: danh sách bước dọc (timeline) ở mọi kích thước — dùng khi quy trình nằm cạnh ảnh, chỉ có tiêu đề bước */
@media (min-width: 992px) {
  .vn-process--stack { grid-template-columns: none; gap: var(--vn-space-5); }
  .vn-process--stack .vn-process__step { flex-direction: row; gap: var(--vn-space-4); }
  .vn-process--stack .vn-process__step:not(:last-child)::before { display: block; }
  .vn-process--stack .vn-process__step:not(:last-child)::after { display: none; }
  .vn-process--stack .vn-process__body { padding-top: var(--vn-space-1); }
}

/* vn-feature: đoạn mô tả dưới tiêu đề (thay ul khi mô tả là câu văn) */
.vn-feature__text { margin: 0 0 var(--vn-space-2); }
.vn-feature__text:last-child { margin-bottom: 0; }

/* vn-benefits có mô tả: mỗi mục gồm tên (đậm) + đoạn mô tả; icon canh đầu dòng thay vì giữa */
.vn-benefits__item--text { align-items: flex-start; }
.vn-benefits__body { min-width: 0; }
.vn-benefits__name { display: block; margin-bottom: var(--vn-space-1); color: var(--vn-text-heading); font-weight: var(--vn-fw-semibold); }
.vn-benefits__desc { margin: 0; }

/* Card chứa đoạn chữ ngắn (vn-card + vn-prose): bỏ khoảng cách thừa dưới đoạn cuối */
.vn-card.vn-prose > :last-child { margin-bottom: 0; }

/* ---------- 21. Đợt 6A (nhóm chính sách): bảng (vn-table), hỏi–đáp (vn-faq) ---------- */

/* vn-table-wrap + vn-table: bảng dữ liệu. Khung cuộn ngang được trên mobile (tabindex=0 để cuộn bằng bàn phím);
   vn-table--wide đặt chiều rộng tối thiểu để cột không bị bóp khi màn hình hẹp; tiêu đề bảng (p.vn-table-title) nằm ngoài vùng cuộn, ngay trên khung */
.vn-table-wrap {
  max-width: 100%;
  margin: 0 0 var(--vn-space-5);
  overflow-x: auto;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  /* bóng mép trái/phải chỉ hiện khi còn nội dung để cuộn (cuộn được báo bằng mép mờ) */
  background:
    linear-gradient(to right, var(--vn-white) 30%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--vn-white) 30%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right, var(--vn-border-strong), transparent) left center / 12px 100% no-repeat scroll,
    linear-gradient(to left, var(--vn-border-strong), transparent) right center / 12px 100% no-repeat scroll,
    var(--vn-white);
}
.vn-table-wrap:focus-visible { box-shadow: var(--vn-focus-ring); }
.vn-table { width: 100%; margin: 0; border-collapse: collapse; color: var(--vn-text-body); font-size: var(--vn-fs-body); line-height: var(--vn-lh-tight); }
.vn-table--wide { min-width: 44rem; }
.vn-table--wide tbody th { min-width: 7.5rem; }
.vn-table-title {
  margin: var(--vn-space-5) 0 0;
  padding: var(--vn-space-4);
  border-radius: var(--vn-radius-md) var(--vn-radius-md) 0 0;
  background: var(--vn-navy-900);
  color: var(--vn-text-on-dark);
  font-weight: var(--vn-fw-semibold);
  line-height: 1.4;
  text-align: center;
}
.vn-table-title + .vn-table-wrap { margin-top: 0; border-top: 0; border-radius: 0 0 var(--vn-radius-md) var(--vn-radius-md); }
.vn-table--wide thead th { text-wrap: balance; }
.vn-table th,
.vn-table td { padding: var(--vn-space-3) var(--vn-space-4); border: 1px solid var(--vn-border); text-align: center; vertical-align: middle; }
.vn-table thead th { background: var(--vn-surface-alt); color: var(--vn-text-heading); font-weight: var(--vn-fw-semibold); }
.vn-table tbody th { color: var(--vn-text-heading); font-weight: var(--vn-fw-semibold); text-align: left; }
.vn-table td strong { color: var(--vn-text-heading); }
/* viền ngoài do khung (vn-table-wrap) vẽ */
.vn-table tr > :first-child { border-left: 0; }
.vn-table tr > :last-child { border-right: 0; }
.vn-table tr:first-child > * { border-top: 0; }
.vn-table tr:last-child > * { border-bottom: 0; }

/* vn-faq: Bootstrap accordion (5.0) đổi sang token; câu hỏi là heading chứa button (faq_item.html) */
.vn-faq { max-width: 48rem; margin-inline: auto; }
.vn-faq .accordion-item,
.vn-faq .accordion-item:not(:first-of-type) {
  margin-bottom: var(--vn-space-3);
  overflow: hidden;
  border: 1px solid var(--vn-border);
  border-radius: var(--vn-radius-md);
  background: var(--vn-white);
  box-shadow: var(--vn-shadow-sm);
}
.vn-faq .accordion-header { margin: 0; font-size: inherit; }
.vn-faq .accordion-button {
  min-height: var(--vn-tap);
  gap: var(--vn-space-3);
  padding: var(--vn-space-4) var(--vn-space-5);
  border-radius: 0;
  background: var(--vn-white);
  color: var(--vn-text-heading);
  font-family: inherit;
  font-size: var(--vn-fs-h4);
  font-weight: var(--vn-fw-semibold);
  line-height: 1.4;
  box-shadow: none;
}
.vn-faq .accordion-button:not(.collapsed) { background: var(--vn-surface-alt); color: var(--vn-text-heading); box-shadow: inset 3px 0 0 var(--vn-gold-500), inset 0 -1px 0 var(--vn-border); }
.vn-faq .accordion-button:focus { border-color: transparent; box-shadow: none; }
.vn-faq .accordion-button:focus-visible { outline: 3px solid var(--vn-gold-500); outline-offset: -3px; }
/* mũi tên: icon font thay SVG nền cứng màu xanh của Bootstrap */
.vn-faq .accordion-button::after,
.vn-faq .accordion-button:not(.collapsed)::after {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin-left: auto;
  background-image: none;
  content: "\F282";
  color: var(--vn-text-heading);
  font-family: bootstrap-icons;
  font-size: var(--vn-fs-lead);
  line-height: 1;
}
.vn-faq .accordion-button:not(.collapsed)::after { transform: rotate(-180deg); }
.vn-faq .accordion-body { padding: var(--vn-space-4) var(--vn-space-5) var(--vn-space-5); color: var(--vn-text-body); }
.vn-faq .accordion-body > :last-child { margin-bottom: 0; }

/* Hero thu vào bề rộng cột chữ (trang văn bản không ảnh): breadcrumb + H1 cùng mép trái với vn-prose (40rem) / vn-faq (48rem) */
.vn-hero--narrow .vn-hero__grid { max-width: 40rem; margin-inline: auto; }
@media (min-width: 768px) { .vn-hero--narrow .vn-hero__grid { max-width: 42rem; } } /* khớp cột .vn-policy 42rem */
.vn-hero--narrow-faq .vn-hero__grid { max-width: 48rem; }

/* ---------- 27. Nhóm Tin tức & trang chung (đợt 6B) ---------- */
/* Tiêu đề lớn hơn trong card (h2 của card Tầm nhìn / Sứ mệnh: giữ cấp h2 nhưng không to bằng h2 section) */
.vn-card__title--lg { font-size: var(--vn-fs-h3); line-height: var(--vn-lh-tight); }
.vn-card .vn-feature { align-items: flex-start; }
.vn-card .vn-feature > div > :last-child { margin-bottom: 0; }

/* Dòng thông tin dài trong card tin tức (tác giả | ngày > 25 ký tự nên giữ 16px) */
.vn-news-card__meta { margin: auto 0 0; color: var(--vn-text-muted); font-size: var(--vn-fs-body); }

/* Phân trang: nav > .vn-pagination__links (nút pill cao 44px) + chữ "Trang x / y" */
.vn-pagination { margin-top: var(--vn-space-6); }
.vn-pagination__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--vn-space-2); }
.vn-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--vn-space-4);
  border: 1px solid var(--vn-navy-900);
  border-radius: var(--vn-radius-pill);
  color: var(--vn-navy-900);
  font-weight: var(--vn-fw-medium);
  text-decoration: none;
  transition: background var(--vn-dur) var(--vn-ease), color var(--vn-dur) var(--vn-ease);
}
.vn-pagination__link:hover,
.vn-pagination__link:focus-visible { background: var(--vn-navy-900); color: var(--vn-white); }
.vn-pagination__current { padding: 0 var(--vn-space-3); color: var(--vn-text-body); font-weight: var(--vn-fw-medium); }

/* Khung bản đồ nhúng (iframe trong .ratio): cùng bo góc/viền với card */
.vn-map { overflow: hidden; border: 1px solid var(--vn-border); border-radius: var(--vn-radius-lg); }

/* Liên kết nằm trong câu (số điện thoại, email): vùng bấm cao 44px, navy gạch chân */
/* Link nội bộ nằm giữa đoạn văn (QĐ-20261028-05): giữ dòng chữ liền mạch, gạch chân để nhận ra là link */
.vn-text-link { color: var(--vn-navy-700); font-weight: var(--vn-fw-medium); text-decoration: underline; text-underline-offset: 0.15em; }
.vn-text-link:hover,
.vn-text-link:focus-visible { color: var(--vn-gold-700); }
.vn-link-inline { display: inline-flex; align-items: center; min-height: 44px; color: var(--vn-navy-700); font-weight: var(--vn-fw-semibold); text-decoration: underline; text-underline-offset: 0.15em; }
.vn-link-inline:hover,
.vn-link-inline:focus-visible { color: var(--vn-gold-700); }
/* Tên bài trong card tin: vùng bấm 44px kể cả khi tên chỉ một dòng (đệm bù bằng margin âm, bố cục không đổi) */
.vn-news-card__title a { display: block; padding-block: 11px; margin-block: -11px; }