/* ============================================================
   VBM (PaceMate) — base + design tokens (đóng khung .pm-vbm)
   Dùng cho Trung tâm dịch vụ + wizard Xác minh. Mọi nội dung phải
   nằm trong <div class="pm-vbm"> để kế thừa biến màu + font.
   KHÔNG nạp bib.css thô (tránh đè header/footer/site chung).
   Cùng bộ tokens với .pm-shop (store-base.css).
   ============================================================ */
.pm-vbm{
  --brand:#FF9E00; --brand-strong:#FB8C00; --brand-deep:#E07B00;
  --gold:#FFD700; --orange:#FFA500;
  --grad:linear-gradient(135deg,#FFD700,#FFA500);
  --grad-strong:linear-gradient(135deg,#FFC400,#FF9000);
  --grad-text:linear-gradient(120deg,#F7A300 10%,#EE7A00);
  --btn-ink:#2A1E00;
  --brand-soft:#FFF8EA; --brand-soft-2:#FFEFCF; --brand-border:#FFE49C;
  --neutral:#F4F3F1; --neutral-2:#ECEAE6;
  --ink:#1C1917; --ink-2:#3F3A35; --muted:#857F78; --muted-2:#A39C94;
  --bg:#F6F5F3; --card:#FFFFFF; --line:#EBE7E1; --line-soft:#F2EEE8;
  --star:#FBB814; --green:#15A06A; --green-soft:#E7F6EF; --green-deep:#0F7A50;
  --blue:#2E90FA; --blue-soft:#E8F2FE; --red:#E2553D; --red-soft:#FDEDE9;
  --purple:#7C5CFC; --purple-soft:#EFEBFF;
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(28,25,23,.05), 0 1px 3px rgba(28,25,23,.04);
  --shadow-md:0 4px 14px rgba(28,25,23,.06), 0 2px 5px rgba(28,25,23,.04);
  --shadow-lg:0 18px 40px -12px rgba(28,25,23,.14), 0 8px 18px -10px rgba(28,25,23,.10);
  --shadow-brand:0 8px 20px -9px rgba(255,160,0,.5);

  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.pm-vbm *{box-sizing:border-box}
.pm-vbm a{color:inherit;text-decoration:none}
/* CHỈ reset font+cursor cho nút — KHÔNG reset background/color toàn cục:
   vbm css nạp SAU app.css (@stack head lặp 2 lần), nếu reset background:none
   sẽ đè mất nền nút Tailwind (bg-amber...) trong result-card/modal của wizard.
   Nút overlay (.vc-link) và nút .vfy-* tự set nền riêng. */
.pm-vbm :where(button){font-family:inherit;cursor:pointer}
.pm-vbm img{display:block;max-width:100%}
.pm-vbm input,.pm-vbm select,.pm-vbm textarea{font-family:inherit}
.pm-vbm ::selection{background:var(--brand-soft-2)}

/* container (thay .shell trong bib.css) */
.pm-vbm .shell{max-width:1280px;margin:0 auto;padding:0 28px}
@media(max-width:760px){ .pm-vbm .shell{padding:0 16px} }