/* Breakpoint theo quyết định 8.3 của spec:
   desktop >= 1440 (mặc định) · laptop 1024-1439 · tablet 768-1023 · mobile < 768 */

/* ================= LAPTOP 1024–1439 ================= */
@media (max-width: 1439px) {
    :root { --gutter: var(--sp-40); }

    /* Lề 96px của khối đánh giá và bề rộng 767 của khối câu hỏi thường gặp là số
       đo cứng lấy từ bản present khổ 1920; dưới khổ đó thì quay về khung chung. */
    .testimonials > .container { width: min(100% - var(--gutter) * 2, var(--container)); }

    .hero-home { min-block-size: 720px; }
    .feature-grid { gap: var(--sp-40); }
    .site-footer__inner { grid-template-columns: 280px 1fr; gap: var(--sp-40); }
}

/* ================= TABLET 768–1023 ================= */
@media (max-width: 1023px) {
    :root { --gutter: var(--sp-20); }

    .site-header__nav,
    .site-header__actions { display: none; }
    .site-header__burger {
        display: grid; gap: 5px; margin-inline-start: auto; padding: var(--sp-8);
    }
    .site-header__burger span {
        inline-size: 24px; block-size: 1.5px; background: var(--text-primary); display: block;
    }

    /* Bảng menu trượt xuống dưới header. Mép trên phải khớp ĐÚNG chiều cao
       header của từng khổ (tablet 80 = 20 + 40 logo + 19 + 1 gạch; mobile 60 —
       đè lại ở khối < 768), để trước là 72 nên hở một dải nền trang ngay dưới
       thanh nâu. z-index 30 để phủ luôn thanh đặt bàn ghim đáy (z 20): cùng
       lớp thì thanh đứng sau trong DOM sẽ đè lên chân menu. */
    .mobile-nav {
        position: fixed; inset: 80px 0 0;
        background: var(--brand-2); z-index: 30;
        display: grid; align-content: start; gap: 0;
        padding: var(--sp-8) var(--sp-20) var(--sp-40);
        overflow-y: auto;
    }
    .mobile-nav[hidden] { display: none; }
    /* Mục menu là danh sách gọn theo cùng giọng với nav desktop (chữ hoa sẵn
       trong chuỗi, nâu --brand-4, cách chữ 1px) chứ không mượn cấp tiêu đề
       t-h4 20px đậm — cỡ đó làm bốn dòng chữ to nặng hơn cả tiêu đề trang. Mỗi
       mục là một hàng cao 56 ngăn bằng nét mảnh, dễ chạm và nhìn có nhịp. */
    .mobile-nav__link {
        display: block;
        padding-block: var(--sp-16);
        color: var(--brand-4);
        font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 1px;
        border-block-end: 1px solid color-mix(in srgb, var(--brand-4) 25%, transparent);
    }
    .mobile-nav__link:hover { color: var(--brand-1); }
    .mobile-nav > .btn {
        justify-content: center;
        margin-block-start: var(--sp-40);
        padding-block: var(--sp-12);
    }
    .mobile-nav__lang {
        display: flex; align-items: center; gap: var(--sp-12);
        margin-block-start: var(--sp-20);
        color: var(--text-secondary);
    }
    /* Bỏ đệm mặc định của <button> để chữ thẳng mép trái với các mục trên. */
    .mobile-nav__lang button { padding: 0; }

    /* Bố cục 2 cột → 1 cột. minmax(0, 1fr) thay vì 1fr để cột lưới
       không giữ min-width theo nội dung (input, select…) và tràn ngang. */
    .feature-grid,
    .about-name,
    .menu-set,
    .contact__card,
    .ticket__grid,
    .contact__grid,
    .ticket__summary { grid-template-columns: minmax(0, 1fr); }

    /* Độ lệch masonry (margin-block-start: 74%) chỉ có ý nghĩa khi hai cột
       nằm cạnh nhau; xếp chồng 1 cột thì đổi về khoảng cách thường. */
    .feature-col--space { margin-block-start: var(--sp-80); }
    /* Ảnh THỤT VÀO 40px mỗi bên (để hoạ tiết vòm poke ra ngoài góc ảnh) chỉ hợp
       khi hai cột đặt cạnh nhau và cột có bề rộng dư dả; xếp chồng 1 cột thì
       đo trên bản present mobile ảnh chạy SÁT mép cột, bằng đúng bề rộng tiêu
       đề/đoạn chữ bên dưới, không còn thụt vào. */
    .feature-col__photo { inline-size: 100%; }
    .contact__form { border-inline-start: none; border-block-start: 1px solid var(--border-default); }

    .dish-list,
    .post__body { columns: 1; }

    /* Đổi BIẾN chứ không đè grid-template-columns: quy tắc "hàng đầu chỉ một ô"
       tính bề rộng theo --branch-cols, đè thẳng cột sẽ làm ô đó sai bề rộng. */
    .branches__grid { --branch-cols: 2; }
    .blog-list__grid,
    .blog-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Bố cục 2 cột (lưới trái / giới thiệu phải) chỉ hợp ở desktop; hẹp hơn thì
       xếp chồng, chữ giới thiệu lên trước lưới. */
    .branches__inner {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "gioithieu" "luoi";
        row-gap: var(--sp-40);
    }
    .branches__figure { justify-self: center; }
    .blog-strip__newsletter { border-inline: none; padding-inline: 0; }

    .about-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Chân trang xếp một cột thì không còn gì để ngăn, mà hai vạch dọc lại neo
       cứng ở 390px nên đẩy rộng cả TRANG ra 430px — đúng nguồn tràn ngang ở khổ
       393 (đo bằng cách ẩn từng khối rồi so scrollWidth). */
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .site-footer__inner::before { content: none; }
    /* Đuôi vát của gạch chân tiêu đề thò ra 34px bên phải. Ở desktop nó nằm gọn
       trong khe giữa hai cột, nhưng một cột thì không còn khe — phải chừa đúng
       34px lề phải, nếu không nó đẩy rộng cả trang thêm 29px. */
    .site-footer__heading { margin-inline-end: 34px; }
    .site-footer__cta { grid-column: 1; justify-self: start; }
    .site-footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }

    /* Mobile đổi thứ tự cột theo Figma: Giờ mở cửa → Liên hệ → Địa chỉ (desktop
       là Địa chỉ → Giờ → Liên hệ). Đánh số theo vị trí CỐ ĐỊNH trong markup,
       không phải theo nội dung — đừng đổi thứ tự <section> trong view. */
    .site-footer__col:nth-child(1) { order: 3; } /* Địa chỉ */
    .site-footer__col:nth-child(2) { order: 1; } /* Giờ mở cửa */
    .site-footer__col:nth-child(3) { order: 2; } /* Liên hệ */

    .post__figures { grid-template-columns: minmax(0, 1fr); }
    .post__thumb { display: none; }

    /* Hero 1152 là số của khung 1920; khổ này thu lại cho cân (Figma không có
       khung tablet riêng — khung mobile 393 cho hero 367, xem khối dưới). */
    .hero-reservation { min-block-size: 720px; }
    .ticket:not(.ticket--done) {
        margin-block-start: -160px;
    }
    .ticket {
        /* Ngăn track lưới ẩn giãn theo nội dung không co (giờ, nút slot…),
           tránh tràn ngang ở màn hẹp. */
        grid-template-columns: minmax(0, 1fr);
    }
    .ticket__grid { column-gap: var(--sp-40); }
}

