/* ---------------------------------------------------------------------------
   Trang Thực đơn — dựng theo bản present Figma (node 4029:42915).

   Số đo dưới đây đọc trực tiếp từ ảnh chụp bản present ở khổ 1920 rồi quy về
   pixel thiết kế, nên các con số lẻ (103, 171, 136…) là CỐ Ý, không phải làm
   tròn ẩu. Lưới của khung 1920:

     - nội dung rộng 1440, canh giữa  → mép trái 240, mép phải 1680
     - hai VẠCH DỌC 1px nằm đúng hai mép đó và chạy suốt phần nền giấy
     - trong hai vạch còn 40px đệm    → vùng chữ 280 … 1640
     - danh sách món chia đôi ở x=960 (đúng tâm khung) bằng một vạch dọc nữa
   --------------------------------------------------------------------------- */

/* Mọi nét kẻ mảnh trên trang (viền dải danh mục, hai vạch dọc, vạch ngăn cột,
   gạch dưới từng món) đều CÙNG một màu. Đọc trên bản present phóng 4x được
   #8F8271 — tức nâu --brand-4 pha 55% trên nền giấy. Đo ở ảnh 1x thì nét bị
   nhoè và ra nhạt hơn nhiều (~25%), đừng lấy con số đó. */
:root { --rule: color-mix(in srgb, var(--brand-4) 55%, transparent); }

/* ---- Hero ---- */
/* Cao đúng 798: 257.5 (đệm trên) + 144 (tiêu đề 2 dòng × 72) + 159 + 140 (5
   dòng dẫn × 28) + 97.5 (đệm dưới). Các mốc lấy từ vệt chữ đo trên bản present:
   đỉnh chữ HOA dòng 1 tiêu đề ở y=258.5, đỉnh dòng 1 đoạn dẫn ở y=562.5. */
.hero-menu {
    position: relative;
    background: var(--brand-1);
    color: var(--brand-2);
    text-align: center;
    padding-block: 257.5px 97.5px;
}
/* Khung trang trí BAO quanh tiêu đề. File khung-thuc-don.svg là bản XUẤT THẬT
   từ Figma (khổ 726×455, nét vẽ nằm ở 77…651 × 63…391). Đặt ảnh ở đúng khổ gốc
   rồi canh giữa thì nét vẽ rơi vào 674…1246 × 166…491 — khớp bản thiết kế.
   Vì thế KHÔNG được đổi inline-size sang con số "tròn" nào khác. */
.hero-menu__frame {
    position: absolute; inset-block-start: 103px; inset-inline: 0;
    margin-inline: auto; inline-size: 726px; max-inline-size: 100%;
}
.hero-menu__title {
    position: relative;
    /* Tiêu đề trong bản thiết kế là chữ NÂU SẪM trên nền vàng, không phải chữ
       kem như đoạn dẫn ngay dưới nó. */
    color: var(--brand-4);
    font-family: var(--font-display); font-weight: 400;
    font-size: 72px; line-height: 72px;
}
.hero-menu__lead {
    position: relative;
    margin-block-start: 159px;
    font-size: 20px; line-height: 28px;
}

/* ---- Dải danh mục ---- */
/* Cao 79 (77 + hai viền 1px). Nền phải là ĐÚNG tấm giấy đã làm sáng như thân
   trang bên dưới; để nguyên ảnh gốc thì dải này sẫm hơn hẳn phần thân và tạo ra
   một vệt phân cách nhìn thấy rõ ngay dưới dải danh mục. */
.menu-tabs {
    position: relative;
    border-block: 1px solid var(--rule);
}
.menu-tabs__inner {
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
}
/* Hai vạch dọc ở mép nội dung, khớp với vạch của thân trang bên dưới — nhưng
   KHÔNG chạm hai viền ngang trên/dưới của dải danh mục (dựng bằng border-inline
   trước đây thì vạch dọc cao hết khối, chạm thẳng vào cả hai viền, sai với ảnh
   thiết kế: vạch dọc dừng lại sớm hơn, chừa khoảng hở đều hai đầu). */
