@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap";:root{font-family:IBM Plex Sans Thai,Inter,sans-serif;color:#182a2a;background:#f5f7f6;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:flex}.sidebar{width:244px;flex:none;background:#fff;border-right:1px solid #e8eeeb;display:flex;flex-direction:column;padding:24px 15px 16px}.brand{display:flex;gap:11px;align-items:center;padding:0 7px 24px}.brand-icon{width:38px;height:38px;border-radius:12px;background:#0e8175;color:#fff;display:grid;place-items:center}.brand b,.customer-top b{font:800 19px Inter,sans-serif;letter-spacing:-.7px;color:#16302e}.brand b span,.customer-top b span{color:#16a394}.brand small{display:block;color:#879593;font-size:11px;margin-top:2px}.shop-switch{border:1px solid #e9eeeb;border-radius:12px;padding:10px;display:flex;align-items:center;gap:9px;margin-bottom:29px}.shop-switch>div:nth-child(2){flex:1}.shop-avatar,.user-avatar,.top-avatar{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:#e5f5f0;color:#128173;font-weight:700}.shop-switch b,.user-card b{font-size:12px;display:block}.shop-switch small,.user-card small{font-size:10px;color:#899694;display:block}.shop-switch>svg{color:#8a9895}.nav-label{color:#9ca9a6;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;padding:0 10px 9px}.sidebar nav{display:grid;gap:4px}.nav-item{height:41px;display:flex;align-items:center;gap:12px;padding:0 10px;color:#71807c;text-decoration:none;border-radius:9px;font-size:12px;font-weight:500}.nav-item svg{color:#91a09c}.nav-item.active{background:#e9f6f2;color:#0d776b;font-weight:600}.nav-item.active svg{color:#0d897a}.nav-pill{margin-left:auto;background:#fff;border:1px solid #d5ebe5;border-radius:5px;padding:1px 5px;font:600 9px Inter;color:#149383}.sidebar-bottom{margin-top:auto}.sidebar-bottom>.nav-item{margin-bottom:10px}.user-card{display:flex;align-items:center;gap:9px;border-top:1px solid #eff2f0;padding:14px 5px 0}.user-card>div:nth-child(2){flex:1}.user-card>svg{color:#9ba8a5}.user-avatar{background:#f9e8d9;color:#a6612c}.main-area{min-width:0;flex:1}.topbar{height:65px;background:#fff;border-bottom:1px solid #e9efec;display:flex;align-items:center;justify-content:space-between;padding:0 30px}.crumb{display:flex;gap:11px;align-items:center;font-size:11px;color:#929f9b}.crumb b{font-weight:400;color:#d4ddda}.crumb strong{color:#53635f;font-weight:600}.top-actions{display:flex;align-items:center;gap:20px}.display-link{display:flex;align-items:center;gap:7px;color:#52625e;text-decoration:none;font-size:11px;border:1px solid #e7eeeb;border-radius:8px;padding:8px 10px}.online{font-size:10px;color:#72817d;display:flex;align-items:center;gap:6px}.online i{width:6px;height:6px;background:#32b785;border-radius:50%}.top-avatar{border-radius:50%;width:30px;height:30px}.workspace{display:grid;grid-template-columns:minmax(400px,1fr) 370px;min-height:calc(100vh - 65px)}.products-pane{padding:26px 30px 22px;min-width:0}.page-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.eyebrow{font-size:10px;color:#8b9995;letter-spacing:.1px}.eyebrow span{padding:0 4px;color:#c2cdca}.page-title h1{font-size:22px;letter-spacing:-.5px;margin:4px 0 0;font-weight:700}.title-dot{display:inline-block;background:#1a9b8a;width:7px;height:7px;border-radius:50%;vertical-align:3px}.page-title p{margin:3px 0 0;color:#899692;font-size:11px}.outline-btn{border:1px solid #dbe5e1;border-radius:8px;background:#fff;color:#40534f;display:flex;align-items:center;gap:7px;font-size:11px;padding:9px 12px}.outline-btn svg{color:#128778}.search-box{height:43px;background:#fff;border:1px solid #e2eae6;border-radius:9px;display:flex;align-items:center;gap:10px;padding:0 12px;color:#9ba7a3}.search-box input{border:0;outline:0;flex:1;min-width:0;font-size:11px;color:#354844}.search-box input::placeholder{color:#aab5b1}.search-box kbd{font:10px Inter;color:#9daaa6;border:1px solid #e5ebe8;border-radius:4px;padding:3px 5px}.filters{display:flex;gap:7px;padding:16px 0 14px;align-items:center;overflow:auto}.filter{border:1px solid #e2e9e6;color:#788681;background:transparent;border-radius:20px;padding:6px 10px;white-space:nowrap;font-size:10px}.filter span{margin-left:6px;border-radius:10px;background:#f0f3f2;padding:1px 5px;color:#899692;font:9px Inter}.filter.active{background:#e7f4f0;border-color:#cce8df;color:#0f7f71;font-weight:600}.filter.active span{background:#d6eee6;color:#167f71}.filter-add{font-size:10px;color:#82908c;border:0;background:transparent;white-space:nowrap;margin-left:auto}.product-grid{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));gap:12px}.product-card{position:relative;text-align:left;padding:7px;border:1px solid #e9efec;border-radius:10px;background:#fff;min-width:0;transition:.15s;box-shadow:0 1px 2px #163c2b05}.product-card:hover{border-color:#9ed7c9;transform:translateY(-1px);box-shadow:0 6px 16px #1e58420e}.product-art{height:93px;border-radius:7px;display:grid;place-items:center;position:relative;overflow:hidden}.product-art>span{font-size:34px;filter:drop-shadow(0 4px 4px #303b2d23)}.coffee{background:#f4eae1}.tea{background:#f2e8de}.bread{background:#f7eddd}.water{background:#e4f1f5}.cookie{background:#f2e7dd}.orange{background:#f8ebdc}.product-stock{position:absolute;bottom:6px;left:6px;background:#fffdf9cc;padding:2px 5px;border-radius:4px;font-size:8px;color:#63716b}.product-info{display:flex;justify-content:space-between;align-items:start;gap:3px;padding:8px 3px 3px}.product-info>div{min-width:0}.product-info small{font-size:8px;color:#9ba7a3;display:block}.product-info b{font-size:10px;display:block;color:#33443f;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-info strong{font:600 10px Inter;color:#137c6f;white-space:nowrap;padding-top:12px}.product-sku{font:8px Inter;color:#a4afac;padding:0 3px 2px}.add-mark{position:absolute;right:7px;top:7px;background:#fff;color:#188c7b;border-radius:50%;height:22px;width:22px;display:grid;place-items:center;opacity:0;box-shadow:0 1px 4px #25473b20}.product-card:hover .add-mark{opacity:1}.catalog-foot{display:flex;justify-content:space-between;align-items:center;color:#99a49f;font-size:9px;padding-top:16px}.catalog-foot button{border:0;background:transparent;color:#168474;font-size:10px;font-weight:600}.catalog-foot button span{padding-left:4px}.cart-pane{background:#fff;border-left:1px solid #e6edea;display:flex;flex-direction:column;padding:21px 19px 14px;min-height:calc(100vh - 65px)}.cart-head{display:flex;justify-content:space-between;align-items:start}.cart-title{display:flex;align-items:center;gap:9px}.cart-title h2{margin:0;font-size:16px;letter-spacing:-.3px}.order-number{font:10px Inter;color:#85938f;background:#f2f5f4;padding:4px 6px;border-radius:5px}.cart-head p{font-size:9px;color:#98a49f;margin:4px 0 15px}.cart-head p span{padding:0 3px;color:#cad3d0}.more-btn{border:1px solid #edf1ef;background:#fff;border-radius:7px;width:28px;height:27px;color:#74817d;letter-spacing:1px}.customer-select{display:flex;align-items:center;gap:9px;background:#f8faf9;border:1px solid #eef2f0;border-radius:9px;padding:9px 10px}.customer-icon{width:31px;height:31px;display:grid;place-items:center;color:#138575;background:#e5f3ef;border-radius:8px}.customer-select>div:nth-child(2){flex:1}.customer-select small{display:block;color:#99a6a2;font-size:8px}.customer-select b{font-size:10px}.customer-select button{font-size:9px;border:0;background:transparent;color:#168776;font-weight:600}.cart-label{display:flex;justify-content:space-between;padding:19px 1px 9px;color:#85928e;font-size:9px;border-bottom:1px solid #f0f3f2}.cart-label span:last-child{color:#a3aeaa}.cart-items{min-height:140px;flex:1;max-height:calc(100vh - 530px);overflow:auto}.empty-cart{height:145px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#a6b0ad}.empty-icon{width:42px;height:42px;background:#f5f8f6;border-radius:50%;display:grid;place-items:center;color:#9baba5;margin-bottom:4px}.empty-cart b{font-size:10px;color:#63716c;font-weight:600}.empty-cart span{font-size:9px}.cart-item{position:relative;display:flex;align-items:flex-start;gap:9px;padding:11px 0;border-bottom:1px solid #f0f3f2}.item-thumb{width:34px;height:34px;border-radius:7px;background:#f8eee1;display:grid;place-items:center;font-size:18px}.item-main{flex:1;min-width:0}.item-main>b{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:10px}.item-main>span{display:block;color:#98a4a0;font:9px Inter;margin-top:3px}.cart-item>strong{font:600 10px Inter;padding-top:2px}.qty-control{display:flex;align-items:center;gap:9px;margin-top:6px;color:#52615d}.qty-control button{width:20px;height:19px;display:grid;place-items:center;border:1px solid #e7eeea;border-radius:5px;color:#687772;background:#fff}.qty-control b{font:10px Inter}.remove-item{border:0;background:none;color:#bac4c0;padding:0}.cart-bottom{padding-top:7px}.discount-btn{width:100%;display:flex;justify-content:space-between;border:1px dashed #dce7e2;border-radius:7px;background:#fbfcfc;color:#75837e;padding:7px 9px;font-size:9px}.discount-btn span{color:#168a7b;font-size:13px;line-height:12px}.total-line{display:flex;justify-content:space-between;align-items:center;font-size:10px;padding:12px 1px 4px;color:#65736f}.total-line b{font:600 11px Inter;color:#354640}.total-line.muted{padding-top:4px;color:#9ba6a2;font-size:9px}.total-line small{font-size:8px;color:#adb7b3;margin-left:3px}.grand-total{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eef2f0;margin-top:7px;padding:12px 1px 11px;color:#33453f;font-size:11px;font-weight:600}.grand-total b{font:700 19px Inter;color:#0c7f71;letter-spacing:-.5px}.payment-heading{display:flex;justify-content:space-between;color:#82908b;font-size:9px;margin:2px 0 8px}.payment-heading button{border:0;background:none;color:#168879;font-size:9px}.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.payment-option{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 3px;border:1px solid #e5ece8;border-radius:7px;background:#fff;color:#77847f;font-size:8px;white-space:nowrap}.payment-option svg{width:13px}.payment-option.selected{border-color:#68b9a7;background:#f0faf6;color:#137c6e}.payment-option .check-icon{position:absolute;right:3px;top:3px;width:10px}.charge-btn{border:0;width:100%;height:43px;background:#117f72;color:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;font-size:10px;font-weight:600;box-shadow:0 3px 8px #117f7226}.charge-btn span{font:600 11px Inter;margin-left:auto;padding-right:11px}.charge-btn:disabled{opacity:.45;cursor:not-allowed}.secure-note{display:flex;align-items:center;justify-content:center;gap:4px;color:#a0aca7;font-size:8px;padding-top:8px}.secure-note svg{color:#2caa81}.scanner-note{display:flex;align-items:center;gap:10px;background:#e9f7f2;border:1px solid #cce8df;border-radius:8px;padding:9px 12px;color:#148272;margin:-7px 0 12px}.scanner-note div{flex:1}.scanner-note b,.scanner-note span{display:block}.scanner-note b{font-size:10px}.scanner-note span{font-size:9px;color:#6b8880}.scanner-note button{background:none;border:0;color:#6a8e83}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:#183c35;color:#fff;border-radius:8px;padding:12px 15px;display:flex;align-items:center;gap:8px;font-size:11px;box-shadow:0 8px 22px #173c3433}.toast svg{color:#6ee0b4}.toast button{background:none;border:0;color:#aec7bf;margin-left:8px;display:grid;place-items:center}.customer-screen{height:100vh;min-height:500px;background:#f6faf8;display:flex;flex-direction:column;padding:25px 5vw;color:#1c3530}.customer-top{display:flex;align-items:center;gap:10px}.customer-top .brand-icon{width:40px;height:40px}.customer-top>span{margin-left:auto;font-size:11px;color:#879591}.display-content{width:min(100%,1000px);margin:auto;display:grid;grid-template-columns:1fr .78fr;gap:8vw;align-items:center}.display-list h1{font-size:27px;margin:8px 0 25px;letter-spacing:-.7px}.display-items{display:grid;gap:13px;border-bottom:1px solid #e4ece8;padding-bottom:17px}.display-items>div{display:flex;justify-content:space-between;font-size:13px;color:#61706b}.display-items b{color:#99a5a1;font-weight:500;padding-left:6px}.display-items strong{font:600 13px Inter;color:#344640}.display-wait{height:100px;border:1px dashed #dce7e2;display:flex;align-items:center;justify-content:center;gap:10px;color:#9ba9a4;font-size:11px;border-radius:9px}.display-total{display:flex;align-items:center;justify-content:space-between;padding-top:18px;font-size:13px;color:#61706b}.display-total strong{font:700 30px Inter;color:#0b8274;letter-spacing:-1px}.display-pay{text-align:center}.qr-card{background:#fff;border:1px solid #e8efeb;border-radius:17px;padding:25px;box-shadow:0 8px 25px #204b3d0a}.qr-placeholder{width:172px;height:172px;background:#fff;padding:9px;border:1px solid #eef2ef;border-radius:8px;margin:auto;position:relative}.qr-grid{height:100%;width:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:2px}.qr-grid i{background:#f3f6f4;border-radius:1px}.qr-grid i.dark{background:#13352f}.qr-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;border:4px solid white;border-radius:10px;background:#0e8879;color:#fff;display:grid;place-items:center}.qr-caption{display:block;font-size:11px;font-weight:600;margin-top:14px}.pay-method-hint{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:16px;color:#167e72;font-size:10px}.display-pay>small{display:block;color:#98a49f;font-size:9px;margin-top:9px}.display-footer{display:flex;justify-content:space-between;color:#9aa7a2;font-size:9px;padding:15px 0}.display-success{margin:auto;text-align:center}.display-success>div{width:80px;height:80px;margin:auto;border-radius:50%;background:#e1f7ed;color:#15956c;display:grid;place-items:center}.display-success h1{font-size:28px;margin:20px 0 3px}.display-success p{font-size:14px;color:#668078;margin:0}.display-success span{display:block;font-size:11px;color:#9aa7a2;margin-top:17px}@media(max-width:1100px){.sidebar{width:210px}.workspace{grid-template-columns:minmax(350px,1fr) 340px}.products-pane{padding-left:20px;padding-right:20px}.product-grid{grid-template-columns:repeat(3,minmax(110px,1fr))}.cart-pane{padding-left:15px;padding-right:15px}.online{display:none}}@media(max-width:820px){.sidebar{width:64px;padding:18px 9px}.brand{padding:0 3px 24px}.brand>div:nth-child(2),.shop-switch>div:nth-child(2),.shop-switch>svg,.nav-label,.nav-item:not(.active){display:none}.shop-switch{border:0;padding:0;justify-content:center;margin-bottom:25px}.nav-item.active{font-size:0;justify-content:center;padding:0}.nav-item.active svg{width:21px;height:21px}.nav-pill{display:none}.sidebar-bottom .nav-item{display:flex;font-size:0;justify-content:center;padding:0}.user-card{justify-content:center;padding-top:12px}.user-card>div:nth-child(2),.user-card>svg{display:none}.workspace{grid-template-columns:minmax(300px,1fr) 320px}.topbar{padding:0 18px}.product-grid{grid-template-columns:repeat(2,minmax(100px,1fr))}}@media(max-width:650px){.sidebar{display:none}.topbar{height:54px;padding:0 14px}.top-actions{gap:10px}.display-link{font-size:0;padding:7px}.display-link svg{width:17px}.workspace{display:flex;flex-direction:column}.products-pane{padding:20px 14px}.cart-pane{border-left:0;border-top:1px solid #e6edea;min-height:auto;padding:18px 14px}.cart-items{max-height:260px;min-height:80px}.empty-cart{height:100px}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-art{height:100px}.page-title h1{font-size:20px}.page-title p{font-size:10px}.outline-btn{font-size:0;padding:10px}.outline-btn svg{width:18px;height:18px}.catalog-foot{padding-bottom:10px}.display-content{display:flex;flex-direction:column;gap:25px;padding:25px 0}.display-list{width:100%}.display-list h1{font-size:22px}.display-pay{width:min(100%,330px)}.qr-card{padding:16px}.customer-screen{padding:17px 18px}.customer-top>span{font-size:9px}.display-footer{font-size:8px;gap:15px}.display-total strong{font-size:24px}}.scanner-copy{flex:1}.scanner-copy video{display:block;width:min(100%,360px);max-height:190px;background:#183c35;border-radius:7px;object-fit:cover;margin-top:8px}.scanner-copy span{display:block}.qr-caption{line-height:1.5}.qr-placeholder:after{content:"ตัวอย่าง";position:absolute;inset:0;display:grid;place-items:center;background:#ffffffd9;color:#536d66;font-size:11px;font-weight:600}.online i{background:#e4a439}.login-screen{min-height:100vh;background:#f5f8f6;display:grid;place-items:center;padding:20px}.login-card{width:min(100%,390px);background:#fff;border:1px solid #e6ede9;border-radius:16px;padding:30px;box-shadow:0 12px 35px #1640320d}.login-card h1{font-size:21px;margin:18px 0 3px}.login-card h1 span{font:800 18px Inter;color:#138879}.login-card p{font-size:11px;color:#81908b;margin:0 0 20px}.login-card label{display:block;font-size:10px;color:#64736e;margin:13px 0}.login-card input,.bank-reference{display:block;width:100%;height:40px;margin-top:6px;border:1px solid #e2eae6;border-radius:7px;padding:0 10px;outline-color:#75c6b0;font-size:11px}.login-card .charge-btn{margin-top:17px;justify-content:center}.login-card small{display:block;color:#9ba8a3;font-size:9px;margin-top:13px}.form-error,.form-success{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:7px;font-size:10px;margin:0 0 12px}.form-error{background:#fff0ed;color:#ad4b3e}.form-success{background:#eaf8f2;color:#178267}.form-error button,.form-success button{margin-left:auto;border:0;background:none;color:inherit;display:grid;place-items:center}.catalog-empty{height:180px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:#8a9893;font-size:10px}.catalog-empty b{color:#52625d;font-size:12px}.catalog-empty .empty-icon{margin:0}.logout-mini{border:1px solid #e8efeb;border-radius:5px;background:#fff;color:#71817b;font-size:9px;padding:4px 7px}.bank-reference{height:34px;margin:8px 0 0;font-size:10px}.display-payment-icon{height:142px;display:grid;place-items:center;color:#6ea99a;background:#f0f7f4;border-radius:10px;margin-bottom:12px}.management-page{padding:27px 30px;max-width:1500px}.management-grid{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:16px;align-items:start}.management-card{background:#fff;border:1px solid #e7eeea;border-radius:11px;padding:18px}.management-card h2{font-size:14px;margin:0 0 15px}.product-form label,.stock-modal label{display:block;color:#697872;font-size:10px;margin:11px 0}.product-form input,.product-form select,.stock-modal input,.report-controls input{display:block;width:100%;height:36px;border:1px solid #e1e9e5;border-radius:6px;padding:0 9px;margin-top:5px;font-family:inherit;font-size:11px;outline-color:#65b6a4;background:#fff}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.product-form .charge-btn{margin-top:12px}.table-heading{display:flex;align-items:center;justify-content:space-between}.table-heading span{font-size:10px;color:#84918c}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:10px;text-align:left}th{font-weight:500;color:#8d9a95;background:#f8faf9;white-space:nowrap}th,td{padding:10px 9px;border-bottom:1px solid #edf1ef}td{color:#53625c}td b{font-size:10px;color:#33453f}td small{display:block;color:#9ba7a2;font-size:9px;margin-top:2px}.stock-low{color:#bb6845;font-weight:700}.table-action{border:1px solid #dfe9e4;background:#fff;border-radius:5px;color:#177f71;font-size:9px;padding:5px 7px;white-space:nowrap}.table-empty{padding:28px;text-align:center;color:#9ba7a2;font-size:10px}.modal-backdrop{position:fixed;inset:0;background:#143a3038;display:grid;place-items:center;padding:18px;z-index:10}.stock-modal{width:min(100%,380px);position:relative}.stock-modal p{font-size:10px;color:#89958f}.modal-close{position:absolute;right:12px;top:12px;border:0;background:transparent;color:#89958f}.report-controls{display:flex;align-items:end;gap:10px;margin:0 0 17px}.report-controls label{font-size:10px;color:#73817b}.report-controls input{width:auto;min-width:145px}.report-controls .outline-btn{height:36px}.report-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:16px}.report-cards article{display:grid;gap:7px}.report-cards small{font-size:10px;color:#87948e}.report-cards b{font:700 22px Inter;color:#147f71}.report-cards span{font-size:9px;color:#98a49f}.report-methods>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #edf1ef;font-size:10px;color:#65736e}.report-methods b{font:600 11px Inter;color:#3f4f49}.accounting-list{margin-top:5px}.logout-mini{cursor:pointer}@media(max-width:900px){.management-grid{grid-template-columns:1fr}.management-page{padding:22px 18px}}@media(max-width:650px){.management-page{padding:18px 13px}.report-cards{grid-template-columns:1fr}.report-controls{flex-wrap:wrap}.report-controls input{min-width:120px}.product-form .form-row{gap:7px}}