/* ============================================
ĂN GÌ - Design System
Dark mode, glassmorphism, warm food palette
============================================ */
/* === Google Font ===
Font được preload trong của index.html (không dùng @import để tránh blocking render)
Xem: */
/* === Design Tokens === */
:root {
--bg-primary: #0a0a12;
--bg-secondary: #111119;
--bg-tertiary: #1a1a25;
--accent: #ff8c42;
--accent-light: #ffaa6b;
--accent-dark: #e07030;
--accent-glow: rgba(255, 140, 66, 0.25);
--coral: #ff6b6b;
--coral-glow: rgba(255, 107, 107, 0.2);
--success: #4ade80;
--warning: #fbbf24;
--error: #f87171;
--info: #60a5fa;
--text-primary: #f0f0f5;
--text-secondary: rgba(240, 240, 245, 0.7);
--text-muted: rgba(240, 240, 245, 0.4);
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-bg-hover: rgba(255, 255, 255, 0.09);
--glass-border: rgba(255, 255, 255, 0.08);
--glass-blur: 20px;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
--shadow-glow: 0 0 24px var(--accent-glow);
--transition-fast: 150ms cubic-bezier(.4,0,.2,1);
--transition-normal: 300ms cubic-bezier(.4,0,.2,1);
--transition-slow: 500ms cubic-bezier(.4,0,.2,1);
--font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
}
/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font);
background: var(--bg-primary);
color: var(--text-primary);
min-height: 100dvh;
overflow-x: hidden;
overflow-y: scroll; /* luôn hiện scrollbar → không giật layout */
line-height: 1.6;
-webkit-font-smoothing: antialiased;
/* Slightly darker outside the app frame on wide screens */
background-image: radial-gradient(ellipse at 50% 0%, rgba(249,115,22,0.04) 0%, transparent 60%);
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; }
a { color: inherit; text-decoration: none; }
/* === Animated Background === */
.bg-glow {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
}
.bg-glow::before,
.bg-glow::after {
content: '';
position: absolute;
border-radius: 50%;
filter: blur(120px);
opacity: 0.3;
animation: bgFloat 12s ease-in-out infinite alternate;
}
.bg-glow::before {
width: 500px; height: 500px;
background: var(--accent);
top: -150px; right: -100px;
opacity: 0.12;
}
.bg-glow::after {
width: 400px; height: 400px;
background: var(--coral);
bottom: -100px; left: -80px;
opacity: 0.1;
animation-delay: -6s;
}
/* Overlay danh sách mâm đang mở → tạm dừng 2 quầng blur(120px) animate phía sau:
user không nhìn thấy chúng (màn đen 78% che) nhưng GPU iOS vẫn phải raster
mỗi frame, tranh tài nguyên với việc vẽ lưới đang cuộn (IMG_0888 giật).
Class gắn/gỡ tại _openComboList/_closeComboList (js/combo-list.js). */
body.has-overlay .bg-glow::before,
body.has-overlay .bg-glow::after {
animation-play-state: paused;
}
/* === Layout === */
.app-container {
position: relative;
z-index: 1;
min-height: 100dvh;
display: flex;
flex-direction: column;
max-width: 480px;
width: 100%;
margin: 0 auto;
/* Subtle border on large screens to frame the app */
box-shadow: 0 0 0 1px var(--glass-border),
0 0 80px rgba(0,0,0,0.6);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
/* Standalone iOS (status bar black-translucent + viewport-fit=cover): nội dung
tràn dưới đồng hồ/Dynamic Island — header gánh phần đệm, nền blur phủ liền mạch */
padding-top: calc(16px + env(safe-area-inset-top, 0px));
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 18, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--glass-border);
/* Nếp THU KHUNG ĐẦU ở màn «Món ngon» (v3.39.1, cuối file): header rút lên BÁM cuộn 1:1
bằng transform do JS ghi inline (_applyChromeOffset) — KHÔNG khai transition ở đây:
transform đổi mỗi frame theo ngón tay, có transition là header đuổi theo trễ 260ms.
Bước nhảy lập trình cần hiệu ứng thì JS tự gắn transition inline rồi gỡ. */
}
.header__logo {
display: flex;
align-items: center;
gap: 7px;
font-size: 1.25rem;
font-weight: 700;
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
margin: -4px -8px;
border-radius: 10px;
transition: background 0.2s ease, filter 0.2s ease;
}
.header__logo:hover {
background: rgba(255,255,255,0.06);
filter: brightness(1.12);
}
.header__logo:active {
background: rgba(255,255,255,0.1);
}
.header__logo-text {
background: linear-gradient(135deg, var(--accent), var(--coral));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
}
.header__actions { display: flex; gap: 6px; align-items: center; }
/* Header icon button (bell) */
.btn-icon-header {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 50%;
width: 34px;
height: 34px;
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.btn-icon-header:hover { background: var(--glass-bg-hover); transform: scale(1.1); }
.btn-icon-header.is-active { background: var(--accent); border-color: var(--accent); }
/* Google Login Button — ghost style (v3.0 P2.3): không tranh chú ý khi user là khách */
.btn-login-header {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius-full);
padding: 5px 12px 5px 8px;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
transition: all var(--transition-fast);
white-space: nowrap;
}
.btn-login-header:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
color: var(--text-secondary);
}
.btn-login-header img.avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
}
/* Notification Settings Panel */
.notif-panel {
position: fixed;
top: calc(60px + env(safe-area-inset-top, 0px));
right: 12px;
z-index: 500;
width: 280px;
animation: fadeScaleIn 0.2s ease;
}
@keyframes fadeScaleIn {
from { opacity: 0; transform: scale(0.95) translateY(-8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.notif-panel__content {
background: var(--bg-secondary);
border: 1px solid var(--glass-border);
border-radius: 16px;
padding: 16px;
box-shadow: var(--shadow-lg);
}
.notif-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.notif-panel__title { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); }
.notif-panel__close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1rem;
padding: 2px 6px;
border-radius: 50%;
}
.notif-panel__close:hover { background: var(--glass-bg); }
.notif-panel__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid var(--glass-border);
}
.notif-panel__row:last-of-type { border-bottom: none; }
.notif-panel__label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.notif-time-input {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
border-radius: 8px;
padding: 4px 8px;
font-size: 0.82rem;
color: var(--text-primary);
cursor: pointer;
color-scheme: dark;
}
/* Popup