/* Honmono online ordering styles */
.hmol-overlay[hidden], .hmol-overlay [hidden], #hmol-staff-panel[hidden], #hmpos-workspace[hidden] { display:none!important; }
body.hmol-lock { overflow:hidden!important; }
.hmol-trigger { border:0; background:#ed4727; color:white; border-radius:50px; font:800 14px Arial,sans-serif; letter-spacing:.04em; padding:15px 22px; cursor:pointer; box-shadow:0 10px 35px #19191924; }
.hmol-trigger:hover { background:#cc3419; }
.hmol-floating { position:fixed; bottom:18px; left:18px; right:auto; z-index:1000000; }
@media (max-width:520px) { .hmol-floating { left:12px; bottom:12px; padding:13px 17px; font-size:12px; } }
.hmol-overlay { position:fixed; inset:0; z-index:2147482500; background:#13131399; font-family:Arial,Helvetica,sans-serif; color:#171717; box-sizing:border-box; }
.hmol-overlay * { box-sizing:border-box; }
.hmol-overlay button, .hmol-overlay input, .hmol-overlay textarea { font:inherit; }
.hmol-app { height:100dvh; background:#f7f4ec; display:flex; flex-direction:column; overflow:hidden; position:relative; }
.hmol-header { flex:0 0 68px; background:#181818; color:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 24px; gap:12px; }
.hmol-brand { font-size:21px; font-weight:900; letter-spacing:.08em; white-space:nowrap; }
.hmol-brand span { color:#f25a35; font-size:12px; font-weight:700; margin-left:16px; letter-spacing:.1em; }
.hmol-header-note { font-size:12px; color:#c8c8c8; }
.hmol-close { width:42px; height:42px; border:0; background:transparent; color:#fff; cursor:pointer; font-size:30px!important; }
.hmol-menu-loading { padding:50px; text-align:center; font-size:16px; }
.hmol-grid { flex:1; min-height:0; display:grid; grid-template-columns:190px minmax(0,1fr) 430px; }
.hmol-category-panel { background:#eee8df; border-right:1px solid #d8cfc3; padding:18px 12px; overflow:auto; }
.hmol-category-panel > strong { display:block; font-size:15px; margin:0 6px 15px; }
#hmol-categories { display:grid; gap:5px; }
#hmol-categories button { display:block; width:100%; text-align:left; border:0; background:transparent; border-radius:9px; padding:12px; font-size:12px; font-weight:800; cursor:pointer; color:#302d2a; }
#hmol-categories button.is-active { color:#fff; background:#e94726; }
.hmol-menu-panel { min-width:0; overflow:auto; }
.hmol-menu-toolbar { position:sticky; top:0; z-index:2; background:#f7f4ec; padding:17px; border-bottom:1px solid #e0d7cc; }
.hmol-menu-toolbar input { width:100%; height:44px; padding:0 14px; border:1px solid #d6cabc; border-radius:10px; background:#fff; outline:0; }
.hmol-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; padding:16px; }
.hmol-product { border:1px solid #e3dacf; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 6px 16px #19191908; min-width:0; }
.hmol-product-image { aspect-ratio:4/3; background:#ece7de; }
.hmol-product-image img { width:100%; height:100%; object-fit:cover; display:block; }
.hmol-product-body { padding:13px; }
.hmol-product-row { display:flex; justify-content:space-between; gap:10px; font-size:13px; line-height:1.4; }
.hmol-product-row strong { flex:1; }
.hmol-product-row b { white-space:nowrap; }
.hmol-product-body p { color:#86796b; font-size:11px; line-height:1.4; min-height:30px; margin:8px 0!important; }
.hmol-product-body button { width:100%; height:36px; color:#fff; background:#e94726; border:0; border-radius:8px; font-size:12px; font-weight:800; cursor:pointer; }
.hmol-cart-panel { display:flex; flex-direction:column; min-width:0; background:#fff; border-left:1px solid #e1d9cf; overflow:hidden; }
.hmol-cart-head { flex:0 0 auto; padding:20px 22px 13px; border-bottom:1px solid #e3dacf; display:flex; justify-content:space-between; }
.hmol-cart-head span { display:block; color:#a29384; letter-spacing:.1em; font-size:10px; margin-bottom:6px; }
.hmol-cart-head strong { font-size:22px; }
#hmol-cart-close { display:none; }
.hmol-cart-scroll { flex:1; overflow-y:auto; min-height:0; padding:0 22px; scrollbar-width:thin; }
.hmol-cart-items { padding:9px 0; }
.hmol-cart-item { border:1px solid #eadfd4; border-radius:12px; padding:12px; margin:9px 0; background:#fff; }
.hmol-cart-item-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; font-size:14px; }
.hmol-cart-item-top b { white-space:nowrap; }
.hmol-qty-row { display:flex; align-items:center; justify-content:space-between; margin:12px 0 0; }
.hmol-qty { display:grid; grid-template-columns:42px 42px 42px; align-items:center; border:1px solid #d9cabb; border-radius:10px; overflow:hidden; height:42px; }
.hmol-qty button { width:42px; height:42px; min-height:0; border:0; margin:0; background:#fff; padding:0; font-size:18px; font-weight:900; cursor:pointer; }
.hmol-qty span { text-align:center; font-size:15px; font-weight:800; }
.hmol-qty button:first-child { border-right:1px solid #ebe3da; }
.hmol-qty button:last-child { border-left:1px solid #ebe3da; }
/* Nút xóa món vuông, chữ × luôn ở giữa */
.hmol-overlay .hmol-qty-row .hmol-remove { display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 42px; width:42px!important; min-width:42px!important; max-width:42px!important; height:42px!important; min-height:42px!important; max-height:42px!important; margin:0!important; padding:0!important; border:1px solid #eccbc3!important; border-radius:11px!important; background:#fff!important; color:#c63d27!important; box-shadow:none!important; font-size:22px!important; font-weight:700!important; line-height:1!important; text-align:center!important; cursor:pointer; }
.hmol-overlay .hmol-qty-row .hmol-remove:hover { background:#fff4f0!important; border-color:#e94726!important; }

.hmol-toppings { padding:8px 0 3px; font-size:12px; }
.hmol-toppings summary { font-size:12px; font-weight:800; cursor:pointer; }
.hmol-toppings label { display:flex; gap:8px; align-items:center; padding:5px; font-size:11px; }
.hmol-toppings label small { margin-left:auto; }
.hmol-item-note { display:block; width:100%; margin:9px 0 0!important; border:1px solid #e2d9ce!important; border-radius:8px; height:36px; padding:0 10px!important; font-size:12px!important; background:#faf9f6!important; }
.hmol-cart-field { margin:12px 0; }
.hmol-cart-field > label, .hmol-address-title strong { display:block; font-size:12px; font-weight:800; margin-bottom:7px; }
.hmol-cart-field input, .hmol-cart-field textarea, .hmol-inline input, .hmol-address-label-input { display:block; width:100%; border:1px solid #dcd0c3; border-radius:8px; padding:10px; background:#fff; box-shadow:none; color:#171717; font-size:13px; min-width:0; }
.hmol-cart-field textarea { resize:vertical; }
.hmol-inline { display:flex; gap:8px; align-items:center; }
.hmol-inline button { background:#fff; border:1px solid #d7c9b9; border-radius:8px; padding:11px; cursor:pointer; white-space:nowrap; font-size:11px; font-weight:800; }
.hmol-help { flex:0 0 auto; max-width:115px; color:#8a7c70; font-size:10px; line-height:1.3; }
/* Tiêu đề coupon và nút xóa gọn như POS nhân viên */
.hmol-overlay .hmol-coupon-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 10px; }
.hmol-overlay .hmol-coupon-heading label { margin:0; color:#171717; font-size:13px; font-weight:800; line-height:1.3; }
.hmol-overlay .hmol-coupon-heading #hmol-coupon-clear { display:inline-flex!important; align-items:center; justify-content:center; flex:0 0 auto; width:auto!important; min-width:0!important; height:30px!important; min-height:0!important; margin:0!important; padding:0 2px!important; border:0!important; border-radius:0!important; background:transparent!important; color:#827367!important; box-shadow:none!important; text-transform:uppercase; font-size:11px!important; font-weight:800!important; line-height:1!important; cursor:pointer; }
.hmol-overlay .hmol-coupon-heading #hmol-coupon-clear:hover { color:#e94726!important; }
/* Ô coupon và Apply trên một hàng */
.hmol-overlay .hmol-coupon-row { display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:10px; align-items:stretch; width:100%; min-width:0; }
.hmol-overlay .hmol-coupon-row #hmol-coupon { display:block; width:100%!important; min-width:0!important; height:48px!important; min-height:48px!important; max-height:48px!important; margin:0!important; padding:0 14px!important; border:1px solid #d9ccbe!important; border-radius:11px!important; background:#fff!important; box-shadow:none!important; outline:none; color:#171717; font-size:13px!important; line-height:46px!important; }
.hmol-overlay .hmol-coupon-row #hmol-coupon:focus { border-color:#e94726!important; box-shadow:0 0 0 2px rgba(233,71,38,.10)!important; }
.hmol-overlay .hmol-coupon-row #hmol-coupon-apply { display:inline-flex!important; align-items:center; justify-content:center; width:100%!important; min-width:0!important; height:48px!important; min-height:48px!important; max-height:48px!important; margin:0!important; padding:0 12px!important; border:1px solid #e94726!important; border-radius:11px!important; background:#e94726!important; color:#fff!important; box-shadow:none!important; font-size:12px!important; font-weight:800!important; line-height:1!important; text-transform:uppercase; cursor:pointer; }
.hmol-overlay .hmol-coupon-row #hmol-coupon-apply:hover { background:#d63f22!important; border-color:#d63f22!important; }
.hmol-help-block { margin-top:9px; font-size:11px; line-height:1.4; color:#8a7c70; }
.hmol-help-block.is-valid { color:#146b37; }
.hmol-help-block.is-invalid { color:#b42318; }
.hmol-mode-choices { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.hmol-mode-choices button { border:1px solid #d7cec4; background:#fff; padding:11px; border-radius:10px; font-weight:800; font-size:12px; cursor:pointer; }
.hmol-mode-choices button.is-active { border-color:#e94726; color:#e94726; background:#fff6f2; }
.hmol-address-book { background:#f9f7f3; border:1px solid #e9dfd4; border-radius:12px; padding:12px; margin-top:12px; }
.hmol-address-title { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.hmol-address-title button { border:0; color:#e94726; background:transparent; font-size:11px; font-weight:800; cursor:pointer; }
.hmol-saved { display:flex; align-items:center; border:1px solid #e9dfd4; border-radius:9px; margin-top:8px; background:white; padding:8px; }
.hmol-saved.is-selected { border-color:#e94726; }
.hmol-saved button { background:transparent; border:0; padding:6px; cursor:pointer; color:#5e5650; font-size:11px; }
.hmol-saved button:first-child { flex:1; text-align:left; }
.hmol-saved strong { display:block; margin-bottom:4px; color:#191919; }
.hmol-saved span { display:block; }
.hmol-saved small { display:block; margin-top:5px; font-size:11px; color:#84776a; }
.hmol-saved.is-selected { background:#fff9f5; }
.hmol-save-address-tools { border:1px solid #e9dfd4; border-radius:12px; background:#faf8f4; margin:12px 0; padding:12px; }
.hmol-address-editor-label { display:block; font-size:12px; font-weight:800; margin-bottom:7px; }
.hmol-save-address-tools .hmol-inline button:first-child { background:#e94726; border-color:#e94726; color:#fff; }
.hmol-small { display:flex; align-items:center; gap:8px; font-size:11px; margin:10px 0; }
.hmol-small input { width:auto; margin:0; }
.hmol-address-disclaimer { font-size:11px; color:#8b7f72; }
.hmol-cart-footer { flex:0 0 auto; padding:12px 22px 17px; border-top:1px solid #ded5ca; background:#fff; box-shadow:0 -4px 16px #19191908; }
.hmol-total-line { display:flex; justify-content:space-between; margin-bottom:8px; font-size:12px; }
.hmol-discount-line span, .hmol-discount-line strong { color:#146b37; }
.hmol-grand { border-top:1px solid #e4dacf; padding-top:10px; font-weight:800; font-size:16px; }
.hmol-cart-footer small { font-size:10px; color:#81756a; display:block; line-height:1.4; margin:5px 0 10px; }
.hmol-place { width:100%; height:45px; background:#e94726; border:0; border-radius:10px; color:#fff; font-size:13px; font-weight:900; cursor:pointer; }
.hmol-place:disabled { opacity:.4; cursor:not-allowed; }
.hmol-error { border:1px solid #e7aaaa; padding:10px; margin:10px 0; border-radius:8px; background:#fff3f2; color:#a52a24; font-size:12px; line-height:1.4; }
.hmol-empty { color:#897f75; padding:20px 5px; font-size:12px; }
.hmol-mobile-cart { display:none; }
.hmol-success { position:absolute; inset:68px 0 0; display:grid; place-items:center; background:#ffffffed; z-index:10; }
.hmol-success-card { width:min(440px,90%); text-align:center; border:1px solid #eadfd4; background:white; border-radius:18px; padding:36px; box-shadow:0 15px 50px #0002; }
.hmol-success-card > span { display:inline-grid; place-items:center; border-radius:50%; width:66px; height:66px; background:#d4ebde; color:#0e8a40; font-size:30px; }
.hmol-success-card h2 { color:#171717; font-size:26px; margin:16px 0; }
.hmol-success-card p { font-size:14px; line-height:1.6; }
.hmol-success-card button { background:#e94726; border:0; color:#fff; border-radius:9px; padding:12px 40px; font-weight:800; cursor:pointer; }
/* Online Orders tab in the existing staff POS */
.hmol-staff-tab { background:#303030!important; border:1px solid #555!important; border-radius:9px!important; padding:9px 12px!important; color:#fff!important; margin-left:18px; font-size:12px!important; font-weight:800!important; cursor:pointer; }
.hmol-staff-tab.is-active { background:#e94726!important; border-color:#e94726!important; }
#hmol-staff-count { color:#fff; background:#db4228; border-radius:30px; padding:2px 6px; margin-left:4px; }
.hmol-staff-panel { height:calc(100dvh - 66px); overflow-y:auto; background:#ece4d6; padding:20px 25px; color:#171717; }
.hmol-staff-panel-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:18px; }
.hmol-staff-panel h2 { font-size:25px; font-weight:900; margin:0; color:#1f1a16; }
.hmol-staff-panel-head button { border:1px solid #cdbda8; padding:10px 15px; background:#f8f3eb; border-radius:9px; cursor:pointer; }
.hmol-staff-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); align-items:start; gap:15px; }
.hmol-staff-order { background:#f8f3eb; border:1px solid #dbcdbd; padding:17px; border-radius:14px; box-shadow:0 5px 20px #00000008; min-width:0; }
.hmol-staff-order-head { display:flex; align-items:center; justify-content:space-between; gap:9px; font-size:16px; }
.hmol-status { border-radius:30px; background:#e7ebec; padding:6px 10px; font-size:10px; white-space:nowrap; font-weight:800; }
.hmol-status-new { background:#fff1d6; color:#96640a; }
.hmol-status-accepted, .hmol-status-preparing { background:#dff0ff; color:#0a6190; }
.hmol-status-ready, .hmol-status-completed { background:#dff4e7; color:#146b37; }
.hmol-staff-order p { color:#6b6159; font-size:12px; line-height:1.5; margin:10px 0; overflow-wrap:anywhere; }
.hmol-staff-order a { color:#e94726; }
.hmol-staff-dishes { padding:10px 0; border-top:1px solid #eadfd3; border-bottom:1px solid #eadfd3; }
.hmol-staff-dishes > div { margin:7px 0; font-size:13px; }
.hmol-staff-dishes small { color:#776d64; display:block; padding:3px 12px; }
.hmol-staff-order-bottom { display:flex; justify-content:space-between; margin:13px 0; gap:8px; }
.hmol-staff-order-bottom b { font-size:18px; }
.hmol-staff-order-bottom small { color:#85796e; }
.hmol-staff-meta, .hmol-staff-totals { margin:12px 0; padding:10px 12px; border:1px solid #e3d6c7; border-radius:10px; background:#fdfaf5; }
.hmol-staff-meta { display:flex; flex-direction:column; gap:5px; font-size:12px; color:#5f554d; }
.hmol-staff-meta strong { color:#171717; }
.hmol-staff-totals > div { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin:5px 0; }
.hmol-staff-totals span { color:#6b6159; }
.hmol-staff-totals strong { color:#171717; }
.hmol-staff-actions { display:flex; flex-wrap:wrap; gap:7px; }
.hmol-staff-actions button { background:#fff; border:1px solid #d6c7b9; border-radius:9px; padding:10px 12px; cursor:pointer; font-weight:800; font-size:11px; }
.hmol-staff-actions button.hmol-primary { background:#e94726; border-color:#e94726; color:#fff; }
.hmol-staff-actions button.hmol-danger { color:#c2321e; }
.hmol-staff-actions button:disabled { opacity:.35; }
@media(max-width:1320px) { .hmol-grid { grid-template-columns:156px minmax(0,1fr) 390px; } .hmol-products { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:920px) {
  .hmol-header { flex:0 0 58px; padding:0 14px; }
  .hmol-brand { font-size:17px; } .hmol-brand span { font-size:10px; margin-left:7px; }
  .hmol-header-note { display:none; }
  .hmol-grid { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .hmol-category-panel { overflow:visible; padding:8px 10px; }
  .hmol-category-panel > strong { display:none; }
  #hmol-categories { display:flex; gap:6px; overflow-x:auto; }
  #hmol-categories button { flex:0 0 auto; width:auto; padding:10px 14px; }
  .hmol-products { padding:12px; padding-bottom:100px; }
  .hmol-cart-panel { position:fixed; z-index:10; top:58px; bottom:0; right:0; width:min(460px,100vw); box-shadow:-10px 0 40px #0002; transform:translateX(110%); transition:transform .2s; }
  .hmol-cart-panel.is-open { transform:translateX(0); }
  #hmol-cart-close { display:block; width:34px; height:34px; border:0; background:transparent; font-size:30px; }
  .hmol-mobile-cart { display:block; position:fixed; bottom:12px; left:12px; right:12px; z-index:7; background:#171717; color:#fff; padding:14px; border:0; border-radius:12px; font-size:13px; font-weight:800; box-shadow:0 8px 25px #0003; }
  .hmol-success { inset:58px 0 0; }
  .hmol-overlay .hmol-coupon-row { grid-template-columns:minmax(0,1fr) 108px; gap:8px; }
  .hmol-staff-panel { height:calc(100dvh - 60px); }
  .hmol-staff-tab { padding:6px!important; margin-left:8px; font-size:10px!important; }
}
@media(max-width:450px) { .hmol-products { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .hmol-product-body { padding:9px; } .hmol-product-row { display:block; font-size:12px; } .hmol-product-row b { display:block; margin-top:5px; } .hmol-product-body p { display:none; } .hmol-product-body button { margin-top:10px; } .hmol-staff-panel { padding:12px; } .hmol-staff-list { grid-template-columns:1fr; } }

/* Responsive độc lập với CSS theme */
@media (max-width: 920px) {
  body .hmol-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 2147482500 !important;
  }
  body .hmol-overlay .hmol-app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  body .hmol-overlay .hmol-header {
    flex: 0 0 56px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 56px !important;
    max-height: 56px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 10px !important;
  }
  .hmol-overlay .hmol-brand {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    min-width: 0 !important;
    gap: 3px 8px !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
  }
  .hmol-overlay .hmol-brand span {
    margin: 0 !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  .hmol-overlay .hmol-header-note { display: none !important; }
  .hmol-overlay .hmol-close {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .hmol-overlay #hmol-grid {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "categories" "dishes" !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }
  .hmol-overlay .hmol-category-panel {
    grid-area: categories !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: 58px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-bottom: 1px solid #ded5ca;
  }
  .hmol-overlay .hmol-category-panel > strong { display: none !important; }
  .hmol-overlay #hmol-categories {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hmol-overlay #hmol-categories::-webkit-scrollbar { display: none; }
  .hmol-overlay #hmol-categories button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: 39px !important;
    height: 39px !important;
    padding: 0 13px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .hmol-overlay .hmol-menu-panel {
    grid-area: dishes !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .hmol-overlay .hmol-menu-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
  }
  .hmol-overlay .hmol-menu-toolbar input {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }
  .hmol-overlay #hmol-products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 10px 10px calc(98px + env(safe-area-inset-bottom, 0px)) !important;
    align-content: start !important;
    align-items: stretch !important;
  }
  .hmol-overlay #hmol-products .hmol-product {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    overflow: hidden !important;
  }
  .hmol-overlay #hmol-products .hmol-product-image {
    display: block !important;
    position: relative !important;
    aspect-ratio: 1.25 / 1 !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  .hmol-overlay #hmol-products .hmol-product-image img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
  }
  .hmol-overlay #hmol-products .hmol-product-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
  }
  .hmol-overlay #hmol-products .hmol-product-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .hmol-overlay #hmol-products .hmol-product-row strong,
  .hmol-overlay #hmol-products .hmol-product-row b { display: block !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; }
  .hmol-overlay #hmol-products .hmol-product-body p {
    display: -webkit-box !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden !important;
    min-height: 0 !important;
    max-height: 31px;
    margin: 5px 0 8px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
  .hmol-overlay #hmol-products .hmol-product-body button {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 6px !important;
    margin: auto 0 0 !important;
    border-radius: 8px !important;
  }
  .hmol-overlay #hmol-cart-panel {
    position: fixed !important;
    inset: 56px 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: min(460px, 100vw) !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: calc(100dvh - 56px) !important;
    max-height: calc(100dvh - 56px) !important;
    z-index: 10 !important;
    overflow: hidden !important;
    margin: 0 !important;
    transform: translateX(105%) !important;
    transition: transform .22s ease !important;
    visibility: hidden !important;
  }
  .hmol-overlay #hmol-cart-panel.is-open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }
  .hmol-overlay #hmol-cart-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    font-size: 26px !important;
  }
  .hmol-overlay .hmol-cart-scroll { padding: 0 16px !important; overflow-y: auto !important; min-height: 0 !important; }
  .hmol-overlay .hmol-cart-head { padding: 14px 16px 12px !important; }
  .hmol-overlay .hmol-cart-footer {
    flex: 0 0 auto !important;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
  }
  .hmol-overlay #hmol-mobile-cart:not([hidden]) {
    position: fixed !important;
    inset: auto 12px calc(12px + env(safe-area-inset-bottom, 0px)) 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 24px) !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    z-index: 9 !important;
    border-radius: 12px !important;
    background: #e94726 !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(49, 23, 15, .22) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .hmol-overlay .hmol-success { inset: 56px 0 0 !important; padding: 12px !important; }
  .hmol-overlay .hmol-success-card { width: min(100%, 390px) !important; padding: 22px 15px !important; }
  .hmol-overlay .hmol-coupon-row { grid-template-columns: minmax(0, 1fr) 102px !important; }
}
@media (max-width: 350px) {
  .hmol-overlay #hmol-products { gap: 8px !important; padding-left: 8px !important; padding-right: 8px !important; }
  .hmol-overlay #hmol-products .hmol-product-body { padding: 8px !important; }
  .hmol-overlay .hmol-coupon-row { grid-template-columns: minmax(0, 1fr) 88px !important; }
}
/* Cửa sổ chi tiết món chung cho Dine-in và Online Order */
.hmpd-overlay[hidden], .hmpd-overlay [hidden] { display: none !important; }
.hmpd-overlay, .hmpd-overlay * { box-sizing: border-box; }
.hmpd-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(18,18,18,.64);
  color: #171717;
  font-family: Arial, Helvetica, sans-serif;
  backdrop-filter: blur(3px);
}
.hmpd-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(700px, 100%);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #e6dbce;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
}
/* Nút đóng chi tiết món dạng tròn, chống CSS theme kéo dãn */
.hmpd-overlay .hmpd-dialog > button.hmpd-close {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 4;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 40px !important;
  box-sizing: border-box !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #171717 !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: 0 5px 16px rgba(0,0,0,.20) !important;
  font-family: Arial,Helvetica,sans-serif !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  transform: none !important;
  cursor: pointer;
}
.hmpd-overlay .hmpd-dialog > button.hmpd-close:hover {
  background: #e94726 !important;
}

.hmpd-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.hmpd-image { display: block; width: 100% !important; height: clamp(210px, 34vh, 310px) !important; min-height: 0; object-fit: contain; background: #eee8df; }
.hmpd-content { padding: 20px 24px 24px; }
.hmpd-eyebrow { display: block; margin-bottom: 10px; color: #e94726; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.hmpd-title { margin: 0 !important; color: #171717 !important; font: 900 clamp(20px,3vw,26px)/1.25 Arial,sans-serif !important; text-transform: none !important; overflow-wrap: anywhere; }
.hmpd-price { display: block; margin-top: 9px; color: #171717; font-size: 19px; font-weight: 900; }
.hmpd-description { margin-top: 17px; color: #5c5248; font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.hmpd-toppings { margin-top: 18px; padding-top: 15px; border-top: 1px solid #eee4d8; }
.hmpd-toppings > strong { display: block; margin-bottom: 8px; font-size: 13px; }
.hmpd-toppings label { display: flex; align-items: center; gap: 11px; min-height: 43px; padding: 7px 0; color: #171717; font-size: 13px; cursor: pointer; }
.hmpd-toppings input[type="checkbox"] { width: 18px !important; height: 18px !important; flex: 0 0 18px; margin: 0 !important; accent-color: #e94726; }
.hmpd-toppings label span { flex: 1; min-width: 0; }
.hmpd-toppings label b { white-space: nowrap; font-size: 12px; }
.hmpd-note-label { display: block; margin: 20px 0 8px; color: #171717; font-size: 13px; font-weight: 800; }
.hmpd-note { display: block; width: 100% !important; min-height: 64px !important; margin: 0 !important; padding: 11px 13px !important; border: 1px solid #ddd1c3 !important; border-radius: 10px !important; background: #fff !important; color: #171717 !important; box-shadow: none !important; font: 13px/1.4 Arial,sans-serif !important; resize: vertical; }
.hmpd-footer { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 14px 20px; border-top: 1px solid #e9dfd3; background: #fff; box-shadow: 0 -5px 16px rgba(0,0,0,.025); }
.hmpd-qty { display: grid; grid-template-columns: 42px 38px 42px; flex: 0 0 auto; align-items: center; height: 46px; border: 1px solid #dbcdbf; border-radius: 10px; overflow: hidden; }
.hmpd-qty button { display: grid !important; place-items: center; width: 42px !important; min-width: 42px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; color: #171717 !important; box-shadow: none !important; font: 900 20px/1 Arial,sans-serif !important; cursor: pointer; }
.hmpd-qty button:first-child { border-right: 1px solid #e9dfd3 !important; }
.hmpd-qty button:last-child { border-left: 1px solid #e9dfd3 !important; }
.hmpd-qty span { text-align: center; color: #171717; font-size: 16px; font-weight: 900; }
.hmpd-add { flex: 1 1 auto; min-width: 0; min-height: 46px !important; margin: 0 !important; padding: 8px 12px !important; border: 1px solid #e94726 !important; border-radius: 10px !important; background: #e94726 !important; color: #fff !important; box-shadow: none !important; font: 800 13px/1.25 Arial,sans-serif !important; text-align: center; cursor: pointer; }
.hmpd-add:hover { background: #d53c20 !important; }
.hmpd-add:disabled { opacity: .45; cursor: not-allowed; }
.hmpd-overlay button:focus-visible, .hmpd-overlay textarea:focus-visible { outline: 2px solid #e94726 !important; outline-offset: 3px; }
.hmol-overlay .hmol-product[data-view-product] { cursor: pointer; }
.hmol-overlay .hmol-product[data-view-product]:focus-visible { outline: 2px solid #e94726; outline-offset: 3px; }
@media (max-width: 600px) {
  .hmpd-overlay { padding: 0; align-items: flex-end; background: rgba(18,18,18,.75); }
  .hmpd-dialog { width: 100%; max-width: 100%; height: min(91dvh, 860px); max-height: 91dvh; border: 0; border-radius: 18px 18px 0 0; }
  .hmpd-image { height: 230px !important; }
  .hmpd-content { padding: 17px 18px 22px; }
  .hmpd-title { font-size: 21px !important; }
  .hmpd-description { font-size: 13px; }
  .hmpd-footer { padding: 12px 14px max(14px, env(safe-area-inset-bottom)); gap: 9px; }
  .hmpd-add { font-size: 12px !important; }
}
@media (max-height: 620px) {
  .hmpd-dialog { max-height: 100dvh; }
  .hmpd-image { height: 155px !important; }
}