.vnpu{width:100%;position:relative}.vnpu--banner{height:var(--vnpu-h,150px)}.vnpu--square,.vnpu--circle{aspect-ratio:1}.vnpu__hit{border:1.5px dashed color-mix(in srgb, var(--vn-gold) 45%, transparent);background:var(--vn-bg-inset);cursor:pointer;width:100%;height:100%;font:inherit;color:inherit;transition:border-color var(--vn-dur-base) var(--vn-ease), background var(--vn-dur-base) var(--vn-ease), box-shadow var(--vn-dur-base) var(--vn-ease);-webkit-tap-highlight-color:transparent;border-radius:16px;place-items:center;padding:0;display:grid;position:absolute;inset:0;overflow:hidden}.vnpu--circle .vnpu__hit{border-radius:50%}.vnpu__hit:focus-visible{box-shadow:var(--vn-shadow-focus);outline:none}.vnpu__hit:disabled{cursor:default;opacity:.6}.vnpu.is-drag .vnpu__hit{border-style:solid;border-color:var(--vn-gold);background:color-mix(in srgb, var(--vn-champagne) 18%, #fffdf9);box-shadow:0 0 0 4px color-mix(in srgb, var(--vn-gold) 18%, transparent)}.vnpu.is-filled .vnpu__hit{border:0}.vnpu__empty{text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:3px;padding:14px 16px;display:flex}.vnpu__tile{background:color-mix(in srgb, var(--vn-champagne) 32%, #fff);width:40px;height:40px;color:var(--vn-gold-deep);box-shadow:inset 0 0 0 1px #ffffffbf, 0 4px 10px color-mix(in srgb, var(--vn-gold-deep) 16%, transparent);transition:transform var(--vn-dur-base) var(--vn-ease-spring);border-radius:14px;place-items:center;margin-bottom:5px;display:grid}.vnpu__tile svg{width:18px;height:18px}.vnpu__empty b{color:var(--vn-fg-1);font-size:12.5px;font-weight:700}.vnpu__empty small{color:var(--vn-fg-4);font-size:10.5px;line-height:1.45}@media (prefers-reduced-motion:no-preference){html:not(.md-noanim) .vnpu__tile{animation:3.6s ease-in-out infinite vnpu-float}html:not(.md-noanim) .vnpu.is-drag .vnpu__tile{transform:translateY(-4px)scale(1.12)}html:not(.md-noanim) .vnpu__hit:active .vnpu__tile{transform:scale(1.08)}html:not(.md-noanim) .vnpu__hit img{animation:vnpu-imgin .5s var(--vn-ease)}}.vnpu__hit img{object-fit:cover;width:100%;height:100%;transition:filter var(--vn-dur-slow) var(--vn-ease), transform .6s var(--vn-ease);position:absolute;inset:0}.vnpu.is-busy .vnpu__hit img{filter:blur(7px)brightness(.93);transform:scale(1.05)}.vnpu__scrim{pointer-events:none;background:linear-gradient(#0000,#18130f6b);height:58px;position:absolute;bottom:0;left:0;right:0}.vnpu--circle .vnpu__scrim{display:none}.vnpu__swap{color:#fff;letter-spacing:.02em;-webkit-backdrop-filter:blur(6px);pointer-events:none;background:#18130f9e;border-radius:999px;align-items:center;gap:5px;padding:6px 11px;font-size:10.5px;font-style:normal;font-weight:700;display:inline-flex;position:absolute;bottom:9px;right:9px;box-shadow:inset 0 0 0 1px #ffffff38}.vnpu--circle .vnpu__swap{right:50%;transform:translate(50%)}.vnpu__swap svg{width:12px;height:12px}.vnpu__bar{background:#ffffff73;border-radius:999px;height:3.5px;position:absolute;bottom:14px;left:12%;right:12%;overflow:hidden;box-shadow:0 1px 4px #1c151038}.vnpu__bar i{background:linear-gradient(90deg, var(--vn-gold), var(--vn-gold-deep));border-radius:999px;height:100%;animation:.72s cubic-bezier(.4,0,.2,1) forwards vnpu-load;display:block}html.md-noanim .vnpu__bar i{width:100%;animation:none}.vnpu__ok{pointer-events:none;background:#18130f29;place-items:center;display:grid;position:absolute;inset:0}.vnpu__ok>span{width:42px;height:42px;color:var(--vn-success);background:#fff;border-radius:50%;place-items:center;display:grid;box-shadow:0 8px 22px #1c151040}.vnpu__ok svg{width:20px;height:20px}@media (prefers-reduced-motion:no-preference){html:not(.md-noanim) .vnpu__ok{animation:.25s both vnpu-fadein}html:not(.md-noanim) .vnpu__ok>span{animation:vn-pop .5s var(--vn-ease-spring)}html:not(.md-noanim) .vnpu__ok svg path{stroke-dasharray:26;stroke-dashoffset:26px;animation:vn-draw .4s .12s var(--vn-ease) forwards}}.vnpu__x{z-index:2;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(6px);width:26px;height:26px;transition:background var(--vn-dur-fast) var(--vn-ease);background:#18130f8c;border:0;border-radius:50%;place-items:center;padding:0;display:grid;position:absolute;top:8px;right:8px;box-shadow:inset 0 0 0 1px #fff3}.vnpu__x svg{width:12px;height:12px}.vnpu__x:active{background:var(--vn-danger)}.vnpu__x:focus-visible{box-shadow:var(--vn-shadow-focus);outline:none}@keyframes vnpu-float{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}@keyframes vnpu-imgin{0%{opacity:0;transform:scale(1.06)}}@keyframes vnpu-load{0%{width:8%}to{width:100%}}@keyframes vnpu-fadein{0%{opacity:0}}