/* ==============================================================
RESPONSIVE.CSS — Giao diện Mobile & iPad (≤ 1024px)
Yến Sào Yến Duyên
QUY TẮC:
• MỌI rule trong file này bọc trong @media (max-width: 1024px)
(hoặc dải hẹp hơn). Màn hình ≥ 1025px KHÔNG bao giờ đọc tới các
rule này → bản desktop/laptop ở base/header/hero/products/
sections.css giữ nguyên tuyệt đối.
• File nạp SAU tất cả CSS khác trên mọi trang → thắng nhờ thứ tự.
• Đây là NƠI DUY NHẤT chứa CSS mobile/iPad mới. Gỡ 1 dòng
là quay về nguyên trạng.
• iPad = bản mobile phóng to (menu hamburger, header gọn, nhiều
cột hơn) — KHÔNG mượn layout desktop.
ĐỢT 1 — hạ tầng dùng chung:
1a. Menu hamburger (sửa lỗi bấm không mở) + cho cả iPad
1b. Chặn tràn ngang
1c. Nút liên hệ nổi → 1 FAB tròn bung ra (Gọi/Zalo/FB/Chat)
1d. Cỡ chữ tổng thể + nhịp section
1e. Lưới + thẻ sản phẩm gọn lại (dùng chung trang chủ & sản phẩm)
============================================================== */
/* ==============================================================
1d. CỠ CHỮ GỐC + NHỊP SECTION
html đang 18px áp cho cả mobile → mọi thứ to 12.5%. Kéo về
16px (điện thoại) / 17px (iPad). Đây là đòn bẩy lớn nhất cho
"chữ và thẻ quá to". Tinh chỉnh tiếp theo phản hồi trên máy thật.
============================================================== */
@media (max-width: 1024px) {
html { font-size: 16px; }
:root {
--section-padding: clamp(2.25rem, 7vw, 3.5rem);
--container-padding: clamp(1rem, 5vw, 1.5rem);
}
.section-header { margin-bottom: 2rem; }
.section-title { font-size: clamp(1.5rem, 6vw, 2.1rem); margin-bottom: 0.85rem; }
.section-label { margin-bottom: 0.6rem; }
}
@media (min-width: 768px) and (max-width: 1024px) {
html { font-size: 17px; }
}
/* ==============================================================
1b. CHẶN TRÀN NGANG
============================================================== */
@media (max-width: 1024px) {
/* overflow-x: clip KHÔNG biến phần tử thành vùng cuộn (khác 'hidden') nên
không phá position: sticky. Trình duyệt cũ không hiểu 'clip' → bỏ qua
dòng này, giữ nguyên 'hidden' đã có sẵn trong base.css. */
html { overflow-x: clip; }
/* Không cho phần tử con vô tình rộng hơn màn hình */
img, video, iframe, table, pre { max-width: 100%; }
}
/* ==============================================================
1a. HEADER + MENU HAMBURGER
Lỗi gốc: JS các trang bật class .is-open nhưng header.css chỉ
mở menu khi [aria-hidden="false"] → bấm không thấy gì.
Ở đây hỗ trợ CẢ HAI (.is-open và [aria-hidden="false"]) và
mở rộng hamburger cho iPad.
:has(#mobile-nav) để KHÔNG giấu nav ở các trang chưa có menu
mobile (tránh làm mất điều hướng — sẽ bổ sung header cho các
trang đó ở đợt sau).
============================================================== */
@media (max-width: 1024px) {
/* Header gọn trên cả iPad */
.site-header { height: var(--header-height-mobile, 60px); }
.site-header.scrolled { height: var(--header-height-mobile, 60px); }
body { padding-top: var(--header-height-mobile, 60px); }
.site-header:has(#mobile-nav) .main-nav { display: none; }
.site-header:has(#mobile-nav) .menu-toggle { display: flex; }
#mobile-nav {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - 60px); /* fallback trình duyệt cũ (không có dvh) */
max-height: calc(100dvh - var(--header-height-mobile, 60px));
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--color-brand);
border-top: 1px solid rgba(201, 162, 75, 0.25);
box-shadow: 0 16px 32px rgba(43, 36, 32, 0.45);
/* Hiệu ứng trượt mượt hơn max-height */
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
#mobile-nav.is-open,
#mobile-nav[aria-hidden="false"] {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.mobile-nav-list { padding: 8px 0 16px; }
.mobile-nav-link {
display: flex;
align-items: center;
min-height: 52px;
padding: 12px var(--container-padding);
font-size: 0.95rem;
letter-spacing: 0.04em;
}
/* Nhóm link tài khoản/giỏ/đơn — thêm ở HTML từng trang sau; ở
đây chỉ định kiểu sẵn cho