.menu-tabs__inner::before,
.menu-tabs__inner::after {
    content: "";
    position: absolute;
    inset-block: 20px;
    inline-size: 1px;
    background: var(--rule);
}
.menu-tabs__inner::before { inset-inline-start: 0; }
.menu-tabs__inner::after { inset-inline-end: 0; }
.menu-tabs__track {
    display: flex; justify-content: space-between; gap: var(--sp-40);
    padding-inline: 32px;
    overflow-x: auto; scrollbar-width: none;
}
.menu-tabs__track::-webkit-scrollbar { display: none; }
.menu-tabs__item {
    display: block; white-space: nowrap;
    padding-block: 33px 24px;
    font-size: 19px; line-height: 20px; letter-spacing: -.01em;
    color: color-mix(in srgb, var(--brand-4) 55%, transparent);
}
/* Mục đang mở chỉ ĐẬM MÀU hơn, bản thiết kế KHÔNG gạch chân. */
.menu-tabs__item.is-active { color: var(--brand-4); }
/* Mũi tên nằm NGOÀI vạch dọc, tâm cách vạch 30px. */
.menu-tabs__arrow {
    position: absolute; inset-block: 0;
    inline-size: 24px;
    display: grid; place-items: center;
    font-size: 20px; line-height: 1;
    color: var(--brand-4);
}
.menu-tabs__arrow--prev { inset-inline-end: calc(100% + 18px); }
.menu-tabs__arrow--next { inset-inline-start: calc(100% + 18px); }

/* ---- Tờ giấy: dải danh mục + thân trang dùng CHUNG một nền ----
   Bắt buộc là MỘT khối nền duy nhất chứ không phải hai nền rời nhau: mỗi nền
   `cover` tự cắt ảnh theo chiều cao của riêng nó, nên hai khối xếp cạnh nhau sẽ
   lệch vân giấy và để lộ một vệt ngang ngay dưới dải danh mục.

   /img/menu/nen-giay-thuc-don.jpg là phần LÕI cắt ra từ tấm giấy dùng chung
   /img/nen-giay.jpg (bỏ hai mép giấy quăn ở rìa trái/phải — trải hết bề ngang
   1920 thì hai nếp gấp tối đó lọt vào khung, thiết kế không có). Lớp kem phủ
   62% ở trên đưa tông giấy về đúng trung bình #F0E8DB đo được trên bản present.

   Chỉ áp cho trang Thực đơn; các khối dùng chung (đánh giá ở Home/Đặt bàn) vẫn
   dùng tấm giấy gốc như cũ. */
.menu-paper {
    position: relative;
    background: #F0E8DB url("/img/menu/nen-giay-thuc-don.jpg") center / cover;
}
.menu-paper::before {
    content: ""; position: absolute; inset: 0;
    background: #F6F1E6; opacity: .62; pointer-events: none;
}
.menu-paper > * { position: relative; }

.menu-body { position: relative; }

/* Khung nội dung: hai vạch dọc + 40px đệm bên trong. Đệm trên 70 để đỉnh chữ
   "Mâm tầm giao" rơi đúng y=965; đệm dưới 156 để mép giấy dừng ở y=2801. */
.menu-frame {
    position: relative;
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    padding: 81.5px 40px 156px;
}
/* Vạch dọc KHÔNG chạm viền dưới của dải danh mục ngay phía trên (giống cách
   dựng ở .menu-tabs__inner) — chừa 20px hở phía trên, kéo dài hết xuống đáy. */
.menu-frame::before,
.menu-frame::after {
    content: "";
    position: absolute;
    inset-block: 20px 0;
    inline-size: 1px;
    background: var(--rule);
}
.menu-frame::before { inset-inline-start: 0; }
.menu-frame::after { inset-inline-end: 0; }

.menu-body__empty { text-align: center; color: var(--text-secondary); }
.menu-body__empty a { color: var(--brand-4); }

/* ---- Đầu mục: tên mâm / giá / minh hoạ / mô tả / nút ---- */
/* Cột trái 631 (280…911), khoảng hở 145, cột phải 584 (1056…1640). Mép phải
   cột trái lấy theo vị trí chữ "295" đo được (kết thúc ở x=909), KHÔNG phải mép
   danh sách món ở x=920 — hai khối này lệch nhau 9px trong thiết kế. */
.menu-set {
    display: grid;
    grid-template-columns: minmax(0, 631fr) minmax(0, 584fr);
    column-gap: 145px;
}
.menu-set__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
/* Migra 400, KHÔNG phải 500: đặt cạnh bản present thì 500 đậm và tương phản
   nét hẳn lên, nhìn ra một kiểu chữ khác. Màu cũng là nâu --brand-4 chứ không
   phải màu chữ đen mặc định. */
.menu-set__name {
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 60px; letter-spacing: .015em;
    color: var(--brand-4);
}
.menu-set__price {
    justify-self: end;
    font-family: var(--font-display); font-weight: 400;
    font-size: 48px; line-height: 60px; letter-spacing: .015em;
    color: var(--status-error);
}
.menu-set__subtitle {
    grid-column: 1 / -1;
    margin-block-start: 6px;
    font-size: 20px; line-height: 28px; letter-spacing: 1px;
    color: var(--brand-4);
}
.menu-set__illustration {
    grid-column: 1 / -1; justify-self: start;
    inline-size: 176px; margin-block-start: 19px;
}
.menu-set__pdf {
    grid-column: 1 / -1; justify-self: start;
    margin-block-start: 26px;
    font-size: 16px; line-height: 24px;
    color: var(--brand-4); text-decoration: underline;
}

