*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Sarabun,Leelawadee UI,Tahoma,sans-serif;background:#e8edf5;color:#10203f;-webkit-user-select:none;user-select:none;overflow:hidden}input,select,button{font-family:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}.mut{color:#4a5d80;font-size:14px}.err{background:#fde2e2;color:#8a1c1c;border-radius:8px;padding:8px 12px;margin:8px 0;font-weight:600}.splash,.screen{height:100%;display:flex;align-items:center;justify-content:center;background:#0b3a8c;color:#fff;font-size:22px}.card{background:#fff;color:#10203f;border-radius:14px;padding:24px 28px;width:min(760px,94vw);display:flex;flex-direction:column;gap:8px;font-size:17px}.card.two{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}.card.small{width:380px}.card h2{margin:0;font-size:26px}.logo{font-size:36px;font-weight:800;color:#c8102e}label{font-weight:700;font-size:15px}input.big,select.big{height:52px;border:1px solid #c7d2e3;border-radius:8px;padding:0 14px;font-size:22px;width:100%}input.on{border:2px solid #0b3a8c}.btn{border:0;border-radius:10px;min-height:52px;padding:0 16px;font-size:18px;font-weight:700;color:#fff;background:#16449e;display:flex;flex-direction:column;align-items:center;justify-content:center}.btn small{font-size:12px;font-weight:400;opacity:.85}.btn.big{min-height:84px;font-size:20px}.btn.sm{min-height:34px;font-size:14px;padding:0 10px;display:inline-flex}.btn.green{background:#1f8a4c}.btn.red{background:#8a1c1c}.btn.gray{background:#3d4f6e}.btn.navy{background:#0b3a8c}.btn.brown{background:#8a5a1c}.btn.soon{background:#9aa3b2}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pad{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:68px;gap:8px}.n{border:0;border-radius:8px;background:#2a62c6;color:#fff;font-size:22px;font-weight:700}.n.del{background:#3d4f6e;font-size:16px}.n.ok,.n.op{background:#1d55b8;font-size:16px}.sale{height:100%;display:grid;grid-template-columns:1fr 390px}.sale.left{grid-template-columns:390px 1fr}.sale.left main{order:2}main{display:flex;flex-direction:column;min-width:0;min-height:0}.top{background:#0b3a8c;color:#fff;padding:6px 18px;display:flex;justify-content:space-between;align-items:center}.top .lbl{display:flex;flex-direction:column}.top .lbl small{font-size:14px;color:#ffb3bd;font-weight:700}.top .lbl span{font-size:17px;font-weight:700}.top .lbl b{font-size:22px}.top .num{font-size:clamp(48px,7.5vw,84px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.top.yellow .num,.top.yellow .lbl b{color:#ffd166}.top.green{background:#1f8a4c}.sub{display:grid;grid-template-columns:1fr 1fr;background:#123f8f;color:#fff}.sub.green{background:#17703d}.sub .tot{padding:6px 18px;display:grid;grid-template-columns:auto 1fr;gap:1px 16px;font-size:17px;border-right:1px solid #2c5bb0}.sub .tot b{text-align:right;font-variant-numeric:tabular-nums}.sub .tot b.y{color:#ffd166}.sub .info{padding:6px 18px;display:flex;flex-direction:column;font-size:16px;min-width:0}.mut2{color:#c9d7f2;font-size:14px}.list{flex:1;display:flex;flex-direction:column;background:#fff;margin:6px;border-radius:8px;border:1px solid #c7d2e3;min-height:0}.rows{flex:1;overflow:auto}.row{display:grid;grid-template-columns:1fr 54px 76px 70px 90px;gap:6px;padding:8px 10px;border-bottom:1px solid #edf1f7;font-size:17px;align-items:center}.row.head{background:#dfe7f3;font-size:13px;font-weight:700;color:#33476b;padding:6px 10px}.row .r{text-align:right;font-variant-numeric:tabular-nums}.row.sel{background:#eaf1ff;outline:2px solid #3f73d6;outline-offset:-2px}.row.void{color:#8a95a8;text-decoration:line-through}.row.yel{background:#fff8db}.row.subrow{padding:0 10px 6px 26px;font-size:14px;color:#1a6b3c;border-bottom:1px solid #edf1f7}.row.pay{color:#1a6b3c;background:#eef9f2}.tag{font-style:normal;font-size:12px;border-radius:4px;padding:1px 6px;margin-left:6px;text-decoration:none;display:inline-block}.tag.y{background:#ffe680;color:#5c3f00}.tag.g{background:#eee;color:#555}.foot{display:flex;justify-content:space-between;padding:5px 10px;font-size:14px;color:#33476b;background:#f5f7fb;border-radius:0 0 8px 8px}.scan{display:flex;align-items:center;gap:10px;background:#0b3a8c;color:#fff;padding:7px 12px}.scan label{font-size:18px;color:#fff;min-width:96px}.scan .qty{background:#ffd166;color:#10203f;border-radius:6px;padding:4px 10px;font-weight:800}.scan input{flex:1;height:44px;border:0;border-radius:6px;padding:0 12px;font-size:20px}.kp{background:#0d2c66;padding:7px;display:flex;flex-direction:column;gap:6px;min-height:0}.fgrid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:4px;min-height:0}.f{border:0;border-radius:8px;background:#1e4fa8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.12;font-size:14px;font-weight:700;padding:0 3px;white-space:nowrap;min-height:0}.f small{font-size:10px;font-weight:400;opacity:.75}.f.svc{background:#0f7a6b}.f.cafe{background:#5b3a1e}.f.promo{background:#a3361c}.f.qr{background:#7a4a00}.f.dark{background:#5c1414}.f.red{background:#8a1c1c}.f.gray{background:#3d4f6e}.f.navy{background:#0b3a8c}.f:active,.n:active{filter:brightness(1.25)}.bottom{flex:0 0 40%;display:flex;flex-direction:column;gap:5px;min-height:0}.npad{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}.npad .n{font-size:19px}.npad .enter{grid-row:span 2}.npad .zero{grid-column:span 3}.pay{border:0;border-radius:8px;background:#1f8a4c;color:#fff;min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.pay b{font-size:22px}.pay small{font-size:11px}.toast{position:fixed;left:50%;top:18%;transform:translate(-50%);background:#10203f;color:#fff;padding:14px 24px;border-radius:12px;font-size:19px;z-index:50;box-shadow:0 10px 30px #0000004d}.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:#08163499;display:flex;align-items:center;justify-content:center;z-index:40}.sheet{background:#fff;border-radius:14px;padding:16px 20px;width:min(700px,94vw);max-height:92vh;overflow:auto;display:flex;flex-direction:column;gap:10px;font-size:17px}.sh{display:flex;justify-content:space-between;align-items:center}.sh h2{margin:0;font-size:23px}.x{border:1px solid #c7d2e3;background:#fff;border-radius:8px;min-height:40px;padding:0 12px;font-size:15px}.note{background:#f5f7fb;border-radius:8px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center}.pick{display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;border:1px solid #c7d2e3;background:#f5f8fd;border-radius:10px;padding:10px 14px;font-size:17px;width:100%}.pick span{font-size:14px;color:#4a5d80}.pick.unit{grid-template-columns:120px 1fr 80px;align-items:center}.pick .r{text-align:right;font-size:22px}.holdrow,.chk{display:flex;gap:8px;align-items:center}.chk input{width:22px;height:22px}.close2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}.den{display:grid;grid-template-columns:84px minmax(0,1fr) 90px;gap:4px 10px;align-items:center}.den span{text-align:right;font-weight:700}.den input{height:34px;border:1px solid #c7d2e3;border-radius:6px;padding:0 10px;font-size:18px;text-align:right}.den b{text-align:right}.r2{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid #edf1f7}.r2.big{font-size:20px}.r2.minus{color:#8a1c1c}.lock{position:fixed;top:0;right:0;bottom:0;left:0;background:#0b3a8c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:60}.lock h1{margin:0;font-size:44px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}.dot.on{background:#3ddc84}.dot.off{background:#ff5252}.cust{height:100%;background:#0b3a8c;color:#fff;display:flex;flex-direction:column}.ch{display:flex;justify-content:space-between;padding:16px 24px;font-size:26px}.ch span{font-size:20px;opacity:.85}.cbody{flex:1;display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:0 16px 16px;min-height:0}.clist{background:#fff;color:#10203f;border-radius:14px;padding:10px 16px;overflow:auto}.crow{display:grid;grid-template-columns:1fr 60px 120px;gap:8px;padding:10px 0;border-bottom:1px solid #edf1f7;font-size:22px}.crow b{text-align:right}.crow small{color:#1a6b3c;font-size:15px}.cwel{font-size:34px;font-weight:800;text-align:center;margin-top:30%;color:#0b3a8c}.cside{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#123f8f;border-radius:14px}.cside img{background:#fff;border-radius:12px;padding:8px;width:min(360px,90%)}.cside p{font-size:28px;font-weight:800}.clab{font-size:30px}.cbig{font-size:84px;font-weight:800;font-variant-numeric:tabular-nums}.cbig.yellow{color:#ffd166}.cbig.green{color:#7dffa8}.cdis{font-size:22px;opacity:.9}@keyframes posblink{0%,to{box-shadow:0 0 #ffd54a}50%{box-shadow:0 0 0 4px #ffd54a;background:#c27c00}}.f.blink{animation:posblink 1.2s infinite}.quick{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}.qchip{display:inline-flex;align-items:center;border:1px solid #c7d2e6;background:#f3f6fb;border-radius:18px;font-size:15px;overflow:hidden}.qchip button,button.qchip{border:0;background:none;padding:7px 12px;font:inherit;cursor:pointer;color:#0b3a8c}.qchip.on{background:#0b3a8c;border-color:#0b3a8c}.qchip.on button{color:#fff}.qchip b{padding:0 10px;color:#b00;cursor:pointer}button.qchip.add{color:#666;border-style:dashed}.qadd{display:inline-flex;gap:6px;align-items:center}.qadd input{height:36px;font-size:15px;width:180px}.sh .x,button.x{width:40px;height:40px;min-width:40px;padding:0;border-radius:50%;border:0;background:#e5484d;color:#fff;font-size:18px;font-weight:700;cursor:pointer;line-height:1;box-shadow:0 2px 6px #e5484d59}.sh .x:hover{background:#c93a3f}.billsum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}.billsum>div{background:#f3f6fb;border:1px solid #d6deea;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column}.billsum span{font-size:13px;color:#556}.billsum b{font-size:22px}.billsum .tot{background:#0f7a3a;border-color:#0f7a3a;color:#fff}.billsum .tot span{color:#d9f2e3}.billsum .tot b{font-size:26px}.f.off{background:#5b6472!important;color:#c9ced6!important;opacity:.75;box-shadow:none}.f.amlogo{background:#0b4a33!important;display:grid;place-items:center;padding:4px}.f.amlogo img{height:100%;max-height:60px;aspect-ratio:1;border-radius:50%;background:#fff}.cafepos{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#fff}.cafepos iframe{width:100%;height:100%;border:0}.cafeback{position:fixed;right:14px;bottom:14px;z-index:51;background:#0b3a8c;color:#fff;border:0;border-radius:24px;padding:12px 18px;font-size:16px;font-weight:700;box-shadow:0 4px 14px #0000004d;cursor:pointer}.f.online{background:#06c755}.olist{display:flex;flex-direction:column;gap:10px;max-height:62vh;overflow:auto}.oitem{border:1px solid #d5dbe5;border-left:6px solid #999;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px}.oitem.s-NEW{border-left-color:#d64545;background:#fff6f6}.oitem.s-ACCEPTED{border-left-color:#b7791f}.oitem.s-READY{border-left-color:#1e6fd9}.oitem.s-DELIVERING{border-left-color:#6b2fb3}.oitem .oh{display:flex;justify-content:space-between;gap:8px}.oitem select{padding:6px 8px;font-size:15px;border-radius:6px;min-width:180px}.pp{width:min(480px,94vw);border-top:8px solid #16a34a}.pp-no{font-size:44px;font-weight:900;margin:4px 0}.pp-no small{font-size:16px;font-weight:700;display:block}.pp-it{font-size:18px;border-top:1px dashed #bbb;border-bottom:1px dashed #bbb;padding:6px 0;margin:6px 0;max-height:34vh;overflow:auto}.pp-note{background:#fff6d6;padding:6px;border-radius:6px;margin:4px 0}.pp-b{display:flex;gap:8px;margin-top:10px}.pp-b .btn{flex:1;padding:14px;font-size:18px}.pw{width:min(860px,96vw)}.pw-h{font-weight:800;margin:14px 0 6px;font-size:16px}.pw-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.pw-t{display:flex;flex-direction:column;gap:2px;text-align:left;border:2px solid #cbd5e1;background:#fff;border-radius:14px;padding:12px 14px;font:inherit;cursor:pointer;width:100%}.pw-t{border-top:6px solid var(--tc,#cbd5e1)}.pw-t b{font-size:24px;color:var(--tc,#0b3d91)}.pw-t:disabled{opacity:.5;cursor:not-allowed}.pw-logo{width:26px;height:26px;border-radius:6px;vertical-align:middle;margin-right:8px;object-fit:contain}.pw-t small{color:#666}.pw-t span{font-weight:700;color:#16a34a}.pw-t em{font-style:normal;font-size:12px;color:#555}.pw-t.busy{border-color:#f59e0b;background:#fffbeb}.pw-t.busy span{color:#b45309}.pw-t.mine{border-color:#16a34a;background:#f0fdf4}.pw-t.cur{box-shadow:0 0 0 3px #93c5fd}.pw-t.busy,.pw-t.mine{border-top-color:var(--tc,#cbd5e1)}.pw-t.am{border-color:#5b3a1e;background:#f6efe7}.pw-t.am b{color:var(--tc,#5b3a1e);font-size:22px}.pw-t.am span{color:#5b3a1e;font-weight:400}.lg-logos{display:flex;align-items:center;gap:10px;margin-bottom:6px}.lg-logos img{width:64px;height:64px;border-radius:14px;object-fit:contain;background:#fff;border:1px solid #e5e7eb}.lg-logos span{font-size:24px;color:#94a3b8;font-weight:700}.lg-two{margin:4px 0 8px;color:#334155}.lg-two .pc{color:#0b6b3a}.lg-two .am{color:#5b3a1e}.tkbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fde68a;color:#78350f;padding:6px 12px;border-bottom:2px solid #f59e0b}.tkbar span{font-size:13px}.tkbar button{margin-left:auto;background:#b45309;color:#fff;border:0;border-radius:8px;padding:6px 12px;font:inherit;font-weight:700;cursor:pointer}.btn.tkbtn{background:#f59e0b;color:#1f2937;font-weight:800}.tkrep{margin-top:10px;border:2px solid #f59e0b;background:#fffbeb;border-radius:10px;padding:8px 10px}.tkrep small{display:block;color:#78350f;margin:-2px 0 6px}.close2 .r2{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #eef2f7}.close2 .r2 span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.close2 .r2 b{white-space:nowrap}.tkrep{margin-top:8px;border:1px solid #f59e0b;background:#fffbeb;border-radius:10px;padding:6px 10px;font-size:14px}.tkrep .r2{border-bottom:1px dashed #fcd34d}.close2 .btn.big.red{width:100%;margin-top:10px}.den span{white-space:nowrap;font-size:14px}.tknote{display:block;color:#92400e;font-size:12px;margin-top:4px}.f{border-radius:10px;box-shadow:inset 0 -3px #0000002e}.f:active{transform:translateY(1px);box-shadow:none}.f.sys{background:#475569}.f.closeb{background:#475569;box-shadow:inset 0 0 0 3px #ef4444}.f.svc{background:#0f766e}.f.cust{background:#1d4ed8}.f.bill{background:#1e3a8a}.f.warn{background:#b91c1c}.f.drw{background:#57534e}.f.qty{background:#facc15;color:#1f2937}.f.qty small{opacity:.8}.btn.os-go{width:100%;height:64px;font-size:22px;margin-top:6px}.os-sw{display:block;width:100%;margin-top:10px;background:none;border:0;color:#475569;text-decoration:underline;font-size:15px;cursor:pointer;padding:8px}.pcam{position:relative;overflow:hidden;background:radial-gradient(circle at 12% 18%,#ffe1e4 0,transparent 42%),radial-gradient(circle at 88% 85%,#d6f5e4 0,transparent 45%),linear-gradient(135deg,#fff7f2,#f2fbf6)!important;color:#111827}.pcam-bg{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.pcam-bg svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.pcam-lg{position:absolute;top:50%;width:min(46vw,76vh);aspect-ratio:1;border-radius:50%;border:8px solid #fff;box-shadow:0 18px 40px #00000038;object-fit:cover}.pcam-lg.pc{right:50%;transform:translateY(-50%) rotate(-6deg)}.pcam-lg.am{left:50%;transform:translateY(-50%) rotate(6deg)}.pcam>.card,.pcam>.login-card,.pcam .pcam-card{position:relative;z-index:2;background:#ffffffbd!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.9);border-radius:30px!important;box-shadow:0 30px 80px #1018282e!important}.pcam input{border:2px solid #eef0f4!important;border-radius:16px!important;background:#fff!important}.pcam input:focus,.pcam input.on{border-color:#ff4d5e!important;box-shadow:0 0 0 5px #ffe4e7;outline:0}.pcam .pcam-go,.pcam form .btn.block:not(.ghost){border:0;border-radius:999px!important;color:#fff!important;background:linear-gradient(90deg,#ff3b4f,#ff7a59 45%,#22c47a)!important;box-shadow:0 12px 24px #ff3b4f47}.pcam .pcam-chips{display:flex;gap:8px;flex-wrap:wrap}.pcam .pcam-chips span{display:inline-flex;gap:6px;align-items:center;background:#fff;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:#111827;box-shadow:0 2px 10px #0000000f}.pcam .pcam-chips i{width:10px;height:10px;border-radius:50%;display:inline-block}.pcam .n{background:#fff;color:#111827;border-radius:22px;font-weight:500;font-size:26px;box-shadow:0 6px 16px #10182817}.pcam .n.del{background:#f1f5f9;color:#475569;font-size:17px}.pcam .n.ok{background:linear-gradient(135deg,#22c47a,#0b6b3a);color:#fff;font-size:18px}.pcam .btn.green{border-radius:999px;background:linear-gradient(90deg,#ff3b4f,#ff7a59 45%,#22c47a)}.pcam .btn.gray{border-radius:999px;background:#475569}.pcam .card h2{color:#111827}.pcam .mut{color:#64748b}.pcam .pcam-go{width:100%;min-height:58px;font-size:20px}@media (max-aspect-ratio:1/1){.pcam-lg{width:min(78vw,46vh);top:auto}.pcam-lg.pc{right:auto;left:50%;top:-6vh;transform:translate(-58%) rotate(-6deg)}.pcam-lg.am{left:50%;bottom:-6vh;transform:translate(-42%) rotate(6deg)}}