/* Mục tiêu ủng hộ: 5 mẫu động, phong cách AWE (tham chiếu refero "AWE"): nền gần đen, chữ porcelain, cyan phát sáng, nhãn mono giãn chữ,
   đường kẻ mảnh, bề mặt phẳng. Mọi mẫu đều có chuyển động liên tục (không mẫu nào đứng im). --p = phần trăm (0..100). */
.vg {
  --void: #010101; --well: #16191b; --charcoal: #1f1f23; --hair: #2a2d31; --graphite: #444; --steel: #828b8d; --porcelain: #e0e0e0;
  --cyan: #5ce1e6; --cyan-glow: rgba(92, 225, 230, 0.55);
  --serif: 'Iowan Old Style', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'Inter', 'Be Vietnam Pro', system-ui, sans-serif;
  position: relative; color: var(--porcelain); font-family: var(--sans); box-sizing: border-box;
  animation: vg-enter 0.9s cubic-bezier(.2,.8,.2,1) both;
}
.vg *, .vg *::before, .vg *::after { box-sizing: border-box; }
.vg-label { font: 300 12px/1.3 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--steel); }
.vg-title { font: 600 22px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--porcelain); overflow-wrap: anywhere; }
.vg-note { font-size: 14px; color: var(--steel); overflow-wrap: anywhere; }
.vg-note[hidden] { display: none; }
.vg-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.vg-figures { font: 400 14px/1.2 var(--mono); letter-spacing: 0.06em; color: var(--steel); }
.vg-figures b, .vg-raised { color: var(--porcelain); font-weight: 600; }
.vg-pct { font: 400 14px/1 var(--mono); letter-spacing: 0.1em; color: var(--cyan); text-shadow: 0 0 12px var(--cyan-glow); }
@keyframes vg-enter { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }

/* Nhịp khi có donate mới; ăn mừng khi đạt mục tiêu (dùng chung) */
.vg.is-bump::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px var(--cyan), 0 0 40px 4px var(--cyan-glow); animation: vg-bump 1.4s ease-out both; }
@keyframes vg-bump { from { opacity: 1; } to { opacity: 0; } }
.vg.is-done { --cyan: #f5e7a1; --cyan-glow: rgba(245, 231, 161, 0.6); }
.vg.is-done .vg-title::after { content: '  ✦ ĐÃ ĐẠT MỤC TIÊU'; font: 400 11px/1 var(--mono); letter-spacing: 0.2em; color: var(--cyan); animation: vg-blink 1.6s ease-in-out infinite; }
@keyframes vg-blink { 50% { opacity: 0.35; } }

/* ============ 1. ORBIT — vòng tiến độ, chấm sáng quỹ đạo, vòng vạch quay chậm ============ */
.vg-orbit { display: flex; align-items: center; gap: 26px; width: 560px; padding: 22px 28px; border-radius: 28px; background: linear-gradient(180deg, #0b0c0d, var(--void)); border: 1px solid var(--hair); }
.vg-orbit-ring { position: relative; width: 168px; height: 168px; flex: none; }
.vg-orbit-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vg-ticks { fill: none; stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 1 5.4; transform-origin: 100px 100px; animation: vg-rotate 40s linear infinite; }
.vg-track { fill: none; stroke: var(--charcoal); stroke-width: 6; }
.vg-arc { fill: none; stroke: var(--porcelain); stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray 0.2s linear; filter: drop-shadow(0 0 6px rgba(224, 224, 224, 0.35)); }
.vg-orbit-dot { position: absolute; inset: 0; transform: rotate(calc(var(--p) * 3.6deg)); }
.vg-orbit-dot i { position: absolute; left: 50%; top: 11%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 4px var(--cyan-glow); animation: vg-pulse 1.8s ease-in-out infinite; }
.vg-orbit-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.vg-orbit-center .vg-pct { font: 400 44px/1 var(--serif); letter-spacing: -0.03em; color: var(--porcelain); text-shadow: none; }
.vg-orbit-text { display: grid; gap: 6px; min-width: 0; }
.vg-orbit-text .vg-sep { margin: 0 6px; color: var(--graphite); }
@keyframes vg-rotate { to { transform: rotate(360deg); } }
@keyframes vg-pulse { 50% { transform: scale(1.35); box-shadow: 0 0 22px 8px var(--cyan-glow); } }

/* ============ 2. INSTRUMENT — thanh đo, vạch chia, tia quét ============ */
.vg-instrument { display: grid; gap: 10px; width: 620px; padding: 20px 24px; border-radius: 16px; background: var(--well); border: 1px solid var(--hair); }
.vg-meter { position: relative; height: 34px; margin-top: 6px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.vg-fill { position: absolute; left: 0; top: 10px; bottom: 10px; width: calc(var(--p) * 1%); background: var(--porcelain); overflow: hidden; }
.vg-scan { position: absolute; top: 0; bottom: 0; width: 60px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: vg-scan 2.2s ease-in-out infinite; mix-blend-mode: multiply; }
.vg-fill::after { content: ''; position: absolute; right: -1px; top: -10px; bottom: -10px; width: 2px; background: var(--cyan); box-shadow: 0 0 12px 2px var(--cyan-glow); animation: vg-blink 1.2s ease-in-out infinite; }
.vg-scale { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; }
.vg-scale i { width: 1px; height: 6px; background: var(--graphite); }
.vg-scale i:nth-child(5n + 1) { height: 10px; background: var(--steel); }
@keyframes vg-scan { from { left: -60px; } to { left: 100%; } }

/* ============ 3. LIQUID — ống chất lỏng gợn sóng, bọt nổi ============ */
.vg.vg-liquid { display: grid; gap: 10px; width: 600px; padding: 20px 24px; border-radius: 22px; background: var(--void); border: 1px solid var(--hair); }
.vg-tank { position: relative; height: 56px; border-radius: 999px; background: var(--well); border: 1px solid var(--hair); overflow: hidden; }
.vg-fluid { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); background: linear-gradient(180deg, rgba(92, 225, 230, 0.55), rgba(224, 224, 224, 0.85)); transition: width 0.2s linear; overflow: visible; }
.vg-fluid::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 2px, transparent 2px 22px); animation: vg-flow 1.6s linear infinite; }
.vg-edge { position: absolute; right: -9px; top: -6px; bottom: -6px; width: 18px; border-radius: 50%; background: radial-gradient(ellipse at center, #ffffff 0%, var(--cyan) 35%, transparent 70%); filter: blur(1px); box-shadow: 0 0 18px 4px var(--cyan-glow); animation: vg-slosh 1.3s ease-in-out infinite alternate; }
@keyframes vg-slosh { from { transform: scaleY(0.82) translateX(-2px); } to { transform: scaleY(1.08) translateX(2px); } }
.vg-bubble { position: absolute; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.8); animation: vg-bubble 2.6s ease-in infinite; }
.vg-bubble:nth-of-type(1) { left: 20%; }
.vg-bubble:nth-of-type(2) { left: 55%; animation-delay: 0.9s; width: 5px; height: 5px; }
.vg-bubble:nth-of-type(3) { left: 80%; animation-delay: 1.7s; }
.vg.vg-liquid .vg-raised { font: 400 30px/1 var(--serif); letter-spacing: -0.02em; }
@keyframes vg-flow { to { background-position: 22px 0; } }
@keyframes vg-bubble { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-46px); opacity: 0; } }

