@font-face{font-family:Lifeless;src:url('assets/lifeless.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Ufficio;src:url('assets/ufficio.otf') format('opentype');font-weight:500;font-display:swap}
@font-face{font-family:Syne;src:url('assets/syne.ttf') format('truetype');font-display:swap}
:root{font-family:Lifeless,Arial,sans-serif;color:#16614d;background:#e7e9dc;--paper:#f6f4ea;--ink:#16614d;--lime:#d6e167}
*{box-sizing:border-box}body{margin:0;min-height:100svh;padding:28px 16px}p{margin:0}button,input{font:inherit}button{border:0;background:none;padding:0;color:inherit;text-align:left;cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ea719b;outline-offset:5px}img{user-select:none;pointer-events:none}button img{pointer-events:none}
#experience{width:min(100%,430px);margin:auto}#viewport{position:relative;overflow:hidden;background:var(--paper);border-radius:4px;box-shadow:0 14px 70px #163d2920}#screen{width:390px;height:844px;position:relative;transform-origin:top left;overflow:hidden;background:var(--paper)}#screen>div{width:100%;height:100%}.navigation{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 5px;font-size:12px}.navigation button{padding:8px 0}.navigation #stage{opacity:.65}.loading{padding:40px}.enter{animation:enter .35s ease-out}.float{animation:bob 4s ease-in-out infinite}.float:nth-of-type(2n){animation-delay:-1.7s}.action{transition:filter .2s}.action:hover{filter:brightness(1.08)}.hit{position:absolute;z-index:5;background:transparent;border-radius:28px}.hit:hover{background:#ffffff12}.hit:active{background:#16614d12}.form-field{position:absolute;z-index:10;width:310px;left:40px;border:0;background:transparent;color:var(--ink);font-size:16px;padding:10px 0;height:50px;outline-offset:0}.form-field::placeholder{color:#60786b}.form-label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}.consent{position:absolute;left:30px;top:738px;z-index:10;accent-color:var(--lime);width:18px;height:18px;cursor:pointer}.form-error{position:absolute;left:24px;top:830px;color:#f6accd;font-size:11px;z-index:20}.vote-placeholder{position:absolute;left:24px;top:290px;width:342px;height:430px;border:1.6px solid #115e4d;border-radius:18px;padding:18px;background:#cde4c5}.vote-placeholder small{font-size:11px}.vote-placeholder h2{font:500 30px/1.2 Ufficio;margin:8px 0}.vote-placeholder .taste{display:inline-block;border:1px solid var(--ink);border-radius:22px;background:var(--paper);padding:10px 14px;margin-top:20px;font-size:12px}.vote-placeholder .ingredients{position:absolute;bottom:16px;font-size:12px;right:18px;left:18px}.vote-placeholder .flavour-type{position:absolute;left:18px;top:190px;font:500 50px/1.1 Ufficio;max-width:260px;opacity:.7}.saved{position:absolute;inset:90px 24px 26px;display:flex;flex-direction:column;gap:20px}.saved h1{font:500 50px/1.1 Ufficio;margin:0}.saved .hello{font:54px Syne}.saved .ticket{border:1px dashed var(--ink);border-radius:18px;background:var(--lime);padding:24px;display:grid;gap:12px}.saved .ticket strong{font:500 35px Ufficio}.saved .ticket code{overflow-wrap:anywhere;font-size:13px}.saved .primary{margin-top:auto}.primary{background:var(--ink);color:var(--paper);padding:18px 22px;border-radius:30px;display:block;text-align:center;font-size:17px}.saved .detail{display:flex;justify-content:space-between;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 0;font:500 34px Ufficio}.saved small{font-size:12px}.summary{position:absolute;top:290px;left:24px;width:342px;background:var(--paper);padding:18px;border-radius:18px;z-index:8;border:1px solid #16614d30;max-height:260px;overflow:auto}.summary h2{font:500 24px Ufficio;margin:0 0 14px}.summary ul{padding-left:20px;margin:0}.summary li{padding:5px}.summary p{line-height:1.4}.badge{position:absolute;top:16px;right:22px;font-size:10px}#notice{position:fixed;bottom:24px;left:50%;translate:-50% 0;padding:12px 20px;border-radius:20px;background:var(--ink);color:var(--paper);box-shadow:0 5px 20px #0002;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%;z-index:100;font-size:14px}#notice.visible{opacity:1}
@keyframes bob{0%,100%{translate:0 0;rotate:-.5deg}50%{translate:0 -4px;rotate:.5deg}}@keyframes enter{from{opacity:.3;translate:0 7px}to{opacity:1;translate:0 0}}.motion-off .float,.motion-off .enter{animation:none!important}
@media(max-width:480px){body{padding:0;background:var(--paper)}#experience{width:100%}#viewport{border-radius:0;box-shadow:none}.navigation{padding:10px 20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.preview-note{font-size:11px;text-align:center;padding:10px;background:#d6e167;color:#16614d}.flavour-type-placeholder{position:absolute;top:465px;left:48px;width:295px;font:500 64px/1.1 Ufficio;opacity:.65;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.back-circle{position:absolute;left:24px;top:763.75px;width:55.25px;height:55.25px;z-index:8;border-radius:50%}.back-circle img{position:absolute;inset:0;width:100%;height:100%}.art-motion{position:absolute;inset:0;width:390px;height:844px;pointer-events:none}.vote-front{position:absolute;inset:0;width:390px;height:844px;pointer-events:none;transform-origin:50% 62%}.swipe-zone{position:absolute;left:24px;top:290px;width:342px;height:430px;border-radius:18px;touch-action:pan-y;cursor:grab;z-index:3}.swipe-zone:active{cursor:grabbing}.selected-drinks{position:absolute;left:24px;top:306px;width:342px;max-height:256px;overflow:auto;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;scrollbar-width:thin}.selected-drink{position:relative;flex:0 0 148px;height:190px;overflow:hidden;text-align:center;display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px}.selected-drink p{position:relative;font:15px/1.2 Lifeless;min-height:36px;max-width:148px}.summary-art-canvas{position:absolute;left:-28px;top:-221px;width:390px;height:844px;transform:scale(.52);transform-origin:top left}.summary-art-canvas .art-motion{width:390px;height:844px}.success-overlay{position:absolute;inset:0;width:390px;height:844px;background:#16614d77;z-index:30;animation:modal-in .18s ease-out}.consent{left:23px}.form-error{top:826px;width:340px;line-height:1.2;font-size:10px}.selected-drink:only-child{flex-basis:180px}.selected-drink:only-child .summary-art-canvas{left:-12px}@keyframes modal-in{from{opacity:0}to{opacity:1}}
.selected-drinks[data-count="3"] .selected-drink,.selected-drinks[data-count="4"] .selected-drink,.selected-drinks[data-count="5"] .selected-drink{height:126px}.selected-drinks[data-count="3"] .summary-art-canvas,.selected-drinks[data-count="4"] .summary-art-canvas,.selected-drinks[data-count="5"] .summary-art-canvas{transform:scale(.36);top:-153px;left:4px}.selected-drinks[data-count="3"] p,.selected-drinks[data-count="4"] p,.selected-drinks[data-count="5"] p{font-size:13px}.selected-drinks[data-count="5"]{gap:12px}.selected-drinks[data-count="5"] .selected-drink{flex-basis:102px}.selected-drinks[data-count="5"] .summary-art-canvas{left:-18px;transform:scale(.32);top:-136px}.selected-drinks[data-count="5"] p{font-size:12px}
.selected-drinks[data-count="3"],.selected-drinks[data-count="4"],.selected-drinks[data-count="5"]{max-height:264px;gap:8px}

/* ---- bản vá 30.10.2026 ---- */
.form-error{top:754px!important;font-size:10px;color:#f6accd}
.inline-note{position:absolute;z-index:9;margin:0;line-height:1.25;font-family:Lifeless,sans-serif;pointer-events:none}
.form-privacy{position:absolute;left:24px;top:829px;width:342px;font-size:9px;line-height:1.2;color:#f6f4ea;z-index:10;margin:0;text-align:center}
.form-privacy a{color:#d6e167}
.form-error{top:826px}
.link-btn{font:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer}
.link-btn:disabled{opacity:.6;cursor:default}
.otp-overlay{position:absolute;inset:0;width:390px;height:844px;z-index:40;background:#f6f4ea;padding:96px 28px 0;color:#16614d;animation:modal-in .18s ease-out}
.otp-eyebrow{font-size:10px;font-weight:700;letter-spacing:.08em;margin:0 0 14px}
.otp-overlay h2{font:500 36px/1.1 Ufficio,sans-serif;margin:0 0 14px}
.otp-copy{font-size:15px;line-height:1.4;margin:0 0 26px}
.otp-form input{width:100%;height:64px;border:1.5px solid #16614d;border-radius:16px;background:#fff;color:#16614d;font:500 32px Ufficio,sans-serif;letter-spacing:.4em;text-align:center;padding:0 0 0 .4em}
.otp-error{min-height:18px;font-size:12px;color:#c2185b;margin:8px 0 6px}
.otp-submit{width:100%;background:#16614d;color:#f6f4ea;border:0;border-radius:30px;padding:18px;font:inherit;font-size:17px;cursor:pointer}
.otp-submit:disabled{opacity:.6;cursor:wait}
.otp-links{font-size:13px;text-align:center;margin:18px 0 0}
.otp-dev{font-size:11px;color:#60786b;text-align:center;margin-top:28px}
.voucher-qr{position:absolute;left:250px;top:552px;width:112px;height:112px;border-radius:10px;z-index:9;box-shadow:0 2px 10px #16614d22}
#turnstile-box{position:fixed;left:50%;bottom:90px;translate:-50% 0;z-index:120}

/* ---- bản vá 31.10.2026: căn chữ trong nút, ghi chú form, Turnstile ---- */
[data-node-id="2800:1548"]{translate:0 3.4px}   /* 03 · nút "Nhận nhiệm vụ": chữ bị cao 3px so với tâm nút */
[data-node-id="2800:2281"]{translate:0 -3.5px}  /* 07 · nút "Lưu thư mời": chữ bị thấp 3.5px */
[data-node-id="2800:2136"]{translate:0 1.5px}   /* 05 · modal "Mở quà tri ân" */
[data-node-id="2800:2208"]{top:471px!important}  /* 06 · dòng "Huy chương dành cho 50 founders" nhích lên, tránh mép sóng xanh */
.form-privacy{top:827px;font-size:9.5px;line-height:1.2;white-space:nowrap}
.otp-submit{text-align:center}
#turnstile-box{position:fixed;left:50%;top:50%;bottom:auto;translate:-50% -50%;z-index:120;border-radius:18px}
#turnstile-box.ts-active{background:#f6f4ea;padding:14px 16px 12px;box-shadow:0 0 0 100vmax #16614d80,0 12px 40px #16614d40;text-align:center}
#turnstile-box.ts-active::before{content:'Xác minh nhanh để tiếp tục';display:block;font:13px/1.3 Lifeless,sans-serif;color:#16614d;margin-bottom:10px}
/* Màn tổng kết 3–5 vị: tách hình và tên xa hơn, tên 2 dòng chia cân (không mồ côi chữ) */
.selected-drink p{text-wrap:balance;max-width:150px}
.selected-drinks[data-count="3"],.selected-drinks[data-count="4"],.selected-drinks[data-count="5"]{max-height:284px}
.selected-drinks[data-count="3"] .selected-drink,.selected-drinks[data-count="4"] .selected-drink,.selected-drinks[data-count="5"] .selected-drink{height:136px;padding-bottom:2px}
.selected-drinks[data-count="3"] .summary-art-canvas,.selected-drinks[data-count="4"] .summary-art-canvas{top:-162px}
.selected-drinks[data-count="5"] .summary-art-canvas{top:-144px}
.selected-drinks[data-count="3"] p,.selected-drinks[data-count="4"] p{line-height:1.15}
[data-node-id="2800:1999"]:has(.selected-drinks[data-count="3"],.selected-drinks[data-count="4"],.selected-drinks[data-count="5"]) [data-node-id="2800:2053"]{translate:0 26px} /* đoạn "Cảm ơn bạn đã góp vị" lùi xuống khi lưới 2 hàng */