# FAQ

<details>

<summary>1, Tôi nên chọn mẫu nào trong kho mẫu khổng lồ này?</summary>

**Ví dụ:** Bạn thấy mẫu nào cũng đẹp, từ mẫu bán mỹ phẩm đến mẫu tuyển dụng kỹ sư, và không biết cái nào sẽ hiệu quả cho mình.

**Giải pháp:**

1. Chọn theo cấu trúc, không chọn theo màu sắc: Đừng quá bận tâm nếu mẫu có màu hồng mà bạn cần màu xanh. Hãy xem các khối (Container) được sắp xếp có khớp với nội dung bạn định viết không (ví dụ: có đủ chỗ cho 5 bước quy trình tuyển dụng không?).

<figure><img src="/files/QS8wHcXptMWXEmHSkwTR" alt=""><figcaption></figcaption></figure>

2. Xem trước trên Mobile: Nhấn vào nút "Xem thử" (Preview) và chuyển sang chế độ điện thoại. Nếu mẫu đó hiển thị gọn gàng trên mobile, đó là lựa chọn an toàn.

Mẹo: Ưu tiên chọn các mẫu có ít hiệu ứng rườm rà nếu bạn là người mới, vì bạn sẽ dễ dàng kiểm soát nội dung hơn.

</details>

<details>

<summary>2, Làm sao để thay ảnh mẫu bằng ảnh của tôi mà không bị "lệch tông"?</summary>

**Ví dụ:** Ảnh mẫu là ảnh chụp chuyên nghiệp, ảnh của bạn là ảnh chụp bằng điện thoại tại văn phòng, khi đưa vào nhìn trang web bị "giảm giá trị" hẳn.

**Giải pháp:**

1. Sử dụng bộ lọc (Overlay): Nếu ảnh của bạn hơi tối hoặc màu sắc không tươi, hãy tạo một lớp phủ màu nhẹ (ví dụ màu đen mờ hoặc xanh mờ) đè lên ảnh trong phần cài đặt Container. Việc này giúp chữ hiện lên rõ hơn và che đi các khuyết điểm của ảnh.

<figure><img src="/files/vO09L8uMn0CJSljJ9FtR" alt=""><figcaption></figcaption></figure>

2. Đồng bộ kích thước: Nhìn xem ảnh mẫu là hình vuông hay hình chữ nhật, hãy cắt (Crop) ảnh của bạn theo đúng tỉ lệ đó trước khi tải lên.

Mẹo: Nếu không có ảnh thật đẹp, hãy dùng các kho ảnh miễn phí chất lượng cao tích hợp sẵn trong bộ công cụ thay vì lấy ảnh mờ trên mạng.

</details>

<details>

<summary>3, Phải làm gì nếu mẫu có 5 khối nội dung nhưng tôi chỉ có 3 ý?</summary>

**Ví dụ:** Mẫu có phần "Cảm nhận khách hàng" gồm 6 người, nhưng công ty bạn mới chỉ có 2 nhân viên chia sẻ cảm nghĩ.

**Giải pháp:**

1. Xóa dứt khoát: Đừng cố để lại các khối trống hoặc chữ giả (Lorem Ipsum). Hãy chọn các khối thừa và xóa đi.

<figure><img src="/files/Vtmrx33yMkMNptNoH1Wn" alt=""><figcaption></figcaption></figure>

2. Căn chỉnh lại: Sau khi xóa, hãy chỉnh chiều rộng của 2 khối còn lại to ra hoặc căn giữa chúng để trang web không bị trống trải một bên.

Mẹo: Trong thiết kế, "ít nhưng chất" luôn tốt hơn "nhiều nhưng loãng".

</details>

<details>

<summary>4, Thay đổi nội dung chữ (Text) như thế nào để giữ được "vibe" của mẫu?</summary>

**Ví dụ:** Chữ trong mẫu rất ngắn gọn và súc tích, nhưng mô tả công việc của bạn lại quá dài, khiến bố cục bị vỡ.

**Giải pháp:**

