/* v1.8.57 Customer: original 4-card layout with REAL pagination, compact categories,
   accessible invoice and bottom-sheet options. No auth/API business logic changes. */
body:has(.site-header) .customer-invoice-card{background:#fff8eb!important;border-color:#b99c79!important;border-radius:13px!important}
body:has(.site-header) .guest-receipt-actions button{min-height:40px;border-radius:10px}
@media(max-width:760px){
  body:has(.site-header) #thuc-don .menu-category-rail{height:42px!important;min-height:42px!important;flex-basis:42px!important;overflow:hidden!important;margin-bottom:3px!important}
  body:has(.site-header) #thuc-don .menu-category-rail > #category-tabs{display:flex!important;position:static!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px!important;width:100%!important;height:41px!important;min-height:41px!important;overflow-x:auto!important;overflow-y:hidden!important;white-space:nowrap!important;padding:0 1px 3px!important;scrollbar-width:none!important;touch-action:pan-x!important}
  body:has(.site-header) #thuc-don .menu-category-rail > #category-tabs::-webkit-scrollbar{display:none!important}
  body:has(.site-header) #thuc-don .menu-category-rail #category-tabs .category-tab{box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;flex:0 0 auto!important;height:37px!important;min-height:37px!important;max-height:37px!important;padding:5px 10px!important;border-radius:12px!important;font:750 11px/1.25 system-ui!important;text-decoration:none!important;white-space:nowrap!important}
  body:has(.site-header) #thuc-don .menu-category-rail #category-tabs .category-tab.active{background:#405c3b!important;color:#fff9ea!important;border-color:#2a482d!important}
  body:has(.site-header) #thuc-don .menu-category-rail > .mobile-category-picker{display:none!important}
  body:has(.site-header) #thuc-don .product-category-products{touch-action:pan-x!important}
  body:has(.site-header) #thuc-don .product-category-heading::after{content:"Vuốt ngang hoặc bấm › để xem tiếp"!important;font-size:9px!important}
  body:has(.site-header) #thuc-don .product-menu-page>.product-card{border:1px solid #ac8662!important;border-radius:12px!important;overflow:hidden!important}
  body:has(.site-header) #thuc-don .product-menu-page>.product-card .product-art img{object-fit:contain!important;background:#d2b28b!important}
  body:has(.site-header) #thuc-don .product-menu-page .product-info{padding:5px 6px!important;gap:2px!important}
  body:has(.site-header) #thuc-don .product-menu-page .product-title-row h3{font-size:clamp(11px,3.3vw,13px)!important;line-height:1.22!important}
  body:has(.site-header) #thuc-don .product-menu-page .product-price{font-size:12px!important}
  body:has(.site-header) #thuc-don .product-menu-page .choose-product-button{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:32px!important;max-height:42px!important;padding:4px 3px!important;margin-top:auto!important;font-size:11px!important;line-height:1.2!important;border-radius:9px!important;background:#405c3b!important;color:#fff9ea!important}
  body:has(.site-header) #thuc-don .customer-menu-pager{box-sizing:border-box!important;flex:0 0 33px!important;display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;align-items:center!important;gap:5px!important;width:100%!important;height:33px!important;background:#e9d0af!important;border:1px solid #b9956f!important;border-radius:10px!important;margin-top:2px!important;padding:1px 3px!important;color:#463322!important}
  body:has(.site-header) #thuc-don .customer-menu-pager button{min-height:27px!important;height:27px!important;border-radius:8px!important;border:1px solid #526b4b!important;background:#405c3b!important;color:white!important;font-size:20px!important;line-height:1!important;padding:0!important}
  body:has(.site-header) #thuc-don .customer-menu-pager button:disabled{opacity:.3!important}
  body:has(.site-header) #thuc-don .customer-menu-pager span{text-align:center!important;font:700 11px system-ui!important}
  body:has(.site-header) :is(#product-detail-dialog,#checkout-dialog,#account-dialog,#demo-dialog){box-sizing:border-box!important;margin:auto 0 0!important;width:100%!important;max-width:100%!important;max-height:87dvh!important;overflow-y:auto!important;border-radius:20px 20px 0 0!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important;overscroll-behavior:contain!important}
  body:has(.site-header) :is(#product-detail-dialog,#checkout-dialog,#account-dialog,#demo-dialog)::backdrop{background:rgba(35,23,16,.72)!important}
  body:has(.site-header) .customer-invoices{padding:14px 8px calc(90px + env(safe-area-inset-bottom))!important}
  body:has(.site-header) .customer-page-heading{margin-bottom:10px!important}
  body:has(.site-header) .customer-page-heading h2{font-size:22px!important}
  body:has(.site-header) .customer-invoice-card>header{padding:10px!important;flex-wrap:wrap}
  body:has(.site-header) .customer-invoice-card li{font-size:12px!important;line-height:1.4!important}
  body:has(.site-header) .customer-invoice-card .customer-invoice-total{padding:10px!important}
}
/* Respect customer-scroll-unlock: native vertical page scroll is intentional.
   Make the four-card subpages horizontal, not stacked full lists. */
@media(max-width:760px){
 body:has(> .site-header) #thuc-don .menu-layout,
 body:has(> .site-header) #thuc-don .menu-main,
 body:has(> .site-header) #thuc-don #product-grid,
 body:has(> .site-header) #thuc-don .product-menu-app-page{height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;flex:none!important}
 body:has(> .site-header) #thuc-don .product-category-products{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;flex:none!important;width:100%!important;height:auto!important;min-height:0!important;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;touch-action:pan-x!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
 body:has(> .site-header) #thuc-don .product-category-products > .product-menu-page{display:grid!important;position:relative!important;flex:0 0 100%!important;width:100%!important;min-width:100%!important;max-width:100%!important;height:auto!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(195px,auto))!important;gap:7px!important;margin:0!important;padding:1px!important;overflow:hidden!important;scroll-snap-align:start!important}
 body:has(> .site-header) #thuc-don .customer-menu-pager{position:relative!important;display:grid!important;flex:none!important;margin-top:5px!important}
}
@media(max-width:760px){
 body:has(> .site-header) #thuc-don .product-category-products > .product-menu-page{
  height:clamp(356px,calc(100dvh - 380px),470px)!important;
  min-height:356px!important;max-height:470px!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
 }
}
@media(max-width:760px){
 body:has(> .site-header) #thuc-don .product-category-products > .product-menu-page > .product-card{height:100%!important;min-height:0!important;max-height:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,54%) minmax(0,46%)!important;overflow:hidden!important}
 body:has(> .site-header) #thuc-don .product-category-products > .product-menu-page > .product-card > .product-art{height:100%!important;min-height:0!important;max-height:100%!important;grid-row:1!important;overflow:hidden!important}
 body:has(> .site-header) #thuc-don .product-category-products > .product-menu-page > .product-card > .product-info{height:100%!important;min-height:0!important;max-height:100%!important;grid-row:2!important;overflow:hidden!important}
}

/* Clear the bottom app bar when vertically scrolling on short phones. */
@media(max-width:760px){body:has(> .site-header) #thuc-don{padding-bottom:calc(85px + env(safe-area-inset-bottom))!important}}