/* ============================================================================= SMO CARD — DESIGN TOKENS · hướng "Trao tay" ----------------------------------------------------------------------------- Nguồn duy nhất cho mọi giá trị thị giác của 3 trang marketing (Trang chủ · Giới thiệu · Liên hệ). Component KHÔNG được ghi cứng màu / khoảng cách / cỡ chữ — luôn tham chiếu biến ở đây. File này chỉ chứa: @font-face · biến · reset · typography nền. Mọi component nằm ở marketing.css. ========================================================================== */ /* --------------------------------------------------------------------------- 1. FONT — self-host, subset latin + vietnamese Inter là variable font (một file phủ weight 100-900) nên chỉ 2 file cho toàn bộ thân bài. Be Vietnam Pro chỉ nạp duy nhất weight 800 vì nó chỉ dùng cho tiêu đề — nạp thêm weight nào cũng là byte chết. unicode-range giữ nguyên của Google: trình duyệt tự bỏ qua file vietnamese nếu trang không có ký tự nào trong dải đó. ------------------------------------------------------------------------------ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/bevietnampro-800-vietnamese.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } @font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/bevietnampro-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --------------------------------------------------------------------------- 2. TOKEN ------------------------------------------------------------------------------ */ :root { /* --- Bề mặt ---------------------------------------------------------- */ --c-ink: #101728; /* Mực đêm: chữ chính + nền các màn tối */ --c-ink-soft: #1B2438; /* Nền tối phụ, viền trên nền tối */ --c-smoke: #E6E8E2; /* Khói: nền màn sáng — xám ngả lục, KHÔNG kem */ --c-smoke-deep: #D6D9D1; /* Viền trên nền khói */ --c-paper: #FCFCFA; /* Giấy thẻ: bề mặt nổi */ /* --- Thương hiệu & tín hiệu ------------------------------------------ Hai màu này là hai phía của một cuộc trao: chàm là BẠN (màu logo), hổ phách là NGƯỜI NHẬN (ánh sáng của cái chạm). Không hoán đổi vai. */ --c-indigo: #2F4A83; /* Chàm SMO — nền nút chính, link */ --c-indigo-deep: #243A68; /* hover */ --c-indigo-wash: #E4E9F3; --c-amber: #8A5A0B; /* Hổ phách — CHỮ và VIỀN (4,8:1 trên Khói) */ --c-amber-bright: #D99A22; /* CHỈ cho đồ hoạ: tia chạm, chấm QR. Không đạt AA cho chữ — cấm dùng làm màu chữ */ --c-amber-wash: #F5EEDF; /* --- Chữ -------------------------------------------------------------- */ --c-text: #101728; /* 14,6:1 trên Khói */ --c-text-muted: #565E70; /* 5,3:1 trên Khói */ --c-text-onink: #E9EBE6; /* 15,0:1 trên Mực */ --c-text-onink-mute: #A8AEBC; /* 8,1:1 trên Mực */ /* --- Trạng thái ------------------------------------------------------- */ --c-danger: #A3231D; --c-danger-wash: #FBEBEA; --c-success: #14663C; --c-success-wash: #E6F1EA; --c-focus: #8A5A0B; /* Ring nhìn rõ trên cả Khói lẫn Mực */ /* --- Chữ: họ và thang ------------------------------------------------- Thang 1,25 từ 17px: 17 → 21 → 27 → 33 → 41 → 52 → 64 (làm tròn mắt). */ --ff-display: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif; --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --fs-display: clamp(2.375rem, 1.55rem + 3.6vw, 4rem); /* 38 → 64 */ --fs-h2: clamp(1.75rem, 1.30rem + 1.9vw, 2.5rem); /* 28 → 40 */ --fs-h3: 1.375rem; /* 22 */ --fs-body-lg: 1.1875rem; /* 19 */ --fs-body: 1.0625rem; /* 17 base */ --fs-sm: 0.9375rem; /* 15 */ --fs-label: 0.8125rem; /* 13 */ /* line-height của display là 1.12 chứ không phải 1.05: dưới 1.10 thì dấu hỏi của "Ổ" trong "Ổn định · Bảo mật · Đồng bộ" chạm baseline dòng trên ở cỡ 64px. Đánh đổi có ý thức — mất độ nén, đổi lấy dấu thở được. */ --lh-display: 1.12; --ls-display: -0.028em; --lh-h2: 1.18; --ls-h2: -0.020em; --lh-h3: 1.30; --ls-h3: -0.010em; --lh-body: 1.65; --lh-label: 1.40; --ls-label: 0.08em; --measure: 64ch; /* --- Khoảng cách: bội số 4 ------------------------------------------- */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem; --s-20: 5rem; --s-24: 6rem; --s-32: 8rem; --s-40: 10rem; /* Khoảng trắng giữa các mục là công cụ tạo cảm giác cao cấp — hào phóng và có nhịp. --section-y-lg chỉ dùng cho màn mở và màn đóng trang. */ --section-y: clamp(4rem, 2.2rem + 5.5vw, 8rem); /* 64 → 128 */ --section-y-lg: clamp(5.5rem, 3rem + 7.5vw, 10.5rem);/* 88 → 168 */ --container: 1200px; --gutter: clamp(1.25rem, 0.6rem + 2vw, 2.5rem); /* --- Bo góc ----------------------------------------------------------- --r-card = 14px không tuỳ tiện: thẻ thật bo 3mm trên cạnh 54mm, tỉ lệ 1:18. Thẻ trên trang cao ~250px nên bo 14px mới đúng cảm giác vật lý. */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-card: 14px; --r-lg: 20px; --r-pill: 999px; /* --- Viền -------------------------------------------------------------- */ --bd-hair: 1px solid rgba(16, 23, 40, .10); --bd-solid: 1px solid var(--c-smoke-deep); --bd-strong: 1.5px solid var(--c-ink); --bd-onink: 1px solid rgba(233, 235, 230, .18); /* --- Bóng: thẻ phải có chiều dày thật ---------------------------------- */ --sh-1: 0 1px 2px rgba(16, 23, 40, .06); --sh-2: 0 2px 4px rgba(16, 23, 40, .05), 0 8px 16px rgba(16, 23, 40, .06); --sh-card: 0 1px 1px rgba(16, 23, 40, .05), 0 8px 20px -6px rgba(16, 23, 40, .18), 0 24px 48px -18px rgba(16, 23, 40, .22); --sh-lift: 0 2px 3px rgba(16, 23, 40, .06), 0 12px 28px -8px rgba(16, 23, 40, .20), 0 32px 60px -22px rgba(16, 23, 40, .24); /* --- z-index ----------------------------------------------------------- */ --z-base: 0; --z-seam: 1; --z-card: 2; --z-sticky: 50; --z-nav: 100; --z-overlay: 900; --z-modal: 1000; /* --- Chuyển động ------------------------------------------------------- Chỉ animate transform và opacity. --dur-tap dùng đúng MỘT chỗ trên toàn site: tia chạm ở hero. Animation rải rác là dấu hiệu giao diện do máy sinh — ở đây chuyển động phải có lý do mới được tồn tại. */ --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-tap: 560ms; --ease-out: cubic-bezier(.2, .7, .3, 1); --ease-in-out: cubic-bezier(.5, 0, .2, 1); } /* --------------------------------------------------------------------------- 3. RESET Tối giản: chỉ chạm những chỗ trình duyệt mặc định gây hại. Không dùng reset "*{margin:0}" toàn cục vì nó xoá cả lề mặc định của nội dung trong
và làm mọi thứ phải khai báo lại. ------------------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, picture, svg, video { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } /* Bảng: dùng ở mục so sánh và bảng giá */ table { border-collapse: collapse; width: 100%; } /* --------------------------------------------------------------------------- 4. TYPOGRAPHY NỀN ------------------------------------------------------------------------------ */ body { font-family: var(--ff-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text); background-color: var(--c-smoke); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Chữ Việt nhiều dấu: bật kern + liga giúp dấu bám đúng chân chữ. */ font-kerning: normal; font-variant-ligatures: common-ligatures; /* Không cho bất cứ gì đẩy trang trượt ngang. */ overflow-x: hidden; } h1, h2, h3 { font-family: var(--ff-display); font-weight: 800; /* text-wrap: balance làm tiêu đề 2-3 dòng không bị dòng cuối trơ một từ. Trình duyệt chưa hỗ trợ thì bỏ qua, không ảnh hưởng gì. */ text-wrap: balance; } h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); } p { text-wrap: pretty; } a { color: var(--c-indigo); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--c-indigo-deep); } strong, b { font-weight: 600; } /* --------------------------------------------------------------------------- 5. FOCUS — nhìn thấy rõ và là một phần của thiết kế Trang cũ đặt `outline: none` trên selector `*`, xoá focus ring của toàn site. Ở đây ring hổ phách hiện trên MỌI thành phần tương tác được, và :focus:not(:focus-visible) chỉ tắt ring khi thao tác bằng chuột. ------------------------------------------------------------------------------ */ :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } /* Trên nền Mực, ring hổ phách đậm chìm — dùng bản sáng. */ .on-ink :focus-visible { outline-color: var(--c-amber-bright); } /* --------------------------------------------------------------------------- 6. TÔN TRỌNG prefers-reduced-motion Tắt hẳn thay vì giảm: người bật cờ này thường vì chuyển động gây khó chịu thật sự, không phải vì thấy nó nhanh quá. ------------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }