/* Trang mục Món ăn và Đồ uống (tiền tố mn-). Dùng biến màu/cỡ chữ của web.css; không đụng class chung. */

/* Ô nổi (.noi) ẩn của ô sát mép phải làm trang rộng hơn màn hình: cắt phần tràn ngang ở trang mục (xem đề xuất sửa web.css) */
.trang-muc { overflow-x: clip; }

/* dòng tóm tắt dưới tên */
.mn-tom { gap: var(--s1) var(--s5); margin-top: var(--s3); }
.mn-tom > span { white-space: nowrap; }

/* lưu ý đầu trang: mỗi dòng một ô mảnh */
.mn-luu-y { display: grid; gap: 4px; margin-top: var(--s3); }
.mn-ghi { margin: 0; padding: 5px var(--s3); font-size: var(--xs); line-height: 1.45; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); max-width: 120ch; }
.mn-ghi strong { color: var(--ink); font-weight: 600; }
.mn-ghi--canh-bao { background: var(--cho-duyet-nen); color: var(--cho-duyet); border-color: color-mix(in srgb, var(--cho-duyet) 35%, transparent); }
.mn-ghi--canh-bao strong { color: inherit; }
.mn-ghi--canh-bao a { color: inherit; }
.mn-ghi--uoc { color: var(--uoc); border-color: color-mix(in srgb, var(--uoc) 35%, transparent); }
.mn-ghi__khac { color: var(--ink); }
.mn-ghi-nho { margin: 0; font-size: var(--xs); color: var(--ink-3); }
.mn-ghi-nho strong { color: var(--ink-2); font-weight: 600; }

/* lưới Đặc điểm */
.mn-chua-nhan { border-style: dashed; background: transparent; }
.mn-chua-nhan .o__gt { color: var(--ink-2); }

/* bảng mức dùng ở từng loại bếp */
.mn-bep { grid-row: span 3; padding-bottom: var(--s2); }
.mn-bep__chu { color: var(--ink-3); margin-left: var(--s2); }
.mn-bep__ds { list-style: none; margin: 2px 0 0; padding: 0; }
.mn-bep__ds li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5em; align-items: center; gap: var(--s2); font-size: var(--xs); padding: 2px 4px; margin: 0 -4px; border-radius: var(--r-sm); }
.mn-bep__ds li + li { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.mn-bep__ds li:hover, .mn-bep__ds li:focus-visible { background: var(--surface-2); }
.mn-bep__ten { color: var(--ink-2); }
.mn-bep__gt { color: var(--ink); font-weight: 500; white-space: nowrap; }
.mn-bep__gt--khong { color: var(--ink-3); font-weight: 400; }
.mn-cham { display: inline-flex; gap: 3px; }
.mn-cham i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ink-3); }
.mn-cham i.bat { background: var(--ink-2); border-color: var(--ink-2); }

