/49-html-email-template

name: 49-html-email-template
description: "Dung khi can FILE HTML email chay duoc tren moi email client — cau truc table, CSS inline, be ngang 600px, dark mode, spec rieng cho Gmail, Outlook, Apple Mail va checklist test truoc khi gui. Mau va font lay tu brand guideline. Kich hoat khi user nhac 'email HTML', 'code email', 'template email', 'email responsive', 'email vo bo cuc tren Outlook', 'anh trong email khong hien', 'paste vao Brevo bi vo'. Khong dung cho — noi dung va chuoi gui email thi dung skill 14-email-marketing; trang web dat sau nut CTA thi dung skill 12-brief-landing-page; quy dinh mau va font thuong hieu thi dung skill 46-brand-guideline."
metadata:
  version: 1.0.1
  category: operations
license: MIT
triggers:
  - "email html"
  - "code email"
  - "template email html"
  - "email responsive"
  - "html email"
  - "email broadcast html"
output: "File .html duy nhat, self-contained — paste vao email tool (Brevo, Mailchimp, GetResponse...) la gui duoc ngay. Kem checklist test client."
related:
  - 14-email-marketing
  - 46-brand-guideline
  - 47-design-review
  - 12-brief-landing-page

HTML Email Template

> Email HTML khac website HTML: phai dung table layout, inline CSS, tranh moi thu client khong support. Tieu chi: dep tren Gmail, Outlook, Apple Mail, doc duoc tren mobile 375px — khong co exception. Noi dung va sequence lay tu `14-email-marketing`; skill nay lo phan code.

Thu thap thong tin

Doc brand guideline (`46-brand-guideline`) va noi dung email tu `14-email-marketing` neu co. Neu thieu, hoi toi da 4 cau:

1. **Loai email + layout?** Welcome / broadcast / nurture / offer / transactional — 1 cot don gian, 2 cot co hinh san pham, hay newsletter nhieu muc? 2. **Sections can co?** Header / hero / body / social proof / CTA / footer — co anh hero khong? 3. **Copy da co chua?** Hay can viet placeholder? CTA chinh link den dau? 4. **Gui bang tool nao?** Brevo / Mailchimp / GetResponse / khac — de dung dung merge tag ({{first_name}}...).

Nguyen tac

1. **Table layout, khong div/flexbox/grid/float/position:absolute** — Outlook desktop render bang Word engine, khong support. 2. **Toan bo CSS inline** — Gmail co the strip the `<style>` (chi giu `<style>` cho media query mobile va dark mode, phan con lai inline het). 3. **Width toi da 600px**, responsive ve 375px. 4. **Font he thong lam fallback:** '[font body]', Arial, Helvetica, sans-serif — khong phu thuoc web font (nhieu client khong load Google Fonts). 5. **Moi the img phai co alt text + width/height attribute** — nguoi doc chan anh van hieu email. 6. **Unsubscribe link bat buoc** (phap ly) + dia chi cong ty o footer. 7. **Test mobile truoc** — phan lon nguoi Viet doc email tren dien thoai. 8. **1 file .html duy nhat, self-contained, duoi 100KB.**

Quy trinh

Buoc 1 — Chon layout

| Layout | Dung cho | |--------|----------| | Simple 1 cot | Broadcast, nurture — de doc nhat, it loi nhat | | 2 cot (hinh + text) | Offer email co hinh san pham | | Newsletter nhieu muc | Digest, update — moi muc 1 block table rieng |

Buoc 2 — Code theo spec ky thuat

Container: 600px desktop / 100% mobile
Background ngoai: mau xam nhat (vd #F4F4F4)
Background body: [mau nen] (thuong trang)
Font: '[font body]', Arial, Helvetica, sans-serif
Body font-size: 16px / line-height: 1.6
Mobile breakpoint: max-width 480px

Design tokens doc tu brand guideline:

• Header: nen [mau primary], logo ban sang, padding 20px.
• Hero: nen [mau primary] hoac gradient [mau primary] sang [mau secondary]; headline bold 28px mau sang; subtext 16px; CTA button.
• Body: nen sang, padding 40x48px desktop / 24x20px mobile; H2 bold 22px [mau text dam]; body 16px line-height 1.7.
• CTA button: nen [mau primary], text bold 16px mau sang, padding 14x32px, radius 8px, display inline-block, text-decoration none. (Outlook khong ve border-radius — chap nhan nut vuong fallback, khong dung anh lam button.)
• Social proof: quote nen [mau nen nhe], border-left 4px [mau primary], ten + role nguon quote.
• Footer: nen xam nhat, text 13px [mau text phu] — logo nho ~80px, links website/social, dia chi, unsubscribe, copyright.

Buoc 3 — Dien sections

• Header: logo, can giua.
• Hero: pre-header text (optional), headline (toi da 60 ky tu), subtext (toi da 100 ky tu), CTA button, hero image optional 600x300px co alt text.
• Body: "Chao {{first_name}}," → opening 2-3 cau → main content (doan ngan, toi da 4 cau/doan) → bullet list neu co (dung table, khong dung ul de an toan render) → CTA thu hai neu can.
• Footer bat buoc: dia chi cong ty `[dia chi]`, unsubscribe "Ban nhan email nay vi da dang ky tai [website] | Huy dang ky", copyright © [nam] [ten thuong hieu].

Buoc 4 — Mobile responsive + dark mode

@media only screen and (max-width: 480px) {
  /* container: 100% */
  /* body font: 15px */
  /* CTA: width 100%, can giua */
  /* padding: 24px 20px */
  /* image: 100% width */
}

Dark mode:

• Them `<meta name="color-scheme" content="light dark">` va `<meta name="supported-color-schemes" content="light dark">`.
• `@media (prefers-color-scheme: dark)` chi duoc ho tro mot phan: Apple Mail ho tro tot; Gmail thuong tu dao mau va bo qua media query; Outlook co the tu invert.
• Quy tac an toan khi khong kiem soat duoc dark mode: logo PNG nen trong phai du tuong phan tren ca nen sang lan toi (hoac them vien sang); khong dung text den thuan tren background trong suot; vung quan trong (CTA) dung mau nen solid; test tren it nhat 1 client dark mode truoc khi gui.

Buoc 5 — Placeholders bat buoc truoc khi gui

• `{{first_name}}` — ten nguoi nhan (doi cu phap theo tool gui)
• `{{unsubscribe_link}}` — bat buoc phap ly
• `[dia chi cong ty]` — dien that
• `[CTA_LINK]` — dien link that (kem UTM theo `14-email-marketing`)

Spec cac email client

| Client | Dac diem render | Luu y khi code | |--------|-----------------|----------------| | Gmail (web/app) | Co the strip `<style>` trong mot so ngu canh | Inline toan bo CSS; media query co the bi bo q