/* Cột phải bắt đầu cao hơn cột trái 4px — đo trên bản present. Cỡ chữ 19px:
   đo bề ngang dòng đầu (559px) và chiều cao vệt chữ (23px) trên bản present,
   18px cho ra 540/22. */
.menu-set__aside { margin-block-start: 4px; font-size: 21px; line-height: 28px; color: var(--brand-4); }
/* Mô tả xuống dòng theo đúng chỗ ngắt lưu trong dữ liệu (bản thiết kế tách
   "Thực đơn mâm cơm…" và "Phí phục vụ…" thành hai dòng riêng). */
.menu-set__desc span { display: block; }
.menu-set__actions { display: flex; align-items: center; gap: var(--sp-80); margin-block-start: 35.5px; }
/* Nút đặc đo được 204×56. "Đặt món" trong thiết kế là CHỮ TRƠN, không viền. */
.menu-set__actions .btn--solid {
    justify-content: center;
    inline-size: 204px; block-size: 56px;
    font-size: 16px; line-height: 24px;
}
.menu-set__link { font-size: 19px; line-height: 28px; color: var(--brand-4); }

/* ---- Danh sách món ---- */
/* border-block-start chạy hết bề ngang khung (280…1640) vì viền nằm ngoài đệm;
   còn nội dung hai cột lùi vào 20px nữa → 300…920 và 1000…1620. */
.dish-list {
    position: relative;
    margin-block-start: var(--sp-80);
    padding: 25px 20px 0;
    border-block-start: 1px solid var(--rule);
    columns: 2; column-gap: 80px;
    column-rule: 1px solid var(--rule);
}
.dish {
    break-inside: avoid;
    padding-block: 16px 17px;
    border-block-end: 1px solid var(--rule);
}
/* Số thứ tự nằm TRÊN tên món (thiết kế xếp dọc), không phải cột bên trái. */
.dish__number {
    display: grid; place-items: center;
    inline-size: 50px; block-size: 28px;
    border: 1px solid var(--brand-1); border-radius: var(--r-full);
    font-family: var(--font-display); font-size: 20px; line-height: 20px;
    color: var(--brand-4);
}
.dish__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-20);
    margin-block-start: 12.5px;
}
/* Đo trên bản present ở 4x: chiều cao chữ HOA của tên món là 14.25px, trong
   khi cỡ 16px chỉ cho 12px. Tên món là 19px và gần như KHÔNG giãn chữ — cách
   dựng cũ (16px + .08em) tình cờ ra đúng bề ngang 211px nhưng con chữ nhỏ hơn
   hẳn và thưa ra, nhìn khác hẳn thiết kế. */
.dish__name {
    font-size: 19px; line-height: 24px;
    color: var(--brand-4);
}
.dish__price {
    /* Giá món trong bản present đo được 28.2×14.0. Migra 19px cho đúng chiều
       cao ~14, còn bề ngang chỉ 24 — phần chênh là do GIÃN CHỮ (.105em), thấy
       rõ khoảng hở giữa 1-2-0 khi phóng to. */
    font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 24px;
    letter-spacing: .085em;
    color: var(--status-error);
}
.dish__desc {
    max-inline-size: 560px;
    margin-block-start: 7px;
    font-size: 16px; line-height: 24px; letter-spacing: -.01em;
    color: color-mix(in srgb, var(--brand-4) 75%, transparent);
}

/* ---- Ghi chú trong khung quạt ---- */
.menu-note { position: relative; margin-block-start: 140px; }
/* 858 = đúng bề rộng viewBox của khung quạt (853 nét vẽ + 2.5 chừa nét mỗi
   bên). Đo lại trên ảnh chụp phải ra nét vẽ 853×450 đúng như bản present. */
.menu-note__frame { display: block; inline-size: 858px; max-inline-size: 100%; margin-inline: auto; }
.menu-note__body {
    position: absolute; inset-block-start: 97px; inset-inline: 0;
    max-inline-size: 445px; margin-inline: auto;
    text-align: center;
    font-family: var(--font-display); font-style: italic; font-weight: 400;
    font-size: 20.5px; line-height: 28px;
    color: var(--brand-4);
}
.menu-note__body p + p { margin-block-start: 16px; }