@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BeVietnamPro-400-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/BeVietnamPro-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/BeVietnamPro-600-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/BeVietnamPro-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/BeVietnamPro-800-vietnamese.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/BeVietnamPro-800-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ═══════════════════════════════════════════════════════════════════════
   VietBaiC — toàn bộ giao diện nằm trong một tệp này. Một lượt tải, hết.

   Chữ: font hệ thống đứng đầu hàng, nên máy Apple dựng chữ bằng SF Pro có
   sẵn trong máy và KHÔNG tải một byte font nào. Máy Windows/Android mới rơi
   xuống Be Vietnam Pro — sáu tệp woff2 ở trên, tự chứa trên máy chủ nhà,
   khỏi gọi sang fonts.googleapis.com.

   Màu: chép từ chính vietbaic.com (--primary #6366f1, --secondary #f97316,
   --dark #1e293b) rồi chỉnh cho đủ tương phản khi đặt lên nền trắng.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Be Vietnam Pro",
          "Segoe UI", Roboto, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-so: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --nhan: #4f46e5;
  --nhan-dam: #4338ca;
  --nhan-nhat: #eef0ff;
  --cam: #f97316;
  --cam-dam: #ea580c;

  --muc: #0f1b30;      /* chữ tiêu đề */
  --chu: #26344a;      /* chữ thân bài */
  --nhe: #56677f;
  --mo: #8493a8;

  --nen: #f6f8fb;
  --mat: #ffffff;
  --vien: #e2e8f0;
  --vien-nhat: #eef1f6;
  --toi: #131c2e;

  --bo: 16px;
  --bo-nho: 11px;
  --bo-lon: 22px;
  --dinh-cao: 62px;

  --anh-1: 0 1px 2px rgba(15,27,48,.05), 0 1px 3px rgba(15,27,48,.05);
  --anh-2: 0 2px 6px -2px rgba(15,27,48,.06), 0 14px 30px -14px rgba(15,27,48,.16);
  --anh-3: 0 8px 16px -8px rgba(15,27,48,.10), 0 30px 60px -20px rgba(15,27,48,.22);
  --eas: cubic-bezier(.22,.68,.36,1);
}

@media (max-width: 782px) { :root { --dinh-cao: 56px; } }

/* Chuyển trang mượt ở trình duyệt có hỗ trợ; nơi khác bỏ qua, chẳng hỏng gì. */
@view-transition { navigation: auto; }

/* ─── nền chung ──────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--nen);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font);
  font-size: clamp(17.5px, 1.02rem + .3vw, 19px);
  line-height: 1.75;
  color: var(--chu);
  background: var(--nen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--nhan-dam); }

::selection { background: #dfe2ff; color: var(--muc); }

:focus-visible { outline: 2px solid var(--nhan); outline-offset: 2px; border-radius: 6px; }

.vbc-an {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.vbc-bo-qua {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--muc); color: #fff; padding: 12px 18px; border-radius: 0 0 12px 0;
  text-decoration: none;
}
.vbc-bo-qua:focus { left: 0; }

.vbc-bo { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.vbc-than { min-height: 50vh; }

/* Con số đứng cạnh nhau mà nhảy bề ngang thì bảng trông lỏng lẻo. */
.vbc-gia-so, .vbc-tg-so b, .vbc-noi table td, .vbc-bai-meta time {
  font-variant-numeric: tabular-nums;
}

/* ─── khung trên ─────────────────────────────────────────────────────── */

.vbc-dinh {
  position: sticky; top: 0; z-index: 50;
  height: var(--dinh-cao);
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid var(--vien);
}
@supports (backdrop-filter: blur(1px)) {
  .vbc-dinh { backdrop-filter: saturate(180%) blur(14px); }
}

.vbc-dinh-trong {
  max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 100%;
  display: flex; align-items: center; gap: 28px;
}
.vbc-dinh-logo { flex: none; display: flex; align-items: center; }
.vbc-dinh-logo img { height: 34px; width: auto; }

.vbc-dinh-menu { flex: 1; min-width: 0; }
.vbc-dinh-ds { display: flex; gap: 26px; list-style: none; padding: 0; margin: 0; }
.vbc-dinh-ds a {
  color: var(--muc); text-decoration: none; font-size: 15.5px; font-weight: 600;
  white-space: nowrap; transition: color .16s var(--eas);
}
.vbc-dinh-ds a:hover { color: var(--nhan); }

.vbc-dinh-phai { flex: none; display: flex; align-items: center; gap: 16px; }
.vbc-dinh-dt { color: var(--muc); font-weight: 700; font-size: 15.5px; text-decoration: none; }
.vbc-dinh-nut {
  background: var(--cam); color: #fff; text-decoration: none;
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(249,115,22,.8);
  transition: background .16s var(--eas), transform .16s var(--eas);
}
.vbc-dinh-nut:hover { background: var(--cam-dam); transform: translateY(-1px); }

/* menu điện thoại — <details>, chạy được mà chẳng cần một dòng JS */
.vbc-dinh-gap { display: none; margin-left: auto; }
.vbc-dinh-gap > summary {
  list-style: none; cursor: pointer; width: 42px; height: 42px;
  display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--vien);
  background: var(--mat);
}
.vbc-dinh-gap > summary::-webkit-details-marker { display: none; }
.vbc-gach, .vbc-gach::before, .vbc-gach::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--muc);
  transition: transform .2s var(--eas), opacity .15s;
}
.vbc-gach { position: relative; }
.vbc-gach::before { content: ""; position: absolute; top: -6px; }
.vbc-gach::after  { content: ""; position: absolute; top: 6px; }
.vbc-dinh-gap[open] .vbc-gach { background: transparent; }
.vbc-dinh-gap[open] .vbc-gach::before { transform: translateY(6px) rotate(45deg); }
.vbc-dinh-gap[open] .vbc-gach::after  { transform: translateY(-6px) rotate(-45deg); }

.vbc-dinh-gap-trong {
  position: fixed; left: 0; right: 0; top: var(--dinh-cao);
  background: var(--mat); border-bottom: 1px solid var(--vien);
  padding: 14px 20px 22px; box-shadow: var(--anh-2);
  max-height: calc(100dvh - var(--dinh-cao)); overflow-y: auto;
}
.vbc-dinh-gap-trong ul { list-style: none; padding: 0; margin: 0 0 14px; }
.vbc-dinh-gap-trong li + li { border-top: 1px solid var(--vien-nhat); }
.vbc-dinh-gap-trong li a {
  display: block; padding: 14px 2px; color: var(--muc);
  font-weight: 600; font-size: 17px; text-decoration: none;
}
.vbc-dinh-gap-nut {
  display: block; text-align: center; background: var(--cam); color: #fff;
  padding: 15px; border-radius: 14px; font-weight: 700; text-decoration: none;
}
.vbc-dinh-gap-dt {
  display: block; text-align: center; margin-top: 10px; padding: 13px;
  border: 1px solid var(--vien); border-radius: 14px; color: var(--muc);
  font-weight: 700; text-decoration: none;
}

@media (max-width: 940px) {
  .vbc-dinh-menu, .vbc-dinh-phai { display: none; }
  .vbc-dinh-gap { display: block; }
}

/* ─── thanh tiến độ đọc ──────────────────────────────────────────────── */
/* Chạy bằng CSS, không tốn một dòng JS. Trình duyệt chưa hỗ trợ thì thanh
   nằm im ở 0 — tức là vô hình, chứ chẳng vỡ gì. */

.vbc-tien {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--nhan), var(--cam));
}
@supports (animation-timeline: scroll()) {
  .vbc-tien { animation: vbc-chay linear both; animation-timeline: scroll(root block); }
  @keyframes vbc-chay { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) { .vbc-tien { display: none; } }

/* ─── đường dẫn phân cấp ─────────────────────────────────────────────── */

.vbc-dd { padding: 18px 0 4px; font-size: 14.5px; color: var(--mo); }
.vbc-dd .vbc-bo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vbc-dd a { color: var(--nhe); text-decoration: none; }
.vbc-dd a:hover { color: var(--nhan); text-decoration: underline; }
.vbc-dd [aria-current] { color: var(--mo); }
.vbc-dd .rank-math-breadcrumb p { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* ─── khung bài viết ─────────────────────────────────────────────────── */

.vbc-luoi-bai {
  display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 60px;
  align-items: start; padding-top: 14px; padding-bottom: 30px;
}
.vbc-cot-chinh { min-width: 0; max-width: 760px; }
.vbc-cot-phai { min-width: 0; }
.vbc-dinh-theo { position: sticky; top: calc(var(--dinh-cao) + 18px); display: grid; gap: 16px; }

@media (max-width: 1060px) {
  .vbc-luoi-bai { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vbc-cot-phai { display: none; }
  .vbc-cot-chinh { max-width: 720px; margin: 0 auto; }
}

.vbc-bai-dau { padding: 10px 0 6px; }
.vbc-bai-tit {
  font-size: clamp(29px, 1.5rem + 2.4vw, 46px);
  line-height: 1.14; font-weight: 800; letter-spacing: -.028em;
  color: var(--muc); text-wrap: balance; margin: 0 0 16px;
}
.vbc-bai-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14.5px; color: var(--nhe);
}
.vbc-bai-tg { font-weight: 700; color: var(--muc); }
.vbc-cham { width: 3px; height: 3px; border-radius: 50%; background: var(--mo); display: block; }

.vbc-bai-bia { margin: 26px 0 6px; }
.vbc-bai-bia img {
  width: 100%; border-radius: var(--bo-lon); box-shadow: var(--anh-2);
  aspect-ratio: 16 / 9; object-fit: cover;
}

/* ═══ chữ trong thân bài ═════════════════════════════════════════════════
   Đây là chỗ WordPress mặc định làm xấu nhất: tiêu đề bé, gạch đầu dòng
   chấm tròn đen, bảng kẻ ô như bảng tính, ảnh vuông góc. Vẽ lại hết.
   ═══════════════════════════════════════════════════════════════════════ */

.vbc-noi { padding-top: 22px; }
.vbc-noi > *:first-child { margin-top: 0; }

.vbc-noi p { margin: 0 0 1.15em; text-wrap: pretty; }

/* Đoạn mở bài to hơn một nhịp — mắt vào trang là bám được ngay. */
.vbc-noi > p:first-of-type { font-size: 1.09em; line-height: 1.68; color: #1c2942; }

.vbc-noi h2, .vbc-noi h3, .vbc-noi h4 {
  color: var(--muc); text-wrap: balance;
  scroll-margin-top: calc(var(--dinh-cao) + 22px);
}
.vbc-noi h2 strong, .vbc-noi h3 strong, .vbc-noi h4 strong { font-weight: inherit; color: inherit; }

.vbc-noi h2 {
  position: relative; padding-top: 20px;
  font-size: clamp(24px, 1.15rem + 1.4vw, 32px);
  line-height: 1.24; font-weight: 800; letter-spacing: -.022em;
  margin: 2.3em 0 .65em;
}
.vbc-noi h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--nhan), var(--cam));
}
.vbc-noi h3 {
  font-size: clamp(19.5px, 1.02rem + .55vw, 23px);
  line-height: 1.35; font-weight: 700; letter-spacing: -.012em;
  margin: 1.9em 0 .5em;
}
.vbc-noi h3::before {
  content: ""; display: inline-block; width: 9px; height: 9px;
  border-radius: 3px; background: var(--nhan); margin-right: 11px; vertical-align: 2px;
}
.vbc-noi h4 { font-size: 1.02em; font-weight: 700; margin: 1.6em 0 .45em; }

