/* ============================================================================ KOISAN AI Marketing — Design System ---------------------------------------------------------------------------- File này là BỘ NỀN THIẾT KẾ (design tokens + component classes) để áp cho TOÀN APP, không phải CSS của một trang cụ thể. CÁCH DÙNG cho Dev: 1. Import file này 1 lần ở gốc app (vd: import './koisan-design-system.css'). 2. Ưu tiên dùng BIẾN (--ks-*) — gắn các biến này vào component có sẵn của app là đủ đồng bộ màu/bo góc/bóng. Vd: .my-card{ background:var(--ks-surface); border:1px solid var(--ks-border); border-radius:var(--ks-radius); } 3. Hoặc dùng thẳng các class .ks-* bên dưới (đã dựng sẵn: card, KPI, bảng, chip, nút, sidebar…). 4. Dark mode tự chạy theo hệ điều hành; nếu app có nút toggle theme thì set thuộc tính data-theme="dark" | "light" trên (đã hỗ trợ, xem cuối tokens). NGUYÊN TẮC CHỐT (đã duyệt với khách): • Bo góc nhẹ 6px (khối lớn & nhỏ đồng nhất). • Header bảng có nền tím nhạt + vạch nhấn — mỗi bảng nổi bật. • Phân cấp tiêu đề rõ: 36 › 23 › 15 › 11 (mỗi cấp ≤ 2/3 cấp trên). • Màu ngữ nghĩa TÁCH khỏi màu nhấn: good=xanh, warn=vàng, crit=đỏ; tím chỉ là accent. • Số liệu canh phải + tabular-nums. • Menu dọc dạng chữ (không icon), không đường kẻ dọc. ============================================================================ */ /* --------------------------------------------------------------------------- 1. DESIGN TOKENS --------------------------------------------------------------------------- */ :root{ /* Nền & bề mặt */ --ks-bg:#fafafa; --ks-surface:#ffffff; --ks-surface-2:#f4f4f5; /* nền phụ: hover, khối chìm */ --ks-border:#e4e4e7; --ks-border-strong:#d4d4d8; /* Chữ (3 cấp — dùng đúng cấp để giữ tương phản WCAG) */ --ks-text:#09090b; /* chính */ --ks-text-2:#3f3f46; /* phụ (đạt ≥4.5:1 trên nền sáng) */ --ks-text-3:#71717a; /* mờ: nhãn nhỏ, caption */ /* Màu nhấn thương hiệu (CHỈ dùng cho nhấn, không dùng để báo trạng thái) */ --ks-accent:#7c3aed; --ks-accent-soft:#f5f3ff; --ks-accent-border:#ddd6fe; --ks-accent-head:#eee5fc; /* nền header bảng (tím rất nhạt) */ /* Màu ngữ nghĩa: tốt / cảnh báo / nghiêm trọng */ --ks-good:#15803d; --ks-good-soft:#dcfce7; --ks-good-border:#a7e3bd; --ks-warn:#b45309; --ks-warn-soft:#fef7e6; --ks-warn-border:#fcd996; --ks-crit:#b91c1c; --ks-crit-soft:#fee2e2; --ks-crit-border:#fbb4b4; --ks-track:#e4e4e7; /* nền thanh tiến độ */ /* Thẻ "tiêu điểm" nghịch nền (dùng cho 1 KPI quan trọng nhất) */ --ks-feature-bg:#09090b; --ks-feature-text:#ffffff; --ks-feature-muted:#a1a1aa; --ks-feature-line:#27272a; /* Bo góc — bo tròn nhẹ 6px */ --ks-radius:6px; --ks-radius-pill:999px; /* Bóng đổ */ --ks-shadow:0 1px 2px rgba(9,9,11,.04), 0 1px 3px rgba(9,9,11,.06); --ks-shadow-lg:0 4px 12px rgba(9,9,11,.10), 0 2px 4px rgba(9,9,11,.06); /* ---- SPACING SCALE (nền lưới 4px — dùng cho MỌI padding/margin/gap) ---- Quy ước: số bậc ≈ px/4 (giống Tailwind) để Dev dễ nhớ. Luôn dùng bậc trong scale, KHÔNG hardcode px lẻ (13px, 18px…). */ --ks-space-0:0; --ks-space-px:1px; --ks-space-0-5:2px; --ks-space-1:4px; --ks-space-2:8px; --ks-space-3:12px; --ks-space-4:16px; --ks-space-5:20px; --ks-space-6:24px; --ks-space-7:28px; --ks-space-8:32px; --ks-space-9:36px; --ks-space-10:40px; --ks-space-12:48px; --ks-space-14:56px; --ks-space-16:64px; --ks-space-20:80px; --ks-space-24:96px; /* ---- ALIAS NGỮ NGHĨA (trỏ vào scale — dùng cái này cho dễ đọc) ---- */ --ks-gap:var(--ks-space-4); /* 16 — khe giữa các thẻ trong lưới */ --ks-gap-lg:var(--ks-space-5); /* 20 — khe lưới rộng */ --ks-gap-sm:var(--ks-space-2); /* 8 — khe nhỏ (chip, nút liền nhau) */ --ks-section-gap:var(--ks-space-14); /* 56 — khoảng cách trước mỗi section lớn */ --ks-pad-card:var(--ks-space-4) var(--ks-space-5); /* padding trong thẻ (16 20) */ --ks-pad-cell:var(--ks-space-3) var(--ks-space-4); /* padding ô bảng (12 16) */ --ks-pad-page:var(--ks-space-8); /* 32 — padding vùng nội dung chính */ --ks-pad-page-y-bottom:var(--ks-space-16); /* 64 — chừa đáy trang */ /* Typography */ --ks-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif; --ks-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --ks-h1:36px; /* tiêu đề trang */ --ks-h2:23px; /* tiêu đề section */ --ks-h3:15px; /* tiêu đề thẻ / bảng */ --ks-label:11px; /* nhãn nhỏ in hoa */ } /* Dark mode — tự động theo hệ điều hành */ @media (prefers-color-scheme: dark){ :root{ --ks-bg:#09090b; --ks-surface:#18181b; --ks-surface-2:#212124; --ks-border:#27272a; --ks-border-strong:#3f3f46; --ks-text:#fafafa; --ks-text-2:#c4c4cc; --ks-text-3:#8a8a94; --ks-accent:#a78bfa; --ks-accent-soft:#241a41; --ks-accent-border:#3b2d63; --ks-accent-head:#241a41; --ks-good:#4ade80; --ks-good-soft:#12301e; --ks-good-border:#1f5236; --ks-warn:#fbbf24; --ks-warn-soft:#332507; --ks-warn-border:#5a4410; --ks-crit:#f87171; --ks-crit-soft:#3a1414; --ks-crit-border:#5f2020; --ks-track:#27272a; --ks-feature-bg:#fafafa; --ks-feature-text:#09090b; --ks-feature-muted:#52525b; --ks-feature-line:#e4e4e7; --ks-shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4); --ks-shadow-lg:0 6px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); } } /* Ghi đè theo nút toggle theme của app (đặt data-theme trên ) */ :root[data-theme="light"]{ --ks-bg:#fafafa; --ks-surface:#ffffff; --ks-surface-2:#f4f4f5; --ks-border:#e4e4e7; --ks-border-strong:#d4d4d8; --ks-text:#09090b; --ks-text-2:#3f3f46; --ks-text-3:#71717a; --ks-accent:#7c3aed; --ks-accent-soft:#f5f3ff; --ks-accent-border:#ddd6fe; --ks-accent-head:#eee5fc; --ks-good:#15803d; --ks-good-soft:#dcfce7; --ks-good-border:#a7e3bd; --ks-warn:#b45309; --ks-warn-soft:#fef7e6; --ks-warn-border:#fcd996; --ks-crit:#b91c1c; --ks-crit-soft:#fee2e2; --ks-crit-border:#fbb4b4; --ks-track:#e4e4e7; --ks-feature-bg:#09090b; --ks-feature-text:#ffffff; --ks-feature-muted:#a1a1aa; --ks-feature-line:#27272a; --ks-shadow:0 1px 2px rgba(9,9,11,.04), 0 1px 3px rgba(9,9,11,.06); --ks-shadow-lg:0 4px 12px rgba(9,9,11,.10), 0 2px 4px rgba(9,9,11,.06); } :root[data-theme="dark"]{ --ks-bg:#09090b; --ks-surface:#18181b; --ks-surface-2:#212124; --ks-border:#27272a; --ks-border-strong:#3f3f46; --ks-text:#fafafa; --ks-text-2:#c4c4cc; --ks-text-3:#8a8a94; --ks-accent:#a78bfa; --ks-accent-soft:#241a41; --ks-accent-border:#3b2d63; --ks-accent-head:#241a41; --ks-good:#4ade80; --ks-good-soft:#12301e; --ks-good-border:#1f5236; --ks-warn:#fbbf24; --ks-warn-soft:#332507; --ks-warn-border:#5a4410; --ks-crit:#f87171; --ks-crit-soft:#3a1414; --ks-crit-border:#5f2020; --ks-track:#27272a; --ks-feature-bg:#fafafa; --ks-feature-text:#09090b; --ks-feature-muted:#52525b; --ks-feature-line:#e4e4e7; --ks-shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.4); --ks-shadow-lg:0 6px 16px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4); } /* --------------------------------------------------------------------------- 2. TIỆN ÍCH CHUNG --------------------------------------------------------------------------- */ /* Áp cho body app (tuỳ chọn — có thể bỏ nếu app đã set font/nền riêng) */ .ks-root{ background:var(--ks-bg); color:var(--ks-text); font-family:var(--ks-font); -webkit-font-smoothing:antialiased; line-height:1.45; } /* Số liệu: canh cột đều nhau. Gắn class này vào MỌI ô/nhãn chứa số. */ .ks-num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; } /* Trạng thái focus bàn phím — luôn thấy (accessibility) */ .ks-root :focus-visible{ outline:2px solid var(--ks-accent); outline-offset:2px; border-radius:var(--ks-radius); } /* --------------------------------------------------------------------------- 3. TYPOGRAPHY (dùng class để không đụng heading toàn cục của app) --------------------------------------------------------------------------- */ .ks-h1{ font-size:var(--ks-h1); line-height:1.03; letter-spacing:-.035em; font-weight:800; margin:0; text-wrap:balance; } .ks-h2{ font-size:var(--ks-h2); line-height:1.1; letter-spacing:-.02em; font-weight:800; margin:0; } .ks-h3{ font-size:var(--ks-h3); line-height:1.2; letter-spacing:-.01em; font-weight:800; margin:0; } /* Nhãn nhỏ in hoa (label KPI, tiêu đề cột…) */ .ks-label{ font-size:var(--ks-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ks-text-2); margin:0; } .ks-muted{ color:var(--ks-text-2); } .ks-muted-3{ color:var(--ks-text-3); } /* Tiêu đề section kèm đường kẻ ngang (dùng bao section lớn) */ .ks-section-head{ display:flex; align-items:center; gap:14px; margin:var(--ks-section-gap) 2px 18px; } .ks-section-head__rule{ flex:1; height:1px; background:var(--ks-border); } .ks-section-head__note{ font-size:var(--co-1,12.6px); color:var(--ks-text-2); white-space:nowrap; } /* --------------------------------------------------------------------------- 4. LAYOUT: KHUNG APP (menu dọc trái + vùng nội dung) --------------------------------------------------------------------------- */ .ks-app{ display:grid; grid-template-columns:262px minmax(0,1fr); min-height:100vh; } @media (max-width:860px){ .ks-app{ grid-template-columns:200px minmax(0,1fr); } } @media (max-width:620px){ .ks-app{ grid-template-columns:180px minmax(0,1fr); } } /* Sidebar */ .ks-sidebar{ position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto; background:var(--ks-surface); border-right:1px solid var(--ks-border); display:flex; flex-direction:column; padding:16px 14px; } .ks-sidebar__label{ font-size:var(--ks-label); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ks-text-3); padding:10px 10px 6px; } /* Menu chính — dạng CHỮ, không icon */ .ks-nav{ display:flex; flex-direction:column; gap:2px; } .ks-nav a{ display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--ks-radius); text-decoration:none; color:var(--ks-text-2); font-size:var(--co-2,14px); font-weight:600; cursor:pointer; } .ks-nav a:hover:not(.is-active){ color:var(--ks-text); background:var(--ks-surface-2); } .ks-nav a.is-active{ background:var(--ks-text); color:var(--ks-bg); font-weight:700; } /* Menu con (thụt lề, KHÔNG kẻ dọc) — dùng cho scroll-spy hoặc tab con */ .ks-subnav{ display:flex; flex-direction:column; margin:3px 0 6px; } .ks-subnav a{ font-size:var(--co-1,12.6px); color:var(--ks-text-3); text-decoration:none; padding:7px 12px 7px 24px; font-weight:500; cursor:pointer; border-radius:var(--ks-radius); } .ks-subnav a:hover{ color:var(--ks-text); } .ks-subnav a.is-active{ color:var(--ks-text); font-weight:700; } /* Thanh trên cùng của vùng nội dung (breadcrumb + bộ lọc kỳ + trạng thái sync) */ .ks-topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px; padding:11px 26px; border-bottom:1px solid var(--ks-border); background:color-mix(in srgb, var(--ks-bg) 86%, transparent); backdrop-filter:blur(8px); } .ks-topbar__spacer{ flex:1; } /* Vùng nội dung chính */ .ks-main{ padding:var(--ks-pad-page) var(--ks-pad-page) var(--ks-pad-page-y-bottom); min-width:0; } @media (max-width:860px){ .ks-main{ padding:var(--ks-space-6) var(--ks-space-5) var(--ks-space-14); } } /* --------------------------------------------------------------------------- 5. THẺ (CARD) & KPI --------------------------------------------------------------------------- */ .ks-card{ background:var(--ks-surface); border:1px solid var(--ks-border); border-radius:var(--ks-radius); box-shadow:var(--ks-shadow); min-width:0; } /* Thẻ chỉ số KPI */ .ks-stat{ background:var(--ks-surface); border:1px solid var(--ks-border); border-radius:var(--ks-radius); box-shadow:var(--ks-shadow); padding:16px 18px; } .ks-stat__k{ font-size:var(--ks-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ks-text-2); margin:0 0 8px; } .ks-stat__v{ font-size:28px; font-weight:800; letter-spacing:-.03em; line-height:1; margin:0; } .ks-stat__v .u{ font-size:var(--co-2,14px); color:var(--ks-text-3); font-weight:600; } /* đơn vị (%, ×, tr…) */ .ks-stat__sub{ font-size:var(--co-1,12.6px); color:var(--ks-text-2); margin:7px 0 0; } /* Biến thể theo ngữ nghĩa: tô màu con số */ .ks-stat--good .ks-stat__v{ color:var(--ks-good); } .ks-stat--warn .ks-stat__v{ color:var(--ks-warn); } .ks-stat--crit .ks-stat__v{ color:var(--ks-crit); } /* Lưới KPI dựng sẵn (tự xuống hàng ở màn nhỏ) */ .ks-stat-grid{ display:grid; gap:var(--ks-gap); grid-template-columns:repeat(4,1fr); } .ks-stat-grid--5{ grid-template-columns:repeat(5,1fr); } @media (max-width:1100px){ .ks-stat-grid,.ks-stat-grid--5{ grid-template-columns:repeat(3,1fr); } } @media (max-width:640px){ .ks-stat-grid,.ks-stat-grid--5{ grid-template-columns:repeat(2,1fr); } } /* Thẻ TIÊU ĐIỂM nghịch nền — chỉ dùng cho 1 chỉ số quan trọng nhất/trang */ .ks-feature{ background:var(--ks-feature-bg); color:var(--ks-feature-text); border-radius:var(--ks-radius); box-shadow:var(--ks-shadow-lg); padding:22px 24px; } .ks-feature__k{ font-size:var(--ks-label); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ks-feature-muted); margin:0 0 12px; } .ks-feature__v{ font-size:46px; font-weight:800; letter-spacing:-.035em; line-height:.95; margin:0; } /* --------------------------------------------------------------------------- 6. HEADER BẢNG (card có tiêu đề nền tím) + BẢNG DỮ LIỆU --------------------------------------------------------------------------- */ .ks-panel-head{ display:flex; align-items:center; gap:11px; padding:14px 18px; background:var(--ks-accent-head); border-bottom:1px solid var(--ks-accent-border); border-radius:var(--ks-radius) var(--ks-radius) 0 0; } .ks-panel-head::before{ content:""; width:4px; height:17px; border-radius:var(--ks-radius); background:var(--ks-accent); flex:none; } .ks-panel-head h3, .ks-panel-head .ks-panel-head__title{ margin:0; font-size:var(--ks-h3); font-weight:800; letter-spacing:-.01em; color:var(--ks-text); } .ks-panel-head__cnt{ font-size:var(--co-1,12.6px); font-weight:700; color:var(--ks-text-3); } .ks-panel-head__more{ margin-left:auto; font-size:var(--co-1,12.6px); font-weight:600; color:var(--ks-accent); text-decoration:none; background:none; border:0; cursor:pointer; font-family:inherit; } /* Bọc bảng để cuộn ngang gọn trong thẻ (KHÔNG làm vỡ trang) */ .ks-tbl-wrap{ overflow-x:auto; } .ks-table{ width:100%; border-collapse:collapse; font-size:var(--co-2,14px); } .ks-table thead th{ text-align:left; font-size:var(--co-1,12.6px); text-transform:uppercase; letter-spacing:.04em; color:var(--ks-text-3); font-weight:700; padding:11px 14px; background:var(--ks-surface); border-bottom:1.5px solid var(--ks-border); white-space:nowrap; } .ks-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--ks-border); white-space:nowrap; } .ks-table tbody tr:last-child td{ border-bottom:0; } .ks-table tbody tr:hover td{ background:var(--ks-surface-2); } .ks-table .is-num, .ks-table th.is-num{ text-align:right; font-variant-numeric:tabular-nums; } /* cột số: canh phải */ .ks-table .ks-ent{ font-weight:600; } /* ô tên/định danh */ /* --------------------------------------------------------------------------- 7. CHIP / NHÃN TRẠNG THÁI (dùng cho ACoS, ROAS, trạng thái…) --------------------------------------------------------------------------- */ .ks-chip{ display:inline-flex; align-items:center; gap:5px; font-size:var(--co-1,12.6px); font-weight:700; padding:3px 9px; border-radius:var(--ks-radius); line-height:1.4; } .ks-chip--good{ background:var(--ks-good-soft); color:var(--ks-good); } .ks-chip--warn{ background:var(--ks-warn-soft); color:var(--ks-warn); } .ks-chip--crit{ background:var(--ks-crit-soft); color:var(--ks-crit); } .ks-chip--neutral{ background:var(--ks-surface-2); color:var(--ks-text-2); } /* Chip có chấm sống (vd: ACTIVE) */ .ks-chip--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ks-good); } /* Badge tròn nhỏ (đếm thông báo…) */ .ks-badge{ min-width:20px; height:20px; padding:0 5px; border-radius:var(--ks-radius); background:var(--ks-crit); color:#fff; font-size:var(--co-1,12.6px); font-weight:700; display:inline-grid; place-items:center; } /* --------------------------------------------------------------------------- 8. NÚT --------------------------------------------------------------------------- */ .ks-btn{ display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-family:inherit; background:var(--ks-text); color:var(--ks-bg); font-size:var(--co-2,14px); font-weight:700; padding:10px 16px; border-radius:var(--ks-radius); } .ks-btn:hover{ opacity:.9; } .ks-btn--outline{ background:var(--ks-surface); color:var(--ks-text); border:1px solid var(--ks-border); font-weight:600; font-size:var(--co-1,12.6px); padding:8px 14px; } .ks-btn--outline:hover{ background:var(--ks-surface-2); } .ks-btn--sm{ font-size:var(--co-1,12.6px); font-weight:600; padding:5px 10px; background:var(--ks-surface); color:var(--ks-text-2); border:1px solid var(--ks-border); } .ks-btn--sm:hover{ background:var(--ks-surface-2); color:var(--ks-text); } .ks-btn--danger{ color:var(--ks-crit); border-color:var(--ks-crit-border); background:var(--ks-surface); } .ks-btn--danger:hover{ background:var(--ks-crit-soft); } /* Bộ chọn phân đoạn (segmented: Hôm nay / Tháng này…) */ .ks-segmented{ display:inline-flex; background:var(--ks-surface-2); border:1px solid var(--ks-border); border-radius:var(--ks-radius); padding:3px; gap:2px; } .ks-segmented button{ appearance:none; border:0; background:transparent; color:var(--ks-text-2); font:inherit; font-size:var(--co-1,12.6px); font-weight:600; padding:6px 13px; border-radius:var(--ks-radius); cursor:pointer; } .ks-segmented button[aria-pressed="true"]{ background:var(--ks-text); color:var(--ks-bg); } /* --------------------------------------------------------------------------- 9. THANH TIẾN ĐỘ / METER (dùng cho ROAS vs ngưỡng, tiến độ mục tiêu…) --------------------------------------------------------------------------- */ .ks-meter{ } .ks-meter__track{ position:relative; height:7px; border-radius:var(--ks-radius); background:var(--ks-track); } .ks-meter__fill{ height:100%; border-radius:var(--ks-radius); background:var(--ks-good); } /* đổi màu theo ngữ nghĩa */ .ks-meter__threshold{ position:absolute; top:-3px; bottom:-3px; width:2px; border-radius:var(--ks-radius); background:var(--ks-text); opacity:.55; } .ks-meter__scale{ display:flex; justify-content:space-between; font-size:var(--co-1,12.6px); color:var(--ks-text-3); margin-top:6px; } /* --------------------------------------------------------------------------- 10. DÒNG CẢNH BÁO (alert list — sọc màu mức độ bên trái) --------------------------------------------------------------------------- */ .ks-alert{ display:flex; gap:14px; align-items:flex-start; background:var(--ks-surface); border:1px solid var(--ks-border); border-left-width:4px; border-radius:var(--ks-radius); box-shadow:var(--ks-shadow); padding:15px 18px; } .ks-alert--crit{ border-left-color:var(--ks-crit); background:color-mix(in srgb, var(--ks-crit) 5%, var(--ks-surface)); } .ks-alert--warn{ border-left-color:var(--ks-warn); background:color-mix(in srgb, var(--ks-warn) 6%, var(--ks-surface)); } .ks-alert--good{ border-left-color:var(--ks-good); background:color-mix(in srgb, var(--ks-good) 6%, var(--ks-surface)); } .ks-alert__body{ flex:1; min-width:0; } .ks-alert__time{ font-size:var(--co-1,12.6px); color:var(--ks-text-3); white-space:nowrap; flex:none; } /* --------------------------------------------------------------------------- 11. TIỆN ÍCH LƯỚI --------------------------------------------------------------------------- */ .ks-grid-2{ display:grid; gap:var(--ks-gap-lg); grid-template-columns:1fr 1fr; } .ks-grid-3{ display:grid; gap:var(--ks-gap-lg); grid-template-columns:repeat(3,1fr); } .ks-grid-auto{ display:grid; gap:var(--ks-gap-lg); grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); } @media (max-width:900px){ .ks-grid-2,.ks-grid-3{ grid-template-columns:1fr; } } /* Tiện ích khoảng cách theo scale (tuỳ chọn — dùng khi không muốn viết CSS riêng) */ .ks-gap-1{ gap:var(--ks-space-1); } .ks-gap-2{ gap:var(--ks-space-2); } .ks-gap-3{ gap:var(--ks-space-3); } .ks-gap-4{ gap:var(--ks-space-4); } .ks-gap-5{ gap:var(--ks-space-5); } .ks-gap-6{ gap:var(--ks-space-6); } .ks-gap-8{ gap:var(--ks-space-8); } .ks-p-2{ padding:var(--ks-space-2); } .ks-p-3{ padding:var(--ks-space-3); } .ks-p-4{ padding:var(--ks-space-4); } .ks-p-5{ padding:var(--ks-space-5); } .ks-p-6{ padding:var(--ks-space-6); } .ks-p-8{ padding:var(--ks-space-8); } .ks-mt-2{ margin-top:var(--ks-space-2); } .ks-mt-4{ margin-top:var(--ks-space-4); } .ks-mt-6{ margin-top:var(--ks-space-6); } .ks-mt-8{ margin-top:var(--ks-space-8); } .ks-mt-12{ margin-top:var(--ks-space-12); } .ks-mt-14{ margin-top:var(--ks-space-14); } .ks-mb-2{ margin-bottom:var(--ks-space-2); } .ks-mb-4{ margin-bottom:var(--ks-space-4); } .ks-mb-6{ margin-bottom:var(--ks-space-6); } .ks-mb-8{ margin-bottom:var(--ks-space-8); } .ks-mb-12{ margin-bottom:var(--ks-space-12); } /* --------------------------------------------------------------------------- 12. GIẢM CHUYỂN ĐỘNG (tôn trọng prefers-reduced-motion) --------------------------------------------------------------------------- */ @media (prefers-reduced-motion:no-preference){ .ks-nav a, .ks-subnav a, .ks-segmented button, .ks-btn, .ks-btn--outline, .ks-btn--sm{ transition:background .15s ease, color .15s ease, opacity .15s ease; } }