/* ============================================================================ SkyRecall — trang giới thiệu công khai ── Vì sao KHÔNG dùng lại app.css ────────────────────────────────────────── app.css nặng ~60 KB và dựng cho một ứng dụng có thanh điều hướng, khung chat, bảng biểu. Trang này chỉ cuộn xuống và bấm một nút. Nạp cả bảng kiểu của ứng dụng vào đây là bắt người chưa biết mình là ai tải 60 KB để đọc một trang. Nhưng TOKEN màu thì chép đúng nguyên giá trị, không đặt lại theo cảm tính: người bấm "Dùng thử" sẽ sang thẳng app, và hai sắc xanh lệch nhau một chút là đủ để cảm giác "hai sản phẩm khác nhau". ========================================================================= */ :root { --bg: #f4f7fb; --surface: #ffffff; --line: #e2e9f3; --line-soft: #eef2f8; --ink: #0b1628; --ink-2: #33425c; --muted: #64748f; --accent: #0060f0; --accent-2: #009cf0; --accent-soft: #ebf3ff; --busy: #b07d00; --r-sm: 8px; --r-lg: 16px; --r-xl: 22px; --font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --shadow: 0 1px 2px rgba(11, 22, 40, .05), 0 12px 32px rgba(11, 22, 40, .06); --wrap: 1120px; } /* Nền tối lấy chính navy của logo, cùng họ với ứng dụng. Chỉ ĐỊNH NGHĨA LẠI biến — không một quy tắc thành phần nào nằm trong khối này, để đừng bao giờ có một màu chỉ tồn tại ở một chế độ. */ @media (prefers-color-scheme: dark) { :root { --bg: #060f1f; --surface: #0e1a2c; --line: #1d2b40; --line-soft: #16243a; --ink: #e8eff9; --ink-2: #b9c7dd; --muted: #8698b6; --accent: #3d8bff; --accent-2: #4fc3ff; --accent-soft: #12233d; --busy: #ffc93c; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 48px rgba(0, 0, 0, .45); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font: var(--font); background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 630; letter-spacing: -.015em; line-height: 1.2; } p { margin: 0; } a { color: var(--accent); } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* ── Thanh trên cùng ─────────────────────────────────────────────────────── */ header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* color-mix chưa có ở trình duyệt cũ; nền đục hoàn toàn vẫn đọc được, chỉ mất hiệu ứng mờ. Khai báo sau để nó ghi đè khi trình duyệt HIỂU, và bị bỏ qua khi không hiểu — đúng cách dùng @supports cho một thứ chỉ để đẹp. */ @supports not (backdrop-filter: blur(1px)) { header.top { background: var(--bg); } } /* Thanh cao 88px vì logo cao 63px: để nguyên 66px thì logo chạm cả mép trên lẫn mép dưới, không còn khoảng thở nào và nhìn như bị nhét vào. */ header.top .row { display: flex; align-items: center; gap: 16px; height: 88px; } header.top .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; } /* Dấu hiệu nhận diện đầu tiên người ta nhìn thấy, nên nó phải chiếm đúng phần của nó. Đi kèm chiều cao thanh ở trên: đổi một cái mà quên cái kia là logo hoặc bị nhét chật, hoặc bơi giữa một khoảng trống. */ header.top .brand img { height: 63px; width: auto; display: block; } header.top nav { display: flex; align-items: center; gap: 22px; font-size: 14.5px; } header.top nav a { color: var(--ink-2); text-decoration: none; } header.top nav a:hover { color: var(--accent); } /* Logo hai bản cho hai nền. Không dùng JavaScript, vì như vậy sẽ có một khoảnh khắc logo sai màu trước khi script kịp chạy. ── Vì sao phải viết đủ `header.top .brand img.dark` ────────────────────── Bản đầu chỉ viết `img.dark { display: none }`. Nó THUA, vì ngay phía trên có `header.top .brand img { display: block }` — độ ưu tiên (0,2,2) so với (0,1,1). Kết quả: cả hai bản logo cùng hiện, nằm sát nhau như một logo bị nhân đôi. Đã nhìn thấy đúng như vậy trên bản chạy thật. Bài học: đặt `display` trong luật kích thước chung rồi lại định tắt nó bằng một bộ chọn hẹp hơn là tự đặt bẫy cho chính mình. */ header.top .brand img.dark { display: none; } @media (prefers-color-scheme: dark) { header.top .brand img.light { display: none; } header.top .brand img.dark { display: block; } } /* ── Bộ chọn ngôn ngữ ───────────────────────────────────────────────────── Tách khỏi menu chính bằng một vạch dọc: "English" nằm lẫn giữa Trí nhớ và Bảng giá thì đọc ra như một mục nội dung nữa, chứ không ra là "đổi ngôn ngữ". Dựng bằng
/ nên KHÔNG cần JavaScript: mở đóng, phím Enter, phím Esc đều là hành vi sẵn có của trình duyệt. ── Vì sao có CẢ cờ lẫn mã hai chữ ──────────────────────────────────────── Windows không có phông emoji cờ. Ở đó 🇻🇳 hiện ra thành hai chữ cái ghép, hoặc thành hai ô vuông rỗng. Nên mã "VI"/"EN" luôn nằm cạnh và là thứ đọc được ở mọi nền tảng; cờ chỉ là phần thêm cho nơi vẽ được. */ .langsel { position: relative; } .langsel > summary { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); font-size: 14px; color: var(--ink-2); list-style: none; white-space: nowrap; } .langsel > summary::-webkit-details-marker { display: none; } /* Safari */ .langsel > summary:hover { border-color: var(--accent); color: var(--accent); } .langsel .fl { font-size: 15px; line-height: 1; } /* Tên ngôn ngữ đầy đủ, KHÔNG phải mã hai chữ. Windows không vẽ được emoji cờ: 🇻🇳 hiện ra thành hai chữ "VN". Ghép với mã "VI" bên cạnh thì nút đọc ra là "VN VI" — hai mã dính nhau, không ai hiểu. Tên đầy đủ thì đọc được ở mọi nền tảng, dù cờ có vẽ ra hay không. */ .langsel .name { font-weight: 600; font-size: 13.5px; } .langsel .chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .langsel[open] > summary .chev { transform: rotate(180deg); } .langsel ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; margin: 0; padding: 6px; list-style: none; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); } .langsel li a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; font-size: 14.5px; } .langsel li a:hover { background: var(--accent-soft); color: var(--accent); } /* Ngôn ngữ đang xem: đánh dấu bằng CHẤM chứ không chỉ bằng màu, để người phân biệt màu kém vẫn thấy mình đang ở đâu. */ .langsel li a[aria-current="true"] { font-weight: 620; } .langsel li a[aria-current="true"]::after { content: ''; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } /* ── Menu cho màn hẹp ───────────────────────────────────────────────────── Từ 900px trở xuống thanh