1. Giữ nguyên độ dài tương đương: Cố gắng viết nội dung mới có độ dài (số dòng) tương tự như bản mẫu để giữ nguyên sự cân đối.
2. Sử dụng Bullet points: Nếu thông tin quá dài, hãy biến chúng thành các dấu gạch đầu dòng thay vì một đoạn văn dài dằng dặc.

Mẹo: Luôn giữ lại kích thước và kiểu chữ (Font-style) của mẫu ban đầu, vì chúng đã được các chuyên gia tính toán để trông hài hòa nhất.

</details>

<details>

<summary>5, Làm sao để biết mình đã thay đổi thông tin "đủ" và "đúng"?</summary>

**Ví dụ:** Bạn sợ mình quên chưa thay số điện thoại cũ của mẫu hoặc quên đổi link của nút bấm.

**Giải pháp:**

1. Kiểm tra check-list: Đi từ đầu trang xuống cuối trang, nhấp vào từng nút bấm, từng ô Form và từng dòng địa chỉ để đảm bảo không còn chữ tiếng Anh hoặc thông tin lạ.
2. Gửi cho đồng nghiệp xem thử: Đôi khi "người ngoài cuộc" sẽ phát hiện ra những lỗi hiển thị hoặc lỗi chính tả mà bạn bỏ sót.

Mẹo: Hãy thử tự điền vào Form đăng ký của chính mình để xem dữ liệu có đổ về đúng kho ứng viên hay không trước khi chính thức công khai trang web.

</details>

<details>

<summary>6, Làm thế nào để tận dụng các "Khối mẫu" (Section) có sẵn vào trang đang làm?</summary>

**Ví dụ:** Bạn đang dùng mẫu A nhưng lại rất thích phần "Quy trình tuyển dụng" của mẫu B.

**Giải pháp:**

1. Lưu khối mẫu: Trong một số công cụ, bạn có thể chọn một Section và "Lưu vào thư viện cá nhân".
2. Chèn khối: Ở trang bạn đang thiết kế, hãy chọn "Thêm Section" và tìm đến khối đã lưu hoặc khối mẫu có sẵn trong kho để chèn vào giữa trang.

Mẹo: Khi chèn thêm khối mới, hãy nhớ chỉnh lại Font chữ và Màu sắc của khối đó cho khớp với phần còn lại của trang.

</details>

<details>

<summary>7, Tôi nên làm gì để các nút bấm (CTA) trở nên nổi bật hơn?</summary>

**Ví dụ:** Nút "Ứng tuyển" trong mẫu trông hơi chìm, bạn muốn ứng viên chú ý vào đó ngay lập tức.

**Giải pháp:**

<figure><img src="/files/EVMh9yZAQ0sG4rqAEiVh" alt=""><figcaption></figcaption></figure>

1. Độ tương phản: Sử dụng màu sắc nổi bật nhất (ví dụ: Cam hoặc Đỏ) trên nền trang màu trung tính.
2. Hiệu ứng Hover: Cài đặt để nút đổi màu nhẹ hoặc phóng to một chút khi người dùng di chuột vào.
3. Khoảng trống: Đặt nút bấm ở một khu vực thoáng đãng, không bị vây quanh bởi quá nhiều chữ.

Mẹo: Mỗi trang Landing Page chỉ nên có một mục tiêu chính, vì vậy hãy làm cho nút quan trọng nhất trở nên khác biệt so với các nút phụ.

</details>

<details>

<summary>8, Tôi có nên thay đổi font chữ của mẫu không?</summary>

**Ví dụ:** Bạn thấy font chữ của mẫu hơi mảnh và muốn đổi sang font khác dày dặn hơn.

**Giải pháp:**

1. Thay đổi toàn cục: Vào phần cài đặt Font hệ thống (Global Styles) để đổi một lần cho toàn trang thay vì sửa từng ô.

<figure><img src="/files/A5z2HZSSCCMYk9K7Wyk9" alt=""><figcaption></figcaption></figure>

2. Ưu tiên dễ đọc: Chọn các font phổ biến như Roboto, Arial, hoặc Montserrat để tránh lỗi hiển thị tiếng Việt (bị lỗi dấu).

Mẹo: Chỉ nên dùng tối đa 2 loại font trên một trang: một cho Tiêu đề và một cho Nội dung.