/* ============ 4. SEGMENTS — ô sáng lần lượt, ô kế tiếp nhấp nháy ============ */
.vg-segments { display: grid; gap: 10px; width: 600px; padding: 20px 24px; border-radius: 16px; background: linear-gradient(180deg, var(--well), var(--void)); border: 1px solid var(--hair); }
.vg-segs { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; height: 38px; }
.vg-segs i { border-radius: 3px; background: var(--charcoal); border: 1px solid var(--hair); transition: background 0.3s; }
.vg-segs i.on { background: var(--porcelain); border-color: var(--porcelain); animation: vg-seg 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.06s); }
.vg-segs i.next { border-color: var(--cyan); animation: vg-next 0.9s ease-in-out infinite; }
.vg-segments .vg-raised { font: 400 26px/1 var(--serif); }
@keyframes vg-seg { 0%, 70%, 100% { filter: none; } 80% { filter: brightness(1.4) drop-shadow(0 0 6px var(--cyan-glow)); background: #ffffff; } }
@keyframes vg-next { 50% { background: rgba(92, 225, 230, 0.45); box-shadow: 0 0 12px var(--cyan-glow); } }

/* ============ 5. EDITORIAL — số lớn kiểu tạp chí, đường mảnh có đầu sáng ============ */
.vg-editorial { display: grid; gap: 8px; width: 620px; padding: 24px 28px 20px; border-radius: 16px; background: var(--void); border: 1px solid var(--hair); }
.vg-editorial .vg-title { font-weight: 400; font-size: 18px; color: var(--steel); }
.vg-big { font: 400 72px/0.95 var(--serif); letter-spacing: -0.04em; color: var(--porcelain); }
.vg-big b { font-weight: 400; background: linear-gradient(100deg, var(--porcelain) 40%, #ffffff 50%, var(--porcelain) 60%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: vg-sheen 4s linear infinite; }
.vg-line { position: relative; height: 1px; margin: 8px 0 4px; background: var(--hair); }
.vg-line::before { content: ''; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p) * 1%); background: var(--porcelain); }
.vg-head { position: absolute; top: -3px; left: calc(var(--p) * 1% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px 4px var(--cyan-glow); animation: vg-pulse 1.6s ease-in-out infinite; }
.vg-line::after { content: ''; position: absolute; top: 0; height: 1px; width: 80px; left: 0; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: vg-glide 3s ease-in-out infinite; max-width: calc(var(--p) * 1%); }
.vg-editorial em.vg-pct { font: italic 400 26px/1 var(--serif); color: var(--cyan); letter-spacing: -0.01em; }
@keyframes vg-sheen { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes vg-glide { from { transform: translateX(-80px); } to { transform: translateX(560px); } }

@media (prefers-reduced-motion: reduce) { .vg, .vg *, .vg::after { animation: none !important; } }

/* ============ 6. MÈO HỒNG — khung sticker hồng có tai mèo, chữ Baloo viền trắng, thanh hồng lấp lánh, bàn chân mèo ở đầu thanh ============ */
.vg-catpaw { --pink: #E0407A; --berry: #9C2E5A; --hot: #FF4F8E; --white-edge: 0 0 0 #fff;
  display: grid; gap: 6px; width: 640px; margin-top: 46px; padding: 28px 36px 32px; border-radius: 30px; isolation: isolate;
  font-family: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif; color: var(--berry); }
.vg-catpaw .vg-title, .vg-catpaw .vg-cat-count, .vg-catpaw .vg-cat-figures > * {
  font-family: inherit; font-weight: 800; line-height: 1.1; -webkit-text-stroke: 0; paint-order: stroke fill;
  text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1.5px 1.5px #fff, -1.5px -1.5px #fff, 1.5px -1.5px #fff, -1.5px 1.5px #fff, 0 4px 6px rgba(156,46,90,.25); }
.vg-catpaw .vg-title { font-size: 40px; color: var(--pink); text-transform: uppercase; letter-spacing: .01em; }
.vg-catpaw .vg-cat-count { font-size: 32px; color: #C7356D; white-space: nowrap; }
.vg-catpaw .vg-note { font: 700 16px/1.3 'Baloo 2', sans-serif; color: #B65A80; }
.vg-catpaw .vg-cat-figures { align-items: center; }
.vg-catpaw .vg-cat-figures > * { font-size: 36px; letter-spacing: 0; color: var(--berry); }
.vg-catpaw .vg-pct { color: var(--hot); text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 0 0 14px rgba(255,79,142,.45); }
.vg-catpaw::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, #FFF4F7, #FDE6EE); border: 6px solid #F7A8BE; box-shadow: 0 0 0 2px #fff inset, 0 8px 24px rgba(156,46,90,.25); }
.vg-cat-ear { position: absolute; top: -52px; width: 110px; height: 88px; z-index: -2; overflow: visible; }
.vg-cat-ear.is-l { left: 26%; transform: rotate(-8deg); transform-origin: 50% 100%; animation: vg-ear 4s ease-in-out infinite; }
.vg-cat-ear.is-r { right: 26%; transform: scaleX(-1) rotate(-8deg); transform-origin: 50% 100%; animation: vg-ear-r 4s ease-in-out 1.3s infinite; }
.vg-ear-out { fill: #FAD3DE; stroke: #9C2E5A; stroke-width: 4; stroke-linejoin: round; }
.vg-ear-in { fill: #F07A9F; }
@keyframes vg-ear { 0%, 88%, 100% { transform: rotate(-8deg); } 93% { transform: rotate(-16deg); } }
@keyframes vg-ear-r { 0%, 88%, 100% { transform: scaleX(-1) rotate(-8deg); } 93% { transform: scaleX(-1) rotate(-16deg); } }
.vg-cat-bar { position: relative; height: 34px; margin-top: 8px; border-radius: 99px; background: linear-gradient(180deg, #D9B3BD, #EBD0D7); border: 3px solid #9C2E5A; box-shadow: inset 0 3px 4px rgba(0,0,0,.12); }
.vg-cat-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 1%); border-radius: 99px; overflow: hidden;
  background: linear-gradient(180deg, #F5779F, #E0407A 60%, #C7356D); box-shadow: inset 0 3px 0 rgba(255,255,255,.35); }
.vg-cat-sheen { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: vg-cat-sheen 2.6s ease-in-out infinite; }
@keyframes vg-cat-sheen { to { left: 110%; } }
.vg-cat-spark { position: absolute; top: 30%; left: 20%; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 2px rgba(255,255,255,.8); animation: vg-blink 1.4s ease-in-out infinite; }
.vg-cat-spark.is-2 { top: 60%; left: 48%; animation-delay: .5s; }
.vg-cat-spark.is-3 { top: 35%; left: 76%; animation-delay: 1s; }
.vg-cat-pawpos { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 56px; height: 56px; margin: -30px 0 0 -28px; z-index: 2; }
.vg-paw { width: 100%; height: 100%; animation: vg-paw 1.6s ease-in-out infinite; filter: drop-shadow(0 3px 3px rgba(156,46,90,.35)); }
.vg-paw-base { fill: #FFF4F7; stroke: #F7A8BE; stroke-width: 3; stroke-linejoin: round; }
.vg-paw-toe, .vg-paw-pad { fill: #F07A9F; }
@keyframes vg-paw { 50% { transform: translateY(-3px) rotate(-6deg); } }
.vg-catpaw.is-done { --cyan: #FF4F8E; --cyan-glow: rgba(255,79,142,.6); }
.vg-catpaw.is-done .vg-title::after { color: var(--hot); font-family: 'Baloo 2', sans-serif; font-size: 14px; text-shadow: none; }

/* ============ 7–15. BỘ "KIT": khung chung (tiêu đề + lượt, 3 con số, thanh) + biến màu riêng từng mẫu ============ */
.vg-kit { --k-font: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif; --k-sc: transparent; --k-sw: 2px;
  --k-bg: #fff; --k-bc: transparent; --k-bw: 0px; --k-shadow: none; --k-radius: 28px;
  --k-title: #222; --k-count: #555; --k-num: #222; --k-target: var(--k-num); --k-pct: #222;
  --k-track: #ddd; --k-trackb: transparent; --k-fill: #888; --k-barh: 30px;
  display: grid; gap: 4px; width: 660px; padding: 26px 36px 30px; border-radius: var(--k-radius); isolation: isolate;
  font-family: var(--k-font); color: var(--k-num); }
.vg-kit::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--k-bg); border: var(--k-bw) solid var(--k-bc); box-shadow: var(--k-shadow); }
.vg-kit .vg-title, .vg-kit .vk-count, .vg-kit .vk-figs > *, .vg-kit .vk-figs {
  text-shadow: var(--k-sw) 0 var(--k-sc), calc(var(--k-sw) * -1) 0 var(--k-sc), 0 var(--k-sw) var(--k-sc), 0 calc(var(--k-sw) * -1) var(--k-sc),
    1.5px 1.5px var(--k-sc), -1.5px -1.5px var(--k-sc), 1.5px -1.5px var(--k-sc), -1.5px 1.5px var(--k-sc); }
.vg-kit .vk-head { align-items: center; }
.vg-kit .vg-title { font: 800 40px/1.15 var(--k-font); color: var(--k-title); text-transform: uppercase; letter-spacing: 0; }
.vg-kit .vk-count { font: 800 30px/1 var(--k-font); color: var(--k-count); white-space: nowrap; }
.vg-kit .vg-note { font: 600 15px/1.3 var(--k-font); color: var(--k-count); text-shadow: none; }
.vg-kit .vk-figs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 2px; font: 800 40px/1.1 var(--k-font); }
.vg-kit .vg-raised { color: var(--k-num); font-weight: 800; }
.vg-kit .vg-target { color: var(--k-target); text-align: right; }
.vg-kit .vk-pct { position: relative; display: grid; place-items: center; color: var(--k-pct); }
.vg-kit .vk-pct .vg-pct { font: inherit; letter-spacing: 0; color: inherit; text-shadow: inherit; }
.vg-kit .vk-bar { position: relative; height: var(--k-barh); margin-top: 10px; border-radius: 99px; background: var(--k-track); border: 3px solid var(--k-trackb); }
.vg-kit .vk-fill { position: absolute; left: 0; top: 0; bottom: 0; width: max(calc(var(--k-barh) - 6px), calc(var(--p) * 1%)); border-radius: 99px; overflow: hidden; background: var(--k-fill); }
.vg-kit .vk-sheen { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation: vg-cat-sheen 2.8s ease-in-out infinite; }
.vg-kit .vk-badge { display: grid; place-items: center; min-width: 96px; height: 96px; padding: 0 10px; border-radius: 50%; }
.vg-kit .vk-knob { position: absolute; top: 50%; left: calc(var(--p) * 1%); z-index: 2; transform: translate(-50%, -50%); }
.vg-kit.is-done .vg-title::after { color: var(--k-pct); font-family: var(--k-font); font-size: 13px; text-shadow: none; }
.vk-star { position: absolute; width: 18px; height: 18px; fill: #FFE07A; animation: vg-blink 1.8s ease-in-out infinite; }
.vk-star:nth-of-type(2) { animation-delay: .6s; } .vk-star:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes vk-float { 50% { transform: translateY(-4px); } }

/* 7. Hộp quà: đỏ san hô, viền đỏ đậm + chỉ trắng, ruy băng + nơ vàng, số vàng viền nâu, % trong huy hiệu tròn, confetti rơi */
.vg-gift { --k-bg: #F76B6B; --k-bc: #B3141E; --k-bw: 6px; --k-shadow: inset 0 0 0 6px #F76B6B, inset 0 0 0 9px #fff, 0 8px 22px rgba(120,0,10,.35);
  --k-title: #fff; --k-sc: #8E0F17; --k-sw: 3px; --k-count: #fff; --k-num: #FFD24A; --k-pct: #FFD24A;
  --k-track: #7E2A33; --k-trackb: #B3141E; --k-fill: repeating-linear-gradient(115deg, #FFD58A 0 22px, #F7A64A 22px 44px); padding-left: 96px; overflow: visible; }
.vg-gift .vg-raised, .vg-gift .vg-target, .vg-gift .vk-pct { --k-sc: #7A3E08; }
.vk-ribbon { position: absolute; left: 50px; top: 0; bottom: 0; width: 26px; z-index: 0; background: linear-gradient(90deg, #C98A14, #FFE08A 45%, #D9A22A); }
.vg-gift .vk-bow { position: absolute; left: -14px; top: -34px; width: 150px; z-index: 1; fill: #F2B92E; stroke: #B57A0E; stroke-width: 2; filter: drop-shadow(0 4px 4px rgba(90,40,0,.35)); animation: vk-float 3s ease-in-out infinite; }
.vg-gift .vk-badge { width: 84px; min-width: 84px; height: 84px; background: radial-gradient(circle at 40% 35%, #F25A5A, #C52A31); border: 3px solid #A3141C; font-size: 30px; }
.vg-gift .vk-giftbox { position: absolute; width: 38px; top: -22px; left: 50%; margin-left: -23px; fill: #F25A5A; stroke: #A3141C; stroke-width: 1.5; }
.vg-gift .vk-giftbox .r { fill: #FFD24A; }
.vg-gift .vk-pct .vk-star:nth-of-type(1) { left: -30px; top: 6px; } .vg-gift .vk-pct .vk-star:nth-of-type(2) { right: -30px; bottom: 8px; }
.vk-confetti { position: absolute; top: -10px; left: calc(6% + var(--i) * 6.6%); width: 8px; height: 14px; border-radius: 2px; background: #FFD24A; opacity: 0; z-index: 2;
  animation: vk-confetti 4.2s calc(var(--i) * -.31s) linear infinite; }
.vk-confetti:nth-child(3n) { background: #FF6FA8; } .vk-confetti:nth-child(3n+1) { background: #FFF1C7; }
@keyframes vk-confetti { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(240px) rotate(540deg); opacity: 0; } }

/* 8. Kẹo bông: gradient tím → bạc hà, viền sticker trắng, chữ tím mận viền trắng, % trong bong bóng, thanh sọc kẹo chạy */
.vg-candy { --k-bg: linear-gradient(90deg, #D6B0F7, #C9C4F0 50%, #A8EBD6); --k-bc: #fff; --k-bw: 9px; --k-shadow: 0 6px 18px rgba(90,30,90,.3);
  --k-title: #B42A7C; --k-sc: #fff; --k-sw: 3px; --k-count: #5A1E5A; --k-num: #5A1E5A; --k-pct: #5A1E5A;
  --k-track: repeating-linear-gradient(135deg, #EBC6EE 0 14px, #F6DDF5 14px 28px); --k-trackb: #7C2C70;
  --k-fill: repeating-linear-gradient(135deg, #E55BAE 0 14px, #F08BC8 14px 28px); }
.vg-candy .vk-fill { background-size: 40px 40px; animation: vk-stripe 1.2s linear infinite; }
@keyframes vk-stripe { to { background-position: 40px 0; } }
.vg-candy .vk-badge { width: 92px; min-width: 92px; height: 92px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #FFD6EC 22%, #F7A6CF 70%, #EE86BD); border: 3px solid #fff; box-shadow: 0 0 0 2px #E58BC0, 0 6px 14px rgba(180,42,124,.3); font-size: 34px; animation: vk-float 2.6s ease-in-out infinite; }
.vk-puff { position: absolute; bottom: 8px; width: 56%; height: 60%; z-index: -1; border-radius: 50% 50% 0 0 / 70% 70% 0 0; background: rgba(255,255,255,.35); }
.vk-puff.is-l { left: 10px; } .vk-puff.is-r { right: 10px; background: rgba(255,255,255,.4); }
.vg-candy > .vk-star:nth-of-type(1) { left: 20px; top: 20px; fill: #fff; } .vg-candy > .vk-star:nth-of-type(2) { right: 40px; top: 18px; fill: #fff; } .vg-candy > .vk-star:nth-of-type(3) { left: 46%; top: 44%; fill: #fff; }
.vk-candy { width: 64px; filter: drop-shadow(0 2px 2px rgba(90,30,90,.3)); } .vk-candy circle { fill: #F7A6CF; stroke: #7C2C70; stroke-width: 2; } .vk-candy .w { fill: #A8E6F0; stroke: #7C2C70; stroke-width: 2; } .vk-candy .s { fill: none; stroke: #fff; stroke-width: 3; }
.vk-candy.is-top { position: absolute; top: -18px; right: 34%; width: 58px; transform: rotate(20deg); animation: vk-float 3s ease-in-out infinite; }
.vg-candy .vk-knob .vk-candy { animation: vk-spin 3s linear infinite; } @keyframes vk-spin { to { transform: rotate(360deg); } }

/* 9. Gấu mật ong: kem sữa, viền nâu, chữ nâu sô-cô-la viền trắng, % trong vòng cam, thanh mật ong, gấu ôm cuối thanh */
.vg-bear { --k-bg: #F7EBD6; --k-bc: #7A4A2E; --k-bw: 6px; --k-shadow: inset 0 0 0 3px #fff;
  --k-title: #4A2418; --k-sc: #fff; --k-sw: 3px; --k-count: #4A2418; --k-num: #4A2418; --k-pct: #4A2418;
  --k-track: #4A2418; --k-trackb: #F2C04A; --k-fill: linear-gradient(180deg, #FFE08A, #F2B23A 60%, #D98E1E); --k-barh: 38px; padding-right: 96px; }
.vg-bear .vk-bar { border-width: 7px; }
.vg-bear .vk-badge { width: 92px; height: 92px; background: #F8B65A; font-size: 30px; --k-sc: transparent; }
.vk-bear { position: absolute; right: -36px; bottom: -20px; width: 140px; z-index: 3; animation: vk-float 3.4s ease-in-out infinite; }
.vk-bear .b { fill: #9A6440; stroke: #5E3420; stroke-width: 3; } .vk-bear .e, .vk-bear .m { fill: #E9B98E; } .vk-bear .k { fill: #2B160E; } .vk-bear .l { fill: none; stroke: #2B160E; stroke-width: 3; stroke-linecap: round; } .vk-bear .c { fill: #F49AA0; opacity: .8; }
.vk-pawprint { position: absolute; left: 18px; top: 22px; width: 30px; fill: #8A5A3A; opacity: .6; transform: rotate(-20deg); }
.vk-pawprint.is-2 { top: auto; bottom: 60px; left: 26px; width: 24px; transform: rotate(15deg); }
.vk-drip { position: absolute; right: 18px; bottom: -22px; width: 12px; height: 22px; border-radius: 0 0 8px 8px; background: #F2B23A; animation: vk-drip 2.4s ease-in infinite; }
@keyframes vk-drip { 0% { transform: scaleY(.3); transform-origin: top; } 70% { transform: scaleY(1); } 100% { transform: scaleY(1) translateY(6px); opacity: 0; } }

/* 10. Mây cầu vồng: khung mây viền xanh trời, cầu vồng góc trái, chữ xanh navy, % trong mây hồng, thanh sọc cầu vồng, mây cười ở đầu thanh */
.vg-cloud { --k-bg: #fff; --k-bc: #8CCBF0; --k-bw: 7px; --k-shadow: inset 0 0 0 4px #DDF1FD; --k-radius: 60px;
  --k-title: #1E4A86; --k-count: #E2556F; --k-num: #1E4A86; --k-pct: #C24A68;
  --k-track: linear-gradient(180deg, #FFC9CF, #FFE6B8, #FFF6B8, #D3F2CC, #CFE6FB, #E2D3F7); --k-trackb: #BFE2F7;
  --k-fill: linear-gradient(180deg, #FF7C88, #FFB066, #FFE26B, #8CDB8C, #7CC2F2, #B58CEB); padding-left: 60px; padding-top: 34px; }
.vg-cloud .vk-bar { margin-left: 30px; }
.vk-scallop { position: absolute; left: 70px; right: 50px; top: -22px; height: 34px; z-index: -2;
  background: radial-gradient(circle at 50% 100%, #fff 0 22px, #8CCBF0 22px 29px, transparent 30px) 50% 0 / 66px 34px space no-repeat; }
.vg-cloud .vk-badge { width: 120px; height: 84px; border-radius: 50% 50% 46% 46% / 60% 60% 42% 42%; background: #FFC7D3; border: 3px solid #F59AB0; font-size: 32px; animation: vk-float 3s ease-in-out infinite; }
.vk-rainbow { position: absolute; left: -10px; top: -40px; width: 150px; z-index: -1; fill: none; stroke-width: 12; stroke-linecap: round; }
.vk-cloud { position: absolute; left: -26px; top: 46px; width: 92px; fill: #fff; stroke: #8CCBF0; stroke-width: 4; animation: vk-float 4s ease-in-out infinite; }
.vk-cloud.is-2 { left: auto; right: -30px; top: auto; bottom: 30px; width: 80px; animation-delay: 1.4s; }
.vg-cloud > .vk-star:nth-of-type(1) { left: 14px; top: 140px; fill: #FFD84A; } .vg-cloud > .vk-star:nth-of-type(2) { right: 30px; top: 70px; fill: #FF8FB0; } .vg-cloud > .vk-star:nth-of-type(3) { left: 160px; top: -12px; fill: #FFD84A; }
.vk-cloudface { width: 92px; filter: drop-shadow(0 3px 3px rgba(30,74,134,.25)); } .vk-cloudface > path:first-child { fill: #fff; stroke: #F59AB0; stroke-width: 4; } .vk-cloudface .f { fill: none; stroke: #7A3B4A; stroke-width: 3.5; stroke-linecap: round; } .vk-cloudface .c { fill: #FFB3C3; }
.vg-cloud .vk-knob { animation: vk-float 2s ease-in-out infinite; }

/* 11. Neon tím: nền đen, viền + thanh neon tím phát sáng, % chữ viền rỗng phát sáng */
.vg-neon { --k-font: 'Baloo 2', system-ui, sans-serif; --k-bg: #121214; --k-bc: #C77DFF; --k-bw: 3px; --k-radius: 22px;
  --k-shadow: 0 0 18px 2px rgba(168,85,247,.75), inset 0 0 18px rgba(168,85,247,.35);
  --k-title: #fff; --k-count: #fff; --k-num: #fff; --k-pct: transparent; --k-track: #121214; --k-trackb: #A855F7; --k-fill: #C77DFF; --k-barh: 34px; }
.vg-neon::before { animation: vk-neon 3s ease-in-out infinite; } @keyframes vk-neon { 50% { box-shadow: 0 0 28px 6px rgba(168,85,247,.9), inset 0 0 22px rgba(168,85,247,.45); } }
.vg-neon .vk-pct { font-size: 64px; -webkit-text-stroke: 2.5px #E7BDFF; text-shadow: 0 0 10px #A855F7, 0 0 24px #A855F7; }
.vg-neon .vk-fill { box-shadow: 0 0 14px #C77DFF; }
.vk-dot { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #F1D9FF; box-shadow: 0 0 10px 4px #C77DFF; animation: vg-pulse 1.6s ease-in-out infinite; }

/* 12. Kính mờ: tấm kính xám mờ trong suốt, chữ trắng, % xanh băng phát sáng, thanh viền sáng mảnh */
.vg-glass { --k-font: 'Be Vietnam Pro', system-ui, sans-serif; --k-bg: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 40%, rgba(255,255,255,.16)); --k-bc: rgba(255,255,255,.35); --k-bw: 2px; --k-radius: 24px;
  --k-shadow: 0 10px 30px rgba(0,0,0,.35); --k-title: #fff; --k-count: #fff; --k-num: #fff; --k-pct: #8FF6FF;
  --k-track: rgba(0,0,0,.45); --k-trackb: rgba(143,246,255,.3); --k-fill: linear-gradient(90deg, #fff, #9FF3FF); }
.vg-glass::before { backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.vg-glass .vg-title, .vg-glass .vk-figs { font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.vg-glass .vk-count { font-weight: 400; text-shadow: 0 2px 8px rgba(0,0,0,.45); }
.vg-glass .vk-pct { text-shadow: 0 0 12px #3FE6FF, 0 0 26px rgba(63,230,255,.6); }
.vg-glass .vk-fill { box-shadow: 0 0 16px rgba(159,243,255,.9); }

/* 13. Tối giản tối: nền than, chữ trắng, lượt + mục tiêu xám, % xanh ngọc phát sáng, thanh trắng */
.vg-dark { --k-font: 'Be Vietnam Pro', system-ui, sans-serif; --k-bg: #17181D; --k-radius: 22px; --k-shadow: 0 8px 24px rgba(0,0,0,.35);
  --k-title: #fff; --k-count: #A8A9B5; --k-num: #fff; --k-target: #C9D0E0; --k-pct: #19E3C4; --k-track: #2A2C36; --k-fill: #fff; --k-barh: 24px; }
.vg-dark .vg-title, .vg-dark .vk-count, .vg-dark .vk-figs { font-weight: 700; }
.vg-dark .vk-pct { text-shadow: 0 0 14px rgba(25,227,196,.7); }
.vg-dark .vk-sheen { background: linear-gradient(90deg, transparent, rgba(25,227,196,.35), transparent); }

/* 14. Thẻ trắng: nền trắng, viền xám nhạt, chữ đen, % + thanh xanh lá */
.vg-white { --k-font: 'Be Vietnam Pro', system-ui, sans-serif; --k-bg: #fff; --k-bc: #DDE3EE; --k-bw: 4px; --k-radius: 22px; --k-shadow: 0 8px 24px rgba(20,24,36,.18);
  --k-title: #141824; --k-count: #4A5163; --k-num: #141824; --k-target: #4A5163; --k-pct: #12B07A; --k-track: #E8EDF5; --k-fill: #12B07A; --k-barh: 26px; }
.vg-white .vg-title, .vg-white .vk-count, .vg-white .vk-figs { font-weight: 700; }

  --k-sc: rgba(0,0,0,.55); --k-sw: 1.5px; --k-track: #33343E; --k-fill: linear-gradient(90deg, #FF6A3D, #F0303A); --k-barh: 30px; width: max-content; min-width: 900px; padding: 8px 4px; gap: 6px; }
/* Mẫu basic dùng Be Vietnam Pro (rộng hơn Baloo): chữ nhỏ lại một chút cho 3 con số không chạm nhau */
.vg-glass .vg-title, .vg-dark .vg-title, .vg-white .vg-title { font-size: 36px; }
.vg-glass .vk-figs, .vg-dark .vk-figs, .vg-white .vk-figs { font-size: 34px; gap: 24px; margin-top: 6px; }
.vg-glass .vk-count, .vg-dark .vk-count, .vg-white .vk-count { font-size: 28px; }

/* ============ 16–25. BỘ AURA: hào quang + lửa/sét/vòng phép chuyển động quanh khung kit (nền đen) ============ */
.va-aura { position: absolute; inset: -14px; z-index: -2; border-radius: calc(var(--k-radius) + 14px); pointer-events: none;
  box-shadow: 0 0 22px 6px var(--a1), 0 0 60px 16px color-mix(in srgb, var(--a2) 55%, transparent); opacity: 0.55; animation: va-pulse 2.6s ease-in-out infinite; }
@keyframes va-pulse { 50% { opacity: 0.95; transform: scale(1.012); } }
.va-spark { position: absolute; top: 50%; left: calc(var(--p) * 1%); width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0 12%, var(--a1) 28%, transparent 64%); animation: va-spark 0.9s ease-in-out infinite; }
@keyframes va-spark { 50% { transform: scale(1.35) rotate(45deg); opacity: 0.75; } }
.va-flames { position: absolute; left: 4%; right: 4%; top: -34px; height: 46px; z-index: -1; display: flex; justify-content: space-between; pointer-events: none; }
.va-flame { width: 34px; height: 46px; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 50% 85%, #fff 0 8%, var(--a1) 30%, var(--a2) 62%, transparent 74%);
  transform-origin: 50% 100%; filter: blur(0.6px); animation: va-flick calc(0.7s + var(--i) * 0.05s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.13s); }
@keyframes va-flick { 0% { transform: scaleY(0.75) scaleX(1.05); } 100% { transform: scaleY(1.25) scaleX(0.85) translateY(-3px); } }
.va-embers { position: absolute; inset: -20px; z-index: -1; pointer-events: none; }
.va-ember { position: absolute; bottom: 10%; left: calc(4% + var(--i) * 7%); width: 4px; height: 4px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 6px 2px var(--a1);
  opacity: 0; animation: va-rise 2.8s calc(var(--i) * -0.37s) linear infinite; }
@keyframes va-rise { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-190px) translateX(14px); opacity: 0; } }
.va-bolt { position: absolute; width: 38px; z-index: 2; fill: #fff; filter: drop-shadow(0 0 6px var(--a1)) drop-shadow(0 0 14px var(--a1)); pointer-events: none; animation: va-zap 2.4s steps(1) infinite; }
.va-bolt { left: -18px; top: -30px; transform: rotate(-12deg); }
.va-bolt.is-2 { left: auto; right: -16px; top: -26px; transform: rotate(14deg) scaleX(-1); animation-delay: -0.8s; }
.va-bolt.is-3 { left: -16px; top: auto; bottom: -40px; transform: rotate(196deg); animation-delay: -1.3s; }
.va-bolt.is-4 { left: auto; right: -14px; top: auto; bottom: -40px; transform: rotate(160deg); animation-delay: -1.9s; }
@keyframes va-zap { 0%, 100% { opacity: 1; } 8% { opacity: 0.1; } 12% { opacity: 1; } 40% { opacity: 0.25; } 46% { opacity: 1; } }
.va-rune { position: absolute; fill: none; stroke: var(--a1); stroke-width: 1.4; opacity: 0.8; pointer-events: none; filter: drop-shadow(0 0 6px var(--a1)); animation: va-spin 18s linear infinite; }
.va-rune .t path { stroke-width: 2; }
.va-rune.is-pct { width: 128px; height: 128px; left: 50%; top: 50%; margin: -64px 0 0 -64px; z-index: -1; }
.va-rune.is-bg { width: 220px; height: 220px; left: 50%; top: -90px; margin-left: -110px; z-index: -2; opacity: 0.35; }
@keyframes va-spin { to { transform: rotate(360deg); } }
.vg-kit .vk-pct .vg-pct { position: relative; z-index: 1; }
.va-ring { position: absolute; width: 124px; height: 124px; left: 50%; top: 50%; margin: -62px 0 0 -62px; border-radius: 50%; border: 2px solid var(--a1); box-shadow: 0 0 14px var(--a1), inset 0 0 14px var(--a1); animation: va-spin 20s linear infinite; }
.va-ring .va-snow { position: absolute; width: 30px; stroke: #fff; stroke-width: 2.2; fill: none; filter: drop-shadow(0 0 4px var(--a1)); }
.va-ring .va-snow:nth-child(1) { left: 50%; top: -16px; margin-left: -15px; } .va-ring .va-snow:nth-child(2) { right: -16px; top: 50%; margin-top: -15px; }
.va-ring .va-snow:nth-child(3) { left: 50%; bottom: -16px; margin-left: -15px; } .va-ring .va-snow:nth-child(4) { left: -16px; top: 50%; margin-top: -15px; }

/* 16. Thiên thần: khung đá cẩm thạch viền vàng, đôi cánh sáng hai bên, vòng phép vàng sau %, lông vũ rơi */
.vg-angel { --a1: #FFE29A; --a2: #FFC94A; --k-font: 'Baloo 2', sans-serif; --k-bg: #050505; --k-bc: #D8B565; --k-bw: 4px; --k-radius: 6px;
  --k-shadow: inset 0 0 0 5px #0a0a0a, inset 0 0 0 7px #E9E3D6, 0 0 30px rgba(255,214,120,.35);
  --k-title: #FFF2D2; --k-sc: #6B4A10; --k-sw: 2.5px; --k-count: #FFF2D2; --k-num: #FFF2D2; --k-pct: #FFC23A;
  --k-track: #0b0b0b; --k-trackb: #D8B565; --k-fill: linear-gradient(90deg, #EDE7DA, #FFF6DE 50%, #F2D48A); margin: 0 90px; }
.vg-angel .va-wing { position: absolute; top: -40px; left: -112px; width: 120px; z-index: -1; fill: #FFF8E8; filter: drop-shadow(0 0 10px #FFE29A) drop-shadow(0 0 22px rgba(255,214,120,.6)); transform-origin: 100% 80%; animation: va-flap 3.6s ease-in-out infinite; }
.vg-angel .va-wing .f { fill: none; stroke: #E9D5A0; stroke-width: 2; }
.vg-angel .va-wing.is-r { left: auto; right: -112px; transform: scaleX(-1); transform-origin: 0 80%; animation-name: va-flap-r; }
@keyframes va-flap { 50% { transform: rotate(-6deg); } }
@keyframes va-flap-r { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) rotate(-6deg); } }
.va-feather { position: absolute; top: -10px; left: calc(-10% + var(--i) * 15%); width: 6px; height: 16px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; background: #fff; opacity: 0; box-shadow: 0 0 6px #FFE29A; animation: va-fall 5s calc(var(--i) * -0.7s) linear infinite; }
@keyframes va-fall { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translateY(240px) rotate(260deg) translateX(30px); opacity: 0; } }

/* 17. Hắc thạch tím: phiến đá nứt, khe nứt sáng tím, khói tím, vòng phép tím quanh %, thanh năng lượng tím có sét */
.vg-obsidian { --a1: #B65CFF; --a2: #7A2BE0; --k-font: 'Barlow Condensed', 'Be Vietnam Pro', sans-serif; --k-radius: 16px;
  --k-bg: linear-gradient(160deg, #3a3640, #1d1b22 40%, #2b2832); --k-bc: #C27BFF; --k-bw: 2px; --k-shadow: inset 0 0 30px rgba(0,0,0,.8);
  --k-title: #EDEDF2; --k-sc: #3A1A5A; --k-sw: 2.5px; --k-count: #EDEDF2; --k-num: #E3E3EA; --k-pct: #E58BFF;
  --k-track: #141218; --k-trackb: #9B4BFF; --k-fill: linear-gradient(90deg, #4B0FA0, #A43BFF 60%, #E0A6FF); --k-barh: 34px; }
.vg-obsidian .vg-title, .vg-obsidian .vk-figs { font-weight: 700; letter-spacing: .01em; }
.vg-obsidian .vg-title { font-size: 46px; } .vg-obsidian .vk-figs { font-size: 48px; } .vg-obsidian .vk-count { font-size: 38px; }
.va-cracks { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: .8;
  background: linear-gradient(118deg, transparent 47%, #C27BFF 47.5%, transparent 48.5%) 0 0 / 340px 220px, linear-gradient(64deg, transparent 49%, #9B4BFF 49.4%, transparent 50.3%) 120px 40px / 280px 260px;
  filter: drop-shadow(0 0 4px #B65CFF); mix-blend-mode: screen; }
.va-smoke { position: absolute; top: calc(10% + var(--i) * 14%); left: -40px; width: 120px; height: 60px; border-radius: 50%; z-index: -2; background: radial-gradient(closest-side, rgba(182,92,255,.7), transparent); filter: blur(8px); animation: va-drift 6s calc(var(--i) * -1s) ease-in-out infinite alternate; }
.va-smoke:nth-of-type(2n) { left: auto; right: -40px; }
@keyframes va-drift { to { transform: translate(18px, -12px) scale(1.25); opacity: .6; } }

/* 18. Cyber neon: mạch điện tử hồng/xanh, vòng HUD quanh %, thanh vạch như thanh máu, nhiễu glitch */
.vg-cyberx { --a1: #2EE6FF; --a2: #FF4FD8; --k-font: 'Be Vietnam Pro', sans-serif; --k-bg: #0B0E1E; --k-bc: #2EE6FF; --k-bw: 2px; --k-radius: 14px;
  --k-shadow: inset 0 0 0 6px #0B0E1E, inset 0 0 0 7px #FF4FD8, 0 0 24px rgba(46,230,255,.45);
  --k-title: #FF8BEA; --k-count: #FFE3FA; --k-num: #6FF3FF; --k-target: #F2FAFF; --k-pct: #FF8BEA;
  --k-track: #0A1426; --k-trackb: #2EE6FF; --k-fill: repeating-linear-gradient(115deg, #2EE6FF 0 14px, transparent 14px 20px, #FF6BE0 20px 34px, transparent 34px 40px); --k-barh: 34px; }
.vg-cyberx .vg-title, .vg-cyberx .vk-figs, .vg-cyberx .vk-count { font-weight: 700; text-shadow: 0 0 10px currentColor; }
.vg-cyberx .vk-fill { animation: vk-stripe 1.4s linear infinite; background-size: 80px 100%; }
.va-circuit { position: absolute; inset: 16px; z-index: -1; pointer-events: none; opacity: .55;
  background: linear-gradient(#2EE6FF, #2EE6FF) 30% 0 / 30% 1px no-repeat, linear-gradient(#FF4FD8, #FF4FD8) 70% 100% / 26% 1px no-repeat, linear-gradient(#2EE6FF, #2EE6FF) 0 70% / 1px 20% no-repeat, linear-gradient(#FF4FD8, #FF4FD8) 100% 30% / 1px 24% no-repeat; }
.va-hud { position: absolute; width: 118px; height: 118px; left: 50%; top: 50%; margin: -59px 0 0 -59px; border-radius: 50%; border: 3px solid transparent; border-top-color: #2EE6FF; border-left-color: #FF4FD8; box-shadow: 0 0 14px rgba(46,230,255,.5); animation: va-spin 4s linear infinite; }
.va-glitch { position: absolute; left: -10px; top: calc(20% + var(--i) * 25%); width: 26px; height: 6px; background: #2EE6FF; opacity: 0; animation: va-glitch 3s calc(var(--i) * -1s) steps(1) infinite; }
.va-glitch:nth-of-type(2n) { left: auto; right: -10px; background: #FF4FD8; }
@keyframes va-glitch { 0%, 100% { opacity: 0; } 5% { opacity: .9; transform: translateX(4px); } 9% { opacity: 0; } 60% { opacity: .8; } 63% { opacity: 0; } }

/* 19. Rồng lửa: khung đen viền đỏ, lửa bập bùng trên đỉnh, hoa văn vảy rồng hai mép, % trong quả cầu lửa, thanh dung nham */
.vg-dragon { --a1: #FF6A1F; --a2: #E01B1B; --k-font: 'Baloo 2', sans-serif; --k-bg: #090606; --k-bc: #7A1414; --k-bw: 3px; --k-radius: 12px;
  --k-title: #E8322C; --k-sc: #FFD27A; --k-sw: 2px; --k-count: #FFE9C8; --k-num: #E8322C; --k-target: #FFE9C8; --k-pct: #FFD27A;
  --k-track: #1A0606; --k-trackb: #8A1A12; --k-fill: linear-gradient(90deg, #A3120C, #FF5A1A 50%, #FFD27A); --k-barh: 34px; }
.vg-dragon .vg-raised { --k-sc: #FFD27A; }
.vg-dragon .vk-fill { background-size: 200% 100%; animation: va-lava 2.4s linear infinite; }
@keyframes va-lava { to { background-position: -200% 0; } }
.va-scales { position: absolute; top: 10px; bottom: 10px; left: -22px; width: 30px; z-index: -1; pointer-events: none; border-radius: 16px;
  background: radial-gradient(circle at 50% 0, transparent 7px, #B3261E 8px 10px, transparent 11px) 0 0 / 15px 12px; box-shadow: 690px 0 0 0 transparent; filter: drop-shadow(0 0 6px #FF6A1F); }
.va-blaze { position: absolute; width: 130px; height: 100px; left: 50%; top: 50%; margin: -50px 0 0 -65px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, #FFD27A, #FF5A1A 45%, rgba(224,27,27,.5) 70%, transparent); filter: blur(4px); animation: va-pulse 1.4s ease-in-out infinite; }

/* 20. Sấm sét: khung đen viền cyan, sét trắng xanh ở 4 góc chớp nháy, chữ trắng nghiêng, thanh điện cyan */
.vg-storm { --a1: #3FE6FF; --a2: #1F8BFF; --k-font: 'Be Vietnam Pro', sans-serif; --k-bg: #04070A; --k-bc: #3FE6FF; --k-bw: 2px; --k-radius: 16px;
  --k-title: #fff; --k-sc: #062A36; --k-sw: 3px; --k-count: #fff; --k-num: #fff; --k-target: #DCEFF5; --k-pct: #3FE6FF;
  --k-track: #071418; --k-trackb: #3FE6FF; --k-fill: linear-gradient(90deg, #0C5D78, #3FE6FF 70%, #E8FDFF); --k-barh: 32px; }
.vg-storm .vg-title, .vg-storm .vk-figs, .vg-storm .vk-count { font-weight: 700; font-style: italic; }
.vg-storm .vk-pct { text-shadow: 0 0 14px #3FE6FF; }

/* 21. Lửa xanh: lửa xanh dương bốc trên đỉnh và 2 bên, chữ trắng viền xanh, thanh lửa xanh */
.vg-bluefire { --a1: #3B9BFF; --a2: #1446C8; --k-font: 'Baloo 2', sans-serif; --k-bg: #04060D; --k-bc: #2C3550; --k-bw: 3px; --k-radius: 18px;
  --k-shadow: inset 0 0 0 4px #0C1220, 0 0 18px rgba(59,155,255,.4);
  --k-title: #fff; --k-sc: #1B4FD6; --k-sw: 2.5px; --k-count: #DDF2FF; --k-num: #fff; --k-target: #D7E2F2; --k-pct: #3FE6FF;
  --k-track: #0A1020; --k-trackb: #3B9BFF; --k-fill: linear-gradient(90deg, #0C2C8A, #2F7BFF 50%, #8FE6FF); --k-barh: 34px; }
.vg-bluefire .vk-pct { --k-sc: transparent; text-shadow: 0 0 14px #3FE6FF; }
.vg-bluefire .vk-fill { background-size: 200% 100%; animation: va-lava 1.8s linear infinite; }
.vg-bluefire .va-flames { top: -30px; }

/* 22. Băng giá: viền pha lê băng, tinh thể băng 4 góc, vòng bông tuyết quanh %, tuyết rơi, thanh băng */
.vg-frost { --a1: #7FE6FF; --a2: #2E9CD6; --k-font: 'Baloo 2', sans-serif; --k-bg: #03070A; --k-bc: #A9EEFF; --k-bw: 3px; --k-radius: 6px;
  --k-shadow: inset 0 0 0 6px #03070A, inset 0 0 0 8px rgba(169,238,255,.6), 0 0 22px rgba(127,230,255,.4);
  --k-title: #EFFFFF; --k-sc: #1E6E8C; --k-sw: 2.5px; --k-count: #EFFFFF; --k-num: #fff; --k-target: #E2E8EE; --k-pct: #7FF0FF;
  --k-track: #08141A; --k-trackb: #A9EEFF; --k-fill: linear-gradient(180deg, #E8FBFF, #8FE3F5 50%, #3FA9C9); --k-barh: 34px; padding: 30px 60px 34px; }
.vg-frost .vg-raised { padding: 2px 14px; border-radius: 10px; background: rgba(127,230,255,.15); box-shadow: inset 0 0 0 2px #7FE6FF, 0 0 12px rgba(127,230,255,.5); }
.va-crystal { position: absolute; width: 64px; z-index: 2; fill: rgba(200,245,255,.85); stroke: #fff; stroke-width: 1; filter: drop-shadow(0 0 8px #7FE6FF); pointer-events: none; }
.va-crystal { left: -26px; top: -30px; transform: rotate(-30deg); } .va-crystal.is-2 { left: auto; right: -26px; transform: rotate(30deg) scaleX(-1); }
.va-crystal.is-3 { top: auto; bottom: -30px; transform: rotate(-150deg); } .va-crystal.is-4 { left: auto; right: -26px; top: auto; bottom: -30px; transform: rotate(150deg); }
.va-flake { position: absolute; top: -12px; left: calc(var(--i) * 10%); width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #7FE6FF; opacity: 0; animation: va-fall 6s calc(var(--i) * -0.6s) linear infinite; }

/* 23. Ác quỷ: khung xương đen có sừng, lửa đỏ viền, vòng phép lửa quanh %, chữ đỏ máu, thanh dung nham */
.vg-demon { --a1: #FF3B1F; --a2: #8A0A0A; --k-font: 'Baloo 2', sans-serif; --k-bg: #070404; --k-bc: #2A2424; --k-bw: 6px; --k-radius: 14px;
  --k-shadow: inset 0 0 0 2px #4A3A3A, 0 0 26px rgba(255,59,31,.4);
  --k-title: #E01B1B; --k-sc: #2A0505; --k-sw: 3px; --k-count: #FF9C8A; --k-num: #E01B1B; --k-target: #9A8584; --k-pct: #FFB08A;
  --k-track: #120606; --k-trackb: #3A2A2A; --k-fill: radial-gradient(circle at 20% 50%, #FFD27A 0 6%, transparent 7%) 0 0 / 40px 30px, linear-gradient(90deg, #5A0A05, #E0331A 50%, #FFB04A); --k-barh: 36px; }
.vg-demon .vg-title, .vg-demon .vk-figs { text-shadow: 0 0 12px #FF3B1F, 3px 0 #2A0505, -3px 0 #2A0505, 0 3px #2A0505, 0 -3px #2A0505; }
.vg-demon .vk-fill { animation: va-lava 2.8s linear infinite; background-size: 40px 30px, 200% 100%; }
.va-horn { position: absolute; top: -56px; left: 18%; width: 54px; z-index: -1; fill: #1E1A1A; stroke: #4A3A3A; stroke-width: 2; filter: drop-shadow(0 0 8px #FF3B1F); }
.va-horn.is-r { left: auto; right: 18%; transform: scaleX(-1); }

/* 24. Kim long khí: khung vàng, aura vàng dựng tia + sét vàng, chữ vàng viền đen, thanh năng lượng vàng */
.vg-saiyan { --a1: #FFD21F; --a2: #FF9A00; --k-font: 'Baloo 2', sans-serif; --k-bg: #050402; --k-bc: #C99A2E; --k-bw: 4px; --k-radius: 10px;
  --k-title: #FFD21F; --k-sc: #241800; --k-sw: 3px; --k-count: #FFF4C8; --k-num: #FFC21A; --k-target: #F2E6C4; --k-pct: #FFF04A;
  --k-track: #0D0A04; --k-trackb: #C99A2E; --k-fill: linear-gradient(90deg, #C77A00, #FFD21F 55%, #FFFBD0); --k-barh: 34px; }
.vg-saiyan .va-flame { border-radius: 40% 40% 50% 50% / 90% 90% 10% 10%; width: 22px; }
.vg-saiyan .vk-fill { background-size: 200% 100%; animation: va-lava 1.2s linear infinite; }
.vg-saiyan .vk-pct { --k-sc: transparent; text-shadow: 0 0 16px #FFD21F; }

/* 25. Thiên hà: tinh vân tím xanh trong khung viền trắng mảnh, sao lấp lánh, xoáy sáng quanh %, thanh ngân hà */
.vg-galaxy { --a1: #B47CFF; --a2: #3FC8FF; --k-font: 'Baloo 2', sans-serif; --k-radius: 22px; --k-bc: rgba(255,255,255,.6); --k-bw: 2px;
  --k-bg: radial-gradient(60% 90% at 25% 40%, rgba(150,70,255,.55), transparent 70%), radial-gradient(50% 80% at 80% 30%, rgba(60,170,255,.45), transparent 70%), #07051A;
  --k-title: #fff; --k-sc: #2A1A6A; --k-sw: 2.5px; --k-count: #fff; --k-num: #fff; --k-target: #D5D4EA; --k-pct: #fff;
  --k-track: #0B0920; --k-trackb: rgba(255,255,255,.55); --k-fill: linear-gradient(90deg, #3A1A9A, #B47CFF 40%, #6FE0FF 70%, #fff); --k-barh: 34px; }
.vg-galaxy .vk-fill { background-size: 200% 100%; animation: va-lava 4s linear infinite; }
.va-nebula { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(40% 60% at 60% 70%, rgba(180,124,255,.35), transparent 70%); animation: va-pulse 6s ease-in-out infinite; }
.va-star2 { position: absolute; left: calc(var(--i) * 5.5%); top: calc(6% + var(--i) * 4.8%); width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: vg-blink calc(1.2s + var(--i) * 0.1s) ease-in-out infinite; }
.va-swirl { position: absolute; width: 120px; height: 120px; left: 50%; top: 50%; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid transparent; border-top-color: #fff; border-right-color: #B47CFF; border-bottom-color: #6FE0FF; filter: drop-shadow(0 0 8px #B47CFF); animation: va-spin 3s linear infinite; }

/* Chuyển động tắt khi người xem/OBS giảm chuyển động */
@media (prefers-reduced-motion: reduce) { .va-aura, .va-spark, .va-flame, .va-ember, .va-bolt, .va-rune, .va-ring, .va-feather, .va-smoke, .va-glitch, .va-hud, .va-flake, .va-swirl, .va-star2, .va-wing { animation: none !important; } }
/* Tinh chỉnh bộ aura sau khi xem thử */
.vg-angel, .vg-obsidian, .vg-cyberx, .vg-dragon, .vg-storm, .vg-bluefire, .vg-frost, .vg-demon, .vg-saiyan, .vg-galaxy { width: 740px; }
.vg-cyberx .vk-figs, .vg-storm .vk-figs { font-size: 36px; gap: 26px; }
.vg-angel .va-wing { width: 160px; top: -62px; left: -150px; } .vg-angel .va-wing.is-r { left: auto; right: -150px; }
.vg-angel { margin: 0 130px; }
.vg-dragon .vk-pct { --k-sc: #3A0505; text-shadow: 0 0 2px #3A0505, 2px 2px #3A0505, -2px -2px #3A0505, 2px -2px #3A0505, -2px 2px #3A0505; color: #FFE38A; }
.va-flames { left: 1%; right: 1%; gap: 0; justify-content: space-around; }
.va-flame { width: 58px; height: calc(40px + (var(--i) * 7px) % 28px); margin: 0 -10px; align-self: flex-end; opacity: .9; }
.va-flames { align-items: flex-end; }
.va-flame:nth-child(3n) { height: 62px; } .va-flame:nth-child(3n+1) { height: 44px; } .va-flame:nth-child(3n+2) { height: 52px; }
.vg-frost .va-ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.vg-frost .va-ring .va-snow { width: 22px; }
.vg-frost .vk-figs { gap: 34px; }
.va-horn { width: 84px; top: -78px; z-index: 1; fill: #241D1D; stroke: #6A5050; stroke-width: 2.5; filter: drop-shadow(0 0 10px #FF3B1F) drop-shadow(0 0 3px #000); }
.vg-demon .vg-title { color: #FF2A1F; text-shadow: 0 0 14px #FF3B1F, 0 0 2px #fff, 3px 0 #2A0505, -3px 0 #2A0505, 0 3px #2A0505, 0 -3px #2A0505; }
.va-horn { width: 74px; top: -70px; left: -14px; z-index: 1; }
.va-horn.is-r { left: auto; right: -14px; }
.va-horn .r { fill: none; stroke: #FF3B1F; stroke-width: 1.5; opacity: .6; }

/* ============ BỘ KHUNG ẢNH (aura giống ảnh 100%): ảnh khung + dải phần đầy + chữ/số đặt theo vị trí đo trên ảnh ============ */
.vg-plate { position: relative; width: 900px; aspect-ratio: 1800 / 595; container-type: inline-size; font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif;
  --tc: #fff; --ts: transparent; --tg: transparent; --pc: #fff; --nc: #fff; --xc: #fff; --cc: #fff; }
.vg-plate .vp-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; }
.vg-plate .vp-bar { position: absolute; border-radius: 99px; overflow: hidden; }
.vg-plate .vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: max(4%, calc(var(--p) * 1%)); border-radius: 99px; background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.vg-plate .vp-bar .va-spark { width: 5cqw; height: 5cqw; margin: -2.5cqw 0 0 -2.5cqw; --a1: var(--pc); }
.vg-plate .vp-slot { position: absolute; display: flex; align-items: center; white-space: nowrap; line-height: 1; }
.vg-plate .vp-l { justify-content: flex-start; } .vg-plate .vp-c { justify-content: center; } .vg-plate .vp-r { justify-content: flex-end; }
.vg-plate .vp-slot > * { font-weight: 800; letter-spacing: 0; text-shadow: 0.18cqw 0 var(--ts), -0.18cqw 0 var(--ts), 0 0.18cqw var(--ts), 0 -0.18cqw var(--ts), 0.13cqw 0.13cqw var(--ts), -0.13cqw -0.13cqw var(--ts), 0.13cqw -0.13cqw var(--ts), -0.13cqw 0.13cqw var(--ts), 0 0 1.2cqw var(--tg); }
.vg-plate .vp-title > * { font-size: 4.3cqw; color: var(--tc); text-transform: uppercase; }
.vg-plate .vp-count > * { font-size: 3.8cqw; color: var(--cc); }
.vg-plate .vp-raised > * { font-size: 4.8cqw; color: var(--nc); }
.vg-plate .vp-target > * { font-size: 4.8cqw; color: var(--xc); }
.vg-plate .vp-pct > * { font-size: 5.4cqw; color: var(--pc); }
.vg-plate.is-done .vg-title::after { content: none; }
@keyframes vp-bump { 40% { filter: brightness(1.5); } }
.vg-plate.is-bump .vp-frame { animation: vp-bump 0.9s ease-out; }

.vg-obsidian.vg-plate { font-family: 'Barlow Condensed', 'Be Vietnam Pro', sans-serif; --tc: #EDEDF2; --ts: #2A1446; --tg: #B65CFF; --cc: #EDEDF2; --nc: #E3E3EA; --xc: #E3E3EA; --pc: #E58BFF; }
.vg-obsidian.vg-plate .vp-slot > * { font-weight: 700; }
.vg-obsidian.vg-plate .vp-title > * { font-size: 5.2cqw; } .vg-obsidian.vg-plate .vp-count > * { font-size: 4.8cqw; }
.vg-obsidian.vg-plate .vp-raised > *, .vg-obsidian.vg-plate .vp-target > * { font-size: 5.8cqw; } .vg-obsidian.vg-plate .vp-pct > * { font-size: 6cqw; }
.vg-galaxy.vg-plate { --tc: #fff; --ts: #2A1A6A; --tg: #B47CFF; --cc: #fff; --nc: #fff; --xc: #DAD8EE; --pc: #fff; }
.vg-bluefire.vg-plate { --tc: #fff; --ts: #1B4FD6; --tg: #3B9BFF; --cc: #DDF2FF; --nc: #fff; --xc: #D7E2F2; --pc: #3FE6FF; }
.vg-angel.vg-plate { --tc: #FFF2D2; --ts: #6B4A10; --tg: #FFD27A; --cc: #FFF2D2; --nc: #FFF2D2; --xc: #FFF2D2; --pc: #FFC23A; }
.vg-angel.vg-plate .vp-title > * { font-size: 3.4cqw; } .vg-angel.vg-plate .vp-count > * { font-size: 3.4cqw; }
.vg-angel.vg-plate .vp-raised > *, .vg-angel.vg-plate .vp-target > * { font-size: 3.9cqw; }
.vg-dragon.vg-plate { --tc: #E8322C; --ts: #FFD27A; --tg: #FF5A1A; --cc: #FFE9C8; --nc: #E8322C; --xc: #FFE9C8; --pc: #FFE38A; }
.vg-dragon.vg-plate .vp-count > *, .vg-dragon.vg-plate .vp-target > *, .vg-dragon.vg-plate .vp-pct > * { --ts: #3A0505; }
.vg-saiyan.vg-plate { --tc: #FFD21F; --ts: #241800; --tg: #FFB000; --cc: #FFF4C8; --nc: #FFC21A; --xc: #F2E6C4; --pc: #FFF04A; }
.vg-saiyan.vg-plate .vp-title > * { font-size: 3.6cqw; } .vg-saiyan.vg-plate .vp-count > * { font-size: 3.2cqw; }
.vg-saiyan.vg-plate .vp-raised > *, .vg-saiyan.vg-plate .vp-target > *, .vg-saiyan.vg-plate .vp-pct > * { font-size: 3.7cqw; }
.vg-cyberx.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #FF8BEA; --ts: transparent; --tg: #FF4FD8; --cc: #FFE3FA; --nc: #6FF3FF; --xc: #F2FAFF; --pc: #FF8BEA; }
.vg-cyberx.vg-plate .vp-slot > * { font-weight: 700; }
.vg-cyberx.vg-plate .vp-raised > * { text-shadow: 0 0 1.2cqw #2EE6FF; }
.vg-frost.vg-plate { --tc: #EFFFFF; --ts: #1E6E8C; --tg: #7FE6FF; --cc: #EFFFFF; --nc: #fff; --xc: #E6EBF0; --pc: #7FF0FF; }
.vg-frost.vg-plate .vp-raised > * { font-size: 4.4cqw; }
.vg-angel.vg-plate .vp-title > * { font-size: 2.85cqw; }
.vg-cyberx.vg-plate .vp-title > * { font-size: 3.7cqw; }
.vg-plate .vp-title { overflow: hidden; }
.vg-plate .vp-title { overflow: visible; }
.vg-plate .vp-slot > * { display: inline-block; transform-origin: center; }
.vg-plate .vp-l > * { transform-origin: left center; } .vg-plate .vp-r > * { transform-origin: right center; }
.vg-frost.vg-plate .vg-raised { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.vg-demon.vg-plate { --tc: #FF2A1F; --ts: #2A0505; --tg: #FF3B1F; --cc: #FF9C8A; --nc: #E01B1B; --xc: #A58F8E; --pc: #FFB08A; }
.vg-demon.vg-plate .vp-title > * { font-size: 3.6cqw; }
.vg-storm.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #fff; --ts: #062A36; --tg: #3FE6FF; --cc: #fff; --nc: #fff; --xc: #DCEFF5; --pc: #3FE6FF; }
.vg-storm.vg-plate .vp-slot > * { font-weight: 700; font-style: italic; }

/* ============ Dòng chân (mọi mẫu): tên trang (trái) ── vtpay.vn/<username> (phải), giống chân Đếm ngược. Tên dài cắt "…". ============ */
.vg-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; min-width: 0; margin-top: 6px; flex-basis: 100%;
  font: 500 19px/1.3 var(--mono); letter-spacing: 0.05em; color: var(--steel); }
.vg-foot[hidden] { display: none; }
.vg-foot-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--porcelain); }
.vg-foot-url { flex: none; white-space: nowrap; }
.vg-orbit { flex-wrap: wrap; row-gap: 12px; }
.vg-orbit .vg-foot { padding-top: 10px; border-top: 1px solid var(--hair); }
/* Mèo hồng */
.vg-catpaw .vg-foot { font: 700 24px/1.2 'Baloo 2', 'Be Vietnam Pro', sans-serif; letter-spacing: 0; color: var(--berry); margin-top: 8px; }
.vg-catpaw .vg-foot-name { color: var(--pink); }
/* Bộ kit + aura: cùng chữ/màu của số lượt, có viền chữ như phần còn lại của mẫu */
.vg-kit .vg-foot { font: 700 27px/1.2 var(--k-font); letter-spacing: 0; color: var(--k-count); margin-top: 10px;
  text-shadow: var(--k-sw) 0 var(--k-sc), calc(var(--k-sw) * -1) 0 var(--k-sc), 0 var(--k-sw) var(--k-sc), 0 calc(var(--k-sw) * -1) var(--k-sc); }
.vg-kit .vg-foot-name { color: var(--k-title); }
.vg-kit .vg-foot { position: relative; z-index: 3; } /* nằm trên hoạ tiết góc (mây, gấu…) */
.vg-cloud .vg-foot { padding-right: 70px; margin-top: 22px; } /* chừa đám mây góc phải dưới và núm mây trên thanh */
/* Khung ảnh: dòng chân nằm NGAY DƯỚI ảnh khung (không đè ảnh), chữ trắng có bóng để đọc được trên mọi nền live */
.vg-plate .vg-foot { position: absolute; left: 8%; right: 8%; top: 100%; margin-top: 6px; font: 700 4cqw/1.2 'Baloo 2', 'Be Vietnam Pro', sans-serif;
  letter-spacing: 0; color: #fff; text-shadow: 0 1px 2px #000, 0 0 8px rgba(0, 0, 0, 0.8); }
.vg-plate .vg-foot-name { color: #fff; }

/* ============ 10 mẫu "Đơn giản" (khung phẳng): chữ đơn sắc hợp nền khung, không viền chữ dày ============ */
.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold { --ts: transparent; }
:is(.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold).vg-plate .vp-slot > * { font-weight: 700; }
:is(.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold).vg-plate .vp-title > * { font-size: 3.5cqw; }
:is(.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold).vg-plate .vp-count > * { font-size: 2.9cqw; }
:is(.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold).vg-plate :is(.vp-raised, .vp-target) > * { font-size: 3.8cqw; }
:is(.vg-pwhite, .vg-pdark, .vg-pblue, .vg-ppink, .vg-pwood, .vg-pnote, .vg-pglass, .vg-ppixel, .vg-pneon, .vg-pgold).vg-plate .vp-pct > * { font-size: 4.3cqw; }
.vg-pwhite.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #1B1F2A; --cc: #5B6170; --nc: #1B1F2A; --xc: #5B6170; --pc: #3D5BFF; }
.vg-pdark.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #fff; --cc: #C8CCD4; --nc: #fff; --xc: #C8CCD4; --pc: #fff; }
.vg-pblue.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #fff; --cc: #9FC0FF; --nc: #fff; --xc: #9FC0FF; --pc: #59D5FF; }
.vg-ppink.vg-plate { --tc: #B0185A; --cc: #C2407A; --nc: #B0185A; --xc: #C2407A; --pc: #E0306F; }
.vg-pwood.vg-plate { --tc: #4A2A12; --cc: #4A2A12; --nc: #3A200C; --xc: #4A2A12; --pc: #7A3E12; }
.vg-pnote.vg-plate { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; --tc: #1D1D1D; --cc: #1D1D1D; --nc: #1D1D1D; --xc: #3A3A3A; --pc: #C2410C; }
.vg-pnote.vg-plate .vp-count > * { font-size: 3cqw; }
.vg-pglass.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #fff; --cc: #E3E7EE; --nc: #fff; --xc: #D5DAE3; --pc: #fff; }
.vg-ppixel.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #fff; --cc: #FFE97A; --nc: #fff; --xc: #fff; --pc: #FFD21F; }
.vg-pneon.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #E8FEFF; --cc: #7FF6FF; --nc: #E8FEFF; --xc: #A8F1F6; --pc: #3FF0FF; }
.vg-pneon.vg-plate .vp-pct > * { text-shadow: 0 0 1.2cqw #1FD8E6; }
.vg-pgold.vg-plate { font-family: 'Be Vietnam Pro', sans-serif; --tc: #F2D27A; --cc: #F2D27A; --nc: #F7E6B5; --xc: #CDB06A; --pc: #F2D27A; }
/* Dòng chân NẰM TRONG khung (mẫu "Đơn giản": khoảng trống dưới thanh tiến độ); chữ theo màu số lượt của từng mẫu, không bóng. */
.vg-plate .vg-foot.vg-foot-in { top: auto; left: auto; right: auto; margin: 0; align-items: center; font: 700 2.4cqw/1 'Be Vietnam Pro', sans-serif; color: var(--cc); text-shadow: none; }
.vg-plate .vg-foot.vg-foot-in .vg-foot-name { color: var(--tc); }