VSTEP Brand Guidelines

Tài liệu tương tác quy chuẩn thẩm mỹ, UI components và văn phong áp dụng cho toàn bộ dự án Luyện thi VSTEP.

Nền tảng Bootstrap 5

Hệ thống blog và toàn bộ giao diện dự án được xây dựng dựa trên nền tảng Bootstrap 5. Do đó, bạn có thể sử dụng tất cả các class tiện ích có sẵn của Bootstrap (như grid system, flexbox, spacing padding/margin, typography) kết hợp với các cấu hình CSS tuỳ chỉnh bên dưới.

Page Layout Templates

Bốn mẫu bố cục (Layout Templates) chuyên nghiệp đã được dựng sẵn, bao gồm cấu trúc thẻ HTML và hệ thống Class chuẩn. Bạn chỉ cần chọn mẫu phù hợp với mục đích và copy nguyên mã nguồn để phát triển trang mới.

Editorial Standard

Giao diện bài viết Blog/Tin tức cốt lõi. Có thẻ Tác giả, Breadcrumbs, Menu điều hướng nhanh và khung Reading 780px tối ưu chống mỏi mắt.

High-Conversion Landing

Giao diện Trang Chuyển đổi/Sales. Lược bỏ chi tiết thừa, mở rộng toàn màn hình theo chuẩn Bootstrap container, phù hợp đặt Bảng giá và lưới tính năng.

Documentation Layout

Giao diện Hướng dẫn/Cẩm nang. Phân 2 cột rõ ràng với Sidebar Menu cố định bên trái, thuận tiện để tra cứu tài liệu kỹ thuật dài.

Info Page Layout

Giao diện Trang Thông tin tĩnh (Giới thiệu, Chính sách, Điều khoản...). Cấu trúc đơn giản, loại bỏ các chi tiết thừa, tập trung hiển thị nội dung trực tiếp.

Hệ thống Màu sắc (Color Palette)

Bộ màu nhận diện được xây dựng nhằm tạo cảm giác tin cậy, tràn đầy năng lượng nhưng vẫn giữ được sự thanh lịch của một nền tảng học thuật.

Primary (Cam đặc trưng)
#eb5505
bg-brand / text-brand / border-brand / fill-brand
Primary Light
#fff2eb
bg-brand-light / text-brand-light / border-brand-light / fill-brand-light
Primary Dark
#d04600
bg-brand-dark / text-brand-dark / border-brand-dark / fill-brand-dark
Brand Gradient
#eb5505 → #ff8c00
.text-gradient-brand
Hero Mesh Background
Linear Gradient
.bg-hero-mesh

Typography

Nguyên tắc Viết hoa Tiêu đề (Casing Rule)

Toàn bộ dự án áp dụng chuẩn Sentence case (Chỉ viết hoa chữ cái đầu tiên của câu) thay vì Title Case (Viết hoa mọi từ).

  • Không dùng: 12 Lỗi Mất Điểm Thường Gặp Trong Bài Thi VSTEP Writing & Speaking
  • Khuyên dùng: 12 lỗi mất điểm thường gặp trong bài thi VSTEP Writing & Speaking
  • Ngoại lệ: Vẫn viết hoa các danh từ riêng, thuật ngữ tiếng Anh (VSTEP, IELTS, Writing, Task 1, TPHCM...)
H1 - Tiêu đề Lớn44px / font-weight: 500 / line-height: 1.2

Luyện thi VSTEP trọn gói cam kết đầu ra

.display-6 fw-medium
H2 - Tiêu đề Phụ28px / font-weight: 700

Cấu trúc bài thi VSTEP theo quy định

.fs-3 fw-bold
Lead Paragraph (Tóm tắt)20px / line-height: 30px

Kỳ thi VSTEP là bài thi đánh giá năng lực ngoại ngữ 6 bậc dùng cho Việt Nam. Đề thi VSTEP bậc 3-5 đang được áp dụng rộng rãi tại các trường Đại học...

.fs-5
Body Text (Văn bản chính)17px / line-height: 1.65

