npm - @fwkui/x-css - Versions diffs - 1.0.3 → 1.0.4 - Mend

@fwkui/x-css 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -1,2361 +1,103 @@
-# Hướng dẫn sử dụng x-css
+# Fwkui XCSS
-`x-css` là một thư viện CSS-JavaScript nhỏ gọn và hiệu quả để xây dựng giao diện người dùng phản ứng (reactive user interfaces). Thư viện này cung cấp các công cụ để quản lý trạng thái (state management) và thao tác với DOM một cách tự động và hiệu quả.
+XCSS la thu vien tao CSS tu class viet tat. Ban chi can viet class tren HTML/React, thu vien se tu dong sinh rule va dua vao `adoptedStyleSheets`. Tai lieu nay giup ban nho nhanh key -> property -> value de viet class dung ngay.
 ## Cài đặt
-Để sử dụng `x-css`, bạn chỉ cần import nó vào dự án của mình:
-```html
-<script type="module">
-  import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
-  $.cssObserve(document);
-</script>
-```
-# Hướng dẫn sử dụng xCSS
-xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn và hiệu quả thông qua các class name đặc biệt. Sau khi học, bạn sẽ:
-- Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
-- Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
-> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phía dưới**.
-## Thiết kế mới: Design Tokens (CSS Variables)
-- Mục đích: Giảm độ dài và phức tạp của giá trị CSS trong các class, đảm bảo nhất quán branding và dễ bảo trì khi màu sắc, spacing, shadow, gradient… thay đổi.
-- Cách khai báo:
-  - Đặt các biến trong thẻ style ở đầu tài liệu hoặc trong một file CSS được import trước khi dùng xCSS.
-  - Dùng cú pháp CSS biến bắt đầu bằng --, ví dụ: --bg-gradient-login, --panel, --shadow-card, --color-primary, --spacing-md, …
-- Cách dùng trong xCSS:
-  - Dùng trực tiếp qua braces: bg{var(--bg-gradient-login)} hoặc bxsh{var(--shadow-card)} hoặc p{var(--spacing-md)}.
-  - Dùng alias có sẵn để biến đổi nhanh: bgc--panel hoặc c--primary (nếu có alias tương ứng với token).
-  - Có thể có fallback bằng var(--name, fallbackValue) để tương thích với trình duyệt cũ.
-- Lưu ý: CSS biến phải được load trước khi render các class dùng biến đó.
-- Ví dụ khai báo tokens (thêm vào đầu tài liệu hoặc một file style được import sớm):
-```html
-<style>
-  :root {
-    --bg-gradient-login: linear-gradient(#6a11cb, #2575fc);
-    --panel: #ffffff;
-    --shadow-card: 0 10px 20px rgba(0,0,0,.15);
-    --radius-card: 12px;
-    --color-primary: #0070f3;
-    --space-md: 16px;
-  }
-</style>
-```
-- Ví dụ dùng token trong trang login:
-```html
-<body class="bg{var(--bg-gradient-login)} h100vh w100% dF jcC aiC">
-  <main class="w360px md:w420px lg:w480px bgcWhite p28px bxsh{var(--shadow-card)} bdra12px">
-    ...
-    <button class="w100% p12px cWhite bdN bdra8px bxsh{var(--shadow-card)}" style="--color-primary: #0070f3;">
-      Đăng nhập
-    </button>
-  </main>
-</body>
-```
-- Gợi ý migrates và alias:
-  - Nếu có alias như bgc--panel hoặc c--primary, bạn có thể định nghĩa token tương ứng và sử dụng đồng thời.
-  - Ví dụ: :root { --panel: #fff; } và dùng bgc--panel hoặc bgc{var(--panel)} tùy cách build.
-- Xem thêm trong phần ví dụ và trang Design Tokens dưới đây để tham khảo cách tích hợp.
-## Cú pháp tổng quát
-```
-[MQ:][layer]<property><value>[@selector]
-```
-**Lưu ý quan trọng**: `<property><value>` là **bắt buộc** - phải có cả thuộc tính CSS và giá trị CSS.
-**Ví dụ cú pháp đúng:**
-- `cRed` - Màu đỏ (layer 0)
-- `5cRed` - Màu đỏ ở layer 5
-- `md:cRed` - Màu đỏ trên màn hình trung bình
-- `md:5cRed` - Màu đỏ ở layer 5 trên màn hình trung bình
-### Các thành phần:
-#### 1. Media Query (MQ) - Tùy chọn
-- `xs:` - Màn hình nhỏ (max-width: 575px)
-- `sm:` - Màn hình nhỏ (min-width: 576px)
-- `md:` - Màn hình trung bình (min-width: 768px)
-- `lg:` - Màn hình lớn (min-width: 992px)
-- `xl:` - Màn hình rất lớn (min-width: 1200px)
-- `2xl:` - Màn hình cực lớn (min-width: 1400px)
-- `sma:` - Màn hình nhỏ trở xuống (max-width: 768px)
-- `mda:` - Màn hình trung bình trở xuống (max-width: 992px)
-- `lga:` - Màn hình lớn trở xuống (max-width: 1200px)
-- `xla:` - Màn hình rất lớn trở xuống (max-width: 1400px)
-#### 2. Layer - Tùy chọn
-- `1` đến `19` - Thứ tự ưu tiên CSS layer (số càng cao ưu tiên càng cao)
-- Mặc định: `0` (layer 0)
-- Mục đích: gom nhóm quy tắc theo tầng (base, component, utilities, overrides…)
-#### 3. Property (Thuộc tính) - **BẮT BUỘC**
-- Viết thường, có thể là tên đầy đủ hoặc viết tắt
-- Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
-- Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
-#### 4. Value (Giá trị) - **BẮT BUỘC**
-- **Số**: `10`, `-4.5`, `0.5`, có thể kèm **đơn vị**: `10px`, `1.5rem`, `100%`
-- **Giá trị đặt tên** bắt đầu bằng **chữ hoa**: `Red`, `Center`, `Block`, `Fixed`, `None`
-- **Giá trị trong ngoặc nhọn** để ghi **nguyên văn**: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
-- **Biến CSS**: bắt đầu bằng `--`: `c--primary` → `color: var(--primary)`
-- **Quan trọng**: thêm `!` ngay trước giá trị để ra `!important`: `w!10px` → `width: 10px !important`
-- **Hàm**: dùng dạng **TitleCase** + `(...)` và dùng dấu `;` thay cho khoảng trắng:
-  - `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
-  - `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
-#### 5. Selector - Tùy chọn
-- Bắt đầu bằng `@`
-- Dấu `;` thay thế cho dấu cách
-- Có thể dùng giả lớp/giả phần tử, chọn phần tử con, hoặc kết hợp
-- Ví dụ: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
-## Ví dụ sử dụng
-### Cơ bản
-```html
-<!-- Màu đỏ -->
-<div class="cRed">Văn bản màu đỏ</div>
-<!-- Chiều rộng 100px -->
-<div class="w100px">Chiều rộng 100px</div>
-<!-- Padding 20px -->
-<div class="p20px">Padding 20px</div>
-<!-- Opacity 50% -->
-<div class="opc50%">Độ trong suốt 50%</div>
-<!-- Font size 14px -->
-<div class="fns14px">Cỡ chữ 14px</div>
-```
-### Với Media Query
-```html
-<!-- Màu đỏ trên màn hình lớn -->
-<div class="lg:cRed">Màu đỏ trên desktop</div>
-<!-- Ẩn trên màn hình nhỏ -->
-<div class="xs:vHidden">Ẩn trên mobile</div>
-<!-- Responsive width -->
-<div class="w100% md:w50% lg:w33%">Responsive width</div>
-```
-### Với Layer
-```html
-<!-- Layer ưu tiên cao -->
-<div class="5cRed">Màu đỏ ưu tiên cao</div>
-<!-- Layer ưu tiên thấp -->
-<div class="1cBlue">Màu xanh ưu tiên thấp</div>
-<!-- Kết hợp layer và media query -->
-<div class="md:7cGreen">Màu xanh layer 7 trên desktop</div>
-```
-### Với Selector
-```html
-<!-- Hover effect -->
-<div class="cRed@:hover">Đỏ khi hover</div>
-<!-- Focus effect -->
-<input class="bdw2px@:focus" placeholder="Border khi focus" />
-<!-- Child selector -->
-<div class="cBlue@>a">Màu xanh cho thẻ con a</div>
-<!-- Complex selector -->
-<div class="cRed@.btn;:hover">Màu đỏ khi hover button</div>
-```
-### Với giá trị đặc biệt
-```html
-<!-- !important -->
-<div class="c!red">Màu đỏ !important</div>
-<!-- CSS Variable -->
-<div class="c--primary">Màu từ CSS variable</div>
-<!-- Giá trị tùy chỉnh -->
-<div class="w{calc(100%;-;20px)}">Chiều rộng tính toán</div>
-<!-- Hàm CSS -->
-<div class="wClamp(280px;640px;100%)">Width với clamp</div>
-<!-- Box shadow phức tạp -->
-<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Shadow phức tạp</div>
-```
-### Kết hợp nhiều thuộc tính với `&`
-```html
-<!-- Nhiều thuộc tính cùng lúc -->
-<div class="cRed&fw700&taC">Màu đỏ, font-weight 700, căn giữa</div>
-<!-- Flexbox layout -->
-<div class="dF&aiC&jcSp">Flexbox center và space-between</div>
-<!-- Padding và margin -->
-<div class="p8px&m0">Padding 8px và margin 0</div>
-<!-- Kết hợp với selector -->
-<div class="cRed&fw700@:hover">Màu đỏ và font-weight 700 khi hover</div>
-```
-## Quy tắc ưu tiên & va chạm
-1. **@layer**: lớp số lớn thắng lớp số nhỏ (khi cùng nguồn gốc/specificity)
-2. **Specificity** của selector: selector cụ thể hơn thắng
-3. **Thứ tự xuất hiện** trong cùng layer và cùng specificity
-4. **!important** luôn thắng các quy tắc thường trong cùng phạm vi cascade
-Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!Blue` hoặc `c!{blue}`) có thể tiếp tục thắng nếu cùng layer/scope.
-## Quy tắc quan trọng
-### ✅ Hợp lệ
-- `cRed` - Màu đỏ (property: `c`, value: `Red`)
-- `w10px` - Chiều rộng 10px (property: `w`, value: `10px`)
-- `md:cRed` - Màu đỏ trên màn hình trung bình (MQ: `md`, property: `c`, value: `Red`)
-- `2w100px` - Chiều rộng 100px ở layer 2 (layer: `2`, property: `w`, value: `100px`)
-- `cRed@:hover` - Màu đỏ khi hover (property: `c`, value: `Red`, selector: `@:hover`)
-- `w!100px` - Chiều rộng 100px !important (property: `w`, value: `!100px`)
-- `c{red}` - Màu đỏ với giá trị tùy chỉnh (property: `c`, value: `{red}`)
-- `cRed&w700` - Kết hợp nhiều thuộc tính (property: `c`, value: `Red`, property: `w`, value: `700`)
-- `wCalc(100%;-;20px)` - Hàm CSS với dấu `;` (property: `w`, value: `Calc(100%;-;20px)`)
-### ❌ Không hợp lệ
-- `Cred` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
-- `C{red}` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
-- `cRed}` - Thiếu dấu mở ngoặc (syntax lỗi)
-- `c-red` - Dấu gạch ngang không được phép (property không được có dấu `-`)
-- `W-10px` - Chữ W viết hoa và dấu gạch ngang (property phải viết thường)
-- `w-!10px` - Dấu gạch ngang không được phép (property không được có dấu `-`)
-- `cRed @:hover` - Có dấu cách trong class name (không được có dấu cách)
-- `c` - Thiếu value (bắt buộc phải có cả property và value)
-- `Red` - Thiếu property (bắt buộc phải có cả property và value)
-## Lỗi phổ biến & cách tránh
-- **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
-- **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
-- **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
-- **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
-- **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
-- **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
-## Lưu ý
-1. **Property và Value bắt buộc** - Mỗi class phải có cả thuộc tính và giá trị CSS
-2. **Tên class phải viết thường** - Chỉ property viết thường, value có thể có ký tự HOA
-3. **Không dùng dấu cách** - Dùng dấu `;` thay thế
-4. **CSS.supports validation** - Tất cả class phải được CSS hỗ trợ
-5. **Thứ tự ưu tiên** - Layer số cao hơn sẽ có ưu tiên cao hơn
-6. **Media Query** - Chỉ áp dụng trong khoảng màn hình tương ứng
-7. **Khoảng trắng trong giá trị** dùng dấu `;`. Ví dụ: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
-## Lời khuyên từ kinh nghiệm thực tế
-### 🎯 **Nguyên tắc đặt tên class**
-#### ✅ **Nên làm:**
-- **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
-- **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
-#### ❌ **Tránh:**
-- **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
-- **Giá trị phức tạp**: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` → nên định nghĩa qua biến
-- **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
-### 🎨 **Quản lý giá trị phức tạp**
-#### **Sử dụng CSS Variables cho giá trị dài:**
-```css
-:root {
-  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
-  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
-  --border-radius: 8px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-}
-```
-```html
-<!-- Thay vì viết dài -->
-<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
-  <!-- Nên dùng biến -->
-  <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
-</div>
-```
-#### **Tạo component classes cho pattern thường dùng:**
-```html
-<!-- Thay vì lặp lại nhiều lần -->
-<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
-  <!-- Nên tạo component class -->
-  <div class="card"></div>
-</div>
-```
-### 📱 **Responsive Design Best Practices**
-#### **Sử dụng mobile-first approach:**
-```html
-<!-- Base styles cho mobile -->
-<div class="w100% p8px">
-  <!-- Override cho desktop -->
-  <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
-</div>
-```
-#### **Nhóm breakpoints logic:**
-```html
-<!-- Layout chính -->
-<div class="dB md:dF">
-  <!-- Spacing responsive -->
-  <div class="p8px md:p16px lg:p24px">
-    <!-- Typography responsive -->
-    <div class="fns14px md:fns16px lg:fns18px"></div>
-  </div>
-</div>
-```
-### 🎭 **Layer Management**
-#### **Tổ chức layers theo hierarchy:**
-```html
-<!-- Base styles (0) -->
-<div class="cBlack fns16px">
-  <!-- Component styles (1-5) -->
-  <div class="2btnPrimary">
-    <!-- Utility styles (6-10) -->
-    <div class="8m16px">
-      <!-- Override styles (11-19) -->
-      <div class="15cRed"></div>
-    </div>
-  </div>
-</div>
-```
-### 🔧 **Performance Tips**
-#### **Tránh over-engineering:**
-```html
-<!-- Đơn giản và hiệu quả -->
-<div class="dF&aiC&p16px">
-  <!-- Thay vì phức tạp không cần thiết -->
-  <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
-</div>
-```
-#### **Sử dụng shorthand khi có thể:**
-```html
-<!-- Margin shorthand -->
-<div class="m16px">
-  <!-- margin: 16px -->
-  <div class="mt8px&mb8px">
-    <!-- margin-top: 8px; margin-bottom: 8px -->
-    <!-- Padding shorthand -->
-    <div class="p16px">
-      <!-- padding: 16px -->
-      <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
-    </div>
-  </div>
-</div>
-```
-### 🎨 **Design System Integration**
-#### **Tạo design tokens:**
-```css
-:root {
-  /* Colors */
-  --color-primary: #0070f3;
-  --color-secondary: #7928ca;
-  --color-success: #0070f3;
-  --color-warning: #f5a623;
-  --color-error: #e00;
-  /* Spacing scale */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  /* Typography scale */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-}
-```
-#### **Sử dụng semantic naming:**
-```html
-<!-- Thay vì màu cụ thể -->
-<div class="cBlue">
-  <!-- Nên dùng semantic -->
-  <div class="cPrimary">
-    <div class="cSuccess">
-      <div class="cError"></div>
-    </div>
-  </div>
-</div>
-```
-### 🚀 **Maintenance Tips**
-#### **Documentation cho team:**
-```html
-<!-- Component: Button Primary -->
-<!-- Usage: <button class="btnPrimary">Click me</button> -->
-<!-- Variants: btnSecondary, btnDanger, btnGhost -->
-<button class="btnPrimary">Click me</button>
-```
-#### **Consistent naming convention:**
-```html
-<!-- Layout -->
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <!-- Components -->
-      <div class="card">
-        <div class="btn">
-          <div class="input">
-            <!-- Utilities -->
-            <div class="textCenter">
-              <div class="mAuto">
-                <div class="dNone"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-### 💡 **Pro Tips**
-1. **Luôn test trên mobile trước** - Mobile-first approach
-2. **Sử dụng browser dev tools** - Kiểm tra CSS output
-3. **Tạo style guide** - Document các pattern thường dùng
-4. **Code review** - Đảm bảo consistency trong team
-5. **Performance monitoring** - Theo dõi CSS bundle size
-6. **Accessibility first** - Luôn nghĩ đến người dùng khuyết tật
-## Ví dụ tổng hợp
-**HTML**
-```html
-<div
-  class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
->
-  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
-  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
-</div>
-```
-**CSS (phát sinh ý tưởng)**
-```css
-@media (min-width: 768px) {
-  @layer l7 {
-    .md\:7\.dF\&aiC\&jcSp\:where(*) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px;
-      background-color: var(--panel);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-    .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
-      color: var(--fg);
-    }
-    .md\:7\.wClamp\(120px\;240px\;100\%\) {
-      width: clamp(120px, 240px, 100%);
-    }
-  }
-}
-.cBlue {
-  color: blue;
-}
-.w\!120px {
-  width: 120px !important;
-}
-.h40px {
-  height: 40px;
-}
-.bdra8px {
-  border-radius: 8px;
-}
-.cWhite {
-  color: #fff;
-}
-.bgc\#0070f3 {
-  background-color: #0070f3;
-}
-```
-## Bảng tra cứu nhanh
-### Media Query
-| Ký hiệu | Kích thước màn hình |
-| ------- | ------------------- |
-| `xs:`   | ≤ 575px             |
-| `sm:`   | ≥ 576px             |
-| `md:`   | ≥ 768px             |
-| `lg:`   | ≥ 992px             |
-| `xl:`   | ≥ 1200px            |
-| `2xl:`  | ≥ 1400px            |
-### Layer
-| Ký hiệu | Mô tả                                          |
-| ------- | ---------------------------------------------- |
-| `0`     | Layer mặc định (ưu tiên thấp)                  |
-| `1-19`  | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
-### Giá trị đặc biệt
-| Ký hiệu | Ý nghĩa           |
-| ------- | ----------------- |
-| `!`     | !important        |
-| `--`    | CSS Variable      |
-| `{}`    | Giá trị tùy chỉnh |
-| `;`     | Thay thế dấu cách |
-## Câu hỏi thường gặp (FAQ)
-**Hỏi:** Tại sao phải viết hoa chữ cái đầu giá trị dạng từ khoá?
-**Đáp:** Để phân biệt **p** (thuộc tính viết thường) và **v** (giá trị đặt tên). Tránh nhầm `red` (giá trị) với một thuộc tính giả định.
-**Hỏi:** Dùng dấu gì cho khoảng trắng?
-**Đáp:** Dùng dấu `;` trong **giá trị** và **selector** để không phá vỡ tên class.
-**Hỏi:** Tôi muốn thêm breakpoint mới?
-**Đáp:** Bổ sung mã tiền tố (ví dụ `xxl:`) và map sang `@media (min-width: …)` trong cấu hình biên dịch.
-**Hỏi:** Có cần escape khi viết trong HTML?
-**Đáp:** Không. Bạn viết thô như quy ước. Bộ biên dịch sẽ escape khi phát sinh CSS.
----
-# Bảng tra cứu đầy đủ thuộc tính và giá trị xCSS
-## Cấu trúc dữ liệu
-- **Viết tắt**: Ký hiệu ngắn gọn để sử dụng trong class
-- **Thuộc tính CSS**: Tên đầy đủ của thuộc tính CSS
-- **Giá trị viết tắt**: Mapping từ ký hiệu sang giá trị CSS (nếu có)
----
-## 1. Layout & Display
-### Display
-| Viết tắt | Thuộc tính | Giá trị viết tắt                                                                                                                                                                                                                                                                                                                                                  |
-| -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `d`      | `display`  | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
-### Position
-| Viết tắt | Thuộc tính | Giá trị viết tắt                                               |
-| -------- | ---------- | -------------------------------------------------------------- |
-| `pos`    | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
-### Sizing
-| Viết tắt | Thuộc tính        | Giá trị viết tắt                                                 |
-| -------- | ----------------- | ---------------------------------------------------------------- |
-| `w`      | `width`           | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
-| `h`      | `height`          | `mic:min-content`, `mac:max-content`, `fc:fit-content`           |
-| `mw`     | `max-width`       | -                                                                |
-| `mxw`    | `max-width`       | -                                                                |
-| `mh`     | `max-height`      | -                                                                |
-| `miw`    | `min-width`       | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `mih`    | `min-height`      | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `blks`   | `block-size`      | -                                                                |
-| `ins`    | `inline-size`     | -                                                                |
-| `mbs`    | `max-block-size`  | -                                                                |
-| `mis`    | `max-inline-size` | -                                                                |
-| `mibs`   | `min-block-size`  | -                                                                |
-| `misz`   | `min-inline-size` | -                                                                |
-### Positioning
-| Viết tắt | Thuộc tính           | Giá trị viết tắt |
-| -------- | -------------------- | ---------------- |
-| `t`      | `top`                | -                |
-| `r`      | `right`              | -                |
-| `b`      | `bottom`             | -                |
-| `l`      | `left`               | -                |
-| `i`      | `inset`              | -                |
-| `iblk`   | `inset-block`        | -                |
-| `ibe`    | `inset-block-end`    | -                |
-| `ibsta`  | `inset-block-start`  | -                |
-| `ii`     | `inset-inline`       | -                |
-| `iie`    | `inset-inline-end`   | -                |
-| `iis`    | `inset-inline-start` | -                |
----
-## 2. Spacing
-### Margin
-| Viết tắt | Thuộc tính            | Giá trị viết tắt |
-| -------- | --------------------- | ---------------- |
-| `m`      | `margin`              | -                |
-| `mt`     | `margin-top`          | -                |
-| `mr`     | `margin-right`        | -                |
-| `mb`     | `margin-bottom`       | -                |
-| `ml`     | `margin-left`         | -                |
-| `mblk`   | `margin-block`        | -                |
-| `mbe`    | `margin-block-end`    | -                |
-| `mbsta`  | `margin-block-start`  | -                |
-| `min`    | `margin-inline`       | -                |
-| `mie`    | `margin-inline-end`   | -                |
-| `mista`  | `margin-inline-start` | -                |
-### Padding
-| Viết tắt | Thuộc tính             | Giá trị viết tắt                                           |
-| -------- | ---------------------- | ---------------------------------------------------------- |
-| `p`      | `padding`              | -                                                          |
-| `pt`     | `padding-top`          | -                                                          |
-| `pr`     | `padding-right`        | -                                                          |
-| `pb`     | `padding-bottom`       | -                                                          |
-| `pl`     | `padding-left`         | -                                                          |
-| `pblk`   | `padding-block`        | -                                                          |
-| `pbe`    | `padding-block-end`    | -                                                          |
-| `pbs`    | `padding-block-start`  | -                                                          |
-| `pi`     | `padding-inline`       | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
-| `pie`    | `padding-inline-end`   | -                                                          |
-| `pis`    | `padding-inline-start` | -                                                          |
----
-## 3. Colors & Background
-### Color
-| Viết tắt | Thuộc tính | Giá trị viết tắt             |
-| -------- | ---------- | ---------------------------- |
-| `c`      | `color`    | `i:inherit`, `t:transparent` |
-### Background
-| Viết tắt | Thuộc tính              | Giá trị viết tắt                                                                                                                                                                                                                     |
-| -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `bg`     | `background`            | -                                                                                                                                                                                                                                    |
-| `bgc`    | `background-color`      | `t:transparent`, `c:currentcolor`                                                                                                                                                                                                    |
-| `bgi`    | `background-image`      | -                                                                                                                                                                                                                                    |
-| `bgp`    | `background-position`   | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom`               |
-| `bgpx`   | `background-position-x` | `l:left`, `r:right`, `c:center`                                                                                                                                                                                                      |
-| `bgpy`   | `background-position-y` | `t:top`, `b:bottom`, `c:center`                                                                                                                                                                                                      |
-| `bgr`    | `background-repeat`     | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round`                                                                                           |
-| `bgs`    | `background-size`       | `c:contain`                                                                                                                                                                                                                          |
-| `bga`    | `background-attachment` | `s:scroll`, `f:fixed`, `l:local`                                                                                                                                                                                                     |
-| `bgbm`   | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
-| `bgcl`   | `background-clip`       | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text`                                                                                                                                                                        |
-| `bgo`    | `background-origin`     | `bb:border-box`, `pb:padding-box`, `cb:content-box`                                                                                                                                                                                  |
----
-## 4. Border
-### Border General
-| Viết tắt | Thuộc tính     | Giá trị viết tắt                                                                                  |
-| -------- | -------------- | ------------------------------------------------------------------------------------------------- |
-| `bd`     | `border`       | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset`                |
-| `bds`    | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
-| `bdc`    | `border-color` | -                                                                                                 |
-| `bdw`    | `border-width` | `t:thin`, `m:medium`, `th:thick`                                                                  |
-### Border Sides
-| Viết tắt | Thuộc tính      | Giá trị viết tắt |
-| -------- | --------------- | ---------------- |
-| `bdt`    | `border-top`    | -                |
-| `bdr`    | `border-right`  | -                |
-| `bdb`    | `border-bottom` | -                |
-| `bdl`    | `border-left`   | -                |
-### Border Radius
-| Viết tắt | Thuộc tính                   | Giá trị viết tắt |
-| -------- | ---------------------------- | ---------------- |
-| `bda`    | `border-radius`              | -                |
-| `bdra`   | `border-radius`              | -                |
-| `bdtlr`  | `border-top-left-radius`     | -                |
-| `bdtrr`  | `border-top-right-radius`    | -                |
-| `bdblr`  | `border-bottom-left-radius`  | -                |
-| `bdbrr`  | `border-bottom-right-radius` | -                |
-| `bdeer`  | `border-end-end-radius`      | -                |
-| `bdesr`  | `border-end-start-radius`    | -                |
-| `bdser`  | `border-start-end-radius`    | -                |
-| `bdssr`  | `border-start-start-radius`  | -                |
-### Border Block/Inline
-| Viết tắt | Thuộc tính            | Giá trị viết tắt                                                                   |
-| -------- | --------------------- | ---------------------------------------------------------------------------------- |
-| `bdblk`  | `border-block`        | -                                                                                  |
-| `bdblc`  | `border-block-color`  | -                                                                                  |
-| `bdble`  | `border-block-end`    | -                                                                                  |
-| `bdbls`  | `border-block-start`  | -                                                                                  |
-| `bdblst` | `border-block-style`  | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
-| `bdblwi` | `border-block-width`  | -                                                                                  |
-| `bdi`    | `border-inline`       | -                                                                                  |
-| `bdic`   | `border-inline-color` | -                                                                                  |
-| `bdie`   | `border-inline-end`   | -                                                                                  |
-| `bdista` | `border-inline-start` | -                                                                                  |
-| `bdistl` | `border-inline-style` | -                                                                                  |
-| `bdinw`  | `border-inline-width` | -                                                                                  |
----
-## 5. Typography
-### Font
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                                                                                                                                                                                                |
-| -------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fn`     | `font`                      | -                                                                                                                                                                                                                                                                                               |
-| `ff`     | `font-family`               | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
-| `fnf`    | `font-family`               | -                                                                                                                                                                                                                                                                                               |
-| `fns`    | `font-size`                 | -                                                                                                                                                                                                                                                                                               |
-| `fw`     | `font-weight`               | -                                                                                                                                                                                                                                                                                               |
-| `fnw`    | `font-weight`               | -                                                                                                                                                                                                                                                                                               |
-| `fnsty`  | `font-style`                | -                                                                                                                                                                                                                                                                                               |
-| `fnstr`  | `font-stretch`              | -                                                                                                                                                                                                                                                                                               |
-| `fnfs`   | `font-feature-settings`     | -                                                                                                                                                                                                                                                                                               |
-| `fnk`    | `font-kerning`              | -                                                                                                                                                                                                                                                                                               |
-| `fnlo`   | `font-language-override`    | -                                                                                                                                                                                                                                                                                               |
-| `fnos`   | `font-optical-sizing`       | -                                                                                                                                                                                                                                                                                               |
-| `fnp`    | `font-palette`              | -                                                                                                                                                                                                                                                                                               |
-| `fnsa`   | `font-size-adjust`          | -                                                                                                                                                                                                                                                                                               |
-| `fnsyn`  | `font-synthesis`            | -                                                                                                                                                                                                                                                                                               |
-| `fnsp`   | `font-synthesis-position`   | -                                                                                                                                                                                                                                                                                               |
-| `fnssc`  | `font-synthesis-small-caps` | -                                                                                                                                                                                                                                                                                               |
-| `fnss`   | `font-synthesis-style`      | -                                                                                                                                                                                                                                                                                               |
-| `fnsw`   | `font-synthesis-weight`     | -                                                                                                                                                                                                                                                                                               |
-| `fnv`    | `font-variant`              | -                                                                                                                                                                                                                                                                                               |
-| `fnva`   | `font-variant-alternates`   | -                                                                                                                                                                                                                                                                                               |
-| `fnvc`   | `font-variant-caps`         | -                                                                                                                                                                                                                                                                                               |
-| `fnvea`  | `font-variant-east-asian`   | -                                                                                                                                                                                                                                                                                               |
-| `fnve`   | `font-variant-emoji`        | -                                                                                                                                                                                                                                                                                               |
-| `fnvl`   | `font-variant-ligatures`    | -                                                                                                                                                                                                                                                                                               |
-| `fnvn`   | `font-variant-numeric`      | -                                                                                                                                                                                                                                                                                               |
-| `fnvp`   | `font-variant-position`     | -                                                                                                                                                                                                                                                                                               |
-| `fnvs`   | `font-variation-settings`   | -                                                                                                                                                                                                                                                                                               |
-### Text
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                           |
-| -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `ta`     | `text-align`                | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
-| `tal`    | `text-align-last`           | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`                                                           |
-| `td`     | `text-decoration`           | `u:underline`                                                                                                              |
-| `tdc`    | `text-decoration-color`     | -                                                                                                                          |
-| `tdl`    | `text-decoration-line`      | `u:underline`, `o:overline`, `lt:line-through`, `b:blink`                                                                  |
-| `tds`    | `text-decoration-style`     | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy`                                                                            |
-| `tdt`    | `text-decoration-thickness` | `ff:from-font`                                                                                                             |
-| `tdsi`   | `text-decoration-skip-ink`  | -                                                                                                                          |
-| `teph`   | `text-emphasis`             | -                                                                                                                          |
-| `tec`    | `text-emphasis-color`       | -                                                                                                                          |
-| `tep`    | `text-emphasis-position`    | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under`      |
-| `tes`    | `text-emphasis-style`       | -                                                                                                                          |
-| `ti`     | `text-indent`               | -                                                                                                                          |
-| `tj`     | `text-justify`              | `iw:inter-word`, `ic:inter-character`, `d:distribute`                                                                      |
-| `tor`    | `text-orientation`          | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation`                 |
-| `tol`    | `text-overflow`             | `c:clip`, `e:ellipsis`                                                                                                     |
-| `trd`    | `text-rendering`            | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision`                                                        |
-| `tsh`    | `text-shadow`               | -                                                                                                                          |
-| `ttr`    | `text-transform`            | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana`                                        |
-| `tuo`    | `text-underline-offset`     | -                                                                                                                          |
-| `tup`    | `text-underline-position`   | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under`                                                          |
-| `tw`     | `text-wrap`                 | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty`                                                                              |
-### Line & Spacing
-| Viết tắt | Thuộc tính       | Giá trị viết tắt |
-| -------- | ---------------- | ---------------- |
-| `lh`     | `line-height`    | -                |
-| `lts`    | `letter-spacing` | `n:normal`       |
-| `wrs`    | `word-spacing`   | -                |
-| `lbrk`   | `line-break`     | -                |
-| `wrb`    | `word-break`     | -                |
-| `wrtm`   | `writing-mode`   | -                |
----
-## 6. Flexbox
-| Viết tắt | Thuộc tính        | Giá trị viết tắt                                                                                                                                                                                                                    |
-| -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fx`     | `flex`            | `i:0 1 auto`, `a:1 1 auto`                                                                                                                                                                                                          |
-| `fxb`    | `flex-basis`      | -                                                                                                                                                                                                                                   |
-| `fxd`    | `flex-direction`  | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse`                                                                                                                                                                          |
-| `fxf`    | `flex-flow`       | -                                                                                                                                                                                                                                   |
-| `fxg`    | `flex-grow`       | -                                                                                                                                                                                                                                   |
-| `fxs`    | `flex-shrink`     | -                                                                                                                                                                                                                                   |
-| `fxw`    | `flex-wrap`       | `w:wrap`, `wr:wrap-reverse`, `n:nowrap`                                                                                                                                                                                             |
-| `jc`     | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center`                       |
-| `ai`     | `align-items`     | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center`                             |
-| `as`     | `align-self`      | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center`               |
-| `ac`     | `align-content`   | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
----
-## 7. Grid
-| Viết tắt | Thuộc tính              | Giá trị viết tắt                                                                                                                                                                                                                                                                                    |
-| -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `g`      | `grid`                  | -                                                                                                                                                                                                                                                                                                   |
-| `ga`     | `grid-area`             | -                                                                                                                                                                                                                                                                                                   |
-| `gc`     | `grid-column`           | `f:1 / -1`                                                                                                                                                                                                                                                                                          |
-| `gce`    | `grid-column-end`       | -                                                                                                                                                                                                                                                                                                   |
-| `gcs`    | `grid-column-start`     | -                                                                                                                                                                                                                                                                                                   |
-| `gr`     | `grid-row`              | `f:1 / -1`                                                                                                                                                                                                                                                                                          |
-| `gre`    | `grid-row-end`          | -                                                                                                                                                                                                                                                                                                   |
-| `grs`    | `grid-row-start`        | -                                                                                                                                                                                                                                                                                                   |
-| `gt`     | `grid-template`         | -                                                                                                                                                                                                                                                                                                   |
-| `gta`    | `grid-template-areas`   | -                                                                                                                                                                                                                                                                                                   |
-| `gtc`    | `grid-template-columns` | `s:subgrid`                                                                                                                                                                                                                                                                                         |
-| `gtr`    | `grid-template-rows`    | `s:subgrid`                                                                                                                                                                                                                                                                                         |
-| `gac`    | `grid-auto-columns`     | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)`                                                                                                                                                                                                                                           |
-| `gar`    | `grid-auto-rows`        | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)`                                                                                                                                                                                                                                           |
-| `gaf`    | `grid-auto-flow`        | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense`                                                                                                                                                                                                                                   |
-| `gap`    | `gap`                   | -                                                                                                                                                                                                                                                                                                   |
-| `rgap`   | `row-gap`               | -                                                                                                                                                                                                                                                                                                   |
-| `colg`   | `column-gap`            | -                                                                                                                                                                                                                                                                                                   |
-| `ji`     | `justify-items`         | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
-| `js`     | `justify-self`          | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center`                                                                                                   |
-| `pli`    | `place-items`           | -                                                                                                                                                                                                                                                                                                   |
-| `pls`    | `place-self`            | -                                                                                                                                                                                                                                                                                                   |
-| `plc`    | `place-content`         | -                                                                                                                                                                                                                                                                                                   |
----
-## 8. Effects & Filters
-### Opacity & Visibility
-| Viết tắt | Thuộc tính   | Giá trị viết tắt |
-| -------- | ------------ | ---------------- |
-| `opc`    | `opacity`    | -                |
-| `v`      | `visibility` | `c:collapse`     |
-### Filter & Backdrop
-| Viết tắt | Thuộc tính        | Giá trị viết tắt |
-| -------- | ----------------- | ---------------- |
-| `flt`    | `filter`          | -                |
-| `bkdf`   | `backdrop-filter` | -                |
-### Blend Modes
-| Viết tắt | Thuộc tính       | Giá trị viết tắt                                                                                                                                                                                                                     |
-| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `mbd`    | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
-### Box Shadow
-| Viết tắt | Thuộc tính   | Giá trị viết tắt |
-| -------- | ------------ | ---------------- |
-| `bxsh`   | `box-shadow` | -                |
-| `bxshd`  | `box-shadow` | -                |
----
-## 9. Transforms & Animations
-### Transform
-| Viết tắt | Thuộc tính         | Giá trị viết tắt |
-| -------- | ------------------ | ---------------- |
-| `tra`    | `transform`        | -                |
-| `trab`   | `transform-box`    | -                |
-| `trao`   | `transform-origin` | -                |
-| `tras`   | `transform-style`  | -                |
-| `rot`    | `rotate`           | -                |
-| `s`      | `scale`            | -                |
-| `trl`    | `translate`        | -                |
-### Transition
-| Viết tắt  | Thuộc tính                   | Giá trị viết tắt |
-| --------- | ---------------------------- | ---------------- |
-| `tran`    | `transition`                 | -                |
-| `tranb`   | `transition-behavior`        | -                |
-| `trand`   | `transition-delay`           | -                |
-| `trandur` | `transition-duration`        | -                |
-| `tranp`   | `transition-property`        | -                |
-| `trantf`  | `transition-timing-function` | -                |
-### Animation
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                 |
-| -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `ani`    | `animation`                 | -                                                                                                                |
-| `anic`   | `animation-composition`     | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
-| `anide`  | `animation-delay`           | -                                                                                                                |
-| `anidi`  | `animation-direction`       | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal`       |
-| `anidu`  | `animation-duration`        | -                                                                                                                |
-| `anifm`  | `animation-fill-mode`       | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none`                                    |
-| `aniic`  | `animation-iteration-count` | -                                                                                                                |
-| `anin`   | `animation-name`            | `s:slide`                                                                                                        |
-| `anips`  | `animation-play-state`      | `p:paused`, `r:running`                                                                                          |
-| `anitf`  | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end`                       |
----
-## 10. Overflow & Scrolling
-### Overflow
-| Viết tắt | Thuộc tính             | Giá trị viết tắt     |
-| -------- | ---------------------- | -------------------- |
-| `ofl`    | `overflow`             | -                    |
-| `oflx`   | `overflow-x`           | `c:clip`, `s:scroll` |
-| `ofly`   | `overflow-y`           | `c:clip`, `s:scroll` |
-| `oflb`   | `overflow-block`       | -                    |
-| `ofli`   | `overflow-inline`      | -                    |
-| `ofla`   | `overflow-anchor`      | -                    |
-| `oflcm`  | `overflow-clip-margin` | -                    |
-| `oflw`   | `overflow-wrap`        | `c:clip`, `s:scroll` |
-### Scroll
-| Viết tắt | Thuộc tính              | Giá trị viết tắt |
-| -------- | ----------------------- | ---------------- |
-| `scrb`   | `scroll-behavior`       | -                |
-| `scrm`   | `scroll-margin`         | -                |
-| `scrmb`  | `scroll-margin-bottom`  | -                |
-| `scrml`  | `scroll-margin-left`    | -                |
-| `scrmr`  | `scroll-margin-right`   | -                |
-| `scrmt`  | `scroll-margin-top`     | -                |
-| `scrp`   | `scroll-padding`        | -                |
-| `scrpb`  | `scroll-padding-bottom` | -                |
-| `scrpl`  | `scroll-padding-left`   | -                |
-| `scrpr`  | `scroll-padding-right`  | -                |
-| `scrpt`  | `scroll-padding-top`    | -                |
-| `scrsa`  | `scroll-snap-align`     | -                |
-| `scrss`  | `scroll-snap-stop`      | -                |
-| `scrst`  | `scroll-snap-type`      | -                |
-| `sbc`    | `scrollbar-color`       | -                |
-| `sbg`    | `scrollbar-gutter`      | -                |
-| `sbw`    | `scrollbar-width`       | -                |
-### Overscroll
-| Viết tắt | Thuộc tính                   | Giá trị viết tắt |
-| -------- | ---------------------------- | ---------------- |
-| `osrbh`  | `overscroll-behavior`        | `c:contain`      |
-| `osrbb`  | `overscroll-behavior-block`  | `c:contain`      |
-| `osrbi`  | `overscroll-behavior-inline` | `c:contain`      |
-| `osrbx`  | `overscroll-behavior-x`      | `c:contain`      |
-| `orsby`  | `overscroll-behavior-y`      | `c:contain`      |
----
-## 11. Lists & Tables
-### Lists
-| Viết tắt | Thuộc tính            | Giá trị viết tắt                                                                                                    |
-| -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `ls`     | `list-style`          | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
-| `lsi`    | `list-style-image`    | -                                                                                                                   |
-| `lisp`   | `list-style-position` | `i:inside`, `o:outside`                                                                                             |
-| `lst`    | `list-style-type`     | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada`             |
-### Tables
-| Viết tắt | Thuộc tính        | Giá trị viết tắt           |
-| -------- | ----------------- | -------------------------- |
-| `tbl`    | `table-layout`    | -                          |
-| `bdcl`   | `border-collapse` | `s:separate`, `c:collapse` |
-| `bdsp`   | `border-spacing`  | -                          |
-| `empc`   | `empty-cells`     | -                          |
-| `caps`   | `caption-side`    | -                          |
-### Columns
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `col`    | `columns`           | -                |
-| `colc`   | `column-count`      | -                |
-| `colf`   | `column-fill`       | -                |
-| `colg`   | `column-gap`        | -                |
-| `colr`   | `column-rule`       | -                |
-| `colrc`  | `column-rule-color` | -                |
-| `colrs`  | `column-rule-style` | -                |
-| `colrw`  | `column-rule-width` | -                |
-| `cols`   | `column-span`       | -                |
-| `colw`   | `column-width`      | -                |
----
-## 12. Advanced Properties
-### Containment
-| Viết tắt | Thuộc tính                      | Giá trị viết tắt |
-| -------- | ------------------------------- | ---------------- |
-| `cnt`    | `contain`                       | -                |
-| `cntibs` | `contain-intrinsic-block-size`  | -                |
-| `cntih`  | `contain-intrinsic-height`      | -                |
-| `cntiis` | `contain-intrinsic-inline-size` | -                |
-| `cntis`  | `contain-intrinsic-size`        | -                |
-| `ciw`    | `contain-intrinsic-width`       | -                |
-### Container Queries
-| Viết tắt | Thuộc tính       | Giá trị viết tắt |
-| -------- | ---------------- | ---------------- |
-| `ctr`    | `container`      | -                |
-| `ctrn`   | `container-name` | -                |
-| `ctrt`   | `container-type` | -                |
-### Content & Counters
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `ctt`    | `content`           | -                |
-| `cntri`  | `counter-increment` | -                |
-| `cntrr`  | `counter-reset`     | -                |
-| `cntrs`  | `counter-set`       | -                |
-### Page Breaks
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `pg`     | `page`              | -                |
-| `pgba`   | `page-break-after`  | -                |
-| `pgbb`   | `page-break-before` | -                |
-| `pgbi`   | `page-break-inside` | -                |
-| `brka`   | `break-after`       | -                |
-| `brkb`   | `break-before`      | -                |
-| `brki`   | `break-inside`      | -                |
-### Other Advanced
-| Viết tắt | Thuộc tính       | Giá trị viết tắt                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `a`      | `all`            | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `is`     | `isolation`      | `i:isolate`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `z`      | `z-index`        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `ord`    | `order`          | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `fl`     | `float`          | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left`                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `clr`    | `clear`          | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `rsz`    | `resize`         | `b:both`, `h:horizontal`, `v:vertical`                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `us`     | `user-select`    | `t:text`, `all:all`, `c:contain`                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `pe`     | `pointer-events` | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `cr`     | `cursor`         | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
-| `toa`    | `touch-action`   | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom`                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `zo`     | `zoom`           | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
----
-## 13. WebKit Specific
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt      |
-| -------- | --------------------------- | --------------------- |
-| `wlc`    | `-webkit-line-clamp`        | -                     |
-| `wtfc`   | `-webkit-text-fill-color`   | -                     |
-| `wts`    | `-webkit-text-stroke`       | -                     |
-| `wtsc`   | `-webkit-text-stroke-color` | -                     |
-| `wtsw`   | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
----
-## 14. Special Values
-### Common Values
-- `n` = `none`
-- `nm` = `normal`
-- `a` = `auto`
-- `i` = `inherit`
-- `in` = `initial`
-- `is` = `inline-start`
-- `ie` = `inline-end`
-- `tr` = `transparent`
-- `c` = `center`
-- `cl` = `collapse`
-- `l` = `left`
-- `r` = `right`
-- `h` = `hidden`
-- `v` = `visible`
-- `s` = `start`
-- `e` = `end`
-- `t` = `top`
-- `b` = `bottom`
-- `bs` = `block-start`
-- `be` = `block-end`
-### Size Values
-- `t` = `thin`
-- `m` = `medium`
-- `th` = `thick`
-### Style Values
-- `s` = `solid`
-- `d` = `dotted`
-- `ds` = `dashed`
-- `db` = `double`
-- `g` = `groove`
-- `r` = `ridge`
-- `i` = `inset`
-- `o` = `outset`
----
-_Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)_
-# Hướng dẫn sử dụng xCSS
-xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn và hiệu quả thông qua các class name đặc biệt. Sau khi học, bạn sẽ:
-- Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
-- Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
-> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phần sau**.
-## Cú pháp tổng quát
-```
-[MQ:][layer]<property><value>[@selector]
-```
-**Lưu ý quan trọng**: `<property><value>` là **bắt buộc** - phải có cả thuộc tính CSS và giá trị CSS.
-**Ví dụ cú pháp đúng:**
-- `cRed` - Màu đỏ (layer 0)
-- `5cRed` - Màu đỏ ở layer 5
-- `md:cRed` - Màu đỏ trên màn hình trung bình
-- `md:5cRed` - Màu đỏ ở layer 5 trên màn hình trung bình
-### Các thành phần:
-#### 1. Media Query (MQ) - Tùy chọn
-- `xs:` - Màn hình nhỏ (max-width: 575px)
-- `sm:` - Màn hình nhỏ (min-width: 576px)
-- `md:` - Màn hình trung bình (min-width: 768px)
-- `lg:` - Màn hình lớn (min-width: 992px)
-- `xl:` - Màn hình rất lớn (min-width: 1200px)
-- `2xl:` - Màn hình cực lớn (min-width: 1400px)
-- `sma:` - Màn hình nhỏ trở xuống (max-width: 768px)
-- `mda:` - Màn hình trung bình trở xuống (max-width: 992px)
-- `lga:` - Màn hình lớn trở xuống (max-width: 1200px)
-- `xla:` - Màn hình rất lớn trở xuống (max-width: 1400px)
-#### 2. Layer - Tùy chọn
-- `1` đến `19` - Thứ tự ưu tiên CSS layer (số càng cao ưu tiên càng cao)
-- Mặc định: `0` (layer 0)
-- Mục đích: gom nhóm quy tắc theo tầng (base, component, utilities, overrides…)
-#### 3. Property (Thuộc tính) - **BẮT BUỘC**
-- Viết thường, có thể là tên đầy đủ hoặc viết tắt
-- Không có dấu `-` trừ trường hợp có thuộc tính có dấu trừ thường bắt đầu `-w`
-- Ví dụ: `w` (width), `h` (height), `c` (color), `bg` (background)
-#### 4. Value (Giá trị) - **BẮT BUỘC**
-- **Số**: `10`, `-4.5`, `0.5`, có thể kèm **đơn vị**: `10px`, `1.5rem`, `100%`
-- **Giá trị đặt tên** bắt đầu bằng **chữ hoa**: `Red`, `Center`, `Block`, `Fixed`, `None`
-- **Giá trị trong ngoặc nhọn** để ghi **nguyên văn**: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
-- **Biến CSS**: bắt đầu bằng `--`: `c--primary` → `color: var(--primary)`
-- **Quan trọng**: thêm `!` ngay trước giá trị để ra `!important`: `w!10px` → `width: 10px !important`
-- **Hàm**: dùng dạng **TitleCase** + `(...)` và dùng dấu `;` thay cho khoảng trắng:
-  - `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
-  - `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
-#### 5. Selector - Tùy chọn
-- Bắt đầu bằng `@`
-- Dấu `;` thay thế cho dấu cách
-- Có thể dùng giả lớp/giả phần tử, chọn phần tử con, hoặc kết hợp
-- Ví dụ: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
-## Ví dụ sử dụng
-### Cơ bản
-```html
-<!-- Màu đỏ -->
-<div class="cRed">Văn bản màu đỏ</div>
-<!-- Chiều rộng 100px -->
-<div class="w100px">Chiều rộng 100px</div>
-<!-- Padding 20px -->
-<div class="p20px">Padding 20px</div>
-<!-- Opacity 50% -->
-<div class="opc50%">Độ trong suốt 50%</div>
-<!-- Font size 14px -->
-<div class="fns14px">Cỡ chữ 14px</div>
-```
-### Với Media Query
-```html
-<!-- Màu đỏ trên màn hình lớn -->
-<div class="lg:cRed">Màu đỏ trên desktop</div>
-<!-- Ẩn trên màn hình nhỏ -->
-<div class="xs:vHidden">Ẩn trên mobile</div>
-<!-- Responsive width -->
-<div class="w100% md:w50% lg:w33%">Responsive width</div>
+```bash
+npm i @fwkui/x-css
 ```
