, nên :has() bắt được
đúng trạng thái "chưa chọn" mà không cần một dòng JS nào. */
.tl-form-lienhe select:has(option[value=""]:checked) { color: #8b93a5; }
.tl-form-lienhe input:focus,
.tl-form-lienhe select:focus,
.tl-form-lienhe textarea:focus {
border-color: var(--tl-cam);
box-shadow: 0 0 0 3px rgba(235, 80, 14, .14);
outline: none; /* thay bằng box-shadow ở trên — vẫn thấy rõ focus bàn phím (II.D) */
}
.tl-form-lienhe textarea { min-height: 132px; resize: vertical; }
/* hàng 2 cột — mockup xếp Họ tên | SĐT cạnh nhau ở desktop */
.tl-form-lienhe .tl-form-hang { display: flex; gap: 16px; }
.tl-form-lienhe .tl-form-o { flex: 1; min-width: 0; }
.tl-form-lienhe .tl-form-nut { text-align: center; margin-top: 8px; }
.tl-form-lienhe .tl-form-nut input[type="submit"] { width: auto; margin-bottom: 0; }
.tl-form-lienhe .tl-form-bao-mat {
margin-top: 14px;
text-align: center;
font-size: .86em;
}
/* Bẫy nhện — ô này phải KHÔNG nhìn thấy nhưng vẫn tồn tại với bot.
⛔ Đừng đổi sang display:none — nhiều bot bỏ qua ô display:none, và trình đọc
màn hình cũng cần nó vắng mặt chứ không phải chỉ bị ẩn hình. */
.tl-form-lienhe .tl-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
@media (max-width: 549px) {
.tl-form-lienhe .tl-form-hang { display: block; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text (ux_text) | khối: danh sách có dấu ✓ cam (.tl-checklist)
[trang] ve-toi, toi-co-the-giup-gi, trang-chu
[mockup] trang-ve-toi.jpg, trang-toi-co-the-giup-gi.jpg
[lý do vượt panel] Không phần tử nào của Flatsome làm danh sách có icon tuỳ
biến. Whitelist III.2 chỉ cho / trong Text, nên dấu ✓
phải vẽ bằng ::before chứ không chèn ký tự vào nội dung — chèn ký
tự thì 4T sửa chữ là xoá mất dấu.
-------------------------------------------------------------------------- */
.tl-checklist p {
position: relative;
margin: 0 0 12px;
padding-left: 30px;
}
.tl-checklist p::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--tl-cam);
font-weight: 700;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text (ux_text) | khối: thẻ trích dẫn (.tl-quote-navy, .tl-quote-cam)
[trang] ve-toi, toi-co-the-giup-gi, kien-thuc
[mockup] cả 4 trang có quote card
[lý do vượt panel] Dấu nháy kép trang trí cỡ lớn ở góc trên và dòng ký tên
nghiêng — panel Col chỉnh được nền/bo góc/padding, nhưng không có
chỗ nào thêm được ký tự trang trí.
-------------------------------------------------------------------------- */
.tl-quote-navy,
.tl-quote-cam {
position: relative;
padding: 26px 26px 22px;
border-radius: var(--tl-bo);
}
.tl-quote-navy { background: var(--tl-navy); color: #dfe4ee; }
.tl-quote-cam { background: var(--tl-cam-nhat); border-left: 3px solid var(--tl-cam); }
.tl-quote-navy::before,
.tl-quote-cam::before {
content: "\201C";
display: block;
margin-bottom: 6px;
color: var(--tl-cam);
font-size: 2.4em;
line-height: .6;
}
.tl-quote-navy .tl-quote-ten,
.tl-quote-cam .tl-quote-ten {
margin-top: 14px;
margin-bottom: 0;
font-style: italic;
text-align: right;
}
/* biến thể nền sáng — dùng ở cột "Tôi tin rằng" của trang Về tôi */
.tl-quote-sang { background: var(--tl-trang); color: var(--tl-navy); box-shadow: 0 2px 14px rgba(1,15,56,.07); }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Row + Icon Box | khối: 5 mốc hành trình (.tl-moc)
[trang] ve-toi
[mockup] trang-ve-toi.jpg
[lý do vượt panel] Vạch ngang NỐI GIỮA các icon tròn. Panel không có khái
niệm "nối hai phần tử với nhau" — chỉ ::before trên hàng mới làm được.
-------------------------------------------------------------------------- */
.tl-moc { position: relative; }
.tl-moc::before {
content: "";
position: absolute;
top: 32px;
left: 10%;
right: 10%;
height: 1px;
background: #ccd3e0;
z-index: 0;
}
.tl-moc .col { position: relative; z-index: 1; }
.tl-moc .icon-box { margin-bottom: 8px; }
/* Chia ĐỀU 5 mốc trên một hàng — desktop.
⛔ Nấc span của Flatsome là 1/12, mà 5 cột đều nhau cần 1/5. Panel đang để
span="2" ⇒ 5 × 16,67% = 83,3%, BỎ TRỐNG 16,7% bên phải. Vạch nối ở trên
chạy 10%→90% theo giả định 5 cột đều, nên nó THÒ HẲN RA sau mốc cuối.
Lỗi có từ đầu; nới dải nội dung 19/08 (1170→1360 ở khổ 1600) chỉ làm
khoảng trống từ 195px thành 227px nên mới đập vào mắt.
⚠ Chỉ desktop: ở ≤849 panel đã chia 3/hàng (md) và 2/hàng (sm), grid 5 cột
sẽ phá bố cục mobile đã chốt.
⚠ `::after` dọn float của Flatsome là MỘT Ô LƯỚI khi hàng thành grid ⇒ phải
giấu, nếu không nó rơi xuống hàng hai (xem CLAUDE.md 22.2).
`::before` thì không sao vì nó `position:absolute`, nằm ngoài dòng chảy. */
@media (min-width: 850px) {
.tl-moc {
display: grid;
grid-template-columns: repeat(5, 1fr);
align-items: stretch;
}
.tl-moc::after { display: none; }
/* Trong grid, `flex`/`width`/`max-width` của .col vẫn ăn — phải gỡ tay.
GIỮ NGUYÊN padding: nó chính là khe hở giữa 5 thẻ trắng. */
.tl-moc > .col {
flex: none;
width: auto;
max-width: none;
}
}
.tl-moc .tl-moc-nam p { color: var(--tl-cam-chu); font-weight: 700; margin: 0 0 8px; }
@media (max-width: 849px) {
/* xếp dọc thì vạch nối ngang thành vô nghĩa */
.tl-moc::before { display: none; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text (ux_text) | khối: nhãn nhỏ trên tiêu đề section
[trang] ve-toi, lien-he, toi-co-the-giup-gi
[mockup] cả 6
[lý do vượt panel] Panel Text chỉnh được cỡ và màu, nhưng letter-spacing thì
không có ô nào — mà nhãn trong mockup giãn chữ rõ rệt.
-------------------------------------------------------------------------- */
.tl-nhan-section p {
margin-bottom: 8px;
color: var(--tl-cam-chu);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text (ux_text) | khối: H1 hero hai màu (.tl-hero-h1)
[trang] ve-toi, toi-co-the-giup-gi
[mockup] trang-ve-toi.jpg, trang-toi-co-the-giup-gi.jpg
[lý do vượt panel] Mockup tô MỘT PHẦN tiêu đề màu cam. Không panel nào tô
được một phần heading, và tách thành hai phần tử Text sẽ đẻ ra hai
thẻ heading cho một tiêu đề — hỏng cây heading (III.10-1).
đã duyệt trong whitelist III.2 ngày 18/08.
-------------------------------------------------------------------------- */
/* Chữ H1 rất lớn ⇒ ngưỡng WCAG là 3:1, cam thương hiệu đạt 3,69:1.
⛔ Đừng đổi sang --tl-cam-chu ở đây: sẽ mất đúng điểm nhấn thương hiệu mà
mockup vẽ, trong khi cỡ chữ này vốn đã đọc được. */
.tl-hero-h1 .tl-cam { color: var(--tl-cam); }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text (ux_text) | khối: chú thích dưới ảnh (.tl-caption)
[trang] ve-toi, trang-chu
[mockup] trang-ve-toi.jpg, trang-chu.jpg
[lý do vượt panel] Cỡ chữ nhỏ hơn thân bài và màu nhạt hơn — panel Text đặt
được cỡ nhưng không có ô cho màu phụ theo hệ thống, và khối này
lặp ở 2 trang nên phải nằm ở 30-components (luật NÂNG CẤP).
-------------------------------------------------------------------------- */
.tl-caption p { margin-top: 10px; font-size: .88em; color: #5b6478; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: thẻ nền của mốc hành trình và hai khối niềm tin
[trang] ve-toi
[mockup] trang-ve-toi.jpg
[lý do vượt panel] Panel Col CÓ ô `bg_color` và `border_radius` — nhưng đặt ở
đó thì phải lặp tay cho từng cột trong 5 cột mốc, và 4T đổi màu nền
phải sửa 5 chỗ. Khối lặp ⇒ luật NÂNG CẤP (III.4.0) đưa về đây.
⚠ Nếu sau này chỉ còn MỘT chỗ dùng, trả lại cho panel.
-------------------------------------------------------------------------- */
/* ⚠ 4T PHẢN HỒI 26/08: mockup KHÔNG có thẻ trắng/đổ bóng cho mốc hành trình,
và KHÔNG có hai panel màu cho khối niềm tin — nền liên tục, không viền,
không card. Đã gỡ background/box-shadow/border-radius; padding thu gọn lại
để icon/ảnh/chữ dày hơn (đúng brief "thu ảnh/text để dày/gọn hơn"). */
.tl-moc .col-inner { padding: 0; }
.tl-khoi-niem-tin .col-inner,
.tl-khoi-agency .col-inner { padding: 0; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Section | khối: dải CTA cuối trang (.tl-band-cta)
[trang] toi-co-the-giup-gi · cau-chuyen · kien-thuc (sẽ dùng lại)
[mockup] 3 trang có dải này
[lý do vượt panel] Section panel đặt được nền và padding; phần này chỉ chỉnh
cỡ chữ tiêu đề cho vừa dải ngang — panel Text đặt được, nhưng khối
lặp ở 3 trang nên theo luật NÂNG CẤP phải nằm ở 30-components.
-------------------------------------------------------------------------- */
.tl-band-cta h2 { font-size: 1.15em; line-height: 1.4; margin-bottom: 0; }
.tl-band-cta .icon-box p { margin: 6px 0 0; font-size: .8em; line-height: 1.35; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Blog Posts | khối: danh sách "xem nhiều" đánh số 01–05 (.tl-card-rank)
[trang] kien-thuc
[mockup] trang-kien-thuc.jpg
[lý do vượt panel] Số thứ tự 01–05 KHÔNG có trong panel Blog Posts. Quyết định
3.7-3 chốt đánh số bằng CSS counter thay vì gõ tay vào tiêu đề —
gõ tay thì đổi thứ tự bài là số sai hết mà không ai biết.
-------------------------------------------------------------------------- */
.tl-card-rank { counter-reset: tl-rank; }
.tl-card-rank .col { counter-increment: tl-rank; position: relative; }
.tl-card-rank .col .box-image::before {
content: counter(tl-rank, decimal-leading-zero);
position: absolute;
top: 0;
left: 0;
z-index: 2;
padding: 4px 10px;
border-radius: var(--tl-bo) 0 var(--tl-bo) 0;
background: var(--tl-cam-chu);
color: var(--tl-trang);
font-weight: 800;
font-size: .9em;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Icon Box | khối: 6 ô chủ đề kiến thức (.tl-chu-de)
[trang] kien-thuc
[mockup] trang-kien-thuc.jpg
[lý do vượt panel] Ô có nền trắng, viền mảnh và bo góc — panel Col đặt được,
nhưng lặp 6 lần thì 4T đổi kiểu phải sửa 6 chỗ (luật NÂNG CẤP).
-------------------------------------------------------------------------- */
.tl-chu-de .col-inner {
padding: 18px 10px;
border: 1px solid #e3e6ec;
border-radius: var(--tl-bo);
background: var(--tl-trang);
}
.tl-chu-de .icon-box p {
margin: 8px 0 0;
font-weight: 700;
font-size: .82em;
line-height: 1.35;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column | khối: 4 ô "Kiến thức nổi bật" mỗi ô một màu nền
[trang] kien-thuc
[mockup] trang-kien-thuc.jpg
[lý do vượt panel] Panel Col CÓ ô bg_color. Đặt ở đây vì bốn màu này là một
BỘ có ý nghĩa (mỗi ô một chủ đề), giữ chung một chỗ thì đổi bảng
màu sửa một lần. Nếu sau này chỉ còn một ô, trả lại cho panel.
-------------------------------------------------------------------------- */
.tl-o-cam .col-inner,
.tl-o-xanh-duong .col-inner,
.tl-o-xanh-la .col-inner,
.tl-o-vang .col-inner {
height: 100%;
padding: 20px 18px;
border-radius: var(--tl-bo);
}
.tl-o-cam .col-inner { background: #fdf1ea; }
.tl-o-xanh-duong .col-inner { background: #eef3fb; }
.tl-o-xanh-la .col-inner { background: #eef7f0; }
.tl-o-vang .col-inner { background: #fdf7e8; }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text | khối: phụ đề dưới H2, link "Xem ngay", dòng số
điện thoại trong dải CTA, khung mục tiêu
[trang] kien-thuc, cau-chuyen
[mockup] trang-kien-thuc.jpg, trang-cau-chuyen.jpg
[lý do vượt panel] Đều là biến thể cỡ/màu chữ lặp ở ≥2 trang ⇒ luật NÂNG CẤP
đưa về đây thay vì đặt lẻ trong panel từng phần tử.
-------------------------------------------------------------------------- */
.tl-phu-de p { margin: -6px 0 16px; color: #5b6478; }
.tl-link-xem p { margin: 8px 0 0; font-weight: 600; }
.tl-band-lienhe p { margin: 10px 0 0; font-size: .86em; color: #5b6478; }
.tl-khung-muc-tieu {
margin-top: 18px;
padding: 16px 18px;
border-radius: var(--tl-bo);
background: #fdf1ea;
}
.tl-khung-muc-tieu strong { color: var(--tl-cam-chu); }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Column + Text | khối: 5 thẻ bước trang chủ (.tl-card-buoc),
danh sách chấm tròn (.tl-cham-tron), thẻ CTA đè ảnh hero (.tl-card-cta),
trích dẫn nhỏ (.tl-quote-nho), hàng chip lọc (.tl-chip)
[trang] trang-chu
[mockup] trang-chu.jpg
[lý do vượt panel] Thẻ nền trắng lặp 5 lần (panel phải đặt tay từng cột);
dấu chấm tròn đầu dòng không có phần tử nào của Flatsome làm được
trong Text (whitelist III.2 chỉ cho / của CF7 không nhận `placeholder`, nên nó là ô
DUY NHẤT trong biểu mẫu không có nhãn nào cho trình đọc màn hình.
Bộ soát toàn site bắt được 18/08/2026.
⛔ Đừng dùng display:none — trình đọc màn hình sẽ bỏ qua luôn.
Cách đúng là giấu khỏi MẮT mà vẫn nằm trong cây trợ năng.
-------------------------------------------------------------------------- */
.tl-nhan-an {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =============================================================================
TINH CHỈNH THEO AUDIT STYLE 19/08/2026
Mỗi khối ghi [phục vụ] · [lý do vượt panel] theo Luật 2 (III.4.2).
Thứ gì panel làm được đã làm ở panel — xem bảng trong báo cáo audit.
============================================================================= */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Row/Column | khối: hàng 5 thẻ bước (.tl-card-buoc)
[trang] trang-chu
[mockup] trang-chu.jpg — 5 thẻ trải ĐỀU hết bề ngang
[audit] 2.2
[lý do vượt panel] Lưới Flatsome nhận span NGUYÊN 1–12; 12/5 = 2,4 nên
KHÔNG có giá trị span nào chia hàng thành 5 cột đều. span="2"
cho 5 cột chỉ phủ 10/12 ⇒ đo được hụt đúng 185px bên phải
(chẩn đoán 19/08). Không ô panel nào sửa được — đây là giới hạn
của lưới 12 cột, không phải thiếu sót người dựng.
⚠ Chiều cao thẻ ĐÃ đều sẵn (đo được chênh 0,0px) nhờ .col-inner{height:100%}
bên trên — audit báo "cao không đều" là báo động giả, không sửa gì thêm.
-------------------------------------------------------------------------- */
@media (min-width: 850px) {
.tl-card-buoc > .col {
flex-basis: 20%;
max-width: 20%;
}
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text + Button | khối: thẻ CTA đè ảnh hero (.tl-card-cta)
[trang] trang-chu
[mockup] trang-chu.jpg — nút cam nằm TRONG thẻ trắng, không rơi ra ngoài
[audit] 2.3
[lý do vượt panel] Nút là phần tử ANH EM của thẻ trong cùng Col, không phải
con của nó — panel không có khái niệm "đặt phần tử này vào trong
phần tử kia". Panel Banner có text_box x/y nhưng ảnh hero ở đây là
[ux_image] chứ không phải Banner, nên đường đó không dùng được.
Cách giữ nguyên cấu trúc: nới đáy thẻ rồi kéo nút lên nằm đè vào
phần nền trắng vừa nới ra.
-------------------------------------------------------------------------- */
.tl-card-cta { padding-bottom: 84px; }
.tl-card-cta + .button {
position: relative;
z-index: 3;
margin-top: -68px; /* đo 19/08: -54px để nút sát đáy thẻ 1,6px */
margin-left: 36px; /* 18px lề thẻ + 18px padding trong thẻ */
margin-right: 36px;
}
@media (max-width: 849px) {
/* thẻ bỏ lề hai bên ở mobile (rule cũ bên trên) nên nút cũng phải bỏ theo */
.tl-card-cta + .button { margin-left: 18px; margin-right: 18px; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: nút nhãn dài trong cột hẹp
[trang] trang-chu (cột span 3 — "XEM CHI TIẾT CÂU CHUYỆN")
[mockup] cả 6 — mọi nút nằm TRÊN MỘT DÒNG
[audit] 2.4
[lý do vượt panel] Panel Button có Style/Size/Radius/Icon nhưng KHÔNG có ô
nào cho letter-spacing, padding ngang hay ngắt dòng. Nhãn 23 ký tự
trong cột 247,5px vỡ thành 2 dòng (đo 19/08).
⚠ nowrap mà không giảm tracking là đẩy tràn sang phải ở khổ hẹp — hai thứ
phải đi cùng nhau. Chặng 5 (kiem-vo 5 khổ) là chốt kiểm cho rule này.
-------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: canh giữa icon+chữ theo chiều dọc
[trang] mọi trang có [button] bị đổi min-height/height riêng
[audit] 4T 27/08 — "chữ trong button liên hệ chưa nằm giữa"
[lý do vượt panel] `.button` gốc Flatsome là `display:inline-block`, canh
giữa dọc nhờ `line-height` KHỚP với chiều cao mặc định (tạo bằng
padding). Bất cứ trang nào tự đặt `min-height`/`height` riêng cho
nút (rất nhiều trang có, mỗi nút một cỡ khác panel) mà không sửa
lại đúng `line-height` theo cỡ mới ⇒ chữ dính ép lên SÁT ĐỈNH nút,
phần dư dồn hết xuống đáy — đo được: nút cao 40px, chữ cao 20.8px
nằm ở y=1.5px (gần đỉnh), đáy dư 18px. Panel Button không có ô
"canh giữa dọc" nào để chỉnh — đây là lỗi CƠ CHẾ, không phải lỗi
từng nút, nên sửa MỘT LẦN ở đây thay vì dò `line-height` cho từng
chỗ min-height khác nhau trên 6 trang. */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
letter-spacing: .01em;
transition: background-color var(--tl-chuyen), color var(--tl-chuyen),
border-color var(--tl-chuyen), box-shadow var(--tl-chuyen),
transform var(--tl-chuyen);
}
.button.is-outline {
padding-left: 14px;
padding-right: 14px;
/* ⛔ CHỮ của nút outline nằm THẲNG trên nền trang, không có nền cam đỡ phía
sau như nút đặc. Nền xám section (#F8F9FC và #F4F6F9) kéo tương phản của
#CE4C09 xuống 4,28:1 và 4,16:1 — TRƯỢT AA. Bộ soát toàn site bắt được
7 lỗi ngày 19/08.
#C44809 đạt 4,91:1 trên trắng và 4,53:1 trên nền xám tối nhất đang dùng.
Nền nút đặc vẫn giữ #CE4C09 (4,50:1 với chữ trắng) như 4T đã chốt —
chỉ tách riêng màu CHỮ, đúng lối hai token đã có của dự án.
[lý do vượt panel] Panel Button chỉ có MỘT ô màu, dùng chung cho cả nền
nút đặc lẫn chữ nút outline; không tách được hai vai trò. */
color: #c44809;
border-color: #c44809;
}
@media (max-width: 849px) {
/* Khổ hẹp: hạ cỡ chữ thay vì cho vỡ dòng.
⚠ Mốc 849 chứ KHÔNG phải 549 — chặng 5 bắt được nút "LIÊN HỆ TƯ VẤN NGAY"
của ve-toi tràn phải 28px ở khổ 768 ngày 19/08, đúng vùng 550–849 mà
bản đầu bỏ sót. Đây là lý do nowrap phải luôn đi kèm chốt kiểm 5 khổ. */
.button { font-size: .82em; letter-spacing: 0; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text | khối: trích dẫn người bệnh (.tl-quote-nho)
[trang] trang-chu
[mockup] trang-chu.jpg — thẻ trắng, dấu nháy cam, tên người xám nghiêng
[audit] 3.1
[lý do vượt panel] [ux_text] chỉ có text_align/class trong panel — không có
nền, bo góc, bóng hay phần tử trang trí ::before. Dấu nháy cam là
đồ hoạ thuần tuý, không được phép là chữ trong nội dung (III.2).
-------------------------------------------------------------------------- */
.tl-quote-nho {
position: relative;
padding: 34px 18px 16px;
border-radius: var(--tl-bo);
background: var(--tl-trang);
box-shadow: var(--tl-bong);
}
.tl-quote-nho::before {
content: "\201C"; /* dấu nháy kép mở */
position: absolute;
top: 2px;
left: 14px;
color: var(--tl-cam); /* đồ hoạ, không mang chữ ⇒ 3:1 là đủ (1.4.11) */
font-size: 42px;
line-height: 1;
font-family: Georgia, "Times New Roman", serif;
}
.tl-quote-nho .tl-quote-ten {
margin-top: 10px;
font-style: italic;
color: #5b6478;
text-align: left;
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Blog Posts | khối: thẻ bài viết (.tl-card-baiviet)
[trang] trang-chu · kien-thuc · cau-chuyen
[mockup] ảnh bo góc, tiêu đề navy tối đa 2 dòng
[audit] 1.2 · 3.2
[lý do vượt panel] Panel ĐÃ lo: tắt huy hiệu ngày (show_date="false"), bóng
nghỉ (depth) và bóng hover (depth_hover) — không viết CSS cho ba
thứ đó. Còn lại hai thứ panel KHÔNG với tới:
(1) `image_radius` của Flatsome tính bằng **%** (inc/shortcodes/
blog_posts.php dòng 136) nên không đặt được 12px thật — % trên
khung chữ nhật cho góc BẦU DỤC, lệch hẳn các thẻ khác;
(2) không có ô nào giới hạn tiêu đề còn 2 dòng.
-------------------------------------------------------------------------- */
.tl-card-baiviet .box-image,
.tl-card-baiviet .box-image img {
border-radius: var(--tl-bo);
}
/* ⛔ TỰ ĐỨNG ĐƯỢC, KHÔNG DỰA VÀO THEME CHA — đừng gỡ.
Thumbnail chỉ nằm đúng chỗ nhờ MỘT luật duy nhất trong `flatsome.css`:
`.has-equal-box-heights .box-image img, .has-format img, .image-cover i`
→ `position: absolute`. Mà `.image-cover` có `padding-top: 60%` +
`overflow: hidden`.
⇒ Nếu flatsome.css tới chậm, bị đệm bản cũ, hay áp thiếu, ảnh rơi về
`static`, tụt xuống DƯỚI hộp đệm rồi bị `overflow:hidden` cắt sạch —
để lại đúng một MẢNG TRẮNG ~240px, thẻ chỉ còn tiêu đề.
Đó là lỗi người dùng gặp 26/08 mà headless không tái hiện được.
Khai lại tại đây để thẻ không phụ thuộc thứ tự/độ tươi của CSS cha. */
.tl-card-baiviet .image-cover { position: relative; }
.tl-card-baiviet .image-cover img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tl-card-baiviet .box-text .post-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tl-card-baiviet .box {
transition: transform var(--tl-chuyen), box-shadow var(--tl-chuyen);
}
.tl-card-baiviet .box:hover { transform: translateY(-3px); }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Row/Column | khối: mốc hành trình (.tl-moc)
[trang] ve-toi
(vế .tl-timeline đã chuyển sang 40-page-toi-co-the-giup-gi.css 19/08)
[mockup] các mốc cao bằng nhau, ảnh dưới cùng thẳng một hàng
[audit] 3.3
[lý do vượt panel] Panel Col không có "equal height" cho phần tử BÊN TRONG
cột; nó chỉ kéo dài chính cột. Đo 19/08: chênh 108,8px ở ve-toi
và 22px ở toi-co-the-giup-gi, kéo theo ảnh lệch đúng ngần ấy.
-------------------------------------------------------------------------- */
.tl-moc .col-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.tl-moc .col-inner > *:last-child {
margin-top: auto; /* đẩy khối cuối (ảnh) xuống đáy ⇒ thẳng hàng */
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Featured Box (inline SVG) | khối: "Tại sao chọn" (.tl-ly-do)
[trang] trang-chu
[mockup] trang-chu.jpg — 4 icon CÙNG một kiểu nét
[audit] 3.4
[lý do vượt panel] Panel Icon Box KHÔNG đổi được màu icon ở đây: icon là ảnh
SVG từ Thư viện với inline_svg="true", màu nằm trong thuộc tính
stroke của chính tệp SVG. Đo 19/08: 3 icon nét #EB500E nhưng 1 icon
nét #1B4F9C — lệch hẳn. Đè bằng CSS `stroke` (thuộc tính CSS thắng
thuộc tính trình bày của SVG) giữ nguyên tệp gốc, nên khi thay bộ
icon thật thì chỉ cần xoá khối này.
-------------------------------------------------------------------------- */
.tl-ly-do .icon-box svg [stroke] { stroke: var(--tl-navy); }
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: shortcode CF7 | khối: biểu mẫu liên hệ (.tl-form-lienhe)
[trang] lien-he
[mockup] trang-lien-he.jpg — khối biểu mẫu nằm GIỮA cột nội dung
[audit] 3.6
[lý do vượt panel] Biểu mẫu là shortcode plugin, không phải phần tử Flatsome
⇒ không có panel nào. Đo 19/08: rộng 710px, dính mép trái cột
(margin-left 0, max-width none).
⚠ Bo góc ô nhập và viền cam khi focus ĐÃ có sẵn bên trên từ 18/08 — audit
liệt kê lại nhưng không phải việc mới.
-------------------------------------------------------------------------- */
.tl-form-lienhe {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* -----------------------------------------------------------------------------
[phục vụ] toàn site — trạng thái rê chuột và focus bàn phím
[trang] mọi trang
[mockup] mockup KHÔNG vẽ trạng thái nào (II.D) ⇒ bảng tự khai, 4T duyệt
[audit] 3.7
[lý do vượt panel] Panel Button có ô Hover nhưng chỉ cho vài hiệu ứng dựng
sẵn của Flatsome, không đặt được màu/độ đậm cụ thể; và không có ô
nào cho :focus-visible. Trợ năng bàn phím (WCAG 2.4.7) là bắt buộc.
-------------------------------------------------------------------------- */
.button.primary:not(.is-outline):hover {
/* Đậm hơn đúng 8%: #CE4C09 × 0,92 = #BE4608 (5,16:1 với chữ trắng, vẫn AA).
⚠ KHÔNG dùng filter:brightness() — nó không nằm trong tập thuộc tính mà
chặng 4 soi, nên bộ kiểm báo "nút không đổi gì khi hover"; và filter
còn tô lại cả icon con bên trong. Màu nền tường minh vừa kiểm được
vừa đúng phạm vi. */
background-color: #be4608;
border-color: #be4608;
}
.button.is-outline:hover {
background-color: var(--tl-cam-chu);
border-color: var(--tl-cam-chu);
color: var(--tl-trang); /* 5,14:1 — đạt AA */
}
/* Thẻ nâng nhẹ khi rê chuột */
.tl-card-buoc .col-inner,
.tl-quote-nho,
.tl-chu-de .col-inner {
transition: transform var(--tl-chuyen), box-shadow var(--tl-chuyen);
}
.tl-card-buoc .col-inner:hover,
.tl-quote-nho:hover,
.tl-chu-de .col-inner:hover {
transform: translateY(-3px);
box-shadow: var(--tl-bong-noi);
}
/* Viền focus bàn phím — CHỈ khi điều hướng bằng bàn phím, không nháy khi bấm
chuột. Cam #EB500E với nền trắng đạt 3,69:1 ⇒ vượt ngưỡng 3:1 của WCAG
1.4.11 cho đối tượng đồ hoạ. */
:focus-visible {
outline: 2px solid var(--tl-cam);
outline-offset: 2px;
}
/* =============================================================================
TỐI ƯU MOBILE 19/08/2026 — chỉ khổ ≤549 và ≤849.
Quyết định bố cục ghi ở spec/quyet-dinh-mobile.md.
============================================================================= */
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Button | khối: mọi nút trong nội dung + chip lọc
[trang] cả 6, CHỈ khổ điện thoại
[audit] audit-mobile mục 5 — 83 đích chạm <44px
[lý do vượt panel] Panel Button có ô Size (small/medium/large) nhưng KHÔNG
tách theo thiết bị: đổi size là đổi cả desktop. Đo được nút nội
dung cao 33px và chip lọc 32px trên điện thoại, đều dưới ngưỡng
chạm 44px của WCAG 2.5.8.
⛔ Vì vậy KHÔNG gỡ `size="small"` của chip như ý đầu tiên — gỡ là chip to
lên cả ở desktop, tức sửa thiết kế đang đúng để chữa lỗi chỉ có ở mobile.
⚠ min-height một mình không canh giữa được chữ (nút là inline-block, chữ
bám line-height) ⇒ phải inline-flex, giống nút CTA header ở 20-header.
-------------------------------------------------------------------------- */
@media (max-width: 549px) {
.button,
input[type="submit"] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* chip lọc chuyên mục vẫn giữ size="small" ở panel, chỉ nới vùng chạm */
.tl-chip .button { min-height: 44px; margin-bottom: 10px; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: shortcode CF7 | khối: nút GỬI của biểu mẫu
[trang] lien-he, CHỈ khổ điện thoại
[audit] audit-mobile mục 5
[lý do vượt panel] CF7 là plugin, không có panel Flatsome nào.
Đo được nút GỬI 166×39px — vừa hụt ngưỡng chạm vừa lọt thỏm giữa
các ô nhập rộng 270px ngay phía trên.
-------------------------------------------------------------------------- */
@media (max-width: 549px) {
.tl-form-lienhe .tl-form-nut input[type="submit"] {
width: 100%;
min-height: 48px;
}
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Text + Button | khối: thẻ CTA đè ảnh hero (.tl-card-cta)
[trang] trang-chu, khổ ≤849
[audit] audit-mobile mục 4.1
[lý do vượt panel] SỬA HỒI QUY CỦA CHÍNH TÔI. Đợt tinh chỉnh desktop 19/08
đặt padding-bottom:84px + margin-top:-68px để kéo nút vào trong
thẻ; hai số đó chỉnh theo nút cao 38,8px của DESKTOP. Khối ≤849
chỉ trả lại lề trái/phải, KHÔNG trả padding-bottom ⇒ trên điện
thoại nút thấp hơn và chữ xuống dòng khác, để hở **62px trống
rỗng** giữa chữ và nút (đo 19/08).
-------------------------------------------------------------------------- */
@media (max-width: 849px) {
/* Đo rồi mới chốt, không suy: với padding-bottom 76 + margin-top −60 thì
khoảng trống trên nút là 52px, dưới nút 1px — vì nút nay cao 44px
(min-height mới ở khối trên) chứ không còn 33px như lúc đo lần đầu.
Quan hệ đo được: trống_trên = (PB − M) + 36 · trống_dưới = (M − 44) − 15.
Muốn cả hai bằng 16px ⇒ M = 75, PB = 55. */
.tl-card-cta { padding-bottom: 55px; }
.tl-card-cta + .button { margin-top: -75px; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Tabs | khối: thanh tab lọc câu chuyện
[trang] cau-chuyen, CHỈ khổ điện thoại
[audit] audit-mobile mục 5
[lý do vượt panel] Panel Tabs chọn được kiểu nav (line/pills) nhưng không có
ô kích thước vùng chạm. Đo được 40px — hụt đúng 4px so với ngưỡng
44px của WCAG 2.5.8.
-------------------------------------------------------------------------- */
@media (max-width: 549px) {
.nav-tabs > li > a,
li.tab > a {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Image (.tl-video-facade) | khối: ảnh video + nút play
[trang] trang-chu · cau-chuyen
[mockup] cả hai trang có ảnh video
[lý do vượt panel] Panel Image không vẽ được nút play. Dựng bằng HAI
pseudo-element ⇒ không thêm phần tử nào vào DOM.
⚠ NÂNG CẤP 20/08: trước nằm trong `40-page-cau-chuyen.css`, nên ảnh video ở
TRANG CHỦ hoàn toàn không có nút play — nhìn y hệt một ảnh tĩnh, người dùng
không biết bấm được. Class dùng ở 2 trang ⇒ luật III.4.0 đưa về đây.
-------------------------------------------------------------------------- */
.tl-video-facade { position: relative; }
/* vòng tròn */
.tl-video-facade::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 2;
width: 52px;
height: 52px;
margin: -26px 0 0 -26px;
border: 2px solid #fff;
border-radius: 50%;
background: rgba(7, 27, 70, .6);
transition: background .2s ease;
pointer-events: none;
}
/* tam giác — dựng bằng border, lệch phải 3px cho cân thị giác */
.tl-video-facade::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
z-index: 3;
width: 0;
height: 0;
margin: -8px 0 0 -5px;
border-style: solid;
border-width: 8px 0 8px 13px;
border-color: transparent transparent transparent #fff;
pointer-events: none;
}
.tl-video-facade:hover::before { background: var(--tl-cam, #eb500e); }
/* Ảnh nhỏ hơn thì nút phải nhỏ theo, nếu không nó phủ gần kín khung */
@media (max-width: 549px) {
.tl-video-facade::before { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
.tl-video-facade::after { margin: -7px 0 0 -4px; border-width: 7px 0 7px 11px; }
}
/* -----------------------------------------------------------------------------
[phục vụ] phần tử: Video Button (lightbox) | khối: khung phát video dọc 9:16
[trang] trang-chu · cau-chuyen · ve-toi (lightbox dùng chung toàn site)
[mockup] Trang tính 4T gửi 29/08 — cột GHI CHÚ: "Video ngang hiển thị tỷ lệ
16:9, video dọc/Shorts hiển thị tỷ lệ 9:16… không kéo méo hoặc
crop mất nội dung."
[lý do vượt panel] Flatsome khoá CỨNG `.mfp-iframe-scaler{padding-top:56.25%}`
(16:9) cho MỌI video trong lightbox — không có ô panel nào đổi tỉ
lệ theo từng video. Video dọc rơi vào khung ngang sẽ bị viền đen
hai bên và nhỏ hẳn lại, đúng thứ ghi chú yêu cầu tránh.
⚠ Lightbox được chèn thẳng vào , NGOÀI `.page-wrapper`, nên KHÔNG
scope theo class trang được như mọi khối khác. Thay vào đó neo theo CHÍNH
ID video trong `src` của iframe — đặc hiệu tuyệt đối cho đúng 3 video dọc,
không đụng bất kỳ video ngang nào (kể cả video thêm về sau).
⚠ `:has()` — cùng kỹ thuật đã dùng ở mục `.tl-form-lienhe select` phía trên
và ở 40-page-cau-chuyen.css; cần vì `.mfp-iframe-scaler` là CHA của iframe
mang `src`, mà CSS không có bộ chọn cha nào khác.
Bề rộng suy từ CHIỀU CAO màn hình (width = height × 9/16 = height × 0,5625)
thay vì đặt số cứng: video dọc luôn cao gấp 1,78 lần bề rộng nên nếu kẹp
theo bề rộng thì trên màn thấp sẽ tràn khỏi khung nhìn. Trừ 100px cho đệm
40px trên/dưới của `.mfp-iframe-holder` + nút đóng (`top:-40px`).
-------------------------------------------------------------------------- */
.mfp-iframe-holder .mfp-content:has(.mfp-iframe[src*="ELcR5VWMJdw"]),
.mfp-iframe-holder .mfp-content:has(.mfp-iframe[src*="Xi4MWCsqdc4"]),
.mfp-iframe-holder .mfp-content:has(.mfp-iframe[src*="0842Vx75rE4"]) {
max-width: min(92vw, calc((100vh - 100px) * 0.5625));
}
.mfp-iframe-scaler:has(.mfp-iframe[src*="ELcR5VWMJdw"]),
.mfp-iframe-scaler:has(.mfp-iframe[src*="Xi4MWCsqdc4"]),
.mfp-iframe-scaler:has(.mfp-iframe[src*="0842Vx75rE4"]) {
padding-top: 177.7778%; /* 16 / 9 — đảo lại tỉ lệ 56,25% của Flatsome */
}