:root{--chili: #f15a24;--chili-deep: #d44514;--navy: #1e3a5f;--rice: #faf3e0;--z-nl300: #141415;--z-nl500: #767a7f;--z-nl700: #a2a5aa;--z-bl300: #0068ff;--z-gl300: #34c759;--z-ol300: #ff8a00;--z-rl300: #ff3b30;--z-bg: #f2f3f5;--z-surface: #ffffff;--z-divider: #e8e9eb;--z-radius: 8px;--tap: 44px;--z-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:var(--z-font);background:var(--z-bg);color:var(--z-nl300);-webkit-font-smoothing:antialiased}#app{min-height:100vh}.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--z-bg);display:flex;flex-direction:column;position:relative}.staff-bar{display:flex;flex-wrap:wrap;gap:8px;padding:8px 12px;background:var(--z-surface);border-bottom:1px solid var(--z-divider)}.staff-bar button.link{font-size:13px}main.page{flex:1;padding:12px 16px 20px;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}main.page.staff-page{padding-bottom:24px}h2{margin:4px 0 6px;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--z-nl300);text-wrap:balance}h3{margin:0 0 8px;font-size:15px;font-weight:600}.eyebrow{margin:0;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chili)}.meta,.muted{color:var(--z-nl500);font-size:12px;line-height:1.4;text-wrap:pretty}.muted{margin:0 0 8px}button,.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;border-radius:var(--z-radius);padding:8px 14px;min-height:40px;font:inherit;font-size:14px;font-weight:600;line-height:1.25;background:var(--chili);color:#fff;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease,opacity .12s ease}button:hover:not(:disabled):not(.list-item):not(.menu-mode-card):not(.tabbar button):not(.link):not(.seg){background:var(--chili-deep);color:#fff}button.ghost:hover:not(:disabled){background:var(--chili);border-color:var(--chili);color:#fff}button.secondary:hover:not(:disabled){color:#fff}button:active:not(:disabled):not(.list-item):not(.chip-btn){transform:scale(.98)}.tabbar button:active{transform:none}button.secondary{background:var(--navy)}button.ghost{background:var(--z-surface);color:var(--z-nl300);border:1px solid var(--z-divider)}button:disabled{opacity:.4;cursor:not-allowed}button.link{background:none;color:var(--chili);padding:0;min-height:auto;font-weight:600;font-size:13px}button.link:hover:not(:disabled){background:none;color:var(--chili-deep);text-decoration:underline}.card{border:1px solid var(--z-divider);border-radius:12px;padding:14px;margin-bottom:10px;background:var(--z-surface)}.card p{margin:6px 0 0;font-size:14px;color:var(--z-nl500);line-height:1.45}.row{display:flex;justify-content:space-between;gap:8px;align-items:center}.card>.row{align-items:flex-start;gap:12px}.card>.row strong{flex:1;min-width:0;text-wrap:pretty}.card>.row .price-lg{flex:none;white-space:nowrap}.warn,.error,.info{border-radius:var(--z-radius);padding:12px 14px;margin-bottom:12px;font-size:14px;line-height:1.5;text-wrap:pretty}.error{background:#fff1f0;color:var(--z-rl300)}.warn{background:#fff7e8;color:#ad6800}.info{background:#fff4ec;color:var(--chili-deep);border:1px solid #f3c4ae}label.field{display:block;margin-bottom:12px;font-size:12px;font-weight:600;color:var(--z-nl500)}label.field input,label.field select,label.field textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;min-height:var(--tap);border:1px solid var(--z-divider);border-radius:var(--z-radius);font:inherit;font-size:15px;background:var(--z-surface);color:var(--z-nl300)}label.field input:focus,label.field select:focus,label.field textarea:focus{border-color:var(--chili);box-shadow:0 0 0 3px #f15a2424;outline:none}.seg-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.seg-toggle button{min-height:var(--tap);border-radius:var(--z-radius);border:1px solid var(--z-divider);background:#fff;font-weight:600;color:var(--z-nl500)}.seg-toggle button:hover:not(:disabled){background:#fff7f2;color:var(--chili);border-color:var(--chili)}.seg-toggle button.on,.seg-toggle button.on:hover:not(:disabled){border-color:var(--chili);background:#fff7f2;color:var(--chili);box-shadow:inset 0 0 0 1px var(--chili)}label.field.check{display:flex;align-items:center;gap:8px;margin:4px 0 16px;font-size:14px;font-weight:500;color:var(--z-nl300);cursor:pointer}label.field.check input{display:inline-block;width:18px;height:18px;min-height:18px;margin:0;padding:0;accent-color:var(--chili);box-shadow:none}.btn-block{width:100%;min-height:var(--tap);font-size:15px}.brand-head{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:12px 14px;background:linear-gradient(135deg,rgba(241,90,36,.08),transparent 55%),var(--z-surface);border:1px solid var(--z-divider);border-radius:14px}.brand-head-logo{flex:none;width:48px;height:48px;object-fit:cover;border-radius:12px;display:block;background:var(--rice)}.brand-head-text{min-width:0;display:flex;flex-direction:column;gap:2px}.brand-head-text strong{font-size:16px;font-weight:700;letter-spacing:-.02em}.brand-head-text span{font-size:12px;font-weight:500;color:var(--z-nl500)}.hero-date{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px;padding:14px;background:var(--z-surface);border-radius:var(--z-radius);border:1px solid var(--z-divider)}.hero-date time{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em}.pill,.pill-menu{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:10px;font-weight:600;white-space:nowrap}.pill-menu{background:#fff4ec;color:var(--chili);border:1px solid #f3c4ae}.special-card{position:relative;overflow:hidden;border:1px solid #f0a57e;background:radial-gradient(120px 80px at 100% 0%,rgba(241,90,36,.18),transparent 70%),linear-gradient(145deg,#fff4ec,#fff 55%);box-shadow:0 8px 20px #f15a241a;padding:14px}.special-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--chili),#ff8a4c)}.special-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.special-kicker{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chili)}.special-badge{flex:none;font-size:10px;font-weight:700;background:var(--chili);color:#fff;padding:4px 9px;border-radius:999px}.special-body{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center}.special-photo{width:64px;height:64px;border-radius:14px;overflow:hidden;border:2px solid #fff;box-shadow:0 6px 14px #f15a2433;background:#f3e6dc}.special-photo img{width:100%;height:100%;object-fit:cover;display:block}.special-copy h3{margin:0;font-size:18px;font-weight:700}.special-copy p{margin:4px 0 0;font-size:12px;color:var(--z-nl500)}.special-price{font-size:15px;font-weight:800;color:var(--chili);white-space:nowrap}.search{position:relative;display:block}.search-ico{position:absolute;left:12px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--z-nl500);pointer-events:none}.search-ico svg{display:block;width:100%;height:100%}label.field .search input{padding-left:40px}.point-card{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:start}.point-code{width:48px;height:48px;border-radius:var(--z-radius);background:var(--navy);color:var(--rice);font-weight:700;font-size:12px;display:grid;place-items:center;font-variant-numeric:tabular-nums}.point-code.kitchen{background:var(--chili)}.card.point-article.kitchen{border-color:#f3c4ae;background:linear-gradient(180deg,#fffaf7,#fff)}.point-title-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}.point-title-row strong{font-size:15px}.meter{height:4px;border-radius:99px;background:var(--z-divider);overflow:hidden;margin:8px 0 6px}.meter>span{display:block;height:100%;background:var(--chili);border-radius:inherit;transition:width .7s cubic-bezier(.22,1,.36,1)}.meter.full>span{background:var(--z-ol300)}.btn-point{margin-top:10px;min-height:40px;width:100%}.chip{font-size:10px;font-weight:700;border-radius:999px;padding:3px 8px;white-space:nowrap}.chip.cam{background:var(--chili);color:#fff}.chip.green{background:var(--z-gl300);color:#fff}.chip.muted{background:#e5e7eb;color:#6b7280}.social-footer{margin-top:24px;margin-bottom:8px;padding:16px 14px 14px;border:1px solid var(--z-divider);border-radius:14px;background:var(--z-surface)}.social-kicker{margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chili)}.hotline-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#fff7f2,#fff);border:1px solid #f3c4ae;text-decoration:none;color:inherit;min-height:56px}.hotline-ico{flex:none;width:40px;height:40px;border-radius:12px;background:var(--chili);color:#fff;display:grid;place-items:center}.hotline-ico svg{width:20px;height:20px}.hotline-text{flex:1;display:flex;flex-direction:column;gap:2px}.hotline-label{font-size:12px;color:var(--z-nl500)}.hotline-text strong{font-size:17px;font-weight:700}.hotline-cta{flex:none;padding:8px 12px;border-radius:999px;background:var(--chili);color:#fff;font-size:12px;font-weight:700}.social-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:12px}.social-chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 6px;min-height:72px;border-radius:12px;border:1px solid var(--z-divider);background:#fafafa;text-decoration:none;color:var(--z-nl300);font-size:11px;font-weight:600}.social-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff}.social-mark svg{width:16px;height:16px}.social-mark.zalo{background:#0068ff}.social-mark.fb{background:#1877f2;font-family:Georgia,Times New Roman,serif;font-size:18px}.social-mark.tt{background:#111}.social-note{margin:12px 0 0;font-size:12px;color:var(--z-nl500);text-align:center;text-wrap:pretty}.tabbar{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--z-divider);background:var(--z-surface);padding:6px 8px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px #1414150a;z-index:5}.tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:none;color:var(--z-nl700);min-height:56px;border-radius:12px;font-size:11px;font-weight:600;padding:8px 10px 6px}.tabbar button .tab-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:10px;transition:background .2s ease,color .2s ease,transform .2s ease}.tabbar button .tab-ico svg{width:22px;height:22px;display:block}.tabbar button.active{color:var(--chili)}.tabbar button.active .tab-ico{background:#f15a241a;color:var(--chili);animation:tab-pop .35s ease}.tabbar button.active:before{content:"";position:absolute;top:0;left:50%;width:28px;height:3px;margin-left:-14px;border-radius:0 0 3px 3px;background:var(--chili);animation:tab-line .28s ease}.sticky-footer{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,var(--z-bg) 28%);padding:16px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.price-lg{font-weight:700;font-size:18px}.progress-circles{display:flex;justify-content:space-between;gap:6px;margin:12px 0 14px}.progress-circles span{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:var(--z-nl700);font-weight:600;text-align:center}.progress-circles i{width:28px;height:28px;border-radius:50%;border:2px solid var(--z-divider);background:#fff;display:grid;place-items:center;font-size:12px;font-style:normal;color:transparent}.progress-circles .done i{border-color:var(--z-gl300);background:var(--z-gl300);color:#fff}.progress-circles .done i:after{content:"✓";color:#fff}.progress-circles .active{color:var(--chili)}.progress-circles .active i{border-color:var(--chili);background:#fff4ec;box-shadow:0 0 0 3px #f15a2426}.choice{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:10px;padding:12px;min-height:var(--tap);border:1px solid var(--z-divider);border-radius:var(--z-radius);margin-top:8px;cursor:pointer;background:var(--z-surface)}.choice.selected{border-color:var(--chili);background:#fff7f2;box-shadow:inset 0 0 0 1px var(--chili)}.choice.disabled{opacity:.45;pointer-events:none;filter:grayscale(.35)}.choice input{margin:0;accent-color:var(--chili)}.qty{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px;padding:10px 12px;background:var(--z-surface);border:1px solid var(--z-divider);border-radius:var(--z-radius)}.qty .n{font-size:20px;font-weight:700;min-width:28px;text-align:center}.qty button{width:var(--tap);height:var(--tap);padding:0}.list-item{display:block;width:100%;text-align:left;background:var(--z-surface);color:inherit;border:1px solid var(--z-divider);margin-bottom:8px;font-weight:600;border-radius:var(--z-radius);padding:12px 14px;min-height:var(--tap)}.pickup-code{font-size:32px;letter-spacing:.12em;text-align:center;font-weight:700;margin:10px 0 4px;color:var(--z-nl300)}.qr-box{text-align:center;margin:10px 0}.qr-box img{max-width:200px;width:100%;background:#fff;padding:10px;border-radius:var(--z-radius);border:1px solid var(--z-divider)}.stamp{border:1px solid var(--z-divider);border-radius:var(--z-radius);background:var(--z-surface);padding:16px 12px 12px;text-align:center}.pay-amount{font-size:28px;font-weight:700;color:var(--z-nl300);margin:4px 0 2px}.pay-ref{font-weight:700;letter-spacing:.04em;font-size:15px}.countdown{font-variant-numeric:tabular-nums;font-weight:700;color:var(--chili)}.stack-gap{display:grid;gap:8px}.empty-state{text-align:center;padding:24px 12px;color:var(--z-nl500);border:1px dashed var(--z-divider);border-radius:var(--z-radius);background:var(--z-surface);font-size:14px}.closed-hero{text-align:center;padding:36px 12px 12px}.closed-hero p{text-wrap:pretty;max-width:22em;margin-left:auto;margin-right:auto}.closed-hero img{width:min(160px,52%);border-radius:12px;margin:0 auto 16px;display:block}.dev-bar{font-size:12px;padding:8px 16px 16px;color:var(--z-nl500);border-top:1px dashed var(--z-divider);background:var(--z-surface)}.dev-bar input{width:100%;margin-top:6px;padding:8px;border:1px solid var(--z-divider);border-radius:8px}.pickup-input{letter-spacing:.3em;font-size:24px;font-weight:700;text-align:center}.scan-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}.scan-cell{border:1px solid var(--z-divider);border-radius:var(--z-radius);padding:12px;font-size:12px;background:var(--z-surface);color:var(--z-nl500)}.scan-cell.on{border-color:var(--z-gl300);background:#f0faf2;color:var(--z-nl300)}.menu-mode-card{display:block;width:100%;text-align:left;cursor:pointer;border:1px solid var(--z-divider);margin-top:10px;font:inherit;color:inherit;background:var(--z-surface)}.menu-mode-card:hover,.menu-mode-card:hover:not(:disabled){border-color:var(--chili);background:var(--chili);color:#fff}.menu-mode-card:hover strong,.menu-mode-card:hover p,.menu-mode-card:hover .muted{color:#fff!important}.pay-checking{text-align:center;padding:48px 16px}.spinner{width:40px;height:40px;margin:0 auto 16px;border:3px solid #f3d5c4;border-top-color:var(--chili);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.pay-amount-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.btn-copy-sm{padding:6px 10px;font-size:12px;min-height:36px}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.motion-page>*{animation:rise-in .38s cubic-bezier(.22,1,.36,1) both}.motion-page>*:nth-child(2){animation-delay:45ms}.motion-page>*:nth-child(3){animation-delay:90ms}.motion-page>*:nth-child(4){animation-delay:135ms}.motion-page>*:nth-child(5){animation-delay:.18s}.motion-page>*:nth-child(6){animation-delay:225ms}.motion-page>*:nth-child(7){animation-delay:.27s}.motion-page>*:nth-child(8){animation-delay:315ms}.motion-page>*:nth-child(n+9){animation-delay:.36s}@keyframes tab-pop{0%{transform:scale(.88)}to{transform:scale(1)}}@keyframes tab-line{0%{width:0;margin-left:0;opacity:.4}to{width:28px;margin-left:-14px;opacity:1}}.choice,.menu-mode-card,.seg-toggle button{transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}