-### Với Layer
-```html
-<!-- Layer ưu tiên cao -->
-<div class="5cRed">Màu đỏ ưu tiên cao</div>
-<!-- Layer ưu tiên thấp -->
-<div class="1cBlue">Màu xanh ưu tiên thấp</div>
-<!-- Kết hợp layer và media query -->
-<div class="md:7cGreen">Màu xanh layer 7 trên desktop</div>
-```
-### Với Selector
-```html
-<!-- Hover effect -->
-<div class="cRed@:hover">Đỏ khi hover</div>
-<!-- Focus effect -->
-<input class="bdw2px@:focus" placeholder="Border khi focus" />
-<!-- Child selector -->
-<div class="cBlue@>a">Màu xanh cho thẻ con a</div>
-<!-- Complex selector -->
-<div class="cRed@.btn;:hover">Màu đỏ khi hover button</div>
-```
-### Với giá trị đặc biệt
-```html
-<!-- !important -->
-<div class="c!red">Màu đỏ !important</div>
-<!-- CSS Variable -->
-<div class="c--primary">Màu từ CSS variable</div>
-<!-- Giá trị tùy chỉnh -->
-<div class="w{calc(100%;-;20px)}">Chiều rộng tính toán</div>
-<!-- Hàm CSS -->
-<div class="wClamp(280px;640px;100%)">Width với clamp</div>
-<!-- Box shadow phức tạp -->
-<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Shadow phức tạp</div>
-```
-### Kết hợp nhiều thuộc tính với `&`
-```html
-<!-- Nhiều thuộc tính cùng lúc -->
-<div class="cRed&fw700&taC">Màu đỏ, font-weight 700, căn giữa</div>
-<!-- Flexbox layout -->
-<div class="dF&aiC&jcSp">Flexbox center và space-between</div>
-<!-- Padding và margin -->
-<div class="p8px&m0">Padding 8px và margin 0</div>
-<!-- Kết hợp với selector -->
-<div class="cRed&fw700@:hover">Màu đỏ và font-weight 700 khi hover</div>
-```
-## Quy tắc ưu tiên & va chạm
-1. **@layer**: lớp số lớn thắng lớp số nhỏ (khi cùng nguồn gốc/specificity)
-2. **Specificity** của selector: selector cụ thể hơn thắng
-3. **Thứ tự xuất hiện** trong cùng layer và cùng specificity
-4. **!important** luôn thắng các quy tắc thường trong cùng phạm vi cascade
-Ví dụ: `5cBlue` vs `9cRed` → `9cRed` thắng. Nhưng `5cBlue!` (viết `c!Blue` hoặc `c!{blue}`) có thể tiếp tục thắng nếu cùng layer/scope.
-## Quy tắc quan trọng
-### ✅ Hợp lệ
-- `cRed` - Màu đỏ (property: `c`, value: `Red`)
-- `w10px` - Chiều rộng 10px (property: `w`, value: `10px`)
-- `md:cRed` - Màu đỏ trên màn hình trung bình (MQ: `md`, property: `c`, value: `Red`)
-- `2w100px` - Chiều rộng 100px ở layer 2 (layer: `2`, property: `w`, value: `100px`)
-- `cRed@:hover` - Màu đỏ khi hover (property: `c`, value: `Red`, selector: `@:hover`)
-- `w!100px` - Chiều rộng 100px !important (property: `w`, value: `!100px`)
-- `c{red}` - Màu đỏ với giá trị tùy chỉnh (property: `c`, value: `{red}`)
-- `cRed&w700` - Kết hợp nhiều thuộc tính (property: `c`, value: `Red`, property: `w`, value: `700`)
-- `wCalc(100%;-;20px)` - Hàm CSS với dấu `;` (property: `w`, value: `Calc(100%;-;20px)`)
-### ❌ Không hợp lệ
-- `Cred` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
-- `C{red}` - Chữ C viết hoa ở thuộc tính (property phải viết thường)
-- `cRed}` - Thiếu dấu mở ngoặc (syntax lỗi)
-- `c-red` - Dấu gạch ngang không được phép (property không được có dấu `-`)
-- `W-10px` - Chữ W viết hoa và dấu gạch ngang (property phải viết thường)
-- `w-!10px` - Dấu gạch ngang không được phép (property không được có dấu `-`)
-- `cRed @:hover` - Có dấu cách trong class name (không được có dấu cách)
-- `c` - Thiếu value (bắt buộc phải có cả property và value)
-- `Red` - Thiếu property (bắt buộc phải có cả property và value)
-## Lỗi phổ biến & cách tránh
-- **Dùng chữ hoa ở đầu thuộc tính** → sai. Thuộc tính (**property**) phải là **chữ thường** hoặc `--var`
-- **Thiếu property hoặc value** → sai. Cả hai đều **bắt buộc** phải có
-- **Nhầm dấu `-` và `!`**: `w-!10px` là lỗi. Hãy dùng `w!10px`
-- **Quên `;` trong giá trị có khoảng trắng**: `ff{Courier New}` → nên viết `ff{Courier;New}`
-- **Selector có khoảng trắng** phải dùng `;` và sẽ được đổi lại khi xuất
-- **Không có bảng viết tắt** → trình biên dịch không biết dịch `ta` thành `text-align`
-## Lưu ý
-1. **Property và Value bắt buộc** - Mỗi class phải có cả thuộc tính và giá trị CSS
-2. **Tên class phải viết thường** - Chỉ property viết thường, value có thể có ký tự HOA
-3. **Không dùng dấu cách** - Dùng dấu `;` thay thế
-4. **CSS.supports validation** - Tất cả class phải được CSS hỗ trợ
-5. **Thứ tự ưu tiên** - Layer số cao hơn sẽ có ưu tiên cao hơn
-6. **Media Query** - Chỉ áp dụng trong khoảng màn hình tương ứng
-7. **Khoảng trắng trong giá trị** dùng dấu `;`. Ví dụ: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
-## Lời khuyên từ kinh nghiệm thực tế
-### 🎯 **Nguyên tắc đặt tên class**
-#### ✅ **Nên làm:**
-- **Ngắn gọn, dễ đọc**: `cRed`, `w100px`, `p16px`
-- **Sử dụng viết tắt chuẩn**: `dF` thay vì `displayFlex` (d: display, F: Flex)
-#### ❌ **Tránh:**
-- **Tên quá dài**: `wCalc(100%;-;20px;-;30px;-;10px)` → nên dùng CSS variable
-- **Giá trị phức tạp**: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` → nên định nghĩa qua biến
-- **Thuộc tính lặp lại**: `cRed`, `cBlue`, `cGreen` → nên dùng color palette
-### 🎨 **Quản lý giá trị phức tạp**
-#### **Sử dụng CSS Variables cho giá trị dài:**
-```css
-:root {
-  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
-  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
-  --border-radius: 8px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-}
-```
-```html
-<!-- Thay vì viết dài -->
-<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
-  <!-- Nên dùng biến -->
-  <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
-</div>
-```
-#### **Tạo component classes cho pattern thường dùng:**
-```html
-<!-- Thay vì lặp lại nhiều lần -->
-<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
-  <!-- Nên tạo component class -->
-  <div class="card"></div>
-</div>
-```
-### 📱 **Responsive Design Best Practices**
-#### **Sử dụng mobile-first approach:**
-```html
-<!-- Base styles cho mobile -->
-<div class="w100% p8px">
-  <!-- Override cho desktop -->
-  <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
-</div>
-```
-#### **Nhóm breakpoints logic:**
+## Sử dụng nhanh (vanilla/HTML)
 ```html
