@beehexa/design-rules 0.0.0-stage → 2611.3.2

package/dist/docs/src/content-vi/foundations/styles/icons/usage.mdx

@@ -0,0 +1,100 @@
+---
+title: Cách dùng
+description: Dùng cỡ nào, nét, màu và căn chỉnh cạnh chữ hoạt động thế nào, khi nào icon cần nhãn, và icon duy nhất cho từng thao tác thường gặp ở Beehexa.
+order: 2
+---
+import IconDemo from '../../../../components/IconDemo.astro';
+import ColorDemo from '../../../../components/ColorDemo.astro';
+
+**Dùng icon 16 px, cùng màu với chữ, có nhãn, và cùng một icon cho cùng một nghĩa ở mọi nơi.**
+
+## Cỡ
+
+**Chọn cỡ theo chữ đứng cạnh icon.**
+
+| Cỡ | Dùng cho |
+|---|---|
+| 16 px | Mặc định. Nút, menu, bảng, ô nhập, cạnh chữ 14 px. |
+| 20 px | Cạnh chữ 16 px, trong thanh công cụ và page header. |
+| 24 px | Icon đứng riêng, như trạng thái trong card hoặc trạng thái trống nhỏ. |
+| 32 px | Chỉ cho trạng thái trống. |
+
+Không dùng cỡ khác. Không phóng to thu nhỏ icon cho vừa khung: hãy đổi khung.
+
+<IconDemo kind="dodont" item="size" />
+
+## Nét
+
+**Giữ nguyên nét của Lucide.** Nét dày 2 đơn vị trên lưới 24 và co giãn theo icon: 1,33 px ở cỡ 16, 1,67 px ở cỡ 20, 2 px ở cỡ 24. Không đặt `stroke-width` hay `absoluteStrokeWidth`. Nét cố định 2 px sẽ lấp mất chi tiết nhỏ của icon 16 px.
+
+<IconDemo kind="dodont" item="stroke" />
+
+## Màu
+
+**Icon lấy màu của chữ.** Icon vẽ bằng `currentColor`, nên icon trong nút hay link tự đúng màu mà không cần thêm code. Chỉ đặt màu bằng token `color.icon.*`:
+
+<ColorDemo kind="roles" group="icon" />
+
+- Icon trạng thái dùng token trạng thái, như `icon.danger`, và luôn đi kèm trạng thái viết bằng chữ.
+- Không tô màu icon để trang trí, và không bao giờ dùng màu vàng thương hiệu cho icon.
+
+<IconDemo kind="dodont" item="colour" />
+
+## Căn với chữ
+
+**Căn icon vào giữa line height của chữ.** Dùng `display: flex; align-items: center`. Khi chữ có nhiều dòng, căn icon vào giữa dòng đầu tiên.
+
+<IconDemo kind="align" />
+
+<IconDemo kind="dodont" item="align" />
+
+## Khoảng cách
+
+**Khoảng cách giữa icon và chữ theo cỡ chữ: 4 px cạnh chữ 14 px trở xuống, 8 px cạnh chữ 16 px trở lên.**
+
+| Chữ | Icon | Khoảng cách | Token | Ở đâu |
+|---|---|---|---|---|
+| 12 hoặc 14 px | 16 px | 4 px | `space.050` | Control cỡ nhỏ và mặc định, menu, tab, ô trong bảng |
+| Từ 16 px trở lên | 20 hoặc 24 px | 8 px | `space.100` | Control cỡ lớn, thanh công cụ, page header, trạng thái trong card |
+
+Đặt khoảng cách trên control bằng `gap`, không dùng margin trên icon.
+
+<IconDemo kind="spacing" />
+
+## Icon và nhãn
+
+**Mặc định icon có nhãn đi kèm.** Nhãn nói điều gì sẽ xảy ra; icon giúp người dùng tìm lại nhanh.
+
+Chỉ dùng icon đứng riêng khi cả ba điều sau đều đúng:
+
+- Thao tác ai cũng biết: đóng, tìm kiếm, thêm, sửa, xoá, sao chép, làm mới, cài đặt, lọc, thêm tuỳ chọn, menu.
+- Chỗ hẹp, như một dòng trong bảng hay thanh công cụ.
+- Nút có tên (`aria-label`) và tooltip cùng nội dung. Xem [Khả năng tiếp cận](/vi/foundations/styles/icons/accessibility/).
+
+<IconDemo kind="dodont" item="label" />
+
+## Trạng thái đã chọn
+
+**Icon Lucide chỉ có dạng nét.** Thể hiện mục đã chọn bằng `background.selected` và thanh chỉ báo, không tô đặc icon.
+
+<IconDemo kind="dodont" item="selected" />
+
+## Thao tác thường gặp
+
+**Mỗi nghĩa một icon.** Dùng đúng icon này mỗi khi hiển thị một trong các thao tác hay đối tượng dưới đây, ở mọi sản phẩm. Nếu chưa có nghĩa bạn cần, hãy hỏi trước khi chọn, để nó được bổ sung vào đây.
+
+<IconDemo kind="actions" />
+
+<IconDemo kind="dodont" item="meaning" />
+
+## Nên và không nên
+
+| Nên | Không nên |
+|---|---|
+| Dùng cỡ 16, 20, 24 hoặc 32 px. | Phóng to thu nhỏ icon sang cỡ khác. |
+| Giữ icon cùng màu chữ. | Tô màu icon để trang trí. |
+| Thêm nhãn cho hầu hết icon. | Dùng một icon lạ đứng riêng. |
+| Dùng cùng icon cho cùng nghĩa. | Mỗi sản phẩm dùng một icon khác nhau. |
+| Dùng icon nét với nền "đã chọn". | Tô đặc icon để báo đã chọn. |
+| Viết trạng thái bên cạnh icon trạng thái. | Để icon hoặc màu của nó tự báo trạng thái. |
+| Mỗi nút một icon. | Ghép hai icon thành một thao tác. |