/* ================= MOBILE < 768 ================= */
@media (max-width: 767px) {
    /* Ảnh món ăn theo mùa thứ hai (mon-an-mua.jpg) cùng hoạ tiết vòm phía trên
       nó bị ẩn hẳn trên mobile theo yêu cầu — không ảnh hưởng desktop/tablet. */
    .feature-col--menu .feature-col__motif-wrap:last-of-type,
    .feature-col--menu .feature-col__photo:last-of-type {
        display: none;
    }

    /* "Đặt bàn tại nhà hàng" chỉ hiện trên mobile — bật lại link đã ẩn mặc
       định trong home.css. */
    .feature-col--space__cta-mobile { display: inline-flex; }

    /* ---- Header mobile (Figma node 4029:43833, cao 60) ----
       Khác hẳn desktop: thanh NÂU ĐẶC chiếm chỗ thật (không đè lên hero),
       hamburger bên TRÁI, logo chỉ còn biểu tượng nhà canh giữa, mã ngôn ngữ
       bên phải, KHÔNG có nút "Đặt bàn". */
    .site-header { position: static; background: var(--brand-4); }
    .site-header__inner {
        position: relative;
        min-block-size: 60px; padding-block: 0; gap: 0;
        border-block-end: none;
    }
    .site-header__burger { order: -1; margin-inline: 0; padding-inline-start: 0; }
    .site-header__burger span { background: var(--brand-2); }

    .site-header__logo {
        position: absolute; inset-inline-start: 50%; translate: -50% 0;
        display: grid; place-items: center;
    }
    .site-header__logo--desktop { display: none; }
    /* Cắt lấy phần biểu tượng bên trái của file logo 88x32 — Figma chỉ dùng
       hình ngôi nhà, không kèm chữ "CƠM LỆ". */
    .site-header__logo--mobile {
        display: block;
        inline-size: 34px; block-size: 34px;
        object-fit: cover; object-position: left center;
    }

    .site-header__actions { display: flex; margin-inline-start: auto; }
    .site-header__cta { display: none; }
    /* Header mobile cao 60 nên bảng menu bắt đầu từ đúng 60. Mã ngôn ngữ đã
       nằm sẵn trên thanh header ở khổ này, lặp lại trong bảng menu chỉ thừa. */
    .mobile-nav { inset-block-start: 60px; }
    .mobile-nav__lang { display: none; }
    .site-header__lang button { color: var(--brand-2); }
    .site-header__lang-full { display: none; }
    .site-header__lang-short { display: inline; }

    /* ---- Hero mobile (Figma node 4029:15172) ----
       Line-art phủ KÍN khung chứ không thu nhỏ nằm dưới đáy: với ảnh 1920x756
       trong khung 393 rộng thì object-fit:contain chỉ cao 149px, thành một dải
       mỏng lạc lõng. Figma cắt ngang lấy phần giữa toà nhà. */
    .hero-home { min-block-size: 395px; padding-block-start: 65px; }
    .hero-home__backdrop {
        inset-block: 0; block-size: 100%;
        object-fit: cover; object-position: center bottom;
    }
    .hero-home__song { inline-size: 62px; margin-block-end: var(--sp-4); }
    .hero-home__figure { inline-size: 100px; margin-block-start: 61px; }

    /* ---- Thanh đặt bàn ghim đáy (Figma 4029:28871, 392x64) ---- */
    .mobile-bar {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 20;
        display: flex; align-items: center; justify-content: space-between;
        block-size: 64px; padding-inline: var(--sp-20);
        background: var(--brand-2); color: var(--brand-4);
    }
    .mobile-bar__label { font-size: 13px; line-height: 16px; }
    .mobile-bar__time { font-size: 20px; line-height: 28px; }
    /* Figma đo được 82x29 — nút thấp hơn nút thường (38px) nên phải ghim chiều
       cao chứ không để đệm dọc mặc định của .btn quyết định. */
    .mobile-bar__cta {
        inline-size: 82px; block-size: 29px;
        justify-content: center; padding: 0;
    }
    /* Chừa chỗ để thanh không che mất phần cuối chân trang. */
    .site-footer { padding-block-end: calc(var(--sp-80) + 64px); }
    /* Nút "Đặt bàn tại cơ sở" ở chân trang chỉ ẩn trên mobile — đã có sẵn
       .mobile-bar__cta ghim đáy màn hình làm việc đó rồi, khỏi lặp lại. */
    .site-footer__cta { display: none; }

    /* Đoạn dẫn thu về 20/28 trên mobile. Đo trên bản present: khối chữ rộng 347
       và line-height 28; chuỗi dòng đầu dựng bằng DFVN Migra cho ra 338px ở cỡ
       20 và 355px ở cỡ 21 — nên 20 là con số đúng, cũng trùng cấp t-body1 sẵn
       có. Giữ nguyên 28/36 như desktop thì chữ to gần gấp đôi, đoạn dẫn dài
       gấp ba lần thiết kế. */
    .intro-home .t-sapo { font-size: 20px; line-height: 28px; }

    /* ---- Hero trang Câu chuyện (Figma node 4029:7649, khối 361x408) ----
       Thứ tự trên mobile KHÁC desktop: câu dẫn lên TRÊN CÙNG, rồi minh hoạ, rồi
       hai khối chữ Hán nằm CẠNH NHAU. Cách dựng cũ ép cả hero về một cột nên
       北 và 家 xếp chồng, còn câu dẫn tụt xuống cuối. */
    /* Lưới hero nằm ở .hero-about__inner (desktop 360/1fr/360), câu dẫn là anh
       em của nó nên xếp thẳng bên dưới. */
    /* .hero-about__lead nằm SAU .hero-about__inner trong HTML (dùng chung với
       desktop), nhưng mobile Figma đặt câu dẫn lên TRÊN CÙNG — phải đổi bằng
       flex + order chứ tự bản thân thứ tự DOM không đổi được. */
    .hero-about { display: flex; flex-direction: column; padding-block: var(--sp-40); }
    .hero-about__inner {
        order: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "hinh hinh" "trai phai";
        gap: var(--sp-20) 20px;
    }
    /* grid-column: auto TỪNG đặt SAU grid-area: hinh trong cùng luật này, vô
       tình xoá mất phần "span cả 2 cột" mà named area vừa gán — khiến ảnh rơi
       về cột 1 (auto-placement một ô), không phải giữa cả khối như ý. */
    .hero-about__figure { grid-area: hinh; justify-self: center; inline-size: 164px; }
    .hero-about__side:first-child { grid-area: trai; justify-self: end; }
    .hero-about__side:last-child  { grid-area: phai; justify-self: start; }
    /* Hai khối rộng 135, cách nhau 20 (đo trên bản present: x=52 và x=207). */
    .hero-about__side { inline-size: 135px; margin-block-start: 0; }
    .hero-about__han { font-size: 44px; line-height: 48px; }
    .hero-about__label { gap: 4px; margin-block-start: var(--sp-8); font-size: 20px; line-height: 28px; }
    .hero-about__paren { font-size: 54px; }
    .hero-about__icon,
    .hero-about__side:nth-of-type(2) .hero-about__icon { inline-size: 44px; margin-block-start: var(--sp-8); }
    /* Bản present ngắt dòng sau "giữa" ("...giữa" / "dòng chảy đương đại."):
       đo được dòng 1 rộng 245.5, thêm "dòng" thành 289 — 270 nằm giữa hai mốc
       đó nên ép ngắt đúng chỗ; để tự nhiên (không giới hạn rộng) dòng 1 kéo
       dài đến tận "đương" mới xuống dòng, sai với thiết kế. */
    .hero-about__lead {
        order: 0; margin-block-start: 0; margin-block-end: var(--sp-20);
        font-size: 20px; line-height: 28px;
        max-inline-size: 270px; margin-inline: auto;
    }

    /* Tiêu đề "Bữa cơm mang tên mẹ" canh GIỮA và nằm trên đoạn chữ (desktop là
       hai cột: tiêu đề trái, chữ phải). */
    .about-name {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--sp-16);
        padding-block-start: var(--sp-40);
        text-align: center;
    }
    .about-name__title { font-size: 28px; line-height: 36px; }
    .about-name__body { text-align: start; font-size: 16px; line-height: 24px; }

    /* Figma mobile vẫn để hai thẻ CẠNH NHAU, chỉ thu nhỏ. Xếp chồng dọc như
       trước làm bát dưới trồi lên đè vào bát trên vì bát nằm tuyệt đối và cao
       hơn hẳn vòng tròn.
       Số đo trên bản present (khổ 393): vòng 113, bát 140 (124%), đỉnh bát ở
       88% chiều cao vòng, hai vòng cách nhau 45 nên hai bát còn hở 17. Bát thò
       xuống dưới đáy vòng 68px. */
    .meal-times__cards { gap: 45px; padding-block-end: 68px; }
    .meal-card { inline-size: 113px; }
    .meal-card img { inset-block-start: 88%; inline-size: 124%; margin-inline: -12%; }
    /* Nút kêu gọi cỡ lớn thu về 117x40 trên mobile (desktop 140x60). */
    .btn--lg { padding: 9px 31px; font-size: 13px; line-height: 20px; }

    /* .branches__grid KHÔNG nằm trong nhóm này: bản mobile Figma vẫn giữ 2 cột
       (38 riêng hàng đầu, rồi từng cặp), ép về 1 cột làm danh sách dài lê thê. */
    /* .about-stats cũng KHÔNG về một cột: bản mobile Figma xếp 2x2, mỗi ô rộng
       180 (x=16 và x=196, sát nhau không khe). Ép một cột thì dải số liệu dài
       gấp đôi thiết kế. */
    /* ---- Trang Blog, bản MOBILE (bản present node 4029:42597, khung 393x3528)
       — mọi con số dưới đây đo trên ảnh chụp bản present ở 2x rồi chia đôi, nên
       số lẻ là CỐ Ý. Mốc dọc đo được (mép chữ, không phải mép hộp dòng):

         0…60      header nâu đặc          429      nhãn chuyên mục thẻ 1
         87.5      chữ "Blog"              451.5    tiêu đề bài
         120…419.5 ảnh thẻ 1               487.5    trích dẫn (4 dòng × 24)
         597       ngày đăng               630      gạch ngăn cuối thẻ
         647       ảnh thẻ 2               1174     ảnh thẻ 3
         1702.5    dòng phân trang         1729…2004 thẻ "Nội dung đặc biệt"
         2020…2070 ô tìm kiếm              2090.5   nhãn "Chủ đề nổi bật"
         2118…2146 hàng thẻ chủ đề         2185     chân trang

       Mốc ngang: nội dung rộng 361 đặt ở x=16 — lề 16 chứ KHÔNG phải 20 như
       --gutter chung của mobile, nên phải đè riêng cho hai khối của trang này. */
    .blog-list.container,
    .blog-strip.container { width: calc(100% - 32px); }

    .blog-hero { padding-block: 22.5px 0; }
    .blog-list { padding-block: 9.5px 0; }

    /* Bản mobile KHÔNG có khối "featured" hai cột: bài mới nhất hiện y hệt các
       thẻ còn lại (ảnh trên, chuyên mục, tiêu đề, trích, ngày) và không có nút
       "Xem bài viết". Vì markup dùng chung với desktop nên phải kéo .blog-featured
       về đúng dáng .post-card bằng CSS. */
    .blog-list__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .blog-featured {
        grid-template-columns: minmax(0, 1fr);
        gap: 9.5px;
        padding-block-end: 13.5px;
        margin-block-end: 16px;
    }
    .blog-featured__cta { display: none; }
    .blog-featured__cover,
    .post-card__cover { aspect-ratio: 361 / 299.5; }
    .post-card__cover { margin-block-end: 9.5px; }
    .post-card { padding-block-end: 13.5px; }

    /* Cỡ chữ trong thẻ đo trên bản present: chuyên mục 13/20, tiêu đề 16/24 nét
       THƯỜNG (không đậm như t-h4), trích 14/24 nét mảnh, ngày 15/24. Bản dựng cũ
       thừa hưởng cỡ desktop (16/20/16/16) nên mỗi thẻ cao hơn thiết kế ~90px. */
    .post-card__category { font-size: 13px; line-height: 20px; }
    .blog-featured__title,
    .post-card__title {
        font-family: var(--font-body); font-weight: 400;
        font-size: 16px; line-height: 24px;
        margin-block: 0 9px;
    }
    /* Hai sắc xám ĐO ĐƯỢC trên bản present (lấy trung bình 40 điểm đậm nhất của
       nét chữ, ra xám trung tính nên là màu đặc chứ không phải --text-secondary
       pha trong suốt): trích #525252, ngày #7A7A7A — ngày nhạt hơn hẳn phần
       trích, khác bản dựng cũ để cả hai cùng --text-secondary (#3C3C3C). */
    .blog-featured__excerpt,
    .post-card__excerpt { font-size: 14px; line-height: 24px; color: #525252; }
    .blog-featured__date,
    .post-card__date {
        display: block; font-size: 15px; line-height: 24px;
        margin-block-start: 15px; color: #7A7A7A;
    }

    /* Mũi tên phân trang trên bản mobile là mũi tên NGẮN 12x10, không phải mũi
       tên dài 24 dùng ở ô tìm kiếm. */
    .pager { margin-block-start: 11px; gap: var(--sp-8); }
    .pager .icon-arrow {
        inline-size: 12px;
        -webkit-mask-image: url("/img/icon/short-arrow-right.svg");
        mask-image: url("/img/icon/short-arrow-right.svg");
    }

    /* ---- Dải cuối trang: thứ tự mobile là THẺ NỔI BẬT → ô tìm kiếm → chủ đề.
       Khối "Thư từ Cơm Lệ" không có trong bản mobile (chân trang đã có ô đăng ký
       thư rồi), và dải không còn gạch ngăn phía trên. ---- */
    .blog-strip {
        display: flex; flex-direction: column;
        border-block-start: none;
        padding-block: 9px 39px;
    }
    .blog-strip__featured { order: -1; }
    .blog-strip__newsletter { display: none; }

    .blog-strip__featured {
        margin-inline-start: 0;
        display: flex; flex-direction: column; align-items: flex-start;
        gap: var(--sp-8);
        /* Thẻ cao 275.5 với nhãn ghim sát mép trên và cụm chữ dồn xuống đáy —
           khoảng trống giữa hai phần là CỐ Ý trong bản present. */
        min-block-size: 275.5px;
    }
    .blog-strip__featured .chip--solid { margin-block-end: auto; }
    .blog-strip__featured .t-h4 { font-weight: 400; }
    .blog-strip__featured .t-caption:not(.chip) { font-size: 16px; line-height: 24px; }
    .blog-strip__featured__link {
        font-size: 14px; line-height: 20px; gap: 6px;
        margin-block-start: var(--sp-16);
    }
    .blog-strip__featured__link .icon-arrow {
        inline-size: 14px;
        -webkit-mask-image: url("/img/icon/short-arrow-right.svg");
        mask-image: url("/img/icon/short-arrow-right.svg");
    }

    .blog-strip__search { padding-inline-start: 0; padding-block-end: 0; margin-block-start: var(--sp-16); }
    .blog-strip__search form { inline-size: 100%; }
    .blog-strip__search input { padding-inline-start: var(--sp-12); }
    /* Mũi tên ô tìm kiếm trên bản present mobile rộng 23.5 nhưng CAO 18 — đầu mũi
       tên to gấp đôi file 24x10 dùng chung, nét 2px. Chỉ đổi ở khổ mobile vì bản
       desktop chưa đo lại. */
    .blog-strip__search .icon-arrow {
        block-size: 18px;
        -webkit-mask-image: url("/img/icon/long-arrow-right-lg.svg");
        mask-image: url("/img/icon/long-arrow-right-lg.svg");
    }
    /* Nhãn "Chủ đề nổi bật" trên bản present mobile là nâu đậm --brand-4, không
       phải đen như chữ thân bài. */
    .blog-strip__label { color: var(--brand-4); margin-block: 17.5px 6.5px; }
    .blog-strip__chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
    /* Thẻ chủ đề mobile cao 28 (4 + 20 + 4) chữ 13, đệm ngang 12; riêng nhãn
       "Nội dung đặc biệt" trên thẻ vàng chỉ đệm ngang 6 (đo: rộng 125 cho chuỗi
       rộng 113). */
    .chip { font-size: 13px; line-height: 20px; padding: var(--sp-4) var(--sp-12); }
    .chip--solid { padding-inline: 6px; }

    .about-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0; row-gap: 24px;
        padding-inline: 0; padding-block-start: var(--sp-40);
        text-align: center;
    }
    /* Ô số liệu thu về cấp tiêu đề mobile 28/36, nhãn 2 dòng x 20. */
    .about-stats .stat__value { font-size: 28px; line-height: 36px; }
    .about-stats .stat__label { margin-block-start: var(--sp-8); font-size: 13px; line-height: 20px; }

    .menu-tabs { padding-inline: var(--sp-12); }
    .menu-tabs__track { gap: var(--sp-20); }

    /* ---- Trang Đặt bàn, bản MOBILE (bản present node 4029:43342, khung
       393x3492) — mọi con số dưới đây đo trên ảnh chụp bản present ở 2x rồi
       chia đôi, nên số lẻ là CỐ Ý. Mốc dọc đo được:

         0…60    header nâu đặc      312   đỉnh phiếu (mép xé)
         60…427  hero                421   kẻ dưới đầu phiếu
         490 / 555 / 628 / 701  kẻ ngăn hàng biểu mẫu
         886…890 vạch 5px trên khối ghi chú
         991     kẻ trên dòng nhắc SMS
         1092…1141  nút "XÁC NHẬN ĐẶT BÀN"
         1188    đáy phiếu           1216  mép trên khối câu hỏi
         1561    dải vàng khối đánh giá    2150  chân trang

       Mốc ngang: phiếu và khối câu hỏi đều rộng 367 đặt ở x=14; nội dung trong
       phiếu thụt 16 (x=30…364.5). ---- */
    .hero-reservation { min-block-size: 367px; }
    .ticket:not(.ticket--done) {
        margin-block-start: -115px;
    }
    .ticket {
        width: min(100% - 26px, 767px);
        /* Đệm dọc 19 / 47 và đệm ngang 16 — KHÔNG phải 20 đều bốn phía. */
        padding: 19px 16px 47px;
        /* Vẫn giữ mép giấy xé, chỉ thấp hơn bản desktop: biên độ vết xé trên
           bản present mobile đo được 9 (trên) và 4.5 (dưới) chứ không phải
           25/12 như khổ 1920. Bản dựng cũ bỏ hẳn ảnh mép xé và thay bằng viền
           xám, khác hẳn thiết kế. */
        background:
            url("/img/reservation/nen-giay-rach.svg") top center / 100% 10px no-repeat,
            url("/img/reservation/nen-giay-rach-duoi.svg") bottom center / 100% 5px no-repeat,
            linear-gradient(#FFFDF9, #FFFDF9) top 9px center / 100% calc(100% - 14px) no-repeat;
        border: none;
    }
    /* Đầu phiếu vẫn là HAI CỘT như desktop (khối "2690 / MÃ PHIẾU" nằm bên
       phải), chỉ khác là canh theo ĐỈNH chứ không theo đáy. */
    .ticket__head {
        flex-direction: row; gap: var(--sp-20);
        padding: 0 0 22px;
    }
    .ticket__head > * { gap: 2px; }
    .ticket__code { text-align: end; align-self: flex-start; }
    .ticket__kicker, .ticket__sub,
    .ticket__code .t-subtitle { font-size: 10px; line-height: 14px; }
    .ticket__brand, .ticket__code .t-h2 { font-size: 28px; line-height: 36px; }

    .contact__card { background-image: none; border: 1px solid var(--border-default); }
    .contact__quote { padding: var(--sp-20); }
    .contact__form { padding: var(--sp-20); }

    /* Ô điểm số xuống hàng riêng (rộng 100% ép flex-wrap xuống dòng), còn mũi
       tên vẫn đứng hai bên băng thẻ đánh giá ở hàng dưới — không phải xếp
       CẢ BỐN phần tử thành một cột dọc (mũi tên nằm trên/dưới rời rạc sẽ sai
       so với bản present, vốn cho mũi tên kẹp hai bên thẻ y hệt desktop). */
    .testimonials__body { flex-wrap: wrap; }
    .testimonials__score { inline-size: 100%; }
    /* flex-basis mặc định "auto" khiến băng thẻ tính bề rộng theo NỘI DUNG (tổng
       4 thẻ ~1020px) khi xét xuống dòng, nên tự nó xuống dòng riêng, đẩy luôn
       mũi tên sau nó xuống dòng thứ ba. Ép basis về 0 rồi flex-grow lấp phần
       còn lại thì băng thẻ mới đứng chung dòng với hai mũi tên như bản present. */
    .testimonials__track { flex: 1 1 0%; }
    /* Ô điểm số mobile KHÔNG có dòng "Dựa trên X đánh giá" — đo trên ảnh chụp
       bản present, khung đóng lại ngay sau 5 sao. */
    .testimonials__score p:last-child { display: none; }
    /* Thẻ đánh giá mobile chừa khoảng cách rõ giữa phần vai trò và nội dung
       (bản present có một dòng trắng ở giữa), khác cách dựng chung hiện tại
       đang để hai đoạn dính sát nhau. */
    .review-card__content { margin-block-start: var(--sp-16); }

    .post__quote { text-align: start; }

    /* .timeline__lead vẫn thừa hưởng nguyên cỡ chữ 20px của desktop (không có
       khối mobile riêng cho tiêu đề timeline) — dòng 2 sau <br/> ("nhưng điều
       chúng tôi muốn giữ vẫn vẹn nguyên.") vừa đủ dài để tự vỡ thêm thành 2
       dòng trên khổ hẹp mobile, ra 3 dòng thay vì 2 như bản present. Thu nhỏ
       chữ để dòng 2 vừa gọn trong một dòng. */
    .timeline__lead { font-size: 16px; line-height: 24px; }

    /* Mobile: timeline về MỘT cột, bỏ trục giữa và bỏ so le — bản mobile Figma
       (node 4029:7622/7632, mọi mốc cùng x) cũng xếp thẳng một hàng dọc. */
    .timeline__track::before { content: none; }
    /* Hoạ tiết vảy ngói KHÔNG xuất hiện trên bản mobile Figma (node 4029:7646)
       — chỉ nền kem trơn suốt cả khối timeline. */
    .timeline::before { display: none; }
    .timeline__year,
    .timeline__year:nth-child(odd),
    .timeline__year:nth-child(even) {
        inline-size: 100%; justify-self: stretch;
        margin-inline-start: 0; padding-inline: 0;
        /* Mỗi mốc có RIÊNG một đoạn viền đứt nét bên trái; các đoạn nối liền
           nhau (row-gap gần như 0) tạo thành một trục dọc chạy suốt timeline,
           kèm ô vuông nhỏ đánh dấu ngay đầu mỗi năm — đúng bản present mobile. */
        position: relative;
        padding-inline-start: 20px;
        border-inline-start: 1px dashed var(--brand-1);
    }
    .timeline__year-label { position: relative; }
    .timeline__year-label::before {
        content: ""; position: absolute;
        inset-inline-start: -24.5px; inset-block-start: 20px;
        inline-size: 9px; block-size: 9px;
        background: var(--brand-1);
    }
    .timeline__year-label,
    .timeline__year:nth-child(even) .timeline__year-label {
        inline-size: auto; text-align: start;
        font-size: 56px; line-height: 64px;
    }
    /* Cột nội dung rộng 345, canh giữa màn 393 (Figma đặt ở x=36 nhưng lề phải
       chỉ còn 12 — ở đây chia đều 24/24 cho cân). */
    .timeline__track { width: 345px; }
    .milestone,
    .timeline__year:nth-child(odd) .milestone { inline-size: 100%; max-inline-size: 100%; margin-inline-start: 0; }
    /* Ảnh trải hết cột và GIỮ TỈ LỆ GỐC, không ép khung: bản mobile Figma cho
       ảnh 345x249, 345x384, 200x300 — mỗi tấm một tỉ lệ khác nhau, ép về
       659/409 là cắt cụt. */
    .milestone__photo,
    .timeline__year:nth-child(odd) .milestone__photo,
    .timeline__year:nth-child(even) .milestone__photo,
    .timeline__year:first-child .milestone__photo {
        block-size: auto; inline-size: 100%; aspect-ratio: auto;
        margin-block: var(--sp-16);
    }
}

