/* ================================================================
thanhtaichinh.vn — TYPOGRAPHY DESIGN SYSTEM
----------------------------------------------------------------
Single source of truth cho typography toàn site.
Created: 2026-05-07 | Owner: Vũ Văn Thành
Định vị: editorial luxury / private-bank brochure
----------------------------------------------------------------
Family stack:
- Fraunces (display) opsz 9..144, weight 700/900
- Inter (body) weight 400/500/600/700
- JetBrains Mono (eyebrow) weight 500
- Playfair Display (quote) weight 400/700, ital 0/1
----------------------------------------------------------------
Cách dùng (chèn vào mỗi trang):
1)
2)
3)
4)
================================================================ */
/* ================================================================
1) FALLBACK METRICS OVERRIDE — chống CLS khi font swap
----------------------------------------------------------------
Khi Fraunces/Inter chưa load xong, browser dùng Georgia/system-ui.
Metrics khác nhau → text reflow → CLS jump. Override metrics
của fallback để mô phỏng đúng kích thước font đích.
Số liệu lấy từ font-metrics generator (Capsize / Malte Ubl tool).
================================================================ */
@font-face {
font-family: "Fraunces Fallback";
src: local("Georgia");
size-adjust: 105%;
ascent-override: 92%;
descent-override: 25%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("Helvetica Neue");
size-adjust: 107%;
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}
@font-face {
font-family: "JetBrains Mono Fallback";
src: local("Menlo"), local("Consolas"), local("Courier New");
size-adjust: 102%;
ascent-override: 88%;
descent-override: 22%;
line-gap-override: 0%;
}
/* ================================================================
2) DESIGN TOKENS — type scale + family + feature settings
----------------------------------------------------------------
Dùng clamp(MIN, FLUID, MAX) để fluid responsive 320–1920px.
Đặt tất cả token ở :root để override dễ qua media query nếu cần.
================================================================ */
:root {
/* ---- Family stack (luôn có fallback metrics override) ---- */
--font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
--font-body: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", "SF Mono", Menlo, Consolas, monospace;
--font-quote: "Playfair Display", Georgia, "Times New Roman", serif;
/* ---- Type scale fluid (clamp min — preferred — max) ---- */
/* Hero H1: 40–88px */
--fs-hero: clamp(2.5rem, 5vw + 1rem, 5.5rem);
/* Section H2: 28–44px */
--fs-section: clamp(1.75rem, 2vw + 1rem, 2.75rem);
/* H3: 20–26px */
--fs-h3: clamp(1.25rem, 0.5vw + 1rem, 1.625rem);
/* H4: 17–20px */
--fs-h4: clamp(1.0625rem, 0.25vw + 1rem, 1.25rem);
/* Body: 15–17px */
--fs-body: clamp(0.9375rem, 0.25vw + 0.875rem, 1.0625rem);
/* Small / caption: 13px */
--fs-caption: 0.8125rem;
/* Eyebrow / label mono: 11px */
--fs-eyebrow: 0.6875rem;
/* Number display (metric cards lớn): 32–56px */
--fs-metric: clamp(2rem, 2vw + 1.25rem, 3.5rem);
/* ---- Line heights ---- */
--lh-display: 1.05; /* hero, section title — tight */
--lh-h3: 1.2;
--lh-body: 1.65; /* body — generous, editorial */
--lh-caption: 1.5;
/* ---- Letter spacing ---- */
--ls-display: -0.02em; /* tight, modern serif */
--ls-body: -0.005em;
--ls-eyebrow: 0.32em; /* uppercase mono — wide */
--ls-button: 0.12em;
}
/* ================================================================
3) BASE — apply mặc định lên html/body
----------------------------------------------------------------
Mọi text trong page mặc định dùng Inter + body scale.
Override sau bằng helper class hoặc selector cụ thể.
================================================================ */
html {
/* Bật font features Inter cho body: */
/* ss01 — single-storey alt 'a' (modern look) */
/* cv11 — alt curly 'l' (tránh nhầm với 'I' / '1') */
/* tnum — tabular numbers (cột số bảng / dashboard align) */
font-feature-settings: "ss01" 1, "cv11" 1, "tnum" 1, "kern" 1, "liga" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
}
/* ================================================================
4) HEADING DEFAULTS — H1/H2/H3 dùng Fraunces display
----------------------------------------------------------------
font-variation-settings điều khiển axis "opsz" của Fraunces:
- 144 = display (hero, super tight)
- 48 = section title
- 14 = body-style (không dùng ở đây)
================================================================ */
h1, .h1, .text-display-hero {
font-family: var(--font-display);
font-size: var(--fs-hero);
font-weight: 900;
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
font-variation-settings: "opsz" 144;
text-wrap: balance;
}
h2, .h2, .text-display-section {
font-family: var(--font-display);
font-size: var(--fs-section);
font-weight: 700;
line-height: var(--lh-display);
letter-spacing: -0.015em;
font-variation-settings: "opsz" 96;
text-wrap: balance;
}
h3, .h3 {
font-family: var(--font-display);
font-size: var(--fs-h3);
font-weight: 700;
line-height: var(--lh-h3);
letter-spacing: -0.01em;
font-variation-settings: "opsz" 48;
}
h4, .h4 {
font-family: var(--font-body);
font-size: var(--fs-h4);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.005em;
}
/* ================================================================
5) HELPER CLASSES — gắn cảm giác editorial cho từng vai trò
----------------------------------------------------------------
Dùng class này cho ELEMENT KHÔNG phải heading, ví dụ:
- No.01 / Editorial
- "Tài chính là ngôn ngữ..."
- CPI · 2026
================================================================ */
/* Eyebrow / kicker / số đánh dấu — JetBrains Mono uppercase */
.text-eyebrow {
font-family: var(--font-mono);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
line-height: 1.4;
}
/* Mono inline (số liệu dashboard, "TEL ·", "No.01") */
.text-mono {
font-family: var(--font-mono);
font-weight: 500;
font-feature-settings: "tnum" 1, "ss01" 1;
}
/* Tabular numbers — chuyên cho cột số align */
.text-tabular {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Quote / credo — Playfair Display italic */
.text-quote {
font-family: var(--font-quote);
font-style: italic;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
/* Signature dưới quote — Playfair Display italic 400 */
.text-signature {
font-family: var(--font-quote);
font-style: italic;
font-weight: 400;
font-size: var(--fs-h4);
letter-spacing: 0.05em;
}
/* Metric number lớn (hero stats / dashboard) */
.text-metric {
font-family: var(--font-display);
font-size: var(--fs-metric);
font-weight: 900;
line-height: 1;
letter-spacing: -0.025em;
font-variation-settings: "opsz" 144;
font-feature-settings: "tnum" 1;
}
/* Caption / chú thích nhỏ */
.text-caption {
font-family: var(--font-body);
font-size: var(--fs-caption);
line-height: var(--lh-caption);
letter-spacing: 0;
color: inherit;
opacity: 0.8;
}
/* Button label — uppercase Inter 600 letter-spacing rộng */
.text-button {
font-family: var(--font-body);
font-size: var(--fs-caption);
font-weight: 600;
letter-spacing: var(--ls-button);
text-transform: uppercase;
line-height: 1;
}
/* Link editorial — gold underline grow on hover (cần biến --gold ở root site) */
.link-editorial {
color: inherit;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.link-editorial:hover,
.link-editorial:focus-visible {
background-size: 100% 1px;
}
/* ================================================================
6) RESPECT REDUCED MOTION
================================================================ */
@media (prefers-reduced-motion: reduce) {
.link-editorial {
transition: none;
}
}
/* ================================================================
7) BRAND FLAG — cờ Việt Nam vải lượn sóng từ trái sang phải
----------------------------------------------------------------
Animation thực hiện trong SVG inline qua +
— KHÔNG dùng CSS transform. Lý do: sóng vải
chạy theo trục X cần biến dạng cục bộ từng vùng pixel khác nhau,
transform CSS áp dụng đồng đều cả element nên không tạo sóng được.
Cờ chỉ hiện ở html[lang="vi"]. Tỷ lệ 3:2, đỏ #DA251D, vàng #FFFF00.
================================================================ */
.brand-flag {
width: 56px;
height: 38px;
vertical-align: middle;
flex-shrink: 0;
display: none; /* mặc định ẩn — chỉ hiện khi lang VI */
overflow: visible; /* cho displacement effect không bị crop */
/* CSS layer "tung bay": cờ căng vải, mép phải hất lên xuống rõ,
compound với SVG filter biên độ lớn để cờ tung bay trong gió. */
transform-origin: left center;
animation: flag-fly-strong 5.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
will-change: transform;
}
html[lang="vi"] .brand-flag { display: inline-block; }
/* Override gap của .brand-link cũ (10px) — cờ 56px to nên cần khoảng
trống lớn hơn. specificity a.brand-link > .brand-link nội bộ. */
a.brand-link { gap: 18px; }
/* Cờ tung bay — biên độ lớn:
- translateY ±3px (mép phải hất lên xuống)
- rotate ±2° (cả lá cờ nghiêng theo gió)
- scaleX 0.96–1.04 (vải căng/co theo chiều ngang)
cubic-bezier easing tạo "snap" — gió đột ngột thay vì smooth. */
@keyframes flag-fly-strong {
0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
25% { transform: translateY(-3px) rotate(-2deg) scale(0.97, 1.02); }
50% { transform: translateY(0) rotate(0.5deg) scale(1.04, 0.98); }
75% { transform: translateY(3px) rotate(2deg) scale(0.96, 1.03); }
}
/* Reduced motion: tắt cả CSS drift lẫn SVG animate */
@media (prefers-reduced-motion: reduce) {
.brand-flag { animation: none; }
.brand-flag .flag-animate { display: none; }
}
/* ================================================================
8) PRINT — fallback an toàn cho ấn phẩm in
================================================================ */
@media print {
body { font-family: Georgia, "Times New Roman", serif; }
h1, h2, h3, .text-display-hero, .text-display-section {
font-family: Georgia, serif;
font-weight: 700;
}
.brand-flag { display: none !important; }
}