/* dinh dưỡng */
.mn-dd { display: grid; gap: var(--s3) var(--s5); align-items: start; }
@media (min-width: 900px) { .mn-dd { grid-template-columns: minmax(300px, 440px) minmax(0, 70ch); } }
.mn-dd__chu { display: grid; gap: 4px; }
.mn-ban + .mn-dd { margin-top: var(--s4); }
.mn-bang { width: 100%; border-collapse: collapse; font-size: var(--xs); line-height: 1.35; background: var(--surface); }
.mn-dd__bang, .mn-ban__khung { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md); }
.mn-dd__bang { overflow: visible; }
.mn-bang thead th { background: var(--surface-2); font: 600 var(--xxs)/1.4 var(--f-body); color: var(--ink-2); text-align: left; padding: 6px var(--s3); white-space: nowrap; }
.mn-bang thead th:first-child { border-radius: var(--r-md) 0 0 0; }
.mn-bang thead th:last-child { border-radius: 0 var(--r-md) 0 0; }
.mn-bang thead th.co-noi { position: relative; cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--ink-3) 70%, transparent); text-underline-offset: .2em; }
.mn-bang thead .dv { font-weight: 400; color: var(--ink-3); }
.mn-bang th.so, .mn-bang td.so { text-align: right; white-space: nowrap; }
.mn-bang th[scope="row"] { font-weight: 400; text-align: left; padding: 3px var(--s3); }
.mn-bang td { padding: 3px var(--s3); vertical-align: baseline; }
.mn-bang tbody tr + tr > * { border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.mn-bang tbody tr:hover > * { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.mn-bang .dv { color: var(--ink-3); }
.mn-bang td.dv { width: 1%; white-space: nowrap; }
.mn-bang tr.c-dam th, .mn-bang tr.c-bot th, .mn-bang tr.c-xo th { color: inherit; font-weight: 600; }
.mn-bang tr.c-beo th { color: var(--beo-chu); font-weight: 600; }
.mn-bang tr.c-dam td.so, .mn-bang tr.c-beo td.so, .mn-bang tr.c-bot td.so, .mn-bang tr.c-xo td.so { color: var(--ink); font-weight: 600; }
.mn-bang th.c-dam { color: var(--dam); } .mn-bang th.c-beo { color: var(--beo-chu); } .mn-bang th.c-bot { color: var(--bot); } .mn-bang th.c-xo { color: var(--xo); }
.mn-bang td.c-dam { color: var(--dam); } .mn-bang td.c-beo { color: var(--beo-chu); } .mn-bang td.c-bot { color: var(--bot); } .mn-bang td.c-xo { color: var(--xo); }
.mn-bang .stt { width: 1%; color: var(--ink-3); text-align: right; }
.mn-bang .ma { color: var(--ink-3); font-size: var(--xxs); }
.mn-bang tr.chinh > * { font-weight: 600; background: color-mix(in srgb, var(--link) 8%, transparent); }
.mn-bang tr.chinh td.so { color: var(--ink); }
.mn-chi-nl { text-align: left; font-size: var(--xxs); }
.mn-ban { margin-top: var(--s4); max-width: 1100px; }
.mn-ban__td { font-size: var(--sm); color: var(--ink-2); margin: 0 0 var(--s2); max-width: 90ch; }
.mn-ban__td .so { color: var(--ink); font-weight: 600; }
.mn-ban__khung { width: fit-content; max-width: 100%; min-width: min(100%, 360px); }
.mn-ban__khung thead th { position: sticky; top: calc(var(--cao-dinh) + 38px); z-index: 1; }
.mn-ban:not(.mn-ban--mo) .mn-bang--ban tbody tr:nth-child(n+6) { display: none; }
.mn-ban__them { display: flex; align-items: center; gap: 6px; margin-top: var(--s2); padding: 6px var(--s3); border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-2); color: var(--link); font: 500 var(--xs) var(--f-body); cursor: pointer; }
.mn-ban__khung .mn-bang tr.chinh > * { background: color-mix(in srgb, var(--link) 8%, var(--surface)); }
.mn-bang .huy-hieu { margin-left: var(--s1); font-weight: 500; }

/* biến thể */
.mn-ngan { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
.mn-ngan .ngan { max-width: 780px; }
.mn-ngan .ds-muc li { grid-template-columns: minmax(0, 1fr) auto 56px; }
.mn-ngan .ds-muc .kcal { grid-column: 2; }
.mn-ngan .ds-muc .vach { grid-column: 3; }
.mn-ngan .ds-muc .phu { white-space: normal; }
.mn-ngan .ds-muc li[hidden] { display: none; }
.mn-loc { position: sticky; top: 0; z-index: 1; padding: 4px var(--s3); background: var(--surface); border-bottom: 1px solid var(--rule); }
.mn-loc input { width: 100%; font: inherit; font-size: var(--xs); color: var(--ink); background: var(--ground); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 4px 8px; }

@media (max-width: 899px) {
  .mn-bep { grid-row: auto; }
}