/* Menu quán: chỉ bố cục. Màu, font, bóng lấy từ lớp .saly-* và biến var(--brand-*). */
.menu-trang { display: grid; gap: var(--space-5); align-content: start; }
.menu-trang > * { margin: 0; }
.menu-trang__mon > .saly-field { margin: 0; }

/* Hàng chip lọc dính đầu màn khi cuộn */
.bo-loc {
  position: sticky; top: 0; z-index: var(--z-sticky);
  margin: var(--space-3) calc(-1 * var(--gutter)) 0; padding: var(--space-2) var(--gutter); background: var(--brand-surface);
}
.bo-loc .saly-chips { margin: 0; }
.dem-mon { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-sm); }

/* Lưới món: một cột trên điện thoại; từ 768px tự chia cột */
.luoi-mon { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .luoi-mon { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: var(--space-4); } }
.mon__gia { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); min-width: 0; }
.saly-menu-card__foot { flex-wrap: nowrap; }
.mon__media { display: grid; place-items: center; }
/* Tên món luôn thẳng hàng ở đầu thẻ; giá + nút dồn xuống đáy thẻ */
.luoi-mon .saly-menu-card__body { justify-content: flex-start; }
.luoi-mon .saly-menu-card__foot { margin-top: auto; }
/* Chưa có ảnh: trên máy tính thu thấp khung hình vẽ để món hiện nhiều hơn trên màn đầu */
@media (min-width: 768px) { .luoi-mon .mon__media { aspect-ratio: auto; height: 5.5rem; } }

/* Món đã chọn: điện thoại xem trong tấm trượt; laptop là cột phải dính khi cuộn */
.don-khung { display: none; }
.don-ds, .don-nut { margin: 0; }
.don-rong { padding: var(--space-4) 0; }
.don-nut { flex-direction: column; align-items: stretch; }
.dong-don__so { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.dong-don__dem { min-width: 1.5rem; text-align: center; }
@media (min-width: 1024px) {
  .menu-trang { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-5) var(--space-6); align-items: start; }
  .menu-trang__dau { grid-column: 1 / -1; }
  .don-khung { display: block; position: sticky; top: var(--space-5); }
  .don-thanh { display: none; }
  .don-khung .saly-list-item { flex-wrap: wrap; }
  .don-khung .saly-list-item__body { flex-basis: 100%; }
  .don-khung .dong-don__so { margin-left: auto; }
}