/* ================= TRANG THỰC ĐƠN =================
   Figma CÓ khung mobile riêng: node 4029:43029 "Mobile/Thực đơn", 393x4081
   (chú thích cũ ở đây ghi chỉ có khung desktop là sai). Phần HERO dưới đây đo
   trực tiếp từ khung đó; phần THÂN trang thì bản dump cắt mất các node con của
   Frame 269 nên vẫn là thu tỉ lệ — chỗ nào thu tỉ lệ đều ghi rõ.
   Số đo desktop nằm hết trong menu.css — đừng sửa ở đó để "chữa" mobile. */
@media (max-width: 1023px) {
    .hero-menu { padding-block: 160px 72px; }
    .hero-menu__frame { inset-block-start: 68px; inline-size: min(560px, 88vw); }
    .hero-menu__title { font-size: 48px; line-height: 52px; }
    .hero-menu__lead { margin-block-start: 110px; font-size: 16px; line-height: 24px; }

    .menu-tabs__track { justify-content: flex-start; gap: var(--sp-40); padding-inline: var(--sp-20); }
    .menu-tabs__item { padding-block: var(--sp-20); font-size: 14px; }

    .menu-frame { padding: var(--sp-40) var(--sp-20) var(--sp-80); }
    .menu-set { row-gap: var(--sp-40); }
    .menu-set__aside { margin-block-start: 0; }
    .menu-set__actions { gap: var(--sp-40); margin-block-start: var(--sp-20); }

    /* dish-list đã về 1 cột ở khối tablet phía trên; bỏ nốt phần đệm ngang và
       giới hạn bề rộng mô tả vốn chỉ đúng cho lưới hai cột 620px. */
    .dish-list { padding-inline: 0; }
    .dish__desc { max-inline-size: none; }

    .menu-note { margin-block-start: var(--sp-80); }
    /* Toạ độ chữ trong khung quạt đổi sang PHẦN TRĂM để bám theo ảnh khi ảnh
       co lại: 96/454 ≈ 21%, 440/857 ≈ 51%. */
    .menu-note__body {
        inset-block-start: 21%; max-inline-size: 51%;
        font-size: 14px; line-height: 20px;
    }
    .menu-note__body p + p { margin-block-start: var(--sp-8); }
}

