/* Betagro Shop Phokeaw: white & green, no external font / icon dependency. v3.1.4: bills refreshing hint. v3.1.3: UAT tools (persona bar, simulated clock, mock chat). v3.1.2: bill delivery time, readiness checklist. v3.1.1: larger customer text, single promo strip, pay block on top. v3.1.0: dark mode follows the device, or the back-office toggle (html[data-theme]) */
:root{--bg:#F5F7F4;--surface:#FFFFFF;--surface-2:#F2F6F1;--sunk:#E7EEE8;--ink:#183C30;--ink-2:#465E53;--muted:#617368;--line:#E0E8DF;--line-2:#BBCDBF;--brand:#00845F;--brand-btn:#006B4E;--brand-ink:#006346;--brand-soft:#E9F4EC;--accent:#205B54;--accent-soft:#EAF3F2;--accent-ink:#235A54;--warn:#805200;--warn-soft:#FFF5D9;--bad:#AC2D26;--bad-soft:#FCEDEB;--good:#006346;--good-soft:#E9F4EC;--radius:18px;--top-height:90px;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-padding-top:100px}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:"Leelawadee UI","Noto Sans Thai","Sukhumvit Set",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}
button{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #BD8B25;outline-offset:3px}
button{cursor:pointer}button:disabled{cursor:not-allowed}
a{color:var(--brand-ink);text-underline-offset:3px}
h1,h2,h3,p{margin:0}h2{font-size:19px;line-height:1.5}h3{font-size:16px;line-height:1.5}small{font-size:13px}
.ui-icon{display:inline-block;width:24px;height:24px;vertical-align:middle;flex-shrink:0}
.top{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.top-inner{max-width:1000px;margin:auto;display:flex;align-items:center;gap:12px;min-height:var(--top-height);padding:12px 20px}
.top .t{flex:1;min-width:0;line-height:1.45}.top h1{font-size:16px;font-weight:700;overflow-wrap:anywhere}.top .t small{color:var(--muted);font-size:12px;display:block}.brand-name{font-family:Arial,sans-serif;font-size:12px;letter-spacing:1px;font-weight:800;display:block;color:var(--brand-ink);margin-bottom:3px}.brand-name span{font-family:"Leelawadee UI",sans-serif;font-weight:400;letter-spacing:0;color:var(--muted)}
.brand-symbol{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:14px;background:var(--brand-soft);color:var(--brand-ink)}.brand-symbol .ui-icon{width:25px;height:25px}.demo-tag{font:700 10px Arial,sans-serif;letter-spacing:.8px;background:var(--surface-2);padding:5px 7px;border-radius:5px;color:var(--muted)}
.ic{display:inline-grid;place-items:center;min-width:44px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:22px;flex-shrink:0}
.wrap{max-width:760px;margin:0 auto;padding:20px 20px calc(116px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px;min-width:0}.wrap.wide{max-width:1140px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;min-width:0}.box h3{margin:0 0 10px}
.row{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:14px;align-items:flex-start}.row span:first-child{color:var(--ink-2);min-width:0;overflow-wrap:anywhere}.row>span:last-child,.row>strong:last-child{flex-shrink:0;max-width:70%;text-align:right}.row .step{flex-shrink:0}.row.tot{font-weight:700;border-top:1px solid var(--line);margin-top:8px;padding-top:14px;align-items:center}.row.disc span:last-child{color:var(--good)}
.num{font-variant-numeric:tabular-nums}.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;overflow-wrap:anywhere}.hint{font-size:13px;color:var(--muted);line-height:1.6}.price{font:750 23px/1.4 system-ui,sans-serif;letter-spacing:-.7px;color:var(--brand-ink);font-variant-numeric:tabular-nums}.big{font-size:28px;font-weight:700;color:var(--brand-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 18px;border-radius:12px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;text-decoration:none;line-height:1.45;text-align:center}.btn.pri{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff;box-shadow:0 4px 12px #006B4E12}.btn.blue{background:var(--accent);border-color:var(--accent);color:#fff}.btn.bad{color:var(--bad);border-color:var(--bad);background:var(--surface)}.btn.sm{min-height:44px;padding:8px 12px;font-size:13px}.btn.block{width:100%}.btn[disabled]{opacity:.48}.btn .ui-icon{width:20px;height:20px}.text-btn{border:0;background:transparent;color:var(--brand-ink);padding:10px 0;min-height:44px;font-size:14px;font-weight:700}
.shop-hero{position:relative;isolation:isolate;overflow:hidden;border-radius:22px;background:#E7F0E3;min-height:226px;display:flex;align-items:center}.shop-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 55%;z-index:-2}.shop-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#EAF1E6 5%,#EAF1E6F5 34%,#EAF1E608 80%);z-index:-1}.hero-copy{padding:27px;width:69%}.eyebrow{font:700 10px Arial,sans-serif;letter-spacing:.6px;color:#386748}.hero-copy h2{font-size:30px;line-height:1.35;letter-spacing:-.5px;color:#17472E;margin:11px 0}.hero-copy p{font-size:13px;color:#376046}.hero-tag{display:inline-block;font-size:12px;background:#fffC;color:#214B31;padding:5px 10px;border-radius:7px;margin-top:16px}.image-note{position:absolute;bottom:8px;right:10px;color:#183C30;background:#fffD;border-radius:4px;padding:1px 5px;font-size:10px}
.intro{text-align:center;padding:12px 0}.intro h2{font-size:25px}.intro p{font-size:14px;color:var(--muted);margin-top:8px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-heading h2{display:flex;align-items:center;gap:8px;font-size:18px}.section-heading>.hint{font-size:12px}.section-sub{font-size:13px;color:var(--muted);margin:4px 0 12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 5px;text-align:center;min-height:124px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.tile b{font-size:14px;font-weight:700;white-space:nowrap}.tile small{font-size:11px;color:var(--muted)}.tile-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--brand-soft);color:var(--brand-ink);margin-bottom:3px}.tile.featured{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}.tile.featured .tile-icon{background:#FFFFFF20;color:#fff}.tile.featured small{color:#D3E8DD}.tile.featured b{font-size:16px}.tile:hover,.btn:not(:disabled):hover{filter:brightness(.98)}
.benefit-strip{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 16px;text-align:left}.benefit-icon{color:var(--brand-ink);background:var(--brand-soft);border-radius:50%;padding:9px}.benefit-strip small{display:block;font-size:12px;color:var(--muted)}.benefit-strip b{font-size:25px;line-height:1.3;display:block}.benefit-strip b span{font-size:13px;font-weight:500}.benefit-end{margin-left:auto;font-size:12px;color:var(--muted);text-align:right}.coupon-strip{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px dashed #C3D9BA;border-radius:14px;background:#F0F6E9;color:#35582E}.coupon-strip b{font-size:14px}.coupon-strip small{display:block;font-size:12px}.demo-note{text-align:center;font-size:11px;color:var(--muted);margin:2px 0}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;justify-content:center;background:var(--surface);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));box-shadow:0 -3px 18px #183C3005}.bottom-nav button{max-width:180px;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:51px;border:0;background:transparent;color:var(--muted);font-size:11px;padding:4px;border-radius:12px}.bottom-nav button.on{color:var(--brand-ink);font-weight:700;background:var(--brand-soft)}.bottom-nav .ui-icon{width:23px;height:23px}
.catalog-tools{display:flex;flex-direction:column;gap:13px}.search-box{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);padding:0 14px;color:var(--muted)}.search-box input{min-width:0;flex:1;border:0;background:transparent;min-height:50px;outline-offset:0}.search-box:focus-within{border-color:var(--brand-ink);box-shadow:0 0 0 2px var(--brand-soft)}.search-box input::placeholder{color:var(--muted);font-size:14px}.chips{display:flex;gap:8px;overflow-x:auto;padding:3px 1px 6px;scrollbar-width:thin}.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;min-height:44px;padding:8px 17px;font-size:14px;white-space:nowrap;flex-shrink:0}.chip.on{background:var(--brand-btn);color:#fff;border-color:var(--brand-btn);font-weight:700}
.bundle-section{background:#EBF2E4;border:1px solid #DFE9D6;border-radius:20px;padding:18px}.bundle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.bundle{background:var(--surface);border:1px solid #D9E5D2;border-radius:15px;padding:16px;display:flex;flex-direction:column;gap:9px;min-width:0}.bundle-top{display:flex;align-items:center;justify-content:space-between;color:var(--brand-ink)}.bundle-top .ui-icon{width:30px;height:30px}.bundle-label{font-size:11px;letter-spacing:.1px;background:var(--brand-soft);padding:4px 8px;border-radius:5px}.bundle .nm{font-size:16px}.bundle .it{font-size:12px;color:var(--muted);flex:1}.bundle-buy{display:flex;align-items:center;justify-content:space-between;gap:10px}.bundle-buy small{font-size:11px;color:var(--muted)}.saving{font-size:11px;color:var(--good)}.saving s{color:var(--muted);margin-right:5px}.bundle-section>p.hint{margin-top:10px;font-size:11px}.monthly-pick{display:flex;gap:12px;align-items:center;border-radius:14px;padding:15px;background:var(--accent-soft);color:var(--accent-ink)}.monthly-pick>span{flex:1;min-width:0}.monthly-pick small{display:block;font-size:11px}.monthly-pick b{font-size:14px}.monthly-pick strong{text-align:right;font-size:20px;flex-shrink:0}.monthly-pick strong small{font-size:11px;font-weight:400}
.prod{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px 12px;padding:20px 0;border-top:1px solid var(--line)}.product-section .section-heading{padding-bottom:13px}.product-section .section-heading+.prod{border-top:0}.prod:last-child{padding-bottom:0}.product-symbol{width:44px;height:44px;display:grid;place-items:center;background:var(--surface-2);border-radius:12px;color:var(--brand-ink)}.product-symbol .ui-icon{width:27px;height:27px}.product-info .nm{font-size:16px;margin:0 0 4px;line-height:1.45}.product-meta{font:11px system-ui,sans-serif;color:var(--muted)}.product-buy{grid-column:2;display:flex;align-items:center;justify-content:space-between;gap:8px}.product-buy small{font-size:12px;color:var(--muted)}.tiers{grid-column:2;display:flex;flex-wrap:wrap;gap:6px;font-size:11px;color:var(--ink-2)}.tiers>span{background:var(--surface-2);padding:4px 7px;border-radius:5px}.tiers b{margin-left:3px}.prod.oos .product-symbol,.prod.oos .price{color:var(--muted)}.prod.oos{background:var(--surface-2);margin:0 -8px;padding-left:8px;padding-right:8px;border-radius:12px}.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:5px;background:var(--brand-soft);color:var(--brand-ink);font-weight:600;margin-left:4px;vertical-align:2px;white-space:nowrap;font-family:"Leelawadee UI",sans-serif}.badge.r{background:var(--bad-soft);color:var(--bad)}.badge.b{background:var(--accent-soft);color:var(--accent-ink)}
.step{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;height:44px;background:var(--surface);flex-shrink:0}.step button{width:44px;height:44px;border:0;background:var(--brand-soft);color:var(--brand-ink);font-size:23px;line-height:1}.step span{min-width:32px;text-align:center;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}.add-btn{height:44px;min-height:44px;padding:7px 16px;min-width:92px;font-size:14px;color:var(--brand-ink);border-color:#C1D7C9;background:var(--brand-soft)}.add-btn>span{font-size:21px;line-height:1}.nudge{grid-column:1/-1;font-size:12px;color:var(--brand-ink);background:var(--brand-soft);border-radius:10px;padding:3px 10px;display:flex;justify-content:space-between;align-items:center;gap:6px}.nudge button{border:0;background:transparent;color:var(--brand-ink);font-size:13px;white-space:nowrap;font-weight:700;min-height:44px;min-width:64px}
.foot{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -4px 24px #183C3007}.foot-inner{max-width:760px;margin:auto;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;align-items:center}.foot .sum{flex:1;min-width:0;line-height:1.4}.foot .sum b{display:block;font:700 26px/1.3 system-ui,sans-serif;letter-spacing:-.7px;color:var(--brand-ink)}.foot .sum small{color:var(--muted);font-size:11px;display:block}.foot .btn{min-height:51px}.foot .btn .ui-icon{width:19px;height:19px}
.cart-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;border-bottom:1px solid var(--line);padding:16px 0}.cart-item:first-child{padding-top:0}.cart-item:last-child{border-bottom:0;padding-bottom:0}.cart-item h3{font-size:15px;margin:0;line-height:1.5}.cart-item>.step{grid-column:1/-1;justify-self:end}.cart-item>strong{font-size:17px}.order-summary{border-top:3px solid var(--brand-btn)}.order-summary>p{margin-top:10px}.coin-toggle{align-items:center!important}.coin-toggle>span{flex:1}.coin-toggle small{display:block;color:var(--muted);font-size:12px;margin-top:3px}.coin-toggle>.ui-icon{color:var(--brand-ink);width:29px;height:29px}
.alert{border-radius:12px;padding:13px 15px;font-size:14px;overflow-wrap:anywhere;border-left:3px solid currentColor}.alert.warn{background:var(--warn-soft);color:var(--warn)}.alert.ok{background:var(--good-soft);color:var(--good)}.alert.info{background:var(--accent-soft);color:var(--accent-ink)}.alert.bad{background:var(--bad-soft);color:var(--bad)}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}.field label{font-size:14px;color:var(--ink-2);font-weight:600}.field input,.field select,.field textarea{border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:12px;min-height:48px;width:100%;font-size:16px}.field textarea{resize:vertical}.form{display:flex;flex-direction:column;gap:18px}.chk{display:flex;gap:12px;align-items:flex-start;font-size:14px;cursor:pointer}.chk input{margin-top:3px;width:22px;height:22px;flex-shrink:0;accent-color:var(--brand-btn)}.chk+.chk{margin-top:14px}.chk span{min-width:0}
.qr{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:26px 20px}.qr .code{background:#fff;padding:12px;border:1px solid #DFE6E0;border-radius:15px;line-height:0}.qr .code svg,.qr .code img{width:200px;height:200px;max-width:100%}.qr>.copy{align-self:stretch}.qr>b{font-size:18px}.qr>.mono{background:var(--brand-soft);padding:6px 16px;border-radius:6px;color:var(--brand-ink)}.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.kv>div{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px 12px;min-width:0}.kv small{display:block;color:var(--muted);font-size:12px}.kv b{font-size:24px;overflow-wrap:anywhere}.kv>div:first-child{background:var(--brand-btn);color:#fff;border-color:var(--brand-btn)}.kv>div:first-child small{color:#D5E7DD}
.pill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;background:var(--sunk);color:var(--ink-2);white-space:nowrap}.pill.new{background:var(--warn-soft);color:var(--warn)}.pill.appr{background:var(--accent-soft);color:var(--accent-ink)}.pill.bill{background:#F5EEE1;color:#885410}.pill.paid{background:var(--good-soft);color:var(--good)}.pill.red{background:var(--bad-soft);color:var(--bad)}.bill-card{text-align:left;width:100%;display:flex;flex-direction:column;gap:10px}.bill-card-head,.bill-card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px}.bill-card-foot>div{display:flex;flex-direction:column;gap:3px}.bill-card-foot small{font-size:12px;color:var(--muted)}.bill-link{font-size:13px;font-weight:700;color:var(--brand-ink)}
.order-progress{list-style:none;margin:0;padding:16px 6px;display:flex;background:var(--surface);border:1px solid var(--line);border-radius:15px}.order-progress li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;font-size:11px;color:var(--muted);gap:6px;z-index:0}.order-progress li:before{content:"";position:absolute;top:16px;right:50%;width:100%;height:2px;background:var(--line);z-index:-1}.order-progress li:first-child:before{display:none}.order-progress li>span{display:grid;place-items:center;border:2px solid var(--line);width:34px;height:34px;border-radius:50%;background:var(--surface);font-size:13px}.order-progress .complete{color:var(--brand-ink);font-weight:700}.order-progress .complete>span{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}.order-progress .complete:before{background:var(--brand-btn)}.order-progress .ui-icon{width:18px;height:18px}.success-panel{text-align:center;padding:34px 16px}.success-icon{display:inline-grid;place-items:center;background:var(--brand-soft);color:var(--brand-ink);width:76px;height:76px;border-radius:50%;margin-bottom:20px}.success-icon .ui-icon{width:38px;height:38px}.success-panel h2{font-size:22px;margin-bottom:12px}.success-panel p{margin-top:10px}
.tabs{display:flex;gap:8px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:0 max(16px,calc((100vw - 1100px)/2));position:sticky;top:var(--top-height);z-index:4}.tab{border:0;background:none;padding:15px 12px;min-height:54px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;font-size:14px}.tab.on{color:var(--brand-ink);border-bottom-color:var(--brand-btn)}.tab .cnt{display:inline-block;min-width:19px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;margin-left:5px}.admin-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat-card{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:16px}.stat-card>span{font-size:12px;color:var(--muted)}.stat-card>strong{font:700 30px system-ui,sans-serif;color:var(--brand-ink)}.ord{border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--surface);display:flex;flex-direction:column;gap:11px;min-width:0}.ord-h{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pos{background:#F2F6EB;border:1px dashed #C8D7B7;border-radius:12px;padding:14px 16px;font-size:14px;color:#34502E}.pos>b{display:block;margin-bottom:5px}.acts{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.acts .field{flex:1;min-width:140px}.acts input[type=file]{max-width:100%;font-size:14px}.tblw{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:12px;background:var(--surface);overscroll-behavior-inline:contain}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;font-weight:600;color:var(--ink-2);background:var(--surface-2);padding:12px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;min-width:90px}tr:last-child td{border-bottom:0}td.r,th.r{text-align:right}tr.warn td{background:var(--warn-soft)}tr.bad td{background:var(--bad-soft)}td input[type=checkbox]{width:24px;height:24px;accent-color:var(--brand-btn)}summary{cursor:pointer;min-height:32px;font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#163F32;color:#fff;padding:13px 20px;border-radius:14px;font-size:14px;z-index:20;max-width:calc(100% - 32px);width:max-content;text-align:center;box-shadow:0 8px 30px #15362B25}.busy{position:fixed;inset:0;background:#17352B40;z-index:15;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(2px)}.busy>div{background:var(--surface);padding:27px;border:1px solid var(--line);border-radius:20px;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:calc(100% - 40px);box-shadow:0 20px 60px #183C3020}.busy small{color:var(--muted);font-size:12px}.copy{display:flex;gap:8px;min-width:0}.copy input{flex:1;min-width:0;border:1px solid var(--line-2);border-radius:10px;padding:10px;background:var(--surface-2);font-size:13px}.empty{color:var(--muted);text-align:center;padding:32px 18px;border:1px dashed var(--line-2);border-radius:16px;font-size:14px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface)}.empty>.ui-icon{width:40px;height:40px;color:var(--brand-ink)}.empty b{color:var(--ink)}.boot{padding:15vh 20px;text-align:center;color:var(--ink);display:flex;flex-direction:column;gap:22px;align-items:center}.boot-brand{font:800 20px Arial,sans-serif;letter-spacing:2px;color:var(--brand-ink)}.boot small{color:var(--muted)}.spinner{display:inline-block;width:28px;height:28px;border:3px solid var(--line);border-top-color:var(--brand-btn);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}.privacy-page{max-width:720px;margin:auto;padding:36px 20px}.privacy-page h1{font-size:24px}.privacy-page h2{margin:24px 0 8px}.privacy-page .note{background:var(--warn-soft);color:var(--warn);padding:16px;border-radius:14px;margin:20px 0}
@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:900px){.shop-hero{min-height:250px}.hero-copy h2{font-size:36px}.tiles{gap:14px}.tile{min-height:137px}.catalog-wrap{max-width:860px}.catalog-wrap+.foot .foot-inner{max-width:860px}.product-section .prod{grid-template-columns:52px minmax(0,1fr) auto}.product-buy{grid-column:3;grid-row:1/3;min-width:240px}.tiers{grid-column:2}.product-symbol{grid-row:1/3;width:50px;height:50px}.bundle-buy{gap:16px}.wide .ord .row{max-width:780px}}
@media(max-width:600px){.wrap{padding:16px 16px calc(116px + env(safe-area-inset-bottom,0px));gap:16px}.top-inner{padding:11px 16px;gap:10px}.box{padding:16px}.bundle-grid{grid-template-columns:1fr}.bundle-section{padding:16px}.shop-hero{min-height:205px}.hero-copy{padding:22px;width:76%}.hero-copy h2{font-size:27px}.hero-copy p{font-size:12px}.shop-hero>img{object-position:69% 50%}.hero-tag{margin-top:12px;font-size:11px}.foot-inner{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}.foot .btn{font-size:14px;padding:11px 14px}.tile{min-height:117px;padding:13px 4px}.tiles{gap:8px}.tile-icon{width:39px;height:39px;border-radius:12px}.tile b{font-size:13px}.tile small{font-size:10px}.tile.featured b{font-size:15px}.brand-name{font-size:11px}.top h1{font-size:15px}.admin-overview{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:14px}.ord{padding:16px}.tabs{top:var(--top-height)}.kv{gap:7px}.kv>div{padding:13px 10px}.kv b{font-size:22px}.kv small{font-size:11px}.order-summary .row{font-size:13px}}
@media(max-width:359px){.wrap{padding-left:12px;padding-right:12px}.top-inner{padding-left:12px;padding-right:12px;gap:7px}.brand-name span{display:none}.top .t small{font-size:10px}.tile b{font-size:12px}.tile small{font-size:9px}.hero-copy{width:88%}.hero-copy h2{font-size:25px}.product-buy{grid-column:1/-1}.tiers{grid-column:1/-1}.section-heading h2{font-size:16px}.section-heading>.hint{display:none}.benefit-strip{padding:12px;gap:8px}.benefit-end{font-size:10px}.foot .btn{font-size:13px;padding:11px}.foot .btn .ui-icon{display:none}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0F1D17;--surface:#192A21;--surface-2:#21382A;--sunk:#243D2E;--ink:#E6F0E7;--ink-2:#C0D0C3;--muted:#A5B6A8;--line:#324738;--line-2:#526E59;--brand-btn:#006B4E;--brand-ink:#A0DFB2;--brand-soft:#233F2D;--accent:#28675C;--accent-soft:#203D35;--accent-ink:#BAE6D4;--warn:#F1CF88;--warn-soft:#3D321D;--bad:#FFB2A7;--bad-soft:#452824;--good:#A0DFB2;--good-soft:#233F2D;color-scheme:dark}:root:not([data-theme=light]) .bundle-section{background:#1D3020;border-color:var(--line)}:root:not([data-theme=light]) .bundle{border-color:var(--line)}:root:not([data-theme=light]) .coupon-strip{background:#243A26;border-color:var(--line-2);color:#CAE3B9}:root:not([data-theme=light]) .pos{background:#263921;border-color:var(--line-2);color:#D1E2BF}:root:not([data-theme=light]) .pill.bill{background:#3D321D;color:#F1CF88}:root:not([data-theme=light]) .order-summary{border-top-color:#74BE8B}:root:not([data-theme=light]) .add-btn{border-color:var(--line-2)}:root:not([data-theme=light]) .shop-hero{color-scheme:light}:root:not([data-theme=light]) .qr .code{border-color:#fff}}
:root[data-theme=dark]{--bg:#0F1D17;--surface:#192A21;--surface-2:#21382A;--sunk:#243D2E;--ink:#E6F0E7;--ink-2:#C0D0C3;--muted:#A5B6A8;--line:#324738;--line-2:#526E59;--brand-btn:#006B4E;--brand-ink:#A0DFB2;--brand-soft:#233F2D;--accent:#28675C;--accent-soft:#203D35;--accent-ink:#BAE6D4;--warn:#F1CF88;--warn-soft:#3D321D;--bad:#FFB2A7;--bad-soft:#452824;--good:#A0DFB2;--good-soft:#233F2D;color-scheme:dark}:root[data-theme=dark] .bundle-section{background:#1D3020;border-color:var(--line)}:root[data-theme=dark] .bundle{border-color:var(--line)}:root[data-theme=dark] .coupon-strip{background:#243A26;border-color:var(--line-2);color:#CAE3B9}:root[data-theme=dark] .pos{background:#263921;border-color:var(--line-2);color:#D1E2BF}:root[data-theme=dark] .pill.bill{background:#3D321D;color:#F1CF88}:root[data-theme=dark] .order-summary{border-top-color:#74BE8B}:root[data-theme=dark] .add-btn{border-color:var(--line-2)}:root[data-theme=dark] .shop-hero{color-scheme:light}:root[data-theme=dark] .qr .code{border-color:#fff}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.spinner{animation:none;border-top-color:var(--brand-ink)}}
@media(max-width:600px){.bundle-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:92%;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin}.bundle{scroll-snap-align:start}.bundle-buy .step{height:44px}.bundle-buy .step button{width:44px}.bundle-buy .step span{min-width:26px}}
/* ===== v2: ส่วนเพิ่ม (คงโทนขาว–เขียว) ===== */
.row-flex{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.alert.row-flex .ui-icon{width:20px;height:20px}
.notice{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:16px;padding:14px 16px;border:1px solid var(--line);background:var(--surface)}.notice>span{flex:1;min-width:0}.notice b{display:block;font-size:15px}.notice small{display:block;font-size:12px;color:var(--muted)}.notice>.ui-icon:first-child{width:28px;height:28px}.notice>.ui-icon:last-child{width:18px;height:18px;color:var(--muted)}
.notice.warn{background:var(--warn-soft);border-color:#EED9A6;color:var(--warn)}.notice.info{background:var(--accent-soft);color:var(--accent-ink)}.notice.ok{background:var(--brand-soft);color:var(--brand-ink)}
.bottom-nav button{position:relative}.bottom-nav .dot{position:absolute;top:6px;left:calc(50% + 8px);width:9px;height:9px;border-radius:50%;background:var(--bad);border:2px solid var(--surface)}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:30px 20px}.empty-state>.ui-icon{width:42px;height:42px;color:var(--warn)}.empty-state h2{font-size:18px}
.tech{display:block;color:var(--muted);font-size:11px;margin-top:6px;overflow-wrap:anywhere}.tech-detail{font-size:12px;color:var(--muted);text-align:left;align-self:stretch}.tech-detail small{display:block;overflow-wrap:anywhere;margin-top:6px}
.product-photo{width:44px;height:44px;border-radius:12px;object-fit:cover;background:var(--surface-2);display:block}.prod.has-img{grid-template-columns:76px minmax(0,1fr)}.prod.has-img .product-photo{width:76px;height:76px;grid-row:1/3;border-radius:14px}
.prod.oos .product-photo{filter:grayscale(.8);opacity:.6}.product-photo.sm{width:40px;height:40px;border-radius:8px;margin-bottom:6px}.bundle-photo{width:100%;height:132px;object-fit:cover;border-radius:12px;background:var(--surface-2)}
.img-cell{min-width:64px}.img-cell .product-symbol{width:40px;height:40px;margin-bottom:6px}
.geo-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.geo-box .hint{flex:1;min-width:150px}
.slip-box{display:flex;gap:14px;align-items:center;border:1px dashed var(--line-2);border-radius:14px;padding:12px;background:var(--surface-2)}.slip-box>img{width:72px;height:96px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}.slip-ph{display:grid;place-items:center;width:72px;height:96px;border-radius:8px;background:var(--surface);color:var(--brand-ink);flex-shrink:0}.slip-ph .ui-icon{width:34px;height:34px}.slip-box>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start;min-width:0}.slip-box label.btn{cursor:pointer}
.pay-ledger .row.tot .price{font-size:26px}.pay-history{margin-top:10px;font-size:13px}.pay-history summary{font-size:14px;color:var(--ink-2)}
.day-pick{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.day-pick legend{font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:8px}.day-pick label{position:relative}.day-pick input{position:absolute;opacity:0;inset:0}.day-pick span{display:grid;place-items:center;min-width:46px;height:46px;border-radius:12px;border:1px solid var(--line-2);font-weight:700;background:var(--surface)}.day-pick input:checked+span{background:var(--brand-btn);border-color:var(--brand-btn);color:#fff}.day-pick input:focus-visible+span{outline:3px solid #BD8B25;outline-offset:2px}
.qty-row{align-items:center}.qty-row input{width:84px;min-height:44px;border:1px solid var(--line-2);border-radius:10px;padding:8px;text-align:center;font-size:16px}
.confirm-box{border:2px solid var(--brand-btn)}.test-box{border:1px dashed var(--warn);background:var(--warn-soft)}
/* หลังร้าน */
.new-banner{position:sticky;top:var(--top-height);z-index:6;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:0;background:#B4231A;color:#fff;padding:12px 16px;font-size:15px;animation:pulse 1.6s ease-in-out 3}.new-banner span{opacity:.85;font-size:13px}
@keyframes pulse{50%{filter:brightness(1.25)}}
.date-bar{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}.date-fields{display:flex;gap:12px;flex-wrap:wrap}.date-fields label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}.date-fields input{border:1px solid var(--line-2);border-radius:10px;padding:8px 10px;min-height:44px;background:var(--surface)}
.dl-row{display:flex;gap:8px;flex-wrap:wrap}.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-top:8px}
.adm-search input{min-height:46px}.group-h{display:flex;align-items:center;gap:8px;margin:6px 0 -4px;font-size:16px}.cnt-pill{background:var(--bad);color:#fff;border-radius:99px;font-size:12px;padding:1px 9px}
.ord.is-new{border-color:#E7B95B;box-shadow:0 0 0 3px #F5D58B33}.box.group summary{font-size:15px}.box.group .ord{margin-top:10px}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}.pay-grid>div{background:var(--surface-2);border-radius:10px;padding:8px 10px}.pay-grid small{display:block;font-size:11px;color:var(--muted)}.pay-grid b{font-size:16px;font-variant-numeric:tabular-nums}.pay-grid .neg b{color:var(--bad)}.pay-grid .pos b{color:var(--good)}
.pay-list{display:flex;flex-direction:column;gap:6px}.pay-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding-top:8px;font-size:14px}.pay-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.trip{display:flex;flex-direction:column;gap:6px}.trip.out{border-color:var(--accent)}.kg-bar{height:8px;border-radius:5px;background:var(--sunk);overflow:hidden}.kg-bar span{display:block;height:100%;background:var(--brand-btn);border-radius:5px}
.stop{display:flex;gap:10px;align-items:flex-start;border-top:1px solid var(--line);padding:10px 0}.stop>input{width:22px;height:22px;margin-top:4px;accent-color:var(--brand-btn);flex-shrink:0}.stop-no{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand-soft);color:var(--brand-ink);font-weight:700;flex-shrink:0}.stop-main{flex:1;min-width:0}.stop-main .items{font-size:12px}.warn-t{color:var(--warn);font-weight:600}
.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.report-grid .stat-card strong{font-size:22px}
.bars{display:flex;flex-direction:column;gap:6px}.bar-row{display:grid;grid-template-columns:64px 1fr 96px 52px;gap:8px;align-items:center;font-size:13px}.bar{height:12px;background:var(--sunk);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--brand);border-radius:6px}.bar-row b{text-align:right;font-variant-numeric:tabular-nums}.bar-row small{color:var(--muted)}
.team-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:10px;align-items:center;border-top:1px solid var(--line);padding:10px 0}.team-row small{display:block}.team-row select{min-height:44px;border:1px solid var(--line-2);border-radius:10px;padding:6px;background:var(--surface)}.team-row.off{opacity:.6}
.invite-out{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:12px;background:var(--brand-soft)}.invite-out .code{background:#fff;padding:6px;border-radius:10px;line-height:0}.invite-out .code svg{width:120px;height:120px}.invite-out>div:last-child{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.job-row{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:10px 0}.job-row small{display:block}.checks{margin-top:8px}
.modal{position:fixed;inset:0;background:#0009;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}.modal-in{background:var(--surface);border-radius:16px;padding:12px;max-width:520px;width:100%;max-height:92vh;display:flex;flex-direction:column;gap:10px}.modal-in img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:10px}
#print-area{display:none}
@media print{body.printing>*:not(#print-area){display:none!important}body.printing #print-area{display:block}#print-area{font:12px/1.4 Tahoma,sans-serif;color:#000}.print-trip{page-break-after:always}.print-trip table{width:100%;border-collapse:collapse}.print-trip th,.print-trip td{border:1px solid #444;padding:4px;vertical-align:top;min-width:0}.print-trip h2{font-size:16px;margin:0 0 4px}}
@media(max-width:600px){.report-grid{grid-template-columns:1fr 1fr}.team-row{grid-template-columns:1fr 1fr}.team-row>div:first-child{grid-column:1/-1}.bar-row{grid-template-columns:52px 1fr 80px}.bar-row small{display:none}.pay-row{flex-direction:column}.pay-acts{justify-content:flex-start}.invite-out{flex-direction:column;align-items:stretch}.invite-out .code{align-self:center}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .notice.warn{border-color:var(--line-2)}:root:not([data-theme=light]) .new-banner{background:#8E2A22}:root:not([data-theme=light]) .invite-out .code{background:#fff}}
:root[data-theme=dark] .notice.warn{border-color:var(--line-2)}:root[data-theme=dark] .new-banner{background:#8E2A22}:root[data-theme=dark] .invite-out .code{background:#fff}
/* v2.1 */
.wave-box{display:flex;flex-direction:column;gap:4px;background:var(--brand-soft);border-radius:12px;padding:10px 12px;margin:6px 0 10px}.wave-box small{display:block;font-size:12px;color:var(--muted)}.wave-box b{display:block;font-size:15px;color:var(--brand-ink);margin-top:2px}
.bundle.for-me{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}.bundle.for-me .bundle-label{color:var(--brand-ink);font-weight:700}
.trip-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}.trip-head select{padding:4px 8px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink)}
.stop.pool{border-left:3px solid var(--warn);padding-left:8px}.stop .note{font-size:12px;color:var(--warn);display:block}
.funnel-table{width:100%;border-collapse:collapse;font-size:13px}.funnel-table th,.funnel-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}.funnel-table th:first-child,.funnel-table td:first-child{text-align:left}
.trip-log{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.trip-log input{width:92px;padding:4px 6px;border-radius:8px;border:1px solid var(--line-2)}
.wave-pick{display:inline-flex;gap:4px;align-items:center;font-size:12px}.wave-pick select{padding:3px 6px;border-radius:8px;border:1px solid var(--line-2);font-size:12px;background:var(--surface);color:var(--ink)}
.cohort-table{width:100%;border-collapse:collapse;font-size:13px}.cohort-table th,.cohort-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right}.cohort-table th:first-child,.cohort-table td:first-child,.cohort-table th:nth-child(2),.cohort-table td:nth-child(2){text-align:left}
.alias-row{display:flex;gap:6px;align-items:center;margin-top:4px}.alias-row input{flex:1;min-width:0;padding:4px 8px;border-radius:8px;border:1px solid var(--line-2);font-size:12px}
@media print{.trip-head select,.wave-pick{display:none}}
/* v2.2: เลือก/เลือกทั้งหมด · แถบทำหลายรายการ · ทดสอบบทบาท · รูปสินค้า · รอบเย็น · ล็อกหน้าจอ */
.pick,.pick-all input,.pick-cell input{width:22px;height:22px;accent-color:var(--brand-btn);flex-shrink:0;cursor:pointer}.pick-all{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:500;color:var(--ink-2);margin-left:auto;cursor:pointer}.group-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.box h3 .pick-all{float:right}.pick-cell{min-width:36px;width:36px}.ord.picked{border-color:var(--brand-btn);box-shadow:0 0 0 2px var(--brand-soft)}
.bulk-bar{position:sticky;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:7;display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--brand-btn);color:#fff;border-radius:16px;padding:10px 12px;box-shadow:0 10px 30px #0B2A1F40}.bulk-bar>b{margin-right:auto;font-size:14px}.bulk-bar .btn{background:#fff;color:var(--brand-ink);border-color:#fff}.bulk-bar .btn.blue{background:#E9F4EC}.bulk-bar .btn.bad{background:#FCEDEB;color:var(--bad);border-color:#FCEDEB}.bulk-bar select{border-radius:10px;padding:7px 9px;border:0;max-width:180px}
.view-as{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--warn-soft);color:var(--warn);border-bottom:1px solid #EED9A6;padding:9px max(16px,calc((100vw - 1100px)/2));font-size:13px}.view-as>span{flex:1;min-width:180px}
.img-acts{display:flex;flex-direction:column;gap:4px;margin-top:6px}.img-acts .btn{font-size:12px;padding:5px 8px;min-height:30px}.img-cell{min-width:110px}
.slot-pick{display:flex;flex-direction:column;gap:6px;margin:6px 0}.slot-pick .chk{align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px 12px}.slot-pick .chk:has(input:checked){border-color:var(--brand-btn);background:var(--brand-soft)}
.trip.evening{border-left:4px solid #C77700}.lock-screen>.ui-icon{color:var(--brand-ink)}.privacy-box{border:1px dashed var(--bad)}.stat-card small.hint{font-size:11px}
.print-trip tr.set td{background:#eee}
@media(max-width:600px){.bulk-bar{bottom:calc(8px + env(safe-area-inset-bottom,0px));padding:9px}.bulk-bar>b{width:100%}.pick-all span{font-size:12px}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .bulk-bar .btn{color:#0F3B2A}:root:not([data-theme=light]) .view-as{border-color:var(--line-2)}:root:not([data-theme=light]) .print-trip tr.set td{background:#ddd}}
:root[data-theme=dark] .bulk-bar .btn{color:#0F3B2A}:root[data-theme=dark] .view-as{border-color:var(--line-2)}:root[data-theme=dark] .print-trip tr.set td{background:#ddd}
@media(min-width:601px){.admin-overview{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
/* ===== v3.0.0: Smart Set · Magnet Set · แต้มสะสม · สมุดที่อยู่ · ปักหมุด ===== */
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.tag{display:inline-block;font-size:11px;line-height:1.5;padding:1px 8px;border-radius:999px;font-weight:700;white-space:nowrap;background:var(--sunk);color:var(--ink-2)}
.tag.main{background:#E8F0FB;color:#1F4E87}.tag.smart{background:#FFF0D6;color:#8A4B00}.tag.magnet{background:#F7E6F3;color:#7D2468}.tag.low{background:var(--bad-soft);color:var(--bad)}
.smart-hint{display:block;font-size:12px;color:#8A4B00;font-weight:600}
.ok-t{color:var(--good);font-weight:700}
.chip.promo:not(.on){border-color:#E8C27A;color:#8A4B00;background:#FFF8EA}
.magnet-banner{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border-radius:16px;padding:14px 16px;border:1px solid #E6C4DE;background:linear-gradient(100deg,#FBEFF8,#FFF8EA);color:#5E1B4F}
.magnet-banner>span{flex:1;min-width:0}.magnet-banner b{display:block;font-size:15px}.magnet-banner small{display:block;font-size:12px;color:#7A4A6E}
.magnet-banner>.ui-icon:first-child{width:28px;height:28px}.magnet-banner>.ui-icon:last-child{width:18px;height:18px}
.smart-today{background:#FFF8EA;border:1px solid #F0DDB5;border-radius:20px;padding:18px}
.smart-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:thin}
.smart-card{background:var(--surface);border:1px solid #EFDDB9;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;min-width:0;scroll-snap-align:start}
.smart-card.oos{opacity:.6}.smart-card .nm{font-size:14px;line-height:1.45;flex:1}
.smart-card .smart-photo{width:100%;height:84px;object-fit:cover;border-radius:10px;background:var(--surface-2)}.smart-card .product-symbol{width:100%;height:84px}
.smart-cat{font-size:11px;font-weight:700;color:#8A4B00}
.smart-price{font-variant-numeric:tabular-nums}.smart-price s{color:var(--muted);font-size:12px}.smart-price b{font-size:18px;color:#8A4B00}.smart-price small{font-size:11px;color:var(--muted)}
.smart-card .step,.smart-card .add-btn{align-self:stretch;justify-content:space-between}.smart-card .add-btn{justify-content:center;min-width:0}
.smart-bar{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:14px}
.smart-bar small{display:block;color:var(--muted);font-size:12px}
.smart-bar .kg-bar>span{background:linear-gradient(90deg,#E09A2B,#00845F);transition:width .25s}
.foot .rights-strip{display:block;width:100%;border:0;border-bottom:1px solid #F0DDB5;background:#FFF8EA;color:#8A4B00;font-size:13px;font-weight:700;padding:9px 16px;min-height:44px}
.foot .rights-strip .ui-icon{width:18px;height:18px}
.promo-box{border-left:4px solid #E09A2B}.promo-pick{display:flex;flex-direction:column;gap:10px;margin:8px 0}.promo-pick small{display:block;color:var(--muted);font-size:12px}
.nudge-line{display:block;width:100%;text-align:left;font-size:13px;color:#8A4B00;background:#FFF8EA;border:0;border-radius:10px;padding:9px 12px;margin-top:8px}.nudge-line.act{font-weight:600;min-height:44px}
.saved-line{display:flex;align-items:center;gap:6px;color:var(--good);font-weight:700;font-size:14px;margin-top:6px}.saved-line .ui-icon{width:18px;height:18px}
s.was{color:var(--muted);font-size:13px;font-weight:400}
.row.disc.sub{padding-top:0;font-size:13px}.row.disc.sub span:first-child{padding-left:12px;color:var(--good)}
.ship-box{display:flex;flex-direction:column;gap:10px;margin:10px 0 4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.ship-row{display:flex;align-items:flex-start;gap:10px}.ship-row>span{flex:1;min-width:0}.ship-row small{display:block;font-size:12px;color:var(--muted)}.ship-row b{display:block;font-size:14px;overflow-wrap:anywhere;margin-bottom:4px}.ship-row>.ui-icon{color:var(--brand-ink);margin-top:4px}
.ship-pick{display:flex;flex-direction:column;gap:12px;padding-top:6px;border-top:1px solid var(--line)}
.area-out{border-radius:12px;padding:14px;background:var(--bad-soft);color:var(--bad)}.area-out h3{font-size:15px;margin:0 0 4px}.area-out .hint{color:inherit;opacity:.9}
.area-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.area-opts .btn{background:var(--surface)}.area-opts .btn.pri{background:var(--brand-btn);color:#fff}
.branch-list{margin-top:10px;padding-top:8px;border-top:1px dashed currentColor;color:var(--ink)}.branch-list>b{font-size:13px}
.addr-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:12px 0;border-top:1px solid var(--line)}.addr-book .section-heading+.addr-row{border-top:0}
.addr-row>div:first-child{min-width:0}.addr-row small{display:block;margin-top:4px}.addr-row .pill{margin:2px 0}.addr-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}
.area-chip{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:8px 12px;font-size:13px;font-weight:600;line-height:1.45}.area-chip .ui-icon{width:18px;height:18px}
.area-chip.in{background:var(--good-soft);color:var(--good)}.area-chip.band{background:var(--accent-soft);color:var(--accent-ink)}.area-chip.out{background:var(--bad-soft);color:var(--bad)}.area-chip.none{background:var(--warn-soft);color:var(--warn)}
.pin-box{align-items:stretch;flex-direction:column}.pin-box .btn{align-self:flex-start}
.pin-wrap{gap:12px}.pin-search{display:flex;gap:8px;min-width:0}.pin-search .search-box{flex:1;min-width:0}.pin-search .btn{flex-shrink:0}
.pin-results{display:flex;flex-direction:column;gap:6px}.pin-results:empty{display:none}
.pin-res{display:flex;gap:8px;align-items:flex-start;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;font-size:13px;min-height:44px}.pin-res .ui-icon{width:18px;height:18px;color:var(--brand-ink);margin-top:2px}
.pin-map-box{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);background:var(--surface-2)}
.pin-map{height:min(56vh,460px);min-height:280px;width:100%}
.pin-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:#C2410C;pointer-events:none;filter:drop-shadow(0 2px 2px #0005);z-index:2}.pin-center .ui-icon{width:42px;height:42px;fill:#fff}
.pin-gps{position:absolute;left:10px;bottom:28px;z-index:3;background:var(--surface);box-shadow:0 2px 8px #0002}
.pin-map-msg{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;color:var(--muted);font-size:14px}.pin-map-msg>.ui-icon{width:34px;height:34px;color:var(--warn)}.pin-map-msg b{color:var(--ink)}
.pin-chip:empty{display:none}
.pin-link summary{cursor:pointer;font-weight:600;font-size:14px;min-height:28px}.pin-link form{margin-top:10px}
.shop-marker{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-btn);color:#fff;border:2px solid #fff;box-shadow:0 2px 6px #0004}.shop-marker .ui-icon{width:20px;height:20px}
.rule{display:flex;flex-direction:column;gap:3px;padding:10px 0;border-top:1px solid var(--line);font-size:14px}.box h3+.rule{border-top:0;padding-top:0}.rule>span{color:var(--ink-2)}
.magnet-card{border-left:4px solid #B04A97}
.smart-list{display:flex;flex-direction:column;gap:4px;margin-top:8px;font-size:13px}.smart-list b{color:#8A4B00}
.field-label{font-size:14px;color:var(--ink-2);font-weight:600}
.shop-photo>img{width:96px;height:72px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .tag.main{background:#1F3550;color:#BBD5F5}:root:not([data-theme=light]) .tag.smart,:root:not([data-theme=light]) .smart-hint,:root:not([data-theme=light]) .smart-cat,:root:not([data-theme=light]) .smart-price b,:root:not([data-theme=light]) .smart-list b{color:#F4C77D}:root:not([data-theme=light]) .tag.smart{background:#3D321D}:root:not([data-theme=light]) .tag.magnet{background:#3F2338;color:#F1BDE3}:root:not([data-theme=light]) .magnet-banner{background:linear-gradient(100deg,#3F2338,#3D321D);border-color:var(--line-2);color:#F7D9EF}:root:not([data-theme=light]) .magnet-banner small{color:#E7C3DD}:root:not([data-theme=light]) .smart-today{background:#2A2618;border-color:#4A4128}:root:not([data-theme=light]) .smart-card{border-color:#4A4128}:root:not([data-theme=light]) .chip.promo:not(.on){background:#3D321D;color:#F4C77D;border-color:#6B5A33}:root:not([data-theme=light]) .foot .rights-strip,:root:not([data-theme=light]) .nudge-line{background:#3D321D;color:#F4C77D;border-color:#4A4128}:root:not([data-theme=light]) .pin-center{color:#FB923C}}
:root[data-theme=dark] .tag.main{background:#1F3550;color:#BBD5F5}:root[data-theme=dark] .tag.smart,:root[data-theme=dark] .smart-hint,:root[data-theme=dark] .smart-cat,:root[data-theme=dark] .smart-price b,:root[data-theme=dark] .smart-list b{color:#F4C77D}:root[data-theme=dark] .tag.smart{background:#3D321D}:root[data-theme=dark] .tag.magnet{background:#3F2338;color:#F1BDE3}:root[data-theme=dark] .magnet-banner{background:linear-gradient(100deg,#3F2338,#3D321D);border-color:var(--line-2);color:#F7D9EF}:root[data-theme=dark] .magnet-banner small{color:#E7C3DD}:root[data-theme=dark] .smart-today{background:#2A2618;border-color:#4A4128}:root[data-theme=dark] .smart-card{border-color:#4A4128}:root[data-theme=dark] .chip.promo:not(.on){background:#3D321D;color:#F4C77D;border-color:#6B5A33}:root[data-theme=dark] .foot .rights-strip,:root[data-theme=dark] .nudge-line{background:#3D321D;color:#F4C77D;border-color:#4A4128}:root[data-theme=dark] .pin-center{color:#FB923C}
/* v3 หลังร้าน */
.cfg-toggle{padding:8px 0;border-bottom:1px solid var(--line)}.cfg-toggle:last-of-type{border-bottom:0}
.promo-table select{min-height:40px;border:1px solid var(--line-2);border-radius:8px;padding:4px 6px;background:var(--surface);max-width:150px}.promo-table input[type=checkbox]{width:22px;height:22px;accent-color:var(--brand-btn)}
tr.dirty td{background:#FFF8EA}tr.off td{opacity:.6}
.stock-file{margin-top:10px;padding:12px;border:1px dashed var(--line-2);border-radius:12px;background:var(--surface-2)}.stock-check{display:flex;flex-direction:column;gap:8px;margin-top:8px}.stock-check details summary{cursor:pointer;font-size:13px;font-weight:600}
.mem-v3{display:flex;flex-direction:column;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line-2)}.mem-v3-row{font-size:14px;line-height:1.9}.test-acts{padding:8px;border-radius:10px;background:var(--warn-soft)}
.area-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:10px}.area-svg{width:100%;height:auto;max-height:340px;color:var(--ink);background:var(--surface-2);border-radius:12px}
.uat-box .chk{margin-top:8px}
@media(max-width:600px){.area-tools{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) tr.dirty td{background:#3D321D}}
:root[data-theme=dark] tr.dirty td{background:#3D321D}
/* ===== v3.1.0: เมนูซ้ายหลังร้าน, โหมดมืด/สว่าง, เปิดบิลขั้นตอนเดียว, แนะนำการออกรถ, ตะกร้าแบบแอปส่งของ, เส้นคั่นแทนจุดกลาง ===== */
:root:has(.adm){scrollbar-gutter:stable}
.sep{display:inline-block;width:0;height:.95em;border-left:1px solid currentColor;opacity:.32;margin:0 .55em;vertical-align:-.12em;overflow:hidden;white-space:nowrap}
.busy-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:40;overflow:hidden;pointer-events:none}
.busy-bar i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--brand);border-radius:3px;animation:busybar .9s ease-in-out infinite}
@keyframes busybar{0%{left:-40%}100%{left:100%}}
body.is-busy #app{pointer-events:none}
body.is-busy{cursor:progress}
.btn[aria-disabled="true"]{opacity:.48}
@media(prefers-reduced-motion:reduce){.busy-bar i{animation-duration:2.5s}}
:where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),select,textarea){background-color:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;min-height:40px}
select option,select optgroup{background-color:var(--surface);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
.brand-name span{margin-left:6px}
.order-progress li:before{right:calc(50% + 21px);width:calc(100% - 42px)}
.ic.sm{min-width:36px;width:36px;height:36px}
.ic.sm .ui-icon{width:16px;height:16px}
/* หลังร้าน: เมนูซ้าย */
.adm{display:flex;min-height:100vh;min-height:100dvh}
.adm-side{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;width:236px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;padding:16px 12px;background:var(--surface);border-right:1px solid var(--line);overflow-y:auto;z-index:8}
.side-brand{display:flex;align-items:center;gap:10px;padding:2px 4px}
.side-brand>div{min-width:0}
.side-brand b{display:block;font:800 12px/1.3 Arial,sans-serif;letter-spacing:1px;color:var(--brand-ink)}
.side-brand span{display:block;font-size:13px;color:var(--muted)}
.side-user{padding:10px 12px;border-radius:12px;background:var(--surface-2);display:flex;flex-direction:column;line-height:1.45}
.side-user b{font-size:15px}
.side-user small{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.side-nav{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.side-link{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:10px;background:none;color:var(--ink-2);font-weight:600;font-size:14px;text-align:left}
.side-link .ui-icon{width:20px;height:20px;flex-shrink:0;opacity:.75}
.side-link>span{flex:1;min-width:0}
.side-link:hover{background:var(--surface-2)}
.side-link.on{background:var(--brand-soft);color:var(--brand-ink)}
.side-link.on .ui-icon{opacity:1}
.side-link .cnt{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--bad);color:#fff;font:700 12px/22px system-ui,sans-serif;text-align:center}
.side-skel{display:block;height:36px;margin:4px 0;border-radius:10px;background:var(--surface-2)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid var(--line)}
.side-foot .hint{padding:0 4px;font-size:11px}
.theme-btn{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-weight:600;font-size:14px;color:var(--ink-2)}
.theme-btn .ui-icon{width:20px;height:20px}
.adm-main{flex:1;min-width:0;display:flex;flex-direction:column}
.adm-top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.adm-top h1{flex:1;min-width:0;font-size:18px;font-weight:700;overflow-wrap:anywhere}
.adm-tools{display:flex;gap:8px;flex-shrink:0}
.adm-menu,.adm-scrim{display:none}
.adm .wrap.wide{max-width:1180px;width:100%;margin:0 auto;padding:20px 24px 60px}
.adm .new-banner{position:sticky;top:68px}
.adm .view-as{padding:9px 24px}
.admin-overview .stat-card.on{border-color:var(--brand-btn);box-shadow:inset 0 0 0 1px var(--brand-btn)}
@media(max-width:900px){.adm-side{position:fixed;left:0;top:0;bottom:0;transform:translateX(-105%);transition:transform .2s ease;box-shadow:0 10px 40px #0003}.adm.nav-open .adm-side{transform:none}.adm.nav-open .adm-scrim{display:block;position:fixed;inset:0;background:#0006;z-index:7}.adm-menu{display:inline-grid}.adm-top{padding:8px 12px;min-height:60px}.adm-top h1{font-size:16px}.adm-tools{gap:6px}.adm .wrap.wide{padding:16px 12px 60px}.adm .new-banner{top:60px}.adm .view-as{padding:9px 12px}}
@media(max-width:420px){.adm-tools .ic,.adm-menu{min-width:40px;width:40px;height:40px}}
/* หลังร้าน: ออเดอร์ */
.ord.has-problem{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-soft)}
.ord-h .grow{flex:1}
.ord-who{font-size:15px}
.ord-when{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:14px}
.alert.problem{display:flex;gap:10px;align-items:flex-start}
.alert.problem .ui-icon{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.bill-form{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:6px 12px;align-items:end;padding-top:4px}
.bf-field{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px;font-weight:600;color:var(--ink-2)}
.bf-field>span{line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bf-field input{min-height:48px;width:100%;font-size:16px;border-radius:10px;padding:10px 12px}
.bf-acts{display:flex;gap:8px;align-items:center}
.bill-form .txn-hint{grid-column:1/-1}
@media(max-width:700px){.bill-form{grid-template-columns:1fr 1fr}.bf-acts{grid-column:1/-1}.bf-acts .btn.blue{flex:1}}
/* หลังร้าน: จัดรอบส่ง (ระบบแนะนำ) */
.bike-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.bike-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.bike-card>div{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.bike-card b{font-size:16px}
.bike-card small{font-size:12px;color:var(--muted)}
.bike-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;flex-shrink:0}
.bike-card.free{border-color:var(--good)}
.bike-card.free .bike-ic{background:var(--good-soft);color:var(--good)}
.bike-card.onroad .bike-ic{background:var(--warn-soft);color:var(--warn)}
.bike-card.kpi b{font:700 26px system-ui,sans-serif;color:var(--brand-ink)}
.trip-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.trip-top h3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.go-chip{flex-shrink:0;padding:6px 12px;border-radius:999px;font-weight:700;font-size:13px;white-space:nowrap}
.go-chip.now{background:var(--brand-btn);color:#fff}
.go-chip.later{background:var(--accent-soft);color:var(--accent-ink)}
.go-chip.wait{background:var(--warn-soft);color:var(--warn)}
.trip.dispatch.go{border-color:var(--brand-btn);box-shadow:0 0 0 2px var(--brand-soft)}
.trip.dispatch.late{border-color:var(--bad)}
.stop.late .stop-no{background:var(--bad-soft);color:var(--bad)}
.stop-times{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:14px;margin:2px 0}
.bad-t{color:var(--bad);font-weight:700}
.sel-all{display:flex;align-items:center;gap:10px}
.vbar{color:var(--line-2);user-select:none}
/* หลังร้าน: โปรโมชั่น / ราคา / เวลาทำการ / คำขอผูกบัญชี */
.sub-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;max-width:100%}
.sub-tab{border:0;background:none;padding:10px 16px;border-radius:10px;font-weight:700;font-size:14px;color:var(--ink-2);min-height:44px}
.sub-tab.on{background:var(--surface);color:var(--brand-ink);box-shadow:0 1px 4px #183C3018}
.sub-tab small{font-weight:600;margin-left:4px}
.tier-lines{display:flex;flex-direction:column;gap:2px;white-space:nowrap;font-size:13px}
.tier-lines b{color:var(--brand-ink)}
.alias-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.alias-row input{flex:1;min-width:0;min-height:38px;font-size:14px}
.save-st{font-size:11px;color:var(--muted);white-space:nowrap}
.save-st.ok{color:var(--good)}
.save-st.bad{color:var(--bad)}
.hours-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:8px 0 12px}
.hours-grid .field>span{font-size:13px;color:var(--ink-2);font-weight:600}
.hours-grid input{min-height:46px;font-size:16px;width:100%}
.hours-box h3{display:flex;align-items:center;gap:8px}
.link-req{border-color:var(--warn)}
.row-acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
/* ลูกค้า: ตะกร้าแบบแอปส่งของ */
.mode-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.mode-tab{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;border-radius:10px;background:none;font-weight:700;color:var(--ink-2);font-size:14px}
.mode-tab .ui-icon{width:20px;height:20px}
.mode-tab.on{background:var(--surface);color:var(--brand-ink);box-shadow:0 1px 6px #183C3014}
.ship-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:inherit;font:inherit}
.ship-card.ok{border-left:4px solid var(--good)}
.ship-card.warn{border-left:4px solid var(--warn)}
.ship-card.bad{border-left:4px solid var(--bad)}
.ship-card.static{cursor:default}
.ship-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink);flex-shrink:0}
.ship-card.bad .ship-ic{background:var(--bad-soft);color:var(--bad)}
.ship-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.ship-txt small{font-size:12px;color:var(--muted)}
.ship-txt b{font-size:16px}
.ship-addr{font-size:13px;color:var(--ink-2);overflow-wrap:anywhere}
.area-line{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;margin-top:2px}
.area-line .ui-icon{width:16px;height:16px;flex-shrink:0}
.area-line.ok{color:var(--good)}
.area-line.warn{color:var(--warn)}
.area-line.bad{color:var(--bad)}
.ship-card .chev{color:var(--muted);display:grid}
.ship-card .chev .ui-icon{width:20px;height:20px}
.area-out>b{display:block;margin-bottom:8px}
.eta-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--good-soft);color:var(--good)}
.eta-card.later{background:var(--accent-soft);color:var(--accent-ink)}
.eta-card b{display:block;font-size:17px;line-height:1.35}
.eta-card small{display:block;font-size:13px;opacity:.9}
.eta-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--surface);flex-shrink:0}
.eta-rules{font-size:13px;color:var(--ink-2);margin-top:-8px}
.eta-rules summary{cursor:pointer;font-weight:600;padding:6px 2px;color:var(--brand-ink)}
.eta-rules table{margin-top:6px;border:1px solid var(--line);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;background:var(--surface);font-size:13px}
.eta-rules th,.eta-rules td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;font-weight:400;vertical-align:top}
.eta-rules th{color:var(--muted);white-space:nowrap}
.eta-rules tr:last-child th,.eta-rules tr:last-child td{border-bottom:0}
.ship-new{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:1px dashed var(--brand-btn);border-radius:16px;background:var(--brand-soft);color:var(--brand-ink);text-align:left;font:inherit}
.ship-new>span{flex:1;display:flex;flex-direction:column}
.ship-new small{color:var(--ink-2);font-size:12px}
.ship-h{font-size:15px;margin:4px 0 -6px}
.ship-list{display:flex;flex-direction:column;gap:10px}
.ship-item{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:4px 12px 4px 4px}
.ship-item.on{border-color:var(--brand-btn);box-shadow:0 0 0 1px var(--brand-btn)}
.ship-use{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:10px;border:0;background:none;text-align:left;color:inherit;font:inherit}
.ship-item.on .ship-ic{background:var(--brand-btn);color:#fff}
.ship-foot{text-align:center}
.why-modal .modal-in{padding:18px;gap:14px}
.why-modal h3{display:flex;align-items:center;gap:8px;color:var(--bad);font-size:17px}
.why-modal h3 .ui-icon{width:22px;height:22px}
.why-list{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:14px}
.why-list li{line-height:1.5}
.why-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.found-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:var(--brand-soft);color:var(--brand-ink)}
.found-card>span{display:flex;flex-direction:column}
.found-card small{color:var(--ink-2)}
.link-list{display:flex;flex-direction:column;gap:8px}
.link-item{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);text-align:left;color:inherit;font:inherit}
.link-item>span{flex:1;display:flex;flex-direction:column;min-width:0}
.link-item small{color:var(--muted)}
.link-new{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.st-qty{display:flex;align-items:center;gap:6px}
.st-add{display:flex;gap:8px;align-items:center;margin-top:10px}
.st-add select{flex:1;min-width:0;min-height:44px}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .eta-ic{background:#0F1D17}:root:not([data-theme=light]) .ship-new{border-color:#74BE8B}:root:not([data-theme=light]) .busy-bar i{background:#74BE8B}}
:root[data-theme=dark] .eta-ic{background:#0F1D17}:root[data-theme=dark] .ship-new{border-color:#74BE8B}:root[data-theme=dark] .busy-bar i{background:#74BE8B}
/* ===== v3.1.1 ฝั่งลูกค้าใช้ง่ายขึ้น ===== */
/* ตัวอักษรที่เกี่ยวกับเงิน เวลา และเงื่อนไข อย่างน้อย 14px (เฉพาะหน้าลูกค้า html.cust หน้าหลังร้านไม่เปลี่ยน) */
.cust .hint,.cust .row,.cust .order-summary .row,.cust .row.disc.sub,.cust .notice small,.cust .magnet-banner small,.cust .coupon-strip small,.cust .smart-bar small,.cust .promo-pick small,.cust .eta-card small,.cust .eta-rules,.cust .eta-rules table,.cust .nudge-line,.cust .bill-card-foot small,.cust .smart-hint,.cust .ship-addr,.cust .area-line,.cust .ps-txt small,.cust details.cond,.cust .section-sub{font-size:14px}
.cust .tiers{font-size:13px}
.cust .tag{font-size:12px}
.cust .kv small,.cust .ship-txt small,.cust .ship-new small,.cust .product-buy small,.cust .bundle .it,.cust .bundle-buy small,.cust .bundle-section>p.hint,.cust .pill,.cust .section-heading>.hint{font-size:13px}
.cust .tile small,.cust .benefit-end,.cust .monthly-pick strong small,.cust .top .t small{font-size:12px}
/* เงื่อนไขพับไว้ แตะ "ดูเงื่อนไข" */
details.cond{margin-top:6px;line-height:1.55}
details.cond>summary{cursor:pointer;display:inline-flex;align-items:center;min-height:32px;font-weight:600;text-decoration:underline;text-underline-offset:3px;list-style:none}
details.cond>summary::-webkit-details-marker{display:none}
/* หน้าแรก: สิทธิ์ของคุณวันนี้ (รวมเป็นกล่องเดียว) */
.promo-strip{display:flex;flex-direction:column;gap:8px}
.promo-strip .section-heading{padding-bottom:2px}
.ps-row{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:11px 14px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer}
.ps-ic{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:12px;background:var(--brand-soft);color:var(--brand-ink)}
.ps-ic .ui-icon{width:20px;height:20px}
.ps-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.ps-txt b{font-size:15px}
.ps-txt small{color:var(--muted)}
.ps-row>.ui-icon{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.shop-hero.sm{min-height:128px}
.shop-hero.sm .hero-copy h2{font-size:21px;margin:6px 0}
.shop-hero.sm .hero-copy p,.shop-hero.sm .hero-tag{display:none}
/* ลงทะเบียน: เลือกประเภทด้วยปุ่ม 2 ปุ่ม ช่องบังคับมีดอกจัน ที่เหลือพับไว้ */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-opt{position:relative;display:block}
.seg-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg-opt>span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 10px;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);font-size:14px;font-weight:600;line-height:1.3;text-align:center}
.seg-opt>span .ui-icon{width:20px;height:20px;flex-shrink:0}
.seg-opt .seg-t{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.25}
.seg-opt .seg-t b{font-size:15px}
.seg-opt .seg-t small{font-size:12px;font-weight:500;color:var(--muted)}
.seg-opt input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink)}
.seg-opt input:focus-visible+span{outline:3px solid var(--brand);outline-offset:2px}
.req{color:var(--bad);font-weight:700}
.reg-more{border:1px dashed var(--line-2);border-radius:14px;padding:2px 14px;margin:2px 0 8px}
.reg-more>summary{cursor:pointer;min-height:46px;display:flex;align-items:center;font-weight:600;color:var(--ink-2)}
.reg-more[open]{padding-bottom:12px}
.reg-more[open]>summary{margin-bottom:6px}
.reg-more .field+.field{margin-top:12px}
/* บิล: ยอดที่ต้องโอน + QR อยู่บนสุด */
.pay-top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1.5px solid var(--brand)}
.pay-amt small{display:block;font-size:14px;color:var(--muted)}
.pay-amt b{display:block;font-size:34px;line-height:1.25}
.pay-top .qr{padding:6px 0 0;gap:10px}
.row.adj{color:var(--ink-2)}
/* ซื้อคู่พิเศษวันนี้: แถวสินค้าแบบเดียวกับหมวดอื่น */
.smart-today .section-sub+.prod{border-top:0}

/* ===== v3.1.2 (แก้จาก UAT) ===== */
.sk-num{color:var(--muted);font-weight:500}
.bill-when{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:14px;line-height:1.4;color:var(--ink)}
.bill-when .ui-icon,.bill-when svg{width:16px;height:16px;flex-shrink:0;margin-top:2px}
.pin-res span small.hint{display:block;margin-top:2px}
.ready-box .ready-row{align-items:flex-start}
.ready-box .ready-row>span,.ready-box .ready-row>span:last-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;max-width:none;text-align:left}
.ready-box .ready-row.ok b{color:var(--good)}
.ready-box .ready-row.block b{color:var(--bad)}
.ready-box .ready-row.warn b{color:var(--warn)}
.ready-warn .text-btn{margin-left:6px}
/* v3.1.3 UAT tools: persona / simulated clock bar, mock LINE chat */
.uat-bar{position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--warn-soft);color:var(--warn);border-bottom:2px solid var(--warn);padding:8px 16px;font-size:13px;line-height:1.5}
.uat-bar .ui-icon{width:18px;height:18px}.uat-bar .uat-acts{display:flex;gap:6px;margin-left:auto}.uat-bar .btn{background:var(--surface)}
.uat-sim{background:var(--warn-soft);color:var(--warn)}.uat-sim .ui-icon{width:18px;height:18px}
.uat-tools h4{margin:16px 0 4px;font-size:15px}.uat-tools h4:first-of-type{margin-top:10px}
.uat-tools .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.uat-row{align-items:flex-start;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);padding:8px 0}.uat-row>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:2px;flex:1;min-width:200px;max-width:none;text-align:left}.uat-row .acts{margin-top:0}
.uat-sub{margin-top:10px;padding:10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}.uat-sub .row{gap:8px;flex-wrap:wrap}.uat-sub .row>span:first-child{text-align:left;max-width:none}
.uat-clock{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px;margin-top:8px}.uat-clock .field{margin:0;min-width:120px}
.uat-quick .btn small{opacity:.75;font-size:11px}
.tc-list{display:flex;flex-direction:column;gap:10px;margin-top:10px;max-height:70vh;overflow:auto;padding:8px;border-radius:12px;background:#8CA9C2}
.tc-row{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.tc-row.real .tc-msg{outline:2px dashed var(--warn)}
.tc-meta{font-size:12px;color:#fff;display:flex;gap:6px;flex-wrap:wrap}.tc-meta .hint{color:#F1F5F9}
.tc-msg{background:#fff;color:#111;border-radius:14px;max-width:320px;width:100%;overflow:hidden;font-size:14px;line-height:1.5}.tc-text{padding:9px 12px;white-space:normal;overflow-wrap:anywhere}
.fx-bubble{display:flex;flex-direction:column}.fx-body,.fx-footer,.fx-header{padding:12px}.fx-footer{padding-top:0}.fx-hero img,.fx-img{width:100%;display:block}
.fx-box{display:flex;gap:4px}.fx-vertical{flex-direction:column}.fx-horizontal,.fx-baseline{flex-direction:row;align-items:baseline}.fx-horizontal>.fx-text,.fx-baseline>.fx-text{flex:1}
.fx-text{overflow-wrap:anywhere}.fx-text.b{font-weight:700}.fx-text.r{text-align:right}.fx-xxs,.fx-xs{font-size:11px;color:#6b7280}.fx-sm{font-size:13px}.fx-lg{font-size:17px}.fx-xl,.fx-xxl{font-size:19px}
.fx-sep{border:0;border-top:1px solid #e5e7eb;margin:6px 0}.fx-btn{display:block;text-align:center;margin-top:6px;text-decoration:none}.fx-carousel{display:flex;gap:8px;overflow:auto}.fx-carousel>.fx-bubble{min-width:240px;background:#fff;border-radius:12px}
.chat-modal .modal-in{max-width:420px}.chat-modal .tc-list{max-height:60vh}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .tc-list{background:#2B3A47}}
[data-theme=dark] .tc-list{background:#2B3A47}

/* v3.1.4 bills list: showing cached list while refreshing */
.hint.refreshing{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:.92em}
.hint.refreshing svg{width:16px;height:16px;flex:none}