-<!-- Layout chính -->
-<div class="dB md:dF">
-  <!-- Spacing responsive -->
-  <div class="p8px md:p16px lg:p24px">
-    <!-- Typography responsive -->
-    <div class="fns14px md:fns16px lg:fns18px"></div>
-  </div>
-</div>
-```
-### 🎭 **Layer Management**
-#### **Tổ chức layers theo hierarchy:**
-```html
-<!-- Base styles (0) -->
-<div class="cBlack fns16px">
-  <!-- Component styles (1-5) -->
-  <div class="2btnPrimary">
-    <!-- Utility styles (6-10) -->
-    <div class="8m16px">
-      <!-- Override styles (11-19) -->
-      <div class="15cRed"></div>
-    </div>
-  </div>
-</div>
-```
-### 🔧 **Performance Tips**
-#### **Tránh over-engineering:**
-```html
-<!-- Đơn giản và hiệu quả -->
-<div class="dF&aiC&p16px">
-  <!-- Thay vì phức tạp không cần thiết -->
-  <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
-</div>
-```
-#### **Sử dụng shorthand khi có thể:**
-```html
-<!-- Margin shorthand -->
-<div class="m16px">
-  <!-- margin: 16px -->
-  <div class="mt8px&mb8px">
-    <!-- margin-top: 8px; margin-bottom: 8px -->
-    <!-- Padding shorthand -->
-    <div class="p16px">
-      <!-- padding: 16px -->
-      <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
-    </div>
-  </div>
-</div>
-```
-### 🎨 **Design System Integration**
-#### **Tạo design tokens:**
-```css
-:root {
-  /* Colors */
-  --color-primary: #0070f3;
-  --color-secondary: #7928ca;
-  --color-success: #0070f3;
-  --color-warning: #f5a623;
-  --color-error: #e00;
-  /* Spacing scale */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  /* Typography scale */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-}
-```
+<!doctype html>
+<html>
+  <body>
+    <div id="card" class="bgc#fff p10">Card</div>
-#### **Sử dụng semantic naming:**
+    <script type="module">
+      import { cssObserve, cssClsx } from "./src/index.js";
-```html
-<!-- Thay vì màu cụ thể -->
-<div class="cBlue">
-  <!-- Nên dùng semantic -->
-  <div class="cPrimary">
-    <div class="cSuccess">
-      <div class="cError"></div>
-    </div>
-  </div>
-</div>
+      const clsx = cssClsx(document);
+      document.querySelector("#card").className = clsx("bgc#fff", "p10");
+      cssObserve(document);
+    </script>
+  </body>
+</html>
 ```
-### 🚀 **Maintenance Tips**
+## Sử dụng voi React
+```jsx
+import { useEffect, useMemo } from "react";
+import { xcss } from "@fwkui/x-css";
-#### **Documentation cho team:**
+export default function Card() {
+  const engine = useMemo(() => xcss().buildCss(document), []);
-```html
-<!-- Component: Button Primary -->
-<!-- Usage: <button class="btnPrimary">Click me</button> -->
-<!-- Variants: btnSecondary, btnDanger, btnGhost -->
-<button class="btnPrimary">Click me</button>
-```
+  useEffect(() => {
+    engine?.observe();
+  }, [engine]);
-#### **Consistent naming convention:**
-```html
-<!-- Layout -->
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <!-- Components -->
-      <div class="card">
-        <div class="btn">
-          <div class="input">
-            <!-- Utilities -->
-            <div class="textCenter">
-              <div class="mAuto">
-                <div class="dNone"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
+  return (
+    <div className={engine?.clsx("bgc#fff", "p10") ?? "bgc#fff p10"}>
+      Card
     </div>
-  </div>
-</div>
-```
-### 💡 **Pro Tips**
-1. **Luôn test trên mobile trước** - Mobile-first approach
-2. **Sử dụng browser dev tools** - Kiểm tra CSS output
-3. **Tạo style guide** - Document các pattern thường dùng
-4. **Code review** - Đảm bảo consistency trong team
-5. **Performance monitoring** - Theo dõi CSS bundle size
-6. **Accessibility first** - Luôn nghĩ đến người dùng khuyết tật
-## Ví dụ tổng hợp
-**HTML**
-```html
-<div
-  class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
->
-  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
-  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Nút</button>
-</div>
-```
-**CSS (phát sinh ý tưởng)**
-```css
-@media (min-width: 768px) {
-  @layer l7 {
-    .md\:7\.dF\&aiC\&jcSp\:where(*) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px;
-      background-color: var(--panel);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-    .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
-      color: var(--fg);
-    }
-    .md\:7\.wClamp\(120px\;240px\;100\%\) {
-      width: clamp(120px, 240px, 100%);
-    }
-  }
-}
-.cBlue {
-  color: blue;
-}
-.w\!120px {
-  width: 120px !important;
-}
-.h40px {
-  height: 40px;
-}
-.bdra8px {
-  border-radius: 8px;
-}
-.cWhite {
-  color: #fff;
-}
-.bgc\#0070f3 {
-  background-color: #0070f3;
-}
-```
-## Bảng tra cứu nhanh
-### Media Query
-| Ký hiệu | Kích thước màn hình |
-| ------- | ------------------- |
-| `xs:`   | ≤ 575px             |
-| `sm:`   | ≥ 576px             |
-| `md:`   | ≥ 768px             |
-| `lg:`   | ≥ 992px             |
-| `xl:`   | ≥ 1200px            |
-| `2xl:`  | ≥ 1400px            |
-### Layer
-| Ký hiệu | Mô tả                                          |
-| ------- | ---------------------------------------------- |
-| `0`     | Layer mặc định (ưu tiên thấp)                  |
-| `1-19`  | Layer tùy chỉnh (số càng cao ưu tiên càng cao) |
-### Giá trị đặc biệt
-| Ký hiệu | Ý nghĩa           |
-| ------- | ----------------- |
-| `!`     | !important        |
-| `--`    | CSS Variable      |
-| `{}`    | Giá trị tùy chỉnh |
-| `;`     | Thay thế dấu cách |
-## Câu hỏi thường gặp (FAQ)
-**Hỏi:** Tại sao phải viết hoa chữ cái đầu giá trị dạng từ khoá?
-**Đáp:** Để phân biệt **p** (thuộc tính viết thường) và **v** (giá trị đặt tên). Tránh nhầm `red` (giá trị) với một thuộc tính giả định.
-**Hỏi:** Dùng dấu gì cho khoảng trắng?
-**Đáp:** Dùng dấu `;` trong **giá trị** và **selector** để không phá vỡ tên class.
-**Hỏi:** Tôi muốn thêm breakpoint mới?
-**Đáp:** Bổ sung mã tiền tố (ví dụ `xxl:`) và map sang `@media (min-width: …)` trong cấu hình biên dịch.
-**Hỏi:** Có cần escape khi viết trong HTML?
-**Đáp:** Không. Bạn viết thô như quy ước. Bộ biên dịch sẽ escape khi phát sinh CSS.
----
-# Bảng tra cứu đầy đủ thuộc tính và giá trị xCSS
-## Cấu trúc dữ liệu
-- **Viết tắt**: Ký hiệu ngắn gọn để sử dụng trong class
-- **Thuộc tính CSS**: Tên đầy đủ của thuộc tính CSS
-- **Giá trị viết tắt**: Mapping từ ký hiệu sang giá trị CSS (nếu có)
----
-## 1. Layout & Display
-### Display
-| Viết tắt | Thuộc tính | Giá trị viết tắt                                                                                                                                                                                                                                                                                                                                                  |
-| -------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `d`      | `display`  | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
-### Position
-| Viết tắt | Thuộc tính | Giá trị viết tắt                                               |
-| -------- | ---------- | -------------------------------------------------------------- |
-| `pos`    | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
-### Sizing
-| Viết tắt | Thuộc tính        | Giá trị viết tắt                                                 |
-| -------- | ----------------- | ---------------------------------------------------------------- |
-| `w`      | `width`           | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
-| `h`      | `height`          | `mic:min-content`, `mac:max-content`, `fc:fit-content`           |
-| `mw`     | `max-width`       | -                                                                |
-| `mxw`    | `max-width`       | -                                                                |
-| `mh`     | `max-height`      | -                                                                |
-| `miw`    | `min-width`       | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `mih`    | `min-height`      | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `blks`   | `block-size`      | -                                                                |
-| `ins`    | `inline-size`     | -                                                                |
-| `mbs`    | `max-block-size`  | -                                                                |
-| `mis`    | `max-inline-size` | -                                                                |
-| `mibs`   | `min-block-size`  | -                                                                |
-| `misz`   | `min-inline-size` | -                                                                |
-### Positioning
-| Viết tắt | Thuộc tính           | Giá trị viết tắt |
-| -------- | -------------------- | ---------------- |
-| `t`      | `top`                | -                |
-| `r`      | `right`              | -                |
-| `b`      | `bottom`             | -                |
-| `l`      | `left`               | -                |
-| `i`      | `inset`              | -                |
-| `iblk`   | `inset-block`        | -                |
-| `ibe`    | `inset-block-end`    | -                |
-| `ibsta`  | `inset-block-start`  | -                |
-| `ii`     | `inset-inline`       | -                |
-| `iie`    | `inset-inline-end`   | -                |
-| `iis`    | `inset-inline-start` | -                |
----
-## 2. Spacing
-### Margin
-| Viết tắt | Thuộc tính            | Giá trị viết tắt |
-| -------- | --------------------- | ---------------- |
-| `m`      | `margin`              | -                |
-| `mt`     | `margin-top`          | -                |
-| `mr`     | `margin-right`        | -                |
-| `mb`     | `margin-bottom`       | -                |
-| `ml`     | `margin-left`         | -                |
-| `mblk`   | `margin-block`        | -                |
-| `mbe`    | `margin-block-end`    | -                |
-| `mbsta`  | `margin-block-start`  | -                |
-| `min`    | `margin-inline`       | -                |
-| `mie`    | `margin-inline-end`   | -                |
-| `mista`  | `margin-inline-start` | -                |
-### Padding
-| Viết tắt | Thuộc tính             | Giá trị viết tắt                                           |
-| -------- | ---------------------- | ---------------------------------------------------------- |
-| `p`      | `padding`              | -                                                          |
-| `pt`     | `padding-top`          | -                                                          |
-| `pr`     | `padding-right`        | -                                                          |
-| `pb`     | `padding-bottom`       | -                                                          |
-| `pl`     | `padding-left`         | -                                                          |
-| `pblk`   | `padding-block`        | -                                                          |
-| `pbe`    | `padding-block-end`    | -                                                          |
-| `pbs`    | `padding-block-start`  | -                                                          |
-| `pi`     | `padding-inline`       | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
-| `pie`    | `padding-inline-end`   | -                                                          |
-| `pis`    | `padding-inline-start` | -                                                          |
----
-## 3. Colors & Background
-### Color
-| Viết tắt | Thuộc tính | Giá trị viết tắt             |
-| -------- | ---------- | ---------------------------- |
-| `c`      | `color`    | `i:inherit`, `t:transparent` |
-### Background
-| Viết tắt | Thuộc tính              | Giá trị viết tắt                                                                                                                                                                                                                     |
-| -------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `bg`     | `background`            | -                                                                                                                                                                                                                                    |
-| `bgc`    | `background-color`      | `t:transparent`, `c:currentcolor`                                                                                                                                                                                                    |
-| `bgi`    | `background-image`      | -                                                                                                                                                                                                                                    |
-| `bgp`    | `background-position`   | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom`               |
-| `bgpx`   | `background-position-x` | `l:left`, `r:right`, `c:center`                                                                                                                                                                                                      |
-| `bgpy`   | `background-position-y` | `t:top`, `b:bottom`, `c:center`                                                                                                                                                                                                      |
-| `bgr`    | `background-repeat`     | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs: repeat space`, `rr:repeat repeat`, `nr:no-repeat round`                                                                                           |
-| `bgs`    | `background-size`       | `c:contain`                                                                                                                                                                                                                          |
-| `bga`    | `background-attachment` | `s:scroll`, `f:fixed`, `l:local`                                                                                                                                                                                                     |
-| `bgbm`   | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
-| `bgcl`   | `background-clip`       | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text`                                                                                                                                                                        |
-| `bgo`    | `background-origin`     | `bb:border-box`, `pb:padding-box`, `cb:content-box`                                                                                                                                                                                  |
----
-## 4. Border
-### Border General
-| Viết tắt | Thuộc tính     | Giá trị viết tắt                                                                                  |
-| -------- | -------------- | ------------------------------------------------------------------------------------------------- |
-| `bd`     | `border`       | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset`                |
-| `bds`    | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
-| `bdc`    | `border-color` | -                                                                                                 |
-| `bdw`    | `border-width` | `t:thin`, `m:medium`, `th:thick`                                                                  |
-### Border Sides
-| Viết tắt | Thuộc tính      | Giá trị viết tắt |
-| -------- | --------------- | ---------------- |
-| `bdt`    | `border-top`    | -                |
-| `bdr`    | `border-right`  | -                |
-| `bdb`    | `border-bottom` | -                |
-| `bdl`    | `border-left`   | -                |
-### Border Radius
-| Viết tắt | Thuộc tính                   | Giá trị viết tắt |
-| -------- | ---------------------------- | ---------------- |
-| `bda`    | `border-radius`              | -                |
-| `bdra`   | `border-radius`              | -                |
-| `bdtlr`  | `border-top-left-radius`     | -                |
-| `bdtrr`  | `border-top-right-radius`    | -                |
-| `bdblr`  | `border-bottom-left-radius`  | -                |
-| `bdbrr`  | `border-bottom-right-radius` | -                |
-| `bdeer`  | `border-end-end-radius`      | -                |
-| `bdesr`  | `border-end-start-radius`    | -                |
-| `bdser`  | `border-start-end-radius`    | -                |
-| `bdssr`  | `border-start-start-radius`  | -                |
-### Border Block/Inline
-| Viết tắt | Thuộc tính            | Giá trị viết tắt                                                                   |
-| -------- | --------------------- | ---------------------------------------------------------------------------------- |
-| `bdblk`  | `border-block`        | -                                                                                  |
-| `bdblc`  | `border-block-color`  | -                                                                                  |
-| `bdble`  | `border-block-end`    | -                                                                                  |
-| `bdbls`  | `border-block-start`  | -                                                                                  |
-| `bdblst` | `border-block-style`  | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
-| `bdblwi` | `border-block-width`  | -                                                                                  |
-| `bdi`    | `border-inline`       | -                                                                                  |
-| `bdic`   | `border-inline-color` | -                                                                                  |
-| `bdie`   | `border-inline-end`   | -                                                                                  |
-| `bdista` | `border-inline-start` | -                                                                                  |
-| `bdistl` | `border-inline-style` | -                                                                                  |
-| `bdinw`  | `border-inline-width` | -                                                                                  |
----
-## 5. Typography
-### Font
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                                                                                                                                                                                                |
-| -------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fn`     | `font`                      | -                                                                                                                                                                                                                                                                                               |
-| `ff`     | `font-family`               | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
-| `fnf`    | `font-family`               | -                                                                                                                                                                                                                                                                                               |
-| `fns`    | `font-size`                 | -                                                                                                                                                                                                                                                                                               |
-| `fw`     | `font-weight`               | -                                                                                                                                                                                                                                                                                               |
-| `fnw`    | `font-weight`               | -                                                                                                                                                                                                                                                                                               |
-| `fnsty`  | `font-style`                | -                                                                                                                                                                                                                                                                                               |
-| `fnstr`  | `font-stretch`              | -                                                                                                                                                                                                                                                                                               |
-| `fnfs`   | `font-feature-settings`     | -                                                                                                                                                                                                                                                                                               |
-| `fnk`    | `font-kerning`              | -                                                                                                                                                                                                                                                                                               |
-| `fnlo`   | `font-language-override`    | -                                                                                                                                                                                                                                                                                               |
-| `fnos`   | `font-optical-sizing`       | -                                                                                                                                                                                                                                                                                               |
-| `fnp`    | `font-palette`              | -                                                                                                                                                                                                                                                                                               |
-| `fnsa`   | `font-size-adjust`          | -                                                                                                                                                                                                                                                                                               |
-| `fnsyn`  | `font-synthesis`            | -                                                                                                                                                                                                                                                                                               |
-| `fnsp`   | `font-synthesis-position`   | -                                                                                                                                                                                                                                                                                               |
-| `fnssc`  | `font-synthesis-small-caps` | -                                                                                                                                                                                                                                                                                               |
-| `fnss`   | `font-synthesis-style`      | -                                                                                                                                                                                                                                                                                               |
-| `fnsw`   | `font-synthesis-weight`     | -                                                                                                                                                                                                                                                                                               |
-| `fnv`    | `font-variant`              | -                                                                                                                                                                                                                                                                                               |
-| `fnva`   | `font-variant-alternates`   | -                                                                                                                                                                                                                                                                                               |
-| `fnvc`   | `font-variant-caps`         | -                                                                                                                                                                                                                                                                                               |
-| `fnvea`  | `font-variant-east-asian`   | -                                                                                                                                                                                                                                                                                               |
-| `fnve`   | `font-variant-emoji`        | -                                                                                                                                                                                                                                                                                               |
-| `fnvl`   | `font-variant-ligatures`    | -                                                                                                                                                                                                                                                                                               |
-| `fnvn`   | `font-variant-numeric`      | -                                                                                                                                                                                                                                                                                               |
-| `fnvp`   | `font-variant-position`     | -                                                                                                                                                                                                                                                                                               |
-| `fnvs`   | `font-variation-settings`   | -                                                                                                                                                                                                                                                                                               |
-### Text
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                           |
-| -------- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `ta`     | `text-align`                | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
-| `tal`    | `text-align-last`           | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`                                                           |
-| `td`     | `text-decoration`           | `u:underline`                                                                                                              |
-| `tdc`    | `text-decoration-color`     | -                                                                                                                          |
-| `tdl`    | `text-decoration-line`      | `u:underline`, `o:overline`, `lt:line-through`, `b:blink`                                                                  |
-| `tds`    | `text-decoration-style`     | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy`                                                                            |
-| `tdt`    | `text-decoration-thickness` | `ff:from-font`                                                                                                             |
-| `tdsi`   | `text-decoration-skip-ink`  | -                                                                                                                          |
-| `teph`   | `text-emphasis`             | -                                                                                                                          |
-| `tec`    | `text-emphasis-color`       | -                                                                                                                          |
-| `tep`    | `text-emphasis-position`    | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under`      |
-| `tes`    | `text-emphasis-style`       | -                                                                                                                          |
-| `ti`     | `text-indent`               | -                                                                                                                          |
-| `tj`     | `text-justify`              | `iw:inter-word`, `ic:inter-character`, `d:distribute`                                                                      |
-| `tor`    | `text-orientation`          | `m:mixed`, `u:upright`, `sr:sideways-right`, `sl:sideways-left`, `s:sideways`, `ugo:use-glyph-orientation`                 |
-| `tol`    | `text-overflow`             | `c:clip`, `e:ellipsis`                                                                                                     |
-| `trd`    | `text-rendering`            | `op:optimizeSpeed`, `ol:optimizeLegibility`, `g:geometricPrecision`                                                        |
-| `tsh`    | `text-shadow`               | -                                                                                                                          |
-| `ttr`    | `text-transform`            | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana`                                        |
-| `tuo`    | `text-underline-offset`     | -                                                                                                                          |
-| `tup`    | `text-underline-position`   | `u:under`, `l:left`, `r:right`, `ul:under left`, `ru:right under`                                                          |
-| `tw`     | `text-wrap`                 | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty`                                                                              |
-### Line & Spacing
-| Viết tắt | Thuộc tính       | Giá trị viết tắt |
-| -------- | ---------------- | ---------------- |
-| `lh`     | `line-height`    | -                |
-| `lts`    | `letter-spacing` | `n:normal`       |
-| `wrs`    | `word-spacing`   | -                |
-| `lbrk`   | `line-break`     | -                |
-| `wrb`    | `word-break`     | -                |
-| `wrtm`   | `writing-mode`   | -                |
----
-## 6. Flexbox
-| Viết tắt | Thuộc tính        | Giá trị viết tắt                                                                                                                                                                                                                    |
-| -------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `fx`     | `flex`            | `i:0 1 auto`, `a:1 1 auto`                                                                                                                                                                                                          |
-| `fxb`    | `flex-basis`      | -                                                                                                                                                                                                                                   |
-| `fxd`    | `flex-direction`  | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse`                                                                                                                                                                          |
-| `fxf`    | `flex-flow`       | -                                                                                                                                                                                                                                   |
-| `fxg`    | `flex-grow`       | -                                                                                                                                                                                                                                   |
-| `fxs`    | `flex-shrink`     | -                                                                                                                                                                                                                                   |
-| `fxw`    | `flex-wrap`       | `w:wrap`, `wr:wrap-reverse`, `n:nowrap`                                                                                                                                                                                             |
-| `jc`     | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `l:left`, `r:right`, `n:normal`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center`                       |
-| `ai`     | `align-items`     | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sc:safe center`, `uc:unsafe center`                             |
-| `as`     | `align-self`      | `n:normal`, `c:center`, `s:start`, `e:end`, `ss:self-start`, `se:self-end`, `fs:flex-start`, `fe:flex-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `st:stretch`, `sc:safe center`, `uc:unsafe center`               |
-| `ac`     | `align-content`   | `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `n:normal`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
----
-## 7. Grid
-| Viết tắt | Thuộc tính              | Giá trị viết tắt                                                                                                                                                                                                                                                                                    |
-| -------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `g`      | `grid`                  | -                                                                                                                                                                                                                                                                                                   |
-| `ga`     | `grid-area`             | -                                                                                                                                                                                                                                                                                                   |
-| `gc`     | `grid-column`           | `f:1 / -1`                                                                                                                                                                                                                                                                                          |
-| `gce`    | `grid-column-end`       | -                                                                                                                                                                                                                                                                                                   |
-| `gcs`    | `grid-column-start`     | -                                                                                                                                                                                                                                                                                                   |
-| `gr`     | `grid-row`              | `f:1 / -1`                                                                                                                                                                                                                                                                                          |
-| `gre`    | `grid-row-end`          | -                                                                                                                                                                                                                                                                                                   |
-| `grs`    | `grid-row-start`        | -                                                                                                                                                                                                                                                                                                   |
-| `gt`     | `grid-template`         | -                                                                                                                                                                                                                                                                                                   |
-| `gta`    | `grid-template-areas`   | -                                                                                                                                                                                                                                                                                                   |
-| `gtc`    | `grid-template-columns` | `s:subgrid`                                                                                                                                                                                                                                                                                         |
-| `gtr`    | `grid-template-rows`    | `s:subgrid`                                                                                                                                                                                                                                                                                         |
-| `gac`    | `grid-auto-columns`     | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)`                                                                                                                                                                                                                                           |
-| `gar`    | `grid-auto-rows`        | `mic:min-content`, `mac:max-content`, `mm:minmax(0, 1fr)`                                                                                                                                                                                                                                           |
-| `gaf`    | `grid-auto-flow`        | `r:row`, `c:column`, `d:dense`, `rd:row dense`, `cd:column dense`                                                                                                                                                                                                                                   |
-| `gap`    | `gap`                   | -                                                                                                                                                                                                                                                                                                   |
-| `rgap`   | `row-gap`               | -                                                                                                                                                                                                                                                                                                   |
-| `colg`   | `column-gap`            | -                                                                                                                                                                                                                                                                                                   |
-| `ji`     | `justify-items`         | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `fb:first baseline`, `lb:last baseline`, `lr:legacy right`, `ll:legacy left`, `lc:legacy center`, `sc:safe center`, `uc:unsafe center` |
-| `js`     | `justify-self`          | `n:normal`, `st:stretch`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `l:left`, `r:right`, `b:baseline`, `sc:safe center`, `uc:unsafe center`                                                                                                   |
-| `pli`    | `place-items`           | -                                                                                                                                                                                                                                                                                                   |
-| `pls`    | `place-self`            | -                                                                                                                                                                                                                                                                                                   |
-| `plc`    | `place-content`         | -                                                                                                                                                                                                                                                                                                   |
----
-## 8. Effects & Filters
-### Opacity & Visibility
-| Viết tắt | Thuộc tính   | Giá trị viết tắt |
-| -------- | ------------ | ---------------- |
-| `opc`    | `opacity`    | -                |
-| `v`      | `visibility` | `c:collapse`     |
-### Filter & Backdrop
-| Viết tắt | Thuộc tính        | Giá trị viết tắt |
-| -------- | ----------------- | ---------------- |
-| `flt`    | `filter`          | -                |
-| `bkdf`   | `backdrop-filter` | -                |
-### Blend Modes
-| Viết tắt | Thuộc tính       | Giá trị viết tắt                                                                                                                                                                                                                     |
-| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `mbd`    | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
-### Box Shadow
-| Viết tắt | Thuộc tính   | Giá trị viết tắt |
-| -------- | ------------ | ---------------- |
-| `bxsh`   | `box-shadow` | -                |
-| `bxshd`  | `box-shadow` | -                |
----
-## 9. Transforms & Animations
-### Transform
-| Viết tắt | Thuộc tính         | Giá trị viết tắt |
-| -------- | ------------------ | ---------------- |
-| `tra`    | `transform`        | -                |
-| `trab`   | `transform-box`    | -                |
-| `trao`   | `transform-origin` | -                |
-| `tras`   | `transform-style`  | -                |
-| `rot`    | `rotate`           | -                |
-| `s`      | `scale`            | -                |
-| `trl`    | `translate`        | -                |
-### Transition
-| Viết tắt  | Thuộc tính                   | Giá trị viết tắt |
-| --------- | ---------------------------- | ---------------- |
-| `tran`    | `transition`                 | -                |
-| `tranb`   | `transition-behavior`        | -                |
-| `trand`   | `transition-delay`           | -                |
-| `trandur` | `transition-duration`        | -                |
-| `tranp`   | `transition-property`        | -                |
-| `trantf`  | `transition-timing-function` | -                |
-### Animation
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt                                                                                                 |
-| -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `ani`    | `animation`                 | -                                                                                                                |
-| `anic`   | `animation-composition`     | `r:replace`, `a:add`, `ac:accumulate`, `ra:replace, add`, `aac:add, accumulate`, `raac:replace, add, accumulate` |
-| `anide`  | `animation-delay`           | -                                                                                                                |
-| `anidi`  | `animation-direction`       | `r:reverse`, `a:alternate`, `ar:alternate-reverse`, `nr:normal, reverse`, `arn:alternate, reverse, normal`       |
-| `anidu`  | `animation-duration`        | -                                                                                                                |
-| `anifm`  | `animation-fill-mode`       | `f:forwards`, `b:backwards`, `nb:none, backwards`, `fbn:both, forwards, none`                                    |
-| `aniic`  | `animation-iteration-count` | -                                                                                                                |
-| `anin`   | `animation-name`            | `s:slide`                                                                                                        |
-| `anips`  | `animation-play-state`      | `p:paused`, `r:running`                                                                                          |
-| `anitf`  | `animation-timing-function` | `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end`                       |
----
-## 10. Overflow & Scrolling
-### Overflow
-| Viết tắt | Thuộc tính             | Giá trị viết tắt     |
-| -------- | ---------------------- | -------------------- |
-| `ofl`    | `overflow`             | -                    |
-| `oflx`   | `overflow-x`           | `c:clip`, `s:scroll` |
-| `ofly`   | `overflow-y`           | `c:clip`, `s:scroll` |
-| `oflb`   | `overflow-block`       | -                    |
-| `ofli`   | `overflow-inline`      | -                    |
-| `ofla`   | `overflow-anchor`      | -                    |
-| `oflcm`  | `overflow-clip-margin` | -                    |
-| `oflw`   | `overflow-wrap`        | `c:clip`, `s:scroll` |
-### Scroll
-| Viết tắt | Thuộc tính              | Giá trị viết tắt |
-| -------- | ----------------------- | ---------------- |
-| `scrb`   | `scroll-behavior`       | -                |
-| `scrm`   | `scroll-margin`         | -                |
-| `scrmb`  | `scroll-margin-bottom`  | -                |
-| `scrml`  | `scroll-margin-left`    | -                |
-| `scrmr`  | `scroll-margin-right`   | -                |
-| `scrmt`  | `scroll-margin-top`     | -                |
-| `scrp`   | `scroll-padding`        | -                |
-| `scrpb`  | `scroll-padding-bottom` | -                |
-| `scrpl`  | `scroll-padding-left`   | -                |
-| `scrpr`  | `scroll-padding-right`  | -                |
-| `scrpt`  | `scroll-padding-top`    | -                |
-| `scrsa`  | `scroll-snap-align`     | -                |
-| `scrss`  | `scroll-snap-stop`      | -                |
-| `scrst`  | `scroll-snap-type`      | -                |
-| `sbc`    | `scrollbar-color`       | -                |
-| `sbg`    | `scrollbar-gutter`      | -                |
-| `sbw`    | `scrollbar-width`       | -                |
-### Overscroll
-| Viết tắt | Thuộc tính                   | Giá trị viết tắt |
-| -------- | ---------------------------- | ---------------- |
-| `osrbh`  | `overscroll-behavior`        | `c:contain`      |
-| `osrbb`  | `overscroll-behavior-block`  | `c:contain`      |
-| `osrbi`  | `overscroll-behavior-inline` | `c:contain`      |
-| `osrbx`  | `overscroll-behavior-x`      | `c:contain`      |
-| `orsby`  | `overscroll-behavior-y`      | `c:contain`      |
----
-## 11. Lists & Tables
-### Lists
-| Viết tắt | Thuộc tính            | Giá trị viết tắt                                                                                                    |
-| -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- |
-| `ls`     | `list-style`          | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada` |
-| `lsi`    | `list-style-image`    | -                                                                                                                   |
-| `lisp`   | `list-style-position` | `i:inside`, `o:outside`                                                                                             |
-| `lst`    | `list-style-type`     | `di:disc`, `c:circle`, `s:square`, `de:decimal`, `g:georgian`, `tci:trad-chinese-informal`, `k:kannada`             |
-### Tables
-| Viết tắt | Thuộc tính        | Giá trị viết tắt           |
-| -------- | ----------------- | -------------------------- |
-| `tbl`    | `table-layout`    | -                          |
-| `bdcl`   | `border-collapse` | `s:separate`, `c:collapse` |
-| `bdsp`   | `border-spacing`  | -                          |
-| `empc`   | `empty-cells`     | -                          |
-| `caps`   | `caption-side`    | -                          |
-### Columns
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `col`    | `columns`           | -                |
-| `colc`   | `column-count`      | -                |
-| `colf`   | `column-fill`       | -                |
-| `colg`   | `column-gap`        | -                |
-| `colr`   | `column-rule`       | -                |
-| `colrc`  | `column-rule-color` | -                |
-| `colrs`  | `column-rule-style` | -                |
-| `colrw`  | `column-rule-width` | -                |
-| `cols`   | `column-span`       | -                |
-| `colw`   | `column-width`      | -                |
----
-## 12. Advanced Properties
-### Containment
-| Viết tắt | Thuộc tính                      | Giá trị viết tắt |
-| -------- | ------------------------------- | ---------------- |
-| `cnt`    | `contain`                       | -                |
-| `cntibs` | `contain-intrinsic-block-size`  | -                |
-| `cntih`  | `contain-intrinsic-height`      | -                |
-| `cntiis` | `contain-intrinsic-inline-size` | -                |
-| `cntis`  | `contain-intrinsic-size`        | -                |
-| `ciw`    | `contain-intrinsic-width`       | -                |
-### Container Queries
-| Viết tắt | Thuộc tính       | Giá trị viết tắt |
-| -------- | ---------------- | ---------------- |
-| `ctr`    | `container`      | -                |
-| `ctrn`   | `container-name` | -                |
-| `ctrt`   | `container-type` | -                |
-### Content & Counters
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `ctt`    | `content`           | -                |
-| `cntri`  | `counter-increment` | -                |
-| `cntrr`  | `counter-reset`     | -                |
-| `cntrs`  | `counter-set`       | -                |
-### Page Breaks
-| Viết tắt | Thuộc tính          | Giá trị viết tắt |
-| -------- | ------------------- | ---------------- |
-| `pg`     | `page`              | -                |
-| `pgba`   | `page-break-after`  | -                |
-| `pgbb`   | `page-break-before` | -                |
-| `pgbi`   | `page-break-inside` | -                |
-| `brka`   | `break-after`       | -                |
-| `brkb`   | `break-before`      | -                |
-| `brki`   | `break-inside`      | -                |
-### Other Advanced
-| Viết tắt | Thuộc tính       | Giá trị viết tắt                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| -------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `a`      | `all`            | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `is`     | `isolation`      | `i:isolate`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| `z`      | `z-index`        | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `ord`    | `order`          | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `fl`     | `float`          | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left`                                                                                                                                                                                                                                                                                                                                                                                                                                       |
-| `clr`    | `clear`          | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `rsz`    | `resize`         | `b:both`, `h:horizontal`, `v:vertical`                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| `us`     | `user-select`    | `t:text`, `all:all`, `c:contain`                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| `pe`     | `pointer-events` | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
-| `cr`     | `cursor`         | `p:pointer`, `d:default`, `cm:context-menu`, `h:help`, `pg:progress`, `w:wait`, `c:cell`, `t:text`, `vt:vertical-text`, `al:alias`, `cp:copy`, `mo:move`, `nd:no-drop`, `na:not-allowed`, `gr:grab`, `gb:grabbing`, `as:all-scroll`, `colr:col-resize`, `rr:row-resize`, `nr:n-resize`, `er:e-resize`, `sr:s-resize`, `wr:w-resize`, `ner:ne-resize`, `ser:se-resize`, `swr:sw-resize`, `ewr:ew-resize`, `nsr:ns-resize`, `nesw:nesw-resize`, `nwse:nwse-resize`, `zi:zoom-in`, `zo:zoom-out` |
-| `toa`    | `touch-action`   | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom`                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| `zo`     | `zoom`           | -                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
----
-## 13. WebKit Specific
-| Viết tắt | Thuộc tính                  | Giá trị viết tắt      |
-| -------- | --------------------------- | --------------------- |
-| `wlc`    | `-webkit-line-clamp`        | -                     |
-| `wtfc`   | `-webkit-text-fill-color`   | -                     |
-| `wts`    | `-webkit-text-stroke`       | -                     |
-| `wtsc`   | `-webkit-text-stroke-color` | -                     |
-| `wtsw`   | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
----
-## 14. Special Values
-### Common Values
-- `n` = `none`
-- `nm` = `normal`
-- `a` = `auto`
-- `i` = `inherit`
-- `in` = `initial`
-- `is` = `inline-start`
-- `ie` = `inline-end`
-- `tr` = `transparent`
-- `c` = `center`
-- `cl` = `collapse`
-- `l` = `left`
-- `r` = `right`
-- `h` = `hidden`
-- `v` = `visible`
-- `s` = `start`
-- `e` = `end`
-- `t` = `top`
-- `b` = `bottom`
-- `bs` = `block-start`
-- `be` = `block-end`
-### Size Values
-- `t` = `thin`
-- `m` = `medium`
-- `th` = `thick`
-### Style Values
-- `s` = `solid`
-- `d` = `dotted`
-- `ds` = `dashed`
-- `db` = `double`
-- `g` = `groove`
-- `r` = `ridge`
-- `i` = `inset`
-- `o` = `outset`
----
-_Bảng tra cứu này bao gồm tất cả 409 thuộc tính CSS và giá trị viết tắt được hỗ trợ trong xCSS. Để sử dụng, hãy kết hợp viết tắt thuộc tính với giá trị viết tắt theo cú pháp: `[MQ:][layer]<property><value>[@selector]` (lưu ý: `<property><value>` là bắt buộc)_
-### Example
-```html
-<!DOCTYPE html>
-<html lang="vi">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Login</title>
-    <meta name="description" content="Mẫu HTML5 cơ bản">
-    <style>
-    :root {
-      --primary-color: #007bff;
-      --secondary-color: #6c757d;
-      --success-color: #28a745;
-      --info-color: #17a2b8;
-      --warning-color: #ffc107;
-      --danger-color: #dc3545;
-      --light-text: #6c757d;
-      --dark-text: #343a40;
-      --body-bg: #f8f9fa;
-      --div-color: #dee2e6;
-      --bd3:1px 1px 1px 1px  #dee2e6;
-      --w:#fff;
-    }
-    </style>
-  </head>
-  <body>
-      <div class="dF jcC aiC h100vh bgc--body-bg px10px">
-              <div class="bgc--w p40px bda8px bxshd--bd3 w400px">
-                <h1 class="taC c--dark-text mb30px">Login</h1>
-                <div class="dF fxdC my8px">
-                  <input class="p8px" type="text" placeholder="Username">
-                </div>
-                <div class="dF fxdC my8px">
-                  <input class="p8px" type="password" placeholder="Password">
-                  <a href="#" class="c--primary-color taR mt8px">
-                    Forgot password?
-                  </a>
-                </div>
-                <div class="taC mt30px">
-                  <button class="bdN bgc--primary-color cWhite p12px w100%  bdra4px">
-                    Login
-                  </button>
-                </div>
-                <div class="dF aiC my20px">
-                  <div class="fx1 h1px bgc--div"></div>
-                  <span class="px10px c--light-text">Or continue with</span>
-                  <div class="fx1 h1px bgc--div"></div>
-                </div>
-                <div class="dF jcC">
-                  <button class="bdN bgc--info-color c--w p12px mx8px dF aiC  bdra4px">
-                    <span class="ml8px">Facebook</span>
-                  </button>
-                  <button class="bdN bgc--success-color c--w p12px mx8px dF aiC bdra4px">
-                    <span class="ml8px">X-Twitter</span>
-                  </button>
-                </div>
-                <div class="dF aiC my20px">
-                  <div class="fx1 h1px bgc--div"></div>
-                </div>
-                <div class="taC">
-                  <a href="#" class="p12px">
-                    Create new account
-                  </a>
-                </div>
-              </div>
-            </div>
-    <script type="module">
-      import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
-      $.cssObserve(document);
-    </script>
-  </body>
-</html>
-```
+  );
+}
+```
+## Cac quy tac viet class nhanh
+Dang co ban: `[prefix:][layer][prop][value][@selector]`
+- `bgc#fff` -> background-color #fff
+- `p10px` -> padding 10px
+- `p!10px` -> padding 10px !important
+- `w--size` -> width: var(--size)
+- `bg{linear-gradient(...)}` -> dung gia tri raw
+- `mx10px` -> margin-left/right 10px
+- `p10&bgc#fff` -> ket hop nhieu cap prop+value
+## Value ext mac dinh
+```txt
+n:none
+nm:normal
+a:auto
+i:inherit
+in:initial
+is:inline-start
+ie:inline-end
+tr:transparent
+c:center
+cl:collapse
+l:left
+r:right
+h:hidden
+v:visible
+s:start
+e:end
+t:top
+b:bottom
+bs:block-start
+be:block-end
+```
+## Cấu hình tuy chinh
+```js
+import { xcss } from "@fwkui/x-css";
+const { buildCss } = xcss({
+  css: [".app{font-family:sans-serif;}", ".box{border-radius:8px;}"],
+  gValue: {
+    btn: ["padding:8px 12px", "border-radius:6px"],
+  },
+  exNames: ["no-xcss", "legacy-*"],
+  mQuery: [{ tablet: "screen and (min-width: 900px)" }],
+  valueExt: { brand: "#0ea5e9" },
+});
+const engine = buildCss(document);
+engine?.observe();
+```
+## Tu dien viet tat thuoc tinh (dễ tra cứu)
+Để tài liệu nhẹ và dễ nhìn, **bảng từ điển đầy đủ đã được tách riêng**:
+- Xem tại: `DICTIONARY.md`