:root{color:#17201b;font-synthesis:none;text-rendering:optimizelegibility;background:#eef2ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}.landing-page,.login-page,.scan-page{background:radial-gradient(circle at 80% 20%,#0f6f532e,#0000 28%),linear-gradient(135deg,#f8f4e9 0%,#f7faf7 54%,#e6f4ee 100%);min-height:100vh}.landing-nav,.landing-hero,.landing-steps,.register-section{width:min(1160px,100% - 32px);margin:0 auto}.landing-nav{justify-content:space-between;align-items:center;gap:14px;min-height:78px;display:flex}.landing-nav-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.brand.dark{color:#17201b}.brand.dark small{color:#607069}.landing-nav button,.hero-actions a,.hero-actions button,.register-form button,.login-form button{color:#fff;background:#0f6f53;border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 15px;font-weight:850;text-decoration:none;display:inline-flex}.landing-nav button.ghost-action{color:#17201b;background:#ffffffc7;border:1px solid #17201b29}.landing-hero{grid-template-columns:minmax(0,1fr) 360px;align-items:center;gap:clamp(28px,6vw,80px);min-height:calc(82vh - 78px);padding:34px 0 58px;display:grid}.hero-copy h1{color:#111814;letter-spacing:0;max-width:760px;margin:0;font-size:clamp(2.5rem,6vw,6rem);line-height:.95}.hero-copy>p:not(.eyebrow){color:#536057;max-width:650px;font-size:1.08rem;line-height:1.7}.eyebrow{color:#0f6f53;letter-spacing:0;text-transform:uppercase;margin:0 0 12px;font-size:.78rem;font-weight:900}.hero-actions{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.hero-actions button{color:#17201b;background:#ffffffc7;border:1px solid #17201b29}.landing-preview,.landing-card,.register-form,.login-form{background:#ffffffe6;border:1px solid #dfe6e1;border-radius:8px;box-shadow:0 18px 48px #1a221d14}.landing-preview{padding:22px}.preview-head,.preview-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.preview-head{justify-content:flex-start}.preview-head>span,.landing-card>span{color:#fff;background:#17201b;border-radius:8px;place-items:center;width:44px;height:44px;display:grid}.preview-head small{color:#607069;margin-top:3px;display:block}.preview-qr{background:#f9fbf8;border:1px dashed #c3cec7;border-radius:8px;place-items:center;min-height:210px;margin:20px 0;display:grid}.preview-row{border-top:1px solid #e4eae5;padding-top:14px}.preview-row span{color:#607069}.preview-row strong{color:#0f6f53;font-size:1.2rem}.landing-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px 0 54px;display:grid}.landing-card{min-height:188px;padding:18px}.landing-card strong{margin-top:18px;display:block}.landing-card p,.register-section>div>p{color:#607069;line-height:1.6}.register-section{grid-template-columns:minmax(0,.85fr) minmax(320px,1fr);align-items:start;gap:30px;padding:54px 0 78px;display:grid}.register-section h2{color:#111814;max-width:560px;margin:0;font-size:clamp(1.8rem,3.4vw,3.3rem);line-height:1.05}.register-form{grid-template-columns:1fr 1fr;gap:12px;padding:18px;display:grid}.register-form label{color:#536057;gap:7px;font-weight:800;display:grid}.register-form .wide,.register-form button,.register-form .form-error,.demo-account{grid-column:1/-1}.register-form input{color:#17201b;background:#fff;border:1px solid #d8e0da;border-radius:8px;min-height:44px;padding:0 12px}.register-form button:disabled{opacity:.72;cursor:default}.form-error{color:#b83232;margin:0;font-weight:800}.demo-account{background:#f3fbf6;border:1px solid #bfe4d2;border-radius:8px;gap:5px;padding:14px;display:grid}.demo-account span{color:#0f6f53;text-transform:uppercase;font-size:.78rem;font-weight:900}.demo-account strong{color:#111814;font-size:1.1rem}.demo-account p,.demo-account small{color:#536057;margin:0}.demo-account button{margin-top:7px}.login-section,.scan-section{grid-template-columns:minmax(0,.9fr) minmax(320px,420px);align-items:center;gap:clamp(28px,6vw,78px);width:min(980px,100% - 32px);min-height:calc(100vh - 78px);margin:0 auto;padding:42px 0 72px;display:grid}.login-copy h1,.scan-copy h1{color:#111814;letter-spacing:0;max-width:620px;margin:0;font-size:clamp(2.4rem,5.6vw,5.4rem);line-height:.95}.login-copy p:not(.eyebrow),.scan-copy p:not(.eyebrow){color:#536057;max-width:560px;font-size:1.05rem;line-height:1.7}.scan-copy{gap:10px;display:grid}.login-form,.scan-form{gap:14px;padding:22px;display:grid}.login-icon{color:#fff;background:#17201b;border-radius:8px;place-items:center;width:52px;height:52px;display:grid}.login-form label,.scan-form label{color:#536057;gap:7px;font-weight:800;display:grid}.login-form input,.scan-form input{color:#17201b;background:#fff;border:1px solid #d8e0da;border-radius:8px;min-height:46px;padding:0 12px}.login-form button:disabled,.scan-form button:disabled{opacity:.72;cursor:default}.scan-form{background:#ffffffe6;border:1px solid #dfe6e1;border-radius:8px;box-shadow:0 18px 48px #1a221d14}.scan-form-head{border-bottom:1px solid #e4eae5;justify-content:space-between;align-items:center;gap:12px;padding-bottom:10px;display:flex}.scan-form-head strong{color:#111814}.scan-form-head span{color:#607069;font-size:.86rem;font-weight:800}.scan-form button{color:#fff;background:#0f6f53;border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 15px;font-weight:850;display:inline-flex}.scan-form .consent-row{color:#536057;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:10px;line-height:1.5;display:grid}.scan-form .consent-row input{width:18px;min-height:18px;margin-top:2px}.zalo-bridge{background:#f3fbf6;border:1px solid #bfe4d2;border-radius:8px;gap:8px;padding:14px;display:grid}.zalo-bridge span{color:#0f6f53;text-transform:uppercase;font-size:.78rem;font-weight:900}.zalo-bridge p{color:#536057;margin:0;line-height:1.5}.zalo-bridge button{margin-top:3px}.scan-success{color:#0f6f53;background:#f3fbf6;border:1px solid #bfe4d2;border-radius:8px;align-items:center;gap:9px;padding:12px;font-weight:850;display:flex}.app-shell{grid-template-columns:264px minmax(0,1fr);min-height:100vh;transition:grid-template-columns .18s;display:grid}.app-shell.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}.app-sidebar{color:#fff;background:#101712;flex-direction:column;gap:22px;height:100vh;padding:22px;display:flex;position:sticky;top:0}.brand,.sidebar-top,.store-card,.app-sidebar nav button,.metric span,.panel-head,.request-title,.request-actions,.customer-row,.voucher,.rules span{align-items:center;display:flex}.brand{gap:12px;min-width:0}.sidebar-top{justify-content:space-between;gap:10px}.brand-mark{filter:drop-shadow(0 8px 18px #0a6f5347);border-radius:8px;flex:none;width:42px;height:42px}.logo-bg{fill:#0f6f53}.logo-ticket{fill:#fffdf5}.logo-coin{fill:#f3c852}.logo-spark,.logo-lines,.logo-perf{fill:none;stroke:#17201b;stroke-linecap:round;stroke-linejoin:round;stroke-width:4px}.logo-lines{stroke:#0f6f53;stroke-width:3.4px}.logo-perf{stroke:#e4eadf;stroke-dasharray:2 5;stroke-width:2px}.brand strong{font-size:1.02rem;display:block}.brand small,.store-card small{color:#9aaca1;margin-top:3px;display:block}.app-sidebar nav{gap:8px;display:grid}.app-sidebar nav button{color:#c9d5ce;background:0 0;border:0;border-radius:8px;gap:10px;min-height:44px;padding:0 12px;font-weight:760}.app-sidebar nav button svg,.store-card svg{flex:none}.sidebar-toggle{color:#fff;background:#ffffff14;border:1px solid #ffffff1f;border-radius:8px;flex:none;place-items:center;width:38px;height:38px;display:grid}.sidebar-toggle:hover{background:#ffffff24}.sidebar-collapsed .app-sidebar{align-items:center;padding:18px 14px}.sidebar-collapsed .sidebar-top,.sidebar-collapsed .brand{flex-direction:column}.sidebar-collapsed .brand>div,.sidebar-collapsed .store-card>div,.sidebar-collapsed .app-sidebar nav button span{display:none}.sidebar-collapsed .app-sidebar nav button,.sidebar-collapsed .store-card{justify-content:center;width:48px;padding:0}.sidebar-collapsed .app-sidebar nav{width:48px}.sidebar-collapsed .store-card{height:48px}.app-sidebar nav button.active,.app-sidebar nav button:hover{color:#fff;background:#243027}.store-card{background:#ffffff0f;border:1px solid #ffffff1a;border-radius:8px;gap:10px;margin-top:auto;padding:14px}.app-main{min-width:0;padding:26px}.app-header{justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px;display:flex}.app-header p,.panel-head p{color:#647168;text-transform:uppercase;margin:0 0 5px;font-size:.82rem;font-weight:850}.app-header h1,.panel-head h2{color:#111814;letter-spacing:0;margin:0}.app-header h1{font-size:clamp(1.8rem,3vw,2.8rem)}.app-header button,.quick-form button{color:#fff;background:#0f6f53;border:0;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:0 15px;font-weight:850;display:inline-flex}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.app-header button.secondary-action{color:#17201b;background:#fff;border:1px solid #d8e0da}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:14px;display:grid}.metric,.panel{background:#fff;border:1px solid #dfe6e1;border-radius:8px;box-shadow:0 14px 36px #1a221d0f}.metric{min-height:118px;padding:17px}.metric span{color:#fff;background:#17201b;border-radius:8px;justify-content:center;width:38px;height:38px}.metric p{color:#647168;margin:14px 0 4px}.metric strong{font-size:1.45rem}.top-grid{grid-template-columns:360px minmax(0,1fr);gap:14px;margin-bottom:14px;display:grid}.bottom-grid{grid-template-columns:minmax(0,1.1fr) minmax(280px,.55fr) minmax(280px,.55fr);gap:14px;display:grid}.panel{padding:18px}.panel-head{justify-content:space-between;gap:16px;margin-bottom:16px}.panel-head h2{font-size:1.25rem}.panel-head>span{color:#0f6f53;background:#e4f6ee;border-radius:8px;flex:none;padding:7px 9px;font-size:.8rem;font-weight:900}.qr-box{background:#f9fbf8;border:1px dashed #c3cec7;border-radius:8px;place-items:center;min-height:232px;display:grid}.quick-form{gap:10px;margin-top:14px;display:grid}.quick-form label,.settings-panel label{color:#536057;gap:7px;font-weight:800;display:grid}.quick-form input,.settings-panel input{color:#17201b;background:#fff;border:1px solid #d8e0da;border-radius:8px;width:100%;min-height:44px;padding:0 12px}.request-list,.customer-list,.voucher-list{gap:10px;display:grid}.empty-state{color:#647168;text-align:center;background:#f8fbf9;border:1px dashed #ccd7d0;border-radius:8px;place-items:center;min-height:96px;font-weight:800;display:grid}.request{background:#fff;border:1px solid #e3e9e5;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;min-height:104px;padding:14px;display:grid}.request.approved{background:#f3fbf6;border-color:#bfe4d2}.request.rejected{opacity:.68}.request-title{justify-content:space-between;gap:12px}.request-title span,.status{color:#0f6f53;font-size:.78rem;font-weight:900}.request p{color:#647168;margin:7px 0}.request b{color:#17201b}.request-actions{gap:8px}.request-actions button{color:#17201b;background:#edf2ee;border:0;border-radius:8px;place-items:center;width:40px;height:40px;display:grid}.request-actions button:first-child{color:#fff;background:#0f6f53}.customer-row{border-top:1px solid #edf1ee;grid-template-columns:42px minmax(0,1fr) auto auto;gap:12px;min-height:62px;padding:10px 0;display:grid}.avatar{color:#fff;background:#17201b;border-radius:8px;place-items:center;width:42px;height:42px;font-weight:900;display:grid}.customer-row p,.voucher p{color:#647168;margin:4px 0 0;line-height:1.45}.tier,.voucher span{border-radius:8px;padding:7px 9px;font-size:.78rem;font-weight:900}.tier.gold{color:#503a00;background:#ffe59b}.tier.silver{color:#253942;background:#dfecef}.tier.new{color:#195241;background:#dff5ec}.voucher{border-top:1px solid #edf1ee;justify-content:space-between;gap:12px;min-height:66px;padding:12px 0}.voucher span{color:#fff;background:#17201b;flex:none}.segmented{background:#edf2ee;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0;padding:6px;display:grid}.segmented button{color:#536057;background:0 0;border:0;border-radius:8px;min-height:38px;font-weight:850}.segmented button.selected{color:#fff;background:#0f6f53}.rules{gap:10px;display:grid}.rules span{color:#27352e;gap:8px;font-weight:750}.rules svg{color:#0f6f53}@media (width<=1100px){.landing-hero,.register-section,.login-section,.scan-section{grid-template-columns:1fr}.landing-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.app-sidebar{height:100vh;position:sticky}.app-shell:not(.sidebar-collapsed){grid-template-columns:232px minmax(0,1fr)}.top-grid,.bottom-grid{grid-template-columns:1fr}}@media (width<=720px){.landing-nav{flex-direction:column;align-items:flex-start;gap:14px;padding:16px 0}.landing-nav button,.landing-nav-actions,.register-form{width:100%}.landing-nav-actions{justify-content:stretch}.landing-nav-actions button{flex:150px}.landing-hero{min-height:auto;padding-top:18px}.scan-page .landing-nav{min-height:auto}.scan-section{flex-direction:column;gap:18px;min-height:auto;padding:12px 0 32px;display:flex}.hero-copy h1{font-size:3rem}.scan-copy{order:0}.scan-form{order:1;width:100%;padding:18px}.scan-copy h1{font-size:2.35rem;line-height:1}.scan-copy p:not(.eyebrow){margin:0;font-size:.98rem;line-height:1.55}.scan-form button,.zalo-bridge button{width:100%}.landing-steps,.register-form{grid-template-columns:1fr}.app-main{padding:16px}.app-shell{grid-template-columns:76px minmax(0,1fr)}.app-shell:not(.sidebar-collapsed){grid-template-columns:216px minmax(0,1fr)}.app-header{flex-direction:column;align-items:flex-start}.app-header button,.header-actions{width:100%}.metrics{grid-template-columns:1fr 1fr}.customer-row,.request{grid-template-columns:1fr}.request-actions{justify-content:flex-start}}@media (width<=460px){.metrics{grid-template-columns:1fr}.scan-copy h1{font-size:2rem}.scan-form{padding:16px}.scan-form-head{flex-direction:column;align-items:flex-start;gap:4px}}
