@charset "UTF-8";
/* Google Fonts: Bai Jamjuree + Poppins */
@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');
/* ==========================================
BASE.CSS – Design Tokens + Reset + Primitives
BEM: Block--modifier | Block__element
==========================================
🔒 FROZEN: v1.0.1 | 2026-02-09
Không chỉnh sửa file này. Mọi customization
thực hiện trong style.css hoặc file riêng.
📐 SPACING SYSTEM GUIDELINES
─────────────────────────────────────────
Design System: 4px base unit spacing scale
Scale:
--space-0: 4px | Micro gaps, tight padding
--space-1: 8px | Elements trong component
--space-2: 16px | Standard paragraph/element spacing
--space-3: 24px | Block/group spacing
--space-4: 32px | Component gaps
--space-5: 40px | Large component spacing
--space-6: 48px | Section padding (mobile)
--space-7: 64px | Section padding (tablet)
--space-8: 80px | Section padding (desktop)
Responsive Strategy:
• Desktop: space-8 for section padding
• Tablet: space-7 for section padding
• Mobile: space-6 for section padding
Utilities Available:
• Margin: .mt-{0-8}, .mb-{0-8}, .ml-{0-4}, .mr-{0-4}, .mx-{0-4}, .my-{0-6}
• Padding: .pt-{0-6}, .pb-{0-6}, .px-{0-4}, .py-{0-6}, .p-{0-6}
• Gap: .gap-{0-6} (for flexbox/grid)
Best Practices:
✓ Use spacing utilities instead of inline styles
✓ Use design tokens for all spacing (never hardcode px)
✓ Follow hierarchy: micro → element → block → component → section
✗ Don't create custom spacing values outside the scale
✗ Don't use arbitrary pixel values in components
========================================== */
/* ========== 1. DESIGN TOKENS ========== */
:root {
/* ---- Brand Colors ---- */
--color-primary: #0a20d6;
--color-secondary: #1da9f8;
--color-accent: #51dff5;
/* ---- Text Colors (WCAG AAA Optimized) ---- */
--color-text: #212121; /* Body: 16.1:1 contrast */
--color-text-heading: #1a1a2e; /* Headings: authoritative, professional */
--color-text-light: #4a5568; /* Secondary: 7.0:1 (AAA) */
--color-text-muted: #5a6370; /* Tertiary: 5.74:1 (AA) */
/* ---- Surface Colors ---- */
--color-bg: #ffffff;
--color-bg-soft: #f8f9fa;
--color-bg-muted: #ecf0f1;
--color-border: #bdc3c7;
/* ---- Feedback Colors ---- */
--color-success: #27ae60;
--color-warning: #f39c12;
--color-danger: #e74c3c;
--color-info: #3498db;
/* ---- Layout ---- */
--container-width: 75rem; /* 1200px */
--container-narrow: 60rem; /* 960px */
--mobile-nav-height: 64px; /* height of fixed mobile bottom nav */
/* ---- Spacing Scale (4px base unit) ----
Quy tắc sử dụng spacing:
• Micro gap → --space-0 (4px) - Khoảng cách tối thiểu, padding trong inline elements
• Trong block → --space-1 (8px) - Gap giữa các elements liền kề trong 1 component
• Giữa elements → --space-2 (16px) - Spacing chuẩn giữa các paragraph, list items
• Giữa blocks → --space-3 (24px) - Khoảng cách giữa các nhóm nội dung
• Component gap → --space-4 (32px) - Gap giữa các components trong 1 section
• Section padding → --space-6 (48px) - Vertical padding cho sections (mobile)
• Section padding → --space-7 (64px) - Vertical padding cho sections (tablet)
• Section padding → --space-8 (80px) - Vertical padding cho sections (desktop)
Best practices:
• Ưu tiên dùng spacing utilities (.mt-2, .px-3, .gap-4) thay vì inline styles
• Dùng .container cho max-width + horizontal padding nhất quán
• Mobile: giảm spacing scale đi 1-2 bậc (space-8 → space-6)
• Không hardcode px values - luôn dùng design tokens
----------------------------------------- */
--space-0: 0.25rem; /* 4px */
--space-1: 0.5rem; /* 8px */
--space-2: 1rem; /* 16px */
--space-3: 1.5rem; /* 24px */
--space-4: 2rem; /* 32px */
--space-5: 2.5rem; /* 40px */
--space-6: 3rem; /* 48px */
--space-7: 4rem; /* 64px */
--space-8: 5rem; /* 80px */
/* ---- Border Radius ---- */
--radius-sm: 0.5rem; /* 8px */
--radius-md: 1rem; /* 16px */
--radius-lg: 1.5rem; /* 24px */
--radius-xl: 2rem; /* 32px */
/* ---- Shadows ---- */
--shadow-sm: 0 2px 4px rgba(44, 62, 80, 0.08);
--shadow-md: 0 4px 8px rgba(44, 62, 80, 0.12);
--shadow-lg: 0 8px 16px rgba(44, 62, 80, 0.15);
--shadow-xl: 0 12px 24px rgba(44, 62, 80, 0.18);
/* ---- Typography ---- */
--font-family:
'Bai Jamjuree', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 1.875rem;
--font-size-4xl: 2.25rem;
--font-size-5xl: 3rem;
--line-height-tight: 1.25;
--line-height-base: 1.6;
--line-height-relaxed: 1.75;
/* ---- Motion ---- */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
/* ---- Z-Index Scale ---- */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-overlay: 400;
--z-offcanvas: 500;
--z-modal: 600;
--z-toast: 700;
/* ---- Responsive Breakpoints ---- */
--breakpoint-sm: 30em; /* 480px */
--breakpoint-md: 48em; /* 768px */
--breakpoint-lg: 64em; /* 1024px */
--breakpoint-xl: 75em; /* 1200px */
--breakpoint-2xl: 90em; /* 1440px */
}
/* ========== 2. MODERN RESET ========== */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 100%; /* 16px baseline */
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
overflow-x: hidden;
}
/* Mobile: Scale up base font for better readability */
@media (max-width: 768px) {
html {
font-size: 106.25%; /* 17px - improves mobile readability */
}
}
body {
font-family: var(--font-family);
font-size: var(--font-size-base); /* 1rem = 16px */
line-height: var(--line-height-base); /* 1.6 */
color: var(--color-text);
background: var(--color-bg);
min-height: 100dvh;
display: flex;
flex-direction: column;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body > main {
flex: 1 0 auto;
}
body > #footer-include,
body > footer {
margin-top: auto;
}
/* Media elements */
img,
picture,
video,
canvas,
svg {
max-width: 100%;
height: auto;
display: block;
}
/* Form elements inherit font */
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
}
fieldset {
border: none;
}
legend {
padding: 0;
}
/* Tables */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Horizontal rules */
hr {
border: none;
border-top: 1px solid var(--color-border);
height: 0;
color: inherit;
}
/* Accessible focus ring */
:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* Dialog */
dialog {
padding: 0;
}
/* Summary */
summary {
display: list-item;
cursor: pointer;
}
/* Remove default text-decoration on abbreviations */
abbr[title] {
text-decoration: underline dotted;
cursor: help;
}
/* Prevent sub/sup from affecting line-height */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Preformatted text */
pre,
code,
kbd,
samp {
font-family:
ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 1em;
}
pre {
overflow-x: auto;
}
/* ========== 3. TYPOGRAPHY ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
line-height: var(--line-height-tight);
color: var(--color-text-heading);
letter-spacing: 0.02em;
text-wrap: balance;
}
h1 {
font-size: var(--font-size-5xl); /* 3rem */
margin-top: 0;
margin-bottom: var(--space-3); /* 24px */
}
h2 {
font-size: var(--font-size-4xl); /* 2.25rem */
margin-top: var(--space-6); /* 48px - section m?>i */
margin-bottom: var(--space-2); /* 16px */
}
h3 {
font-size: var(--font-size-3xl); /* 1.875rem */
margin-top: var(--space-4); /* 32px - sub-section */
margin-bottom: var(--space-2); /* 16px */
}
h4 {
font-size: var(--font-size-2xl); /* 1.5rem */
font-weight: 600;
margin-top: var(--space-3); /* 24px */
margin-bottom: var(--space-1); /* 8px */
}
h5 {
font-size: var(--font-size-xl); /* 1.25rem */
font-weight: 600;
margin-top: var(--space-3); /* 24px */
margin-bottom: var(--space-1); /* 8px */
}
h6 {
font-size: var(--font-size-lg); /* 1.125rem */
font-weight: 600;
margin-top: var(--space-3); /* 24px */
margin-bottom: var(--space-1); /* 8px */
}
/* Lo?i b? margin-top khi heading l? ph?n t? ?'?u ti?n */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* ---------- Block text ---------- */
p {
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-2); /* 16px */
text-wrap: pretty;
}
p:last-child {
margin-bottom: 0;
}
/* ---------- Section Headers ----------
* Header containers chứa h2/h3 + p subtitle
* Tự động tạo khoảng cách với content bên dưới
* ----------------------------------------- */
.section-header,
.pricing-header {
margin-bottom: var(--space-4); /* 32px giữa header và content */
}
.section-header h2,
.pricing-header h2 {
margin-bottom: var(--space-2); /* 16px giữa title và subtitle */
}
.section-header p,
.pricing-header p {
margin-bottom: 0; /* Loại bỏ default margin-bottom của p */
}
/* ---------- Lists ---------- */
ul,
ol {
padding-left: var(--space-4); /* 32px ??" indent for bullets/numbers */
margin-bottom: var(--space-2); /* 16px */
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
li {
margin-bottom: var(--space-1); /* 8px */
line-height: var(--line-height-relaxed);
}
li:last-child {
margin-bottom: 0;
}
/* Nested lists */
li > ul,
li > ol {
margin-bottom: 0;
}
/* Navigation lists ??" strip content styles for UI use */
nav ul,
nav ol {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
nav li {
margin-bottom: 0;
}
/* ---------- Sectioning elements ---------- */
section,
article {
padding-block: var(--space-6); /* 48px top & bottom */
}
aside {
padding: var(--space-3); /* 24px */
}
/* ---------- Figure ---------- */
figure {
margin-bottom: var(--space-3); /* 24px */
}
figcaption {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
/* ---------- Inline text ---------- */
strong,
b {
font-weight: 700;
}
small {
font-size: var(--font-size-sm);
color: var(--color-text-light);
}
mark {
background-color: #fff3cd;
padding: 0.125em 0.25em;
border-radius: 0.125rem;
}
/* ========== 4. LINKS ========== */
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-accent);
}
/* ========== 5. BUTTONS (BEM) ========== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-1) var(--space-3); /* 8px 24px */
font-size: var(--font-size-base);
font-weight: 600;
border: 2px solid transparent;
border-radius: var(--radius-xl);
cursor: pointer;
transition: all var(--transition-base);
white-space: nowrap;
user-select: none;
min-height: 2.75rem; /* 44px ??" touch-friendly minimum */
text-align: center;
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
.btn:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* -- Color Modifiers -- */
.btn--primary {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
box-shadow: var(--shadow-sm);
}
.btn--secondary {
background: var(--color-secondary);
color: #fff;
border-color: var(--color-secondary);
box-shadow: var(--shadow-sm);
}
.btn--outline {
background: transparent;
color: var(--color-primary);
border-color: var(--color-primary);
}
.btn--ghost {
background: transparent;
color: var(--color-primary);
border-color: transparent;
}
/* -- Hover / Active -- */
.btn--primary:hover,
.btn--secondary:hover,
.btn--outline:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn--primary:active,
.btn--secondary:active,
.btn--outline:active {
transform: translateY(0);
box-shadow: var(--shadow-sm);
}
/* -- Size Modifiers -- */
.btn--lg {
padding: var(--space-2) var(--space-4); /* 16px 32px */
font-size: var(--font-size-lg);
}
.btn--sm {
padding: var(--space-1) var(--space-2); /* 8px 16px */
font-size: var(--font-size-sm);
}
/* -- Button Group: Equal Width -- */
.btn-group {
display: flex;
gap: var(--space-1);
flex-wrap: wrap;
}
.btn-group .btn {
flex: 1 1 0;
min-width: 0;
}
/* Button Group: Vertical Stack (always) */
.btn-group--vertical {
flex-direction: column;
}
.btn-group--vertical .btn {
width: 100%;
}
/* Mobile button full-width stacking */
@media (max-width: 48em) {
/* 768px */
.btn-group {
flex-direction: column;
}
.btn-group .btn {
width: 100%;
}
.btn {
white-space: normal;
word-break: break-word;
}
.btn--lg {
padding: var(--space-1) var(--space-3); /* 8px 24px */
font-size: var(--font-size-base);
}
}
/* ========== 6. LAYOUT (BEM) ========== */
.container {
max-width: var(--container-width); /* 75rem */
margin-inline: auto;
padding-inline: var(--space-3); /* 24px */
width: 100%;
}
.container--narrow {
max-width: var(--container-narrow); /* 60rem */
margin-inline: auto;
padding-inline: var(--space-3); /* 24px */
width: 100%;
}
/* ========== 7. PROSE ??" Long-form Content ========== */
/*
* Wrap any long-form content (terms, blog, docs) in .prose
* to get automatic vertical rhythm without inline styles.
*
* Usage:
*
*
Title
*
Paragraph???
*
*
Quote
*