@import "https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap";
:root{--bg-dark:#101510;--bg-warm:#182218;--theme-100:#dcfce7;--theme-200:#bbf7d0;--theme-300:#86efac;--theme-400:#4ade80;--theme-500:#09e12b;--theme-600:#16a34a;--theme-700:#15803d;--red-accent:#ef4444;--red-glow:#dc2626;--text-primary:#f0fdf4;--text-secondary:#cdcaca;--text-muted:#9ca3af;--radius:24px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden}body{background:var(--bg-dark);color:var(--text-primary);min-height:100vh;font-family:Inter,system-ui,sans-serif;position:relative}h1,h2,h3,h4,h5,h6{font-family:Outfit,system-ui,sans-serif}.scene-bg{background:radial-gradient(ellipse 80% 60% at 50% 100%, #32b40926 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 20%, #13f50b0f 0%, transparent 50%), var(--bg-dark);z-index:0;position:fixed;inset:0}.bokeh-container{z-index:1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.bubble-particle{opacity:0;background:radial-gradient(circle at 35% 30%,#ffffff40 0%,#ffffff14 40%,#ffffff05 70%,#0000 100%);border:1px solid #ffffff1f;border-radius:50%;animation:linear infinite bubble-rise;position:absolute;bottom:-20px;box-shadow:inset 0 -2px 4px #ffffff0d}@keyframes bubble-rise{0%{opacity:0;transform:translateY(0)translate(0)scale(.6)}5%{opacity:.6}50%{transform:translateY(-50vh) translateX(var(--drift)) scale(1);opacity:.45}85%{opacity:.25}to{opacity:0;transform:translateY(-105vh) translateX(calc(var(--drift) * -.5)) scale(.8)}}.main-container{z-index:2;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding:2rem 1rem;display:flex;position:relative}.header{text-align:center;margin-bottom:2rem}.company-name{letter-spacing:.08em;text-transform:uppercase;color:#ff2d2d;text-shadow:0 0 20px #ff2d2d66,0 2px 4px #00000080;font-family:Outfit,sans-serif;font-size:clamp(1.6rem,5vw,2.8rem);font-weight:900;position:relative}.company-name:after{content:"🍺 BỐC THĂM SỐ MAY MẮN 🍺";letter-spacing:.15em;color:#cdcaca;margin-top:.5rem;font-size:.38em;font-weight:600;display:block}.neon-border{border:2px solid #09e12b;border-radius:8px;padding:.8rem 2rem;animation:3s ease-in-out infinite neon-pulse;display:inline-block;box-shadow:0 0 10px #09e12b4d,inset 0 0 10px #09e12b1a}@keyframes neon-pulse{0%,to{box-shadow:0 0 10px #09e12b4d,inset 0 0 10px #09e12b1a}50%{box-shadow:0 0 20px #09e12b80,0 0 40px #09e12b33,inset 0 0 15px #09e12b26}}.input-section{flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.name-input{border-radius:var(--radius);color:#cdcaca;text-align:center;background:#1a1410e6;border:2px solid #09e12b;outline:none;width:320px;max-width:90vw;padding:.9rem 1.5rem;font-family:Inter,sans-serif;font-size:1.1rem;font-weight:500;transition:border-color .3s,box-shadow .3s}.name-input::placeholder{color:#cdcaca}.name-input:focus{border-color:#16a34a;box-shadow:0 0 20px #09e12b4d}.name-input:disabled{opacity:.5;cursor:not-allowed}.bottle-scene{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;width:280px;height:460px;margin:1rem auto 2rem;position:relative}.bottle-scene.disabled{cursor:not-allowed;pointer-events:none}.beer-bottle-img{pointer-events:none;filter:drop-shadow(4px 10px 15px #00000080);width:260px;height:auto;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.cap-3d-wrapper{perspective:1000px;z-index:10;width:120px;height:60px;position:absolute;top:154px;left:50%;transform:translate(-50%)}.cap-3d-container{width:100%;height:100%;transform-style:preserve-3d;position:relative}.cap-face{backface-visibility:hidden;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.cap-face.front{z-index:2;transform:rotateX(0)translateZ(1px)}.cap-face.back{transform:rotateX(180deg)translateZ(1px)}.cap-img{object-fit:contain;filter:drop-shadow(0 2px 4px #0006);width:100%;height:100%}.cap-number{color:#222;text-shadow:0 1px 1px #fffc;z-index:5;font-family:Outfit,sans-serif;font-size:.875rem;font-weight:900;position:absolute}.result-display{text-align:center;opacity:0;margin-top:1rem;transition:all .5s cubic-bezier(.34,1.56,.64,1);transform:translateY(20px)}.result-name{color:var(--theme-300);margin-bottom:.3rem;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:700}.result-label{color:var(--text-muted);font-size:.9rem}.cta-text{color:var(--text-secondary);text-align:center;margin-top:.5rem;font-family:Outfit,sans-serif;font-size:1rem;font-weight:600;animation:2s ease-in-out infinite cta-pulse}@keyframes cta-pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.foam-container{pointer-events:none;z-index:4;width:100%;height:100%;position:absolute;top:0;left:0}.foam-bubble{opacity:0;background:radial-gradient(circle at 30% 30%,#ffffffe6,#fef9ee99);border-radius:50%;animation:1.5s ease-out forwards foam-rise;position:absolute}@keyframes foam-rise{0%{opacity:.8;transform:translateY(0)scale(1)}50%{opacity:.6}to{opacity:0;transform:translateY(-120px) scale(.3) translateX(var(--drift))}}.all-used-message{color:var(--red-accent);text-align:center;border:2px solid var(--red-accent);border-radius:var(--radius);background:#ef44441a;padding:1rem 2rem;font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:700;animation:2s ease-in-out infinite all-used-pulse}@keyframes all-used-pulse{0%,to{box-shadow:0 0 10px #ef444433}50%{box-shadow:0 0 25px #ef444466}}@media (max-width:480px){.main-container{padding:1.5rem .8rem}.bottle-scene{width:240px;height:420px;transform:scale(.85)}.name-input{width:280px;font-size:1rem}.company-name{font-size:1.4rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}