Để học tốt và đạt điểm cao trong kỳ thi VSTEP, bạn cần một lộ trình cụ thể và sự hướng dẫn sát sao từ giảng viên. Cấu trúc bài thi bao gồm Nghe, Nói, Đọc, Viết được đánh giá trực tiếp trên máy tính. Việc phân bổ thời gian hợp lý là chìa khóa để vượt qua kỳ thi này.

.fs-6

Hệ thống Icon

Toàn bộ hệ thống website sử dụng bộ Bootstrap Icons chuẩn. Với hơn 2000 icon vector (SVG) sắc nét, bộ icon này tích hợp hoàn hảo với nền tảng Bootstrap 5 đang sử dụng mà không cần cài đặt thêm font icon nặng nề.

Cách nhúng (CDN)

Đảm bảo dán thẻ này vào trong thẻ <head> của tất cả các trang HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
Cách sử dụng

Sử dụng thẻ <i> với class bi bi-[tên-icon]. Có thể kết hợp với các class tiện ích của Bootstrap (như text-brand, fs-3, me-2).

<i class="bi bi-check-circle text-success"></i>Tra cứu Tên Icon

Hệ thống Nút bấm (Buttons)

Tất cả nút bấm tuân thủ cấu trúc của Bootstrap 5, kết hợp class .btn và class định dạng màu sắc. Các trạng thái Hover, Focus, Active đều được CSS tự động xử lý.

Primary Brand
<button class="btn btn-brand">

Tự động tối màu khi hover.

Light Brand
<button class="btn btn-brand-light">

Viền cam. Đổ nền cam nhạt khi hover.

Outline Brand
<button class="btn btn-outline-brand">

Viền cam. Đổ nền cam khi hover.

Brand Links (Hyperlinks)

Dùng .link-brand cho các thẻ <a> thay vì .text-brand để có hiệu ứng hover mượt mà (chỉ đổi sang màu cam đậm).

Thử rê chuột vào link này: Xem Lịch thi VSTEP mới nhất
<a href="#" class="link-brand">Xem Lịch thi VSTEP mới nhất</a>

Components Trực Quan

FAQ Accordion (Phong cách Flush)

Không dùng khối hộp viền bao quanh. Mũi tên tự động đổi màu cam khi mở.

Chứng chỉ VSTEP thực tế không ghi thời hạn sử dụng. Tuy nhiên, tùy thuộc vào cơ quan hoặc trường đại học yêu cầu, chứng chỉ thường được chấp nhận trong vòng 2 năm.

Bạn sẽ thực hiện cả 4 kỹ năng Nghe, Đọc, Viết, Nói trực tiếp trên phần mềm chuyên dụng tại phòng máy của điểm thi. Phần Nói được ghi âm lại qua tai nghe có micro.

Material CTA Card

Dùng để kêu gọi thi thử AI chèn giữa các bài viết Dài.

Hệ thống luyện thi VSTEP trực tuyến

Trải nghiệm hệ thống thi thử mô phỏng sát đề thi thật 100% của Bộ Giáo dục & Đào tạo. Bài thi Nói/Viết được chấm chữa trực tiếp bởi Giám khảo, cam kết hỗ trợ đầu ra nhanh nhất.

Thi thử ngay

Promo Modal (Quảng cáo Khóa học)

Giao diện thẻ quảng cáo khóa học thường được dùng trong Modal. Thiết kế tập trung làm nổi bật khóa B2.

Chinh phục VSTEP B1, B2 nhanh chóng

Lộ trình tinh gọn 2 - 3 tuần • Bám sát cấu trúc đề thi • Cam kết đầu ra

HOT

Khóa B1 cấp tốc

Lộ trình 2 tuần (8 buổi)

Tiết kiệm 700.000đ
1.800.000đ
Học phí gốc: 2.500.000đ
  • Khai giảng: 24/07/2026
  • Hình thức: Học online qua Zoom
Còn 1 chỗ cuối
Chi tiết B1
Tư vấn Zalo
HOT

Khóa B2 cấp tốc

Lộ trình 3 tuần (12 buổi)

Tiết kiệm 1.000.000đ
2.700.000đ
Học phí gốc: 3.700.000đ
  • Khai giảng: 24/07/2026
  • Hình thức: Học online qua Zoom
Còn 1 chỗ cuối
Chi tiết B2
Tư vấn Zalo

Callout Card