</details>

<details>

<summary>9, Cách tối ưu hóa Video khi đưa vào Landing Page từ kho mẫu?</summary>

**Ví dụ:** Bạn muốn thay đoạn video giới thiệu công ty vào vị trí video mẫu có sẵn.

**Giải pháp:**

1. Sử dụng Link Youtube/Vimeo: Thay vì tải trực tiếp file video nặng lên trang, hãy đăng lên Youtube rồi dán đường dẫn vào khối Video của mẫu.

<figure><img src="/files/OA0QEIKY1uhV4AZmKAmr" alt=""><figcaption></figcaption></figure>

2. Cài đặt Tự động chạy (Autoplay): Nếu là video nền, hãy bật Autoplay và tắt tiếng (Mute) để không làm phiền người dùng.

Mẹo: Luôn chọn một tấm ảnh đại diện (Thumbnail) đẹp cho video để trang web trông chuyên nghiệp ngay cả khi video chưa kịp tải xong.

</details>

<details>

<summary>10, Tôi muốn tạo nhanh một trang tin tuyển dụng thì nên bắt đầu từ đâu?</summary>

**Ví dụ:** Công ty đang cần tuyển gấp một vị trí và bạn muốn có ngay một trang giới thiệu công việc (Job Description) thật thu hút.

**Giải pháp:**

1. Sử dụng Section mẫu: Thay vì tự vẽ từng ô, hãy chọn các Section (Khối) có sẵn trong thư viện của bộ công cụ, như khối "Hero" (đầu trang) và khối "Feature" (mô tả quyền lợi).
2. \+ Cấu trúc chuẩn: Chia trang làm 3 phần rõ rệt:

   \+ Đầu trang: Tên vị trí, địa điểm làm việc và nút "Ứng tuyển ngay".

   \+ Thân trang: Mô tả công việc và yêu cầu (dùng danh sách gạch đầu dòng).

   \+ Cuối trang: Giới thiệu ngắn về công ty và Form để ứng viên để lại thông tin.

Mẹo: Đừng cố làm quá cầu kỳ. Một trang tuyển dụng sạch sẽ, dễ đọc luôn hiệu quả hơn một trang quá nhiều hiệu ứng.

</details>

<details>

<summary>11, Làm sao để chia trang thành 2 hoặc 3 cột bằng Container?</summary>

**Ví dụ:** Bạn muốn bên trái là nội dung mô tả công việc, bên phải là ảnh văn phòng công ty.

**Giải pháp:**

1. Container cha: Tạo một Container lớn bao quanh toàn bộ khu vực đó.

<figure><img src="/files/YS68uVLqOOIRy9cAhrVN" alt=""><figcaption></figcaption></figure>

2. Container con: Vẽ 2 Container nhỏ nằm bên trong Container cha.
3. Thiết lập chiều rộng: Chọn độ rộng cho mỗi Container con là 50% (cho 2 cột) hoặc 33.3% (cho 3 cột).

Mẹo:&#x20;

</details>

<details>

<summary>12, "Padding" và "Margin" trong Container khác nhau như thế nào?</summary>

**Ví dụ:** Bạn thấy chữ bị dính sát vào viền của khối màu nền, trông rất khó đọc.

**Giải pháp:**

1. Padding (Khoảng đệm): Là khoảng cách từ nội dung (chữ/ảnh) đến viền của Container đó. Hãy tăng Padding để chữ "dễ thở" hơn
2. Margin (Khoảng cách lề): Là khoảng cách giữa Container này với các Container khác xung quanh.

Mẹo: Để các phần của trang web trông tách biệt và chuyên nghiệp, hãy đặt Padding tối thiểu là 20px cho các khối nội dung.

</details>

<details>

<summary>13, Làm thế nào để nội dung luôn nằm giữa màn hình (Container Center)?</summary>

**Ví dụ:** Trên màn hình máy tính lớn, nội dung của bạn bị dạt hết sang bên trái, để lại một khoảng trống khổng lồ bên phải.

**Giải pháp:**

1. Giới hạn độ rộng: Đặt Max-width cho Container chính (ví dụ: 1200px)
2. Căn giữa lề: Thiết lập Margin trái và Margin phải ở chế độ Auto

