/* Trang chủ — spec mục 6, node Figma 169:7449. */

/* ---- Hero ---- */
/* Toạ độ lấy từ Figma node 4029:14740 (Frame 147, hero 1920x900):
   tiêu đề ở y=229, minh hoạ gánh hàng 275x283 ở y=537. Trước đây dùng
   place-items:center nên cả hai bị dồn vào giữa, tiêu đề nằm TRÊN line-art
   thay vì đè lên nó như thiết kế. */
.hero-home {
    position: relative;
    min-block-size: 900px;
    display: grid;
    align-content: start; justify-items: center;
    /* Figma 4029:14741: hoạ tiết sóng bắt đầu ở y=160, tiêu đề ở y=229. */
    padding-block-start: 160px;
    /* Nền gần như phẳng, quanh đúng brand color 2 (#F0E8D7 — token đọc được từ
       chính node hero 4029:14740). Gradient 4 điểm dừng cũ lấy từ bản thiết kế
       CŨ (Frame 152) chìm xuống #CEB48D nâu đậm ở đáy, làm cả nửa dưới hero tối
       hẳn so với thiết kế mới vốn giữ màu kem suốt. */
    background: linear-gradient(180deg, #F4EEE2 0%, #F0E8D7 55%, #EBE1CD 100%);
    text-align: center;
    overflow: hidden;
}
/* Line-art là NỀN của khung hero trong Figma, không phải layer xếp trên/dưới —
   neo theo đáy để mái đình vòng lên phía sau tiêu đề. */
.hero-home__backdrop {
    /* Nhấc lên 40px: đo trên bản present Figma thì bậc thềm dưới cùng của nhà
       kết thúc ở y≈820 rồi còn khoảng kem tới đáy khung 900, chứ không chạm đáy.
       Kích thước line-art thì đã đúng, chỉ sai độ cao đặt. */
    position: absolute; inset-inline: 0; inset-block-end: 40px;
    inline-size: 100%; object-fit: contain; object-position: bottom;
    /* .5 làm line-art nhạt gần như mất hút; trong Figma từng viên ngói và ô cửa
       bức bàn đều đọc được rõ. */
    opacity: .9;
}
/* Hoạ tiết sóng: cao 49, cách tiêu đề 20px (Figma y=160, tiêu đề y=229). */
.hero-home__song { position: relative; margin-block-end: 20px; }
/* Bản present Figma dùng nâu --brand-4 cho tiêu đề hero, không phải đen
   --text-primary — đo lại theo ảnh chụp bản present. */
.hero-home__title { position: relative; color: var(--brand-4); }
.hero-home__figure {
    position: relative;
    inline-size: 275px;                 /* Figma: Icon-15 1 = 275x283 */
    margin-block-start: 168px;          /* y=537 trừ đáy tiêu đề y=369 */
}

/* ---- Dải kem → nâu ấm bọc đoạn dẫn và khối giờ cơm ---- */
/* Các điểm dừng đọc trực tiếp từ điểm ảnh của bản present, không ước lượng:
   dải giữ gần như nguyên màu kem nửa trên rồi mới sẫm dần về #CFB58E ở đáy —
   ngay trước khi sang khối nền nâu #412E1E. Bản 3 điểm dừng cũ sẫm đều từ đầu
   nên nửa trên đã ngả nâu trong khi Figma còn đang kem. */
.warm-band {
    background: linear-gradient(180deg,
        #F0E8D7 0%, #EBDFCB 50%, #E2D2B8 70%, #D4BE9B 90%, #CFB58E 100%);
}

/* ---- Đoạn dẫn ---- */
.intro-home { padding-block: var(--sp-80); text-align: center; }
/* 880 chứ không phải 720: đo trên bản present, đoạn dẫn trải rộng hơn nên chỉ
   xuống 6 dòng, bản 720px cũ ngắt thành 7 dòng và khối chữ cao hơn thiết kế. */
/* Bản present dùng nâu --brand-4 cho đoạn dẫn, không phải đen --text-primary
   thừa hưởng từ body — đo lại theo ảnh chụp bản present. */
.intro-home .t-sapo { max-inline-size: 880px; margin-inline: auto; color: var(--brand-4); }

/* ---- Cơm trưa / Cơm tối ---- */
/* Số đo lấy từ bản present Figma: vòng tròn 184, bát line-art rộng 292 (159%)
   nằm SAU vòng, đỉnh bát ở 85% chiều cao vòng — vòng chỉ chớm đè lên miệng bát
   chứ không lún sâu vào lòng bát. */
.meal-times { padding-block-end: var(--sp-120); text-align: center; }
/* Hai vòng cách 190: bát phủ ra ngoài vòng mỗi bên (292-184)/2 = 54, nên hai
   bát còn cách nhau 190 - 108 = 82 đúng như Figma.
   Bát nằm tuyệt đối nên không chiếm chỗ trong dòng chảy: nó thò xuống dưới đáy
   vòng 143px. Chừa đúng chừng đó, không thì nút "Đặt bàn" leo lên đè vào bát. */
.meal-times__cards {
    display: flex; justify-content: center; gap: 190px;
    padding-block-end: 143px;
}
.meal-card {
    position: relative;
    inline-size: 184px; aspect-ratio: 1;
    display: grid; align-content: center; gap: var(--sp-4);
}
/* Vòng tròn vẽ bằng ::before chứ không phải nền của .meal-card, để xếp được ba
   lớp: bát (0) → vòng tròn (1) → chữ (2). Cách cũ cho bát z-index:-1 chỉ chạy
   khi khối cha không có nền; từ khi bọc .warm-band có nền chuyển sắc thì bát
   tụt xuống dưới cả nền đó và biến mất hẳn. */
.meal-card::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: color-mix(in srgb, var(--brand-2) 70%, #fff);
    z-index: 1;
}
.meal-card img {
    position: absolute;
    inset-inline: 0; inset-block-start: 85%;
    inline-size: 159%; margin-inline: -29.5%;  /* bát rộng hơn vòng, canh giữa */
    /* Bắt buộc: quy tắc img { max-inline-size: 100% } trong base.css sẽ ghì
       159% về đúng bề rộng vòng, làm bát co lại bằng vòng và lệch hẳn sang trái. */
    max-inline-size: none;
    z-index: 0;
}
.meal-card p { position: relative; z-index: 2; color: var(--brand-4); }
/* Nút "Đặt bàn" của riêng khối này cũng đổi theo màu nâu --brand-4, khớp viền
   sẵn có của .btn--outline — không sửa .btn--outline dùng chung toàn site vì
   những chỗ khác (header, footer, trang Đặt bàn...) vẫn đang đúng với thiết kế.

   Quét điểm ảnh trên bản present: quanh khung viền nâu 140x60 (kích thước đã
   đo trong .btn--lg) còn một dải nền kem RỘNG THÊM 8px mỗi cạnh cùng màu
   --brand-2, tạo hiệu ứng khung kép — trước đây viền nâu nằm sát mép nút, mất
   hẳn dải kem này. box-shadow (không phải border/padding) vì nó vẽ dải màu
   phẳng đè lên nền chuyển sắc phía sau, đúng như đo được (dải kem không ăn
   theo gradient của .warm-band). */
.meal-times__cta { margin-block-start: var(--sp-80); color: var(--brand-4); box-shadow: 0 0 0 8px var(--brand-2); }

/* ---- Hai khối giới thiệu trên nền nâu ---- */
.feature-blocks { position: relative; background: var(--brand-4); color: var(--on-dark); padding-block: var(--sp-120); }
.feature-blocks__chopsticks { position: absolute; inset-block-start: var(--sp-40); inset-inline-end: 0; opacity: .35; }

/* Bố cục so le theo đúng toạ độ node 169:7449 trong Figma: đây KHÔNG phải hai
   hàng ảnh-chữ ngang mà là hai CỘT DỌC độc lập đặt cạnh nhau.
   - Cột trái (feature-col--menu, hẹp hơn): hoạ tiết → ảnh 1 → tiêu đề+chữ+link → ảnh 2.
   - Cột phải (feature-col--space, rộng hơn): ảnh lớn → tiêu đề+chữ+link, đẩy
     xuống bằng margin-block-start theo % (không phải px cố định) để tỉ lệ so le
     giữ nguyên khi khung co giãn — margin phần trăm luôn tính theo bề ngang.
   Tỉ lệ cột 648:920 lấy từ bề rộng hoạ tiết/ảnh thật trong Figma, giữ qua đơn vị fr. */
.feature-grid {
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
    display: grid;
    /* 580/780 đo trên bản present: cột trái 240..820, cột phải 900..1680 trong
       container 1440, cách nhau đúng 80. */
    grid-template-columns: 580fr 780fr;
    gap: var(--sp-80);
    align-items: start;
}
.feature-col { display: grid; gap: var(--sp-40); }
/* Figma đặt hoạ tiết vòm trên MỌI tấm ảnh của khối này, kèm một chấm tròn nhỏ
   ở đỉnh vòm — trước đây chỉ ảnh đầu tiên có, hai ảnh còn lại trống trơn. */
.feature-col__motif {
    position: relative;
    inline-size: 100%; block-size: auto; opacity: .8;
    /* Chừa ~20px giữa vòm và ảnh (đo trên bản present). Trước đây kéo âm cả 40
       nên vòm dính sát mép ảnh, hai đầu vòm đáp thẳng xuống ảnh và mất hẳn cảm
       giác mái che phía trên. */
    margin-block-end: calc(var(--sp-20) * -1);
}
.feature-col__motif-wrap { position: relative; display: grid; justify-items: center; }
.feature-col__motif-wrap::before {
    content: ""; inline-size: 7px; aspect-ratio: 1; border-radius: 50%;
    background: var(--brand-1); margin-block-end: var(--sp-8);
}
/* Figma căn đều hai biên cho đoạn mô tả, không phải căn trái. */
.feature-col__body p { text-align: justify; }
/* Ảnh THỤT VÀO mỗi bên so với bề rộng cột, còn hoạ tiết vòm thì trải trọn
   cột — nhờ vậy hai đầu vòm nhô ra ngoài hai góc trên của ảnh đúng như một mái
   che. Đo trên bản present (đối chiếu trực tiếp proto Figma, không ước lượng):
   cột trái 580 chứa ảnh 500 (thụt 40 mỗi bên), cột phải 780 chứa ảnh 720 (thụt
   CHỈ 30 mỗi bên) — hai cột thụt khác nhau, dùng chung -80 cho cả hai làm ảnh
   cột phải hẹp hơn thiết kế 20px. Để ảnh full cột như trước thì vòm và ảnh
   bằng nhau, mất hiệu ứng đó. */
.feature-col__photo {
    inline-size: calc(100% - var(--sp-40) * 2); margin-inline: auto;
    block-size: auto; object-fit: cover;
}
.feature-col--menu .feature-col__photo:first-of-type { aspect-ratio: 546 / 789; }
.feature-col--menu .feature-col__photo:last-of-type { aspect-ratio: 546 / 597; }
/* 74%, không phải 55%: đối chiếu trực tiếp proto Figma (quét điểm ảnh theo cột),
   đỉnh ảnh cột phải thấp hơn đỉnh ảnh cột trái đúng 578px ở khổ 1920, tức
   578/780 ≈ 74% bề rộng cột phải — 55% cũ làm cột phải trồi lên cao hơn thiết
   kế gần 150px. */
.feature-col--space { margin-block-start: 74%; }
.feature-col--space .feature-col__photo { inline-size: calc(100% - 60px); aspect-ratio: 920 / 1025; }
.feature-col__body h2 { color: var(--brand-1); margin-block-end: var(--sp-20); }
/* Quét điểm ảnh trên bản present: chữ và mũi tên của link này là màu vàng
   --brand-1 (giống viền gạch chân), không phải màu kem --on-dark thừa hưởng
   từ .feature-blocks — trước đây thiếu color riêng nên chữ bị sáng hơn thiết
   kế hẳn. */
/* Quét điểm ảnh: link này có gạch KHUNG CẢ TRÊN LẪN DƯỚI (hai đường kẻ ngang
   kẹp lấy chữ), không phải chỉ gạch chân — thiếu đường trên là sai bản present. */
.link-arrow {
    display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-20);
    inline-size: 100%; margin-block-start: var(--sp-40);
    padding-block: var(--sp-8);
    border-block: 1px solid var(--brand-1);
    color: var(--brand-1);
    font-size: 13px; line-height: 20px;
}
/* "Đặt bàn tại nhà hàng" chỉ xuất hiện trên mobile — desktop/tablet không có
   link này ở mục Phong cách không gian. Ẩn mặc định, mobile bật lại trong
   responsive.css. */
.feature-col--space__cta-mobile { display: none; }

/* ---- Chi nhánh ---- */
.branches {
    position: relative;
    background: var(--brand-4);
    color: var(--on-dark);
    padding-block: var(--sp-120);
}
/* chi-nhanh-bg.jpg nay là ĐÚNG tấm ảnh Figma dùng (mặt tiền Cơm Lệ 34 Nguyễn
   Trường Tộ chụp ban ngày), lấy từ tài nguyên bản present tải về. Trước đây
   dùng một tấm chụp ĐÊM của cùng quán nên tối gần gấp đôi thiết kế, phải bù
   bằng filter brightness(2) — nay không cần nữa.

   Ảnh nền vẫn tách sang lớp riêng để lớp phủ không làm chữ đổi màu theo. Lớp
   phủ #412E1E 60%: đo được min=30 p50=41 p90=72, còn Figma là 35/42/74. */
.branches::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: url("/img/home/chi-nhanh-bg.jpg") center / cover;
}
.branches::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: rgb(65 46 30 / .6);
}
.branches__inner { position: relative; z-index: 1; }
/* Figma node 4029:14897: chữ giới thiệu nằm ở CỘT PHẢI (không trải ngang trên
   đầu như cách dựng cũ), lưới chi nhánh chiếm cột trái. Minh hoạ người bán hàng
   nằm góc dưới phải, cạnh khối chữ. */