Component đa năng dùng để hiển thị Testimonial, Cảnh báo (Warning), Thông báo (Info)... Thay đổi màu viền bằng các class modifier như .callout-brand, .callout-warning, .callout-info.

Avatar
Nguyễn Mai (Testimonial)

"Hệ thống luyện thi sát với đề thật, phần thi Speaking được chấm rất kỹ lưỡng."

Lưu ý quan trọng

Trình duyệt Safari trên MacOS có thể chặn tính năng ghi âm tự động. Vui lòng cấp quyền Microphone trước khi làm bài thi Speaking.

Mẹo làm bài Reading

Hãy đọc lướt (Skimming) để nắm ý chính của toàn bộ đoạn văn trước khi đi sâu vào tìm câu trả lời chi tiết.

Hoàn thành bài thi

Chúc mừng! Bạn đã hoàn thành bài thi thử VSTEP. Kết quả AI chấm điểm sẽ có trong vài giây tới.

Biến thể Không bo tròn (Flat)

Thêm class .callout-flat hoặc tiện ích .rounded-0 của Bootstrap để có một khối Callout cứng cáp, phù hợp cho bài viết dài hoặc tài liệu kỹ thuật.

Gợi ý ôn tập

Học từ vựng theo chủ đề sẽ giúp bạn nhớ lâu hơn so với việc học từ vựng đơn lẻ từng từ một.

Biến thể Đổ màu nền (Filled)

Thêm class .callout-filled để bỏ viền, bỏ hiệu ứng nổi (shadow) và tự động đổ màu nền dựa trên modifier màu sắc. Đây chính là phiên bản cải tiến của Section Highlight cũ.

Ghi nhớ quan trọng

Sử dụng biến thể này để làm nổi bật một đoạn văn bản hoặc trích dẫn quan trọng trong bài viết mà không làm gãy luồng đọc.

Mẫu Service Card

Sử dụng class .service-card kết hợp với khối icon-box-lg căn giữa (d-flex mx-auto) và tiêu đề text-center để tạo các khối Dịch vụ nổi bật.

Thi thử mô phỏng

  • Thi 4 kỹ năng như thật
  • Đề chuẩn hóa từ BGD
  • Giao diện cực dễ sử dụng

Article Related Post

Dùng để hiển thị các bài viết liên quan dạng thẻ (card) theo phong cách thiết kế của Google.

Custom List Style (Brand Bullet)

Để một danh sách hiển thị với dấu chấm bullet màu cam chuẩn thương hiệu mà không bị phụ thuộc vào nội dung bài viết, bạn chỉ cần gán class .list-brand trực tiếp vào thẻ <ul>.

  • Dấu chấm tròn (bullet) màu cam nổi bật
  • Thụt đầu dòng chuẩn typography độc lập
  • Dễ dàng chèn vào bất kỳ đâu trên giao diện

Table of Contents (Mục lục tĩnh)

Bảng mục lục sử dụng 100% Bootstrap utilities, loại bỏ 60 dòng CSS thừa. Khối này sẽ nằm cố định ở một vị trí thay vì trôi (sticky) theo bài viết.

Nội dung bài viết

Utilities & Hiệu ứng (Effects)

Các class tiện ích hỗ trợ định dạng khung icon, hiệu ứng hình ảnh và layout vừa được tách từ inline styles.

1. Kích thước Icon Box

Các hộp chứa icon được định nghĩa sẵn kích thước chuẩn (.icon-box-lg: 56x56, .icon-box-md: 48x48).

.icon-box-lg
.icon-box-md

2. Hiệu ứng Ảnh Hero (.hero-img-perspective)

Áp dụng cho khối bọc hình ảnh (wrapper) để tạo hiệu ứng nghiêng 3D. (Hãy di chuột / Hover vào khối ảnh bên dưới), ảnh sẽ trở về góc nhìn thẳng.

Phần mềm thi thử VSTEP
.hero-img-perspective + .drop-shadow-lg

3. Giới hạn ảnh Thumbnail (.img-cover-350)

Đảm bảo hình ảnh được cắt (crop) vừa vặn (object-fit: cover) và giới hạn chiều cao tối đa 350px.

Tiện ích
.img-cover-350