/* Mã neo cạnh tiêu đề — hiện khi rê chuột, chạm vào thì luôn hiện mờ. */
.vbc-neo {
  margin-left: 10px; color: var(--mo); text-decoration: none; font-weight: 400;
  opacity: 0; transition: opacity .15s;
}
h2:hover > .vbc-neo, h3:hover > .vbc-neo, .vbc-neo:focus-visible { opacity: 1; }

.vbc-noi a {
  color: var(--nhan-dam); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--nhan) 36%, transparent);
  transition: text-decoration-color .15s, color .15s;
}
.vbc-noi a:hover { text-decoration-color: currentColor; }

.vbc-noi strong, .vbc-noi b { font-weight: 700; color: var(--muc); }
.vbc-noi em { font-style: italic; }

/* gạch đầu dòng: chấm tròn có quầng, thay cho chấm đen mặc định */
.vbc-noi ul { list-style: none; padding: 0; margin: 0 0 1.45em; }
.vbc-noi ul > li { position: relative; padding-left: 30px; margin: 0 0 .62em; }
.vbc-noi ul > li::before {
  content: ""; position: absolute; left: 6px; top: .66em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--nhan);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--nhan) 12%, transparent);
}

/* danh sách đánh số: số nằm trong huy hiệu bo góc */
.vbc-noi ol { list-style: none; counter-reset: vbc; padding: 0; margin: 0 0 1.45em; }
.vbc-noi ol > li { counter-increment: vbc; position: relative; padding-left: 46px; margin: 0 0 .78em; }
.vbc-noi ol > li::before {
  content: counter(vbc); position: absolute; left: 0; top: .04em;
  width: 30px; height: 30px; border-radius: 10px;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--nhan-dam); background: var(--nhan-nhat);
  border: 1px solid color-mix(in oklab, var(--nhan) 18%, transparent);
  font-variant-numeric: tabular-nums;
}
.vbc-noi li > ul, .vbc-noi li > ol { margin: .55em 0 0; }
.vbc-noi li > ul > li::before { background: var(--mo); box-shadow: none; width: 6px; height: 6px; top: .74em; }

/* trích dẫn: một tấm thẻ, không phải cái gạch dọc quen mắt */
.vbc-noi blockquote {
  position: relative; margin: 2.1em 0; padding: 26px 30px 22px;
  background: linear-gradient(180deg, var(--nhan-nhat), #fff);
  border: 1px solid color-mix(in oklab, var(--nhan) 16%, var(--vien));
  border-radius: var(--bo-lon); font-size: 1.05em; color: #1c2942;
}
.vbc-noi blockquote::before {
  content: "”"; position: absolute; top: 2px; right: 24px;
  font-size: 76px; line-height: 1; font-family: Georgia, "Times New Roman", serif;
  color: color-mix(in oklab, var(--nhan) 22%, transparent);
}
.vbc-noi blockquote > *:last-child { margin-bottom: 0; }
.vbc-noi blockquote cite, .vbc-noi blockquote .wp-block-quote__citation {
  display: block; margin-top: 12px; font-size: 14.5px; color: var(--nhe); font-style: normal;
}

/* ảnh */
.vbc-noi figure { margin: 2.1em 0; }
.vbc-noi img { border-radius: var(--bo); }
.vbc-noi figcaption {
  margin-top: 11px; font-size: 14.5px; line-height: 1.5;
  color: var(--nhe); text-align: center;
}

/* bảng */
.vbc-bang-cuon {
  overflow-x: auto; margin: 2em 0; background: var(--mat);
  border: 1px solid var(--vien); border-radius: var(--bo);
  box-shadow: var(--anh-1); overscroll-behavior-x: contain;
}
.vbc-noi table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .94em; }
.vbc-noi thead th, .vbc-noi th {
  background: #f3f6fa; color: var(--muc); font-weight: 700; text-align: left;
  padding: 14px 16px; border-bottom: 1px solid var(--vien); line-height: 1.4;
}
.vbc-noi td { padding: 13px 16px; border-bottom: 1px solid var(--vien-nhat); vertical-align: top; line-height: 1.6; }
.vbc-noi tbody tr:nth-child(2n) td { background: #fafbfd; }
.vbc-noi tbody tr:last-child td { border-bottom: 0; }
.vbc-noi table + figcaption, .wp-block-table figcaption { margin-top: 10px; }

/* mã, đường kẻ */
.vbc-noi code {
  font-family: var(--font-so); font-size: .88em;
  background: #eef1f7; padding: .16em .42em; border-radius: 6px; color: #33405a;
}
.vbc-noi pre {
  font-family: var(--font-so); font-size: .86em; line-height: 1.65;
  background: var(--toi); color: #dbe3f0; padding: 20px 22px;
  border-radius: var(--bo); overflow-x: auto; margin: 2em 0;
}
.vbc-noi pre code { background: none; padding: 0; color: inherit; }
.vbc-noi hr, .vbc-noi .wp-block-separator {
  border: 0; height: 4px; width: 60px; margin: 2.8em auto;
  border-radius: 3px; background: linear-gradient(90deg, var(--nhan), var(--cam));
  opacity: .5;
}

/* lớp căn lề của WordPress — CSS gốc của khối đã gỡ nên phải tự lo */
.vbc-noi .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.vbc-noi .alignleft { float: left; margin: .35em 1.6em 1.1em 0; max-width: 46%; }
.vbc-noi .alignright { float: right; margin: .35em 0 1.1em 1.6em; max-width: 46%; }
.vbc-noi .alignwide { width: min(100vw - 40px, 960px); margin-left: 50%; transform: translateX(-50%); max-width: none; }
.vbc-noi .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); max-width: none; }
.vbc-noi .alignfull img, .vbc-noi .alignwide img { width: 100%; }
.vbc-noi .has-text-align-center { text-align: center; }
.vbc-noi .has-text-align-right { text-align: right; }
.vbc-noi .has-text-align-left { text-align: left; }
.vbc-noi .wp-block-image { margin: 2.1em 0; }
.vbc-noi .wp-block-image img { width: 100%; }
.vbc-noi .wp-block-image.alignleft img, .vbc-noi .wp-block-image.alignright img { width: auto; }
.vbc-noi .wp-block-embed__wrapper { position: relative; }
.vbc-noi .wp-block-embed iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; border-radius: var(--bo); }
.vbc-noi .screen-reader-text { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .vbc-noi .alignleft, .vbc-noi .alignright { float: none; max-width: 100%; margin: 1.6em 0; }
  .vbc-noi .alignwide, .vbc-noi .alignfull { width: auto; margin-left: 0; transform: none; }
}

