@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:#110e0a;--bg-warm:#1a1410;--theme-100:#fffbeb;--theme-200:#fef3c7;--theme-300:#fcd34d;--theme-400:#fbbf24;--theme-500:#f59e0b;--theme-600:#d97706;--theme-700:#b45309;--foam:#fef9ee;--red-accent:#ef4444;--red-glow:#dc2626;--text-primary:#fef3c7;--text-secondary:#d4a574;--text-muted:#8b7355;--bottle-green:#2d5016;--bottle-dark:#1a3009;--bottle-highlight:#4a7c2e;--cap-gold:#c8a24e;--cap-gold-light:#e8c86e;--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%, #b4530926 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 20% 20%, #f59e0b0f 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}.bokeh-light{filter:blur(1px);opacity:0;border-radius:50%;animation:linear infinite bokeh-float;position:absolute}@keyframes bokeh-float{0%{opacity:0;transform:translateY(0)scale(.5)}10%{opacity:.7}90%{opacity:.5}to{opacity:0;transform:translateY(-100vh)scale(1.2)}}.main-container{z-index:2;flex-direction:column;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:var(--theme-400);text-shadow:0 0 20px #fbbf2466,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:var(--text-secondary);text-shadow:none;margin-top:.5rem;font-size:.38em;font-weight:600;display:block}.neon-border{border:2px solid var(--theme-500);border-radius:8px;padding:.8rem 2rem;animation:3s ease-in-out infinite neon-pulse;display:inline-block;box-shadow:0 0 10px #f59e0b4d,inset 0 0 10px #f59e0b1a}@keyframes neon-pulse{0%,to{box-shadow:0 0 10px #f59e0b4d,inset 0 0 10px #f59e0b1a}50%{box-shadow:0 0 20px #f59e0b80,0 0 40px #f59e0b33,inset 0 0 15px #f59e0b26}}.input-section{flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.name-input{border:2px solid var(--theme-600);border-radius:var(--radius);color:var(--text-primary);text-align:center;background:#1a1410e6;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:var(--text-muted)}.name-input:focus{border-color:var(--theme-400);box-shadow:0 0 20px #fbbf2440}.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}.number-text{color:var(--bg-dark);text-shadow:0 1px 2px #ffffff4d;font-family:Outfit,sans-serif;font-size:2.8rem;font-weight:900}.result-display{text-align:center;opacity:0;margin-top:1rem;transition:all .5s cubic-bezier(.34,1.56,.64,1);transform:translateY(20px)}.result-display.visible{opacity:1;transform:translateY(0)}.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}}.cta-text.hidden{display:none}.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))}}.remaining-count{color:var(--text-muted);z-index:100;background:#1a1410cc;border:1px solid #8b73554d;border-radius:20px;padding:.5rem 1rem;font-family:Outfit,sans-serif;font-size:.85rem;font-weight:600;position:fixed;bottom:1.5rem;right:1.5rem}.remaining-number{color:var(--theme-400);font-weight:800}.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}}