package/dist/docs/src/content-vi/foundations/styles/illustration.mdx

@@ -0,0 +1,9 @@
+---
+title: "Hình minh hoạ"
+description: "Sơ đồ, hình minh hoạ và hình ảnh giải thích sản phẩm Beehexa."
+order: 14
+planned:
+  - "Khi nào dùng sơ đồ, hình minh hoạ hay ảnh chụp màn hình"
+  - "Phong cách sơ đồ theo brand guide: có cấu trúc, dựng trên lưới lục giác"
+  - "Hình cho trạng thái trống và onboarding"
+---

package/dist/docs/src/content-vi/foundations/styles/interaction-states.mdx

@@ -0,0 +1,49 @@
+---
+title: Trạng thái tương tác
+description: Control trông thế nào khi được hover, focus, nhấn, chọn hoặc bị vô hiệu.
+order: 10
+---
+import TokenTable from '../../../components/TokenTable.astro';
+
+Mọi thành phần tương tác đều cần đủ các trạng thái này. Mỗi trạng thái có token màu riêng, nên mọi component hiển thị nó giống nhau và chạy đúng ở giao diện sáng lẫn tối mà không cần thêm code.
+
+## Quy tắc
+
+1. Mỗi trạng thái dùng token riêng. Tìm token của thành phần ở trạng thái nghỉ, rồi thêm trạng thái: `color.background.neutral` ở trạng thái nghỉ thành `color.background.neutral.hover` khi hover và `color.background.neutral.pressed` khi nhấn.
+2. Không bao giờ vẽ trạng thái bằng độ mờ, lớp phủ trong suốt, `filter: brightness()` hay màu pha trộn. Kết quả sẽ thay đổi theo thứ nằm bên dưới, và không kiểm tra được độ tương phản.
+3. Không tự nghĩ ra màu hover hay màu nhấn. Nếu chưa có token bạn cần, hãy đề nghị thêm nó vào trang Màu sắc trước.
+4. Focus bằng bàn phím luôn nhìn thấy được, trên mọi thành phần nhận được focus. Hover không bao giờ là cách duy nhất để hiện một thứ gì đó.
+
+## Từng trạng thái
+
+| Trạng thái | Khi nào | Nền | Chữ và icon | Viền |
+| --- | --- | --- | --- | --- |
+| Nghỉ (rest) | Không có gì xảy ra. | Token của thành phần, như `color.background.neutral` hoặc `color.background.danger.bold` | Token chữ đi cặp với nền (xem Màu sắc, phần Ghép cặp) | `color.border` hoặc `color.border.bold` |
+| Hover | Con trỏ đang nằm trên thành phần. | Cùng token, thêm `.hover`: lên một bậc trên thang màu | Không đổi | Không đổi |
+| Nhấn (pressed) | Thành phần đang được click hoặc chạm. | Cùng token, thêm `.pressed`: lên hai bậc | Không đổi | Không đổi |
+
+Nút chính là ngoại lệ duy nhất. Nút này nằm ở graphite 12, bậc cuối của thang, nên không còn bậc nào phía trên: khi hover nó lùi một bậc (graphite 11), khi nhấn lùi hai bậc (graphite 10). Token của nút đã làm sẵn việc này.
+| Focus | Thành phần đang có focus từ bàn phím (`:focus-visible`). | Không đổi | Không đổi | Thêm viền: `outline: var(--bh-border-width-focused) solid var(--bh-color-border-focus); outline-offset: var(--bh-state-focus-offset);` |
+| Được chọn (selected) | Thành phần đã được chọn, như một dòng trong bảng, một tab hay một mục menu. | `color.background.selected`, và `color.background.selected.hover` khi hover | Không đổi, kèm một dấu hiệu thứ hai: dấu tích, vạch chỉ báo màu vàng (`color.border.selected`) hoặc chữ đậm trong menu | Không đổi |
+| Vô hiệu (disabled) | Thành phần tạm thời không dùng được. | `color.background.disabled` | `color.text.disabled`, `color.icon.disabled` | `color.border.disabled` |
+
+## Dòng, mục menu và nút ghost
+
+Thành phần không có nền ở trạng thái nghỉ dùng `color.background.neutral.subtle`, là màu trong suốt. Khi hover, chúng dùng `color.background.neutral.subtle.hover`; khi nhấn, dùng `color.background.neutral.subtle.pressed`.
+
+## Vô hiệu
+
+- Dùng ba token màu vô hiệu ở trên. Không giảm độ mờ.
+- Bỏ tương tác bằng chuột và bàn phím (`disabled` với control gốc của HTML, `aria-disabled="true"` kèm chặn sự kiện với các thành phần khác) và hiện `cursor: not-allowed`.
+- WCAG không yêu cầu độ tương phản cho control bị vô hiệu, nên các màu vô hiệu được cố ý làm nhạt.
+- Nên cho người dùng biết vì sao không dùng được, ví dụ bằng helper text, thay vì để control bị vô hiệu mà không giải thích.
+
+## Giao diện tối
+
+Các token này dùng được ở giao diện tối. Ở giao diện tối, nền sáng lên khi hover và khi nhấn thay vì tối đi, còn nút chính lùi khỏi graphite 12 theo cùng cách; token đã làm sẵn việc này, nên code không đổi.
+
+## Token
+
+Các màu nằm ở trang [Màu sắc](/vi/foundations/styles/color/). Độ dày focus ring, `border.width.focused`, nằm ở trang [Viền](/vi/foundations/styles/border/). Nhóm này chứa khoảng cách giữa control và ring.
+
+<TokenTable prefix="state" />

