/* ========================================================================== TSK / TRIZ OpenCourseWare - Core Design Tokens & Theme CSS Single Source of Truth for Palette, Typescale, Typography & Components ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font tự lưu trữ (self-hosted) - giấy phép SIL OFL 1.1: miễn phí cho mọi mục đích, kể cả thương mại. Be Vietnam Pro (chữ chính, thiết kế riêng cho tiếng Việt) + JetBrains Mono (mã / số liệu). Không phụ thuộc Google Fonts hay font cài sẵn trên máy người dùng. -------------------------------------------------------------------------- */ @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro-vietnamese-400-normal.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:400;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-400-normal.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:500;font-display:swap;src:url('../fonts/be-vietnam-pro-vietnamese-500-normal.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:500;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-500-normal.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:600;font-display:swap;src:url('../fonts/be-vietnam-pro-vietnamese-600-normal.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:600;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-600-normal.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:700;font-display:swap;src:url('../fonts/be-vietnam-pro-vietnamese-700-normal.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:700;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-700-normal.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/be-vietnam-pro-vietnamese-800-normal.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/be-vietnam-pro-latin-ext-800-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-800-normal.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:italic;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro-vietnamese-400-italic.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:italic;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-ext-400-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Be Vietnam Pro';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/be-vietnam-pro-latin-400-italic.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-vietnamese-400-normal.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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jetbrains-mono-latin-400-normal.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-vietnamese-700-normal.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:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jetbrains-mono-latin-700-normal.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. Design Tokens (:root) -------------------------------------------------------------------------- */ :root { /* Brand Color Palette (Light-Only #0056b3) */ --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #b9d9f5; --brand-300: #85bced; --brand-400: #4d97df; --brand-500: #1f74cc; --brand-600: #0056b3; /* Primary Anchor Brand Blue */ --brand-700: #00468f; --brand-800: #06376b; --brand-900: #0a2f57; --brand-950: #07223f; --brand: #0056b3; --bg: #f1f5f9; --ink: #1e293b; --sub: #64748b; --line: #e2e8f0; /* Size Scale */ --tsk-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --tsk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-display: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); /* 36px -> 56px */ --fs-h1: clamp(1.75rem, 1.35rem + 2.0vw, 2.625rem); /* 28px -> 42px */ --fs-h2: clamp(1.375rem, 1.15rem + 1.2vw, 2.0rem); /* 22px -> 32px */ --fs-h3: clamp(1.125rem, 1.0rem + 0.6vw, 1.5rem); /* 18px -> 24px */ --fs-h4: clamp(1.0rem, 0.95rem + 0.25vw, 1.125rem); /* 16px -> 18px */ --fs-lead: clamp(1.0625rem, 1.0rem + 0.3vw, 1.1875rem);/* 17px -> 19px */ --fs-body: 1rem; /* 16px */ --fs-sub: 0.875rem; /* 14px */ --fs-xs: 0.75rem; /* 12px */ /* Line Heights */ --lh-tight: 1.15; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Tracking / Letter Spacing */ --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.03em; } /* Typography Utility Mappings */ .heading-display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: 800; } .heading-h1, h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 800; } .heading-h2, h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; font-weight: 700; } .heading-h3, h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.01em; font-weight: 600; } .heading-h4, h4 { font-size: var(--fs-h4); line-height: var(--lh-normal); font-weight: 600; } .text-lead { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--sub); } .text-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); } .text-sub { font-size: var(--fs-sub); line-height: var(--lh-normal); } .text-xs { font-size: var(--fs-xs); line-height: var(--lh-normal); letter-spacing: var(--tracking-wide); text-transform: uppercase; } /* -------------------------------------------------------------------------- 3. Global Base Styles -------------------------------------------------------------------------- */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: var(--tsk-font); color: var(--ink); background-color: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code, pre, kbd, .font-mono { font-family: var(--tsk-mono); } /* Heading Typography Mapping */ .heading-display { font-size: var(--fs-display); font-weight: 800; line-height: 1.15; } .heading-h1, h1 { font-size: var(--fs-h1); font-weight: 800; } .heading-h2, h2 { font-size: var(--fs-h2); font-weight: 700; } .heading-h3, h3 { font-size: var(--fs-h3); font-weight: 600; } .heading-h4, h4 { font-size: var(--fs-h4); font-weight: 600; } /* -------------------------------------------------------------------------- Icon Lucide (assets/vendor/lucide.min.js) - kích thước theo cỡ chữ, màu theo chữ -------------------------------------------------------------------------- */ :where(svg.lucide) { width: 1em; height: 1em; } svg.lucide { display: inline-block; vertical-align: -0.125em; flex: none; } .tsk-spin { animation: tsk-spin 1s linear infinite; } @keyframes tsk-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- Hero / banner dùng chung (phong cách triz-co-ban): navy → teal + ánh xanh lá -------------------------------------------------------------------------- */ :root { --th-navy: #033049; --th-navy-soft: #0a3d57; --th-accent: #2ee081; --th-accent-dk: #17b866; --tsk-card-radius: 14px; --tsk-shadow: 0 1px 2px rgba(3,48,73,.05), 0 4px 14px rgba(3,48,73,.06); --tsk-shadow-lg: 0 12px 40px rgba(3,48,73,.16); --tsk-hero: radial-gradient(circle at 92% 0%, rgba(46,224,129,.24), transparent 38%), linear-gradient(120deg, var(--th-navy), var(--th-navy-soft)); } .tsk-hero { position: relative; overflow: hidden; color: #fff; text-align: center; background: var(--tsk-hero); border-radius: 18px; padding: 28px 28px 30px; margin: 0 0 20px; box-shadow: var(--tsk-shadow); } .tsk-hero .tsk-tag { display: inline-flex; align-items: center; gap: 7px; background: rgba(46,224,129,.16); color: var(--th-accent); font-weight: 700; font-size: 11px; padding: 4px 12px; border-radius: 999px; margin-bottom: 10px; letter-spacing: .03em; } .tsk-hero h1 { margin: 0 0 6px; color: #fff; font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } .tsk-hero p { margin: 0 auto; max-width: 820px; color: #c8dbe5; font-size: var(--fs-sub); line-height: 1.6; } ::selection { background: var(--th-accent); color: var(--th-navy); }