Tài liệu chuẩn ESC CV v1 — phiên bản hướng dẫn ngày 16/10/2026. Bài này dành cho người thiết kế CV, lập trình viên và các trợ lý AI (ChatGPT, Gemini, Grok, Claude...). Mục tiêu là tạo file ZIP được ESC CV Studio nhận là mẫu có thể chỉnh sửa trực tuyến, không chỉ là HTML nhìn giống CV.
Đường dẫn sử dụng: Tạo CV trực tuyến. Lưu ý: hệ thống sẽ tự kiểm tra ZIP; chỉ ZIP thỏa chuẩn mới mở Builder. File không đạt chuẩn có thể chỉ được xem trước và các biến {{...}} sẽ còn nguyên.
1. Tải mẫu ZIP chính thức để bắt đầu
Đây là mẫu nhỏ đã xây dựng theo contract của ESC CV v1: 2 cột, màu xanh công nghệ, có họ tên, ảnh, liên hệ, kỹ năng, kinh nghiệm và học vấn. Bạn có thể dùng trực tiếp, đổi giao diện hoặc giao cho AI phát triển tiếp từ chính các file này.
⬇ Tải mẫu ZIP ESC CV v1 chính thức (đầy đủ HTML/CSS/JSON/ảnh)
Nên giải nén, chỉnh sửa, nén lại đúng cấu trúc, sau đó tự upload vào ESC CV Studio. Không dùng ảnh chụp mẫu CV làm thay cho mã HTML/CSS.
2. Những định dạng nào được chấp nhận?
- ZIP ESC CV v1: tối đa 5 MB, kiểm tra manifest, HTML/CSS, preview và cú pháp biến; nếu hợp lệ thì chỉnh sửa trực tuyến.
- ZIP HTML không chuẩn: có thể xem trước nhưng không bật chế độ sửa trực tiếp; biến {{...}} sẽ không được thay bằng dữ liệu.
- HTML rời (.html/.htm): tối đa 2 MB, chỉ xem trước.
- PDF hoặc ảnh PNG/JPG/WebP: chỉ xem trước, không sửa nội dung theo từng trường.
- DOCX: chưa được hỗ trợ. Chức năng công khai CV lên hosting và Member hiện chưa triển khai.
3. Cấu trúc ZIP chính xác
ZIP cho phép đặt các tệp ở gốc hoặc trong một thư mục bao ngoài duy nhất. Tối thiểu phải có template.json, HTML, CSS và ảnh preview. Để CV có dữ liệu demo, nên thêm sample-data.json và ảnh dự phòng.
template.json
index.html
style.css
sample-data.json
preview.png
assets/avatar-placeholder.pngTên file trong manifest phải trùng chính xác (phân biệt chữ hoa/thường). Không thêm các file tạm như .DS_Store, .git, file thực thi, hoặc đường dẫn lùi thư mục.
4. File template.json — manifest bắt buộc
{
"id": "ESCV1",
"version": "1.0.0",
"name": "ESC CV v1 - Hai cột công nghệ",
"engine": "esc-cv-v1",
"schema": "esc-cv-v1",
"entry": "index.html",
"stylesheet": "style.css",
"preview": "preview.png",
"sample": "sample-data.json"
}id phải là 2–32 ký tự, bắt đầu bằng chữ in hoa và chỉ gồm A–Z, 0–9, dấu _ hoặc -. version dạng ba số nguyên như 1.0.0. name tối đa 140 ký tự. Hai khóa engine và schema phải bằng esc-cv-v1. entry, stylesheet và preview trỏ đúng tệp thật trong ZIP; đường dẫn tương đối, không dùng URL ngoài.
Tệp sample là tùy chọn nhưng rất nên có để khi chọn mẫu, Builder hiển thị dữ liệu demo. Manifest hợp lệ chưa đủ; hệ thống còn kiểm tra cú pháp HTML, CSS, ảnh và các nhóm dữ liệu.
5. File index.html — mẫu hoàn chỉnh có thể chỉnh sửa
Rất quan trọng: hãy đưa phần thân HTML như ví dụ bên dưới vào index.html. Không chèn các thẻ <meta>, <link> để gọi CSS. ESC tự đưa CSS từ file đã khai báo vào tài liệu khi render.
<div class="cv">
<aside class="sidebar">
<img class="avatar" src="{{profile.avatarUrl}}" alt="Ảnh đại diện">
<h2>Liên hệ</h2>
<p>{{profile.email}}</p>
<p>{{profile.phone}}</p>
<p>{{profile.location}}</p>
<h2>Kỹ năng</h2>
{{#each skills}}
<p class="skill">{{name}}</p>
{{/each}}
</aside>
<main class="detail">
<h1>{{profile.fullName}}</h1>
<p class="role">{{profile.jobTitle}}</p>
<h2>Giới thiệu</h2>
<p>{{profile.summary}}</p>
<h2>Kinh nghiệm làm việc</h2>
{{#each experiences}}
<section class="item">
<h3>{{position}}</h3>
<p>{{company}} · {{period}}</p>
<p>{{description}}</p>
</section>
{{/each}}
<h2>Học vấn</h2>
{{#each education}}
<section class="item"><h3>{{school}}</h3><p>{{degree}}</p></section>
{{/each}}
</main>
</div>Bắt buộc có chính xác biến {{profile.fullName}}. Các trường khác bắt đầu bằng profile. để ESC nhận diện phần hồ sơ. Các nhóm nhiều item dùng cú pháp {{#each skills}} ... {{/each}}, {{#each experiences}} ... {{/each}} và mỗi item dùng thuộc tính cục bộ như {{name}}, {{position}}.
Mỗi nhóm lặp phải mở/đóng đúng cặp, không lồng quá sâu; trường trong nhóm phải trùng với keys ở sample-data.json. Dùng HTML có cấu trúc rõ ràng, nhóm lặp bao ngoài toàn bộ item để thao tác Thêm/Xóa/Đổi thứ tự.
6. File style.css — định dạng riêng, không nhúng link ngoài
*{box-sizing:border-box}
body{margin:0;background:#fff;color:#192b43;font:15px/1.65 Arial,sans-serif}
.cv{display:grid;grid-template-columns:32% 68%;max-width:900px;min-height:1110px;margin:auto}
.sidebar{padding:40px 26px;background:#10223d;color:#fff}
.avatar{display:block;width:124px;height:124px;object-fit:cover;border-radius:50%;margin:0 auto 30px}
.sidebar h2{font-size:17px;color:#85c1ff;margin-top:30px;padding-bottom:8px;border-bottom:1px solid #446288}
.sidebar p{overflow-wrap:anywhere}
.skill{margin:7px 0}
.detail{padding:43px 40px}
h1{font-size:34px;line-height:1.25;margin:0;color:#10223d}
.role{font-size:18px;color:#1683ea;font-weight:700;margin:10px 0 35px}
.detail h2{font-size:18px;text-transform:uppercase;margin-top:35px;border-bottom:2px solid #b9d7fa;padding-bottom:7px}
h3{font-size:16px;margin:15px 0 0}
p{margin:9px 0}
.item{break-inside:avoid;margin-bottom:22px}
@media(max-width:620px){.cv{grid-template-columns:1fr}.sidebar,.detail{padding:27px}}Bạn có thể sáng tạo bố cục theo CV của mình, đặt màu sắc, khung, typography, cột, breakpoints ngay trong style.css. Hệ thống không cho CSS dùng @import, expression(...) hoặc url(http...), url(data:...). Không phụ thuộc JavaScript, Tailwind CDN, Google Fonts online hay tài nguyên mạng bên ngoài.
7. File sample-data.json — dữ liệu phải khớp 100% với HTML
{
"profile": {
"fullName": "Nguyễn Minh Anh",
"jobTitle": "Frontend Developer",
"email": "minhanh@example.com",
"phone": "0900 123 456",
"location": "TP. Hồ Chí Minh",
"summary": "Lập trình viên web có kinh nghiệm xây dựng giao diện dễ dùng, chú trọng hiệu năng và khả năng truy cập.",
"avatarUrl": ""
},
"skills": [
{
"name": "TypeScript · JavaScript"
},
{
"name": "React · Astro"
},
{
"name": "HTML · CSS"
}
],
"experiences": [
{
"position": "Frontend Developer",
"company": "Công ty Công nghệ Mẫu",
"period": "2023 – nay",
"description": "Phát triển giao diện sản phẩm, tối ưu trải nghiệm và phối hợp thiết kế hệ thống."
},
{
"position": "Web Developer",
"company": "Studio Mẫu",
"period": "2021 – 2023",
"description": "Xây dựng website responsive và cải thiện tốc độ tải trang."
}
],
"education": [
{
"school": "Đại học Công nghệ",
"degree": "Kỹ sư Công nghệ thông tin"
}
]
}Đối tượng profile chứa thông tin đơn; skills, experiences, education là mảng đối tượng (không phải một chuỗi văn bản). Ví dụ skills: [{"name":"React"}], tương ứng với {{#each skills}}{{name}}{{/each}}. Dữ liệu mẫu giúp mở Builder thấy thông tin ngay; thiếu nó, nhiều trường sẽ để trống.
8. Quy tắc ảnh đại diện và ảnh preview
- Ảnh người dùng trong HTML: dùng đúng
<img src="{{profile.avatarUrl}}" alt="Ảnh đại diện">. Không dùng trực tiếpsrc="assets/portrait.webp"nếu muốn người dùng đổi ảnh trực tiếp. - Ảnh demo dự phòng: đặt
assets/avatar-placeholder.pnghoặcassets/sample-portrait.webptrong ZIP. Đểprofile.avatarUrlrỗng ("") khi dùng ảnh này. Khi người dùng thay ảnh, ESC sẽ dùng dữ liệu mới. - Ảnh preview: khai báo
preview.png,preview.jpghoặcpreview.webptrong manifest; nội dung ảnh phải giải mã được, kích thước tối đa 5.000 × 5.000 pixel, dung lượng tối đa 1 MB. - Asset tĩnh khác: để trong
assets/và dùng đường dẫn tương đối; không tải ảnh từ domain ngoài.
9. Danh sách HTML/CSS bị từ chối vì an toàn
| Không dùng trong mẫu editable | Cách làm đúng |
|---|---|
<script>, JavaScript, onclick, onload | Chỉ HTML + CSS tĩnh và biến ESC |
<meta>, <link>, <base> | ESC tự tạo head; stylesheet được khai báo bằng manifest |
<iframe>, <object>, <embed>, <form> | Thay bằng phần tử hiển thị thuần túy |
javascript:, thẻ PHP hoặc tài nguyên CSS từ internet | Đặt tài nguyên hợp lệ trong ZIP, không thực thi mã |
Đường dẫn ../, file ẩn hoặc file vượt giới hạn | Chỉ đường dẫn tương đối an toàn trong đúng thư mục ZIP |
Giới hạn: ZIP 100 byte – 5 MB, tối đa 100 tệp, tổng dung lượng giải nén tối đa 20 MB. HTML/CSS/JSON dùng UTF-8. Tệp ZIP dùng nén Store hoặc Deflate phổ biến, không mật khẩu; ảnh phải là PNG/JPG/WebP hợp lệ. Nội dung có thể bị từ chối vì lý do khác nếu không qua các bước kiểm tra cấu trúc hoặc giải mã.
10. Danh sách tự kiểm tra trước khi tải lên
- ZIP có cấu trúc và tệp hợp lệ; không mã thực thi, không thư mục ../, không file ẩn.
- Manifest khai báo đúng engine/schema esc-cv-v1, các đường dẫn khớp file trong ZIP.
- index.html có {{profile.fullName}} và các {{#each ...}} đóng bằng {{/each}} đúng thứ tự.
- Không có meta, link, script, iframe, onload/onclick hoặc liên kết JavaScript trong HTML.
- CSS chỉ dùng kiểu an toàn, không @import, không tải ảnh/font từ web ngoài.
- sample-data.json có đối tượng profile và các nhóm danh sách dạng mảng object.
- Ảnh preview thật (PNG/JPG/WebP) dưới 1 MB; ảnh đại diện dùng tên dự phòng đúng quy ước.
- Upload lên ESC hiển thị “Có thể chỉnh sửa trực tuyến”, sau đó kiểm tra chỉnh chữ/ảnh và thêm/xóa mục.
Thử tại ESC CV Studio, bấm Tải lên mẫu CV của bạn. Nếu đạt, hệ thống hiển thị chế độ chỉnh sửa trực tiếp; nếu chỉ xem trước hoặc còn chuỗi {{...}}, hãy kiểm tra manifest, các thẻ bị cấm, dữ liệu demo và đường dẫn ảnh.
11. Prompt giao việc cho ChatGPT, Gemini, Grok hoặc Claude
Bạn có thể sao chép nội dung sau, đính kèm ZIP mẫu ở mục 1 và yêu cầu AI tạo một CV khác. Chỉ ảnh chụp thiết kế là chưa đủ để AI tự suy ra chuẩn ESC:
Hãy tạo một mẫu CV đẹp theo tiêu chuẩn ESC CV v1.
Tôi sẽ tải lên và CHỈ chấp nhận kết quả nếu chỉnh sửa trực tuyến trong ESC CV Studio.
Dùng ZIP tham chiếu ESC CV v1 tôi đính kèm làm baseline; tạo thiết kế riêng, không phá contract.
Kết quả: một ZIP <= 5 MB gồm template.json, index.html, style.css, sample-data.json,
preview.png hoặc preview.webp thật, cùng ảnh đại diện dự phòng trong assets/.
Manifest: engine và schema đều esc-cv-v1; id, version, path hợp lệ.
index.html chứa {{profile.fullName}}, các trường profile.xxx, và các nhóm
{{#each skills}}, {{#each experiences}}, {{#each education}} đóng bằng {{/each}}.
KHÔNG dùng script, meta, link, iframe, sự kiện onclick, CSS @import, tài nguyên online.
Ảnh đại diện: <img src="{{profile.avatarUrl}}"> và file assets/avatar-placeholder.png.
sample-data.json điền đủ dữ liệu thực tế cho từng trường để preview không trống.
Tự kiểm ZIP từng file và đối chiếu checklist bài hướng dẫn trước khi trả kết quả.
Nếu chưa chạy thử trực tiếp trên ESC CV Studio, phải nói rõ CHƯA XÁC NHẬN upload.
Trả duy nhất ZIP hoàn thiện và nêu mọi giới hạn chưa kiểm chứng.12. Lỗi thường gặp khi kiểm thử
| Hiện tượng | Nguyên nhân hay gặp và cách xử lý |
|---|---|
CV hiện nguyên {{profile.fullName}}, {{#each}} | Đang ở chế độ chỉ xem HTML; ZIP chưa đạt chuẩn editable. Kiểm tra thẻ cấm, manifest, ảnh và cú pháp groups. |
| Không thấy ảnh đại diện | Đừng gán avatarUrl bằng đường dẫn ảnh; đổi thành chuỗi rỗng, thêm đúng asset dự phòng. |
| Upload báo manifest không hợp lệ | Soát các khóa engine, schema, id, version, entry, stylesheet và preview; tên file phải trùng. |
| Builder trống hoặc nhóm không có dữ liệu | Thêm sample-data.json, tạo mảng object có key trùng biến trong mỗi nhóm. |
| ZIP chỉ xem dù nhìn đẹp | HTML/CSS có thể chứa script/meta/link, CSS import hoặc preview bị lỗi; hãy đối chiếu lại mục 9. |
Phạm vi: Tài liệu mô tả các quy tắc đang áp dụng cho ESC CV Studio tại thời điểm xuất bản, không bảo đảm mọi ZIP có thiết kế đẹp đều đạt chuẩn. Việc xác nhận cuối cùng cần tải trực tiếp ZIP lên Builder; bản mẫu tham chiếu giúp rút ngắn quá trình tạo và kiểm tra.