Mẹo: Việc căn giữa giúp mắt người đọc tập trung vào nội dung quan trọng nhất mà không phải liếc quá rộng.

</details>

<details>

<summary>14, Tại sao Container của tôi bị tràn ra ngoài màn hình điện thoại?</summary>

**Ví dụ:** Bạn thiết lập một Container cố định là 1000px, khi xem trên điện thoại (chỉ rộng khoảng 375px), người dùng phải kéo ngang mới thấy hết nội dung.

**Giải pháp:**

1. Sử dụng đơn vị %: Thay vì đặt con số cố định (px), hãy chọn chiều rộng là 100% hoặc Auto.
2. Chế độ Responsive: Chuyển sang giao diện Mobile và điều chỉnh lại chiều rộng của các Container con về 100% để chúng xếp chồng lên nhau thay vì nằm ngang.

Mẹo: "Ưu tiên di động" là quy tắc vàng. Nếu nó đẹp trên điện thoại, nó thường sẽ ổn trên máy tính

</details>

<details>

<summary>15, Tôi có thể lồng bao nhiêu lớp Container vào nhau?</summary>

**Ví dụ:** Bạn tạo Container trong Container, rồi lại lồng thêm một lớp nữa khiến việc chỉnh sửa trở nên cực kỳ rắc rối.

**Giải pháp:**

1. Tối giản: Chỉ nên lồng tối đa 3 cấp (Section -> Container chính -> Cột nội dung)

<figure><img src="/files/xrhw89KsBNoBHXpfkMRN" alt=""><figcaption></figcaption></figure>

2. Kiểm tra lớp: Sử dụng bảng quản lý lớp (Layers/Navigator) để biết mình đang chọn đúng Container nào

Mẹo: Đặt tên cho các Container (ví dụ: "Khối\_Lợi\_Ích", "Khối\_Liên\_Hệ") để không bị lẫn lộn khi trang web trở nên dài hơn.

</details>

<details>

<summary>16, Làm sao để phân biệt giữa Tiêu đề và Nội dung bằng kích thước?</summary>

**Ví dụ:** Bạn để tiêu đề và nội dung gần bằng nhau, khiến người xem không biết đâu là mục lớn, đâu là ý nhỏ

**Giải pháp:**

1. Sử dụng hệ thống phân cấp (Typography Hierarchy)

<figure><img src="/files/3jnlfY1rgOj9viqjFe5Q" alt=""><figcaption></figcaption></figure>

* Tiêu đề chính (H1): 32px - 48px (Dùng cho tên vị trí tuyển dụng ở đầu trang).
* Tiêu đề phụ (H2): 24px - 30px (Dùng cho các mục như "Yêu cầu", "Quyền lợi").
* Nội dung (Body): 16px - 18px.

Mẹo: Tiêu đề nên được in đậm (Bold) để tạo độ tương phản rõ rệt với phần nội dung thông thường.

</details>

<details>

<summary>17, Tại sao tôi đã tăng cỡ chữ rất to nhưng trông vẫn không nổi bật?</summary>

**Ví dụ:** Bạn để tiêu đề 40px nhưng dùng màu xám nhạt trên nền trắng, kết quả là nó vẫn bị chìm nghỉm.

**Giải pháp:**

1. Kích thước phải đi đôi với Trọng lượng (Weight) và Màu sắc

<figure><img src="/files/mQ4GZwzrgnQDSjf9M1x3" alt=""><figcaption></figcaption></figure>

2. Độ đậm: Thử chuyển từ "Regular" sang "Bold" hoặc "Black".
3. Màu sắc: Sử dụng màu đậm nhất hoặc màu thương hiệu cho tiêu đề để tạo điểm nhấn.

Mẹo: Một tiêu đề nhỏ hơn một chút nhưng đậm và có màu sắc tương phản tốt thường nổi bật hơn một tiêu đề cực to nhưng mảnh và mờ.

</details>

<details>

<summary>18, Làm sao để thay đổi Tiêu đề chính (Headline) mà không làm hỏng thiết kế?</summary>