/* Bài 1894 mang sẵn bộ giao diện riêng (.vbcx). Đừng chồng lên nó. */
.vbc-noi .vbcx :where(h2, h3)::before { content: none; }
.vbc-noi .vbcx :where(ul, ol) { list-style: revert; padding-left: 1.5em; }
.vbc-noi .vbcx :where(ul, ol) > li { padding-left: 0; counter-increment: none; }
.vbc-noi .vbcx :where(ul, ol) > li::before { content: none; }

/* ═══ cột phải ═══════════════════════════════════════════════════════════
   Ba thẻ, xếp theo đúng thứ tự người đọc cần: đang ở đâu trong bài · thử
   công cụ · gọi người thật. Đảo lại là biến cột phải thành chỗ treo quảng
   cáo, mà quảng cáo thì mắt người bỏ qua theo phản xạ.
   ═══════════════════════════════════════════════════════════════════════ */

.vbc-the-hop {
  background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-lon); padding: 18px 20px; box-shadow: var(--anh-1);
}
.vbc-the-dau {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--mo); margin-bottom: 12px;
}

/* mục lục */
.vbc-ml--cot .vbc-ml-ds {
  list-style: none; padding: 0; margin: 0;
  max-height: min(46vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.vbc-ml-ds li { margin: 0; }
.vbc-ml-ds a {
  display: block; padding: 7px 12px; border-left: 2px solid var(--vien);
  color: var(--nhe); text-decoration: none; font-size: 15px; line-height: 1.45;
  transition: color .15s, border-color .15s, background .15s;
}
.vbc-ml-ds a:hover { color: var(--nhan-dam); background: #f7f8fd; }
.vbc-ml-b3 a { padding-left: 24px; font-size: 14.2px; }
.vbc-ml-ds a[aria-current="true"] {
  color: var(--nhan-dam); border-left-color: var(--nhan); font-weight: 600; background: var(--nhan-nhat);
}

/* mục lục trên điện thoại: gấp lại được, nằm ngay dưới đoạn mở */
.vbc-ml--dt {
  margin: 24px 0 4px; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo); overflow: hidden;
}
.vbc-ml--dt > summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-weight: 700; color: var(--muc);
}
.vbc-ml--dt > summary::-webkit-details-marker { display: none; }
.vbc-ml--dt > summary small { color: var(--mo); font-weight: 500; font-size: 14px; }
.vbc-ml--dt > summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: auto;
  border-right: 2px solid var(--mo); border-bottom: 2px solid var(--mo);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--eas);
}
.vbc-ml--dt[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.vbc-ml--dt .vbc-ml-ds { list-style: none; padding: 0 18px 16px; margin: 0; }
.vbc-ml--dt .vbc-ml-ds a { padding: 8px 12px; }
@media (min-width: 1061px) { .vbc-ml--dt { display: none; } }

/* ═══ khối kiểm tra website ══════════════════════════════════════════════
   Bậc thang thấp nhất của phễu. Đặt một Ô NHẬP thật chứ không phải một cái
   nút: mắt người bỏ qua thứ trông giống banner, nhưng công cụ thì người ta
   thử. Nền tối để nó tách khỏi trang chữ trắng mà chẳng cần viền chớp nháy.
   ═══════════════════════════════════════════════════════════════════════ */

.vbc-kt {
  position: relative; overflow: hidden;
  background: linear-gradient(157deg, #1e1b4b 0%, #312e81 52%, #4338ca 100%);
  color: #e7ebfa; border-radius: var(--bo-lon); padding: 22px;
  box-shadow: 0 14px 34px -18px rgba(49,46,129,.85);
}
.vbc-kt::after {
  content: ""; position: absolute; width: 260px; height: 260px; right: -110px; top: -130px;
  border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.30), transparent 68%);
  pointer-events: none;
}
.vbc-kt > * { position: relative; }
.vbc-kt-nhan {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #ffd6a8;
  background: rgba(249,115,22,.18); border: 1px solid rgba(249,115,22,.4);
  padding: 4px 11px; border-radius: 999px; margin-bottom: 12px;
}
.vbc-kt-hoi {
  font-size: 20px; line-height: 1.32; font-weight: 700; color: #fff;
  letter-spacing: -.015em; margin: 0 0 15px; text-wrap: balance;
}
.vbc-kt-form { display: grid; gap: 9px; }
.vbc-kt-form input {
  width: 100%; padding: 13px 15px; border-radius: 13px; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.97); color: #16203a; font-size: 16px;
}
.vbc-kt-form input::placeholder { color: #8a97ab; }
.vbc-kt-form input:focus { outline: 2px solid #ffb066; outline-offset: 1px; }
.vbc-kt-form button {
  width: 100%; padding: 13px 16px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--cam); color: #fff; font-weight: 700; font-size: 15.5px;
  box-shadow: 0 8px 20px -10px rgba(249,115,22,.95);
  transition: background .16s var(--eas), transform .16s var(--eas);
}
.vbc-kt-form button:hover { background: var(--cam-dam); transform: translateY(-1px); }
.vbc-kt-chan {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 13px 0 0; font-size: 13.5px; color: #b9c2e4;
}
.vbc-kt-chan strong { color: #fff; font-weight: 700; }
.vbc-kt-chan a { color: #ffd6a8; text-decoration: underline; text-underline-offset: 2px; }

/* bản chèn giữa bài — rộng ngang cột chữ, hai cột trên màn hình lớn */
.vbc-kt--trong-bai { margin: 2.6em 0; padding: 26px 28px; }
.vbc-kt--trong-bai .vbc-kt-hoi { font-size: clamp(20px, 1.1rem + .7vw, 25px); }
@media (min-width: 620px) {
  .vbc-kt--trong-bai .vbc-kt-form { grid-template-columns: 1fr auto; }
  .vbc-kt--trong-bai .vbc-kt-form button { width: auto; padding-inline: 26px; }
}

/* bản dải — cuối trang danh sách, trang 404 */
.vbc-kt--bang { padding: clamp(26px, 4vw, 40px); text-align: center; margin: 8px 0; }
.vbc-kt--bang .vbc-kt-hoi { font-size: clamp(22px, 1.2rem + 1.1vw, 30px); }
.vbc-kt--bang .vbc-kt-form { max-width: 540px; margin: 0 auto; }
.vbc-kt--bang .vbc-kt-chan { justify-content: center; }
@media (min-width: 620px) {
  .vbc-kt--bang .vbc-kt-form { grid-template-columns: 1fr auto; }
  .vbc-kt--bang .vbc-kt-form button { width: auto; padding-inline: 26px; }
}

/* liên hệ nhanh */
.vbc-lh p { font-size: 15px; line-height: 1.6; color: var(--nhe); margin: 0 0 14px; }
.vbc-lh-nut {
  display: block; text-align: center; padding: 12px; border-radius: 13px;
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: transform .16s var(--eas), background .16s var(--eas);
}
.vbc-lh-nut:hover { transform: translateY(-1px); }
.vbc-lh-zalo { background: #0068ff; color: #fff; }
.vbc-lh-zalo:hover { background: #0056d6; }
.vbc-lh-goi { margin-top: 9px; border: 1px solid var(--vien); color: var(--muc); background: var(--mat); }
.vbc-lh-goi:hover { background: #f7f9fc; }

/* ─── thẻ chủ đề + chia sẻ ───────────────────────────────────────────── */

.vbc-the-bai {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin: 2.4em 0 0; padding-top: 22px; border-top: 1px solid var(--vien);
  font-size: 14.5px;
}
.vbc-the-bai > span { color: var(--mo); font-weight: 600; margin-right: 2px; }
.vbc-the-bai a {
  padding: 6px 13px; border-radius: 999px; background: var(--mat);
  border: 1px solid var(--vien); color: var(--nhe); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.vbc-the-bai a:hover { border-color: var(--nhan); color: var(--nhan-dam); }

.vbc-chia {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 22px 0 6px; font-size: 14.5px; color: var(--nhe);
}
.vbc-chia > span { margin-right: 4px; }
.vbc-chia-nut {
  padding: 8px 16px; border-radius: 999px; border: 1px solid var(--vien);
  background: var(--mat); color: var(--muc); font-weight: 600; font-size: 14px;
  text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s;
}
.vbc-chia-nut:hover { border-color: var(--nhan); color: var(--nhan-dam); }
.vbc-chia-nut.vbc-xong { border-color: #16a34a; color: #15803d; }

/* ─── phần cuối trang ────────────────────────────────────────────────── */

.vbc-cuoi { display: grid; gap: clamp(30px, 5vw, 48px); padding: 12px 20px 64px; }
.vbc-cuoi h2 {
  font-size: clamp(22px, 1.1rem + 1.1vw, 28px); font-weight: 800;
  letter-spacing: -.02em; color: var(--muc); margin: 0 0 6px; text-wrap: balance;
}

/* ai viết bài này — dấu vết pháp nhân có thật, thứ Google và AI đều dò */
.vbc-tg {
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon);
  padding: clamp(20px, 3vw, 28px); box-shadow: var(--anh-1);
}
.vbc-tg-dau { display: flex; align-items: center; gap: 16px; }
.vbc-tg-logo { height: 38px; width: auto; flex: none; }
.vbc-tg-ten { font-size: 18px; font-weight: 800; color: var(--muc); letter-spacing: -.01em; }
.vbc-tg-mo { font-size: 15px; color: var(--nhe); margin: 2px 0 0; }
.vbc-tg-so {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 20px 0 16px; padding: 18px 0; border-block: 1px solid var(--vien-nhat);
}
.vbc-tg-so div { display: grid; gap: 3px; }
.vbc-tg-so b {
  font-size: clamp(18px, 1rem + .8vw, 24px); font-weight: 800;
  color: var(--nhan-dam); letter-spacing: -.02em; line-height: 1.15;
}
.vbc-tg-so span { font-size: 13.5px; color: var(--nhe); line-height: 1.4; }
.vbc-tg-phap { font-size: 13.5px; color: var(--mo); line-height: 1.55; margin: 0; }
@media (max-width: 560px) { .vbc-tg-so { grid-template-columns: 1fr; gap: 12px; } }

/* ba gói */
.vbc-gia-mo { color: var(--nhe); font-size: 15.5px; margin: 0 0 20px; }
.vbc-gia-hang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vbc-gia-the {
  position: relative; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-lon); padding: 24px 22px; box-shadow: var(--anh-1);
  display: flex; flex-direction: column;
  transition: transform .18s var(--eas), box-shadow .18s var(--eas);
}
.vbc-gia-the:hover { transform: translateY(-2px); box-shadow: var(--anh-2); }
.vbc-gia-the--nhan { border-color: var(--nhan); box-shadow: 0 0 0 3px var(--nhan-nhat), var(--anh-1); }
.vbc-gia-co {
  position: absolute; top: -11px; left: 22px; background: var(--nhan); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.vbc-gia-ten {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mo); margin-bottom: 8px;
}
.vbc-gia-so {
  font-size: clamp(22px, 1.1rem + 1vw, 27px); font-weight: 800;
  color: var(--muc); letter-spacing: -.028em; line-height: 1.1;
}
.vbc-gia-so small { font-size: 15px; font-weight: 600; color: var(--mo); letter-spacing: 0; }
.vbc-gia-mota { font-size: 15px; color: var(--nhe); margin: 10px 0 18px; flex: 1; }
.vbc-gia-nut {
  display: block; text-align: center; padding: 12px; border-radius: 13px;
  border: 1px solid var(--vien); color: var(--muc); background: var(--mat);
  font-weight: 700; font-size: 15px; text-decoration: none;
  transition: background .16s var(--eas), border-color .16s var(--eas);
}
.vbc-gia-nut:hover { background: #f7f9fc; border-color: var(--nhan); color: var(--nhan-dam); }
.vbc-gia-the--nhan .vbc-gia-nut { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.vbc-gia-the--nhan .vbc-gia-nut:hover { background: var(--nhan-dam); color: #fff; }
@media (max-width: 860px) { .vbc-gia-hang { grid-template-columns: 1fr; } .vbc-gia-co { top: -11px; } }

/* ─── lưới thẻ bài ───────────────────────────────────────────────────── */

.vbc-luoi {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 20px;
}
.vbc-lq { content-visibility: auto; contain-intrinsic-size: auto 420px; }

.vbc-the {
  display: flex; flex-direction: column; background: var(--mat);
  border: 1px solid var(--vien); border-radius: var(--bo-lon); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--anh-1);
  transition: transform .2s var(--eas), box-shadow .2s var(--eas), border-color .2s var(--eas);
}
.vbc-the:hover { transform: translateY(-3px); box-shadow: var(--anh-2); border-color: #d3dbe6; }
.vbc-the-khung { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #eef1f6; }
.vbc-the-anh { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--eas); }
.vbc-the:hover .vbc-the-anh { transform: scale(1.035); }
/* Bài chưa gắn ảnh và cũng chẳng có ảnh nào trong thân bài. Một ô xám trông
   như ảnh hỏng, nên dựng hẳn một mảng màu thương hiệu — nhìn ra là cố ý. */
.vbc-the-trong {
  display: grid; place-items: center; font-weight: 800; font-size: 30px;
  letter-spacing: .06em; color: rgba(255,255,255,.92);
  background:
    radial-gradient(90% 120% at 88% -12%, rgba(249,115,22,.55), transparent 62%),
    linear-gradient(152deg, #312e81 0%, #4338ca 58%, #5b53e8 100%);
  text-shadow: 0 1px 10px rgba(15,27,48,.35);
}
.vbc-the-noi { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.vbc-the-tit {
  font-size: 17.5px; line-height: 1.35; font-weight: 700; color: var(--muc);
  letter-spacing: -.012em; text-wrap: pretty;
}
.vbc-the:hover .vbc-the-tit { color: var(--nhan-dam); }
.vbc-the-tom { font-size: 14.8px; line-height: 1.55; color: var(--nhe); flex: 1; }
.vbc-the-phut { font-size: 13.2px; color: var(--mo); }

/* thẻ đầu trang danh sách: to gấp đôi, nằm ngang trên màn hình rộng */
@media (min-width: 900px) {
  .vbc-the--to { grid-column: span 2; flex-direction: row; }
  .vbc-the--to .vbc-the-khung { width: 52%; aspect-ratio: auto; flex: none; }
  .vbc-the--to .vbc-the-noi { padding: 26px 28px; justify-content: center; gap: 10px; }
  .vbc-the--to .vbc-the-tit { font-size: clamp(20px, 1rem + .9vw, 25px); line-height: 1.25; letter-spacing: -.02em; }
  .vbc-the--to .vbc-the-tom { font-size: 15.5px; flex: none; }
}
.vbc-luoi-chen { grid-column: 1 / -1; }

/* ─── trang danh sách ────────────────────────────────────────────────── */

.vbc-ds-dau { padding: 26px 0 30px; max-width: 720px; }
.vbc-ds-dau h1 {
  font-size: clamp(30px, 1.6rem + 2.2vw, 44px); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.12; color: var(--muc); text-wrap: balance;
}
.vbc-ds-dau p { margin: 12px 0 20px; font-size: 17px; line-height: 1.65; color: var(--nhe); }

.vbc-tim { display: flex; gap: 9px; max-width: 480px; }
.vbc-tim input {
  flex: 1; min-width: 0; padding: 12px 16px; font-size: 16px;
  border: 1px solid var(--vien); border-radius: 13px; background: var(--mat); color: var(--muc);
}
.vbc-tim input::placeholder { color: var(--mo); }
.vbc-tim button {
  padding: 12px 22px; border: 0; border-radius: 13px; cursor: pointer;
  background: var(--muc); color: #fff; font-weight: 700;
  transition: background .16s var(--eas);
}
.vbc-tim button:hover { background: #24334d; }

.vbc-trang, .navigation.pagination { margin: 40px 0 10px; }
.vbc-trang .nav-links, .navigation.pagination .nav-links {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center;
}
.vbc-trang .page-numbers, .navigation.pagination .page-numbers {
  min-width: 42px; height: 42px; padding: 0 14px; border-radius: 12px;
  display: inline-grid; place-items: center; background: var(--mat);
  border: 1px solid var(--vien); color: var(--nhe); text-decoration: none; font-weight: 600;
  transition: border-color .15s, color .15s;
}
.vbc-trang .page-numbers:hover { border-color: var(--nhan); color: var(--nhan-dam); }
.vbc-trang .page-numbers.current { background: var(--nhan); border-color: var(--nhan); color: #fff; }
.vbc-trang .screen-reader-text { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

/* trang tĩnh không dựng bằng Elementor */
.vbc-trang-don { max-width: 760px; padding-top: 20px; padding-bottom: 50px; }
.vbc-trang-don .vbc-bai-tit { margin-bottom: 6px; }

/* ─── trang rỗng / 404 ───────────────────────────────────────────────── */

.vbc-rong { max-width: 720px; margin: 0 auto; padding: 46px 20px 60px; text-align: center; }
.vbc-rong h1, .vbc-rong h2 {
  font-size: clamp(24px, 1.3rem + 1.4vw, 34px); font-weight: 800;
  letter-spacing: -.025em; color: var(--muc); margin-bottom: 10px; text-wrap: balance;
}
.vbc-rong p { color: var(--nhe); margin-bottom: 24px; }
.vbc-rong .vbc-tim { margin: 0 auto 28px; }
.vbc-404-so {
  display: block; font-size: clamp(64px, 12vw, 104px); font-weight: 800;
  letter-spacing: -.05em; line-height: 1;
  background: linear-gradient(120deg, var(--nhan), var(--cam));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 6px;
}

/* ─── thanh dưới trên điện thoại ─────────────────────────────────────── */

.vbc-thanh {
  position: fixed; inset: auto 0 0 0; z-index: 55; display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94); border-top: 1px solid var(--vien);
  box-shadow: 0 -6px 24px -12px rgba(15,27,48,.3);
  animation: vbc-len .26s var(--eas) both;
}
@supports (backdrop-filter: blur(1px)) { .vbc-thanh { backdrop-filter: saturate(180%) blur(14px); } }
@keyframes vbc-len { from { transform: translateY(100%); } to { transform: none; } }
.vbc-thanh[hidden] { display: none; }
.vbc-thanh-chinh {
  flex: 1; text-align: center; padding: 14px; border-radius: 14px;
  background: var(--cam); color: #fff; font-weight: 700; font-size: 15.5px; text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(249,115,22,.95);
}
.vbc-thanh-phu {
  flex: none; width: 52px; display: grid; place-items: center; border-radius: 14px;
  border: 1px solid var(--vien); color: var(--muc); background: var(--mat);
}
@media (min-width: 1061px) { .vbc-thanh { display: none !important; } }
/* Chừa chỗ cho thanh dưới, khỏi đè lên dòng cuối chân trang. */
@media (max-width: 1060px) { .vbc-chan-cuoi { padding-bottom: 84px; } }

/* ─── khung dưới ─────────────────────────────────────────────────────── */

.vbc-chan { background: var(--toi); color: rgba(255,255,255,.72); margin-top: 20px; }
.vbc-chan-trong {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px;
  padding-top: clamp(40px, 6vw, 60px); padding-bottom: 36px;
}
.vbc-chan-ten { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-bottom: 12px; }
.vbc-chan-cot p { font-size: 14.8px; line-height: 1.7; margin-bottom: 12px; }
.vbc-chan-nhan {
  font-size: 12.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin-bottom: 14px;
}
.vbc-chan-cot a {
  display: block; color: rgba(255,255,255,.75); text-decoration: none;
  font-size: 15px; padding: 6px 0; transition: color .15s;
}
.vbc-chan-cot a:hover { color: #fff; }
.vbc-chan-cuoi {
  border-top: 1px solid rgba(255,255,255,.1); padding: 20px;
  text-align: center; font-size: 13.5px; color: rgba(255,255,255,.5);
}
@media (max-width: 780px) { .vbc-chan-trong { grid-template-columns: 1fr; gap: 30px; } }

/* ─── in giấy ────────────────────────────────────────────────────────── */

@media print {
  .vbc-dinh, .vbc-chan, .vbc-cot-phai, .vbc-thanh, .vbc-tien, .vbc-kt,
  .vbc-chia, .vbc-lq, .vbc-gia, .vbc-dd, .vbc-ml--dt { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .vbc-luoi-bai { display: block; }
  .vbc-noi a { text-decoration: none; color: #000; }
}

/* ─── ai bảo bớt chuyển động thì bớt hết ─────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ba dòng nội dung trong thẻ giá */
.vbc-gia-y { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; flex: 1; }
.vbc-gia-y li {
  position: relative; padding-left: 26px; font-size: 14.6px; line-height: 1.5; color: var(--nhe);
}
.vbc-gia-y li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 7px;
  border-left: 2px solid var(--nhan); border-bottom: 2px solid var(--nhan);
  transform: rotate(-45deg); border-radius: 1px;
}
.vbc-gia-mota { flex: none; margin-bottom: 16px; }
.vbc-gia-so small { margin-left: 4px; }
.vbc-the { height: 100%; }

/* ─── trang Bảng giá ─────────────────────────────────────────────────── */

.vbc-bg-hang { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.vbc-bg-the {
  position: relative; background: var(--mat); border: 1px solid var(--vien);
  border-radius: var(--bo-lon); padding: 28px 24px; box-shadow: var(--anh-1);
  display: flex; flex-direction: column; height: 100%;
}
.vbc-bg-the--nhan { border-color: var(--nhan); box-shadow: 0 0 0 3px var(--nhan-nhat), var(--anh-2); }
.vbc-bg-mo { font-size: 15px; color: var(--nhe); margin: 0 0 14px; }
.vbc-bg-the .vbc-gia-so { margin-bottom: 20px; }
.vbc-bg-ds { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 11px; flex: 1; }
.vbc-bg-ds li {
  position: relative; padding-left: 27px; font-size: 15.2px; line-height: 1.5; color: var(--nhe);
}
.vbc-bg-ds li b { color: var(--muc); font-variant-numeric: tabular-nums; }
.vbc-bg-ds li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 13px; height: 7px;
  border-left: 2px solid var(--nhan); border-bottom: 2px solid var(--nhan);
  transform: rotate(-45deg); border-radius: 1px;
}
.vbc-bg-ho-tro {
  background: #eefdf5; border: 1px solid #bbf0d6; border-radius: 14px;
  padding: 14px 16px; margin-bottom: 18px;
}
.vbc-bg-ho-tro-h { font-weight: 700; color: #047857; font-size: 15px; margin-bottom: 3px; }
.vbc-bg-ho-tro p { font-size: 14.2px; line-height: 1.5; color: #065f46; margin: 0; }
.vbc-bg-nut {
  display: block; text-align: center; padding: 14px; border-radius: 14px;
  background: var(--cam); color: #fff; font-weight: 700; text-decoration: none;
  box-shadow: 0 8px 20px -12px rgba(249,115,22,.95);
  transition: background .16s var(--eas), transform .16s var(--eas);
}
.vbc-bg-nut:hover { background: var(--cam-dam); transform: translateY(-1px); }
.vbc-bg-hd { font-size: 13.5px; color: var(--mo); text-align: center; margin: 12px 0 0; }
@media (max-width: 900px) { .vbc-bg-hang { grid-template-columns: 1fr; } }

.vbc-cam {
  display: flex; gap: 20px; align-items: flex-start; margin: 40px 0 0;
  background: #f0fdf6; border: 1px solid #bbf0d6; border-radius: var(--bo-lon);
  padding: clamp(22px, 3vw, 30px);
}
.vbc-cam-icon { flex: none; color: #059669; }
.vbc-cam h2 { font-size: 20px; font-weight: 800; color: #065f46; margin: 0 0 6px; letter-spacing: -.015em; }
.vbc-cam p { font-size: 15.5px; line-height: 1.7; color: #14634a; margin: 0; }

.vbc-hd { margin: 44px 0 10px; }
.vbc-hd h2 {
  font-size: clamp(22px, 1.1rem + 1.1vw, 28px); font-weight: 800;
  letter-spacing: -.02em; color: var(--muc); margin-bottom: 16px;
}
.vbc-hd-o {
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo);
  margin-bottom: 10px; overflow: hidden;
}
.vbc-hd-o > summary {
  list-style: none; cursor: pointer; padding: 17px 20px; font-weight: 700;
  color: var(--muc); display: flex; align-items: center; gap: 14px;
}
.vbc-hd-o > summary::-webkit-details-marker { display: none; }
.vbc-hd-o > summary::after {
  content: ""; width: 9px; height: 9px; flex: none; margin-left: auto;
  border-right: 2px solid var(--mo); border-bottom: 2px solid var(--mo);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--eas);
}
.vbc-hd-o[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.vbc-hd-o p { padding: 0 20px 18px; margin: 0; font-size: 16px; line-height: 1.72; color: var(--nhe); }

/* ─── trang Về chúng tôi ─────────────────────────────────────────────── */

.vbc-vct { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 56px; align-items: start; }
.vbc-vct-ben { display: grid; gap: 16px; position: sticky; top: calc(var(--dinh-cao) + 18px); }
.vbc-vct-dong { font-size: 15px; line-height: 1.65; color: var(--nhe); margin: 0 0 10px; }
.vbc-vct-dong b { color: var(--muc); }
.vbc-vct-so {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon);
  padding: 24px; margin: 0 0 1.6em;
}
.vbc-vct-so b {
  display: block; font-size: clamp(20px, 1rem + 1vw, 27px); font-weight: 800;
  color: var(--nhan-dam); letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.vbc-vct-so span { font-size: 14px; line-height: 1.45; color: var(--nhe); }
@media (max-width: 1060px) {
  .vbc-vct { grid-template-columns: 1fr; gap: 30px; }
  .vbc-vct-ben { position: static; }
}

/* ─── trang Liên hệ ──────────────────────────────────────────────────── */

.vbc-lh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.vbc-lh-o {
  position: relative; display: grid; gap: 5px; padding: 24px 22px;
  background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo-lon);
  text-decoration: none; color: inherit; box-shadow: var(--anh-1);
  transition: transform .18s var(--eas), box-shadow .18s var(--eas), border-color .18s var(--eas);
}
.vbc-lh-o:hover { transform: translateY(-2px); box-shadow: var(--anh-2); border-color: var(--nhan); }
.vbc-lh-o b { font-size: 18px; font-weight: 700; color: var(--muc); }
.vbc-lh-o span { font-size: 15px; color: var(--nhe); }
.vbc-lh-o--zalo { border-color: #0068ff; box-shadow: 0 0 0 3px #e6f0ff, var(--anh-1); }
.vbc-lh-o-nhan {
  position: absolute; top: -11px; left: 20px; background: #0068ff; color: #fff !important;
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
}
.vbc-lh-doi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 26px; align-items: start; }
@media (max-width: 860px) { .vbc-lh-doi { grid-template-columns: 1fr; } }