package/dist/docs/src/content-vi/foundations/styles/layout/app-frame.mdx

@@ -0,0 +1,77 @@
+---
+title: Khung ứng dụng
+description: Header, menu bên và page header lặp lại trên mọi trang, kích thước của chúng, và khoảng cách giúp chúng thẳng hàng.
+order: 1
+---
+import LayoutDemo from '../../../../components/LayoutDemo.astro';
+
+**Header, menu bên và page header lặp lại trên mọi trang, ở cùng vị trí và cùng kích thước.**
+
+## Header
+
+**Cao 48 px, trải hết chiều ngang. Chứa những gì thuộc về cả sản phẩm.**
+
+| Phần | Giá trị |
+|---|---|
+| Chiều cao | 48 px: một control 32 px, cách 8 px phía trên và phía dưới. Đường kẻ 1 px dưới header không tính vào |
+| Chứa | Nút menu (dưới 1024 px), logo, tìm kiếm toàn cục, chuyển workspace, thông báo, tài khoản |
+| Không chứa | Breadcrumb và nút hành động của trang. Chúng đổi theo từng trang, nên nằm trong page header |
+
+## Menu bên
+
+**Rộng 280 px khi mở, thu thành rail 64 px khi gọn, thành drawer khi dưới 1024 px. Mọi sản phẩm Beehexa dùng cùng các độ rộng này.**
+
+| Cửa sổ | Menu bên |
+|---|---|
+| Dưới 1024 px | Ẩn. Nút menu trên header mở nó thành drawer phủ lên trang. |
+| Từ 1024 px trở lên | Mở ở 280 px. Người dùng có thể thu gọn thành rail 64 px, và lựa chọn này được ghi nhớ. |
+
+- **280 px** chứa vừa nhãn khoảng 31 ký tự ở cỡ 14 px, kể cả nhãn tiếng Việt dài.
+- **Cùng một độ rộng ở mọi sản phẩm**, để trang luôn bắt đầu ở cùng một chỗ khi người dùng chuyển giữa các sản phẩm.
+- **Không kéo giãn.** Một độ rộng duy nhất giữ các sản phẩm giống nhau. Panel kéo giãn được còn cần thêm cách đổi cỡ không phải kéo (WCAG 2.5.7).
+- **Rail** chỉ hiện icon. Nhãn của từng mục hiện trong tooltip.
+
+### Nhãn dài
+
+<LayoutDemo kind="navlabels" />
+
+1. Trước hết, viết nhãn ngắn hơn.
+2. Nếu vẫn không vừa, cắt bằng dấu ba chấm và hiện nhãn đầy đủ trong tooltip, chỉ khi nhãn bị cắt.
+3. Không bao giờ nới rộng menu bên vì một nhãn. Sản phẩm có nhãn dài ở khắp nơi có thể chọn một độ rộng từ 240 đến 320 px cho toàn sản phẩm, và ghi lại quyết định đó.
+
+## Page header
+
+**Phần đầu của mọi trang: breadcrumb, tiêu đề, trạng thái và nút hành động của trang.**
+
+<LayoutDemo kind="pageheader" />
+
+| Hàng | Chứa | Khi nào |
+|---|---|---|
+| Breadcrumb | Các trang cấp trên của trang này | Từ cấp thứ hai trở xuống |
+| Hàng tiêu đề | Tiêu đề trang (`heading.large`) và trạng thái ở bên trái; nút hành động của trang ở bên phải, nút chính đứng cuối | Luôn có |
+| Mô tả | Một dòng giới thiệu trang | Không bắt buộc |
+| Tab hoặc bộ lọc | Các góc nhìn của cùng một trang | Không bắt buộc |
+
+- **Page header trải hết vùng nội dung ở mọi độ rộng trang.** Chỉ phần nội dung bên dưới theo [Full, Wide hoặc Narrow](/vi/foundations/styles/layout/page-widths/), nên tiêu đề và nút hành động của trang luôn nằm cùng một chỗ trên mọi trang.
+- Breadcrumb thuộc về trang, không thuộc header: nó đổi theo từng trang, còn header thì giữ nguyên.
+- Ngữ cảnh của cả sản phẩm, như workspace, nằm trên header.
+
+## Panel bên
+
+Panel đặt cạnh nội dung chính, như chi tiết của dòng đang chọn, chiếm các cột của lưới: 4 trên 12 cột từ 1024 px và 3 trên 12 cột từ 1440 px. Dưới 1024 px nó mở thành drawer phủ lên trang. Xem phần span ở trang [Lưới](/vi/foundations/styles/layout/grid/#span).
+
+## Khoảng cách trong khung
+
+**Mọi thứ trong khung thẳng hàng theo hai mép: cách mép trái cửa sổ 20 px, và lề trang.**
+
+| Giữa | Khoảng cách |
+|---|---|
+| Mép cửa sổ và logo; mép cửa sổ và icon của menu bên | 20 px, `space.250` |
+| Các mục trong menu bên và mép của menu | 8 px, `space.100` |
+| Hai mục liền nhau trong menu bên (mỗi mục cao 32 px) | 4 px, `space.050` |
+| Nội dung và menu bên, header hoặc mép cửa sổ | Lề trang: 16, 24 hoặc 32 px ([Lưới](/vi/foundations/styles/layout/grid/)) |
+| Breadcrumb và tiêu đề | 8 px, `space.100` |
+| Tiêu đề và mô tả | 4 px, `space.050` |
+| Page header và nội dung | 24 px, `space.300` |
+
+Mép 20 px của logo lấy từ menu bên: 8 px thụt vào cộng 12 px padding ngang của một control 32 px. Nhờ vậy logo nằm ngay trên các icon.

package/dist/docs/src/content-vi/foundations/styles/layout/breakpoints.mdx

@@ -0,0 +1,56 @@
+---
+title: Breakpoint
+description: Bốn độ rộng cửa sổ nơi bố cục Beehexa thay đổi, mỗi mốc đổi những gì, và thứ tự thiết kế.
+order: 4
+---
+import LayoutDemo from '../../../../components/LayoutDemo.astro';
+import TokenTable from '../../../../components/TokenTable.astro';
+
+**Bố cục đổi ở ba độ rộng cửa sổ: 768, 1024 và 1440 px. Mọi màn hình cũng phải dùng được ở 320 px.**
+
+<LayoutDemo kind="breakpoints" />
+
+## Những gì thay đổi
+
+| Breakpoint | Từ | Cửa sổ | Thay đổi |
+|---|---|---|---|
+| `xs` | 0 | Điện thoại và cửa sổ nhỏ | Một bố cục co giãn: 4 cột, gutter và lề trang 16 px, nội dung một cột. Menu bên nằm trong drawer. |
+| `md` | 768 px | Máy tính bảng, cửa sổ hẹp | 8 cột. Gutter và lề trang 24 px. Menu bên vẫn nằm trong drawer. |
+| `lg` | 1024 px | Laptop, kể cả màn hình 1280 và 1366 px | 12 cột. Menu bên mở ở 280 px, hoặc thu thành rail 64 px. Có thể đặt panel bên cạnh panel chính. |
+| `xl` | 1440 px | Máy bàn, kể cả màn hình 1536 và 1920 px | Lề trang 32 px. Bốn card một hàng. |
+
+- **Dưới 768 px là một bố cục.** Các cột giãn theo cửa sổ, từ 320 đến 767 px. Card hay bảng bên trong vẫn có thể đổi theo độ rộng khung chứa của chính nó, bằng container query.
+- **320 px không phải là breakpoint.** Đó là cửa sổ hẹp nhất mà mọi màn hình phải dùng được, cũng chính là cửa sổ 1280 px phóng to 400% (WCAG 1.4.10).
+
+## Thứ tự thiết kế
+
+**Thiết kế cho máy tính trước, rồi điều chỉnh màn hình cho cửa sổ nhỏ hơn. Viết CSS từ cửa sổ nhỏ nhất trở lên.**
+
+Sản phẩm Beehexa chủ yếu được dùng trên máy tính, nên màn hình chính bắt đầu từ độ rộng người dùng hay dùng nhất.
+
+1. Thiết kế ở 1440 px, và kiểm tra ở 1280 px.
+2. Điều chỉnh cho 1024 px, rồi 768 px.
+3. Điều chỉnh cho 360 px, và kiểm tra ở 320 px.
+
+Trong code, style gốc dành cho cửa sổ nhỏ nhất, và mỗi breakpoint bổ sung thêm bằng `min-width`. Làm vậy thì ít quy tắc phải gỡ ngược lại hơn.
+
+## Kiểm tra mọi màn hình ở
+
+| Cửa sổ | Vì sao |
+|---|---|
+| 1440 và 1280 px | Máy bàn và laptop người dùng hay dùng nhất |
+| 1024 px | Ngay trên mốc menu bên chuyển thành drawer |
+| 768 px | Máy tính bảng, và mốc chuyển sang 8 cột |
+| Khoảng 844 × 390 px | Điện thoại xoay ngang: đủ rộng cho bố cục máy tính bảng nhưng thấp |
+| 360 và 320 px | Điện thoại, và cửa sổ hẹp nhất được phép |
+| Phóng to 400% | Người dùng phóng to trang |
+
+## Token
+
+<TokenTable prefix="breakpoint" />
+
+## Cách dùng
+
+- Viết media query bằng `min-width`: `@media (min-width: 768px)`.
+- Không dùng được CSS custom property trong media query. Dùng giá trị pixel của các token này.
+- Đổi bố cục tại breakpoint, không bao giờ đổi token khoảng cách hay cỡ chữ bên trong component.

package/dist/docs/src/content-vi/foundations/styles/layout/grid.mdx

@@ -0,0 +1,87 @@
+---
+title: Lưới
+description: Lưới co giãn 4, 8 hoặc 12 cột trong vùng nội dung chính, với gutter và lề trang lấy từ token khoảng cách.
+order: 3
+---
+import LayoutDemo from '../../../../components/LayoutDemo.astro';
+
+**Dàn vùng nội dung chính trên 4 cột ở điện thoại, 8 cột ở máy tính bảng và 12 cột từ 1024 px.**
+
+<LayoutDemo kind="grid" />
+
+## Cột, gutter và lề
+
+| Cửa sổ | Số cột | Gutter | Lề trang |
+|---|---|---|---|
+| Dưới 768 px | 4 | 16 px | 16 px |
+| 768 đến 1023 px | 8 | 24 px | 24 px |
+| 1024 đến 1439 px | 12 | 24 px | 24 px |
+| Từ 1440 px trở lên | 12 | 24 px | 32 px |
+
+Các giá trị đều là token khoảng cách: 16 px là `space.200`, 24 px là `space.300` và 32 px là `space.400`. Các khoảng bắt đầu tại breakpoint `md`, `lg` và `xl`.
+
+- **12 cột** chia được thành nửa, một phần ba, một phần tư và một phần sáu.
+- **4 cột trên điện thoại** cho hai nửa hoặc bốn phần tư. **8 cột trên máy tính bảng** giữ nguyên các nửa và phần tư đó nhưng rộng rãi hơn.
+- **Gutter** là 16 px trên điện thoại và 24 px từ 768 px, khi đã đủ chỗ để tách các card rõ hơn.
+- **Lề trang** bắt đầu từ 16 px và tăng lên 32 px trên màn hình rộng, để nội dung không chạm mép cửa sổ lớn.
+- **Mọi giá trị đều là token khoảng cách và là bội số của 8 px**, như line height của chữ, nên card, chữ và control thẳng hàng với nhau.
+
+Dùng cùng gutter giữa các hàng, để card cách nhau theo chiều dọc bằng theo chiều ngang.
+
+## Cột co giãn
+
+**Cột giãn theo cửa sổ. Gutter và lề giữ cố định trong mỗi khoảng.**
+
+Cửa sổ rộng hơn thì cột rộng hơn, không phải thêm khoảng trống. Tới breakpoint kế tiếp, gutter, lề hoặc số cột mới thay đổi.
+
+## Lưới nằm ở đâu
+
+**Lưới chỉ trải trên vùng nội dung chính.**
+
+- Header và menu bên không nằm trên lưới. Lưới bắt đầu từ chỗ menu bên kết thúc, nên các cột luôn chia đều vùng nội dung.
+- Menu bên giữ độ rộng cố định thay vì chiếm cột. Nếu tính bằng cột, nó sẽ to nhỏ theo cửa sổ, và khi thu thành rail thì số cột bị lệch.
+- Breakpoint vẫn đọc theo độ rộng cửa sổ. Mở hay thu gọn menu bên không làm đổi breakpoint.
+- Nội dung trong panel hoặc card có thể theo độ rộng của khung chứa nó, bằng container query.
+- Trên trang Wide hoặc Narrow, lưới lấp đầy độ rộng đã giới hạn. Xem [Độ rộng trang](/vi/foundations/styles/layout/page-widths/).
+
+## Span
+
+Span là số cột một phần tử chiếm.
+
+| Bố cục | Dưới 768 px (trên 4) | 768 px (trên 8) | 1024 px (trên 12) | 1440 px (trên 12) |
+|---|---|---|---|---|
+| Card, 1 đến 4 card một hàng | 4 | 4 | 4 | 3 |
+| Panel chính và panel bên | 4 | 8 | 8 + 4 | 9 + 3 |
+| Ô tóm tắt | 2 | 2 | 3 | 2 |
+
+Trong CSS, lưới chỉ cần vài dòng:
+
+```css
+.page-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--bh-space-200);
+  padding-inline: var(--bh-space-200);
+}
+@media (min-width: 768px) {
+  .page-grid {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+    gap: var(--bh-space-300);
+    padding-inline: var(--bh-space-300);
+  }
+}
+@media (min-width: 1024px) {
+  .page-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+}
+@media (min-width: 1440px) {
+  .page-grid { padding-inline: var(--bh-space-400); }
+}
+```
+
+## Thứ gì đặt trên lưới
+
+- Các vùng của trang căn theo cột: card, panel, cột form, ô tóm tắt.
+- Control bên trong một vùng thì không. Trong card, dùng token khoảng cách.
+- Bảng dữ liệu lấp đầy vùng của nó. Không chia cột bảng theo lưới.
+
+Xem [Breakpoint](/vi/foundations/styles/layout/breakpoints/) để biết khi nào lưới thay đổi.

package/dist/docs/src/content-vi/foundations/styles/layout/index.mdx

@@ -0,0 +1,24 @@
+---
+title: Bố cục
+description: Khung chung của mọi ứng dụng Beehexa (header, menu bên, page header và nội dung) và các trang quy định kích thước của nó.
+order: 4
+sidebarLabel: Tổng quan
+---
+import LayoutDemo from '../../../../components/LayoutDemo.astro';
+
+**Mọi ứng dụng Beehexa dùng chung một khung: header chạy ngang phía trên, menu bên ở bên trái, và trang nằm cạnh menu.**
+
+Người dùng chuyển qua lại giữa các màn hình cả ngày. Khi menu, ô tìm kiếm và các nút hành động của trang luôn ở cùng một chỗ, họ tìm thấy mà không cần nhìn.
+
+<LayoutDemo kind="anatomy" />
+
+## Mỗi phần được quy định ở đâu
+
+| Phần | Quy định gì | Trang |
+|---|---|---|
+| Header, menu bên, page header | Các phần lặp lại trên mọi trang, kích thước và khoảng cách giữa chúng | [Khung ứng dụng](/vi/foundations/styles/layout/app-frame/) |
+| Độ rộng nội dung | Full, Wide hoặc Narrow, theo nội dung của trang | [Độ rộng trang](/vi/foundations/styles/layout/page-widths/) |
+| Cột | Cột, gutter và lề trang trong vùng nội dung | [Lưới](/vi/foundations/styles/layout/grid/) |
+| Độ rộng cửa sổ | Bố cục đổi ở đâu, và thứ tự thiết kế | [Breakpoint](/vi/foundations/styles/layout/breakpoints/) |
+| Chiều cao control | 24, 32 và 40 px, và mật độ | [Kích thước và mật độ](/vi/foundations/styles/size-and-density/) |
+| Khoảng cách giữa các phần tử | Các bậc khoảng cách | [Khoảng cách](/vi/foundations/styles/spacing/) |

package/dist/docs/src/content-vi/foundations/styles/layout/page-widths.mdx

@@ -0,0 +1,34 @@
+---
+title: Độ rộng trang
+description: Nội dung Full, Wide hoặc Narrow, chọn theo nội dung của trang, và độ dài một dòng chữ.
+order: 2
+---
+import LayoutDemo from '../../../../components/LayoutDemo.astro';
+
+**Mỗi trang chọn một trong ba độ rộng, theo nội dung của trang.**
+
+<LayoutDemo kind="widths" />
+
+| Độ rộng | Tối đa | Dùng cho |
+|---|---|---|
+| Full | Không giới hạn | Bảng, danh sách, log, trình dựng và canvas |
+| Wide | 1280 px | Dashboard, trang chi tiết, trang tổng quan cài đặt, trang thông thường |
+| Narrow | 768 px | Form, form cài đặt, các bước wizard, trang hướng dẫn và tài liệu |
+
+- **Full.** Bảng và log hiện được nhiều cột, nhiều dòng hơn khi dùng hết cửa sổ.
+- **Wide.** Card và panel giữ cỡ vừa mắt để lướt nhanh trên màn hình lớn.
+- **Narrow.** Form một cột điền nhanh, mắt không phải đi xa từ nhãn tới ô nhập.
+- Mức tối đa là độ rộng của nội dung. Lề trang nằm ngoài mức này.
+- Độ rộng chỉ áp dụng cho nội dung. [Page header](/vi/foundations/styles/layout/app-frame/#page-header) phía trên luôn trải hết vùng nội dung, nên tiêu đề và các nút hành động của trang không xê dịch khi chuyển trang.
+
+## Căn chỉnh
+
+**Nội dung Wide hoặc Narrow được căn giữa trong vùng bên cạnh menu bên. Page header vẫn trải hết vùng.**
+
+Khi menu bên mở hoặc đóng, trang dời theo tâm mới.
+
+## Chữ chạy dài
+
+**Chữ chạy hết chiều rộng cột của nó. Để dòng không quá dài, đặt nội dung chữ dài trên trang Narrow.**
+
+Cột Narrow 768 px chứa khoảng 100 ký tự mỗi dòng với chữ 16 px. Trang hướng dẫn hay tài liệu là trang Narrow; mục lục đặt bên cạnh không tính vào 768 px.

package/dist/docs/src/content-vi/foundations/styles/logos/downloads-and-terms.mdx

@@ -0,0 +1,65 @@
+---
+title: Tải về và điều khoản
+description: Mọi file logo, file nào dùng cho việc gì, mã màu, giấy phép font và điều khoản dùng nhãn hiệu Beehexa.
+order: 5
+audience: designer, developer, đối tác, báo chí
+owner: Brand
+updated: 2026-10-24
+---
+import LogoHero from '../../../../components/logos/LogoHero.astro';
+
+## Gói file
+
+<LogoHero />
+
+| Thư mục | Nội dung |
+|---|---|
+| `lockups/` | Lockup beehexa và HexaSync, mỗi loại bốn bản màu, SVG, artboard đã có vùng trống |
+| `icon/` | Icon màu vàng, trắng và xám ghi, SVG, có vùng trống |
+| `favicon-web/` | favicon.svg, favicon.ico và favicon PNG 16, 32, 48 px, apple-touch-icon, icon web app 192 và 512 px, icon maskable, avatar 800 px, site.webmanifest |
+| `license/` | Giấy phép SIL Open Font License của Inter |
+| `README.md` | Tóm tắt luật |
+
+## Dùng file nào
+
+| Bạn cần | Dùng |
+|---|---|
+| Logo trên website hoặc ứng dụng | Ảnh PNG xuất ở 3× từ `lockups/beehexa-horizontal-1-light.svg` (nền sáng) hoặc `-2-dark.svg` (nền tối), hiển thị ở 1×. Xem [hiển thị sắc nét](/vi/foundations/styles/logos/using-the-logo/#hiển-thị-sắc-nét). |
+| Logo trong tài liệu, slide hoặc bản in | `lockups/beehexa-horizontal-1-light.svg` trên nền sáng, `-2-dark.svg` trên nền tối |
+| Logo trên ảnh hoặc nền màu đậm | `-3-white.svg` |
+| In một màu, khắc, đóng dấu | `-4-graphite.svg` |
+| Favicon | `favicon-web/favicon.svg` và `favicon.ico` |
+| Icon ứng dụng hoặc avatar mạng xã hội | `favicon-web/apple-touch-icon.png`, `icon-192.png`, `icon-512.png`, `icon-maskable-512.png`, `avatar-800.png` |
+| Icon trong bố cục của bạn | `icon/beehexa-icon-*.svg` |
+| PNG hoặc PDF | Xuất từ SVG ở đúng cỡ cần dùng. Không phóng to một file PNG nhỏ. |
+
+## Mã màu
+
+| Màu | HEX | RGB | In |
+|---|---|---|---|
+| Vàng | #FCB017 | 252 176 23 | Chưa chốt |
+| Xám ghi | #2B2A28 | 43 42 40 | Chưa chốt |
+| Trắng | #FFFFFF | 255 255 255 | Màu giấy |
+
+Mã CMYK và Pantone sẽ có sau khi in thử. Brand guide 2025 ghi PMS 1235 C cho màu vàng; hãy kiểm trên giấy trước khi dùng, vì màu vàng này in CMYK trên giấy không tráng phủ thường bị xỉn.
+
+## Font chữ
+
+Wordmark dùng Inter Display và đã chuyển thành nét vẽ, nên không cần cài font để dùng logo. Inter dùng giấy phép SIL Open Font License 1.1, cho phép dùng trong logo. Giấy phép có trong gói file.
+
+## Nhãn hiệu
+
+Logo Beehexa đã đăng ký nhãn hiệu tại Việt Nam, số 4-0358730-000, nhóm 9, 35 và 42. Việc đăng ký cho logo như trên site này đang được xác nhận với đại diện sở hữu công nghiệp.
+
+## Điều khoản sử dụng
+
+> Bản nháp, chờ pháp lý duyệt. Câu hỏi gửi về [hello@beehexa.com](mailto:hello@beehexa.com?subject=Logo%20use).
+
+Bạn được dùng logo Beehexa và HexaSync để nói về Beehexa, để thể hiện sản phẩm của bạn tích hợp với HexaSync, hoặc trong tin tức và bài đánh giá về chúng tôi, với điều kiện:
+
+- dùng file trong gói mà không chỉnh sửa, theo trang [Cách dùng logo](/vi/foundations/styles/logos/using-the-logo/);
+- không ngụ ý Beehexa tài trợ, bảo chứng hay là đối tác của bạn nếu chưa có thoả thuận bằng văn bản;
+- không dùng logo, icon hay hình na ná trong tên sản phẩm, logo, tên miền, icon ứng dụng hay tài khoản mạng xã hội của bạn;
+- không để logo của chúng tôi là thành phần nổi bật nhất trong tài liệu của bạn.
+
+Chúng tôi có thể yêu cầu bạn sửa hoặc ngừng bất kỳ cách dùng logo nào.

package/dist/docs/src/content-vi/foundations/styles/logos/index.mdx

@@ -0,0 +1,64 @@
+---
+title: Logo
+description: Logo Beehexa và logo của từng sản phẩm, cùng các luật và file để dùng trên web, ấn phẩm in và trong sản phẩm.
+order: 12
+sidebarLabel: Tổng quan
+audience: web, in ấn, giao diện sản phẩm
+owner: Brand
+updated: 2026-10-23
+---
+import LogoHero from '../../../../components/logos/LogoHero.astro';
+import LogoAnatomy from '../../../../components/logos/LogoAnatomy.astro';
+import LogoConstruction from '../../../../components/logos/LogoConstruction.astro';
+import LogoMeanings from '../../../../components/logos/LogoMeanings.astro';
+
+## Tải về
+
+<LogoHero />
+
+## Cấu tạo
+
+Lockup gồm icon và wordmark đặt cạnh nhau. Mọi số đo dùng chung một đơn vị: cạnh của lục giác, cũng chính là x-height của wordmark.
+
+<LogoAnatomy />
+
+Chỉ có hai dạng: lockup ngang này và [icon đứng riêng](/vi/foundations/styles/logos/using-the-logo/#icon-đứng-riêng). Không có bản xếp dọc.
+
+## Dựng hình
+
+Icon được vẽ trên lưới tam giác đều, nên ai cũng vẽ lại được chính xác: một lục giác đều đỉnh nhọn, ba lớp, cạnh nghiêng 30°.
+
+<LogoConstruction />
+
+## Một icon, ba ý nghĩa
+
+> Như con ong xây tổ, Beehexa ghép từng hệ thống thành một khối vững chắc, rồi đưa doanh nghiệp bay lên.
+
+Ba ý nghĩa lồng vào nhau: phần vàng là thứ Beehexa xây, phần trắng là điều Beehexa mang lại.
+
+<LogoMeanings />
+
+## Tóm tắt luật
+
+| Luật | Giá trị | Chi tiết |
+|---|---|---|
+| Dạng logo | Lockup ngang; icon đứng riêng | [Cấu tạo](#cấu-tạo) |
+| Bản màu | 4 bản, 3 màu: vàng #FCB017, xám ghi #2B2A28, trắng | [Bản màu](/vi/foundations/styles/logos/using-the-logo/#bản-màu) |
+| Vùng trống | 1 x-height (một cạnh lục giác) ở mọi phía | [Vùng trống](/vi/foundations/styles/logos/using-the-logo/#vùng-trống) |
+| Cỡ tối thiểu | Lockup rộng 100 px hoặc 25 mm; icon cao 16 px hoặc 6 mm | [Cỡ tối thiểu](/vi/foundations/styles/logos/using-the-logo/#cỡ-tối-thiểu) |
+| Icon trên nền sáng | Xám ghi, hoặc vàng trên ô xám ghi | [Icon đứng riêng](/vi/foundations/styles/logos/using-the-logo/#icon-đứng-riêng) |
+| Cách viết | Logo ghi “beehexa”, viết thường. Logo sản phẩm giữ cách viết của sản phẩm: “HexaSync”. Trong câu văn, viết Beehexa. | [Logo sản phẩm](/vi/foundations/styles/logos/product-logos/) |
+
+## Khác gì so với logo 2018
+
+| | Logo 2018 | Logo mới |
+|---|---|---|
+| Font chữ | Ubuntu, font của hãng khác, thiếu chữ tiếng Việt | Inter Display, font của Beehexa, đã chuyển thành nét vẽ |
+| Màu chữ | Vàng | Xám ghi trên nền sáng, trắng trên nền tối |
+| Icon | Không có lưới; nét mảnh hơn khe (0.8 : 1) | Lưới 28 dải; nét bằng khe (1 : 1), nét dày hơn 11% |
+| Khoảng cách icon–chữ | Không có luật | 10 dải, đo từ chính icon |
+| Vùng trống | Một lớp chevron, khoảng 0.22 × chiều cao icon | 1 x-height |
+| Cỡ tối thiểu | 120 px hoặc 30 mm | 100 px hoặc 25 mm |
+| Bản màu | Toàn bộ màu vàng | 4 bản |
+
+Logo 2018 vẫn nằm trên các tài liệu đang có cho tới khi logo mới ra mắt. Không dùng nó cho việc mới.