**Ví dụ:** Bản mẫu có tiêu đề rất ngắn, nhưng tên vị trí tuyển dụng của bạn lại rất dài khiến chữ bị nhảy xuống dòng và đè lên ảnh.

**Giải pháp:**

1. Thay đổi nội dung: Nhấp đúp vào khối chữ và nhập tiêu đề của bạn
2. Điều chỉnh kích thước (Font-size): Nếu chữ bị tràn, hãy giảm nhẹ kích thước chữ trong bảng thuộc tính bên phải

Mẹo: Tiêu đề nên tập trung vào lợi ích lớn nhất (Ví dụ: "Thu nhập lên đến 20 triệu" thay vì chỉ ghi "Tuyển nhân viên")

</details>

<details>

<summary>19, Tôi nên thay hình ảnh có sẵn bằng hình ảnh của mình như thế nào cho đẹp?</summary>

**Ví dụ:** Ảnh mẫu là ảnh ngang (Landscape) nhưng ảnh văn phòng bạn chụp lại là ảnh đứng (Portrait), khi thay vào trông rất méo mó.

**Giải pháp:**

1. Thay thế ảnh: Chọn khối ảnh -> Nhấp vào nút "Thay đổi ảnh" (Change Image) và tải ảnh của bạn lên
2. Chỉnh tỷ lệ (Crop): Sử dụng công cụ cắt ảnh ngay trong trình chỉnh sửa để chọn lấy phần đẹp nhất của tấm ảnh sao cho khớp với khung hình của mẫu.

Mẹo: Hãy chọn những tấm ảnh có tông màu tương đồng với màu chủ đạo của trang web để tạo sự đồng nhất

</details>

<details>

<summary>20, Chỉnh sửa nội dung văn bản</summary>

**Ví dụ:** Tôi muốn thay đổi tiêu đề và mô tả trên Landing Page để phù hợp với chiến dịch tuyển dụng mới nhưng vẫn muốn giữ nguyên vẻ cân đối của thiết kế.&#x20;

**Giải pháp:**

* Bước 1: Chọn đoạn văn bản cần thay đổi nội dung.
* Bước 2: Nhập nội dung mới vào ô chỉnh sửa hoặc trực tiếp trên vùng thiết kế.

<figure><img src="/files/VZgWod6gM1ENGlxy8JnT" alt=""><figcaption></figcaption></figure>

* Bước 3: Kiểm tra độ dài của đoạn văn mới so với mẫu cũ. Đảm bảo số lượng chữ hoặc số dòng tương đương để không làm lệch các khối (Container) xung quanh.

Mẹo: Nên sử dụng các câu ngắn gọn, súc tích. Nếu nội dung mới quá dài, hãy cân nhắc giảm cỡ chữ (Font Size) trong phần Typography hoặc kiểm tra hiển thị trên giao diện Mobile để tránh tràn khung.

</details>

<details>

<summary>21, Thay thế và tối ưu hình ảnh</summary>

**Ví dụ:** Tôi muốn thay ảnh minh họa cho chiến dịch mới nhưng lo ngại ảnh mới sẽ làm xô lệch các thành phần khác trong khung (Container).&#x20;

**Giải pháp:**

* Bước 1: Chọn vào hình ảnh hiện có trên vùng thiết kế
* Bước 2: Sử dụng tính năng tải ảnh lên và ưu tiên các ảnh có tỷ lệ khung hình (ngang/dọc) tương đồng với ảnh gốc.

<figure><img src="/files/rZthYgwJKhOq7N1CNcLO" alt=""><figcaption></figcaption></figure>

* Bước 3: Kiểm tra phần cài đặt hiển thị (Fill/Cover/Contain) để ảnh tự động lấp đầy khung mà không bị méo hoặc kéo giãn

Mẹo: Để trang tải nhanh hơn, hệ thống sẽ tự động chuyển đổi ảnh sang định dạng WebP. Bạn nên sử dụng ảnh có độ phân giải vừa đủ (72dpi đến 96dpi) để tối ưu hiệu suất trên thiết bị di động

</details>

<details>

<summary>22, Sắp xếp bố cục hình ảnh với Stack &#x26; Grid</summary>

