/* ========================================================================= trebra.vn — DESIGN TOKENS Mọi giá trị ĐO TRỰC TIẾP từ WEB_TRE24326_XEM_OK.pdf bằng script. Artboard bản vẽ 1089px · Container web 1280px (QĐ-13) Quy đổi pt→px: ×4/3 Cỡ chữ TUYỆT ĐỐI theo bản vẽ, chỉ LƯỚI co giãn (QĐ-11). clamp() chỉ để thu nhỏ trên mobile — max luôn = số đo thật. ⚠ FILE CHUẨN. Sửa lỗi vào components.css. ========================================================================= */ :root { /* ---------- MÀU ---------- */ --c-white: #FFFFFF; --c-ink: #1A1A1B; /* KHÔNG phải #000 */ --c-black: #000000; --c-surface: #EFEEEE; --c-border: #E4E4E4; --c-red: #E30617; /* ---------- FONT ---------- Gốc: Oldschool Grotesk Var (Kilotype) — thương mại. ✅ 19/08/2026: Minh xác nhận ĐÃ MUA web license. Font được self-host tại assets/fonts/OldschoolGrotesk-Variable.woff2 và dùng thật trên site. Ghi chú cũ "chưa có web license" đã hết hiệu lực — đừng quay lại Inter vì nó. Giá trị --font-sans dưới đây vẫn để 'Inter' làm nền: @font-face và biến --font-sans thật được ĐÈ trong components.css (~dòng 1057). Quy ước của dự án là không sửa tokens.css, nên phần đè nằm ở đó, không ở đây. Lịch sử: đã đo 12 font thay thế — Figtree 17.9% · Inter 18.8% · PublicSans 19.0% sai khác nét chữ; nay dùng font gốc nên các số này chỉ còn để tham khảo. */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---------- THANG CỠ CHỮ — từng số là SỐ ĐO THẬT ---------- */ --fs-95: clamp(2.75rem, 1.2rem + 6.9vw, 5.95rem); /* 95.2 "Khách hàng nói" */ --fs-86: clamp(2.50rem, 1.2rem + 5.9vw, 5.36rem); /* 85.8 "Branding" */ --fs-81: clamp(2.38rem, 1.2rem + 5.4vw, 5.06rem); /* 81.0 "Hãy làm việc" T5 */ --fs-77: clamp(2.25rem, 1.2rem + 5.0vw, 4.83rem); /* 77.2 "Thiết kế bao bì" */ --fs-72: clamp(2.13rem, 1.2rem + 4.6vw, 4.53rem); /* 72.4 "Hãy làm việc" T1 */ --fs-66: clamp(2.00rem, 1.2rem + 4.0vw, 4.11rem); /* 65.8 "Xin chào !" */ --fs-59: clamp(1.88rem, 1.2rem + 3.4vw, 3.69rem); /* 59.0 "Rất vui" T5 */ --fs-53: clamp(1.75rem, 1.2rem + 2.8vw, 3.30rem); /* 52.8 "Rất vui" T1 */ --fs-47: clamp(1.63rem, 1.2rem + 2.2vw, 2.94rem); /* 47.0 năm case study */ --fs-41: clamp(1.63rem, 1.3rem + 1.7vw, 2.58rem); /* 41.3 số 01/02/03 */ --fs-40: clamp(1.50rem, 1.2rem + 1.6vw, 2.55rem); /* 40.8 dẫn nhập khối */ --fs-36: clamp(1.50rem, 1.3rem + 1.1vw, 2.24rem); /* 35.9 "Lời đề nghị" */ --fs-31: clamp(1.38rem, 1.2rem + 0.9vw, 1.95rem); /* 31.2 "Studio Tre" */ --fs-30: clamp(1.38rem, 1.2rem + 0.9vw, 1.92rem); /* 30.7 tiêu đề About */ --fs-29: clamp(1.31rem, 1.2rem + 0.6vw, 1.80rem); /* 28.8 tiêu đề cột footer */ --fs-28: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem); /* 28.0 tiêu đề phụ About */ --fs-26: clamp(1.19rem, 1.1rem + 0.5vw, 1.61rem); /* 25.7 tiêu đề case study */ --fs-24: clamp(1.13rem, 1.0rem + 0.5vw, 1.51rem); /* 24.1 tiêu đề mục */ --fs-24b: 1.48rem; /* 23.7 logo, nút social */ --fs-21: 1.31rem; /* 21.0 nhãn hub */ --fs-19: 1.21rem; /* 19.4 nhãn case study */ --fs-17: 1.08rem; /* 17.3 nội dung footer */ --fs-16: 1.00rem; /* 16.0 THÂN BÀI */ --fs-15: 0.95rem; /* 15.2 menu header */ --fs-14: 0.87rem; /* 13.9 mục footer */ --fs-13: 0.83rem; /* 13.3 nội dung phụ */ --fs-12: 0.80rem; /* 12.8 nhãn nhỏ */ --fs-9: 0.59rem; /* 9.4 CTA header */ /* Bí danh ngữ nghĩa — template dùng tên này */ --fs-display-1: var(--fs-95); --fs-display-2: var(--fs-86); --fs-display-3: var(--fs-77); --fs-h1: var(--fs-72); --fs-h2: var(--fs-53); --fs-h3: var(--fs-36); --fs-h4: var(--fs-28); --fs-h5: var(--fs-24); --fs-body-lg: var(--fs-19); --fs-body: var(--fs-16); --fs-body-sm: var(--fs-13); --fs-caption: var(--fs-12); --fs-fine: var(--fs-9); /* ---------- DÒNG CÁCH ---------- Đo được: thân bài 19.3 ÷ 16 = 1.21. ⚠ Dùng 1.30: bản vẽ dùng Oldschool Grotesk có dấu thấp; Inter dấu cao hơn, để 1.21 thì "ề" "ộ" chạm dòng trên. Điều chỉnh có chủ đích. */ --lh-tight: 1.02; --lh-heading: 1.12; --lh-body: 1.30; --lh-footer: 1.35; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------- KHOẢNG CÁCH ---------- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6rem; --sp-12: 8rem; /* Nhịp dọc giữa các section — đo trên bản vẽ: T1 trang chủ 64 · 63 · 84 · 95 · 150 · 134 T6 hub 60 · 62 · 88 · 61 · 220 · 118 T2 dịch vụ 166 · 85 · 61 · 206 · 117 T4 giới thiệu 77 · 83 · 163 · 91 · 80 · 65 T8 báo giá 81 · 121 · 102 · 134 Nhịp thường dùng 60–95px; 150–220 chỉ ở vài chỗ chuyển lớn. Giá trị cũ clamp(3rem,6vw,7.5rem) = 86.4px mỗi bên → 173px giữa hai section, gấp 2–3 lần bản vẽ. Đó là lý do trang từng "rộng thênh thang". */ --section-y: clamp(2rem, 2.8vw, 3.5rem); /* 40.3px @1440 → 80px giữa 2 section */ --section-y-lon: clamp(2.75rem, 4.7vw, 5rem); /* 68px mỗi bên → ~136px, khớp nhóm 134–150 */ /* Lề trái đo 63–95px / 1089px = 5.8–8.7% → 74–111px trên 1280px */ --gutter: clamp(1.25rem, 5.8vw, 4.63rem); /* ---------- LƯỚI ---------- */ /* Cột chữ: bản vẽ đo 5 trang đều ra 90,3–92,3% bề rộng khổ (trung bình 91,2%). 80rem = 1280px chỉ ra 88,9% ở khổ 1440. 82rem = 1312px → 91,1%. */ --container: 82rem; /* 1312px */ --container-narrow: 60rem; /* 960px */ --grid-gap: clamp(1rem, 2vw, 1.5rem); /* ---------- TỈ LỆ ẢNH (đo từ bản vẽ) ---------- */ --ar-banner: 2 / 1; /* 1091×549 banner đầu trang */ --ar-blog: 16 / 9; /* 384×216 */ --ar-chuan: 4 / 3; /* 549×412 — phổ biến nhất */ --ar-vuong: 1 / 1; /* 1090×1090 ảnh bao bì trang chủ */ --ar-doi-ngu: 1005 / 1276; /* 0.79 ảnh đội ngũ */ --ar-nhan-su: 251 / 383; /* 0.65 ảnh nhân sự */ --ar-studio: 651 / 413; /* 1.58 ảnh studio */ --radius-sm: 4px; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px; --ease: cubic-bezier(.4,0,.2,1); --dur: 240ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }