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

@fwkui/x-css 1.0.3 → 1.0.6

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 (18) hide show

package/README.md CHANGED Viewed

@@ -1,2361 +1,155 @@
-# Hướng dẫn sử dụng x-css
+# @fwkui/x-css 🚀
-`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ả.
+**@fwkui/x-css** là một thư viện CSS-in-JS siêu nhẹ, hiệu năng cao, kế thừa tinh hoa từ `fwxcss` với cú pháp Emmet-like. Nó giúp bạn viết mã CSS nhanh hơn bằng cách sử dụng các lớp atomic ngắn gọn, hỗ trợ đầy đủ TypeScript, SSR và khả năng mở rộng mạnh mẽ.
-## Cài đặt
+![License](https://img.shields.io/npm/l/@fwkui/x-css)
+![Version](https://img.shields.io/npm/v/@fwkui/x-css)
-Để 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>
-```
-### 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
+## 📖 Hướng dẫn Cơ bản
-### 🎨 **Quản lý giá trị phức tạp**
+### 1. Cú pháp Cốt lõi
+Mỗi class trong @fwkui/x-css được cấu tạo theo công thức:
+`[Media]:[Layer][Property][Value][@Selector]`
-#### **Sử dụng CSS Variables cho giá trị dài:**
+**Ví dụ:**
+- `m10px` ⮕ `margin: 10px`
+- `cRed` ⮕ `color: red`
+- `sm:p20px` ⮕ `@media (min-width: 576px) { padding: 20px }`
+- `3bgWhite` ⮕ `@layer l3 { background: white }`
+- `cBlue@:hover` ⮕ `.class:hover { color: blue }`
-```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;
-}
-```
+### 2. Nguyên lý Parser (Scan & Slice) 🧠
+Thư viện quét class từ trái sang phải và tự động cắt Property/Value dựa trên các điểm ngắt (Số, Chữ Hoa, Ký tự đặc biệt...), giúp tốc độ xử lý nhanh hơn ~1.6x so với Regex truyền thống.
-```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>
-```
+| Loại điểm ngắt | Ví dụ Class | Phân tích (Prop \| Value) |
+| :--- | :--- | :--- |
+| **Số (0-9)** | `w100px` | `w` (width) \| `100px` |
+| **Chữ Hoa (A-Z)** | `dFlex` | `d` (display) \| `Flex` |
+| **Dấu gạch ngang + Số** | `m-10px` | `m` (margin) \| `-10px` |
-#### **Tạo component classes cho pattern thường dùng:**
+> [!IMPORTANT]
+> **Lưu ý về CamelCase**: Sử dụng `mt10px` hoặc `margin-top-10px`, tránh `marginTop10px` để đảm bảo parser hoạt động chính xác.
-```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**
+## 📚 Bộ Từ điển (Dictionary)
+Danh sách đầy đủ các từ viết tắt được cập nhật liên tục tại [DICTIONARY.md](./DICTIONARY.md).
-#### **Sử dụng mobile-first approach:**
+### Một số Alias phổ biến:
+- **Layout**: `d` (display), `pos` (position), `z` (z-index), `fl` (float).
+- **Flexbox**: `fx` (flex), `ai` (align-items), `jc` (justify-content).
+- **Spacing**: `m` (margin), `p` (padding), `w` (width), `h` (height).
+- **Styling**: `c` (color), `bg` (background), `bd` (border), `op` (opacity).
+- **Typography**: `fz` (font-size), `fw` (font-weight), `ta` (text-align).
-```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:**
+## 📦 Cài đặt
-```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>
+```bash
+npm install @fwkui/x-css
 ```
-### 🎭 **Layer Management**
+---
-#### **Tổ chức layers theo hierarchy:**
+## 🚀 Hướng dẫn Sử dụng
-```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>
-```
+### 1. Vanilla JavaScript (Tự động)
-### 🔧 **Performance Tips**
+Để tự động scan và apply style cho toàn bộ document:
-#### **Tránh over-engineering:**
+```javascript
+import xcss from '@fwkui/x-css';
-```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>
+// Khởi tạo và lắng nghe thay đổi DOM
+xcss.cssObserve(document);
 ```
-#### **Sử dụng shorthand khi có thể:**
+Sử dụng trong HTML:
 ```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>
+<div class="dFlex cRed m20px">Hello World</div>
 ```
-### 🎨 **Design System Integration**
+### 2. React / Components (`clsx`)
-#### **Tạo design tokens:**
+Sử dụng `clsx` để kết hợp class động và tối ưu việc gom nhóm string (tương tự `classnames` nhưng tích hợp sẵn parser engine):
-```css
-:root {
-  /* Colors */
-  --color-primary: #0070f3;
-  --color-secondary: #7928ca;
-  --color-success: #0070f3;
-  --color-warning: #f5a623;
-  --color-error: #e00;
+```jsx
+import { clsx } from '@fwkui/x-css';
-  /* 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;
+function Button({ primary, children }) {
+  return (
+    <button
+      className={clsx(
+        'p10px;20px',    // padding: 10px 20px
+        'bdn bdra4px',   // border: none, border-radius: 4px
+        'tr0.2s',        // transition: 0.2s
+        'cWhite',        // color: white
+        primary ? 'bgBlue' : 'bgGray',
+        'op0.8@:hover'   // Opacity 0.8 on hover
+      )}
+    >
+      {children}
+    </button>
+  );
 }
 ```
-#### **Sử dụng semantic naming:**
+### 3. Cấu hình (Configuration)
-```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:**
+Bạn có thể truyền object config khi khởi tạo:
-```html
-<!-- Component: Button Primary -->
-<!-- Usage: <button class="btnPrimary">Click me</button> -->
-<!-- Variants: btnSecondary, btnDanger, btnGhost -->
-<button class="btnPrimary">Click me</button>
-```
+```javascript
+import xcss from '@fwkui/x-css';
-#### **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>
+xcss.cssObserve(document, {
+  // Thêm màu sắc hoặc giá trị custom
+  theme: {
+    brand: '#ff5722',
+    dark: '#333333'
+  },
+  // Thêm breakpoint tùy chỉnh
+  breakpoints: [
+    { tablet: 'screen and (min-width: 768px)' }
+  ],
+  // Base CSS
+  base: 'body { margin: 0; font-family: sans-serif; }'
+});
 ```
-### 💡 **Pro Tips**
+Sau đó sử dụng: `cBrand`, `tablet:dBlock`.
-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
+### 4. Server-Side Rendering (SSR)
-## Ví dụ tổng hợp
+Để hỗ trợ SSR (Next.js, Remix...), bạn cần inject CSS sinh ra từ server vào thẻ `<head>`:
-**HTML**
+```javascript
+import { getCss } from '@fwkui/x-css';
-```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>
-```
+// Trong file layout/server entry
+const styles = getCss();
-**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;
-}
+// Inject HTML
+// <style dangerouslySetInnerHTML={{ __html: styles }} />
 ```
-## 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
+## ⚙️ Hỗ trợ AI Coding
-- `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`
+Để AI (Cursor, Copilot) code chính xác với cú pháp của @fwkui/x-css, hãy thêm rule sau vào `.cursorrules` hoặc prompt:
-### 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`
+```markdown
+You are using @fwkui/x-css. Follow these rules:
+1. Syntax: `[Media]:[Layer][Property][Value][@Selector]`
+2. Layer prefix: `3bgWhite` (NOT `3:bgWhite`).
+3. Selector suffix: `cRed@:hover` (NOT `hover:cRed`).
+4. Value capitalization: `dFlex`, `posAbs`.
+5. Use aliases from DICTIONARY.md (e.g., `m` for margin, `d` for display).
+```
 ---
-_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>
-```
+*Verified & Updated at 2026-01-27*