**Ví dụ:** Tôi muốn trình bày một danh sách các biểu tượng (Icons) hoặc hình ảnh đối tác sao cho chúng luôn thẳng hàng và đẹp mắt

**Giải pháp:**

* Bước 1: Sử dụng thành phần Stack để nhóm các hình ảnh lại với nhau theo hàng ngang hoặc hàng dọc
* Bước 2:Thiết lập khoảng cách giữa các ảnh (Gap) đồng nhất để tạo sự thông thoáng

<figure><img src="/files/2e258DuOHQfbrdfG6Sqa" alt=""><figcaption></figcaption></figure>

* Bước 3: Kích hoạt tính năng Wrap (Tự động xuống dòng) để khi xem trên Mobile, các hình ảnh sẽ tự xếp chồng lên nhau thay vì bị thu nhỏ quá mức.

Mẹo: Đối với các biểu tượng chuyên nghiệp, bạn nên chọn các tệp có nền trong suốt (PNG/SVG) và sử dụng màu sắc đồng bộ (monochrome) để tạo cảm giác tinh tế, hiện đại.

</details>

<details>

<summary>23, Thiết lập cấu trúc đầu trang</summary>

**Ví dụ:** Tôi muốn tạo một ấn tượng mạnh đầu tiên cho ứng viên khi họ vừa truy cập vào trang tuyển dụng.

**Giải pháp:**

* Bước 1: Vào mục Structure, chọn Hero Sections
* Bước 2:Kéo thả một mẫu có sẵn vào vùng thiết kế

<figure><img src="/files/14iRJzO2BmiWWPaZnM05" alt=""><figcaption></figcaption></figure>

* Bước 3: Nhấp vào phần chữ để thay đổi tiêu đề (Headline) và chọn Image để thay ảnh nền phù hợp

Mẹo: Nên sử dụng ảnh chất lượng cao và có độ tương phản tốt để làm nổi bật nội dung chữ phía trên.

</details>

<details>

<summary>24, Sắp xếp danh sách phúc lợi (Quick Grid)</summary>

**Ví dụ:** Tôi cần trình bày 6 chế độ đãi ngộ của công ty sao cho chúng thẳng hàng và đẹp mắt trên cả máy tính lẫn điện thoại.

**Giải pháp:**

* Bước 1: Trong thanh công cụ, chọn Quick Layouts và kéo Quick Grid vào trang

<figure><img src="/files/T778dbrJb8KIdV6l7jdw" alt=""><figcaption></figcaption></figure>

* Bước 2:Điều chỉnh số cột là 3 cho bản Desktop
* Bước 3: Chèn biểu tượng (Icon) và nội dung văn bản vào từng ô trong lưới.

Mẹo: Sử dụng tính năng Gap trong bảng điều khiển để tạo khoảng trắng giữa các ô, giúp trang trông thoáng đãng hơn

</details>

<details>

<summary>25, Nhúng video giới thiệu doanh nghiệp</summary>

**Ví dụ:** Tôi có một đoạn clip giới thiệu môi trường làm việc trên YouTube và muốn nó phát ngay trên Landing Page

**Giải pháp:**

* Bước 1: Tìm thành phần Video trong nhóm công cụ cơ bản
* Bước 2:Dán đường dẫn (URL) video từ YouTube hoặc Vimeo vào ô thiết lập
* Bước 3: Tùy chỉnh kích thước khung hình trong phần Layout để cân đối với trang

Mẹo: Bạn có thể bật chế độ Autoplay (Tự động phát) nhưng hãy tắt tiếng để không gây phiền hà cho người dùng

</details>

<details>

<summary>26, Tối ưu Grid Layout và hiệu ứng nhấn (On Active) cho danh sách sản phẩm</summary>

**Ví dụ:** Tôi có một lưới danh sách các khóa học (Grid). Tôi muốn khi khách hàng thực hiện thao tác nhấn giữ (click) vào một ô khóa học, ô đó sẽ hơi thu nhỏ lại và đổi màu viền để họ biết là hệ thống đã ghi nhận cú click.

**Giải pháp:**

