/* Core Design System — EFL / CFL (Emerald Green Light Theme Default) */ :root { /* Default Emerald Light Theme */ --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f0fdf4; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #64748b; --accent-color: #059669; --accent-hover: #047857; --accent-light: #d1fae5; --accent-badge: #10b981; --border-color: #e2e8f0; --card-shadow: 0 4px 12px -2px rgba(5, 150, 105, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04); --nav-bg: rgba(255, 255, 255, 0.94); --sheet-bg: #ffffff; /* Màu ngữ nghĩa dùng chung — MỌI màn hình phải lấy từ đây, không viết mã màu thẳng vào file .js nữa (viết thẳng thì chế độ Tối sẽ sai màu). */ --zh-color: #dc2626; /* Màu nhận diện tiếng Trung */ --zh-on-color: #ffffff; --danger-color: #dc2626; --danger-bg: #fee2e2; --danger-text: #991b1b; --warn-color: #b45309; --warn-bg: #fef3c7; --warn-text: #78350f; --success-color: #16a34a; --success-bg: #d1fae5; --success-text: #065f46; --info-bg: #dbeafe; --info-text: #1e40af; --streak-bg: #fef3c7; --streak-text: #b45309; --font-base: 16px; --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-full: 9999px; --nav-height: 64px; } /* Chế độ "Theo hệ thống": khi máy đang để Dark Mode và người dùng CHƯA chọn sáng/tối thủ công (tức là không có thuộc tính data-theme trên thẻ ). */ @media (prefers-color-scheme: dark) { html:not([data-theme]) { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #064e3b; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --accent-color: #10b981; --accent-hover: #059669; --accent-light: #064e3b; --accent-badge: #34d399; --border-color: rgba(255, 255, 255, 0.1); --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --nav-bg: rgba(15, 23, 42, 0.94); --sheet-bg: #1e293b; /* Màu ngữ nghĩa bản Tối */ --zh-color: #f87171; --danger-color: #f87171; --danger-bg: rgba(239, 68, 68, 0.18); --danger-text: #fca5a5; --warn-color: #fbbf24; --warn-bg: rgba(245, 158, 11, 0.18); --warn-text: #fde68a; --success-color: #4ade80; --success-bg: rgba(34, 197, 94, 0.18); --success-text: #86efac; --info-bg: rgba(59, 130, 246, 0.18); --info-text: #93c5fd; --streak-bg: rgba(234, 179, 8, 0.15); --streak-text: #fde047; } } html[data-theme="dark"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #064e3b; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --accent-color: #10b981; --accent-hover: #059669; --accent-light: #064e3b; --accent-badge: #34d399; --border-color: rgba(255, 255, 255, 0.1); --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --nav-bg: rgba(15, 23, 42, 0.94); --sheet-bg: #1e293b; /* Màu ngữ nghĩa bản Tối */ --zh-color: #f87171; --danger-color: #f87171; --danger-bg: rgba(239, 68, 68, 0.18); --danger-text: #fca5a5; --warn-color: #fbbf24; --warn-bg: rgba(245, 158, 11, 0.18); --warn-text: #fde68a; --success-color: #4ade80; --success-bg: rgba(34, 197, 94, 0.18); --success-text: #86efac; --info-bg: rgba(59, 130, 246, 0.18); --info-text: #93c5fd; --streak-bg: rgba(234, 179, 8, 0.15); --streak-text: #fde047; } html[data-fontsize="s"] { --font-base: 14px; } html[data-fontsize="m"] { --font-base: 16px; } html[data-fontsize="l"] { --font-base: 18px; } /* Bộ chữ dùng chung cho MỌI trang (app, trang chủ /, hồ sơ vụ án). Sửa ở một chỗ này là cả hệ thống đổi theo. */ :root { --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* ---- Khoá giao diện "kiểu app", không co dãn như trang web ---- - text-size-adjust: Safari iOS tự phóng to chữ khi xoay ngang → tắt. - overscroll-behavior: chặn hiệu ứng kéo nảy (rubber-band) lộ nền trắng. - touch-action: manipulation: tắt phóng to khi chạm 2 lần liên tiếp. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior: none; background-color: var(--bg-primary); /* Không bao giờ cho trượt ngang — trượt ngang làm màn hình "co dãn" khó chịu. */ max-width: 100%; overflow-x: hidden; } body { font-family: var(--font-family-base); font-size: var(--font-base); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.5; min-height: 100vh; /* 100dvh = chiều cao thật sau khi trừ thanh địa chỉ Safari (iOS 16+). */ min-height: 100dvh; overscroll-behavior: none; touch-action: manipulation; max-width: 100%; /* ⚠️ KHÔNG đặt overflow-x ở . Đặt cả lẫn cùng lúc sẽ biến body thành vùng cuộn riêng và làm CHUỘT LĂN không cuộn được trang (lỗi đã gặp thật). */ /* Cộng thêm vùng an toàn dưới đáy iPhone (thanh vuốt Home) */ padding-bottom: calc(var(--nav-height) + 1rem + env(safe-area-inset-bottom, 0px)); /* Vùng an toàn hai bên khi xoay ngang iPhone (tai thỏ / Dynamic Island) */ padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* Không cho bôi đen chữ trên các thành phần bấm được (giống app thật). Nội dung học vẫn chọn/sao chép được bình thường. */ .btn, .nav-item, .chip, .card-clickable, .list-row, .badge-level, .sheet-close { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } #app { max-width: 600px; margin: 0 auto; padding: 1rem; } /* Typography & Links */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; } h1 { font-size: 1.6rem; margin-bottom: 0.75rem; color: var(--text-primary); } h2 { font-size: 1.3rem; margin-bottom: 0.5rem; color: var(--text-primary); } h3 { font-size: 1.1rem; margin-bottom: 0.25rem; color: var(--text-primary); } p { margin-bottom: 0.75rem; } a { color: var(--accent-color); text-decoration: none; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.6rem 1.2rem; border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; border: 1px solid var(--border-color); background-color: var(--bg-secondary); color: var(--text-primary); cursor: pointer; transition: background-color 0.2s, transform 0.1s, border-color 0.2s; gap: 0.5rem; } .btn:active { transform: scale(0.98); } .btn-primary { background-color: var(--accent-color); color: #ffffff; border: none; box-shadow: 0 4px 10px rgba(5, 150, 105, 0.25); } .btn-primary:hover { background-color: var(--accent-hover); } .btn-sm { min-height: 36px; padding: 0.4rem 0.8rem; font-size: 0.85rem; } .btn-block { width: 100%; display: flex; } .btn-icon { width: 44px; padding: 0; border-radius: var(--radius-full); } /* Thanh tiêu đề gọn ở đầu mọi màn hình (thay cho ảnh banner cỡ lớn cũ) */ .app-header { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; margin-bottom: 0.85rem; border-radius: var(--radius-full); background-color: var(--bg-secondary); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); text-decoration: none; color: var(--text-primary); -webkit-user-select: none; user-select: none; } .app-header-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; object-position: 50% 22%; /* cắt lấy phần khuôn mặt của ảnh vuông */ border: 2px solid var(--accent-color); flex-shrink: 0; display: block; } .app-header-title { flex: 1; min-width: 0; font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .app-header-home { font-size: 1.1rem; opacity: 0.7; } /* Cards & Layout */ .card { background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--card-shadow); } .card-clickable { cursor: pointer; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .card-clickable:hover { transform: translateY(-2px); border-color: var(--accent-color); box-shadow: 0 8px 16px -2px rgba(5, 150, 105, 0.12); } /* Badges & Chips */ .chip { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; background-color: var(--bg-tertiary); color: var(--accent-color); } .badge-level { padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 700; } .badge-level-1 { background-color: var(--success-bg); color: var(--success-text); } .badge-level-2 { background-color: var(--warn-bg); color: var(--warn-color); } .badge-level-3 { background-color: var(--danger-bg); color: var(--danger-text); } /* Chip chuỗi ngày học liên tiếp (🔥) */ .chip-streak { background-color: var(--streak-bg); color: var(--streak-text); } .chip-zh { background-color: var(--danger-bg); color: var(--zh-color); } /* Màu nhận diện tiếng Trung (chữ Hán, pinyin, nút nghe) */ .zh-text { color: var(--zh-color); } .zh-mono { color: var(--zh-color); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .btn-speak-zh { background-color: var(--zh-color); color: var(--zh-on-color); border-color: transparent; } /* Nút đánh giá SRS trong màn hình Học */ .btn-rating[data-rating="quen"] { background-color: var(--danger-bg); color: var(--danger-text); border-color: transparent; } .btn-rating[data-rating="kho"] { background-color: var(--warn-bg); color: var(--warn-color); border-color: transparent; } .btn-rating[data-rating="duoc"] { background-color: var(--info-bg); color: var(--info-text); border-color: transparent; } .btn-rating[data-rating="de"] { background-color: var(--success-bg); color: var(--success-text); border-color: transparent; } /* Hộp căn cứ pháp lý */ .legal-box { border-left: 4px solid var(--warn-color); background-color: var(--warn-bg); } .legal-box h4 { color: var(--warn-color); } .legal-box .legal-ref { color: var(--warn-text); } /* Nút nguy hiểm (xóa dữ liệu, báo lỗi) */ .btn-danger-outline { color: var(--danger-color); border-color: var(--danger-color); } /* List Row */ .list-row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background-color: var(--bg-secondary); border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.15s; } .list-row:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .list-row:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); border-bottom: none; } .list-row:hover { background-color: var(--bg-tertiary); } /* Progress Ring */ .progress-ring-container { position: relative; display: inline-flex; align-items: center; justify-content: center; } .progress-ring-text { position: absolute; font-weight: 700; font-size: 0.85rem; } /* Bottom Navigation Bar */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background-color: var(--nav-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* Safari iOS cần tiền tố -webkit- */ border-top: 1px solid var(--border-color); display: flex; justify-content: space-around; align-items: center; z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.7rem; font-weight: 600; text-decoration: none; min-width: 44px; min-height: 44px; gap: 0.15rem; flex: 1; } .nav-item.active { color: var(--accent-color); } .nav-icon { font-size: 1.3rem; } /* Modal Bottom Sheet */ .sheet-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); /* Safari iOS cần tiền tố -webkit- */ z-index: 200; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .sheet-backdrop.active { opacity: 1; pointer-events: auto; } .sheet { width: 100%; max-width: 600px; margin: 0 auto; max-height: 85vh; background-color: var(--sheet-bg); border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); padding: 1.25rem; overflow-y: auto; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -10px 25px rgba(0,0,0,0.2); } .sheet-backdrop.active .sheet { transform: translateY(0); } .sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color); } .sheet-close { background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0.2rem 0.5rem; } /* Flashcard Touch Swipe Animations */ .card-swipe-left { animation: swipeLeft 0.3s forwards ease-out; } .card-swipe-right { animation: swipeRight 0.3s forwards ease-out; } @keyframes swipeLeft { to { transform: translateX(-120%) rotate(-10deg); opacity: 0; } } @keyframes swipeRight { to { transform: translateX(120%) rotate(10deg); opacity: 0; } } /* Skeleton Loading */ .skeleton { background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s infinite; border-radius: var(--radius-sm); } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Form Controls */ .input-search, .input-text, select { width: 100%; min-height: 44px; padding: 0.6rem 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-color); background-color: var(--bg-secondary); color: var(--text-primary); font-size: 1rem; outline: none; } .input-search:focus, .input-text:focus, select:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-light); } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }