/* Kiểu nền tảng dùng chung toàn site: khung, chữ, header, footer, nút. CSS riêng từng trang đặt ở file khác (home.css). Chỉ dùng var() từ tokens.css — không hard-code màu/khoảng cách. */ /* ---------- 1. Nền tảng ---------- */ /* Flatsome in CSS chữ từ Customizer hai lần, lần cuối ở gần cuối nên xếp file sau nó cũng vô ích. Thêm html để hơn một bậc chọn lọc là đủ. */ html body { font-family: var(--font-sans); color: var(--text-body); background: var(--surface); line-height: var(--leading-normal); } /* Bọc trong :where() để reset có độ ưu tiên bằng 0 — mọi class component đè lại được mà không cần viết selector dài hay !important. */ :where(.mv-scope) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; } /* Flatsome đặt li{margin-bottom:.6em} cho cả trang. Selector đó có một phần tử nên mạnh hơn khối :where() ở trên (độ ưu tiên 0) — phải viết riêng và giữ .mv-scope ngoài :where() để thắng. Nếu không, khoảng cách thật luôn dôi ra so với con số khai trong component: bước quy trình hở 9,6px, bullet checklist thành 14,1px thay vì gap 6px. */ .mv-scope :where(li) { margin-bottom: 0; } :where(.mv-scope) :where(ul, ol) { list-style: none; padding: 0; } :where(.mv-scope) :where(a) { color: inherit; text-decoration: none; } :where(.mv-scope) :where(img) { max-width: 100%; display: block; } /* Flatsome đặt scroll-behavior ở html; neo phải trừ chiều cao header dính */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; /* đè hoạt ảnh của Flatsome */ animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Flatsome sinh CSS từ Customizer ép Lato lên h1-h6 và in ở gần cuối , nên phải hơn một bậc chọn lọc mới giành lại được. */ .mv-scope h1, .mv-scope h2, .mv-scope h3, .mv-scope h4, .mv-scope h5, .mv-scope h6 { font-family: inherit; } /* flatsome.css còn đặt h1-h6 màu #555, làm tiêu đề trong khối nền xanh không ăn được màu trắng của khối. Bọc .mv-scope trong :where() để rule này ngang bậc với Flatsome (thắng nhờ nạp sau) mà vẫn thua mọi class thành phần. */ :where(.mv-scope) h1, :where(.mv-scope) h2, :where(.mv-scope) h3, :where(.mv-scope) h4, :where(.mv-scope) h5, :where(.mv-scope) h6 { color: inherit; } /* flatsome.css đắp nguyên bộ mặt nút lên mọi