@media (max-width: 767px) {
    /* ---- Trang Thực đơn, bản MOBILE (Figma present node 4029:43029) ----
       Khung thiết kế 393 x 4081. Mọi con số dưới đây đo trực tiếp trên bản
       present chụp ở 2x rồi chia đôi, nên số lẻ là CỐ Ý. Mốc dọc đo được
       (tính từ đỉnh trang): header 0–60 · hero 60–527.5 · dải danh mục
       527.5–599.5 · giấy 599.5–2738.5 · chân trang 2738.5–4081.

       Ba điểm KHÁC HẢN cách dựng cũ (vốn thu tỉ lệ từ desktop vì chưa có
       bản mobile của thân trang):
         - KHÔNG còn hai vạch dọc ở mép nội dung; lề trái/phải chỉ còn 16.
         - "Đặt món" là NÚT VIỀN nằm cạnh "Đặt bàn" (desktop là chữ trơn).
         - Khung quạt cuối trang VẪN GIỮ, chữ nằm trong khung. */

    /* Hero cao 467.5. Khung trang trí là ảnh tuyệt đối nên đệm trên chỉ chi
       phối tiêu đề. */
    .hero-menu { padding-block: 127px 40px; padding-inline: var(--sp-16); }
    /* khung-thuc-don.svg khổ 726x455, nét vẽ nằm ở 76…652 x 63…392. Ảnh rộng
       387 thì nét vẽ rơi vào 43.5…350.5 x 133.5…309 — khớp bản present. */
    .hero-menu__frame { inset-block-start: 40px; inline-size: 387px; max-inline-size: 100%; }
    .hero-menu__title { font-size: 28px; line-height: 36px; }
    .hero-menu__lead {
        margin-block-start: 85px;
        max-inline-size: 361px; margin-inline: auto;
        font-size: 16px; line-height: 24px;
    }
    /* Chỗ ngắt dòng cứng trong view là của khổ 1920; ở 361px phải để chữ tự
       xuống dòng, bản present cũng ra đúng sáu dòng. */
    .hero-menu__lead br { display: none; }

    /* Dải danh mục cao 72 = 1 viền + 70 + 1 viền, không có vạch dọc. */
    .menu-tabs { padding-inline: 0; }
    .menu-tabs__inner { inline-size: 100%; border-inline: none; }
    .menu-tabs__track { justify-content: flex-start; gap: 24px; padding-inline: var(--sp-16); }
    .menu-tabs__item {
        padding-block: 26px 24px;
        font-size: 12px; line-height: 20px; letter-spacing: normal;
    }
    .menu-tabs__arrow { display: none; }

    /* Khung nội dung: bỏ vạch dọc, lề 16, đệm dưới 38.5 để mép giấy dừng ở
       2738.5 ngay dưới khung quạt. */
    .menu-frame { inline-size: 100%; padding: 18px var(--sp-16) 38.5px; border-inline: none; }

    /* Đầu mục: tên mâm 20/28, giá cùng cỡ, phụ đề 16/28, mô tả 14/24. */
    .menu-set { row-gap: 0; }
    .menu-set__name { font-size: 20px; line-height: 28px; }
    .menu-set__price { font-size: 20px; line-height: 28px; }
    .menu-set__subtitle {
        margin-block-start: 7px;
        font-size: 16px; line-height: 24px; letter-spacing: normal;
    }
    .menu-set__illustration { inline-size: 100px; margin-block-start: 14px; }
    .menu-set__pdf { margin-block-start: 17px; font-size: 13px; line-height: 20px; }
    .menu-set__aside { margin-block-start: 14px; font-size: 14px; line-height: 24px; }
    /* Dong dau doan mo ta trong ban present rong 358, vua khit trong 361; cung
       chuoi do trinh duyet dung ra 362 nen bi day xuong thanh sau dong thay vi
       nam. Bot 0.01em de giu dung nam dong nhu thiet ke. */
    .menu-set__desc { letter-spacing: -.01em; }
    /* Ban mobile gop "Thuc don mam com... khach." va "Phi phuc vu..." vao mot
       doan chay lien; chi giu ngat dong sau "...an uong rieng." */
    .menu-set__desc span + span { display: inline; }

    /* Hai nút chia đôi bề ngang, khe 20. Khối nâu đặc cao 45, nút viền cao 41
       và canh giữa — hai đường kẻ nhìn thấy (vạch kem của nút đặc và viền nâu
       của nút rỗng) vì thế nằm trùng nhau đúng như bản present. */
    .menu-set__actions {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center; gap: 20px; margin-block-start: 28px;
    }
    .menu-set__actions .btn--solid {
        inline-size: auto; block-size: 45px;
        font-size: 15px; line-height: 20px;
        /* Vạch kem THỤT VÀO 2px so với mép khối nâu, không phải viền vàng sát
           mép như nút dùng chung. */
        border: none;
        box-shadow: inset 0 0 0 2px var(--brand-4), inset 0 0 0 3px var(--brand-2);
    }
    .menu-set__link {
        display: flex; align-items: center; justify-content: center;
        block-size: 41px;
        border: 1px solid var(--brand-4);
        font-size: 15px; line-height: 20px;
    }

    /* Danh sách món: mỗi món cao 201 (vạch → vạch). */
    .dish-list { margin-block-start: 40px; padding: 0; }
    .dish { padding-block: 15.5px 17px; }
    .dish__number { inline-size: 46px; block-size: 28px; font-size: 13px; line-height: 16px; }
    .dish__head { margin-block-start: 11px; }
    /* Ten mon trong ban present thut vao 3.5 so voi vien so thu tu. */
    .dish__name { padding-inline-start: 3.5px; font-size: 15px; line-height: 24px; letter-spacing: normal; }
    .dish__price { font-size: 20px; line-height: 24px; }
    .dish__desc { max-inline-size: none; margin-block-start: 8.5px; font-size: 14px; line-height: 24px; }

    /* Khung quạt: khung-quat.svg khổ 858x455, nét vẽ 855x454 tự điểm (2,1).
       Ảnh rộng 354 thì nét vẽ rơi vào 20…374 x cao 187 — khớp bản present. */
    .menu-note { margin-block-start: 39px; }
    .menu-note__frame { display: block; inline-size: 354px; margin-inline: auto; }
    .menu-note__body {
        position: absolute; inset-block-start: 28px; inset-inline: 0;
        max-inline-size: 256px; margin-inline: auto;
        font-size: 12px; line-height: 14px;
    }
    .menu-note__body br { display: none; }
    /* Dong dau (mot dong, rong 246) can 256; hai doan sau trong ban present
       chi rong toi da 182 nen phai hep hon, khong thi gop thanh it dong hon. */
    .menu-note__body p + p { max-inline-size: 182px; margin-inline: auto; margin-block-start: 4px; }
}

