/* ==========================================================================
   Trang Thực đơn & bảng giá (page-templates/thuc-don.php) – chỉ nạp ở trang này.
   Dùng lại token của theme: nền kem, thẻ trắng bo 14px, đầu thẻ nâu sẫm như header/footer.
   ========================================================================== */

/* ---------- Thanh nhóm món: dính dưới header khi cuộn ---------- */
.menu-jump {
  position: sticky; top: var(--header-h); z-index: 30;
  background: rgba(251, 246, 238, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.admin-bar .menu-jump { top: calc(var(--header-h) + 32px); }
@media (max-width: 782px) { .admin-bar .menu-jump { top: calc(var(--header-h) + 46px); } }
@media (max-width: 600px) { .admin-bar .menu-jump { top: var(--header-h); } }

.menu-jump .menu-jump__list { /* .menu-jump: thắng ul[class] { padding: 0 } của reset */
  display: flex; gap: 8px; padding-block: 12px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.menu-jump__list::-webkit-scrollbar { display: none; }
/* Căn giữa khi đủ chỗ, vẫn cuộn ngang được khi tràn */
.menu-jump__list > li:first-child { margin-left: auto; }
.menu-jump__list > li:last-child { margin-right: auto; }
.menu-jump__list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 18px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-surface);
  font-size: 0.9375rem; font-weight: 600; color: var(--color-heading); text-decoration: none; white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
@media (hover: hover) {
  .menu-jump__list a:hover { background: var(--color-heading); border-color: var(--color-heading); color: #fff; }
}

/* Neo tới nhóm món: chừa chỗ cho header + thanh nhóm món */
.menu-page [id] { scroll-margin-top: 68px; }

.menu-page__intro { padding-top: clamp(32px, 4vw, 48px); }
.menu-page__intro .prose { max-width: 760px; margin-inline: auto; }

/* ---------- Mâm cơm đặt sẵn ---------- */
.menu-sets { padding-bottom: calc(var(--section-space) * 0.5); }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.set-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.set-card__head {
  padding: 22px 24px 20px; text-align: center; color: var(--color-on-dark);
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(160, 89, 42, 0.38) 0%, rgba(160, 89, 42, 0) 62%),
    var(--color-dark);
}
.set-card__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-light); }
.set-card__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 6px; margin-top: 4px; }
.set-card__price span {
  font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: 0.01em;
  font-size: clamp(2.125rem, 1.7rem + 1.2vw, 2.75rem); color: var(--color-primary);
}
.set-card__price small { font-size: 0.9375rem; color: var(--color-on-dark-muted); }
.set-card .set-card__list { display: grid; gap: 10px; padding: 22px 24px 26px; } /* .set-card: thắng ul[class] { padding: 0 } của reset */
.set-card__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; color: var(--color-heading); }
.set-card__list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-accent); }

.menu-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-top: 24px; padding: 16px 16px 16px 24px;
  border-radius: var(--radius-md); background: var(--color-surface-alt);
  border: 1px dashed rgba(160, 89, 42, 0.35);
}
.menu-cta__text { display: flex; align-items: center; gap: 12px; font-weight: 600; line-height: 1.45; color: var(--color-heading); }
.menu-cta__text .icon { width: 28px; height: 28px; color: var(--color-accent); stroke-width: 1.5; }
.menu-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Món gọi lẻ: thẻ theo nhóm, chia 2 cột tự cân chiều cao ---------- */
.menu-alacarte { padding-top: calc(var(--section-space) * 0.5); }
.menu-cats { columns: 2; column-gap: 24px; }
.menu-cat {
  display: inline-block; width: 100%; break-inside: avoid; /* inline-block: tránh Safari cắt thẻ giữa 2 cột */
  margin-bottom: 24px; padding: 22px 26px 14px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.menu-cat__title { position: relative; font-size: 1.375rem; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 2px solid var(--color-surface-alt); }
.menu-cat__title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; border-radius: 2px; background: var(--color-primary); }

/* Dòng món: Tên ······ Giá (đường chấm nối như thực đơn in).
   Flex + wrap: không đủ chỗ (màn hẹp, giá dạng khoảng) thì giá xuống dòng, căn phải – tên món không bị ép từng chữ. */
.menu-item { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding-block: 8px; }
.menu-item__name { flex: 0 1 auto; min-width: 0; font-weight: 600; line-height: 1.45; color: var(--color-heading); }
.menu-item__dots { flex: 1 1 20px; align-self: flex-end; margin-bottom: 0.5em; border-bottom: 2px dotted #dcc8aa; }
.menu-item__price { flex: 0 0 auto; margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-secondary); }
.menu-item__price.is-text { font-weight: 600; font-style: italic; color: var(--color-accent); }
.menu-item__note { flex: 1 0 100%; margin-top: 1px; font-size: 0.875rem; line-height: 1.45; color: var(--color-muted); }

.menu-page__note { margin-top: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .set-card__head { padding-inline: 16px; }
  .set-card .set-card__list { padding-inline: 18px; }
}
@media (max-width: 767px) {
  .set-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .menu-cta { flex-direction: column; align-items: stretch; padding: 16px; }
  .menu-cta__actions .btn { flex: 1 1 auto; }
  .menu-cats { columns: 1; }
  .menu-cat { margin-bottom: 14px; padding: 18px 18px 10px; }
  .menu-jump .menu-jump__list { padding-block: 10px; }
  .menu-jump__list a { min-height: 36px; padding: 5px 14px; font-size: 0.875rem; }
}