@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Sarabun:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Kanit,Sarabun,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;font-feature-settings:"rlig" 1,"calt" 1;margin:0;min-height:100vh;line-height:1.6}html{scroll-behavior:smooth}.flex{display:flex}.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.space-x-2>*+*{margin-left:.5rem}.space-x-3>*+*{margin-left:.75rem}.space-x-4>*+*{margin-left:1rem}.space-y-2>*+*{margin-top:.5rem}.space-y-3>*+*{margin-top:.75rem}.space-y-4>*+*{margin-top:1rem}.emoji{font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",EmojiOne Color,"Android Emoji",Twemoji Mozilla,"system-ui",sans-serif;font-variant-emoji:emoji;-webkit-font-feature-settings:"rlig" 1,"calt" 1;font-feature-settings:"rlig" 1,"calt" 1}.min-touch{min-width:48px;min-height:48px}.min-touch-lg{min-width:56px;min-height:56px}.min-touch-xl{min-width:64px;min-height:64px}.touch-spacing{gap:.75rem}.touch-spacing-lg{gap:1rem}.touch-spacing-xl{gap:1.25rem}.touch-padding{padding:.75rem}.touch-padding-lg{padding:1rem}.touch-padding-xl{padding:1.25rem}.touch-margin{margin:.75rem}.touch-margin-lg{margin:1rem}.tap-highlight-none{-webkit-tap-highlight-color:transparent}.touch-manipulation{touch-action:manipulation}.touch-pan-x{touch-action:pan-x}.touch-pan-y{touch-action:pan-y}.touch-pinch-zoom{touch-action:pinch-zoom}.no-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.w-full{width:100%}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-16{width:4rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-16{height:4rem}.h-screen{height:100vh}.p-1{padding:.25rem}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mr-2{margin-right:.5rem}.mx-auto{margin-left:auto;margin-right:auto}.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.text-center{text-align:center}.text-white{color:#fff}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.bg-white{background-color:#fff}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.fixed{position:fixed}.inset-0{inset:0}.z-50{z-index:50}.max-w-md{max-width:28rem}.shadow-lg{box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.border-b{border-bottom:1px solid #e5e7eb}.modal-overlay{position:fixed;inset:0;background-color:#0009;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;animation:modal-overlay-enter .2s cubic-bezier(.4,0,.2,1)}.modal-content{background-color:#fff;border-radius:1rem;box-shadow:0 20px 40px #00000026,0 8px 16px #0000001a;max-height:calc(100vh - 2rem);overflow:hidden;width:100%;max-width:28rem;animation:modal-content-enter .3s cubic-bezier(.34,1.56,.64,1)}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb;background-color:#f9fafb;min-height:60px}.modal-body{padding:1.5rem;overflow-y:auto;max-height:calc(80vh - 120px)}.payment-method-button{width:100%;padding:1rem 1.25rem;border:2px solid #e5e7eb;border-radius:.75rem;display:flex;align-items:center;gap:.75rem;transition:all .2s cubic-bezier(.4,0,.2,1);background-color:#fff;cursor:pointer;min-height:56px;font-weight:500;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}.payment-method-button:hover{border-color:#d1d5db;background-color:#f9fafb;transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.payment-method-button:active{transform:translateY(0) scale(.98);transition:all .1s cubic-bezier(.4,0,.2,1)}.payment-method-button.selected{border-color:var(--primary-500);background-color:#f973160d;box-shadow:0 0 0 1px #f973161a}@keyframes modal-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes modal-content-enter{0%{opacity:0;transform:scale(.9) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.grid{display:grid}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-6{gap:1.5rem}@media (min-width: 768px){.md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}.border{border:1px solid #e5e7eb}.border-t{border-top:1px solid #e5e7eb}.border-l{border-left:1px solid #e5e7eb}.rounded-lg{border-radius:.5rem}.rounded-full{border-radius:9999px}.cursor-pointer{cursor:pointer}.overflow-y-auto{overflow-y:auto}.overflow-x-auto{overflow-x:auto}.transition-colors{transition:color .15s,background-color .15s}.transition-all{transition:all .2s}.opacity-30{opacity:.3}:root{--primary-500: #f97316;--primary-600: #ea580c;--success-500: #22c55e;--success-600: #16a34a}.text-primary-600{color:var(--primary-600)}.bg-primary-500{background-color:var(--primary-500)}.bg-success-500{background-color:var(--success-500)}.bg-green-100{background-color:#dcfce7}.text-green-800{color:#166534}.text-success-600{color:var(--success-600)}.animate-spin{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn-touch{min-height:48px;min-width:48px;padding:1rem 1.25rem;border-radius:.75rem;font-weight:500;font-size:1rem;line-height:1.2;transition:all .15s cubic-bezier(.4,0,.2,1);outline:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.btn-touch:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,rgba(255,255,255,.3) 0%,transparent 70%);border-radius:inherit;opacity:0;transform:scale(0);transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none}.btn-touch:active:before{opacity:1;transform:scale(1);transition:all .2s cubic-bezier(.4,0,.2,1)}.btn-primary{background-color:var(--primary-500);color:#fff;box-shadow:0 2px 8px #f9731640,0 1px 3px #0000001a;border:1px solid transparent}.btn-primary:hover{background-color:var(--primary-600);box-shadow:0 4px 12px #f973164d,0 2px 6px #0000001a;transform:translateY(-1px)}.btn-primary:active{background-color:#ea580c;box-shadow:0 2px 4px #f9731633;transform:scale(.96) translateY(0)}.btn-success{background-color:var(--success-500);color:#fff;box-shadow:0 2px 8px #22c55e40,0 1px 3px #0000001a;border:1px solid transparent}.btn-success:hover{background-color:var(--success-600);box-shadow:0 4px 12px #22c55e4d,0 2px 6px #0000001a;transform:translateY(-1px)}.btn-success:active{background-color:#15803d;box-shadow:0 2px 4px #22c55e33;transform:scale(.96) translateY(0)}.btn-secondary{background-color:#6b7280;color:#fff;box-shadow:0 2px 8px #6b728040,0 1px 3px #0000001a;border:1px solid transparent}.btn-secondary:hover{background-color:#4b5563;box-shadow:0 4px 12px #6b72804d,0 2px 6px #0000001a;transform:translateY(-1px)}.btn-secondary:active{background-color:#374151;box-shadow:0 2px 4px #6b728033;transform:scale(.96) translateY(0)}.btn-error{background-color:#ef4444;color:#fff;box-shadow:0 2px 8px #ef444440,0 1px 3px #0000001a;border:1px solid transparent}.btn-error:hover{background-color:#dc2626;box-shadow:0 4px 12px #ef44444d,0 2px 6px #0000001a;transform:translateY(-1px)}.btn-error:active{background-color:#b91c1c;box-shadow:0 2px 4px #ef444433;transform:scale(.96) translateY(0)}.btn-outline{background-color:transparent;border:2px solid #d1d5db;color:#374151;box-shadow:0 1px 3px #0000000d}.btn-outline:hover{border-color:var(--primary-500);color:var(--primary-500);background-color:#f973160d;box-shadow:0 2px 6px #f973161a;transform:translateY(-1px)}.btn-outline:active{background-color:#f973161a;transform:scale(.96) translateY(0)}.btn-ghost{background-color:transparent;border:1px solid transparent;color:#6b7280;box-shadow:none}.btn-ghost:hover{background-color:#f3f4f6;color:#374151;box-shadow:0 1px 3px #0000000d;transform:translateY(-1px)}.btn-ghost:active{background-color:#e5e7eb;transform:scale(.96) translateY(0)}.btn-touch:active{transform:scale(.96);transition:all .1s cubic-bezier(.4,0,.2,1)}.btn-touch:focus{box-shadow:0 0 0 2px #3b82f680}.btn-touch:focus:not(:focus-visible){box-shadow:none}.btn-touch[data-loading=true]{pointer-events:none;position:relative}.btn-touch[data-loading=true]:after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top:2px solid transparent;border-radius:50%;animation:button-spin 1s linear infinite}@keyframes button-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;padding:.5rem}@media (min-width: 640px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.25rem}}@media (min-width: 768px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1.5rem}}@media (min-width: 1024px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.5rem}}.product-card{background-color:#fff;border-radius:.75rem;box-shadow:0 4px 8px #0000000f,0 1px 3px #0000001a;border:1px solid #e5e7eb;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:48px;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.product-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#f973160d,#f9731605);opacity:0;transition:opacity .2s ease;pointer-events:none}.product-card:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px #00000014,0 2px 6px #0000001a;border-color:#f9731633}.product-card:hover:before{opacity:1}.product-card:active{transform:translateY(0) scale(.98);transition:all .1s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 6px #0000001a}.product-card-touch{min-height:56px;padding:.75rem}.product-card-disabled{opacity:.6;cursor:not-allowed;transform:none!important}.pos-layout{display:flex;height:100vh;background-color:#f3f4f6;font-family:Kanit,sans-serif}.pos-products{flex:1;padding:1rem;overflow-y:auto}.pos-cart{width:24rem;background-color:#fff;border-left:1px solid #e5e7eb;display:flex;flex-direction:column}.cart-header{padding:1rem;border-bottom:1px solid #e5e7eb;background-color:#f9fafb}.cart-items{flex:1;padding:1rem;overflow-y:auto;min-height:0}.cart-footer{padding:.75rem 1rem;border-top:1px solid #e5e7eb;background-color:#fff;flex-shrink:0}.category-tabs{display:flex;gap:.75rem;margin-bottom:1rem;overflow-x:auto;padding:.5rem .75rem;scrollbar-width:none;-ms-overflow-style:none}.category-tabs::-webkit-scrollbar{display:none}.category-tab{flex-shrink:0;padding:.75rem 1.25rem;border-radius:.75rem;font-weight:500;font-size:.95rem;line-height:1.2;color:#4b5563;background-color:#fff;border:2px solid #e5e7eb;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:48px;min-width:48px;white-space:nowrap;position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}.category-tab:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#f9731614,#f973160a);opacity:0;transition:opacity .2s ease;pointer-events:none}.category-tab:hover{background-color:#f9fafb;border-color:#d1d5db;transform:translateY(-1px);box-shadow:0 2px 6px #00000014}.category-tab:hover:before{opacity:1}.category-tab:active{transform:translateY(0) scale(.98);transition:all .1s cubic-bezier(.4,0,.2,1)}.category-tab.active{background-color:var(--primary-500);color:#fff;border-color:var(--primary-500);box-shadow:0 4px 10px #f9731640,0 2px 4px #0000001a;transform:translateY(-1px)}.category-tab.active:before{background:linear-gradient(135deg,#ffffff1a,#ffffff0d);opacity:1}.category-tab.active:active{transform:translateY(0) scale(.98);box-shadow:0 2px 6px #f9731633}.font-thai{font-family:Kanit,Sarabun,sans-serif}@media (prefers-reduced-motion: reduce){.btn-touch{transition:none!important}.btn-touch:before{transition:none!important}.product-card,.category-tab{transition:none!important}.modal-overlay,.modal-content{animation:none!important}}@media (prefers-contrast: high){.btn-primary,.btn-success,.product-card,.category-tab{border:2px solid currentColor}}@media (pointer: coarse){.btn-touch,.category-tab{min-height:52px;min-width:52px}.product-card{min-height:52px}}@media (hover: none) and (pointer: coarse){.btn-touch:hover{transform:none;box-shadow:0 2px 8px #0000001a}.product-card:hover{transform:none;box-shadow:0 4px 8px #0000000f,0 1px 3px #0000001a}.category-tab:hover{transform:none;background-color:inherit}}.btn-touch:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px;box-shadow:0 0 0 3px #0ea5e94d}.product-card:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px}.category-tab:focus-visible{outline:3px solid #0ea5e9;outline-offset:2px}@media (max-width: 768px){.pos-layout{flex-direction:column}.pos-cart{width:100%;height:auto;order:-1}.product-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem}.btn-touch{min-height:56px;min-width:56px;font-size:1.1rem}.category-tab{min-height:56px;min-width:56px;font-size:1rem}}@media (max-width: 480px){.product-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));padding:.25rem}.btn-touch{min-height:60px;min-width:60px;padding:1.25rem 1.5rem}}@media (orientation: landscape) and (max-height: 480px){.modal-content{max-height:90vh}.pos-cart{width:20rem}}