. */
.t4 .t4ks-quaylai.button span { line-height: 19px !important; }
/* Icon 19x19 tại x=9 — vẽ bằng ::before nên KHÔNG cần thêm phần tử, và
::before là TRANG TRÍ chứ không phải nội dung (III.2 cấm thẻ trong Text,
không cấm giả phần tử trong CSS). */
.t4 .t4ks-quaylai.button::before {
content: ""; position: absolute; left: 9px; top: 5px;
width: 19px; height: 19px;
background-color: #fff;
-webkit-mask: var(--t4ks-icon-quaylai) center / 13px 12px no-repeat;
mask: var(--t4ks-icon-quaylai) center / 13px 12px no-repeat;
}
/* Lề trên đặt trên CHÍNH nút (nút là `.button`, không phải `.text`, nên
luật margin toàn cục của mô-đun 30 không chạm tới). `inline-flex` +
`align-items:center` cho chữ nằm giữa pill cao 29 → mép chữ ở +5, cộng lề
8 thành 13 đúng như Figma. Trước đó chữ dính sát mép trên (+1,19). */
.t4 .t4ks-quaylai.button {
position: relative;
display: inline-flex; align-items: center;
}
.t4 .t4ks-ke.is-divider {
flex: 1 1 auto; width: auto; max-width: 970px; height: 1px;
margin: 0 0 0 16px; background-color: rgba(20, 20, 20, .12);
}
/* --- H2 «Khoá học phổ biến» ---------------------------------------------- */
.t4 .t4ks-hang-h2 { margin-top: 26px; }
.t4 .t4ks-h2 h2 {
margin: 0; font-family: var(--t4-font-head); font-weight: 700;
font-size: 32px; line-height: 35px; color: #155446; text-align: center;
letter-spacing: 0; text-transform: none;
}
/* --- Bộ lọc: 4 link camel, cả cụm căn giữa -------------------------------
Figma: Link cao 35 tại y=10.5, các Link DÍNH LIỀN nhau (gap 0); bề rộng
khác nhau 83/95/82/103 là do đệm ngang cố định 16px hai bên. */
/* ⛔ Flex phải đặt trên `.col-inner`, KHÔNG phải `.col`. Flatsome bọc nội
dung cột trong `.col-inner`, nên flex ở `.col` chỉ dàn đúng MỘT đứa con là
cái bọc đó — bốn link vẫn xếp dọc. Lượt đo đầu báo dx=0 dy=35 ở cả ba cặp. */
/* Figma: khung `loc` cao 56, các Link cao 35 nằm giữa (y=10,5). Cho khung
cao 56 rồi căn giữa, đừng cộng đệm — cộng đệm thì hộp phình ra 77. */
.t4 .t4ks-hang-loc > .col { padding: 0; min-height: 56px; }
.t4 .t4ks-hang-loc > .col > .col-inner {
display: flex; justify-content: center; align-items: center; gap: 0;
min-height: 56px;
}
/* ⛔ Đệm phải ở phần tử BỌC, không ở ``. Bộ đo hỏi hộp của chính `
`,
nên đệm 8px trên `
` kéo hộp đó lên cao hơn mốc Figma đúng 8px — số đo
sai mà nhìn màn hình thì y hệt. */
.t4 .section-content .text.t4ks-loc { margin: 0; padding: 8px 16px; }
.t4 .section-content .text.t4ks-loc p {
margin: 0; padding: 0;
font-family: var(--t4-font-body); font-weight: 700;
font-size: 14px; line-height: 19px; color: #cf9156;
white-space: nowrap;
}
/* --- Lưới 14 thẻ: 4 cột x 240, khe 32 ------------------------------------ */
/* Figma khung `luoi` cao 1280: 32 chừa trên + 4 hàng×280 + 3 khe×32 (=1216)
+ 32 chừa DƯỚI. Thiếu chừa dưới thì hộp còn 1248 — bảng dày không thấy vì
nó chỉ so mốc→mốc, chốt chiều cao section thì thấy. */
.t4 .t4ks-luoi {
display: flex; flex-wrap: wrap; gap: 32px;
padding-top: 32px; padding-bottom: 32px; margin-top: 0;
}
.t4 .t4ks-luoi > .col.t4ks-the {
flex: 0 0 240px; width: 240px; max-width: 240px;
min-height: 280px; padding: 0;
position: relative;
background: #fff; border: 1px solid #ccc; border-radius: 8px;
box-shadow: 0 1px 8px rgba(20, 20, 20, .08);
overflow: hidden;
}
/* Ruột thẻ xếp bằng flex-wrap: ảnh và tiêu đề chiếm trọn dòng, cặp meta
nằm ngang, ba pill KHÔNG đủ chỗ (124 + 139 > 206) nên tự rơi xuống dòng
dưới — đúng bố cục Figma mà không cần thêm hàng/cột lồng. */
/* ⛔ `align-items: flex-start` LÀ BẮT BUỘC, không phải làm đẹp. Mặc định
`stretch` kéo MỌI đứa con cao bằng dòng flex: đo được m1 cao 41 thì pill
cũng thành 41 dù Figma cho 20. Sai chiều cao rồi kéo theo sai mọi khoảng
cách dọc quanh nó. */
.t4 .t4ks-luoi > .col.t4ks-the > .col-inner {
padding: 0; display: flex; flex-wrap: wrap;
align-content: flex-start; align-items: flex-start;
}
.t4 .t4ks-anh, .t4 .t4ks-td { flex: 0 0 100%; }
/* ảnh 238x134, bo hai góc trên (Figma bon_goc 8/8/0/0) */
/* ⛔ `[ux_image]` tự phát một