@intlayer/docs 9.4.4 → 9.5.0

package/docs/vi/intlayer_with_solid_start.md

@@ -74,37 +74,31 @@ So với các giải pháp chính như `@solid-primitives/i18n` hoặc `i18next`
 Intlayer được tối ưu hóa để hoạt động hoàn hảo với Solid bằng cách cung cấp **phạm vi nội dung ở cấp độ thành phần**, **dịch thuật phản ứng (reactive)** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n).
 
 </Accordion>
-
 <Accordion header="Kích thước bundle">
 
 Thay vì tải các tệp JSON khổng lồ vào trang của bạn, chỉ tải nội dung cần thiết. Intlayer giúp **giảm kích thước bundle và trang của bạn lên tới 50%**.
 
 </Accordion>
-
 <Accordion header="Khả năng bảo trì">
 
 Giới hạn phạm vi nội dung của ứng dụng **giúp dễ dàng bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể nhân bản hoặc xóa một thư mục tính năng duy nhất mà không gánh nặng tinh thần phải xem lại toàn bộ mã nguồn nội dung của mình. Ngoài ra, Intlayer được **kiểu hóa hoàn toàn (fully typed)** để đảm bảo độ chính xác cho nội dung của bạn.
 
 </Accordion>
-
 <Accordion header="AI Agent">
 
 Đặt nội dung cùng vị trí **giảm bớt ngữ cảnh cần thiết** cho các Mô hình Ngôn ngữ Lớn (LLM). Intlayer cũng đi kèm với một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch còn thiếu, **[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm nhà phát triển (DX) trở nên mượt mà hơn nữa cho các AI agent.
 
 </Accordion>
-
 <Accordion header="Tự động hóa">
 
 Sử dụng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí từ nhà cung cấp AI của bạn. Intlayer cũng cung cấp một **bộ biên dịch (compiler)** để tự động hóa việc trích xuất nội dung, cũng như một [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch trong nền**.
 
 </Accordion>
-
 <Accordion header="Hiệu suất">
 
 Việc kết nối các tệp JSON khổng lồ với các thành phần có thể dẫn đến các vấn đề về hiệu suất và tính phản ứng. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
 
 </Accordion>
-
 <Accordion header="Mở rộng quy mô với những người không phải lập trình viên">
 
 Không chỉ là một giải pháp i18n, Intlayer cung cấp một **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) tự host** và một **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ theo **thời gian thực**, giúp việc hợp tác với biên dịch viên, người viết nội dung và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
@@ -112,12 +106,9 @@ Không chỉ là một giải pháp i18n, Intlayer cung cấp một **[trình ch
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Hướng dẫn từng bước để thiết lập Intlayer trong ứng dụng SolidStart
 
 <Steps>
-
 <Step number={1} title="Cài đặt các gói phụ thuộc">
 
 Cài đặt các gói cần thiết bằng npm:
@@ -173,7 +164,6 @@ bun add intlayer solid-intlayer vite-intlayer
 > `vite-intlayer` ở đây là một mối bận tâm phía server, không chỉ ở thời điểm build: nó cung cấp trình xử lý yêu cầu mà server Nitro của SolidStart chạy. Giữ nó trong `dependencies` là lựa chọn mặc định an toàn — bạn chỉ nên chuyển nó sang `devDependencies` nếu bạn triển khai thư mục `.output` đã được build, nơi Nitro tích hợp trực tiếp trình xử lý đó vào.
 
 </Step>
-
 <Step number={2} title="Cấu hình dự án của bạn">
 
 Tạo tệp cấu hình để định cấu hình ngôn ngữ cho ứng dụng của bạn:
@@ -210,7 +200,6 @@ Với `prefix-no-default`, locale mặc định được phục vụ từ các U
 > Thông qua tệp cấu hình này, bạn có thể thiết lập các URL được địa phương hóa, chuyển hướng middleware, tên cookie, vị trí và phần mở rộng của các khai báo nội dung, tắt nhật ký Intlayer trong console, và nhiều hơn nữa. Để xem danh sách đầy đủ các tham số khả dụng, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
 </Step>
-
 <Step number={3} title="Tích hợp Intlayer vào Cấu hình Vite của bạn">
 
 Thêm plugin Intlayer vào cấu hình của bạn:
@@ -238,7 +227,6 @@ SolidStart chạy trên [Nitro](https://nitro.build), và `intlayer()` đăng k
 - cookie locale được ghi lại vào response.
 
 </Step>
-
 <Step number={4} title="Khai báo Nội dung của bạn">
 
 Tạo và quản lý các khai báo nội dung của bạn để lưu trữ bản dịch:
@@ -312,7 +300,6 @@ export default homeContent;
 > Để biết thêm chi tiết, hãy tham khảo [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
 </Step>
-
 <Step number={5} title="Thêm định tuyến được địa phương hóa">
 
 Mục tiêu của bước này là cung cấp cho mỗi ngôn ngữ URL riêng, giúp các công cụ tìm kiếm lập chỉ mục.
@@ -356,7 +343,6 @@ export default function LocaleLayout(props: RouteSectionProps) {
 > Ưu tiên `[locale]` (bắt buộc) hơn `[[locale]]` nếu bạn sử dụng chế độ định tuyến `'prefix-all'`, và loại bỏ hoàn toàn segment cho `'no-prefix'` hoặc `'search-params'`.
 
 </Step>
-
 <Step number={6} title="Cung cấp locale cho ứng dụng của bạn">
 
 URL là nguồn sự thật duy nhất cho locale: middleware đã chuyển hướng yêu cầu đến đường dẫn được địa phương hóa, vì vậy việc đọc đường dẫn trong root layout giữ cho việc render trên server và hydration trên client đồng bộ, đồng thời làm cho mọi điều hướng phía client tự động cập nhật locale.
@@ -407,7 +393,6 @@ export default function App() {
 > `IntlayerProvider` phản ứng với prop `locale` của nó, vì vậy việc truyền cuộc gọi accessor `locale()` bên trong JSX là đủ — Solid biên dịch nó thành một getter, và toàn bộ cây component sẽ render lại theo ngôn ngữ mới khi URL thay đổi.
 
 </Step>
-
 <Step number={7} title="Thiết lập thuộc tính lang và dir cho HTML trên server">
 
 Thẻ `<html>` được render bởi `entry-server.tsx`, nằm ngoài `Router`. Thay vào đó, hãy đọc locale từ URL của yêu cầu:
@@ -453,7 +438,6 @@ Bây giờ, các trình thu thập thông tin (crawlers) nhận được đúng
 ```
 
 </Step>
-
 <Step number={8} title="Sử dụng Intlayer trong các Trang của bạn">
 
 Truy cập các từ điển nội dung trong toàn bộ ứng dụng của bạn:
@@ -482,10 +466,10 @@ export default function Home() {
 
 > Nếu bạn muốn sử dụng nội dung của mình trong một thuộc tính kiểu `string`, chẳng hạn như `alt`, `title`, `href`, `aria-label`, v.v., bạn có thể sử dụng giá trị của hàm, như:
 >
-> ```html
-> <img src="{content.image.src.value}" alt="{content.image.value}" />
-> <img src="{content.image.src.toString()}" alt="{content.image.toString()}" />
-> <img src="{String(content.image.src)}" alt="{String(content.image)}" />
+> ```tsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 > Để tìm hiểu thêm về hook `useIntlayer`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useIntlayer.md).
@@ -535,7 +519,6 @@ export default function Counter() {
 `plural()` lựa chọn danh mục thông qua `Intl.PluralRules` cho locale đang hoạt động, do đó các ngôn ngữ có nhiều hơn hai dạng số nhiều vẫn hoạt động mà không cần thêm code.
 
 </Step>
-
 <Step number={9} title="Tạo Thành phần Link được Địa phương hóa">
 
 Tạo một thành phần `Link` tùy chỉnh tự động thêm tiền tố ngôn ngữ hiện tại vào các URL nội bộ:
@@ -580,7 +563,6 @@ export const Nav: Component = () => {
 Việc viết `href="/about"` một lần giờ đây sẽ tạo ra `/about`, `/fr/about` hoặc `/es/about` tùy thuộc vào locale đang hoạt động — không cần thêm tiền tố thủ công ở bất kỳ đâu trên các trang của bạn.
 
 </Step>
-
 <Step number={10} title="Tạo Thành phần Chuyển đổi Locale">
 
 Render bộ chuyển đổi dưới dạng **thẻ anchor thực sự** thay vì `<select>`: mỗi ngôn ngữ của trang hiện tại trở thành một liên kết có thể thu thập thông tin và có thể mở trong thẻ mới, điều mà trình điều khiển chỉ bằng JavaScript không thể cung cấp.
@@ -652,7 +634,6 @@ export const LocaleSwitcher: Component = () => {
 > Để tìm hiểu thêm về hook `useLocale`, hãy tham khảo [tài liệu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/solid-intlayer/useLocale.md).
 
 </Step>
-
 <Step number={11} title="Phát ra các liên kết canonical và hreflang" isOptional={true}>
 
 Các chú thích `hreflang` báo cho các công cụ tìm kiếm biết rằng `/about`, `/fr/about` và `/es/about` là cùng một trang ở các ngôn ngữ khác nhau. `getMultilingualUrls` suy ra chúng từ đường dẫn chuẩn (không có locale), tuân theo chế độ định tuyến của bạn, nên không có gì bị hard-code:
@@ -724,7 +705,6 @@ import { AlternateLinks } from "~/components/AlternateLinks";
 > **Lưu ý về `@solidjs/meta`**: tại thời điểm viết bài, `<Title>` và `<Meta>` từ `@solidjs/meta` được áp dụng ở phía client sau khi hydration nhưng **không** được phát vào `<head>` được render trên server trong SolidStart v2. Cho đến khi điều đó được khắc phục ở phía thượng nguồn, hãy render các thẻ mà trình thu thập thông tin phải thấy mà không cần JavaScript — `canonical`, `hreflang`, và nếu cần `title` / `description` — trực tiếp trong `entry-server.tsx`, như hiển thị ở trên.
 
 </Step>
-
 <Step number={12} title="Quản lý trang không tìm thấy (404)" isOptional={true}>
 
 Một splat route ở thư mục gốc của `src/routes` sẽ bắt mọi đường dẫn mà segment locale không khớp — bao gồm các tiền tố locale không hợp lệ bị từ chối bởi `matchFilters`. Vì locale vẫn đến từ URL thông qua root layout, trang 404 sẽ hiển thị bằng ngôn ngữ của người truy cập:
@@ -756,7 +736,6 @@ export default function NotFound() {
 | `/fr/nonexistent` | `404` bằng tiếng Pháp (`Page introuvable`)    |
 
 </Step>
-
 <Step number={13} title="Tạo sitemap đa ngôn ngữ" isOptional={true}>
 
 Trình tạo sitemap của Intlayer mở rộng mỗi đường dẫn thành một mục nhập cho mỗi locale và kết nối các liên kết luân phiên `xhtml:link` giữa chúng, do đó route chỉ cần liệt kê các đường dẫn chuẩn không có locale.
@@ -831,7 +810,6 @@ export const GET = () =>
 ```
 
 </Step>
-
 <Step number={14} title="Lấy locale trong các hàm server của bạn" isOptional={true}>
 
 Bạn có thể muốn truy cập locale hiện tại từ bên trong một hàm server hoặc một API route.
@@ -875,7 +853,6 @@ export default function Page() {
 > Đừng chỉ dựa vào `getLocale` ở đây: cookie locale chỉ được ghi sau khi người truy cập chủ động chuyển đổi ngôn ngữ, vì vậy lần truy cập đầu tiên vào `/fr/...` sẽ giải quyết về locale mặc định.
 
 </Step>
-
 <Step number={15} title="Trích xuất nội dung của các thành phần" isOptional={true}>
 
 Nếu bạn có một codebase hiện có, việc chuyển đổi hàng nghìn tệp có thể tốn thời gian.
@@ -985,7 +962,6 @@ bun run build # Hoặc bun run dev
 </Tabs>
 
 </Step>
-
 <Step number={16} title="Cấu hình TypeScript">
 
 Intlayer sử dụng module augmentation để tận dụng lợi ích của TypeScript và giúp codebase của bạn mạnh mẽ hơn.
@@ -1016,8 +992,6 @@ useIntlayer("hom-page"); // ❌ Argument of type '"hom-page"' is not assignable
 
 </Steps>
 
----
-
 ## Xác minh thiết lập của bạn
 
 Build và khởi chạy server, sau đó kiểm tra xem các yêu cầu này có hoạt động như mong đợi hay không:
@@ -1043,8 +1017,6 @@ Các hàng render một trang hoạt động tương tự dưới `vite dev`. Ba
 
 > Chạy dev server trên Node (`vite dev`) thay vì trên Bun (`bun --bun vite dev`): SSR của SolidStart hiện tại thất bại dưới Bun runtime với `Expected a Response object, but received 'NodeResponse'`. Điều này không liên quan đến Intlayer — nó lặp lại trên template thông thường — và chỉ ảnh hưởng đến dev server, không ảnh hưởng đến `vite build`.
 
----
-
 ## Cấu hình Git
 
 Khuyến nghị bỏ qua các tệp được tạo bởi Intlayer. Điều này cho phép bạn tránh commit chúng vào kho lưu trữ Git của mình.
@@ -1056,8 +1028,6 @@ Khuyến nghị bỏ qua các tệp được tạo bởi Intlayer. Điều này
 .intlayer
 ```
 
----
-
 ## Tiện ích mở rộng VS Code
 
 Để cải thiện trải nghiệm phát triển của bạn với Intlayer, bạn có thể cài đặt **Intlayer VS Code Extension** chính thức.
@@ -1071,14 +1041,10 @@ Tiện ích mở rộng này cung cấp:
 - **Xem trước trực tiếp (inline)** nội dung đã dịch.
 - **Thao tác nhanh** để dễ dàng tạo và cập nhật các bản dịch.
 
----
-
 ## Đi xa hơn
 
 Để đi xa hơn, bạn có thể triển khai [trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) hoặc xuất nội dung của bạn ra bên ngoài bằng cách sử dụng [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
 
----
-
 ## Tài liệu tham khảo
 
 - [Tài liệu Intlayer](https://intlayer.org)
@@ -1100,25 +1066,21 @@ Tiện ích mở rộng này cung cấp:
 Xem [lý do chọn Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/interest_of_intlayer.md).
 
 </Question>
-
 <Question title="i18n làm tăng kích thước bundle Solid Start của tôi bao nhiêu?">
 
 Ít hơn đáng kể so với các giải pháp dựa trên namespace, vì trang không bao giờ tải catalog mà nó không hiển thị. Compiler tại thời điểm build thay thế các lệnh gọi `useIntlayer` bằng chính xác các mục từ điển mà component sử dụng, và [từ điển động](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dynamic_dictionaries/index.md) chia phần còn lại theo từng locale, giảm kích thước bundle tới 50%. Xem [tối ưu hóa bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/bundle_optimization.md) và [benchmark](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/index.md).
 
 </Question>
-
 <Question title="Tôi có thể di chuyển từ @solid-primitives/i18n hoặc i18next mà không cần viết lại component không?">
 
 Phần lớn là có. Làm theo [hướng dẫn di chuyển từ i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/migration_from_i18next_to_intlayer.md).
 
 </Question>
-
 <Question title="Tôi có thể giữ các tệp dịch JSON hiện có của mình không?">
 
 Có. Plugin [sync JSON](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-json.md) giữ cho các tệp `/messages/{locale}/{namespace}.json` của bạn là nguồn sự thật duy nhất và tạo các từ điển Intlayer từ chúng theo cả hai hướng. Plugin [sync PO](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/plugins/sync-po.md) làm điều tương tự cho các catalog gettext, và [các tệp theo locale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/per_locale_file.md) cho phép bạn chia nội dung theo ngôn ngữ thay vì nhóm các locale trong một tệp.
 
 </Question>
-
 <Question title="Tôi có phải di chuyển nội dung từng khóa một không?">
 
 Không. Chạy `npx intlayer extract` và Intlayer sẽ đọc các tệp nguồn của bạn, trích xuất các chuỗi dành cho người dùng và tạo tệp `.content` bên cạnh mỗi tệp, nhờ đó bạn xem lại diff thay vì sao chép chuỗi vào catalog thủ công.
@@ -1128,7 +1090,6 @@ Không. Chạy `npx intlayer extract` và Intlayer sẽ đọc các tệp nguồ
 Hai giới hạn đáng lưu ý trước khi bạn bật compiler. Nó hoạt động bằng phân tích tĩnh, do đó các chuỗi chỉ tồn tại khi runtime, chẳng hạn như mã lỗi API hoặc các trường CMS, nằm ngoài phạm vi tiếp cận. Và nó phải phân biệt văn bản hiển thị cho người dùng với logic ứng dụng như `className="active"` hoặc mã trạng thái, điều này cần một vài chú thích trong một codebase lớn. [Lệnh extract](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/extract.md) tránh cả hai điều này bằng cách giữ bạn luôn kiểm soát.
 
 </Question>
-
 <Question title="Có những công cụ editor và AI agent nào có sẵn?">
 
 Năm công cụ, tất cả đều là tùy chọn:
@@ -1140,61 +1101,51 @@ Năm công cụ, tất cả đều là tùy chọn:
 - **[ESLint plugin](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/eslint.md)**: quy tắc `no-raw-text` phát hiện các chuỗi chưa được bản địa hóa.
 
 </Question>
-
 <Question title="Intlayer có hoạt động với server side rendering (SSR) trong Solid Start không?">
 
 Có. Nội dung được phân giải trong quá trình SSR, và bước 16 bao gồm cấu hình prerender để tạo HTML tĩnh cho từng locale.
 
 </Question>
-
 <Question title="Việc chuyển đổi ngôn ngữ có làm re-render toàn bộ ứng dụng không?">
 
 Không. Nội dung được hỗ trợ bởi các signal của Solid, do đó việc thay đổi ngôn ngữ chỉ cập nhật các DOM node văn bản thay đổi mà không cần dựng lại cây component.
 
 </Question>
-
 <Question title="Làm cách nào để thêm liên kết canonical và thẻ hreflang?">
 
 Trong sitemap sử dụng `generateSitemap` hoặc `getMultilingualUrls`, tạo các liên kết thay thế `xhtml:link` cho các công cụ tìm kiếm.
 
 </Question>
-
 <Question title="Làm cách nào để xử lý các trang 404 trên các tuyến đường được bản địa hóa?">
 
 Bước 14 giải thích điều này. `validatePrefix` kiểm tra xem phân đoạn ngôn ngữ trong URL có hợp lệ hay không, trả về trạng thái 404 cho các tuyến không xác định.
 
 </Question>
-
 <Question title="Tôi có bắt buộc phải đưa locale vào URL không?">
 
 Không. Cài đặt `routing.mode` chấp nhận `"prefix-no-default"` (mặc định), `"prefix-all"`, `"no-prefix"`, và `"search-params"`.
 
 </Question>
-
 <Question title="Làm cách nào để lấy locale trong hàm server?">
 
 Trong các hàm server của Solid Start, hàm `getIntlayer` tự động phân giải locale từ request context.
 
 </Question>
-
 <Question title="Làm cách nào tôi có thể dịch ứng dụng tự động bằng AI?">
 
 Chạy `npx intlayer fill`. Lệnh này điền các bản dịch còn thiếu bằng LLM bạn chọn sử dụng provider và API key của riêng bạn, và `--git-diff` giới hạn thao tác ở các tệp đã thay đổi. Xem [lệnh fill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/cli/fill.md) và [tích hợp CI/CD](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/CI_CD.md).
 
 </Question>
-
 <Question title="Intlayer có hỗ trợ dạng số nhiều, giới tính và rich text không?">
 
 Có: [dạng số nhiều (plurals)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/plurial.md), [nội dung dựa trên giới tính](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/gender.md), điều kiện, [chèn (insertions)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/insertion.md), [Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/markdown.md), và [định dạng](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/formatters.md) cho số, ngày tháng và tiền tệ.
 
 </Question>
-
 <Question title="Làm thế nào người dịch có thể chỉnh sửa nội dung mà không cần chạm vào mã nguồn?">
 
 Thông qua [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_visual_editor.md), cho phép bất kỳ ai chỉnh sửa văn bản trực tiếp trên ứng dụng đang chạy, hoặc qua [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_CMS.md), giúp tách biệt nội dung để cập nhật mà không cần triển khai lại mã nguồn.
 
 </Question>
-
 <Question title="Intlayer có phải là mã nguồn mở và miễn phí không?">
 
 Có, theo giấy phép Apache 2.0, bao gồm cả mục đích thương mại. CMS lưu trữ trên đám mây là một dịch vụ trả phí tùy chọn và cũng có thể [tự lưu trữ (self-host)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/self_hosting.md).

package/docs/vi/intlayer_with_storybook.md

@@ -42,37 +42,31 @@ So với các giải pháp chính như `storybook-react-i18next` hay `i18next`,
 Intlayer được tối ưu hóa để hoạt động hoàn hảo với Storybook bằng cách cung cấp **trình trang trí câu chuyện đa ngôn ngữ**, **chuyển đổi ngôn ngữ** và tất cả các tính năng cần thiết để mở rộng quy mô quốc tế hóa (i18n) trên hệ thống thiết kế của bạn.
 
 </Accordion>
-
 <Accordion header="Kích thước bundle">
 
 Thay vì tải các tệp JSON lớn vào trang của bạn, hãy chỉ tải nội dung cần thiết. Intlayer giúp **giảm tới 50% kích thước bundle và kích thước trang**.
 
 </Accordion>
-
 <Accordion header="Khả năng bảo trì">
 
 Xác định phạm vi nội dung ứng dụng của bạn **tạo điều kiện bảo trì** cho các ứng dụng quy mô lớn. Bạn có thể sao chép hoặc xóa một thư mục tính năng mà không phải lo lắng về việc xem lại toàn bộ cơ sở mã nội dung của mình. Ngoài ra, Intlayer **được nhập đầy đủ** để đảm bảo tính chính xác cho nội dung của bạn.
 
 </Accordion>
-
 <Accordion header="Đại lý AI">
 
 Nội dung cùng định vị **giảm ngữ cảnh cần thiết** của Mô hình ngôn ngữ lớn (LLM). Intlayer cũng đi kèm một bộ công cụ, chẳng hạn như **CLI** để kiểm tra các bản dịch bị thiếu,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** và **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/agent_skills.md)**, để giúp trải nghiệm của nhà phát triển (DX) trở nên mượt mà hơn nữa đối với các tác nhân AI.
 
 </Accordion>
-
 <Accordion header="Tự động hóa">
 
 Sử dụng tính năng tự động hóa để dịch trong quy trình CI/CD của bạn bằng cách sử dụng LLM mà bạn chọn với chi phí do nhà cung cấp AI của bạn chi trả. Intlayer cũng cung cấp **trình biên dịch** để tự động trích xuất nội dung cũng như [nền tảng web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) để giúp **dịch ở chế độ nền**.
 
 </Accordion>
-
 <Accordion header="Hiệu suất">
 
 Việc kết nối các tệp JSON lớn với các thành phần có thể dẫn đến các vấn đề về hiệu suất và khả năng phản hồi. Intlayer tối ưu hóa việc tải nội dung của bạn tại thời điểm build.
 
 </Accordion>
-
 <Accordion header="Mở rộng quy mô không có nhà phát triển">
 
 Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh sửa trực quan](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** và **[CMS đầy đủ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** để giúp bạn quản lý nội dung đa ngôn ngữ của mình trong **thời gian thực**, giúp việc cộng tác với người dịch, người viết quảng cáo và các thành viên khác trong nhóm trở nên liền mạch. Nội dung có thể được lưu trữ cục bộ và/hoặc từ xa.
@@ -80,8 +74,6 @@ Không chỉ là giải pháp i18n, Intlayer còn cung cấp **[trình chỉnh s
 </Accordion>
 </AccordionGroup>
 
----
-
 ## Tại sao nên sử dụng Intlayer với Storybook?
 
 Storybook là công cụ tiêu chuẩn trong ngành để phát triển và lập tài liệu cho các thành phần UI một cách độc lập. Việc kết hợp nó với Intlayer cho phép bạn:
@@ -90,15 +82,12 @@ Storybook là công cụ tiêu chuẩn trong ngành để phát triển và lậ
 - **Phát hiện các bản dịch còn thiếu** trước khi chúng được đưa vào sản xuất.
 - **Lập tài liệu cho các thành phần đa ngôn ngữ** với nội dung thực tế, an toàn về kiểu dữ liệu thay vì các chuỗi được mã hóa cứng.
 
----
-
 ## Thiết lập từng bước
 
 <Tabs>
 <Tab value="Vite Setup">
 
 <Steps>
-
 <Step number={1} title="Cài đặt các phụ thuộc">
 
 ```bash packageManager="npm"
@@ -128,7 +117,6 @@ bun add vite-intlayer --dev
 | `vite-intlayer`  | Plugin Vite - theo dõi và biên dịch các tệp khai báo nội dung |
 
 </Step>
-
 <Step number={2} title="Tạo cấu hình Intlayer">
 
 Tạo `intlayer.config.ts` tại thư mục gốc của dự án (hoặc bên trong gói hệ thống thiết kế của bạn):
@@ -157,7 +145,6 @@ export default config;
 > Để xem danh sách đầy đủ các tùy chọn, hãy tham khảo [tài liệu cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md).
 
 </Step>
-
 <Step number={3} title="Thêm Plugin Vite vào Storybook">
 
 Hook `viteFinal` của Storybook cho phép bạn mở rộng cấu hình Vite nội bộ. Nhập và thêm plugin `intlayer()` tại đó:
@@ -204,7 +191,6 @@ export default config;
 Plugin `intlayer()` theo dõi các tệp `*.content.ts` của bạn và tự động xây dựng lại các từ điển bất cứ khi nào chúng thay đổi trong quá trình phát triển trên Storybook.
 
 </Step>
-
 <Step number={4} title="Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ">
 
 Tệp `preview` của Storybook là nơi thích hợp để bao bọc mọi câu chuyện với `IntlayerProvider` và hiển thị trình chuyển đổi ngôn ngữ trên thanh công cụ:
@@ -264,7 +250,6 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 <Steps>
-
 <Step number={1} title="Cài đặt các phụ thuộc">
 
 ```bash packageManager="npm"
@@ -288,7 +273,6 @@ bun add @intlayer/webpack --dev
 ```
 
 </Step>
-
 <Step number={2} title="Tạo cấu hình Intlayer">
 
 Tạo `intlayer.config.ts` tại thư mục gốc của dự án:
@@ -310,7 +294,6 @@ export default config;
 ```
 
 </Step>
-
 <Step number={3} title="Cấu hình Webpack của Storybook">
 
 Đối với các thiết lập Storybook dựa trên Webpack (ví dụ: `@storybook/react-webpack5`), hãy mở rộng cấu hình webpack thông qua `webpackFinal` để thêm các alias và loader của Intlayer:
@@ -337,7 +320,6 @@ export default config;
 ```
 
 </Step>
-
 <Step number={4} title="Thêm Decorator `IntlayerProvider` và Thanh công cụ Ngôn ngữ">
 
 Tương tự như thiết lập Vite - thêm decorator và kiểu ngôn ngữ toàn cục trong tệp `.storybook/preview.tsx`:
@@ -407,8 +389,6 @@ export default copyButtonContent;
 
 > Để biết thêm các định dạng khai báo nội dung và tính năng khác, hãy xem [tài liệu khai báo nội dung](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/dictionary/content_file.md).
 
----
-
 ## Sử dụng `useIntlayer` trong một thành phần
 
 ```tsx fileName="src/components/CopyButton/index.tsx" codeFormat="typescript"
@@ -438,8 +418,6 @@ export const CopyButton: FC<CopyButtonProps> = ({ content }) => {
 
 `useIntlayer` trả về từ điển đã biên dịch cho ngôn ngữ hiện tại được cung cấp bởi `IntlayerProvider` gần nhất. Việc chuyển đổi ngôn ngữ trên thanh công cụ Storybook sẽ tự động hiển thị lại câu chuyện với các bản dịch đã cập nhật.
 
----
-
 ## Viết các câu chuyện (Story) cho các thành phần đa ngôn ngữ
 
 Với decorator `IntlayerProvider` đã được thiết lập, các câu chuyện của bạn sẽ hoạt động chính xác như trước đây. Thanh công cụ ngôn ngữ kiểm soát ngôn ngữ đang hoạt động cho toàn bộ canvas:
@@ -488,8 +466,6 @@ export const InsideCodeBlock: Story = {
 
 > Mỗi câu chuyện kế thừa biến toàn cục `locale` từ thanh công cụ, vì vậy bạn có thể xác minh mọi ngôn ngữ mà không cần thay đổi bất kỳ mã nguồn câu chuyện nào.
 
----
-
 ## Kiểm thử các bản dịch trong các câu chuyện
 
 Sử dụng các hàm `play` của Storybook để khẳng định rằng văn bản được dịch chính xác được hiển thị cho một ngôn ngữ nhất định:
@@ -524,8 +500,6 @@ export const AccessibleLabel: Story = {
 };
 ```
 
----
-
 ## Tài nguyên bổ sung
 
 - [Tài liệu cấu hình Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)