/* ---- Trang Câu chuyện: khổ tablet (768–1023) ----
   Số đo desktop trong about.css bám khung 1920; ở khổ hẹp hơn phải thu lại,
   nếu không riêng minh hoạ hero 650px và ảnh mốc 616px đã đủ làm tràn ngang.

   PHẢI có min-width: thiếu chặn dưới thì khối này cũng khớp cả khổ mobile
   (<768), và vì nằm SAU khối mobile thật (max-width:767 ở trên) trong file
   nên nó đè mất toàn bộ số đo mobile riêng của hero-about/about-name/
   about-stats/timeline — ví dụ câu dẫn hero bị đẩy về 22px thay vì 20px. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-about { padding-block-start: 80px; }
    .hero-about__figure { inline-size: min(650px, 44vw); }
    .hero-about__side { margin-block-start: 40px; }
    .hero-about__han { font-size: 48px; line-height: 52px; }
    .hero-about__label { font-size: 28px; line-height: 40px; gap: 6px; margin-block-start: 16px; }
    .hero-about__paren { font-size: 76px; }
    .hero-about__icon,
    .hero-about__side:nth-of-type(2) .hero-about__icon { inline-size: 88px; margin-block-start: 12px; }
    .hero-about__lead { margin-block-start: 40px; font-size: 22px; line-height: 30px; }

    .about-name { padding-block-start: 80px; grid-template-columns: 200px minmax(0, 1fr); column-gap: 32px; }
    .about-name__title { font-size: 36px; line-height: 44px; }
    .about-name__body { font-size: 17px; line-height: 26px; }

    .about-stats { padding-inline: 0; padding-block-start: 48px; }
    .stat__value { font-size: 44px; line-height: 52px; }
    .stat__label { margin-block-start: 12px; font-size: 16px; line-height: 24px; }

    .timeline { padding-block: 140px 80px; }
    .timeline__arc { inset-block-start: 60px; block-size: 60px; }
    .timeline__title { font-size: 36px; line-height: 44px; gap: 16px; }
    .timeline__paren { font-size: 96px; }
    .timeline__lead { margin-block-start: 32px; font-size: 17px; line-height: 26px; }
    .timeline::before { inset-block-start: 380px; block-size: 560px; }
    .timeline__track { margin-block-start: 72px; row-gap: 48px; }
    .timeline__year-label { font-size: 88px; line-height: 96px; }
    .timeline__year:nth-child(even) .timeline__year-label { inline-size: auto; }
    .milestone { inline-size: 100%; }
    .timeline__year:nth-child(odd) .milestone__photo,
    .timeline__year:nth-child(even) .milestone__photo,
    .timeline__year:first-child .milestone__photo {
        inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2;
    }
}

/* ---- Bù cho các số đo CỨNG lấy từ bản present desktop 1920 ----
   Đợt dựng lại trang Đặt bàn theo bản present (node 4029:43139) thay hầu hết
   token spacing bằng số đo pixel thật. Những số đó chỉ đúng ở khung 1920: dưới
   1024 chúng làm hero cao gấp đôi màn hình, phiếu thụt lề 40 trong khung rộng
   367, và chân trang một cột vẫn bị ghim theo lưới hai hàng của desktop. Khối
   này trả các giá trị đó về mức hợp lý cho khổ hẹp. */
