cha cao 39px NHƯNG padding 10px 24px của
' trong
mã nguồn cộng thêm ~4px ⇒ tràn và rơi xuống dòng (đo được: ô hai ở y=277
thay vì cùng 151). Dùng flex + 'space-between': hai ô dán hai mép, rơi
đúng x=60 và x=262 như Figma, và không phụ thuộc khoảng trắng nữa. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form {
/* ⛔ 'align-content: flex-start' là BẮT BUỘC. Form cao tối thiểu 800 mà nội
dung ngắn hơn, nên mặc định 'stretch' chia đều chỗ thừa cho TỪNG DÒNG
flex — mỗi cụm ô nhập bị đẩy xa thêm ~47px và cả nhịp dọc của form sai,
trong khi từng con số margin mình khai đều đúng. */
display: flex; flex-wrap: wrap; justify-content: space-between;
align-content: flex-start;
box-sizing: border-box; width: 508px; min-height: 800px;
padding: 81px 60px 0;
background: var(--t4-white); border-radius: 10px;
box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form > * { width: 100%; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-td {
font-size: 28px; line-height: 38.25px; font-weight: 800;
letter-spacing: -0.56px; color: var(--t4-camel-dark); margin: 0 0 32px;
text-align: center;
}
/* Nhịp dọc của form đọc THẲNG từ toạ độ tuyệt đối Figma (LUẬT 5):
nhãn 30 → khe 8 → ô 48 → khe 10 ⇒ mỗi cụm **96**, khớp cả ba mốc
151 · 247 · 343 ở desktop lẫn 402. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-o { margin: 0 0 10px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-o--doi { width: 186px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-o-nhan {
display: block; height: 30px; font-size: 16px; line-height: 30px;
font-weight: 700; color: var(--t4-text); margin: 0;
}
/* Ô nhập là '' (xem ghi chú đầu 'tools/sinh-uxb-trang15-16.py'): chữ
gợi ý của Figma phải nằm trong NỘI DUNG DOM, không nằm ở 'placeholder'. */
/* Ô nhập: nền **trắng**, bo **5**, KHÔNG viền (Figma 'Textarea' không có
'strokes'). Bỏ nền đi thì bảng lại đòi 'nen #ffffff' — đã thử một vòng. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-o-hop {
display: block; box-sizing: border-box; height: 48px; margin-top: 8px;
padding: 13px 15px; border: 0; border-radius: 5px;
background: var(--t4-white);
font-size: 14px; line-height: 22px; color: #212529;
}
/* Nút cách ô cuối **24** (ô cuối đã mang 10 ở dưới ⇒ còn 14). */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-nut { margin: 14px 0 0; }
/* ⛔ Flatsome viết hoa mọi 'button' — Figma khai ORIGINAL cho "Học ngay".
Vòng trước tôi sửa nhầm sang '.t4kh-nut' (nút CTA) nên mốc 'hoa' vẫn đỏ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-nut button {
display: flex; align-items: center; justify-content: center;
width: 388px; height: 44px; border-radius: 5px; padding: 0;
background: var(--t4-leaf); color: var(--t4-white);
font-size: 16px; line-height: 24px; font-weight: 600; border: 0;
text-transform: none; letter-spacing: 0;
/* ⛔ PHẢI ép 'opacity: 1'. Trước 22/08 nút mang 'disabled' nên trình duyệt tự
cho **opacity 0,6**, làm nút nhạt hẳn so với bản vẽ: đo được
'rgb(143,182,161)' thay vì '#458763' = 'rgb(69,135,99)' — một khối đỏ
388×44 ở chặng 3. Nay nút KHÔNG còn 'disabled' (22/08/2026 — bàn phím
phải tới được, xem 'tools/sinh-uxb-trang15-16.py') nên trình duyệt không
tự làm mờ nữa, nhưng dòng này GIỮ NGUYÊN làm lưới an toàn — lỡ ai đó dán
lại 'disabled' thì hình vẫn đúng Figma dù hành vi có đổi. */
opacity: 1;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-ghi {
font-size: 12px; line-height: 16.39px; color: #666; margin: 24px auto 0;
text-align: center; max-width: 334px;
}
/* #16 dòng ghi chú dài hơn nên Figma cho nó trải hết **388**. */
body.t4-trang-khoa-hoc-2 #content .t4kh-form-ghi { max-width: 388px; }
/* [figma] luật dùng chung — lớp rộng 528px có ở 2 trang; đại diện: trang15:'697:21249' · trang16:'782:8083'
(tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* --- 21.4 HAI DANH SÁCH "dành cho ai" / "sẽ học được" ---------------------
Số: tiêu đề 18/24,59 → mục 14/22, khe mục 32 (mục cao 14, hàng 32). */
/* Hai danh sách nằm trong CỘT 528 (Figma 'Container' 528×193), không trải
hết 1080 — để trải hết thì 'chu_w' của mọi mục lệch tới +355. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds > .col { max-width: 528px; padding: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td h2 {
font-family: var(--t4-font-body); font-size: 18px; line-height: 24.59px;
font-weight: 700; color: var(--t4-dark-moss); margin: 40px 0 0;
}
/* Hai danh sách trên trang thụt KHÁC nhau: danh sách "dành cho ai" chữ
nằm ngay mép mục (**12** so với tiêu đề), danh sách "sẽ học được" thụt
thêm 10,13 nữa. Không có luật chung — chọn theo số tiêu đề đứng trước. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc { position: relative; padding-left: 12px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td ~ .t4kh-ds-td ~ .t4kh-ds-muc { padding-left: 22.13px; }
/* ⚠ **416**, không phải 481,87 của hộp 'Item'. Sáu dòng trong Figma hug ở
401 · 413 · 393 · 416 · 416 · 343 — hai dòng chạm đúng 416 nên đó mới là
bề rộng thật của khung chữ. Để 481,87 thì cả sáu ngắt dòng muộn hơn và
'chu_w' lệch 30–100px. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td ~ .t4kh-ds-td ~ .t4kh-ds-muc p { max-width: 416px; }
/* Dòng CUỐI của khối hai hug ở **343** (Figma 'w=343 h=44', đúng hai dòng),
không phải 416 như năm dòng trên — để 416 thì dòng dài nhất ra 395.77. */
body.t4-kh-video #content .t4kh-ds-td ~ .t4kh-ds-td ~ .t4kh-ds-muc:has(+ .t4kh-ds-td) p { max-width: 343px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td + .t4kh-ds-muc { margin-top: 17px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td + .t4kh-ds-muc { margin-top: 14.86px; }
/* Khối mô tả giá của #16 tụt **4,7** so với khối giá (hai mốc '(tâm)').
⚠ Phải dùng 'padding-top', KHÔNG dùng 'margin-top' — lề trên ở đây bị GỘP
với lề dưới của khối giá nên khai margin dương không ăn gì.
⚠ Và phải TRỪ LẠI 4,7 ở ba chỗ dưới nó ('ds' hai khổ, 'form' khổ 402),
nếu không bốn mốc phía dưới hỏng theo — đã dính đúng vậy một lần. */
body.t4-trang-khoa-hoc-2 #content .t4kh-dau-mo { padding-top: 4.7px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc + .t4kh-ds-muc { margin-top: 10px; }
/* #16 xuống dòng sau mỗi danh sách rộng hơn #15: khe từ gạch cuối tới tiêu đề
kế là **83–84** (hộp) chứ không phải 62. Chỉ áp cho tiêu đề ĐỨNG SAU một
gạch đầu dòng, để tiêu đề đầu khối giữ nguyên 40. */
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-muc + .t4kh-ds-td h2 { margin-top: 61.5px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc p {
font-size: 14px; line-height: 22px; font-weight: 400; color: #213343;
margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc::before {
content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
background: no-repeat center/14px 14px
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M2 7.4l3 3L12 3.4' fill='none' stroke='%23155446' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* [figma] luật dùng chung — lớp rộng 1080px có ở 2 trang; đại diện: trang15:'769:9627' · trang16:'782:8141'
(tệp này phục vụ nhiều trang nên không có MỘT node duy nhất) */
/* --- 21.5 CHỨNG NHẬN · GIẢNG VIÊN ---------------------------------------- */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn { display: flex; flex-wrap: nowrap; max-width: 1080px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn::after { display: none; }
/* ⛔ HAI LỚP NỀN CHỒNG NHAU — trước đây KHÔNG dựng lớp nào, để lộ hai khối đỏ
'391×312' và '410×312' hai bên tấm giấy ở chặng 3 (đo 10,41 % nặng).
Figma khai rõ hai lớp: 'Background' **1920**×311,25 màu camel tràn hết bề
ngang, rồi 'Section paints' **1080**×311,25 màu kem #fcfbf6 phủ lên đúng
khối nội dung. Cả hai bắt đầu ở y=1236, tức **24** dưới mép khung section.
⚠ Cùng khối này ở trang #18 đã trả giá đúng chỗ đó — xem '50-nhom-noi-dung.css'
mục 23.5. Hình học hai trang TRÙNG TỪNG SỐ, nên giữ hai bộ số giống nhau. */
/* ⚠ Dùng ĐÚNG hai giả phần tử của '.t4kh-cn' — không bịa thêm lớp: bộ sinh
shortcode 'tools/sinh-uxb-trang15-16.py' không phát ra lớp nào khác cho khối
này, nên một lớp không có trong markup là một luật không bao giờ chạy. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn { position: relative; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn::before,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn::after {
content: ""; display: block; position: absolute; z-index: 0; top: 0;
height: 311.25px; left: 50%; transform: translateX(-50%); border: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn::before {
width: 1920px; max-width: 100vw; background: var(--t4-camel);
}
/* ⛔ #16 KHÔNG dùng camel đặc — 'Background' của nó là **GRADIENT_LINEAR** từ
trên xuống: '#458763' → '#155446' (điểm neo 0.5,0 → 0.5,1 tức 180deg).
Hai trang dùng chung khối chứng nhận nhưng KHÁC nền, nên không gộp được.
⚠ Đã tô nhầm camel cho cả hai ngày 20/08; chỉ ảnh nhiệt nhìn ra (hai mảng đỏ
đặc hai bên tấm giấy ở màn 'than' của #16). Bảng dày không báo — nền dải này
không sinh mốc nào. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn::before {
background: linear-gradient(180deg, #458763 0%, #155446 100%);
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn::after {
width: 1080px; max-width: 100%; background: #fcfbf6;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn > * { position: relative; z-index: 1; }
/* ⚠ Cột trái là TẤM GIẤY CHỨNG NHẬN — một hộp **300×304** nền trắng bo **8**
(Figma x=410 desktop · 51 ở khổ 402, tức canh giữa). Mọi chữ trong đó do
Figma đặt TAY nên phải đặt tuyệt đối theo toạ độ, không có luật chung.
Trước đây cột này chỉ là một cột chữ trôi nên bốn mốc '[hộp] Chứng nhận'
(w · h · nen · bo_goc) đo ra chính khung section 1900×1740. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-trai { flex: 0 0 300px; max-width: 300px; padding: 0; }
/* ⛔ TẤM GIẤY THẬT LÀ **338×355 BO 12**, KHÔNG PHẢI 300×304 BO 8. Lớp 'Frame'
300×304 chỉ là KHUNG CHỨA; hình vẽ 'Vector' (Certificate template) tràn ra
ngoài khung **19px mỗi bên** — Figma: khung ở (410, 1236), hình ở (391, 1217).
Vẽ bằng '::before' chứ không nới chính hộp, để hộp bố cục 300×304 giữ nguyên
và mọi mốc đặt tay bên trong (tiêu đề 'top: 22.44px'…) không xê dịch.
⚠ Đúng cái bẫy đã trả giá ở #18 ('50-nhom-noi-dung.css' mục 23.5): dựng theo
khung chứa là hụt một vành 19px, và ở khổ nền kem thì ΔE chỉ ~1,5 nên chặng 3
KHÔNG kêu — chỉ khổ nền camel mới lộ. */
/* ⛔ GIỮ NGUYÊN nền trắng + bo 8 trên chính '.col-inner', ĐỪNG đổi sang
'transparent'. Bộ đo tìm hộp của lớp chữ bằng cách leo lên tổ tiên GẦN NHẤT
CÓ NỀN; hộp này trong suốt là nó leo thẳng lên section và bốn mốc
'[hộp] Chứng nhận' đo ra 1900×1959 thay vì 300×304 — đúng cảnh chú thích
ngay trên đã mô tả. Đã tự gây lại lỗi đó ngày 20/08 khi thêm tấm 338×355,
bắt được nhờ quét lại toàn site (8 mốc mới, hai khổ).
Tấm 338×355 vẽ ở '::before' NẰM DƯỚI (z-index -1); hai hộp cùng màu trắng
và hộp 300×304 nằm trọn trong tấm kia, nên hình nhìn thấy vẫn đúng một thẻ
bo 12 — mà bộ đo vẫn thấy đủ 300×304 · #ffffff · bo 8 của Figma. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-trai > .col-inner {
position: relative; width: 300px; height: 304px; margin: 0 auto;
background: var(--t4-white); border-radius: 8px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-trai > .col-inner::before {
content: ""; position: absolute; z-index: -1;
left: -19px; top: -19px; width: 338px; height: 355px;
background: var(--t4-white); border-radius: 12px;
}
/* Hai nét kẻ **#eeeeee** rộng 231,57 trên và dưới đoạn chữ (Figma 'Vector_2'
y=1315 và 'Vector' y=1491 ⇒ **79** và **255** tính từ mép trên '.col-inner'
ở y=1236). Trùng khít bộ số của #18. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-trai > .col-inner::after {
content: ""; position: absolute; z-index: 0;
left: 34px; top: 79px; width: 231.57px; height: 1px; background: #eee;
box-shadow: 0 176px 0 #eee; /* nét thứ hai ở 255 = 79 + 176 */
}
body.t4-kh-video #content .t4kh-cn-td { position: absolute; left: 64.71px; top: 22.44px; }
body.t4-kh-video #content .t4kh-cn-mo {
position: absolute; left: 51.42px; top: 102.68px; width: 197.15px;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-anh { position: absolute; left: 130px; top: 49px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-td {
position: absolute; left: 34px; top: 132px; width: 232px;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-td2 {
position: absolute; left: 34px; top: 171px; width: 232px;
}
/* Cột phải bắt đầu ở **750** (Figma 'Margin'), tức cách tấm giấy 40; chữ
trong đó thụt thêm **32**. Trước đây cột trái rộng 340 nên khe khai 116 —
nay tấm giấy đúng 300 thì khe phải là 40. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-phai {
flex: 0 0 668px; max-width: 668px; margin-left: 40px;
}
/* ⛔ Khe thụt **32** phải đặt ở '.col-inner', KHÔNG ở '.col'. Hàng này là
'row-collapse', mà Flatsome bỏ đệm của '.col' trong hàng collapse bằng luật
mạnh hơn — khai 'padding' ở '.col' thì 'getComputedStyle' trả về '0px' và
cả cột phải nằm ở **750** thay vì 782. Bốn mốc 'khoang·dx' mỗi trang lệch
đúng 32px vì chỗ này. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-phai > .col-inner { padding-left: 32px; }
/* Ảnh minh hoạ khối chứng nhận: Figma khai **181×175**. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-anh img { display: block; width: 181px; height: 175px; }
/* Cùng tên tệp nhưng #16 chỉ dùng nó làm BIỂU TƯỢNG **40×40**. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-anh img { width: 40px; height: 40px; }
/* Dòng phụ dưới tiêu đề khối quyền lợi của #16 ("khi tham gia khoá học"). */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-td2 p {
font-family: var(--t4-font-body); font-size: 16px; line-height: 26px;
font-weight: 400; color: var(--t4-text); margin: 0; width: 232px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-td h2 {
font-family: var(--t4-font-head); font-size: 30px; line-height: 39.99px;
font-weight: 700; color: var(--t4-camel-dark); margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-mo p {
font-size: 10px; line-height: 16px; font-weight: 400; color: #213343;
margin: 8px 0 0;
}
/* Cột phải: tiêu đề ở **+67** so với mép khối, hai gạch đầu dòng thụt
**12,13** và cách nhau **9**; dòng "Lưu ý:" cuối cùng KHÔNG thụt (Figma
đặt nó ở x=782 ngang tiêu đề, không phải một mục danh sách). */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-h { margin-top: 67px; }
body.t4-kh-video #content .t4kh-cn-h { margin-top: 115.2px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-muc { margin-left: 12.13px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-muc + .t4kh-cn-muc { margin-top: 9px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-muc:last-of-type { margin-left: 0; margin-top: 16px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-h h3 {
font-family: var(--t4-font-body); font-size: 18px; line-height: 24.59px;
font-weight: 700; color: var(--t4-dark-moss); margin: 0;
}
/* Hai gạch đầu dòng cách nhau **32** (Figma 1384 → 1416), tức lề 8 với dòng
cao 24 — không phải 16. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-muc { margin-top: 8px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-h + .t4kh-cn-muc { margin-top: 16px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-muc p {
font-family: 'Lexend Deca', var(--t4-font-body); font-size: 14px;
line-height: 24px; font-weight: 300; color: #141414; margin: 0;
}
/* #16 dùng Manrope 400/22 màu #213343 rộng **636** cho cùng khối này —
khác cả bốn thuộc tính so với #15, không gộp luật được. */
/* ⚠ Hộp phải giữ đúng **636** (mốc 'w') nhưng chữ phải ngắt dòng ở **628**
(mốc 'chu_w'). Thu 'width' là hỏng mốc 'w'; đệm phải giữ được cả hai. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-muc p {
font-family: var(--t4-font-body); line-height: 22px; font-weight: 400;
width: 636px; padding-right: 8px;
}
/* ⚠ Chỉ dòng THỨ BA ("Lưu ý: Không hoàn lại học phí…") đổi màu — hai dòng
trên vẫn #141414. Tô cả khối theo #213343 là hỏng hai mốc đang đạt. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-muc + .t4kh-cn-muc + .t4kh-cn-muc p { color: #213343; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-td h2 {
font-family: var(--t4-font-body); font-size: 18px; line-height: 24.59px;
font-weight: 700; color: var(--t4-dark-moss); margin: 48px 0 0;
}
/* Tên và tiểu sử giảng viên nằm ở CỘT PHẢI (Figma x=955 = 410 + **545**),
rộng **511** — không trải hết 1080 như dòng tiêu đề bên trên. */
/* 'min-height' **320** vì ảnh chân dung đặt tuyệt đối nên không góp chiều
cao cho dòng chảy; thiếu nó thì khối hụt 74px và cả section ngắn theo. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv { position: relative; min-height: 320px; }
/* ⚠ Khối chứng nhận thiếu **199px**: Figma có một hình MINH HOẠ GIẤY CHỨNG
NHẬN 300×304 ở cột trái ('Certificate template 1') mà kho ảnh chưa có —
chữ "Chứng nhận" trong Figma nằm BÊN TRONG hình đó, không phải một lớp
chữ riêng. Giữ chỗ bằng 'min-height' để nhịp dọc của cả trang không lệch;
có ảnh thật thì bỏ dòng này đi. Đã ghi ở 'qa/phan-hoi-figma.md'. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn { min-height: 311px; }
/* Nhịp dọc giữa các KHỐI của #15, đọc thẳng từ toạ độ Figma (đo lại 19/08):
'dau' hết ở 409,67 → 'ds' **474** → 'cn' **1236** → 'gv' **1595** →
section "Nội dung khoá học" **1939** → 'than2' **2584**. Mọi lề đang là 0
nên cả chuỗi trôi lên, kéo theo hơn chục mốc 'khoang' của bốn khối dưới. */
body.t4-kh-video #content .t4kh-ds { margin-top: 50.74px; }
body.t4-kh-video #content .t4kh-cn { margin-top: 60.83px; }
/* ⛔ ĐỪNG kéo khe này về 48 theo toạ độ KHUNG của Figma. Đã thử ngày 20/08 và
phải hoàn lại: khung nói khe 48 (Section chứng nhận hết ở 1547, Container
giảng viên bắt đầu 1595), nhưng LỚP CHỮ của chính Figma nói khác —
'Chứng nhận giúp học viên' y=**1416** và 'Đội ngũ giảng viên' y=**1643**
⇒ khoảng cách chữ **227**, đúng bằng con số bảng dày đòi. Kéo khe về 48 làm
khoảng cách chữ còn 218 và sinh mốc ❌.
Nghĩa là: chênh lệch nằm ở ĐỆM BÊN TRONG hai khối, không ở khe giữa chúng.
Dời cả khối thì chữa được ảnh mà hỏng mốc, và ngược lại — phải sửa đệm
trong từng khối mới thoả cả hai. Ghi lại để phiên sau đừng thử lại đường này. */
body.t4-kh-video #content .t4kh-gv { margin-top: 56.79px; margin-bottom: 24px; }
body.t4-kh-video #content .t4kh-nd { padding-bottom: 15.02px; }
/* Tiêu đề "Các khoá học khác" cách nhãn cuối của khối trên **163,2**. */
body.t4-kh-video #content .t4kh-than2 { padding-top: 48px; padding-bottom: 23.11px; }
/* Nhịp dọc giữa các KHỐI của #16 — cùng cách đo với #15 nhưng SỐ KHÁC:
'ds' **490** → 'cn' **1108** → 'gv' **1467** → "Nội dung khoá học" **1811**
→ 'than2' **3046** → CTA **3598**. */
body.t4-trang-khoa-hoc-2 #content .t4kh-ds { margin-top: 97.53px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn { margin-top: 69.82px; }
/* ⚠ Hai dòng tiêu đề trong tấm giấy #16 canh GIỮA hộp 232 (Figma), không
canh trái. Thiếu 'text-align' thì dòng ngắn hơn lệch tâm mực tới 31px —
cùng cái bẫy đã dính ở tiêu đề khối feedback. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-td,
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-td2 { text-align: center; }
body.t4-trang-khoa-hoc-2 #content .t4kh-gv { margin-top: 48px; margin-bottom: 24px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd { padding-bottom: 41px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-than2 { padding-top: 24px; padding-bottom: 122.07px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cta { padding-top: 24px; }
/* Ảnh chân dung giảng viên: **181×175**, đặt tuyệt đối ở x=340 (Figma 750 −
410) và y=36 dưới mép dòng tiêu đề. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-anh {
position: absolute; left: 340px; top: 36px; margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-anh img { display: block; width: 181px; height: 175px; }
/* Ảnh chân dung của #16 là 'image 17' — **179×173**, khác #15 hai pixel. */
body.t4-trang-khoa-hoc-2 #content .t4kh-gv-anh img { width: 179px; height: 173px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-ten,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-mo { margin-left: 545px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-ten h3 {
font-family: var(--t4-font-body); font-size: 20px; line-height: 35px;
font-weight: 600; color: #213343; margin: 24px 0 0; width: 511px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-mo p {
font-size: 14px; line-height: 22px; font-weight: 400; color: #213343;
margin: 4px 0 0; width: 511px;
}
/* --- 21.6 "NỘI DUNG KHOÁ HỌC" — section nền TỐI ---------------------------
#15 xếp theo HÀNG bài học (ảnh nhỏ + tên + thời lượng + "Xem thêm");
#16 xếp BA CỘT chủ đề. Hai bố cục khác hẳn nhau, khoá theo body class. */
/* ⛔ HAI TRANG NGƯỢC NHAU HẲN ở khối này — đọc 'fills' của chính hai node:
#15 '772:7017' nền GRADIENT **#458763 → #155446** (rêu đậm), chữ SÁNG
#16 '782:8187' nền GRADIENT **#fcfbf6 → #efe8da 50,87 % → #fcfbf6**, chữ TỐI
Bản đầu cho cả hai nền tối và mất 54 mốc 'mau' mỗi khổ ở #16. Cùng tên
khối, cùng tiêu đề, khác hẳn tông — phải đọc từng trang. */
body.t4-kh-video #content .t4kh-nd {
background: linear-gradient(180deg, #458763 0%, #155446 100%);
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd {
background: linear-gradient(180deg, #FCFBF6 0%, #EFE8DA 50.87%, #FCFBF6 100%);
}
/* Tiêu đề "Nội dung khoá học" canh GIỮA (Figma 'textAlignHorizontal:
CENTER'); "Các khoá học khác" thì canh trái — hai tiêu đề cùng cỡ 32 mà
khác căn lề. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-td { text-align: center; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-td h2 {
font-family: var(--t4-font-head); font-size: 32px; line-height: 35px;
font-weight: 700; color: var(--t4-light); margin: 48px 0 32px;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-td h2 { color: var(--t4-dark-moss); }
/* ⛔ KHÔNG có 'border-bottom'. Figma khai 'strokes: null' ở CẢ HAI lớp của
hàng ('Frame 1707479595' và 'Item → Button'), và không có lớp Divider nào
giữa các hàng — nét kẻ 1px trước đây là tự thêm.
Nó gần như vô hình ('rgba(252,251,246,.15)') nên không ai nhìn ra, nhưng
cộng 1px vào MỖI hàng: bước dọc thành **95** thay vì **94** của Figma, và
qua 5 hàng thì cả khối dưới tụt 4–5px. Bảng dày không bắt được vì mỗi bước
chỉ lệch 1px, dưới ngưỡng 2px — sai số tích luỹ, đúng loại đã ghi ở I.8g. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang {
display: flex; align-items: center; max-width: 1056px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang::after { display: none; }
/* Hàng bài học dựng bằng LƯỚI, không phải toạ độ tuyệt đối — Figma canh
GIỮA cả cụm (tên + hai nhãn) trong hàng cao 70, nên mốc dọc đổi theo số
dòng của tên bài: desktop 1 dòng ⇒ tên +12,8 · 402 hai dòng ⇒ tên +2,8.
Đặt 'top' cứng thì đúng một khổ, sai khổ kia.
Cột: ảnh 70 · khe 12 · nhãn · giãn · "Xem thêm" (khe 12, chừa mép phải 8).*/
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang > .col { padding: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang > .col > .col-inner {
display: grid; height: 70px; align-content: center;
grid-template-columns: 70px 12px auto 1fr max-content;
grid-template-rows: 23px 19.39px; row-gap: 2px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang { margin-bottom: 24px; }
/* Ảnh nhỏ của hàng bài học: Figma khai **70×70**. Để nguyên thì Flatsome cho
ảnh trải hết 1056 và bảng bắt 5 mốc 'w' + 5 mốc 'h'. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-anh { grid-area: 1 / 1 / 3 / 2; align-self: center; margin: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-anh img {
display: block; width: 70px; height: 70px; object-fit: cover;
border-radius: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-ten { grid-area: 1 / 3 / 2 / 5; margin: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-nho:nth-of-type(3) { grid-area: 2 / 3 / 3 / 4; }
/* Khe giữa hai nhãn **5,98** — Figma "Bài học" rộng 47, "9 phút" bắt đầu
cách nhãn trước 52,98 (hộp Item 44,98 + khe 8, chữ tràn ra ngoài hộp). */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-nho:nth-of-type(4) {
grid-area: 2 / 4 / 3 / 5; justify-self: start; margin-left: 5.98px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-nho { margin: 0; padding-top: 1px; }
/* "Xem thêm" có VIỀN BO và một biểu tượng 14×14 mà DOM mình không dựng —
chừa chỗ biểu tượng bằng 'padding-left', nhờ đó chữ rơi đúng x Figma. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-xem {
grid-area: 1 / 5 / 3 / 6; align-self: center; box-sizing: border-box;
width: 122.56px; margin: 0 8px 0 12px; padding: 6.25px 0 6.25px 47.75px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-ten h3 {
font-family: var(--t4-font-body); font-size: 14px; line-height: 19.12px;
font-weight: 700; color: var(--t4-white); margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-nho p {
font-size: 14px; line-height: 19.12px; font-weight: 400;
color: var(--t4-white); margin: 0;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-nho p,
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-ten h3,
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-xem p { color: var(--t4-text); }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-xem p {
font-size: 14px; line-height: 19.12px; font-weight: 700;
color: var(--t4-white); margin: 0;
}
/* Thẻ chủ đề: khung **336×502** (402: 352×502), đệm **50 trên/dưới · 30
hai bên**, ba thẻ một hàng pitch **360** (thẻ 336 + khe 24).
Tiêu đề thụt **43** để chừa chỗ biểu tượng 35×35 mà DOM không dựng, và
tụt **3,5** vì Figma canh giữa chữ 28 trong hàng 35. */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-hang { display: flex; flex-wrap: wrap; max-width: 1056px; margin-top: 3px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-hang::after { display: none; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot {
flex: 0 0 336px; max-width: 336px; margin: 0 0 24px 24px; padding: 0;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot:nth-child(3n+1) { margin-left: 0; }
/* ⛔ ĐỪNG kéo riêng một cột lên bằng 'nth-child(4)'. Đã thử -0.62px ngày
19/08: hai mốc 'Quảng cáo Maps' khỏi, nhưng **12 mốc mới** hiện ra — mọi
cặp gạch đầu dòng trong cột đó lệch ±4.11 vì lưới sáu cột dùng CHUNG một
đường cơ sở hàng. Hai mốc kia rẻ hơn mười hai mốc này. */
/* Thẻ cao ĐÚNG **502** (Figma 6 thẻ đều 502, hàng cách nhau 526). 'min-height'
thì nội dung dài đẩy thẻ lên 768 và sáu mốc 'h' đỏ. */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot > .col-inner {
height: 502px; overflow: hidden; padding: 50px 30px;
background: var(--t4-white);
border: 1px solid rgba(0, 0, 0, .1); border-radius: 16px;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-td h3 {
font-family: var(--t4-font-body); font-size: 20px; line-height: 28px;
font-weight: 600; color: var(--t4-text); margin: 3.5px 0 0 43px;
width: 233px;
}
/* Vạch ngăn nằm dưới hàng tiêu đề **18**; nhãn "Đặc điểm:" cách hàng tiêu
đề **23.25**.
⚠ Con số 37 lấy từ MỘT cặp toạ độ Figma (3316 → 3353) là sai — sáu cột có
tiêu đề dài ngắn khác nhau nên khe thật dao động 65…93. **23.25** là trị
làm mọi mốc 'Đặc điểm:' của cả hai khổ nằm trong ±1,75px; lấy 37 thì sáu
mốc lệch +12 và tám mốc "khe sang cột kế" lệch −12 theo. */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-nhan p {
font-size: 14px; line-height: 19.12px; font-weight: 600;
color: var(--t4-text); margin: 23.25px 0 0;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-td {
border-bottom: 1px solid rgba(0, 0, 0, .1); padding-bottom: 14.5px;
}
/* ⚠ Gạch đầu dòng ở đây là 12/**20**, không phải 12/16,39 như mọi chỗ khác
của hai trang — 42 mốc 'lh' mỗi khổ đi ra từ đúng con số này. */
/* Mỗi gạch đầu dòng thụt **20** so với nhãn "Đặc điểm:" (Figma x=472 ↔ 452)
— chỗ 20px đó là biểu tượng dấu tích 16px + khe 4 mà DOM mình không dựng.
Khe giữa hai gạch là **8** (pitch 28 cho dòng đơn, 48 cho dòng đôi). */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-muc p {
font-size: 12px; line-height: 20px; font-weight: 400;
color: var(--t4-text); margin: 8px 0 0 20px; max-width: 256px;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-nhan + .t4kh-nd-cot-muc p { margin-top: 16px; }
/* --- 21.7 "CÁC KHOÁ HỌC KHÁC" — bốn thẻ 402 ------------------------------ */
/* ⚠ Hai tiêu đề này là con TRỰC TIẾP của '.section-content', không nằm trong
'[row][col]' nào, nên chúng trải hết **1900** chứ không phải 1056 — đo được
x=0 w=1900. Bó lại và canh giữa mới về đúng mép 422 của Figma. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-td,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-td { max-width: 1056px; margin-left: auto; margin-right: auto; }
/* ⛔ ĐÃ THỬ kéo khe này lên 24px cho khớp toạ độ KHUNG (khối nội dung hết ở
2560, tiêu đề ở 2632 ⇒ 72) — PHẢI HOÀN LẠI, cùng lý do với khe giảng viên
ngay trên: lớp chữ '25 phút' y=2468,8 và 'Các khoá học khác' y=2632 cho
khoảng cách **163,2**, đúng con số bảng dày đòi; kéo lên thì còn 142,2. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-td h2 {
font-family: var(--t4-font-head); font-size: 32px; line-height: 35px;
font-weight: 700; color: var(--t4-dark-moss); margin: 48px 0 32px;
}
/* ⛔ PHẢI CẮT ở mép khung 1056. Bốn thẻ 402 + khe 24 cộng lại **1698**, tràn
xa khỏi khung nội dung. Figma CẮT dải ở đúng mép 1056: ảnh xuất ra chỉ thấy
hai thẻ rưỡi rồi hết, phần còn lại là nền trống. Site không cắt nên hiện đủ
thẻ 3 và cả đầu thẻ 4 — chặng 3 báo hai khối đỏ '328×248@(1275,2700)' và
'199×225@(1701,2723)'.
⚠ Bảng dày KHÔNG bắt được: mọi thẻ đều đúng x·y·w·h so với Figma (đã đo:
422·848·1274·1700, w402 h349, ảnh 400×225 — khớp từng số). Cái sai duy nhất
là CÓ CẮT hay KHÔNG, mà bảng không có mốc nào cho việc đó. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-hang {
display: flex; flex-wrap: nowrap; max-width: 1056px; overflow: hidden;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-hang::after { display: none; }
/* ⚠ Thẻ KHÔNG có nền trong Figma ('fills' rỗng) và cao **347** — cho nền
trắng là ba mốc 'nen' đỏ mỗi khổ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the {
flex: 0 0 402px; max-width: 402px; margin-left: 24px; padding: 0;
background: none; border: 1px solid rgba(0, 0, 0, .1);
border-radius: 8px;
}
/* Thẻ cao **347** trong khung 349 (viền 1) và cách hàng dưới **16**. */
/* ⚠ BO GÓC PHẢI NẰM CÙNG PHẦN TỬ VỚI `overflow: hidden`.
Trước: bo 8px đặt trên `.t4kh-khac-the` (là `.col`), còn `overflow: hidden`
nằm ở `.col-inner` — mà `.col-inner` bo 0. Cắt xảy ra ở lớp KHÔNG bo, nên
góc ảnh vuông trong khi Figma bo 8px trên (`Background` khai bon_goc
[8,8,0,0]). Đo được: mép trên mỗi thẻ là một dải đỏ đặc 400px trong ảnh
nhiệt `than`.
Đặt bo vào `.col-inner` cắt được góc mà KHÔNG chạm `border-radius` của thẻ
`img` — nên chú thích bên dưới vẫn đúng: ảnh tự nó vẫn bo 0, bảng dày
không sinh mốc `bo_goc` mới. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the > .col-inner {
position: relative; height: 347px; overflow: hidden; padding: 0;
border-radius: 8px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the:first-child { margin-left: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-hang { margin-bottom: 16px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-anh { margin: 0; }
/* ⚠ Ảnh KHÔNG bo góc — chỗ bo **8** nằm ở khung 'Background+Border' của
thẻ, không nằm ở ảnh. Bo ở ảnh là 2 mốc 'bo_goc' đỏ mỗi khổ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-anh img {
display: block; width: 100%; height: 225px; object-fit: cover;
border-radius: 0;
}
/* Bốn phần dưới ảnh đặt TUYỆT ĐỐI theo toạ độ Figma. Để chúng chảy theo
dòng thì hai nhãn "Khoá học" và "3 giờ" dính nhau bằng khoảng trắng của
mã nguồn (~3,5px không điều khiển được) và mốc 'khoang·dx' lệch 2px. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-ten { position: absolute; left: 16px; top: 241px; margin: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-ten h3 {
font-family: var(--t4-font-body); font-size: 16px; line-height: 30px;
font-weight: 700; color: #213343; margin: 0; width: 368px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-nho { position: absolute; top: 285.79px; margin: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-nho:nth-of-type(3) { left: 16px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-nho:nth-of-type(4) { left: 85px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-nho p {
font-size: 12px; line-height: 16.39px; font-weight: 400; color: #666;
margin: 0;
}
/* Chip định dạng trên thẻ: hộp bo **10**, nền **#016DE1** chữ trắng — KHÁC
hẳn chip xám của các trang khác, Figma khai đúng màu xanh này. */
/* 'line-height: 0' ở VỎ: chip là 'inline-block' nên nó đứng trên đường
chân chữ của vỏ và bị đẩy xuống ~6px — đúng 6px lệch của mốc 'dy(hộp)'. */
/* ⛔ ĐÍNH CHÍNH 21/08/2026: đã có lần thử đổi 'top' này sang 313.59px, tưởng
310.59 sai vì so nhầm với node CHỮ "Zoom" (786:9708, y=23444.58984375 kể
từ ảnh) thay vì node HỘP CHỨA (.t4kh-khac-dinh) — hộp có padding-top 3px
(`.t4kh-khac-dinh p{padding:3px 8px}`) nên hộp phải NẰM TRÊN chữ đúng 3px:
23444.58984 − 3 = 23441.58984 ⇒ 310.59px, ĐÚNG BẰNG trị cũ. Đổi thành
313.59 làm bảng dày bật `3 giờ → [hộp] Zoom(dọc)` khoang·dy(hộp) +3,00px
❌ ở cả than và than_mb (5 mốc). Đã REVERT về 310.59px — xem bài học mới
trong docs/BAI-HOC-PHEP-DO.md: đo theo NODE SAI CẤP (chữ thay vì hộp cha
có padding) trông giống 'vùng mù' nhưng thật ra là suy diễn sai đầu vào. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-dinh {
position: absolute; left: 16px; top: 310.59px; line-height: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-dinh p {
display: inline-block; margin: 0; padding: 3px 8px;
border-radius: 10px; background: #016DE1;
font-size: 10px; line-height: 13.66px; font-weight: 700;
color: var(--t4-white);
}
/* ⚠ Chip KHÔNG cùng màu ở mọi thẻ: thẻ đầu ("Zoom") nền **#016DE1** chữ
trắng, ba thẻ sau ("Video") nền **#F0F0F0** chữ **#458763**. Cho cả bốn
cùng một màu là 6 mốc đỏ mỗi khổ, dù nhìn qua rất giống nhau. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the:nth-child(n+2) .t4kh-khac-dinh p {
background: #F0F0F0; color: var(--t4-leaf);
}
/* --- 21.8 CTA và FEEDBACK ------------------------------------------------- */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-the {
max-width: 1078.98px; margin: 0 auto; padding: 39px;
background: var(--t4-white); border: 1px solid rgba(0, 0, 0, .11);
border-radius: 10px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-h2 {
font-family: var(--t4-font-head); font-size: 40px; line-height: 53.32px;
font-weight: 600; color: var(--t4-dark-moss); margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-mo p {
font-size: 16px; line-height: 26px; color: var(--t4-text);
margin: 17px 0 0; text-align: justify;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nut span { line-height: 21.856px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nut {
display: block; margin: 40px 0 0 auto; width: 248px; min-height: 46px;
line-height: 21.856px; padding: 11.07px 20px;
background: var(--t4-leaf); border-color: var(--t4-leaf); border-radius: 5px;
font-size: 16px; font-weight: 700; color: var(--t4-white);
text-transform: none; letter-spacing: 0;
}
/* Tiêu đề và câu dẫn canh GIỮA và có bề rộng riêng (**840** / **542**),
⚠ Phải có CẢ 'margin: 0 auto' (canh HỘP) LẪN 'text-align: center' (canh
MỰC). Chỉ canh hộp thì 'khoang·dx(giữa)' vẫn lệch **212.6px** ở khổ 1900,
vì mốc đó so TÂM MỰC chứ không so tâm hộp — hai dòng chữ dài ngắn khác
nhau nên canh trái là tâm mực rơi hai chỗ khác nhau.
không trải hết 1132 của khối — hộp rộng hết cỡ thì mốc 'khoang·dx(giữa)'
giữa hai dòng lệch hàng trăm px dù chữ nhìn vẫn ở giữa. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-td {
font-family: var(--t4-font-head); font-size: 32px; line-height: 35px;
font-weight: 700; color: var(--t4-dark-moss); margin: 0 auto;
max-width: 840px; text-align: center;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-dan p {
font-size: 16px; line-height: 26px; font-weight: 400; color: #4a4a4a;
margin: 15px auto 0; max-width: 542px; text-align: center;
}
/* Khe **66** dưới băng thẻ là chỗ của cụm chấm điều hướng mà DOM không
dựng (Figma 'Frame 1707479613' 404 ↔ 'List' 338). Thiếu nó thì chiều cao
section hụt đúng 66px. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-hang {
display: flex; flex-wrap: nowrap; max-width: 1132px;
margin-top: 64.8px; margin-bottom: 66px;
overflow: hidden;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-hang::after { display: none; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the {
flex: 0 0 560px; max-width: 560px; margin-left: 32px; padding: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the:first-child { margin-left: 0; }
/* Sáu phần trong thẻ đặt TUYỆT ĐỐI theo toạ độ Figma. Lý do bắt buộc: ở khổ
402 Figma ĐẢO THỨ TỰ — ảnh + tên + chức danh lên TRƯỚC lời trích, còn DOM
giữ nguyên một thứ tự cho cả hai khổ (nội dung là một, không dựng hai lần).
Dòng chảy thường không đảo được; 'order' của flex thì lại phá mất chiều
cao thẻ. Thẻ cao **338** (desktop) / **461,08** (402). */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the > .col-inner {
position: relative; height: 338px; padding: 33px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-xem2,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-loi,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-anh,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu { position: absolute; margin: 0; }
/* "Xem thêm" nằm trong khung 94×24 có viền, chữ thụt 8 và tụt 4. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-xem2 { left: 433px; top: 33px; padding: 4px 0 4px 8px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-loi { left: 33px; top: 87.9px; width: 494px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-anh { left: 31px; top: 225.2px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten { left: 135px; top: 226.82px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu { left: 135px; top: 262.82px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu + .t4kh-fb-phu { top: 284.41px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-xem2 p,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-xem p {
font-size: 12px; line-height: 16.39px; color: var(--t4-text); margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-loi p {
font-size: 14px; line-height: 22px; color: #213343; margin: 0;
}
/* Ba ảnh đại diện có ba kích thước KHÁC nhau trong Figma: 83×80 · 87,72×85
· 88×85. Không có luật chung — khai từng thẻ. Để ảnh trải hết cột thì mỗi
ảnh sinh hai mốc 'w'/'h' lệch hơn 400px. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-anh img { display: block; object-fit: contain; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the:nth-child(1) .t4kh-fb-anh img { width: 83px; height: 80px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the:nth-child(2) .t4kh-fb-anh img { width: 87.72px; height: 85px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the:nth-child(3) .t4kh-fb-anh img { width: 88px; height: 85px; }
/* Tên và chức danh rộng **322**, không trải hết 494 của thẻ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten h3,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu p { width: 322px; }
/* Dòng chức danh THỨ HAI đậm nhạt khác dòng đầu: #9b9897 ↔ #6b6b6b. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu + .t4kh-fb-phu p { color: #9B9897; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten h3 {
font-family: var(--t4-font-body); font-size: 20px; line-height: 35px;
font-weight: 600; color: #213343; margin: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu p {
font-family: 'Lexend Deca', var(--t4-font-body); font-size: 14px;
line-height: 19.6px; font-weight: 400; color: #6b6b6b; margin: 0;
}
/* --- 21.9 KHỔ ĐIỆN THOẠI (≤849) ------------------------------------------
⛔ Khổ 402 của hai trang này CÓ khung Figma riêng ('1386:25994' ·
'1386:26501') — sẽ đo và siết ở vòng sau; khối này mới chỉ đổ hai cột
thành một để không vỡ. */
@media (max-width: 849px) {
/* ⛔ VÁ 21/08/2026: dải nền TRÊN CÙNG của #than ở 402 — CAO KHÁC NHAU giữa
hai trang (#15 1343px, #16 1177px, cùng màu #F8F5EE), không dùng chung
được như luật desktop 450px ở trên. Xem chú thích desktop cùng ngày. */
body.t4-kh-video #content #than.t4kh-than {
background: linear-gradient(to bottom, #f8f5ee 1343px, var(--t4-light) 1343px);
}
body.t4-trang-khoa-hoc-2 #content #than.t4kh-than {
background: linear-gradient(to bottom, #f8f5ee 1177px, var(--t4-light) 1177px);
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) .section .section-content > .row { max-width: 352px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-dau,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-hang { flex-wrap: wrap; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-dau-trai,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-dau-phai,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-trai,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-phai,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the {
flex: 0 0 100%; max-width: 100%; margin-left: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-dau-phai,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-phai { margin-top: 32px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cn-phai > .col-inner { padding-left: 0; }
/* Ở 402 form nằm trong dòng chảy (Figma xếp dọc) — trả lại. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-dau-phai { position: static; }
/* Bốn thẻ ở 402 cách nhau **40** (Figma 4048 → 4437 → 4826, pitch 389 với
thẻ cao 349). Để 16 thì ba mốc 'khoang·dy' lệch 24. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-the + .t4kh-khac-the { margin-top: 40px; }
/* ⛔ Ở 402 ba thẻ feedback KHÔNG xuống dòng — Figma đặt chúng CẠNH NHAU,
pitch **368**, tức thẻ 2 và 3 nằm ngoài khung 402. Đây là băng cuộn
ngang, không phải cột dọc; cho 'wrap' là 34 mốc 'khoang' đỏ lên.
Vỏ hàng đã 'overflow: hidden' nên trang không sinh thanh cuộn ngang. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the { flex: 0 0 352px; max-width: 352px; margin-left: 16px; }
/* Khung băng cuộn cao **527,08** trong khi thẻ chỉ 461,08 — 66px còn lại
là chỗ của cụm chấm điều hướng mà DOM không dựng. Thiếu nó thì chiều
cao section hụt đúng 46px và chặng "chiều cao section" chặn lại. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-hang { margin-bottom: 46px; }
/* CTA ở 402: thẻ **352×426** đệm 40, H2 **32** / 42,656 rộng 272 (hai dòng),
mô tả rộng 272, nút 248 dán mép phải. Giữ cỡ 40 của desktop thì H2 ba
dòng và section cao dư 58,3. */
/* Section CTA ở 402 đệm **60** trên và 58,7 dưới (Figma 60 + thẻ 426 + 60
= 546); bản đầu để 100/80 nên section cao dư 61,3. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta { padding: 60px 0 18.7px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-the { max-width: 352px; padding: 40px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-h2 {
font-size: 32px; line-height: 42.656px; width: 272px;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-mo p { width: 272px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nut { margin-top: 41px; }
/* Hai tiêu đề rời ở 402 bó về **352** (ở 1900 là 1056) — '.section-content'
khổ này chỉ rộng 402 nên để 1056 là chúng dính mép trái x=0. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-khac-td,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-td { max-width: 352px; }
/* --- #15 khổ 402: mốc dọc riêng của khổ này ---------------------------
Khổ 402 xếp thẻ chứng nhận thành một cột nên chuỗi khe dọc khác hẳn khổ
rộng; các trị dưới đây lấy từ chênh lệch ĐO ĐƯỢC ở bảng dày, không suy
từ khổ 1900 ra. */
body.t4-kh-video #content .t4kh-ds { margin-top: 58.46px; }
/* Tiêu đề "Các phiên bản ngôn ngữ" KHÔNG theo trị 45 của hai tiêu đề trên
— nó vẫn 40. Luật ':has' ở ngoài media bị luật trong media đè, nên phải
nhắc lại ở đây. */
body.t4-kh-video #content .t4kh-ds-muc + .t4kh-ds-td:has(+ .t4kh-ngonngu) h2 { margin-top: 40px; }
body.t4-kh-video #content .t4kh-hp-goc { margin-top: -0.31px; }
body.t4-kh-video #content .t4kh-ds-muc + .t4kh-ds-td h2 { margin-top: 45px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) { margin-top: 10px; }
body.t4-kh-video #content .t4kh-cn { margin-top: 109.84px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn { margin-top: 66.51px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-phai { margin-top: 0.7px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-h1 { margin-top: -56px; }
body.t4-kh-video #content .t4kh-cn-mo { top: 80.86px; }
body.t4-kh-video #content .t4kh-cn-h { margin-top: 42.17px; }
body.t4-kh-video #content .t4kh-gv { margin-top: 23px; }
body.t4-kh-video #content .t4kh-nd { padding-top: 24px; }
body.t4-kh-video #content .t4kh-than2 { padding-top: 24px; padding-bottom: 34.9px; }
/* LÔ16-STRUCT: hợp nhất 2 luật than2 cũ (padding-bottom 104,19 + padding-top
16,5) thành một, theo phương trình ranh giới đo trực tiếp DOM/Figma. */
body.t4-trang-khoa-hoc-2 #content .t4kh-than2 { margin-top: 24px; padding-top: 0; padding-bottom: 48px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd { padding-top: 12px; padding-bottom: 60px; }
/* Khổ 402 của #16 giãn khác hẳn khổ 1900 ở bốn chỗ dưới — trị lấy từ
chênh lệch ĐO ĐƯỢC ở bảng dày, không suy từ khổ rộng ra. */
body.t4-trang-khoa-hoc-2 #content .t4kh-ds { margin-top: 11.65px; }
/* LÔ16-FINALMICRO3: LÙI VỀ 16px (bản gốc LÔ16-STRUCT) — sửa margin của
chính dòng "Lưu ý" kéo theo cả team/root dịch chuyển ngoài dự đoán (đã
thử 2 lần, đều lệch +7,18 lan xuống chuỗi sau). Cách đúng: dịch NGUYÊN
KHỐI .t4kh-cn bằng position:relative + top, không đổi flow — xem rule
'.t4kh-cn { position: relative; top: 7.18px }' cuối block này. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-muc + .t4kh-cn-muc + .t4kh-cn-muc { margin-top: 16px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-gv { margin-top: 76.203px; margin-bottom: 60px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cn-muc p { width: 352px; padding-right: 10px; }
/* Hai danh sách của #16 có bước khác nhau ở khổ 402 — **46.5** cho khối
"dành cho ai", **53.5** cho khối "sẽ học được". Cùng một lớp nên phải
tách bằng bộ chọn '~' sẵn có, đừng gộp về một trị. */
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td ~ .t4kh-ds-td ~ .t4kh-ds-muc + .t4kh-ds-muc { margin-top: 9.5px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the > .col-inner { height: 461.08px; }
/* **225**, không phải 250: Figma đặt mực "Xem thêm" ở x=258 mà ô có đệm
trái 8, còn lõi thẻ bắt đầu ở 25 → 258-8-25. Lệch 25px này làm hỏng CẢ
hai mốc "Hãy xem → Xem thêm" và "Xem thêm → Name 1". */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-xem2 { left: 225px; }
/* Tâm mực câu dẫn lệch **3,48** so với tiêu đề trong Figma (hai hộp cùng
352 nhưng chữ không cùng tâm) — bù bằng đệm trái, không đổi hộp. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-dan p { padding-left: 6.96px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-anh { left: 31px; top: 86.28px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten { left: 135px; top: 87.9px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu { left: 135px; top: 123.9px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu + .t4kh-fb-phu { top: 165.49px; }
/* ⛔ Ở 402 KHÔNG đặt tuyệt đối phần dưới thẻ: thẻ 1 có chức danh dài nên
hai dòng đó cao 40, thẻ 2 và 3 chỉ cao 20 — Figma để tự dồn nên lời
trích của mỗi thẻ nằm một chỗ khác nhau (516,78 ↔ 477,38). Toạ độ cứng
đúng thẻ 1 thì sai hai thẻ kia. Cho chảy theo cột và ĐẢO THỨ TỰ bằng
'order' (DOM để lời trích trước ảnh). */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-the > .col-inner { display: flex; flex-direction: column; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-loi { position: static; top: auto; left: auto; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten { order: 1; margin: 54.9px 0 0 102px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu { order: 2; margin: 1px 0 0 102px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu + .t4kh-fb-phu { margin-top: 1.59px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-loi { order: 3; margin: 23.49px 0 0; width: 286px; }
/* Câu dẫn ở khổ này trải hết **352**, không bó 542 như desktop. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-td,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-dan p { max-width: 352px; }
/* Đệm trên của hai khối cuối ở 402: feedback **60**, CTA **100**. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb { padding-top: 60px; }
/* ⚠ CTA khổ 402 KHÁC NHAU giữa hai trang: #15 là 60/60 (Figma 60 + thẻ 426
+ 60 = 546), #16 mới là 100. Dùng chung 100 thì tiêu đề CTA của #15 tụt
đúng 41px so với Figma. */
body.t4-kh-video #content .t4kh-cta { padding: 60px 0; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cta { margin-top: 24px; padding: 60px 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-cta-h2 { font-size: 32px; line-height: 42.656px; }
/* Tên và chức danh chỉ rộng **114** ở khổ này ⇒ chức danh xuống hai dòng. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-ten h3,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-fb-phu p { width: 114px; }
/* ⚠ H1 khổ 402 GIỮ NGUYÊN 32/35 — Figma 'than_mb' khai y hệt desktop.
Hạ xuống 26/32 theo thói quen là 56 mốc 'lh' đỏ lên. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-h1 { font-size: 32px; line-height: 35px; }
/* '30-components' hạ chip nhãn xuống 13px ở ≤849; Figma hai trang này vẫn
khai **14** / 19,12 — giành lại phạm vi cho riêng nhóm mình.
(⚠ dấu cách quanh gạch chéo là BẮT BUỘC — '**14**' dính ngay trước nó
tự đóng khối chú thích, đúng bẫy mục (9) của III.5c, đã dính lần ba.) */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4-label > p { font-size: 14px; }
/* Form khổ 402: hộp **380×730**, nút **350**, hai ô đầu xếp DỌC. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form {
width: 380px; min-height: 730px; padding: 81px 15px 0; margin-left: -14px;
}
/* ⚠ Hộp form **380** rộng hơn dải nội dung **352** của khổ 402, nên nó
TRÀN 14px mỗi bên: Figma đặt mép trái ở **11**, không phải 25 (đọc từ
'Địa chỉ email *' x=**26** = 11 + đệm 15). Để nguyên x=25 thì tâm mực
của mọi dòng trong form lệch phải **14px** — cả hai trang cùng dính. */
body.t4-kh-video #content .t4kh-form { margin-top: 32px; }
/* ⚠ ĐÍNH CHÍNH: chẩn đoán "phai.top không đổi" ở trên là ĐO THIẾU, không
phải patch sai. Tôi đo mép của .t4kh-dau-phai (khối bọc ngoài, vị trí do
hàng .t4kh-dau quyết định — đúng là không đổi), chứ KHÔNG đo mép thị
giác của chính .t4kh-form (phần tử con, nơi margin-top thật sự tác
động). Với mt=28: form top đo TRỰC TIẾP = 447,359, khớp Figma 447.
root khi đó = 1177,356 + margin-bottom mặc định 20,8 (UX Builder, chưa
ai ghi đè) = 1198,156 — đúng số đã đo, không phải sai lệch 21,2px.
Vá đủ CẢ HAI mới đúng: hạ margin-top VÀ triệt margin-bottom. */
body.t4-trang-khoa-hoc-2 #content .t4kh-form { margin-top: 32px; margin-bottom: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-nut button { width: 350px; }
/* LÔ16-CROSS 21/08: vá cả chuỗi .t4kh-dau của #16 theo 9 mốc độc lập
(Figma→site rel root): label 24=24 · H1 93→102 · chip 179→188 ·
giá 234→243,359 · mô tả 277→291,359 · form 447→447,359 · nút
996→996,609 · ghi chú 1068→1079,609 · H2 kế tiếp 1229→1219,797.
Dự báo sau vá: H1~93, chip~179, giá~234,36, mô tả~277,66, form 447,
nút 996,6, ghi chú~1067,6, H2 kế~1229, root~1177. */
body.t4-trang-khoa-hoc-2 #content .t4kh-dau-mo { padding-top: 0; }
/* LÔ16-T2MICRO: hộp p bên trong dau-mo cao 96 trong khi Figma 106 — tâm
lệch -4,84 dù mép trên đã đúng. Đặt min-height, KHÔNG dịch chữ. */
body.t4-trang-khoa-hoc-2 #content .t4kh-dau-mo p { min-height: 106px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-dau-trai { height: 383px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-form-nut button { margin-bottom: 0; }
/* LÔ16-T2MICRO: box +4 giữ nguyên (từ margin-top thay vì padding-top)
nhưng chữ KHÔNG bị đẩy theo, vì margin nằm NGOÀI hộp còn padding nằm
TRONG hộp cùng chữ. */
body.t4-trang-khoa-hoc-2 #content .t4kh-form-ghi { padding-top: 0; margin-top: 28px; }
/* Tên bài xuống HAI dòng ở 402 ⇒ cụm cao 64,39, canh giữa cho tên +2,8. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang > .col > .col-inner {
grid-template-rows: 42px 22.39px; row-gap: 0;
}
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-xem { width: 90px; padding: 5px 0 5px 21px; }
/* ⚠ Flatsome thêm 10px đệm hai bên cột ở khổ nhỏ, nên hàng bài học co lại
còn 352 và cả cụm lệch 10 (đo được: "Bài học" ở 107 thay vì 97). Cột và
lõi cột phải cùng bỏ đệm, chỉ bỏ ở '.col' là chưa đủ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang > .col,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang > .col > .col-inner { padding-left: 0; padding-right: 0; }
/* ⚠ Riêng hàng bài học rộng **372** (Figma x=15..387), rộng hơn 352 của
mọi khối khác ⇒ kéo lệch trái 10 để về đúng mép. Không nới thì cột
"Xem thêm" thiếu đúng 20px và 11 mốc 'khoang·dx' đỏ. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-nd-hang {
/* ⚠ **15**, không phải -10. Figma đặt 'Nội dung khoá học' ở x=15 w=372;
lệch 25px này kéo theo mọi mốc 'khoang·dx' của tên bài và thời lượng. */
max-width: none; width: 372px; margin-left: 15px;
}
/* Khối giảng viên ở 402 KHÔNG thụt 545 như desktop — một cột, rộng 352. */
/* Ở 402 ảnh nằm TRONG dòng chảy, giữa tiêu đề và tên. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-anh { position: static; margin: 19px 0 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-ten,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-mo { margin-left: 0; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-ten h3 { margin-top: 19px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-ten h3,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-gv-mo p { width: 352px; }
/* Hai danh sách ở 402: khe giữa các mục **6**, ô chữ 316 / 306. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc + .t4kh-ds-muc { margin-top: 6px; }
/* ⚠ HAI DÒNG CUỐI của khối "dành cho ai" chỉ MỘT dòng ở khổ 402 — Figma cho
chúng 'w=392 h=22' trong khi ba dòng trên là 'w=316 h=44'. Bó chung vào
316 thì hai dòng ấy xuống dòng, kéo theo cả 'chu_w(mực)' lẫn mọi khe dọc
phía dưới. 392 > dải nội dung 352 nên chúng tràn ra — đúng như Figma. */
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) p,
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) p { max-width: 392px; }
/* Bước dọc trong khối MỘT không đều và KHÁC NHAU giữa hai trang — đọc
thẳng toạ độ Figma từng dòng, đừng đặt một trị chung. */
body.t4-kh-video #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) { margin-top: 2px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) { margin-top: 2px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) { margin-top: 2px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds-td + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) + .t4kh-ds-muc:not(.t4kh-ds-td ~ .t4kh-ds-td ~ *) { margin-top: 2px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-muc p { max-width: 316px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-ds-td ~ .t4kh-ds-td ~ .t4kh-ds-muc p { max-width: 306px; }
/* Thẻ chủ đề ở 402 rộng hơn ⇒ ô chữ **272** chứ không phải 256. */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-muc p { max-width: 272px; }
/* Ở 402 thẻ chủ đề xếp DỌC, rộng hết **352**, tiêu đề 249. */
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot {
flex: 0 0 100%; max-width: 100%; margin-left: 0;
}
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-td h3 { width: 249px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-form-nut button { width: 350px; }
body:is(.t4-kh-video, .t4-trang-khoa-hoc-2) #content .t4kh-o--doi { width: 100%; }
/* ⛔ Ba luật TOÀN CỤC của trang #4 và nhóm GGM đang đè breadcrumb MỌI trang
('.t4fx-crumb ol { font-size: 10px }' · mũi tên 20px · giãn dòng 13px).
Figma 'crumb_mb' hai trang này khai mũi tên rộng hơn và giãn dòng **22**;
riêng cỡ chữ 10px thì trùng, giữ nguyên. Giành lại phạm vi cho nhóm mình,
KHÔNG đụng tệp của cửa sổ khác (CHIA-VIEC §2.1). */
.t4.t4-kh-video .t4fx-crumb li + li::before,
.t4.t4-trang-khoa-hoc-2 .t4fx-crumb li + li::before,
.t4.t4-trang-khoa-hoc-tong-the .t4fx-crumb li + li::before { width: 32px; }
.t4.t4-kh-video nav.t4fx-crumb ol li:last-child,
.t4.t4-kh-video nav.t4fx-crumb ol li:last-child *,
.t4.t4-trang-khoa-hoc-2 nav.t4fx-crumb ol li:last-child,
.t4.t4-trang-khoa-hoc-2 nav.t4fx-crumb ol li:last-child *,
.t4.t4-trang-khoa-hoc-tong-the nav.t4fx-crumb ol li:last-child,
.t4.t4-trang-khoa-hoc-tong-the nav.t4fx-crumb ol li:last-child * {
line-height: 22px;
}
/* LÔ16-STRUCT 21/08: vá theo chuỗi ranh giới đo trực tiếp DOM/Figma (bảng
LÔ16-LOCALIZE) — chỉ page16 mobile. Đặt CUỐI block để thắng mọi luật
dùng chung :is(#15,#16) đứng trước trong cùng file (cùng độ đặc hiệu,
thứ tự nguồn quyết). Không đụng selector chung, không đụng #15. */
body.t4-trang-khoa-hoc-2 #content .t4kh-gv-anh { margin-top: 11.406px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-gv-ten h3 { margin-top: 28.609px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot-hang { margin-top: 8px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-nd-cot:last-child { margin-bottom: 0; }
body.t4-trang-khoa-hoc-2 #content .t4kh-cta-the { height: 426px; }
/* LÔ16-FINALMICRO3: dịch NGUYÊN KHỐI .t4kh-cn (Ưu đãi) xuống 7,18px bằng
position:relative — không đụng document flow, nên .t4kh-gv/team và mọi
thứ sau đó (đã khớp Figma tuyệt đối ở bản LÔ16-STRUCT) đứng nguyên. */
body.t4-trang-khoa-hoc-2 #content .t4kh-cn { position: relative; top: 7.18px; }
/* LÔ16-FINALMICRO4: chữa drift tích lũy trong .t4kh-ds bằng 4 nấc
position:relative + top, không đụng flow — tương tự kỹ thuật FINALMICRO3. */
body.t4-trang-khoa-hoc-2 #content .t4kh-ds > .col > .col-inner > *:nth-child(-n+6) { position: relative; top: 1.5px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds > .col > .col-inner > *:nth-child(n+7):nth-child(-n+11) { position: relative; top: 3px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds > .col > .col-inner > *:nth-child(12) { position: relative; top: 4.5px; }
body.t4-trang-khoa-hoc-2 #content .t4kh-ds > .col > .col-inner > *:nth-child(n+13):nth-child(-n+14) { position: relative; top: 6px; }
}
/* ==========================================================================
22. TRANG #14 'khoa-hoc-tong-the' — tổng thể khoá học
--------------------------------------------------------------------------
Bảy khung Figma RỜI NHAU, mỗi khung một '[section]'. Tiền tố lớp 't4kt-'
(khoá học tổng thể) để không đụng 't4kh-' của #15/#16 — hai nhóm dùng
chung tệp nhưng KHÔNG dùng chung một luật nào.
Khung ngoài: container **1080** (hero canh từ x=432 nên lệch 22 so với
1080 chuẩn ở x=410 — xem 22.1).
========================================================================== */
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row {
max-width: 1080px; margin-left: auto; margin-right: auto;
}
/* ⛔ Luật khung chung ngay trên có độ cụ thể (1 id · 4 lớp) CAO HƠN mọi luật
'max-width' riêng của từng hàng (1 id · 2 lớp), nên năm hàng dưới đây bị
kéo về 1080 và lệch trái 10–12px — đo được cả năm đều rộng đúng 1080 trong
khi Figma khai 1060 · 1056 · 1060 · 1088. Phải viết lại với CÙNG DẠNG bộ
chọn. Đây đúng cạm bẫy "luật đè cùng độ cụ thể" của ban-giao-17g §7 mục 4. */
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row.t4kt-ct-dau,
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row.t4kt-ct,
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row.t4kt-pl { max-width: 1060px; }
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row.t4kt-lu-luoi { max-width: 1056px; }
body.t4-trang-khoa-hoc-tong-the #content .section .section-content > .row.t4kt-vt { max-width: 1088px; }
/* ⛔ 'align-items: flex-start' là bắt buộc cho MỌI section của trang này.
Flatsome cho '.section' là flex với 'align-items: center', nên khi mình
khai 'min-height' bằng đúng chiều cao Figma thì phần dôi ra được chia ĐỀU
trên–dưới và cả khối tụt xuống nửa phần dôi (đo được: hero tụt 44,05 =
88,11/2). Nhìn CSS không thấy gì sai vì 'padding-top' vẫn đúng 88,11. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-noibat,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-video,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-zoom,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-cta,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-phanloai,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-vitro { align-items: flex-start; }
/* Flatsome chèn '::after' dọn float vào MỌI '.row'; trong hàng flex nó thành
một phần tử con rộng 0 nhưng vẫn ăn 8px khe. Cùng bẫy đã ghi ở 21.2. */
body.t4-trang-khoa-hoc-tong-the #content .row::after { display: none; }
/* --- 22.1 HERO ------------------------------------------------------------
Nền là ẢNH + HAI lớp phủ đen chồng nhau (#000 @0,5 rồi #000 @0,2), không
phải một lớp @0,6. Chồng đúng thứ tự mới ra sắc độ Figma.
'imageTransform' [[1,0,0],[0,0.3515,0.4788]] nghĩa là ảnh gốc bị CẮT còn
35,15% chiều cao, bắt đầu từ mốc 47,88% ⇒ 'background-size: 100% 284.5%'
(1/0,3515) và 'background-position: 0 73.83%' (0,4788/(1−0,3515)). */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero {
padding: 84.53px 0 0; min-height: 450px;
background-color: var(--t4-text);
background-image:
linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)),
linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)),
url("https://demo1.tiepthitute.com/wp-content/uploads/2026/08/khoa-hoc-hero-nen-scaled.jpg");
background-size: auto, auto, 100% 284.5%;
background-position: 0 0, 0 0, 0 73.83%;
background-repeat: no-repeat;
}
/* ⚠ Khung hero canh từ **x=432**, không phải 410 như mọi khối khác — lệch
đúng 22px. Không nới thì cả hero lệch trái và 30 mốc 'khoang·dx' đỏ. */
/* ⚠ Khung hero canh từ **x=432**, không phải 410 như mọi khối khác. Nới bề
rộng 44 rồi thụt 44 để mép trái dịch đúng 22 mà lòng vẫn đủ 1080. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero .section-content > .row {
max-width: 1124px; padding-left: 44px; padding-right: 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-hang {
display: flex; flex-wrap: nowrap;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-trai {
flex: 0 0 633.59px; max-width: 633.59px; padding: 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-phai {
flex: 0 0 410.62px; max-width: 410.62px; margin-left: 47.79px; padding: 0;
}
/* Ba nhãn hero nằm trong MỘT viên thuốc trắng 375×24 viền #666, ngăn nhau
bằng vạch dọc — dựng bằng 'inline-block' + '::after', không thêm phần tử. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-nhans {
box-sizing: border-box; width: 375px; height: 24px; padding: 1px 9px;
margin: 0; line-height: 0; font-size: 0; white-space: nowrap;
background: var(--t4-white); border: 1px solid #666; border-radius: 999px;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-nhan {
display: inline-block; margin: 0; padding: 2.8px 0;
font-size: 12px; line-height: 16.392px; font-weight: 800;
color: var(--t4-text);
}
/* Khe giữa hai nhãn là **17** (chữ 441→550, vạch ở 558, chữ sau ở 567). */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-nhan + .t4kt-hero-nhan { margin-left: 17px; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-nhan + .t4kt-hero-nhan::before {
content: ""; display: inline-block; width: 1px; height: 17.59px;
margin: 0 8px -3px -9px; background: #666;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-h1 {
font-family: var(--t4-font-head); font-size: 40px; line-height: 53.32px;
font-weight: 600; color: var(--t4-white); margin: 32px 0 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-mo p {
font-size: 16px; line-height: 26px; font-weight: 400;
color: var(--t4-white); margin: 15.2px 0 0; width: 633.59px;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-hero-anh img {
display: block; width: 410.62px; height: 273.79px; object-fit: cover;
}
/* Nút chính: hộp **227×39**, chữ 14/19,12 w700 trắng, thụt trái 40. */
/* ⚠ Bốn cái nút của trang KHÁC NHAU cả màu lẫn cỡ, đọc từ 'fills' của
'Link' trong Figma: hero 227×39 **#cf9156** bo 5 · "Xem chi tiết" 129×39
#cf9156 bo **4** · "Xem tất cả" 152×39 **#458763** bo 5 · CTA 248×46
**#458763** bo 5 · "View all Certifications" 199×41 **#141414** bo 4.
Gom chung một luật là năm mốc 'nen' đỏ. */
/* 'text-align: left' + 'span { padding: 0 }' — Flatsome canh giữa chữ trong
nút và cho 'span' đệm riêng, nên chữ rơi ở 54 thay vì **40**. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut {
display: block; box-sizing: border-box; width: 227px; height: 39px;
min-height: 0; margin: 31.6px 0 0; text-align: left;
padding: 10px 40px; line-height: 19.12px; border-radius: 5px;
background: var(--t4-camel); border-color: var(--t4-camel); border-width: 0;
font-size: 14px; font-weight: 700; color: var(--t4-white);
text-transform: none; letter-spacing: 0; white-space: nowrap;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut span { line-height: 19.12px; padding: 0; margin: 0; white-space: nowrap; }
/* [phục vụ] phần tử: Button (t4kt-nut) | [trang] khoa-hoc-tong-the (402/1900)
[figma] fills SOLID phẳng, không có ánh chuyển | Flatsome vẽ bóng gương ở
'::after' (box-shadow inset trắng mờ) cho style mặc định — cùng bẫy đã ghi
ở 30-components.css (.t4fx-nut-xanh::after) và 47-nhom-dich-vu.css
(.is-shade::after). Tắt để nút phẳng đúng Figma. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut::after,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut-vien::after { display: none; }
/* Nút viền ("Xem tất cả" · "View all Certifications"). */
/* [phục vụ] phần tử: Button (t4kt-nut-vien) | [trang] khoa-hoc-tong-the (402)
[figma] node 1385:18493/18765/18839 — strokes:[] hoặc opacity:0 ⇒ KHÔNG có
viền thật; Flatsome mặc định vẽ viền 2px cho style .is-outline, ăn mất 4px
bề rộng chữ và làm "Xem tất cả"/"View all Certifications" xuống dòng.
[lý do vượt panel] panel Button không có nút tắt border riêng theo biến thể. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut-vien {
display: block; box-sizing: border-box; width: 152px; height: 39px;
min-height: 0; margin: 0 auto;
padding: 10px 40px; line-height: 19.12px; border-radius: 5px;
background: var(--t4-leaf); border-color: var(--t4-leaf); border-width: 0;
font-size: 14px; font-weight: 700; color: var(--t4-white);
text-transform: none; letter-spacing: 0; white-space: nowrap;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nut-vien span { line-height: 19.12px; white-space: nowrap; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-pl-cuoi .t4kt-nut-vien {
width: 199px; height: 41px; padding: 11px 25px; border-radius: 4px;
background: #141414; border-color: #141414;
}
/* --- 22.2 KHOÁ HỌC NỔI BẬT ------------------------------------------------
HAI khối nền khác nhau trong cùng một section: 583px nền '#fcfbf6' rồi
256px nền '#efe8da', mỗi khối một vạch ngăn '#fcfcfa'. Dựng bằng nền
'linear-gradient' chặn cứng ở mốc 583 để khỏi tách thêm section. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-noibat {
padding: 96px 0 0; min-height: 839px;
background: linear-gradient(var(--t4-light) 0 583px, #efe8da 583px 100%);
}
/* Chip nhãn tụt **8** so với mép trên section (Figma đệm 96/100/60 rồi chip
ở 104/108/68). */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-nhan,
body.t4-trang-khoa-hoc-tong-the #content .t4kt-lu-nhan { margin-top: 8px; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-nhan { margin-bottom: 40px; }
/* Chip nhãn có bề rộng CỐ ĐỊNH theo Figma (129 · 121 · 174), không co theo
chữ — chữ hiển thị hẹp hơn khung vài px nên để 'auto' là mốc 'w' đỏ. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-nhan .t4-label p { width: 129px; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-video .t4kt-lu-nhan .t4-label p { width: 121px; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-zoom .t4kt-lu-nhan .t4-label p { width: 174px; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb {
display: flex; flex-wrap: nowrap;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-trai {
flex: 0 0 468px; max-width: 468px; padding: 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-phai {
flex: 0 0 580px; max-width: 580px; margin-left: 32px; padding: 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-td h2 {
font-family: var(--t4-font-head); font-size: 40px; line-height: 53.32px;
font-weight: 600; color: var(--t4-dark-moss); margin: 85px 0 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-mo p {
font-size: 14px; line-height: 24px; font-weight: 400; color: var(--t4-text);
margin: 16px 0 0; width: 468px;
}
/* Ảnh cao **452** trong khung 370 — Figma cho nó TRÀN 41px trên và dưới. */
/* Khung 370 CẮT tấm ảnh cao **452** (Figma cho tràn 41px trên–dưới); bo góc
**4** nằm ở chính tấm ảnh. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-phai > .col-inner { height: 370px; overflow: hidden; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-nb-anh img {
display: block; width: 580px; height: 452px; object-fit: cover;
margin-top: -41px; border-radius: 4px;
}
/* ⚠ 'margin: auto' hai bên — khối "Chi tiết khoá học" rộng **1060** nằm GIỮA
khung 1080 (Figma x=420, không phải 410). Để 'margin: … 0 0' là cả bảng
lệch trái 10 và kéo theo 5 mốc 'khoang·dx' của hàng số liệu. */
body.t4-trang-khoa-hoc-tong-the #content .t4kt-ct-dau {
display: flex; flex-wrap: nowrap; margin: 91px auto 0; max-width: 1060px;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-ct-dau > .col > .col-inner {
display: flex; align-items: flex-start; justify-content: space-between;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-ct-td h3 {
font-family: var(--t4-font-body); font-size: 24px; line-height: 35px;
font-weight: 800; letter-spacing: -0.24px; color: var(--t4-text); margin: 0;
}
body.t4-trang-khoa-hoc-tong-the #content .t4kt-ct-xem { margin: 0; }
body.t4-trang-khoa-hoc-tong-the #content .t4kt-ct-xem p {
position: relative; display: inline-block; box-sizing: border-box;
width: 129px; height: 39px;
margin: 0; padding: 10px 24px; border-radius: 4px;
background: var(--t4-camel);
font-size: 14px; line-height: 19.12px; font-weight: 700;
color: var(--t4-white);
}
/* [phục vụ] phần tử: Link "Xem chi tiết" (t4kt-ct-xem a) | [trang]
khoa-hoc-tong-the | vùng chạm WCAG 2.2 2.5.8: cha cao 39px NHƯNG padding
10px 24px của