@layer vtg {
  .vbh { max-width: 560px; margin-inline: auto; }
  .vbh-form { display: flex; gap: .5rem; flex-wrap: wrap; }
  .vbh-q { flex: 1 1 220px; min-height: 44px; padding: .5rem .75rem; font-size: 1rem; border: 1px solid var(--vtg-border, #d0d4dc); border-radius: var(--vtg-radius, 8px); }
  .vbh-btn { min-height: 44px; padding: .5rem 1.25rem; font-weight: 600; border: 0; border-radius: var(--vtg-radius, 8px); background: var(--vtg-primary, #c8102e); color: #fff; cursor: pointer; }
  .vbh-btn:disabled { opacity: .6; cursor: wait; }
  .vbh-out { margin-top: 1rem; display: grid; gap: .75rem; }
  .vbh-msg { padding: .75rem 1rem; border-radius: var(--vtg-radius, 8px); background: var(--vtg-surface, #f5f6f8); }
  .vbh-msg--err { background: #fdecec; color: #8a1c1c; }
  .vbh-card { padding: 1rem; border: 1px solid var(--vtg-border, #d0d4dc); border-radius: var(--vtg-radius, 8px); display: grid; gap: .25rem; }
  .vbh-card h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
  .vbh-row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; }
  .vbh-row span:first-child { color: var(--vtg-muted, #666); }
  .vbh-tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
  .vbh-tag--con { background: #e6f6ea; color: #1b6b32; }
  .vbh-tag--het { background: #f1f1f1; color: #555; }
  .vbh-tag--dang_sua { background: #fff4e0; color: #8a5300; }
  @media (prefers-reduced-motion: no-preference) { .vbh-card { animation: vbh-in .2s ease-out; } }
  @keyframes vbh-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}