@media (max-width: 1023px) {
    .hero-reservation__body { padding-block-start: 80px; gap: var(--sp-20); }
    .hero-reservation__lead { font-size: 20px; line-height: 28px; }
    .hero-reservation__cta { margin-block-start: 0; }

    .testimonials { padding-block: var(--sp-80); }
    .testimonials__lead { margin-block-start: var(--sp-16); }
    .testimonials__body { margin-block-start: var(--sp-40); }
    .testimonials__score { inline-size: 200px; }
    .review-card { inline-size: 260px; block-size: auto; }

    /* Lưới hai hàng của chân trang (nút "Đặt bàn tại cơ sở" ghim đáy cột phải)
       chỉ có nghĩa khi còn hai cột. */
    .site-footer { padding-block: var(--sp-80); }
    .site-footer__inner { grid-template-rows: none; row-gap: var(--sp-40); }
    .site-footer__brand,
    .site-footer__cols,
    .site-footer__cta { grid-row: auto; align-self: auto; }
    .site-footer__cols { grid-column: auto; }
    .newsletter { margin-block-start: var(--sp-40); }
}

@media (max-width: 767px) {
    /* Hero mobile chỉ cao 367 và phiếu đè lên 115, tức chữ phải kết thúc trước
       y=252. Số đo desktop (đệm 233, chữ dẫn 32) cho khối chữ cao ~300 nên phiếu
       chồng lên chính đoạn chữ đó. */
    /* Bản present mobile: tiêu đề y=100…130, câu dẫn hai dòng 144.5…186 (bước
       24), nút 208…252.5 rộng 120. Câu dẫn cỡ 16 nét Light và ngắt sau chữ
       "như" — chặn bề rộng 345 để ép đúng chỗ ngắt đó, để tự do thì "về" rơi
       xuống một mình. */
    .hero-reservation__body { padding-block-start: 40px; gap: 5px; }
    .hero-reservation__lead {
        font-size: 16px; line-height: 24px;
        max-inline-size: 345px; margin-inline: auto;
    }
    .hero-reservation__cta { inline-size: 120px; block-size: 45px; font-size: 14px; margin-block-start: 14px; }

    /* Nội dung trong phiếu thụt đúng 16 (bằng đệm ngang của chính .ticket), nên
       mọi lề trong 40/24 của bản desktop về 0. */
    .ticket__errors,
    .ticket__grid > .field,
    .slots,
    .ticket > .field--wide,
    .ticket__foot { padding-inline: 0; }

    /* Lưới biểu mẫu mobile: HỌ VÀ TÊN và SỐ ĐIỆN THOẠI chiếm trọn bề ngang, còn
       NGÀY | SỐ KHÁCH vẫn đứng CẠNH NHAU chia đôi phiếu (vạch dọc rơi đúng tâm
       phiếu x=197.5). Bản dựng cũ xếp cả năm ô thành một cột nên phiếu dài thêm
       cả trăm px và khác hẳn bản present. */
    /* column-gap phải về 0: khối tablet phía trên đặt 40, mà vạch dọc giữa NGÀY
       và SỐ KHÁCH là VIỀN của ô bên trái nên khe 40 đẩy nó lệch khỏi tâm phiếu
       (x=177 thay vì 197.5), đồng thời cắt đứt kẻ ngăn hàng thành hai đoạn. */
    .ticket__grid { grid-template-columns: 1fr 1fr; column-gap: 0; }
    .ticket__grid > .field:nth-child(1),
    .ticket__grid > .field:nth-child(2) { grid-column: 1 / -1; }
    .ticket__grid > .field { padding: 11px 0 9px; gap: 8px; }
    /* Luật hai cột của desktop (:nth-child(odd):not(.field--wide)) có độ ưu tiên
       0-4-0, cao hơn ".ticket__grid > .field" nên KHÔNG ghi đè được bằng luật
       ngắn: ô HỌ VÀ TÊN vẫn dính viền dọc + đệm 40 bên phải dù đã trải hết hàng,
       còn ô SỐ ĐIỆN THOẠI bị thụt vào 40. Phải viết lại đúng dạng chọn đó. */
    .ticket__grid > .field:nth-child(odd):not(.field--wide) {
        padding-inline-end: 0; border-inline-end: none;
    }
    .ticket__grid > .field:nth-child(even):not(.field--wide) { padding-inline-start: 0; }
    .ticket__grid > .field:nth-child(3):not(.field--wide) {
        padding-inline-end: 16px;
        border-inline-end: 1px solid var(--brand-4);
    }
    .ticket__grid > .field:nth-child(4):not(.field--wide) { padding-inline-start: 16px; }
    .ticket .field__label { font-size: 10px; line-height: 14px; }
    .ticket .field input,
    .ticket .field select { font-size: 16px; line-height: 24px; }
    /* Ô ngày hẹp hơn hẳn ở khổ này (ô chỉ rộng 151) và chuỗi gợi ý mm/dd/yyyy
       của trình duyệt dài hơn giá trị thật, nên phải thu cỡ chữ lại kẻo bị cắt. */
    .ticket .field input[type="date"] {
        block-size: 27px; font-size: 14px;
        background-size: auto 16px; padding-inline-end: 20px;
    }
    .ticket .field select { background-size: 11px 6px; padding-inline-end: 18px; }

    /* Khối khung giờ: nhãn VIẾT HOA trên bản present mobile (desktop viết
       thường), và thẻ giờ xếp lưới 5 CỘT bằng nhau chứ không co theo chữ —
       13 thẻ rơi thành 5 / 5 / 3 đúng như bản present. */
    .slots { padding-block: 11px 20px; }
    .slots__legend { font-size: 10px; line-height: 14px; text-transform: uppercase; }
    .slots__grid {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px 8px; margin-block-start: 24px;
    }
    /* Hàng theo buổi ăn chỉ có nghĩa ở desktop; mobile để cả 13 thẻ chảy chung
       một lưới nên các hàng con phải "tan" đi. */
    .slots__row { display: contents; }
    .slot {
        min-inline-size: 0; padding: 0; block-size: 28px;
        font-size: 12px; line-height: 26px; font-weight: 400;
    }

    .ticket > .field--wide {
        padding-block: 24px 20px;
        border-block-start-width: 5px; border-block-end-width: 1px;
    }
    .ticket > .field--wide .field__label { text-transform: uppercase; }
    .ticket__foot { padding-block-start: 21px; }
    .ticket__note { font-size: 11px; line-height: 16px; }
    .ticket__submit {
        margin: 64px 0 0; block-size: 50px;
        border-width: 5px; font-size: 13px;
    }

    /* Khối đánh giá mobile: ô điểm số và thẻ đánh giá XẾP CHỒNG, cả hai rộng 305
       canh giữa (đo được x=44…348.5), hai mũi tên nằm NGOÀI thẻ ở hai bên. Thứ tự
       trong HTML là [điểm số][‹][băng thẻ][›] nên không thể chỉ đổi sang cột —
       dùng lưới có vùng đặt tên để ô điểm số chiếm trọn hàng trên. */
    /* Khối này rộng 367 ở x=14 như phiếu và khối câu hỏi, không phải khung
       .container 353 của khổ tablet. */
    .testimonials { padding-block: 38px 40px; }
    .testimonials > .container { width: min(100% - 26px, var(--container)); }
    .testimonials__lead { margin-block-start: 0; font-size: 13px; line-height: 22px; }
    .testimonials__body {
        display: grid; align-items: stretch;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "diem diem diem" "truoc bang sau";
        gap: 13px 8px; margin-block-start: 25px;
    }
    .testimonials__score {
        grid-area: diem; inline-size: 305px; block-size: 109px;
        justify-self: center; padding: var(--sp-12);
    }
    .testimonials__arrow { display: grid; inline-size: 16px; padding: 0; margin: 0; font-size: 20px; }
    .testimonials__arrow[data-carousel-prev] { grid-area: truoc; }
    .testimonials__arrow[data-carousel-next] { grid-area: sau; }
    .testimonials__track { grid-area: bang; gap: 8px; }
    .review-card { inline-size: 100%; block-size: 240px; }

    /* Chân trang mobile: chữ nhỏ hơn hẳn bản dựng cũ — đo trên bản present ra
       câu giới thiệu 20/28 (không phải t-sapo 28/36) và mọi dòng nội dung 14/22
       (không phải 16/24). Câu giới thiệu cũng chỉ ngắt dòng MỘT lần (sau "mùa,")
       rồi để chữ tự chảy; giữ cả hai <br /> của desktop thì dòng 2 ngắn hơn hẳn
       bản present. */
    .site-footer__tagline { font-size: 20px; line-height: 28px; }
    .site-footer__tagline br:nth-of-type(2) { display: none; }
    .site-footer .t-body2 { font-size: 14px; line-height: 22px; }
    .site-footer__col li, .site-footer__col p { margin-block-end: 6px; }

    /* Khối câu hỏi thẳng cột với phiếu (rộng 367 ở x=14), mỗi hàng cao 48. */
    .faq { width: min(100% - 26px, 767px); padding-block: 30px 56px; }
    .faq__question { padding: 15px 8px 12px; font-size: 15px; line-height: 20px; }
    /* Dấu "+" cỡ 24 của desktop cao hơn dòng chữ 15px nên nó — chứ không phải
       câu hỏi — quyết định chiều cao hàng, làm hàng cao 52 thay vì 48. */
    .faq__sign { font-size: 15px; line-height: 20px; }
    .faq__answer { padding-inline: 8px; }
}