*{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:1fr 1fr;gap:20px}.den{display:grid;grid-template-columns:70px 1fr 100px;gap:6px 10px;align-items:center}.den input{height:40px;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}