* Bước 1: Thiết lập Grid Type: Fixed với 3 cột cho các ô khóa học, chỉnh Gap là 20px để các ô không dính sát nhau
* Bước 2: Chọn Container của ô khóa học, tìm đến mục Border Color trong bảng Style, chọn trạng thái On Active và thiết lập màu viền đậm hơn
* Bước 3: Sử dụng Shrink: Yes kết hợp với mã hiệu ứng nhỏ để ô co lại một chút khi ở trạng thái Active

Mẹo: Trạng thái On Active cực kỳ quan trọng trên di động, giúp người dùng cảm thấy giao diện đang tương tác mượt mà với ngón tay của họ

</details>

<details>

<summary>27, Quản lý trạng thái On Focus cho Biểu mẫu (Form) dài</summary>

**Ví dụ:** Tôi có một Form đăng ký tuyển dụng khá nhiều ô nhập liệu. Tôi muốn khi ứng viên đang gõ vào ô nào, ô đó sẽ sáng bừng lên (đổi màu nền) để họ không bị nhầm lẫn giữa các dòng.

**Giải pháp:**

* Bước 1: Đặt các ô nhập liệu vào một Stack theo hướng dọc
* Bước 2: Chọn thành phần ô nhập liệu (Input), tại bảng Style, tìm mục BG Color (Màu nền).
* Bước 3: Nhấn chọn trạng thái On Focus và thay đổi màu nền sang tông vàng nhạt hoặc xanh nhạt

Mẹo: Trạng thái On Focus giúp tăng trải nghiệm người dùng (UX) rõ rệt, đặc biệt hữu ích cho những người dùng thường xuyên sử dụng phím Tab để di chuyển giữa các ô trong Form.

</details>

<details>

<summary>28, Chuyển đổi từ Grid sang Stack để ưu tiên nội dung</summary>

**Ví dụ:** Trên máy tính, tôi trình bày 3 bài viết mới nhất theo dạng hàng ngang (Grid 3 cột). Tuy nhiên, trên điện thoại, tôi muốn bài viết đầu tiên phải to gấp đôi và các bài sau nằm dọc bên dưới để tạo sự chú ý vào bài viết quan trọng nhất

**Giải pháp:**

* Bước 1: Tại bản Desktop, sử dụng Grid cố định 3 cột cho các bài viết

<figure><img src="/files/Lft2E2DjwNylbh82ZkBj" alt=""><figcaption></figcaption></figure>

* Bước 2: Chuyển sang chế độ Mobile, thay đổi cấu trúc sang Stack với Direction dọc
* Bước 3: Sử dụng thuộc tính Order để đưa bài viết quan trọng nhất lên vị trí số 1 và thiết lập Grow: Yes cho riêng bài viết đó để nó chiếm diện tích lớn nhất

Mẹo: Việc thay đổi mô hình từ Grid sang Stack giúp nội dung không bị thu nhỏ đến mức không đọc được trên màn hình hẹp của điện thoại.

</details>

<details>

<summary>29, Xử lý dàn hàng ngang thông minh với cơ chế Wrap (Stack)</summary>

**Ví dụ:** Tôi thiết kế một hàng gồm 5 thẻ kỹ năng nằm cạnh nhau trên máy tính rất đẹp. Tuy nhiên, khi sang điện thoại, các thẻ này bị bóp nghẹt lại hoặc tràn ra khỏi màn hình khiến người dùng không đọc được.

**Giải pháp:**

* Bước 1: Chọn Stack bao quanh 5 thẻ kỹ năng, thiết lập Direction là mũi tên ngang
* Bước 2: Kích hoạt tính năng Wrap (Ngắt dòng)
* Bước 3: Thiết lập Distribution là Space Evenly để các thẻ tự động nhảy xuống dòng mới khi màn hình hẹp lại mà vẫn giữ khoảng cách đều với lề.

Mẹo: Khi dùng Wrap, hãy đảm bảo mỗi thẻ bên trong có một mức Min-width (Chiều rộng tối thiểu) nhất định để hệ thống biết khi nào cần thực hiện việc ngắt dòng

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>

<details>

<summary></summary>

**Ví dụ:**&#x20;

**Giải pháp:**

1.

Mẹo:&#x20;

</details>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/faq.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.