dày hơn khối kết thúc bằng lưới thẻ hay ảnh đúng 16px, và khoảng
trắng giữa các khối lệch nhau dù padding đều nhau — lỗi rất khó nhìn ra bằng mắt. */
.section .wrap > :last-child,
.section .split > div > :last-child { margin-bottom: 0; }
.section-head { margin-bottom: 40px; }
.section-head h2 { margin: 0 0 8px; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.01em; }
.section-head .tagline { margin: 0; color: var(--muted); font-size: 15px; letter-spacing: .04em; }
.section-head .lead { margin: 12px 0 0; color: #CFCFCF; max-width: 620px; }
/* ---------- Lọc nhóm ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.pill {
/* 12px dọc để cả pill cao 44px — chuẩn vùng chạm tối thiểu trên điện thoại */
padding: 12px 18px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface-2);
color: var(--muted); font-size: 13px; letter-spacing: .03em;
transition: all .15s;
}
/* Đỏ đặc giống pill đang chọn: cùng một ngôn ngữ màu nên khách hiểu ngay
"cái này bấm được", thay vì chỉ sáng mờ lên gần như không thấy. */
.pill:hover { background: var(--red); border-color: var(--red); color: #FFFFFF; }
.pill--active { background: var(--red); border-color: var(--red); color: #FFFFFF; }
/* ---------- Thẻ món ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .15s, transform .15s;
}
.card:hover { border-color: #3A3A3A; transform: translateY(-2px); }
/* Ảnh phải absolute: thư mục thumbnail trộn cả khổ ngang 360x270 lẫn khổ dọc 270x360.
Nếu để img theo luồng thường thì `height:100%` không phân giải được trong flex item
chưa có chiều cao xác định → ảnh dọc đội thẻ cao lên và kéo giãn cả hàng. */
.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); flex: 0 0 auto; overflow: hidden; }
.card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Món chưa có ảnh: không để ô trống, dùng chữ cái đầu làm hoạ tiết */
.card-media--empty {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, var(--surface-2), #171717);
}
/* Phải dùng class riêng, KHÔNG dùng `.card-media--empty span`:
selector đó khớp luôn .card-price và .badge (đều là con) và vì
specificity cao hơn nên ghi đè cỡ chữ + màu của chúng. */
.card-media__initial {
font-size: 46px; font-weight: 700; color: #2E2E2E; letter-spacing: -.02em;
}
.card-price {
position: absolute; top: 10px; left: 10px;
background: var(--red); color: #FFFFFF;
padding: 5px 11px; border-radius: var(--radius);
font-size: 14px; font-weight: 700;
}
.card-badges { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.badge {
background: rgba(0,0,0,.72); border: 1px solid #3A3A3A;
padding: 3px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .04em;
}
.badge--signature { border-color: var(--red); color: var(--red-text); }
.card-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.card-body .pcs { font-size: 12px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; }
.card-body p { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.55; }
.card-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-foot .price-inline { font-size: 17px; font-weight: 700; color: var(--red-text); }
/* Ghi chú TRONG thẻ món ("Ask your server", "Sold out today") — nghiêng, 12px.
KHÔNG được để trần thành `.note`: nó nằm sau luật `.note` của trang ở trên nên sẽ
nuốt luôn mọi ghi chú cỡ 14px của trang Catering/Contact, biến thành chữ nghiêng
12px khó đọc trên nền tối. Đã từng như vậy cho tới 2026-08-13. */
.card-foot .note { font-size: 12px; color: var(--muted); font-style: italic; }
/* Lựa chọn của combo */
.opts { margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); }
.opts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
.opts dd { margin: 0 0 10px; font-size: 13px; color: #CFCFCF; }
.opts dd:last-child { margin-bottom: 0; }
/* ---------- Khối 2 cột ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Khung cố định 4:3 cho cả hai khối: ảnh nguồn có tỉ lệ khác nhau (3:2 và 4:3),
để nguyên thì hai đoạn cao thấp lệch nhau. */
/* Bản đồ nhúng: giữ đúng khung 4:3 như ảnh để hai cột .split vẫn cân nhau.
Nền surface-2 để lúc iframe chưa tải xong không hở ra một ô trắng giữa trang tối. */
.map-embed {
position: relative; aspect-ratio: 4 / 3; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.split img {
border-radius: var(--radius);
width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.split h2 { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 40px); }
.split p { color: #CFCFCF; }
.facts { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.facts li { display: flex; gap: 14px; align-items: baseline; font-size: 15px; }
/* Số thứ tự bằng chữ số bảng (tabular) để 01/02/03 thẳng cột */
.facts .k {
color: var(--red-text); font-weight: 700; font-size: 13px;
min-width: 20px; font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
/* Dấu đầu dòng: gạch ngắn đỏ thay cho dấu chấm giữa mờ tịt, lệch hàng */
.facts .k--dash {
min-width: 20px; height: 2px; background: var(--red-text); align-self: center;
display: block; transform: translateY(2px); border-radius: 1px;
}
/* ---------- Bảng menu đầy đủ ---------- */
/* Thanh nhóm dính ngay dưới header — đổi nhóm được ở bất kỳ đâu, không phải cuộn ngược lên đầu.
Nằm NGOÀI .wrap để nền trải hết chiều ngang màn hình khi dính. */
.menu-bar {
position: sticky; top: var(--header-h); z-index: 40;
background: rgba(16, 16, 16, 0.94);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border);
}
.menu-nav {
display: flex; gap: 8px; padding: 12px 0;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav .pill { white-space: nowrap; flex: 0 0 auto; }
.menu-intro { padding: 64px 0 28px; }
.section--menu { padding-top: 48px; }
/* Trừ chiều cao header + thanh dính, không thì tiêu đề nhóm bị thanh che mất */
.cat-block { margin-bottom: 72px; scroll-margin-top: calc(var(--header-h) + var(--bar-h) + 24px); }
/* Nhóm cuối cùng không giữ margin, nếu không đáy trang menu dày hơn nhịp trang 72px */
.cat-block:last-child { margin-bottom: 0; }
/* Vạch đỏ ở đầu đường kẻ dưới tên nhóm. Không phải trang trí thừa: trang menu dài
9 nhóm, vạch này neo mắt vào đầu mỗi nhóm khi cuộn qua.
Dùng % chứ không dùng px cố định để trên điện thoại nó co lại thành nét nhấn ngắn,
không chiếm gần hết bề ngang. */
.cat-head { position: relative; display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.cat-head::after {
content: ""; position: absolute; left: 0; bottom: -1px;
width: 22%; height: 2px; background: var(--red);
}
.cat-head h2 { margin: 0; font-size: 26px; letter-spacing: .01em; text-transform: uppercase; }
.cat-head .tagline { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: .05em; }
.cat-head .count { margin-left: auto; color: var(--muted); font-size: 13px; }
.sub-head { margin: 40px 0 20px; font-size: 15px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
/* ---------- Visit / Footer ---------- */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.visit h3 {
margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .1em;
color: var(--muted); display: flex; align-items: center; gap: 9px;
}
.ico { flex: 0 0 auto; color: var(--red-text); }
/* Dòng trạng thái "đang mở / đã đóng", tính theo giờ Kingston. Hai chỗ dùng: chân
trang (mọi trang) và cột Hours của trang Contact.
- Phân biệt bằng MÀU, không bằng chấm tròn ::before: chấm chiếm 8px + 8px khoảng
cách, đẩy chữ thụt vào 16px so với dòng ngay trên, nhìn ra ngay là lệch cột.
- Selector phải có 2 lớp để thắng `.site-footer p` và `.visit p` (đều 0,1,1), nếu
không thì màu và khoảng cách bị hai luật kia giành mất. */
.open-state:empty { display: none; }
.fh-date { display: inline-block; min-width: 58px; color: var(--text); }
.site-footer .open-state,
.visit .open-state { margin: 10px 0 0; color: var(--muted); letter-spacing: normal; }
.site-footer .open-state.is-open,
.visit .open-state.is-open { color: #7BD88F; }
.site-footer .open-state { font-size: 14px; }
.site-footer .hours-special-head { margin: 14px 0 6px; font-size: 11px; }
/* .visit dùng ở khối liên hệ cuối trang Catering và cả trang Contact — giữ thang chữ 17px */
.visit p { margin: 0; font-size: 17px; line-height: 1.7; }
/* Ghi chú phụ trong cột phải nhỏ hơn dòng chính, nếu không thì hai cấp thông tin
(số điện thoại / giải thích) cùng cỡ, mắt không biết đọc cái nào trước */
.visit p.note { margin: 6px 0 0; font-size: 14px; }
/* KHÔNG dùng justify-content: space-between — cột rộng 400px sẽ đẩy giờ ra tận mép phải,
tách rời khỏi nhãn ngày và trông như lỗi bố cục. Cho nhãn một bề rộng cố định để
các mốc giờ thẳng cột, mà vẫn nằm cạnh ngày. */
/* KHÔNG dùng display:flex cho dòng giờ: hộp dòng của flex item không có nửa khoảng đệm
(half-leading) như dòng chữ thường, nên chữ nhích lên 4px so với cột bên cạnh.
Dùng dòng chữ bình thường + span cố định bề rộng để mốc giờ vẫn thẳng cột. */
.hours-list { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.7; }
.hours-list li { color: #CFCFCF; }
.hours-list li span:first-child { display: inline-block; min-width: 118px; color: var(--text); }
/* Giờ ngày lễ: cùng nhịp chữ với lịch tuần, chỉ khác ở nhãn đỏ phía trên.
Dùng lại .hours-list nên không sinh thang chữ thứ hai — đúng lỗi đã gặp ở khối Hours. */
.hours-special-head {
margin: 18px 0 4px; font-size: 12px; text-transform: uppercase;
letter-spacing: .1em; color: var(--red-text);
}
.hours-list--special li span:first-child { min-width: 118px; }
/* padding-top phải bằng .section: chân trang là "khối cuối", để 56px thì khoảng
trắng trước chân trang hụt 32px so với mọi khoảng trắng khác của trang. */
.site-footer { background: #000000; border-top: 1px solid var(--border); padding: 83px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.site-footer h4 {
margin: 0 0 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.site-footer p, .site-footer li { font-size: 14px; color: #CFCFCF; margin: 0 0 6px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* Số điện thoại là link được bấm nhiều nhất trên web nhà hàng — cần vùng chạm 44px.
KHÔNG nới bằng padding: padding đẩy chữ xuống 12px so với cột bên cạnh và thổi
khoảng cách phone↔email lên ~30px, lệch hẳn nhịp dòng của các cột khác.
Dùng lớp phủ vô hình: chữ vẫn chảy đúng dòng, vùng bấm vẫn cao 44px.
Loại trừ .social vì hàng icon cũng là , giữ margin mặc định 16px thì khối nào kết
thúc bằng nút sẽ có đáy dày hơn khối khác 16px — khoảng trắng giữa các khối lệch. */
.section-cta { margin: 32px 0 0; }
/* Nhóm đang được nhảy tới sáng lên một nhịp để khách biết mình vừa tới đâu */
.cat-block:target .cat-head h2 { color: var(--red-text); }
/* Tôn trọng cài đặt giảm chuyển động của hệ điều hành */
/* ---------- Giao diện chọn được trong admin (Restaurant info → Look) ---------- */
/* Vân đá cho các tấm nổi — dùng ĐÚNG ảnh của bản xem thử mà user đã duyệt.
🔴 ĐÃ THỬ TỰ SINH VÂN BẰNG SVG (feTurbulence) VÀ THẤT BẠI 3 LẦN. Đừng làm lại:
① khớp độ nhám nhưng sai kích thước mảng → nhìn như bụi mịn;
② đo mẫu trên ô sai cỡ (250×170 thay vì 270×376 như thẻ thật) → mảng vân bé đi 2.2 lần;
③ sửa được kích thước thì các tấm lại lệch độ sáng nhau tới 5 điểm, vì mảng vân to hơn
cả tấm nên mỗi tấm rơi vào một vùng sáng/tối khác nhau.
Nhiễu toán học không tái tạo được cấu trúc của đá thật. Dùng ảnh là đúng.
Ảnh gốc 653KB PNG → 900px WebP q72 = 27KB, cache 1 năm, MỘT request cho cả site.
900px là đủ: tấm rộng nhất hiển thị ảnh ở ~610px, kể cả màn Retina 2x cũng không thấy mềm
vì đây là vân nhiễu chứ không phải chữ hay đường nét.
⚠️ BẢN QUYỀN: ảnh lấy từ giao diện thương mại "Flavoury" (Kalanidhi Themes). User đã
được báo và vẫn chọn dùng. Muốn sạch hoàn toàn thì mua giấy phép hoặc thay bằng ảnh
vân đá có giấy phép thương mại — chỉ cần thay đúng file assets/texture/stone.webp. */
/* Vân chỉ nằm trên các TẤM NỔI, nền trang giữ phẳng đúng như cũ.
Ba lớp này phủ hết mọi trang: .card (món — trang chủ, Menu, Catering),
.tile (3 thẻ trang chủ, About, Catering), .good-to-know (hộp chính sách Catering). */
html[data-look="grain"] .card,
html[data-look="grain"] .tile,
html[data-look="grain"] .good-to-know,
html[data-look="grain-glow"] .card,
html[data-look="grain-glow"] .tile,
html[data-look="grain-glow"] .good-to-know {
background-color: var(--surface);
background-image: url("assets/texture/stone.webp");
/* `cover` + `no-repeat`: ảnh luôn phủ kín tấm nên KHÔNG BAO GIỜ có mối nối. Từng để
`520px auto` và bị lặp thành một đường cắt ngang giữa thẻ. */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* Mỗi tấm cắt vào một chỗ khác của tảng đá — tấm nào cũng giống tấm nào thì dù vân
rất mờ mắt vẫn bắt được nhịp lặp. */
html[data-look="grain"] .card:nth-child(4n+2), html[data-look="grain-glow"] .card:nth-child(4n+2),
html[data-look="grain"] .tile:nth-child(3n+2), html[data-look="grain-glow"] .tile:nth-child(3n+2) { background-position: 22% 30%; }
html[data-look="grain"] .card:nth-child(4n+3), html[data-look="grain-glow"] .card:nth-child(4n+3),
html[data-look="grain"] .tile:nth-child(3n+3), html[data-look="grain-glow"] .tile:nth-child(3n+3) { background-position: 74% 62%; }
html[data-look="grain"] .card:nth-child(4n+4), html[data-look="grain-glow"] .card:nth-child(4n+4) { background-position: 40% 88%; }
/* Quầng lửa nằm ĐÈ LÊN toàn trang chứ không nằm dưới: các dải nền đục sẽ che mất nếu
đặt dưới. `screen` chỉ cộng ánh sáng nên chữ trắng vẫn trắng, không bị đục đi;
`pointer-events:none` để nó không nuốt cú bấm nào. */
html[data-look="grain-glow"] body::before {
content: "";
position: fixed; inset: 0; z-index: 0; pointer-events: none;
mix-blend-mode: screen;
background:
/* Cường độ đúng bằng mức "Nhẹ" user đã duyệt ở bản xem thử (0.55 × alpha gốc).
Bản đầu bê nguyên alpha gốc nên đo ra chỗ tâm quầng sáng gấp đôi nền — mạnh hơn
hẳn thứ user đã nhìn và gật đầu. */
radial-gradient(58vw 46vh at 82% 12%, rgba(255, 138, 58, .16), transparent 62%),
radial-gradient(52vw 42vh at 8% 46%, rgba(211, 29, 22, .14), transparent 64%),
radial-gradient(54vw 44vh at 92% 84%, rgba(255, 122, 40, .12), transparent 66%);
}
/* ---------- Nút lên đầu trang ---------- */
/* z-index 30: dưới thanh menu chính (50) và thanh nhóm của trang Menu (40) để không
bao giờ đè lên hai thanh dính đó, nhưng vẫn nổi trên nội dung.
Ẩn bằng opacity + pointer-events chứ không display:none — có vậy mới chuyển động
mượt được, và lúc ẩn thì không ăn cú bấm của khách. */
.to-top {
position: fixed; right: 20px; bottom: 20px; z-index: 30;
width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
border-radius: 999px; cursor: pointer;
background: rgba(32, 32, 32, .92); border: 1px solid var(--border); color: var(--text);
backdrop-filter: blur(8px);
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: opacity .18s, transform .18s, background .15s, border-color .15s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--red); border-color: var(--red); }
/* Màn hẹp: nhích vào sát mép hơn cho khỏi che nội dung, vẫn giữ 46px vùng chạm */
@media (max-width: 640px) {
.to-top { right: 14px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { transition: none !important; animation: none !important; }
}
/* Bản in: khách và nhân viên vẫn hay in menu ra giấy */
@media print {
.site-header, .menu-nav, .section-cta, .site-footer, .card-media, .to-top { display: none; }
body { background: #FFFFFF; color: #000000; }
.card { border: 1px solid #CCCCCC; break-inside: avoid; }
.grid { grid-template-columns: repeat(2, 1fr); }
.card-body h3, .card-foot .price-inline { color: #000000; }
.section { padding: 0; }
}
/* ---------- Đáp ứng màn nhỏ ---------- */
@media (max-width: 1000px) {
.grid { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(2, 1fr); }
.cards-3 { grid-template-columns: 1fr; }
/* Gallery giữ 2 cột chứ không về 1: ảnh 4:3 xếp một cột trên tablet cao lênh khênh,
phải cuộn mãi mới hết sáu tấm */
.gallery { grid-template-columns: repeat(2, 1fr); }
.page-head--split .wrap { grid-template-columns: 1fr; gap: 32px; }
.split { grid-template-columns: 1fr; gap: 32px; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.visit { grid-template-columns: 1fr; gap: 28px; }
.header-meta .hours { display: none; }
/* KHÔNG ẩn .nav trên mobile: ẩn đi thì trang Menu không còn đường vào từ header,
mà khách nhà hàng phần lớn dùng điện thoại. Chuyển nav xuống hàng thứ hai,
cuộn ngang được nếu chật. */
.site-header .wrap { gap: 16px; padding-top: 10px; padding-bottom: 4px; }
.header-meta { margin-left: auto; }
.nav {
order: 3; width: 100%; gap: 4px;
overflow-x: auto; scrollbar-width: none;
border-top: 1px solid var(--border); padding-top: 4px;
}
.nav::-webkit-scrollbar { display: none; }
/* Còn 3 mục nên trả lại cỡ chữ và đệm như bản desktop — vùng chạm rộng hơn,
không còn phải siết như hồi có 4 mục. */
.nav a { white-space: nowrap; }
/* 5 mục ở cỡ chữ gốc rộng 395px, màn 390px chỉ chứa được 327px → mục Contact bị
khuất, phải vuốt mới thấy. Siết đệm ngang + khoảng cách + giãn chữ (KHÔNG giảm
đệm dọc: vùng chạm phải giữ 44px). Đo lại sau khi sửa: vừa khít. */
/* 5 mục dàn đều hết bề ngang thay vì dồn cục sang trái: cùng một tổng bề ngang
nhưng mắt thấy thoáng hơn hẳn. Đệm ngang thu lại chính là chỗ để dàn ra. */
.nav { width: 100%; justify-content: space-between; gap: 0; font-size: 13px; letter-spacing: .02em; }
.nav a { padding: 12px 3px; }
/* Hai nút ở ảnh bìa phải nằm CÙNG MỘT HÀNG. Đo ở 390px: kèm chữ "Call" là 378px,
trong khi chỗ trống chỉ 327px. Giấu chữ "Call" (số điện thoại đã tự nói lên nó là
số gọi) + siết đệm là vừa. Vẫn cho phép rớt hàng ở màn cực hẹp thay vì tràn ngang. */
.btn-word { display: none; }
.hero-actions { gap: 8px; }
.hero-actions .btn { padding: 12px; font-size: 13px; white-space: nowrap; }
/* Vẫn giữ mờ mép phải cho màn hẹp hơn nữa (320px) — thanh cuộn đã bị ẩn nên
không còn dấu hiệu nào khác cho biết bên phải còn mục. */
.nav { mask-image: linear-gradient(to right, #000 92%, transparent 100%); }
/* Trang menu trên điện thoại: header cao 131px (2 hàng) + thanh nhóm 72px = 203px,
chiếm 29% màn hình. Cho header cuộn đi, chỉ giữ thanh nhóm dính — còn 72px.
Muốn gọi điện thì vuốt lên đầu, header quay lại đủ cả nút gọi lẫn menu chính. */
.page-menu { --header-h: 0px; }
.page-menu .site-header { position: static; }
.page-menu .menu-bar { top: 0; }
.menu-intro { padding: 40px 0 20px; }
}
@media (max-width: 640px) {
.grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cards-4, .cards-3 { grid-template-columns: 1fr; gap: 14px; }
.gallery { gap: 14px; }
.page-head { padding: 48px 0 4px; }
.good-to-know dt { min-width: 100%; }
.section { padding: 56px 0; }
/* Chân trang bám theo nhịp 56px của điện thoại, giữ 88px là hở hơn 32px */
.site-footer { padding-top: 56px; }
.hero { min-height: 520px; }
.hero-bg::after { background: linear-gradient(180deg, rgba(16,16,16,.55) 0%, rgba(16,16,16,.92) 60%, var(--bg) 100%); }
/* Chân trang giữ 2 cột × 2 hàng trên điện thoại, KHÔNG về 1 cột: xếp dọc 4 khối làm
chân trang cao gần gấp đôi, khách phải cuộn một quãng dài mới hết trang.
Khe dọc rộng hơn khe ngang để mắt vẫn tách được hàng trên với hàng dưới. */
.footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.card-body { padding: 12px; }
/* Thẻ chỉ còn ~164px: nhãn giá và nhãn Signature va nhau.
Bỏ nhãn giá đè trên ảnh — giá vẫn hiển thị ở chân thẻ. */
.card-price { display: none; }
}
/* Màn dưới 380px (Android 360, iPhone SE): thanh menu 5 mục ở cỡ 13px dính sát nhau,
bớt 1px cỡ chữ là đủ chỗ để dàn đều lại. */
@media (max-width: 380px) {
.nav { font-size: 12px; }
}
/* Dưới 340px thì hai nút không thể nằm chung hàng mà chữ còn đọc được — cho mỗi nút
một hàng và kéo hết bề ngang, trông có chủ đích thay vì rớt hàng lởm chởm. */
@media (max-width: 340px) {
.hero-actions .btn { flex: 1 1 100%; justify-content: center; }
}
trong footer và có kiểu riêng. */
.site-footer ul:not(.social) a { position: relative; display: inline-block; }
.site-footer ul:not(.social) a::after {
content: ""; position: absolute; left: 0; right: 0;
top: 50%; height: 44px; transform: translateY(-50%);
}
/* Hàng icon mạng xã hội — ô vuông 40px, viền mờ, sáng đỏ khi rê chuột */
.social { list-style: none; display: flex; gap: 10px; margin: 22px 0 0; padding: 0; }
.social a {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--border); color: var(--muted);
transition: color .15s, border-color .15s, background .15s;
}
.social a:hover { color: #FFFFFF; background: var(--red); border-color: var(--red); }
.site-footer .logo { display: inline-block; padding: 7px 0; }
/* Logo chân trang là bản NẰM NGANG có dòng chữ phụ (843×205, tỉ lệ 4.11:1) — khác logo
header (3.82:1, không có dòng phụ), nên KHÔNG dùng chung chiều cao được.
40px: wordmark ra ~18px (ngang tầm chữ ở header), ảnh rộng 164px = 50% cột chân trang.
Bản xếp dọc trước đó để 96px bị user chê to lấn át — bản ngang này thấp hơn 2,4 lần
nên nhẹ hơn hẳn dù rộng hơn. */
.site-footer .logo img { height: 40px; margin-bottom: 16px; }
.site-header .logo { display: inline-flex; align-items: center; min-height: 44px; }
.legal { border-top: 1px solid var(--border); padding-top: 22px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.menu-cta { margin: 16px 0 0; font-size: 15px; }
/* margin dưới phải là 0: đây là thẻ