/* ==========================================================================
Tinlai Creative — Design System
--------------------------------------------------------------------------
Design read : redesign-overhaul cho site marketing của studio sản xuất
video Nhật -> Việt. Khách: ban lãnh đạo doanh nghiệp Nhật.
Ngôn ngữ corporate-editorial tiết chế.
Style : Editorial Grid / Magazine (#66) + Exaggerated Minimalism (#47)
tra từ DB của skill ui-ux-pro-max. Bố cục text dùng đúng bộ
khí cụ của báo in: drop cap, pull quote, chữ nhiều cột,
nhãn treo lề, độ dài dòng lệch nhau có chủ ý.
Dials : VARIANCE 8 · MOTION 5 · DENSITY 4
Theme lock : SÁNG toàn trang. Hero là khuôn hình phim tối, khối đóng trang
và chân trang là dải tối. Không đảo theme giữa các mục sáng.
Shape lock : góc vuông toàn bộ (radius 0).
Accent lock : đúng MỘT accent, xanh cobalt thương hiệu. Không đỏ.
Type : heading + display = Fraunces weight 400, trục WONK tắt
(đã kiểm tra có subset tiếng Việt). Body Be Vietnam Pro,
nhãn Plus Jakarta Sans. Fraunces italic 600 cho wordmark logo.
Heading nhấn bằng màu, không bằng chữ nghiêng và không đổi
họ chữ giữa câu.
Dash : không dùng gạch dài ở bất kỳ chuỗi nào người dùng đọc.
========================================================================== */
/* ---------- LỚP 1: PRIMITIVE TOKENS (giá trị thô) ---------------------- */
:root {
/* neutral lạnh — một họ xám duy nhất, không pha xám ấm */
--c-white: #ffffff;
--c-paper: #f7f8fa;
--c-paper-2: #eef1f5;
--c-line: #e2e6ec;
--c-line-2: #cbd3dd;
--c-ink: #0f1622; /* off-black, không dùng #000 */
--c-ink-2: #46505f;
--c-ink-3: #6b7583;
/* accent: đúng một họ xanh */
--c-blue: #0b6fd0;
--c-blue-dk: #08508f;
--c-blue-lt: #4aa3f0;
--c-navy: #0a2540;
--c-navy-dk: #06182b;
/* type */
--f-sans: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
--f-label: "Plus Jakarta Sans", system-ui, sans-serif;
--f-mark: "Fraunces", Georgia, serif; /* CHỈ wordmark logo, italic 600 */
/* Chữ hiển thị = Fraunces weight 400, TẮT trục WONK (chủ web chọn sau khi
xem so sánh 6 phương án ở /font-test.html; 600 + WONK bật thì dày và quirky).
---------------------------------------------------------------------
BẢN TIẾNG NHẬT: không cần đổi font. Trình duyệt rơi fallback theo TỪNG
KÝ TỰ, nên trong cùng một câu Fraunces lo chữ Latin/Việt còn Noto Serif JP
lo kana/kanji. Đó là cách xếp font CJK chuẩn: Latin trước, CJK sau.
Việc phải làm khi dựng bản JP chỉ là:
1. thêm tải Noto Serif JP trong Base.astro (đã ghi sẵn ở đó),
2. đặt lang="ja" trên , khối `:lang(ja)` bên dưới tự áp metric.
Không tải Noto Serif JP ở bản tiếng Việt: CSS của nó có 124 lát
unicode-range (~29KB gzip) mà bản Việt không dùng lát CJK nào. */
--f-display: "Fraunces", "Noto Serif JP", Georgia, serif;
/* thang chữ fluid */
--t-xs: .72rem;
--t-sm: .84rem;
--t-base: 1rem;
--t-md: clamp(1.05rem, .4vw + .95rem, 1.2rem);
--t-lg: clamp(1.25rem, 1vw + 1rem, 1.6rem);
--t-xl: clamp(1.6rem, 2vw + 1.1rem, 2.3rem);
--t-2xl: clamp(2rem, 3vw + 1.2rem, 3.1rem);
--t-3xl: clamp(2.3rem, 4.2vw + 1rem, 4.1rem);
/* thang chữ khổ lớn cho ngôn ngữ editorial: tiêu đề section và slogan
phải đủ lớn để chính nó là hình ảnh, không cần đồ trang trí */
--t-head: clamp(1.85rem, 3.5vw, 3.15rem);
--t-mega: clamp(2.1rem, 6vw, 5.4rem);
/* nhịp dọc */
--s-1: .5rem;
--s-2: .875rem;
--s-3: 1.4rem;
--s-4: 2.2rem;
--s-5: 3.4rem;
--s-6: 5rem;
--s-sec: clamp(4.5rem, 9vw, 8rem);
/* motion */
--e-out: cubic-bezier(.16, 1, .3, 1);
--e-io: cubic-bezier(.65, 0, .35, 1);
}
/* ---------- LỚP 2: SEMANTIC TOKENS (đặt tên theo công dụng) ------------ */
:root {
--bg: var(--c-paper);
--bg-raised: var(--c-white);
--bg-sunken: var(--c-paper-2);
--bg-inverse: var(--c-navy-dk);
--text: var(--c-ink);
--text-muted: var(--c-ink-2);
--text-faint: var(--c-ink-3);
--text-on-dark: #e6ecf3;
--text-on-dark-muted: #9fb0c3;
--accent: var(--c-blue);
--accent-press: var(--c-blue-dk);
--accent-on-dark: var(--c-blue-lt);
--rule: var(--c-line);
--rule-strong: var(--c-line-2);
--rule-on-dark: rgba(255, 255, 255, .14);
--radius: 0; /* shape lock */
--wrap: 1300px;
--hdr-h: 72px; /* cap 80px theo skill */
}
/* ---------- RESET ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--f-sans);
font-size: var(--t-base);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
/* Sticky footer: trang ngắn (404, Liên hệ trên màn cao) mà không có cái này
thì chân trang kết thúc trước đáy viewport và lộ nền sáng của body
thành một dải trắng bên dưới. Dùng dvh để không nhảy trên iOS Safari. */
min-height: 100dvh;
display: flex;
flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { display: block; max-width: 100%; }
/* mặc định là inline nên chuỗi height:100% từ khung xuống ![]()
bị đứt. Cho nó thành block chiếm đủ khung để object-fit hoạt động đúng. */
picture { display: block; width: 100%; height: 100%; }
/* Một pattern duy nhất cho mọi khung ảnh: KHUNG giữ tỷ lệ, ẢNH phủ kín khung.
Không đặt aspect-ratio lên ![]()
: thuộc tính height="..." trên thẻ img là
một presentational hint, làm cả hai chiều thành definite và aspect-ratio
bị bỏ qua (ảnh sẽ cao đúng bằng height gốc). */
.cell-media, .split-media, .sw-media { display: block; overflow: hidden; }
.cell-media img, .split-media img, .sw-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
[id] { scroll-margin-top: calc(var(--hdr-h) + 1.5rem); }
h1, h2, h3, h4 {
font-family: var(--f-display);
font-weight: 400;
line-height: 1.26;
letter-spacing: -.014em;
text-wrap: balance;
/* opsz là trục cỡ chữ quang học, dùng bình thường. WONK giữ 0: đó là trục
làm lệch nét kiểu quirky, bật lên là mất vẻ tinh tế. */
font-variation-settings: "opsz" 48, "WONK" 0;
}
/* Khổ display lớn: mở opsz tối đa để nét mảnh hơn, siết chữ lại một chút. */
h1, .display-xl {
font-variation-settings: "opsz" 144, "WONK" 0;
letter-spacing: -.022em;
}
/* Cỡ nhỏ cần thêm chút thân chữ mới đủ rõ, 400 sẽ mảnh quá. */
h3, h4 { font-weight: 500; }
/* ==========================================================================
BẢN TIẾNG NHẬT
Kana/kanji do Noto Serif JP đảm nhiệm qua fallback từng ký tự. Nhưng
metric của Mincho khác Latin, nên phải bù lại chứ không dùng chung số:
- tracking ÂM là sai với CJK, chữ vuông sẽ dính nhau
- Mincho cần leading thoáng hơn Latin
- Noto Serif JP 400 mảnh hơn Fraunces 400 ở cùng cỡ, nâng lên 500
- text-wrap: balance gần như vô dụng với CJK; line-break: strict mới
áp đúng luật kinsoku (không để dấu câu đứng đầu dòng)
========================================================================== */
/* Be Vietnam Pro và Plus Jakarta Sans KHÔNG có glyph tiếng Nhật, nên bản JP
phải chèn Noto Sans JP vào ngăn xếp. Đặt sau font Latin để chữ Latin trong
câu tiếng Nhật (tên riêng, Tinlai, SNS) vẫn giữ đúng dáng của bản Việt. */
:lang(ja) {
--f-sans: "Be Vietnam Pro", "Noto Sans JP", "Segoe UI", system-ui, sans-serif;
--f-label: "Plus Jakarta Sans", "Noto Sans JP", system-ui, sans-serif;
}
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3,
:lang(ja) h4,
:lang(ja) .display-xl,
:lang(ja) .pull,
:lang(ja) .stmt-lead,
:lang(ja) .manifesto-lead,
:lang(ja) .creed p,
:lang(ja) .tenet-k {
letter-spacing: .01em;
line-height: 1.52;
font-weight: 500;
text-wrap: initial;
line-break: strict;
word-break: normal;
}
/* Tiếng Nhật không có dấu cách nên trình duyệt được phép ngắt dòng ở BẤT KỲ
ký tự nào, kể cả giữa cụm chữ đang được tô màu nhấn (「人らしさ」 -> 人ら /
しさ). Cụm nhấn bị cắt đôi thì mất luôn ý nghĩa của việc nhấn. inline-block
biến cả cụm thành một khối không tách được, nên dòng sẽ ngắt TRƯỚC nó. */
:lang(ja) h1 em,
:lang(ja) h2 em { display: inline-block; }
/* Thân bài tiếng Nhật cũng cần leading thoáng hơn và không siết chữ. */
:lang(ja) body,
:lang(ja) p {
line-height: 1.9;
letter-spacing: .01em;
}
/* Drop cap không dùng được với tiếng Nhật: ::first-letter trên một kanji
sẽ cho một khối vuông khổng lồ, không phải hiệu ứng chữ hoa mở đầu. */
:lang(ja) .dropcap::first-letter {
float: none;
font-size: inherit;
line-height: inherit;
padding: 0;
color: inherit;
}
/* ==========================================================================
BỐ CỤC TEXT KIỂU BÁO IN
Bộ khí cụ để chữ tự tạo nhịp, thay vì mọi đoạn đều cùng một khối giữa trang.
========================================================================== */
/* Chữ cái đầu khổ lớn. Chỉ dùng MỘT lần mỗi trang, ở đoạn mở đầu. */
.dropcap::first-letter {
float: left;
font-family: var(--f-display);
font-weight: 500;
font-size: 4.1em;
line-height: .84;
padding: .04em .1em 0 0;
color: var(--accent);
}
/* Câu trích rút ra khỏi mạch văn, có gạch accent phía trên. */
.pull {
font-family: var(--f-display);
font-weight: 500;
font-size: clamp(1.35rem, 2.5vw, 2.15rem);
line-height: 1.38;
letter-spacing: -.018em;
padding-top: var(--s-3);
border-top: 2px solid var(--accent);
max-width: 28ch;
}
/* Nhãn treo ở lề trái, nội dung bên phải. Tạo cột lề đặc trưng của báo in. */
.hang {
display: grid;
grid-template-columns: 11rem minmax(0, 1fr);
gap: clamp(1.2rem, 3vw, 3rem);
align-items: start;
}
.hang-l {
font-family: var(--f-label);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-faint);
padding-top: .45em;
}
.on-dark .hang-l { color: var(--accent-on-dark); }
/* Độ dài dòng lệch nhau có chủ ý, tránh mọi đoạn cùng một bề ngang. */
.measure-short { max-width: 34ch; }
.measure-mid { max-width: 48ch; }
.measure-long { max-width: 66ch; }
/* nhấn trong tiêu đề: CÙNG họ chữ, phân biệt bằng màu + độ đậm.
Không chèn font khác vào giữa câu (mixed-family emphasis là amateur). */
h1 em, h2 em, h3 em {
font-style: normal;
font-weight: 800;
color: var(--accent);
}
p { text-wrap: pretty; }
/* ---------- LAYOUT PRIMITIVES ----------------------------------------- */
.wrap {
width: min(var(--wrap), 100% - clamp(2rem, 7vw, 6rem));
margin-inline: auto;
}
.sec { padding: var(--s-sec) 0; }
.sec-raised { background: var(--bg-raised); border-block: 1px solid var(--rule); }
.sec-sunken { background: var(--bg-sunken); }
.sec-tight { padding-top: 0; }
.skip {
position: absolute;
top: -100%;
left: 1rem;
z-index: 200;
padding: .6rem 1.1rem;
background: var(--bg-inverse);
color: #fff;
font-family: var(--f-label);
font-size: var(--t-sm);
}
.skip:focus { top: 1rem; }
/* Nhãn nhỏ chữ hoa. NGÂN SÁCH: tối đa 1 nhãn / 3 section.
Đếm thủ công trước khi ship. */
.label {
font-family: var(--f-label);
font-size: var(--t-xs);
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--text-faint);
}
/* ---------- TYPOGRAPHY BLOCKS ----------------------------------------- */
/* Tiêu đề section dùng thang chữ lớn để chính nó là hình ảnh của mục. */
.h-sec {
font-size: var(--t-head);
letter-spacing: -.024em;
max-width: 26ch;
}
/* Tiêu đề + phần dẫn xếp DỌC, không dùng kiểu "tiêu đề trái, đoạn nhỏ
trôi nổi bên phải" (split-header) — skill ban cái đó. */
.sub-sec {
margin-top: var(--s-3);
max-width: 58ch;
color: var(--text-muted);
font-size: var(--t-md);
}
.prose > * + * { margin-top: var(--s-3); }
.prose p { color: var(--text-muted); max-width: 62ch; }
.prose strong { color: var(--text); font-weight: 600; }
/* ---------- BUTTONS & LINKS ------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
white-space: nowrap; /* CTA không được xuống 2 dòng */
padding: .9rem 1.75rem;
border: 1px solid transparent;
border-radius: var(--radius);
font-family: var(--f-label);
font-size: var(--t-sm);
font-weight: 600;
letter-spacing: .04em;
position: relative;
overflow: hidden;
transition: background .3s var(--e-io), color .3s var(--e-io),
border-color .3s var(--e-io), transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn > * { position: relative; z-index: 1; }
/* nền accent + chữ trắng: 4.6:1, đạt WCAG AA */
.btn-solid { background: var(--accent); color: #fff; }
.btn-solid::before {
content: "";
position: absolute;
inset: 0;
background: var(--c-navy);
transform: translateY(101%);
transition: transform .38s var(--e-io);
}
.btn-solid:hover::before { transform: translateY(0); }
/* nút phụ trên nền sáng: viền đậm, chữ mực. Tương phản 13:1 */
.btn-ghost { color: var(--text); border-color: var(--rule-strong); }
.btn-ghost:hover { background: var(--text); border-color: var(--text); color: #fff; }
/* trên ảnh tối: nền trắng đặc, không dùng nút trong suốt trên ảnh */
.btn-onmedia { background: #fff; color: var(--c-navy-dk); }
.btn-onmedia:hover { background: var(--accent); color: #fff; }
.btn-ghostmedia { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghostmedia:hover { background: #fff; color: var(--c-navy-dk); border-color: #fff; }
.tlink {
display: inline-flex;
align-items: center;
gap: .5rem;
font-family: var(--f-label);
font-size: var(--t-sm);
font-weight: 600;
color: var(--accent);
padding-bottom: .3rem;
border-bottom: 1px solid var(--rule-strong);
transition: color .3s, border-color .3s, gap .3s var(--e-out);
}
.tlink:hover { color: var(--accent-press); border-bottom-color: var(--accent); gap: .85rem; }
.tlink svg { flex: none; transition: transform .3s var(--e-out); }
.tlink:hover svg { transform: translateX(3px); }
.on-dark .tlink,
.close .tlink { color: var(--accent-on-dark); border-bottom-color: var(--rule-on-dark); }
.on-dark .tlink:hover,
.close .tlink:hover { color: #fff; border-bottom-color: #fff; }
/* ---------- HEADER ---------------------------------------------------- */
/* Trạng thái nền do IntersectionObserver quyết định (xem main.js).
KHÔNG dùng scroll listener. */
.hdr {
position: fixed;
inset: 0 0 auto;
z-index: 100;
border-bottom: 1px solid transparent;
transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.hdr-in {
height: var(--hdr-h);
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.hdr.solid {
background: rgba(247, 248, 250, .92);
backdrop-filter: blur(14px);
border-bottom-color: var(--rule);
}
/* logo: wordmark serif (quyết định của chủ web, giữ nguyên) */
.mark {
display: flex;
flex-direction: column;
line-height: 1.08;
color: var(--text);
transition: color .35s ease;
}
.mark b {
font-family: var(--f-mark);
font-style: italic;
font-weight: 600;
font-size: 1.5rem;
letter-spacing: -.012em;
/* italic có chữ có nét xuống: chừa chỗ để không bị cắt chân */
line-height: 1.1;
padding-bottom: .04em;
}
.mark span {
font-family: var(--f-label);
font-size: .55rem;
font-weight: 600;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--text-faint);
margin-top: .3rem;
transition: color .35s ease;
}
.nav { display: flex; gap: 1.9rem; }
.nav a {
position: relative;
padding: .3rem 0;
font-family: var(--f-label);
font-size: var(--t-sm);
font-weight: 500;
color: var(--text-muted);
transition: color .3s;
}
.nav a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1.5px;
background: var(--accent);
transform: scaleX(0);
transform-origin: right;
transition: transform .35s var(--e-io);
}
.nav a:hover { color: var(--text); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--accent); }
.hdr-cta { padding: .68rem 1.3rem; }
/* nhóm bên phải header: chọn ngôn ngữ + nút Liên hệ.
Gom lại để khi ẩn nút CTA ở mobile, bộ chọn ngôn ngữ vẫn đứng nguyên chỗ. */
.hdr-end { display: flex; align-items: center; gap: 1.2rem; }
/* ---------- CHỌN NGÔN NGỮ ---------------------------------------------- */
/* Không đóng khung, không nền: chỉ hai lá cờ. Cờ đang tắt bị khử màu và mờ đi,
cờ đang bật giữ nguyên màu. Nhờ vậy nhận ra ngôn ngữ hiện tại bằng MÀU chứ
không phải bằng một hộp viền, đúng ngôn ngữ thị giác chung của site. */
.lang-sw { display: flex; align-items: center; }
.lang-op {
display: inline-flex;
align-items: center;
gap: .4rem;
/* đệm dọc để vùng bấm cao khoảng 36px, cờ 14px thôi thì quá nhỏ để chạm */
padding: .55rem 0;
font-family: var(--f-label);
font-size: .68rem;
font-weight: 600;
letter-spacing: .1em;
color: var(--text-muted);
opacity: .7;
transition: opacity .3s, color .3s;
}
.lang-op + .lang-op {
margin-left: .6rem;
padding-left: .6rem;
border-left: 1px solid var(--rule);
}
.lang-flag {
display: inline-flex;
line-height: 0;
/* cờ Nhật gần như toàn trắng: không có viền là nó biến mất trên nền sáng */
box-shadow: 0 0 0 1px rgba(10, 37, 64, .18);
filter: saturate(0);
transition: filter .3s;
}
.lang-op:hover { opacity: 1; color: var(--text); }
.lang-op:hover .lang-flag { filter: none; }
.lang-op[aria-current="true"] { opacity: 1; color: var(--text); }
.lang-op[aria-current="true"] .lang-flag { filter: none; }
/* hero tối: header trong suốt lúc ở đỉnh trang, chữ trắng */
body.has-media-hero .hdr:not(.solid) { border-bottom-color: rgba(255, 255, 255, .18); }
body.has-media-hero .hdr:not(.solid) .lang-op { color: rgba(255, 255, 255, .8); }
body.has-media-hero .hdr:not(.solid) .lang-op:hover,
body.has-media-hero .hdr:not(.solid) .lang-op[aria-current="true"] { color: #fff; }
body.has-media-hero .hdr:not(.solid) .lang-op + .lang-op { border-left-color: rgba(255, 255, 255, .28); }
body.has-media-hero .hdr:not(.solid) .lang-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); }
body.has-media-hero .hdr:not(.solid) .mark { color: #fff; }
body.has-media-hero .hdr:not(.solid) .mark span { color: rgba(255, 255, 255, .66); }
body.has-media-hero .hdr:not(.solid) .nav a { color: rgba(255, 255, 255, .9); }
body.has-media-hero .hdr:not(.solid) .nav a:hover { color: #fff; }
body.has-media-hero .hdr:not(.solid) .nav a[aria-current="page"] { color: #fff; }
body.has-media-hero .hdr:not(.solid) .burger span { background: #fff; }
.burger {
display: none;
flex-direction: column;
gap: 5px;
padding: .5rem;
}
.burger span {
width: 23px;
height: 2px;
background: var(--text);
transition: transform .3s var(--e-io), opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu {
position: fixed;
inset: var(--hdr-h) 0 0 0;
z-index: 90;
background: var(--bg-raised);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s-3);
padding: var(--s-4) 1.5rem;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s ease;
}
.menu.open { opacity: 1; visibility: visible; }
/*