/* Trang Thực đơn — nền sáng, đơn giản, dễ đọc (khác hero tối của trang chủ)
   vì đây là trang khách sẽ đọc kỹ, quét nhanh giá — ưu tiên tương phản cao. */

.trang-menu{ background: var(--nen); }

.menu-hero{
  background: var(--nen);
  padding: 40px 0 28px;
  text-align:center;
  border-bottom: 1px solid var(--vien);
}
.menu-hero .nhan-mono{ color: var(--xanh-dam); }
.menu-hero h1{
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--chu);
  margin: 6px 0 12px;
}
.menu-hero .mo-ta{
  max-width: 640px; margin: 0 auto 24px;
  color:#6b5c4d; font-size:.95rem;
}

.co-so-chon{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom: 16px; }
.co-so-btn{
  font-weight:600; font-size:.82rem; letter-spacing:.02em;
  background: #fff; border:1.5px solid var(--vien); color: var(--chu);
  padding: 10px 18px; border-radius: 999px; cursor:pointer;
}
.co-so-btn.active{ background: var(--chu); color:#fff; border-color: var(--chu); }

.loai-tabs{
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  position: sticky; top:70px; z-index:20;
  background: var(--nen); padding: 10px 0 4px;
}
.loai-tabs[hidden]{ display:none; }
.loai-btn{
  font-size:.86rem; font-weight:700;
  background: #fff; border:1.5px solid var(--xanh-dam); color: var(--xanh-dam);
  padding: 9px 18px; border-radius: 999px; cursor:pointer; white-space:nowrap;
}
.loai-btn.active{ background: var(--xanh-dam); color:#fff; }

.menu-noi-dung{ background: var(--nen); padding: 24px 0 80px; }

.menu-ghi-chu{
  background: #FBEFE3; border: 1px solid #E8C9A2; color:#6b4a20;
  border-radius: 12px; padding: 14px 18px; margin-bottom: 28px; font-size:.9rem;
}

.menu-nhom{ margin-bottom: 40px; }
.menu-nhom h3{
  font-weight:700; text-transform:uppercase; letter-spacing:.05em; line-height:1.8;
  font-size:.85rem; color: var(--xanh-dam); font-weight:700;
  border-bottom: 2px solid var(--xanh-dam); padding-bottom: 10px; margin-bottom: 6px;
}
.menu-luoi{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.menu-dong{
  display:flex; justify-content:space-between; align-items:flex-start; gap: 14px;
  padding: 14px 0; border-bottom: 1px dashed var(--vien);
}
.menu-dong .ten-mon{ font-weight:700; font-size:1rem; color: var(--chu); }
.menu-dong .ten-mon .huy-hieu{
  font-size:.66rem; font-weight:700; margin-left:7px; padding:2px 8px; border-radius:999px;
  vertical-align: middle; white-space:nowrap;
}
.huy-hieu.best{ background:#FBEFE3; color:#B4482A; }
.huy-hieu.chay{ background:#E2F3E8; color:#1E7A46; }
.menu-dong .mo-ta-mon{ font-size:.85rem; color:#7A6C5D; margin-top:3px; line-height:1.4; }
.menu-dong .gia-mon{
  font-family:"Roboto Mono",monospace; font-weight:800; font-size:1.02rem; color: var(--xanh-dam);
  white-space:nowrap; text-align:right; flex-shrink:0;
}
.menu-dong .gia-mon .gio-vang{ display:block; font-size:.68rem; color:#1E7A46; font-weight:600; margin-top:2px; }

@media (max-width: 800px){
  .menu-luoi{ grid-template-columns: 1fr; }
  .loai-tabs{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .loai-btn{ flex-shrink:0; }
}

/* Các panel thực đơn được dựng sẵn trong HTML (để công cụ tìm kiếm đọc được); JS chỉ bật/tắt bằng thuộc tính hidden. */
.menu-panel[hidden]{ display:none; }