/* Đo trên bản present (khung 1920, container 1440 từ x=240): lưới chi nhánh
   chiếm x 250..920 (~680), khối chữ x 1280..1680 (400), giữa hai bên hở tới
   360px. Bản cũ chia 1.25fr/1fr cách nhau 80 nên khối chữ rộng gấp rưỡi thiết
   kế và hai bên dính sát nhau. */
.branches__inner {
    display: grid;
    grid-template-columns: minmax(0, 680fr) minmax(0, 400fr);
    grid-template-areas: "luoi gioithieu";
    column-gap: 360px;
    align-items: start;
    width: min(100% - var(--gutter) * 2, var(--container));
    margin-inline: auto;
}
.branches__intro {
    grid-area: gioithieu;
    display: grid; justify-items: start; gap: var(--sp-20);
    padding-block-start: var(--sp-40);
}
/* Figma căn đều hai biên cho đoạn này (thấy rõ ở khoảng cách chữ giãn đều). */
.branches__intro p { text-align: justify; }
.branches__grid {
    grid-area: luoi;
    /* Số cột khai báo qua biến để quy tắc "hàng đầu chỉ một ô" bên dưới tính
       được bề rộng một cột ở mọi khổ màn hình (desktop 3, hẹp hơn 2). */
    --branch-cols: 3;
    display: grid; grid-template-columns: repeat(var(--branch-cols), minmax(0, 1fr));
    gap: var(--sp-40) var(--sp-20);
    text-align: center;
}
/* Lưới xếp 1 + 3 + 3: cơ sở CUỐI trong dữ liệu (38 Lê Văn Lương) đứng riêng ở
   hàng đầu, cột đầu; rồi 34/111/135, rồi 164/255/109.

   Đã có một lần gỡ bỏ quy tắc này vì tưởng lưới chạy 3+3 — đó là do khung hình
   lúc đối chiếu cắt mất hàng đầu. Bản present cuộn đủ cho thấy hàng "38" nằm
   riêng. Làm bằng CSS chứ không đổi DisplayOrder: chân trang dùng chung dữ liệu
   đó và xếp theo thứ tự khác.

   Ô này phải CHIẾM TRỌN hàng đầu (grid-column: 1 / -1) rồi tự thu bề rộng về
   đúng một cột. Nếu chỉ đặt nó vào cột 1, ô kế tiếp sẽ lấp ngay vào các cột còn
   trống của hàng đầu và thành 2 ô (hoặc 3 ô) trên một hàng. */
.branches__grid > :last-child {
    order: -1;
    grid-column: 1 / -1;
    inline-size: calc(
        (100% - var(--sp-20) * (var(--branch-cols) - 1)) / var(--branch-cols));
}
.branch-card { padding-block-start: var(--sp-20); }
/* Hoạ tiết vòm phía trên mỗi số nhà (Figma Group 73-78, 240x33). */
.branch-card::before {
    content: ""; display: block; block-size: 33px; margin-block-end: var(--sp-8);
    background: url("/img/home/hoa-tiet-chi-nhanh.png") center bottom / contain no-repeat;
}
.branch-card__number { color: var(--brand-1); font-family: var(--font-display); }
.branches__figure {
    grid-area: gioithieu; align-self: end; justify-self: end;
    inline-size: 200px; margin-block-start: var(--sp-40);
}